Web Componentsとは、WebページやWebアプリケーションにカプセル化されたHTMLを埋め込む技術。 Custom Elementsとも呼ばれる。

これにより、サイトベースはPlay Frameworkで作り、フォームなどよりインタラクティブなUIにしたい箇所だけSvelteで作って埋め込む...といったことが可能。

インストール

viteを使って、Svelte + Typescript の雛形をインストールする。

ちなみにSvelteの公式の方法だと、Sveltekitがインストールされる。

yarn create vite web-component --template svelte-ts

パッケージのインストールと実行。

cd web-component
yarn
yarn run dev

ブラウザにSvelteが表示されたら成功。

Web Components用に設定

ディレクトリ構造は以下のようになっている。

このうちの、src/lib/Counter.svelteをsrc/index.htmlからWeb Componentsとして呼び出せるように、Svelte公式ドキュメントを参考に設定を進める。 src/App.svelteとsrc/app.cssファイルは不要なので削除。

.
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.svelte　　　　// 削除
│   ├── app.css                    // 削除
│   ├── assets
│   │   └── svelte.svg
│   ├── lib
│   │   └── Counter.svelte
│   ├── main.ts
│   └── vite-env.d.ts
├── svelte.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

1.svelte.config.jsにコンパイルオプションを追加。

// vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte({
    compilerOptions: {       
      customElement: true      // 追加
    }
  })],
})

2.src/lib/Counter.svelteに、Web Componentsのタグを追加。ここで設定したタグ名が、呼び出し時のセレクタ名となる。

<svelte:options tag="my-element" />   // 追加

<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
</script>

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

3.src/main.tsから、src/lib/Counter.svelteをエクスポートする。

export * from './lib/Counter.svelte';

4.src/index.htmlにWeb Componentsセレクタを追加。

  <body>
    <div id="app"></div>                     // 削除
    <my-element></my-element>      // 追加
    <script type="module" src="/src/main.ts"></script>
  </body>

これでWeb Componentsとして表示ができるはず。。 viteサーバを起動。

yarn run dev

無事表示された！カウンターも問題なく動いてる🎉

ビルドする

変更は、viteのConfig設定のドキュメントを参考に。

https://vitejs.dev/config/

ファイルごとにビルドするようにしていく。

vite.config.jsのbuild.rollupOptionsオプションに、inputを追加。

// vite.config.js

export default defineConfig({
  plugins: [svelte({
    compilerOptions: {
      customElement: true
    }
  })],
  build: {                                                          // 追加
    rollupOptions: {
      input: [ "./src/lib/Counter.svelte" ]
    }
  }
})

yarn run buildを実行。

dist/assets/Counter-08a25f9b.jsと、指定通りにビルドできた🎉

めもる

調べたことをメモる。

Svelte Web Components導入メモ

インストール

Web Components用に設定

ビルドする