背景
ここ5年ほどはAngular大好きできてましたし、今でも好きなのは変わらないのですが、どうしてもバンドルサイズの大きさだけは玉に瑕で、新バージョンが出るたびにどれだけ小さくなるか期待するのですが、まだまだかなという感想です。もちろん高機能故なのでしょうがないのですけど。。。
ってことでWebコンポーネントを作成する機会があったので、Angular Elementsはあるのを知りつつSvelteに浮気してみました。
Svelteは去年あたりから気になってはいたのですが、今年の夏にTypescriptを公式サポートしたことで、俄然使ってみたかったからです。
プロジェクトの作成
私はVS Codeで開発するのでSvelte for VS Codeプラグインを追加して起きます。
そしてターミナルで以下を実行します。
$ npx degit sveltejs/template sample-svelte-component
$ cd sample-svelte-component/
$ node scripts/setupTypeScript.js
$ npm install
Javascript用の雛形プロジェクトから、スクリプトを実行してTypescript用に変換するんですね。すると以下のようなプロジェクトができあがります。
なお、今回使用している主なバージョンは以下の通りです。
| モジュール | バージョン |
|---|---|
| svelte | 3.29.4 |
| svelte-check | 1.1.11 |
Webコンポーネントにする
ドキュメントによると、Webコンポーネントを作成するには
- コンパイルオプションで
customElement: trueを指定する。-
雛形プロジェクトだとrollupでビルドしているので、rollup.config.jsで指定することになります。
svelte({
customElement: true, // <- 追記
// enable run-time checks when not in production
dev: !production,
``` -
- .svelteファイル中で
<svelte:options tag="sample-svelte-component"/>のようにtag属性で要素名を指定する。
だそうです。
あと雛形に依存した修正として
-
main.ts内でbody要素配下にインスタンスを追加しているコードをコメントアウトしました。import App from './App.svelte'; // const app = new App({ // target: document.body, // props: { // name: 'world' // } // }); export default App; // <- ここも意味があるか判らないけどappからAppに変更 -
index.htmlにWebコンポーネントの要素名を追加しました。
<body> <sample-svelte-component name="world"> </sample-svelte-component> </body>
を行ってnpm run devを実行すると動作を確認できます。
svelte:optionsのtag属性にWarningが表示される
ここで件名に書いた本題なのですが、VS CodeでApp.svelteを見ると
が表示されて非常に気になります。Svelte for VS Codeプラグインの問題かと思ったら、npm run validateを実行しても同じWarningが表示されます。
しかし、'npm run build'すればコンパイルは正常終了しますし、roll.config.jsから'customElement: true'の設定を消して実行すれば同じWarningが表示されるので、設定が間違ってる訳ではない筈です。
そこで実際に問題があればnpm run devでも'npm run build'でもWarningが表示されるので、VS Codeの設定で当該Warningを無視するようにしました。
最後に
ちなみにnpm run validateでも上記の問題は発生してしまいます。
まだまだ開発環境が充実しているとは言えませんが、注目度から言って、今後の発展が期待できるのは間違いないと思います。