Svelteでweb components
miyanokomiya
素晴らしくまとめてくれている記事が登場のでこちらも参考。
webcomponentにもできるけどsvelteコンポーネントとの暗黙の仕様変換が多く、現状だとなかなかに茨の道であることに違いはない。
miyanokomiya
設定
compilerOptionsにcustomElement: trueを付ける。
宣言
component側にはこういう宣言を追加する。
<svelte:options tag="my-child" />
<script>
export let name = ''
</script>
<p>{name}</p>
この宣言を付けたcomponentを利用する親componentにも同様の宣言を付けておかないとエラーになるっぽい。
importすればcustom elementとしてそのまま設置可能。
<svelte:options tag="my-parent" />
<script>
import './Child.svelte'
</script>
<my-child name="abc" />
デフォルト値なしのpropsだと、値を渡していてもなぜか~ was created without expected prop ~という警告が表示される。
値の受け渡し自体は問題なく行われている。
<script>
export let name
</script>
それっぽいissueもあったが今のところ仕方ない感じか？
miyanokomiyavite環境でlibとしてビルドするには設定が必要。
export default defineConfig({
plugins: [svelte({
compilerOptions: { customElement: true }
})],
build: {
lib: {
entry: path.resolve(__dirname, 'src/Target.svelte'),
name: 'target-element',
}
}
})
これで.es.jsと.umd.jsが吐き出される。読み込めばcustom elementとしてそのまま利用可能。
.d.tsを吐き出す方法は見つけられず。
miyanokomiyaこの記事にあるようなmissing-custom-element-compile-optionsが警告される問題がまだ発生している。
探した限りでは根本的な対応方法はなさそう。
miyanokomiyacustom elementにするとキャメルなpropsに値を渡すことができないっぽい。
export let someData;
下記のどちらでも値を渡せていなかった。
<my-comp someData={1} />
<my-comp some-data={1} />
関連issue。
現時点では変換処理を自作しないと対応できなさそう。
KyoheiSvelte + WebComponents を調べていて辿り着きました。詳細な情報をまとめて頂いていたおかげで助かりました。ありがとうございます。
ご存知かもしれませんが、ケバブケースでの props の取得は {$$props["header-text"]} でできるようです。ご参考になれば幸いです。
miyanokomiyaこういう記法によってcustom elementをscript側でmountすることができる。
ただしpropsが渡されるのはなぜかコンポーネント側のonMountが終わった後になる。省略可能な状態にしておいて、watchなどして渡されるのを待たないといけない。
import App from './App.svelte'
const app = new App({
target: document.body,
props: { count: 1 }
})
.es.jsとしてビルドされたモジュールをimportしてこういう風に使えるのかは試していないので不明。
.es.jsをimportしても同様にマウントできる。
miyanokomiyapropsの挙動やらがどうしてもsvelteとcustom elementで仕様上の違いがあるからその差異を把握していないと思わぬ落とし穴にはまる。
結局のところcustom element作るなら素でclass書いたほうがいいのではないか。
miyanokomiyaとはいえcustom elementになるルートコンポーネントでだけ気をつければ、後はsvelteに乗れるメリットが大きいか？なんともいえない。
miyanokomiyasvelteコンポーネントをnewでマウントする場合、そのコンポーネントのonMountが実行されるときにbind:thisに指定した変数への代入がまだ行われていない。
await tick()で待たないといけない。
孫コンポーネントでも同様の挙動になるとしたら非常に面倒。
miyanokomiya↑はnewを親コンポーネントのonMountで行っている場合に起きるっぽい。
main.tsでgetElementByIdしてnewを書いた場合は起きない。
miyanokomiyaonMount内でbind:thisされた変数をtargetにしてnewするのはどうも挙動が怪しい。
relpで試してみたらなぜか無限ループっぽくなってしまった。
svelte内で使う場合は素直にtemplateとしてマウントしたほうがよさそう。