如何将独立编译的Svelte应用作为组件嵌入另一个Svelte应用

1. 独立Svelte应用引入方案说明 #

你目前使用的包装器实例化方案，是针对独立编译非Web Component类型Svelte应用的最优通用实现，额外优化可以针对你的业务场景做两个方向的调整：

• 批量生成对应独立应用的专属包装组件，避免每次使用都传入this参数降低出错概率
• 如有多版本Svelte兼容需求，可在包装层补充Svelte runtime版本校验逻辑，避免版本差异导致的运行异常

2. 事件监听实现 #

Svelte 组件实例原生提供$on方法绑定自定义事件监听器，你只需要在现有ComponentWrapper中补充事件绑定逻辑即可实现和普通Svelte组件完全一致的事件监听体验。

修改后的ComponentWrapper.svelte代码 #

<script>
    import { onDestroy } from 'svelte';

    let component;
    export { component as this };

    let target;
    let cmp;
    // 存储事件解绑函数，避免重复绑定
    let eventUnsubscribers = [];

    const bindEvents = () => {
        // 先解绑旧事件
        eventUnsubscribers.forEach(unsub => unsub());
        eventUnsubscribers = [];
        // 绑定新事件
        Object.entries($$listeners).forEach(([eventName, handler]) => {
            const unsub = cmp.$on(eventName, handler);
            eventUnsubscribers.push(unsub);
        });
    };

    const create = () => {
        cmp = new component( {
            target,
            props: $$restProps,
        } );
        bindEvents();
    };

    const cleanup = () => {
        if ( !cmp ) return;
        eventUnsubscribers.forEach(unsub => unsub());
        eventUnsubscribers = [];
        cmp.$destroy();
        cmp = null;
    };

    $: if ( component && target ) {
        cleanup();
        create();
    }

    $: if ( cmp ) {
        cmp.$set( $$restProps );
        // 事件变化时重新绑定
        bindEvents();
    }

    onDestroy( cleanup );
</script>

<div bind:this={target} />

使用示例 #

主应用中可以直接和普通Svelte组件一样绑定事件监听：

<!-- MainApp.svelte -->
<script>
    import ComponentWrapper from 'ComponentWrapper.svelte'
    const App1 = window.app1; // 独立编译的Svelte应用

    const handleCustomEvent = (e) => {
        console.log('收到独立应用派发的事件', e.detail);
    }
</script>

<ComponentWrapper 
    this={App1} 
    prop1="one" 
    prop2="two" 
    on:custom-event={handleCustomEvent} 
/>

独立应用内部不需要做任何额外修改，正常使用createEventDispatcher派发事件即可。

内容的提问来源于stack exchange，提问作者MarkL