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
200
脱法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
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1.5k
useSyncExternalStoreを使いまくる
ssssota
6
5.3k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
4.9k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
140
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
970
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
3.9k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
150
現代のReactivityとSvelteの魔法
ssssota
0
2.1k
型付きdotenv
ssssota
0
330
Other Decks in Programming
See All in Programming
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
4
480
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
0
110
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
180
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
940
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.8k
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
510
AIコーディングの理想と現実
tomohisa
22
29k
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
160
PHP で学ぶ OAuth 入門
azuki
1
200
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
750
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
69
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Speed Design
sergeychernyshev
29
900
A Modern Web Designer's Workflow
chriscoyier
693
190k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Adaptive Systems
keathley
41
2.5k
Designing for humans not robots
tammielis
252
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Visualization
eitanlees
146
16k
Gamification - CAS2011
davidbonilla
81
5.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!