动态生成.svelte组件而不使用<svelte:component/>

Question

问题

我正在尝试在 .ts 文件中动态生成 svelte 组件。因此，我无法使用

<svelte:component>

元素，因为它只能在 .svelte 文件内使用；在 HTML 部分。是否可以创建某种简洁的组件渲染器辅助函数？

寻找解决方案

我需要类型函数的逻辑：

(component: SvelteComponent, props: any) => HTMLElement

背景

我认为像这样的渲染组件可能会绕过 Svelte 的大多数（甚至可能是所有）预期的编码模式，但对于我正在尝试做的事情来说，这将是一个干净的解决方案。具体来说 - 我正在尝试在完整日历中注入内容，如此处所述。

Answer 1

该事件可以返回一个 DOM 节点数组，您可以使用 客户端组件 API 直接将任何组件渲染到 DOM 节点，例如：

// Svelte 5
import { mount } from 'svelte';
// ...
eventContent() {
  const content = document.createElement('div');
  mount(Component, { target: content, props: ... });

  return { domNodes: [content] }
}

// Svelte 3/4
eventContent() {
  const content = document.createElement('div');
  new Component({ target: content, props: ... });

  return { domNodes: [content] }
}

Answer 2

跟进 H.B.答案，代码可以提取到具有正确 TS 类型的辅助函数中，如下所示：

import type {ComponentType} from "svelte";

export const componentToDom = (componentClass: ComponentType, props: object): HTMLElement => {
    const target = document.createElement('div')

    new componentClass({target, props})

    return target
}

---

然后在完整日历配置中：

eventContent: () => ({domNodes: [componentToDom(MySvelteComponent, {})]})