脱法Svelte / Evasion of svelte rules

https://github.com/ssssota/evasion-of-svelte-rules

Transcript

1. 脱法Svelte ssssota
2. だれ ssssota {"github": "ssssota", "x": "ssssotaro"} フロントエンドエンジニア Svelte関連は完全に趣味でライブラリ作ったり svelte-exmarkdown svelte-twc [NEW] svelte-jsx-snippet [NEW]
3. Svelteにおける法とは 今回言いたい「法」とは、 1ファイル1コンポーネントの法。 Svelteでは、小さな単位の繰り返しでもコンポーネント化する か、インラインで書くかしかなかった。 しかしSvelte 5では...
4. Snippetsの登場 Svelte 5にて、コンポーネント内で再利用可能な要素を抽出す る仕組み Snippets が導入された 🚀 {#snippet reusable()} <div>再利用可能な要素</div> {/snippet} {@render reusable()} これ（合法的な手法）で万事解決...
5. ちょっと待てぃ！！１ <div class="flex flex-col gap-2"> {@render children()} </div> ↑これを再利用したいときは？ {#snippet styled_div(children)}...{/snippet} {@render styled_div(hoge)} Snippetの引数を使えばできないこともない... 例だと hoge もSnippetである必要があり、かなりしんどい。
6. svelte-twc そんなあなたに、svelte-twcを紹介します 🚀 <script lang="ts"> import { twc } from "svelte-twc"; const Div = twc.div`flex flex-col gap-2`; </script> <Div>Hello Svelte!</Div> react-twcをパクったから着想を得た、（脱法）ライブラリ。 コンポーネント内でclass注入済コンポーネントが作成可能に！
7. これでコンポーネントもサクサク作れるぞ！ よし、じゃあテストを書こう！ import { render } from '@testing-library/svelte'; import MyComponent from './MyComponent.svelte'; it('...', () => { render(MyComponent, { children: '¯\_(ツ)_/¯', // ...????? }); }); どうやってSnippet渡すんだ！？
8. svelte-jsx-snippet そんなあなたに、svelte-jsx-snippetを紹介します 🚀 it('...', () => { render(MyComponent, { children: <div> 🥰 </div>, }); }); JSXをSnippetsとして処理でき、 コンポーネント外でSvelteの要素が書けるようになる！
9. Svelte 5の出力を見てみよう Svelte 4以前と比較して、Svelte 5の出力は非常に読みやすく！ 基本的には、1コンポーネントにつき関数が1つ生成される。 変数名なども嫌に短縮されていないので、理解しやすい。 再現もしやすくなった結果、脱法しやすくなった！ ※ まだRelease Candidateなので内部APIもたまに変わって壊れ ることも多々ある。 ※ このスライドはSvelte 5 + svelte-exmarkdown + svelte-twcを 使って作成されています。
10. Let's hack Svelte!