Tweet
Tweet

Slide 1

Slide 1 text

plugins 101

Slide 2

Slide 2 text

giuseppe.pizza

Slide 3

Slide 3 text

Let’s transform some code for the good

Slide 4

Slide 4 text

Remove pineapple

Slide 5

Slide 5 text

ASTExplorer.net

Slide 6

Slide 6 text

ASTExplorer.net 1. Source Code 2. AST 3. Plugin 4. Result

Slide 7

Slide 7 text

AST - Abstract Syntax Tree

Slide 8

Slide 8 text

Pro-tip Use AST Explorer to find out the name of a piece of syntax! JSXAttribute ingredients JSXIdentifier {} JSXExpressionContainer [] ArrayExpression ‘pineapple’ StringLiteral

Slide 9

Slide 9 text

Plugins: Visitors to visit and transform the AST

Slide 10

Slide 10 text

Visitor: path has info about current path and node

Slide 11

Slide 11 text

Our Plugin: remove pineapple

Slide 12

Slide 12 text

Step1: grab the JSXExpressionContainer

Slide 13

Slide 13 text

Step2: grab the ArrayExpression

Slide 14

Slide 14 text

Step3: remove pineapple from arrExpr.node.elements

Slide 15

Slide 15 text

Done

Slide 16

Slide 16 text

Next? Replace a path and more Babel Handbook Create a node: Babel Types babeljs.io/docs/en/babel-types

Slide 17

Slide 17 text

Conclusion Babel is awesome! It is more than a tool for transpiling new syntax! Writing Babel plugins is empowering and my favorite (programming) hobby. True Test Drive Development: expect(transpiled).toEqual(expected); AST Explorer, Handbook and Babel Types Docs! Thank: @fkling42, James Kyle and the Babel contributors!

Slide 18

Slide 18 text

Thank You giuseppe.pizza