Svelte中如何将字符串编译结果绑定到组件？

一、先解决REPL导入编译工具的报错 #

REPL环境无法直接导入svelte/compiler，因为该模块是Node.js环境下的编译工具，浏览器端不支持直接运行。如果要在REPL中测试动态编译，可使用svelte.compile的替代方案，或直接在本地项目中开发（本地项目可正常安装依赖并导入）。

本地项目中，确保已安装svelte依赖，导入方式是正确的：

<script>
  import { compile } from 'svelte/compiler';
  // ...
</script>

二、编译结果绑定到组件的实现步骤 #

要把编译后的代码转化为可渲染的组件，需要动态执行编译生成的ESM代码，提取组件类，再通过<svelte:component>渲染，同时还要处理样式和插槽传递。

完整的Preview.svelte实现 #

<script>
  import { compile } from 'svelte/compiler';
  import { onMount, onDestroy, createEventDispatcher } from 'svelte';

  export let source;
  let component = null;
  let container;
  let instance;
  const dispatch = createEventDispatcher();
  let result;

  // 处理编译和组件实例化
  async function renderComponent() {
    // 清理旧实例
    if (instance) {
      instance.$destroy();
    }

    // 编译source代码
    result = compile(source, {
      filename: 'DynamicComponent.svelte',
      format: 'esm',
      generate: typeof window === 'undefined' ? 'ssr' : 'dom', // 区分SSR和SPA环境
    });

    // 动态执行编译后的JS代码
    const module = await import('data:text/javascript;charset=utf-8,' + encodeURIComponent(result.js.code));
    component = module.default;

    // SPA环境下挂载组件
    if (typeof window !== 'undefined') {
      instance = new component({
        target: container,
        props: { ...$$restProps },
        slots: { default: () => $$slots.default },
      });

      // 转发组件事件
      instance.$on('*', (e) => dispatch(e.type, e.detail));
    }
  }

  // 监听source变化重新编译
  $: if (source) renderComponent();

  onMount(() => {
    if (source) renderComponent();
  });

  onDestroy(() => {
    if (instance) instance.$destroy();
  });
</script>

<!-- SPA环境挂载容器 -->
{#if typeof window !== 'undefined'}
  <div bind:this={container} />
{/if}

<!-- SSR环境直接渲染HTML -->
{#if typeof window === 'undefined' && result}
  {@html result.js.code.render($$restProps, { default: () => $$slots.default?.() }).html}
{/if}

<!-- 注入编译后的样式 -->
{#if result?.css?.code}
  <style>{result.css.code}</style>
{/if}

关键说明 #

• 动态执行ESM代码：用import('data:text/javascript;...')加载编译后的代码，这是浏览器环境下动态执行ESM的可行方案。
• SSR适配：通过typeof window === 'undefined'判断SSR环境，直接调用编译生成的render方法输出HTML。
• 插槽传递：实例化组件时通过slots选项传递父组件的插槽内容，确保动态组件能正确渲染插槽。
• 事件转发：通过$on('*')监听动态组件的所有事件，再转发给父组件。
• 资源清理：在source更新或组件销毁时，调用$destroy()清理旧组件实例，避免内存泄漏。

三、App.svelte中的使用保持不变 #

<script>
  import Preview from './Preview.svelte'
  const source = '<div {...$$restProps}><slot /></div>'
  let name = 'world';
</script>

<Preview {source}>Hello {name}!</Preview>

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