新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?

Transcript

1. 新しいAPI createRawSnippet 触ってみた ssssota
2. だれ？ ssssota フロントエンドエンジニア Svelte Online Meetup常連 3/4回（最多？） Svelte関連のライブラリをよく作ってる svelte-exmarkdown svelte-twc svelte-(jsx|preact|react)-snippet
3. createRawSnippetとは？ Svelte 5で登場予定の新しいAPI
4. Snippetをおさらい <slot />を置き換える、Svelte 5で登場予定の概念。 コンポーネント内で定義できて使い回すことができる。 {#snippet snip(arg)} <h1>{arg}</h1> {/snippet} {@render snip('Hello')} → <h1>Hello</h1>
5. createRawSnippetはなぜ必要か コンポーネント内で定義できて 「コンポーネント外では定義できないんですか 😠」を解決する 例えば、テスト。 test('render snippet children', () => { render(SomeComponent, { props: { children: ' 🤔🤔🤔' }, }); });
6. createRawSnippet の使い方 {#snippet link(href, content)} <a {href} onfocus={console.log}>{content}</a> {/snippet} const link = createRawSnippet((href, content) => ({ render: () => `<a href="${href()}">${content()}</a>`, setup: (a) => { // ↓自分でもろもろ登録する必要がある $effect(() => a.href = href()); $effect(() => a.textContent = content()); a.addEventListener('focus', console.log); return () => a.removeEventListener('focus', console.log); }, }));
7. まとめ createRawSnippetを使うことでコンポーネント外でSnippet が定義できる インターフェースのクセが強い！ Rawという名前だけあって、生のHTML/Elementを扱う 直接使う場合は注意が必要 イベントリスナーの解除を忘れないように デフォルトで更新されないことを意識する 内部でコンポーネントは使えない 基本的にはテスト用途での利用に留めたほうが良さそう 本格的に使うならラッパーを作ることを検討する