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
250
脱法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
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
13
42k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
2k
漸進。
ssssota
0
3.1k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.9k
useSyncExternalStoreを使いまくる
ssssota
6
5.9k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.5k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
240
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1.1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
4k
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
AI Agent 時代的開發者生存指南
eddie
4
2.1k
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
Catch Up: Go Style Guide Update
andpad
0
250
CSC305 Lecture 10
javiergs
PRO
0
230
モテるデスク環境
mozumasu
3
1.2k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
220
理論と実務のギャップを超える
eycjur
0
180
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
500
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Designing Experiences People Love
moore
142
24k
Embracing the Ebb and Flow
colly
88
4.9k
Docker and Python
trallard
46
3.6k
A designer walks into a library…
pauljervisheath
209
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
KATA
mclloyd
PRO
32
15k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Six Lessons from altMBA
skipperchong
29
4k
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!