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
漸進。
ssssota
0
3k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.8k
useSyncExternalStoreを使いまくる
ssssota
6
5.7k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.4k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
210
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
現代のReactivityとSvelteの魔法
ssssota
0
2.3k
Other Decks in Programming
See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
520
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
100
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
testingを眺める
matumoto
1
140
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Context Engineering - Making Every Token Count
addyosmani
3
58
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Documentation Writing (for coders)
carmenintech
74
5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Review Best Practice
trishagee
71
19k
Into the Great Unknown - MozCon
thekraken
40
2k
How GitHub (no longer) Works
holman
315
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How STYLIGHT went responsive
nonsquared
100
5.8k
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!