Skip to main content

开发建议

总结​

可以用svelte开发一个完整功能的组件，然后用lit 包装一下，给到其他框架使用？

如果全部使用lit开发完整的功能性组件，太难了

  1. 几乎没有热门的库可以用
  2. 定制起来更是麻烦
  3. 不能使用tailwindcss, lit 会破坏，即使在单个项目中使用成功，打包后给其他框架也会破坏，因为css单独产出，对lit无效
  4. 写起来有种原生开发的感觉

是的，你可以使用 Svelte 开发一个完整功能的组件，然后通过 Lit 将其包装起来，以便在其他框架中使用。这种方法可以让你利用 Svelte 的高性能和简洁性，同时也能利用 Lit 的灵活性和广泛的兼容性。

步骤概述​

  1. 创建 Svelte 组件
  2. 将 Svelte 组件编译为自定义元素
  3. 使用 Lit 包装该自定义元素

详细步骤​

1. 创建 Svelte 组件​

首先，创建一个简单的 Svelte 组件。例如，一个计数器组件：

<!-- Counter.svelte -->
<script>
  export let count = 0;
  
  function increment() {
    count += 1;
    dispatchEvent(new CustomEvent('count', { detail: count }));
  }
</script>

<button on:click={increment}>
  Count: {count}
</button>

2. 将 Svelte 组件编译为自定义元素​

使用 Svelte 的自定义元素编译选项，将 Svelte 组件编译为自定义元素：

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    format: 'iife',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true
      }
    }),
    resolve(),
    commonjs()
  ]
};

然后，在你的入口文件中注册自定义元素：

// src/main.js
import Counter from './Counter.svelte';

customElements.define('svelte-counter', Counter);

3. 使用 Lit 包装该自定义元素​

接下来，使用 Lit 创建一个包装组件，将 Svelte 自定义元素嵌入其中：

// MyElement.js
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import './path-to-svelte-counter.js';  // 引入编译后的 Svelte 自定义元素

@customElement('my-element')
class MyElement extends LitElement {
  static styles = css`
    /* 你的样式 */
  `;

  render() {
    return html`
      <svelte-counter @count=${this.handleCount}></svelte-counter>
    `;
  }

  handleCount(event) {
    console.log('Count:', event.detail);
  }
}

使用 Lit 包装的组件​

现在，你可以在任何支持 Web Components 的框架中使用这个由 Lit 包装的组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lit and Svelte</title>
  <script type="module" src="./path-to-my-element.js"></script>
</head>
<body>
  <my-element></my-element>
</body>
</html>

总结​

通过这种方式，你可以利用 Svelte 和 Lit 的优势，创建高性能且易于维护的组件，并在各种框架中复用这些组件。这种方法确保了组件的独立性和灵活性，同时也简化了跨框架的集成过程。