如何将 Svelte 应用程序用作另一个 Svelte 应用程序中的组件？

Question

用例：我有几个 Svelte 组件被编译为标准 Svelte 应用程序（即，不是 Web 组件），然后用于增强主 Svelte 应用程序的功能。

我正在使用典型的app = new SvelteApp({target, props}) 方法通过包装器/代理组件（如suggested in this answer）实例化它们，这样我就可以执行以下操作：

MainApp.svelte

<script>
    import ComponentWrapper from 'ComponentWrapper.svelte'

    const App1 = window.app1; // this is standalone/compiled Svelte app
</script>

<ComponentWrapper this={App1} prop1="one" prop2="two" />

ComponentWrapper.svelte

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

    let component;
    export { component as this };

    let target;
    let cmp;

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

    const cleanup = () => {
        if ( !cmp ) return;
        cmp.$destroy();
        cmp = null;
    };

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

    $: if ( cmp ) {
        cmp.$set( $$restProps );
    }

    onDestroy( cleanup );
</script>

<div bind:this={target} />

这很好用，只是我无法使用 ComponentWrapper 上的 on:event={} 指令或其中的 div 元素监听 App1 和 App2 调度的事件。

我的问题是：

1. 有没有更好的方法来包含独立的 Svelte 应用程序？

2. 如何让活动发挥作用？当然，我可以将方法作为道具传递并在独立应用程序中使用它，但如果可能的话，我宁愿调度/监听事件。

Answer 1

1. 有没有更好的方法来包含独立的 Svelte 应用程序？

App 和 Component 没有特别的区别。

<script>
const App1 = window.app1
</script>

<App1 prop1="one" prop2="two" />

可以工作，但这取决于应用程序是否使用相同的苗条运行时。 （取决于应用的捆绑方式）

您可能想尝试是否可以将应用程序生成为 lib 使用 svelte-kit package 命令。

1. 如何让活动发挥作用？

您可以向事件添加侦听器并分派这些事件：

const dispatch = createEventDispatcher()
cmp.$on('eventname', (event) => {
  dispatch('eventname', event);
});

这将使用 CustomEvent 包装原始事件。我还没有找到按原样发出事件的方法。而且 Svelte 没有像 Vue 那样的 $$listeners。所以你需要让 ComponentWrapper.svelte 知道要监听哪些事件。

像你建议的那样使用这些道具可能会更干净。