Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
脱法Svelte / Evasion of svelte rules
Search
TOMIKAWA Sotaro
May 30, 2024
Programming
1
230
脱法Svelte / Evasion of svelte rules
https://github.com/ssssota/evasion-of-svelte-rules
TOMIKAWA Sotaro
May 30, 2024
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
漸進。
ssssota
0
3k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.8k
useSyncExternalStoreを使いまくる
ssssota
6
5.8k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.5k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
230
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1.1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
4k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
180
Other Decks in Programming
See All in Programming
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
3.3k
CSC509 Lecture 02
javiergs
PRO
0
400
クラシルを支える技術と組織
rakutek
0
190
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
dynamic!
moro
9
5.6k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
460
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
120
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
CSC509 Lecture 03
javiergs
PRO
0
320
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
870
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Git: the NoSQL Database
bkeepers
PRO
431
66k
We Have a Design System, Now What?
morganepeng
53
7.8k
Automating Front-end Workflow
addyosmani
1371
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Practical Orchestrator
shlominoach
190
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Transcript
脱法Svelte ssssota
だれ ssssota {"github": "ssssota", "x": "ssssotaro"} フロントエンドエンジニア Svelte関連は完全に趣味でライブラリ作ったり svelte-exmarkdown svelte-twc
[NEW] svelte-jsx-snippet [NEW]
Svelteにおける法とは 今回言いたい「法」とは、 1ファイル1コンポーネントの法。 Svelteでは、小さな単位の繰り返しでもコンポーネント化する か、インラインで書くかしかなかった。 しかしSvelte 5では...
Snippetsの登場 Svelte 5にて、コンポーネント内で再利用可能な要素を抽出す る仕組み Snippets が導入された 🚀 {#snippet reusable()} <div>再利用可能な要素</div>
{/snippet} {@render reusable()} これ(合法的な手法)で万事解決...
ちょっと待てぃ!!1 <div class="flex flex-col gap-2"> {@render children()} </div> ↑これを再利用したいときは? {#snippet
styled_div(children)}...{/snippet} {@render styled_div(hoge)} Snippetの引数を使えばできないこともない... 例だと hoge もSnippetである必要があり、かなりしんどい。
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注入済コンポーネントが作成可能に!
これでコンポーネントもサクサク作れるぞ! よし、じゃあテストを書こう! import { render } from '@testing-library/svelte'; import MyComponent
from './MyComponent.svelte'; it('...', () => { render(MyComponent, { children: '¯\_(ツ)_/¯', // ...????? }); }); どうやってSnippet渡すんだ!?
svelte-jsx-snippet そんなあなたに、svelte-jsx-snippetを紹介します 🚀 it('...', () => { render(MyComponent, { children:
<div> 🥰 </div>, }); }); JSXをSnippetsとして処理でき、 コンポーネント外でSvelteの要素が書けるようになる!
Svelte 5の出力を見てみよう Svelte 4以前と比較して、Svelte 5の出力は非常に読みやすく! 基本的には、1コンポーネントにつき関数が1つ生成される。 変数名なども嫌に短縮されていないので、理解しやすい。 再現もしやすくなった結果、脱法しやすくなった! ※ まだRelease
Candidateなので内部APIもたまに変わって壊れ ることも多々ある。 ※ このスライドはSvelte 5 + svelte-exmarkdown + svelte-twcを 使って作成されています。
Let's hack Svelte!