Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Svelte 如何編譯程式碼（1）

Avatar for Kalan Kalan
October 02, 2020
Programming
0
200

Svelte 如何編譯程式碼（1）

Avatar for Kalan

Kalan

October 02, 2020
Tweet

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
790
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
350
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
180
状態管理を楽にする道
Avatar for Kalan kjj6198
1
380
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
150
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
200
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
170
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
160
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
76

Other Decks in Programming

See All in Programming
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
Avatar for えいえい ei_ei_eiichi
0
240
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
900
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
1.8k
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
170
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない？
Avatar for yimajo yimajo
2
340
Reduxモダナイズ　〜コードのモダン化を通して、将来のライブラリ移行に備える〜
Avatar for pvcresin pvcresin
2
680
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
Avatar for nrs nrslib
7
3.9k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
Avatar for Takashi uhucream
0
110
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
Avatar for TOMIKAWA Sotaro ssssota
2
1.2k
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
Avatar for Atsuya Sato natmark
0
580
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
220
プログラミングどうやる？ ～テスト駆動開発から学ぶ達人の型～
Avatar for Atsushi Okui a_okui
0
190

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
11
880

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day23 - 進階篇：Svelte 如何編譯？

  2. 第 12 屆 IT 鐵⼈賽 Svelte 編譯流程 {#if} {#each} {#await}

    等另外處理 html 語法解析 遇到 { } 內的表達式 ⽤ acron 解析 css (<style> 裡頭) 使⽤ css-tree 產⽣語法樹 AST 產⽣語法樹 <script> 裡頭 使⽤ acron 分析並產⽣語法樹 AST

  3. 第 12 屆 IT 鐵⼈賽 語法樹完成！ 主要會產⽣三個語法樹，CSS、HTML、instance CSS HTML instance

  4. 第 12 屆 IT 鐵⼈賽 準備編譯 a11y 檢查、變數宣告檢查、選擇器檢查、依賴（dependency）⽣成 等等可以在編譯時期完成的事情