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 如何編譯程式碼(1)
Search
Kalan
October 02, 2020
Programming
0
180
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
770
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
330
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
160
状態管理を楽にする道
kjj6198
1
360
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
190
Day22. Svelte 經驗談
kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
65
Other Decks in Programming
See All in Programming
インターフェース設計のコツとツボ
togishima
2
490
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.6k
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
320
イベントストーミングから始めるドメイン駆動設計
jgeem
3
450
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.2k
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
110
漸進。
ssssota
0
1.2k
PT AI без купюр
v0lka
0
200
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
52
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Site-Speed That Sticks
csswizardry
7
590
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Adaptive Systems
keathley
41
2.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day23 - 進階篇:Svelte 如何編譯?
第 12 屆 IT 鐵⼈賽 Svelte 編譯流程 {#if} {#each} {#await}
等另外處理 html 語法解析 遇到 { } 內的表達式 ⽤ acron 解析 css (<style> 裡頭) 使⽤ css-tree 產⽣語法樹 AST 產⽣語法樹 <script> 裡頭 使⽤ acron 分析並產⽣語法樹 AST
第 12 屆 IT 鐵⼈賽 語法樹完成! 主要會產⽣三個語法樹,CSS、HTML、instance CSS HTML instance
第 12 屆 IT 鐵⼈賽 準備編譯 a11y 檢查、變數宣告檢查、選擇器檢查、依賴(dependency)⽣成 等等可以在編譯時期完成的事情