背景

ここ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で指定することになります。
plugins: [
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でも上記の問題は発生してしまいます。
まだまだ開発環境が充実しているとは言えませんが、注目度から言って、今後の発展が期待できるのは間違いないと思います。