import { IMyopLoader } from "./loaders/IMyopLoader";
import { IMyopComponent } from "./components/IMyopComponent";
import { BaseMyopMessage, Ref } from "../messages";
import type { IframeSDK } from "../Iframe";
import { IComponentConfig, IComponentDefinitionConfig, ISkinConfig } from "../common";
interface componentLoaderCreator {
new (loaders: IMyopLoader[]): any;
}
/**
* The Host SDK is designed for integration within the host application that serves as the container for Myop components.
* It provides essential functionalities and APIs for registering, managing, and communicating with Myop components.
* This SDK enables seamless embedding of independently developed components into the host application, ensuring smooth interoperability and consistent user experience across various Myop component implementations.
*/
export declare class HostSDK {
static Instance: () => HostSDK;
components2init: IMyopComponent[];
components: IMyopComponent[];
componentsLoaders: IMyopLoader[];
initiated: boolean;
version: any;
type2InstanceCount: Record;
assignId: (componentDefinition: IComponentDefinitionConfig) => string;
private inspected;
inspect: () => void;
private incomingMessageHandler;
send: (message: BaseMyopMessage) => void;
init: (customComponentLoaderCreators?: componentLoaderCreator[]) => void;
private _getSkinIdBySkinSelector;
private runSkinSelector;
loaderHooks?: loaderHooks;
loadComponent: (componentConfig: IComponentConfig, container?: HTMLElement | Ref, options?: loaderOptions) => Promise;
navigate: (component: IMyopComponent, newComponentConfig: IComponentConfig, options?: navigationOptions) => Promise;
}
export type navigationOptions = {
staged?: boolean;
init?: (component: IMyopComponent) => Promise;
skipInit?: boolean;
} & loaderOptions;
type relativeLoadConfigDirection = 'before' | 'after';
export type loaderHooks = {
afterSkinSelected?: (selectedSkin: ISkinConfig) => Promise;
} & ({
[key: string]: () => Promise | boolean;
} | {});
export interface relativeLoadConfig {
child: ChildNode | null;
direction: relativeLoadConfigDirection;
}
export interface IEnvironment {
[key: string]: any;
}
type ElementAttributes = {
[key: string]: string | number | boolean | undefined | null;
};
export interface loaderOptions {
id?: string;
hidden?: boolean;
connectProps?: boolean;
timeout?: number;
skipInit?: boolean;
relative?: relativeLoadConfig;
hooks?: loaderHooks;
elementAttributes?: ElementAttributes;
_environment?: IEnvironment;
_hasParent?: boolean;
_inspection?: boolean;
data?: any;
/**
* Raw CSS injected into the component's iframe before first paint.
* Appended last so it overrides the component's own styles via cascade order.
* Useful for theming v2 (HTML) components — colors, fonts, spacing, etc.
*/
injectCss?: string;
/**
* Control iframe auto-sizing behavior.
* - true (default): iframe auto-sizes to content height, width fills parent.
* - false: no sizing logic runs. No observers, no measurements, no style changes.
* The iframe stays at position:absolute filling the container.
* The host is fully responsible for container dimensions.
*/
autoSize?: boolean;
}
export declare const hostSDK: HostSDK;
declare global {
interface Window {
myop: {
__ROOT_SDK_PUBLIC_URL__: string;
hostSDK: HostSDK;
IframeSDK: InstanceType;
};
}
}
export {};