[Day24] - 介绍 Svelte.js 如何使用

前几天我们有说明 Virtual Dom 如何实作 ,

今天我们来介绍一个 反对 Virtual Dom 的工具 Svelte.js

内文

Svelte.js 也是一个 Compiler 工具的 Web Component 编译器( 框架 )

所以开头就是用 CLI 建立专案拉 ~~

利用 Svelte REPL 建立新专案

Svelte 的 CLI 改名很多次 Svelte REPL . Svelte CLI . SvelteKit 都是指 CLI 工具

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js

npm install
npm run dev

在设定档中开启 web component 的设定

在 rollup.config.js 档中 加上 customElement: true

 plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
        ...
      }
      ...
    }),
    ...
  ]

使用 <svelte:options tag="[tag-name]" /> 来定义 web component

App.svelte

<svelte:options tag="what-ever" />

<script>
  // make sure component Foo is available, but we don't import
  // it... we'll use it with it's tag <my-foo /> (see bellow)
  import './Foo.svelte'
  export let name = 'World'
</script>

<p>Hello, {name}!</p>

<my-foo {name} />

<style>
 p { color: skyblue; }
</style>

Foo.svelte

<svelte:options tag="my-foo" />

<script>
  export let name
</script>

<p>I am {name}</p>

注解 App 的挂载

main.js

// 虽然 App 的没被使用 , 但是需要将 import App.svelte , 
// svelte 才知道要将 App.svelte 内设定的 svelte:options 转换成 web component
import App from './App.svelte';

/*
// 注解 new App 避免 svelte 的挂载行为 , 我们只需要 web component
const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});
 */

export default app;

成果

参考资料

• svelte.js 官方 docs
• svelteKit 官方 docs
• Svelte — 是什麽让我遇见这样的你
• How to Create a Web Component in Svelte
• Svelte Custom element API