如何使用@smui/dialog 构建一个纤细的 customElement？

Question

我想构建一个可以与 React 框架一起使用的 svelte 组件，在阅读了 svelte 文档之后，我决定将我的 Svelte 组件构建为 svelte customElement，一切都很顺利，直到我使用了@smui/dialog，我的代码：

<svelte:options tag="charity-legal-agreement-element" />

<script lang="ts">
import Dialog, {Title, Content, Actions} from '@smui/dialog';
...
<Dialog
  bind:this={dialog}
  aria-labelledby="dialog-title"
  aria-describedby="dialog-content"
  on:MDCDialog:closed={deleteItem}
>
...
</Dialog>

汇总配置：

svelte({
        preprocess: sveltePreprocess({ sourceMap: !production }),
        compilerOptions: {
            // enable run-time checks when not in production
            dev: !production,
            customElement: true
        },
        // customElement: true
    }),
    postcss({
        extract: true,
        minimize: true,
        use: [
          ['sass', {
            includePaths: [
              './src/theme',
              './node_modules',
              '../../node_modules',
            ]
          }]
        ]
      }),
     ...

来自调试控制台的错误：

index.mjs:1512 Uncaught TypeError: Illegal constructor
at new SvelteElement (index.mjs:1512)
at new Dialog (Dialog.svelte:56)
at create_fragment (index.svelte:53)
at init (index.mjs:1489)
at new Src (index.svelte:72)
at main.ts:13
at main.ts:18
SvelteElement   @   index.mjs:1512
Dialog  @   Dialog.svelte:56
create_fragment @   index.svelte:53
init    @   index.mjs:1489
Src @   index.svelte:72
(anonymous) @   main.ts:13
(anonymous) @   main.ts:18

如果我删除 @smui/dialog ，一切正常，但我需要对话框作为基础组件，任何想法都值得赞赏~

Answer 1

使用 Svelte 构建自定义元素时，应用中的每个组件都需要使用 <svelte:options tag="custom-element-name-here" /> 进行编译，这使得从另一个库导入组件变得很棘手。

您可以尝试使用 Material UI 的 web component implementation，尽管它还不是 1.0：

// main.js
import App from './App.svelte';
import '@material/mwc-dialog';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

<!-- App.svelte -->
<svelte:options tag="custom-element"/>

<h1>Hello world</h1>
<mwc-dialog heading="Test dialog" open="true">
    <div>
        Text goes here
    </div>
</mwc-dialog>

另一种选择是不编译为自定义元素并使用svelte-adapter 在 React 应用程序中使用组件。