var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var A=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),C=(n,l)=>{for(var s in l)r(n,s,{get:l[s],enumerable:!0})},a=(n,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of y(l))!D.call(n,c)&&c!==s&&r(n,c,{get:()=>l[c],enumerable:!(o=p(l,c))||o.enumerable});return n};var m=(n,l,s)=>(s=n!=null?h(F(n)):{},a(l||!n||!n.__esModule?r(s,"default",{value:n,enumerable:!0}):s,n)),f=n=>a(r({},"__esModule",{value:!0}),n);var t=A((b,i)=>{i.exports=_jsx_runtime});var E={};C(E,{default:()=>g,frontmatter:()=>u});var e=m(t()),u={title:"Why every frontend developer should know ASTs",published:"1st of July, 2022",description:"Short article showing when knowledge of ASTs can be useful for frontend developer",category:"AST"};function d(n){let l=Object.assign({nav:"nav",h5:"h5",ul:"ul",li:"li",a:"a",h2:"h2",span:"span",blockquote:"blockquote",p:"p",div:"div",pre:"pre",code:"code",h3:"h3",h4:"h4",strong:"strong",em:"em"},n.components),{Image:s}=l;return s||S("Image",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l.nav,{className:"toc",children:[(0,e.jsx)(l.h5,{className:"toc-heading toc-item-h5",children:"Table of contents"}),(0,e.jsx)(l.ul,{className:"toc-level toc-level-1",children:(0,e.jsxs)(l.li,{className:"toc-item toc-item-h2",children:[(0,e.jsx)(l.a,{className:"toc-link toc-link-h2",href:"#what-is-ast",children:"What is AST?"}),(0,e.jsxs)(l.ul,{className:"toc-level toc-level-2",children:[(0,e.jsxs)(l.li,{className:"toc-item toc-item-h3",children:[(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#ast-for-a-frontend-developer",children:"AST for a frontend developer"}),(0,e.jsxs)(l.ul,{className:"toc-level toc-level-3",children:[(0,e.jsx)(l.li,{className:"toc-item toc-item-h4",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h4",href:"#plugins-creation",children:"Plugins creation"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h4",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h4",href:"#interactive-playground",children:"Interactive playground"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h4",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h4",href:"#codemods",children:"Codemods"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h4",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h4",href:"#analytics",children:"Analytics"})})]})]}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h3",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#ps",children:"PS"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h3",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#tools",children:"Tools"})})]})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"what-is-ast",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#what-is-ast",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"What is AST?"]}),` `,(0,e.jsxs)(l.blockquote,{children:[` `,(0,e.jsx)(l.p,{children:"In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of the text (often source code) written in a formal language. Each node of the tree denotes a construct occurring in the text."}),` `]}),` `,(0,e.jsx)(l.p,{children:`ASTs are being used in interpreters and compilers, for static code analysis. For instance, you might want to create a tool that will decrease duplicate of code or create a transpiler, which will transform the code from Python to Javascript. Before the code transforms to AST it looks like plain text, after parsing it becomes a tree structure, which contains the same information as the source code. As a result, we can transform the source code to AST and vice versa.`}),` `,(0,e.jsx)(l.p,{children:"Let's take a look on example:"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"sum"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"a"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"b"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"a"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"b"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:">="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F78C6C"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F78C6C"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"a"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"b"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"Parser will create abstract syntax tree, which is schematically represented below:"}),` `,(0,e.jsx)("div",{className:"flex justify-center w-60",children:(0,e.jsx)(s,{src:"/ast-example.png",alt:"ast-example",width:650,height:800,quality:60,sizes:"320 640 750",layout:"intrinsic"})}),` `,(0,e.jsx)(l.p,{children:"At the top of the tree is a node representing the full program. This node has a body, containing all the top-level statements you wrote down. Going deeper, every statement has other sub-children representing code that is a part of that node, and so on and so on."}),` `,(0,e.jsxs)(l.p,{children:["It's simplified representation of our code, to look into a real AST tree you can put it to ",(0,e.jsx)(l.a,{href:"https://astexplorer.net/",children:"AST explorer"}),` and choose the parser you need. I recommended you to play around with that a bit, if this is your first time seeing the AST.`]}),` `,(0,e.jsxs)(l.h3,{id:"ast-for-a-frontend-developer",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#ast-for-a-frontend-developer",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"AST for a frontend developer"]}),` `,(0,e.jsxs)(l.h4,{id:"plugins-creation",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#plugins-creation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Plugins creation"]}),` `,(0,e.jsx)(l.p,{children:`A lot of tools in frontend use AST transformations under the hood, like Babel, Typescript, Eslint, Prettier, Remark, Rehype, Minify, Uglify and etc. In most cases with Babel and Eslint, you can apply already existing plugin to Babel or Eslint, but sometimes you might need to create your own plugin and that's where the knowledge of ASTs can be useful!`}),` `,(0,e.jsx)(l.p,{children:`For example, in your company, you have some code standards and you want to prevent newcomers and developers from mistakes, and enforce the rules specific to your codebase. This can be achieved by creating your own eslint plugin.`}),` `,(0,e.jsx)(l.p,{children:`Let's say we have to support multidirectional layouts. Sometimes developrs can forget about that and write code like this:`}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" styled "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"styled-components"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" StyledWrapper "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"styled"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"`"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:" margin-right: 15px;"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"Our eslint plugin can warn developer and remind him to use helper function, to rewrite the code to:"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" styled "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"styled-components"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"right"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@utils/rtl"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" StyledWrapper "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"styled"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:" margin-"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"right"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:": 15px;"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"In that case our eslint rule code can look something like this:"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" useRtl "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"meta"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"problem"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"docs"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"Checks if the static literal values require RTL function"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"Possible Errors"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"recommended"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF9CAC"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"create"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"ctx"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"rules"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"right"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"left"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"padding-left"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"padding-right"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"margin-left"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"margin-right"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" TemplateElement"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// helper function which checks, that current template node is a styled-component"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"isStyledTagName"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")) "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"cooked"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"properties"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"cooked"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"replace"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"/"}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"\\n"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"/"}),(0,e.jsx)(l.span,{style:{color:"#F78C6C"},children:"gm"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"trim"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"split"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"trim"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"())"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"filter"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"Boolean"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"split"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"))"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"properties"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"(["}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"prop"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"])"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"rules"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"includes"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"prop"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"context"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"report"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" message"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"Values for right and left edges are different. Use rtl utility function"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["It's a simple example. The interesting part here starts from ",(0,e.jsx)(l.code,{children:"TemplateElement(path)"}),". It's a node type on which ESLint will call visitor function. If you would like to go deeper with AST trees, for better understanding, you can read about ",(0,e.jsx)(l.a,{href:"https://en.wikipedia.org/wiki/Visitor_pattern",children:"visitor pattern"}),` which is useful to visit complex object structures and usually being used to traverse AST trees.`]}),` `,(0,e.jsxs)(l.p,{children:["In the example above ",(0,e.jsx)(l.code,{children:"babel-eslint"}),` parser was used and we did not remove or modified the current node, we just explored it and called eslint reporter.`]}),` `,(0,e.jsx)(l.p,{children:"Pretty simple, right?"}),` `,(0,e.jsxs)(l.p,{children:["One of the most used parsers is ",(0,e.jsx)(l.code,{children:"@babel/parser"}),", formerly known as ",(0,e.jsx)(l.code,{children:"babylon"}),`. It comes with everything you need to traverse and transform AST. You can also use the `,(0,e.jsx)(l.code,{children:"@babel/types"}),"(",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.em,{children:"Babel Types is a Lodash-esque utility library for AST nodes"})}),"), which can help you to add checks for nodes during the traverse process or to create new nodes."]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"types"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"parse"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"parser"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@babel/core"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"..."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"declaration"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"properties"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"prop"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// check if node is ObjectProperty"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"isObjectProperty"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"prop"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")) "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// check if key is Identifier"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"isIdentifier"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"prop"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"prop"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"..."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"..."})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// or create new nodes like that"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"..."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// will generate a new attribute with string value"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"generateAttribute"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"jsxAttribute"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"jsxIdentifier"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"stringLiteral"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"))"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"..."})})]})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"traverse"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@babel/core"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// you can remove the node from AST tree like that:"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"traverse"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(ast"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// will remove typescript type annotations"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"TSTypeAnnotation"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"remove"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// will remove typescript type assertions"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"TSTypeParameterInstantiation"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"remove"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),` `,(0,e.jsx)("div",{className:"flex justify-center py-4",children:(0,e.jsx)(s,{quality:50,className:"rounded-md",src:"/simple.jpeg",layout:"fixed",width:220,height:200})}),` `,(0,e.jsxs)(l.h4,{id:"interactive-playground",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#interactive-playground",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Interactive playground"]}),` `,(0,e.jsxs)(l.p,{children:[`Another example is where I found AST transformations to be useful. We had to add playgrounds for our components in our design system documentation. We decided to use `,(0,e.jsx)(l.a,{href:"https://github.com/FormidableLabs/react-live",children:"react-live"}),`, the library, which helps to create an interactive playground, it's easy to use, and has a good API. My friend and colleague made a great design for the whole new documentation including a playground, the design proposal also included a tab called `,(0,e.jsx)(l.code,{children:"playground"}),`, where it should be possible to change the component's props values with toggles, selects, text fields, something like storybook knobs feature.`]}),` `,(0,e.jsx)("div",{className:"flex justify-center w-60",children:(0,e.jsx)(s,{src:"/playground.png",alt:"playground",width:650,height:400,quality:60,sizes:"320 640 750",layout:"intrinsic"})}),` `,(0,e.jsx)(l.p,{children:"It requires us to pass code property with a string value."}),` `,(0,e.jsx)(l.p,{children:`So it's the perfect case for AST transformations because parser will receive it as a string, we can do some transformations based on our knobs choices and generate the code to react-live.`}),` `,(0,e.jsx)(l.p,{children:(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.em,{children:"Something like that:"})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// we use @babel/standalone here, because it's possible to use in browser"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"transform"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"babelTransform"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@babel/standalone"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"LiveProvider"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"LiveEditor"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"LiveError"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"LivePreview"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"react-live"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" Button "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@kiwicom/orbit-components/lib/Button"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@kiwicom/orbit-components/lib/Switch"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" Stack "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"@kiwicom/orbit-components/lib/Stack"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" styled "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"styled-components"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" transform "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"attrs"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"result"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"babelTransform"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" filename"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" sourceType"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"module"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" presets"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" plugins"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" types"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" visitor"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"JSXAttribute"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"currentName"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"attrs"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"currentName"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"!=="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"undefined"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// creates node with boolean literal value"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"booleanLiteral"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// after the first transformation it changes to React.createElement"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// that's why we use ObjectPropety here"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"ObjectProperty"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"currentKey"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"attrs"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"currentKey"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"!=="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"undefined"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"t"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"booleanLiteral"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"result"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" Playground "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"circled"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"setCircled"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF9CAC"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"handleTransform"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"transform"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"circled"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"LiveProvider"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:'() => '}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"scope"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" Button"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" styled "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"/* react-live already has prop which help us to do transformations */"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"transformCode"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"handleTransform"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"LiveEditor"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"LiveError"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"LivePreview"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"checked"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"circled"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"setCircled"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"prev"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"prev"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" Playground"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),` `,(0,e.jsxs)(l.h4,{id:"codemods",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#codemods",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Codemods"]}),` `,(0,e.jsxs)(l.p,{children:["That's one of my favorites! Codemods are really useful and it makes your developer life much easier ",(0,e.jsx)(l.span,{role:"img","aria-label":"grinning face with smiling eyes",children:"\u{1F601}"}),` Imagine, that you have to update a large codebase after some breaking change or just to make some large refactoring. Of course, you can use regex search and replace in your IDE, but that will work only for simple replacements, what if you have to make comprehensive refactoring? In that case, codemod is the perfect solution.`]}),` `,(0,e.jsxs)(l.p,{children:["We can use a tool called ",(0,e.jsx)(l.a,{href:"https://github.com/facebook/jscodeshift",children:"jscodeshift"}),`, which runs codemodes over multiple javascript and typescript files. I will give you an example from our codebase. We have a component called `,(0,e.jsx)(l.code,{children:"Stack"})," and once we decided to change API, property ",(0,e.jsx)(l.code,{children:"spacing"}),`, which is responsible for spacings between child elements and we decided to change its values to more intuitive ones.`]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{className:"",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" mediaQueries "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"mediumMobile"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"largeMobile"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"tablet"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"desktop"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"largeDesktop"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// current values"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" oldSpacings "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"none"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"extraTight"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"tight"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"condensed"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"compact"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"natural"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"comfy"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"loose"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"extraLoose"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// new ones"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" newSpacings "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"none"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"XXXSmall"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"XXSmall"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"XSmall"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"small"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"medium"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"large"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"XLarge"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"XXLarge"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" replaceValue "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newSpacings"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"findIndex"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#F78C6C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"newSpacings"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"oldSpacings"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"findIndex"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")]"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"transformStackSpacing"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"fileInfo"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"api"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"api"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"jscodeshift"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"root"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"fileInfo"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// basic usage on JSX element with string literal"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"JSXOpeningElement"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"JSXAttribute"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"spacing"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"replaceValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// usage in media queries with string literal"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// we also have to replaace it inside mediaQuery properties"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:'// from to "}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"objectExpressions"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"findJSXElements"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"JSXAttribute"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"mq"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"JSXExpressionContainer"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"ObjectExpression"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// this is where Babel and TypeScript AST differ"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"for"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"nodeType"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"of"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"Property"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"ObjectProperty"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"]) "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"objectExpressions"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"nodeType"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"spacing"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"replaceValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#676E95",fontStyle:"italic"},children:"// usage in conditional expression"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"findJSXElements"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"JSXAttribute"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:","}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"spacing"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"find"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"j"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"ConditionalExpression"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD",fontStyle:"italic"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C792EA"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"consequent"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"replaceValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"consequent"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"alternate"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"replaceValue"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"node"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"alternate"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"root"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#82AAFF"},children:"toSource"}),(0,e.jsx)(l.span,{style:{color:"#F07178"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"module.exports"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" transformStackSpacing"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),` `,(0,e.jsxs)(l.p,{children:["As you can see, it's simple, it looks slightly different from the ",(0,e.jsx)(l.code,{children:"@babel/parser"}),` examples above, but once you know which node you have to find and which value to replace - it's becoming really straightforward and easy.`]}),` `,(0,e.jsx)(l.p,{children:"Then you can just apply it to your codebase:"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",children:(0,e.jsx)(l.code,{className:"",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFCB6B"},children:"jscodeshift"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"-t"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"stack-spacing.js"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"../src/**/*.js"}),(0,e.jsx)(l.span,{style:{color:"#89DDFF"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C3E88D"},children:"-p"})]})})})}),` `,(0,e.jsxs)(l.p,{children:["It's also better to write ",(0,e.jsx)(l.a,{href:"https://github.com/facebook/jscodeshift#unit-testing",children:"tests"})," before you will start to apply it to your codebase, that will also help you to check if it while working on that codemod ",(0,e.jsx)(l.span,{role:"img","aria-label":"winking face",children:"\u{1F609}"})]}),` `,(0,e.jsxs)(l.h4,{id:"analytics",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#analytics",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Analytics"]}),` `,(0,e.jsxs)(l.p,{children:[`You can also use AST for static code analysis, without transforming it, just to find the information you need. It can be useful, especially for a design system, when you have to support multiple projects and you have to measure adoption, how many components are used, where and how. You can write the parser tool, which will walk through the code and collect information, or use an already existing solution `,(0,e.jsx)(l.a,{href:"https://github.com/moroshko/react-scanner",children:"react-scanner"}),"."]}),` `,(0,e.jsx)("div",{className:"flex justify-center w-60",children:(0,e.jsx)(s,{src:"/scanner.png",alt:"scanner",width:650,height:400,quality:80,sizes:"320 640 750",layout:"intrinsic"})}),` `,(0,e.jsx)(l.p,{children:`That's how we track our components, except for the number of instances, we also collect component props instances with the links to our projects where it's used. So it gives us a lot of information about the usage of our design system, helps us to make decisions about deprecations, like how the next deprecation will affect our users and etc.`}),` `,(0,e.jsxs)(l.p,{children:["And everything that with the help of AST. ",(0,e.jsx)(l.span,{role:"img","aria-label":"","aria-hidden":!0,children:"\u{1F970}"})]}),` `,(0,e.jsxs)(l.h3,{id:"ps",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#ps",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"PS"]}),` `,(0,e.jsxs)(l.p,{children:[`I hope you enjoyed that. It's a large topic and I wanted to show examples, where I found it useful, without going deep into details. If you are new to it and never used ASTs before, it's time to start! Good luck and have fun `,(0,e.jsx)(l.span,{role:"img","aria-label":"victory hand",children:"\u270C\uFE0F"})]}),` `,(0,e.jsxs)(l.h3,{id:"tools",children:[(0,e.jsx)(l.a,{className:"title-anchor",href:"#tools",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Tools"]}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://astexplorer.net/",children:"AST explorer"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://babeljs.io/docs/en/babel-parser",children:"@babel/parser"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://github.com/moroshko/react-scanner",children:"react-scanner"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://github.com/facebook/jscodeshift",children:"jscodeshift"})}),` `]})]})}function N(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var g=N;function S(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(E);})(); ;return Component;