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
220
脱法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
2.7k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.7k
useSyncExternalStoreを使いまくる
ssssota
6
5.5k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.2k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
190
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
3.9k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
170
現代のReactivityとSvelteの魔法
ssssota
0
2.2k
Other Decks in Programming
See All in Programming
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
880
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
230
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
570
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
940
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
14
5.2k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
Porting a visionOS App to Android XR
akkeylab
0
640
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
320
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Ace a Technical Interview
jacobian
278
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Language of Interfaces
destraynor
158
25k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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!