svelte-standalone/dist/embed.d.ts

Transform Svelte components in standalone scripts!

import { type Component, type ComponentProps, unmount } from 'svelte';
type UnmountOptions = Parameters<typeof unmount>['1'];
/**
 * Global singleton component controller interface
 * @template T - Svelte component class
 * @template R - Window property key
 */
export type EmbedWindow<T extends Component, R extends string> = {
    [id in R]: {
        /** Initializes singleton instance with props */
        start: (props: ComponentProps<T>) => void;
        /** Destroys instance and cleans up DOM */
        stop: (options?: UnmountOptions) => void;
    };
};
/**
 * Multi-instance component factory interface
 * @template T - Component constructor type
 * @template R - Window namespace key
 */
export type MultipleEmbedWindow<T extends Component, R extends string> = {
    [id in R]: {
        /** Creates new instance with optional target */
        start: (props: ComponentProps<T>, target?: string) => {
            stop: (options?: UnmountOptions) => void;
        };
    };
};
/**
 * Contextual auto-embedding controller interface
 * @template R - DOM identifier (ID or class)
 */
export type TargetEmbeddedWindow<T extends Component, R extends string> = {
    [id in R]: {
        /** Destroys all instances in context */
        stop: (options?: UnmountOptions) => void;
    };
};
/**
 * Singleton component manager
 * @param component - Svelte component to manage
 * @param id - Global window property key
 *
 * @example
 * embed(Modal, 'authDialog');
 * window.authDialog.start({ title: 'Login' });
 * window.authDialog.stop();
 */
export declare function embed<T extends Component, R extends string>(component: T, id: R): void;
/**
 * Multi-instance component factory
 * @param component - Component to instantiate
 * @param id - Window namespace key
 *
 * @example
 * embedMultiple(Toast, 'notifications');
 * const toast = window.notifications.start({ message: 'Saved!' }, 'status-area');
 * toast.stop();
 */
export declare function embedMultiple<T extends Component, R extends string>(component: T, id: R): void;
/**
 * Auto-mount to elements by URL parameter target
 * @param component - Component to auto-install
 * @param targetId - Target css id to mount your Component - can be provided dynamically by adding a `target` at your widget search params.
 *
 * @example
 * // Load script with ?target=chart-container
 * autoEmbedWithTarget(DataChart, 'chart');
 * window['chart-container'].stop();
 */
export declare function autoEmbedWithTarget<T extends Component, R extends string>(component: T, targetId: R): void;
/**
 * Full-page component auto-mounter
 * @param component - Component to render
 * @param id - Window property key
 *
 * @example
 * autoEmbedOnBody(Loader, 'pageLoader');
 * window.pageLoader.stop();
 */
export declare function autoEmbedOnBody<T extends Component, R extends string>(component: T, id: R): void;
/**
 * Batch mount by CSS class selector
 * @param component - Component to replicate
 * @param targetClass - Target css class to mount your Component - can be provided dynamically by adding a `target` at your widget search params.
 *
 * @example
 * autoEmbedMultiple(Tooltip, 'hint');
 * window.hint.stop(); // Removes all tooltips
 */
export declare function autoEmbedMultiple<T extends Component, R extends string>(component: T, targetClass: R): void;
export {};