新しいAPI createRawSnippet 触ってみた ssssota

だれ？ ssssota フロントエンドエンジニア Svelte Online Meetup常連 3/4回（最多？） Svelte関連のライブラリをよく作ってる svelte-exmarkdown svelte-twc svelte-(jsx|preact|react)-snippet

createRawSnippetとは？ Svelte 5で登場予定の新しいAPI

Snippetをおさらい を置き換える、Svelte 5で登場予定の概念。 コンポーネント内で定義できて使い回すことができる。 {#snippet snip(arg)}

{arg}

{/snippet} {@render snip('Hello')} →

Hello

createRawSnippetはなぜ必要か コンポーネント内で定義できて 「コンポーネント外では定義できないんですか 😠」を解決する 例えば、テスト。 test('render snippet children', () => { render(SomeComponent, { props: { children: ' 🤔🤔🤔' }, }); });

createRawSnippet の使い方 {#snippet link(href, content)} {content} {/snippet} const link = createRawSnippet((href, content) => ({ render: () => `${content()}`, setup: (a) => { // ↓自分でもろもろ登録する必要がある $effect(() => a.href = href()); $effect(() => a.textContent = content()); a.addEventListener('focus', console.log); return () => a.removeEventListener('focus', console.log); }, }));

まとめ createRawSnippetを使うことでコンポーネント外でSnippet が定義できる インターフェースのクセが強い！ Rawという名前だけあって、生のHTML/Elementを扱う 直接使う場合は注意が必要 イベントリスナーの解除を忘れないように デフォルトで更新されないことを意識する 内部でコンポーネントは使えない 基本的にはテスト用途での利用に留めたほうが良さそう 本格的に使うならラッパーを作ることを検討する