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
210
脱法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.3k
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.1k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
180
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
160
現代のReactivityとSvelteの魔法
ssssota
0
2.2k
Other Decks in Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
960
Java on Azure で LangGraph!
kohei3110
0
170
ニーリーにおけるプロダクトエンジニア
nealle
0
540
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
410
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
900
Gleamという選択肢
comamoca
6
760
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
GraphRAGの仕組みまるわかり
tosuri13
8
490
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Navigating Team Friction
lara
187
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Side Projects
sachag
455
42k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
BBQ
matthewcrist
89
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.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!