Slide 1

Slide 1 text

新しいAPI createRawSnippet 触ってみた ssssota

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

{arg}

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

Hello

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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); }, }));

Slide 7

Slide 7 text

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