Tweet
Tweet

Slide 1

Slide 1 text

SWC Transformer TypeScript TSKaigi 2024 @fujiyamaorange

Slide 2

Slide 2 text

Pay / Biome Utility Types Pick Pay for Business fujiyamaorange

Slide 3

Slide 3 text

TypeScript SWC Transform emit

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Function Expression Arrow Function Function Declaration

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

SWC Transformer

Slide 9

Slide 9 text

TypeScript SWC Transform emit

Slide 10

Slide 10 text

SWC ~Speedy Web Compiler~ Next.js 12 Rust Babel 17 Rust SWC (TypeScript Babel )

Slide 11

Slide 11 text

SWC Transformer

Slide 12

Slide 12 text

React 3 ※React =JSX alt data-testid

Slide 13

Slide 13 text

Before After

Slide 14

Slide 14 text

Before After alt

Slide 15

Slide 15 text

Before After data-testid

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

TypeScript SWC Transform emit

Slide 18

Slide 18 text

20.93s 22.78s 22.59s Transform 12000 React cargo test --example -- --test-threads=1 Transform

Slide 19

Slide 19 text

SWC Transformer

Slide 20

Slide 20 text

I/O

Slide 21

Slide 21 text

20.93s 22.78s 22.59s 17.70s 19.56s 19.31s (Transform) 3.23s 3.22s 3.28s Transform

Slide 22

Slide 22 text

Transform ( )

Slide 23

Slide 23 text

Transform

Slide 24

Slide 24 text

Transform SWC fork SWC create

Slide 25

Slide 25 text

Transform SWC fork SWC create

Slide 26

Slide 26 text

( ) parse 919.22ms 959.42ms 929.58ms 931.66ms transform 56.26ms 61.25ms 58.77ms 15.72ms emit 8.75s 9.70s 9.56s 7.22s all 20.93s 22.78s 22.59s 17.70s ※

Slide 27

Slide 27 text

TypeScript SWC Transform emit

Slide 28

Slide 28 text

emit e.#mtd_name(self) mtd_name SWC AST Node SWC 200 AST Node ( : →FnDecl)

Slide 29

Slide 29 text

FnDecl AST emit!

Slide 30

Slide 30 text

emit AST Node AST emit

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

TypeScript SWC Transform emit

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

TypeScript (function) (function expression) (Arrow function expressions) SWC SWC Next.js Compiler Trait swc_ecma_visit::VisitMut TSKaigi Canva ~Gray Purple Isometric Elements & Mockups 5G Technology Technology Presentation~ carbon