JavaScript Compilation.md

• TypeScript transformation
  • The tsc compiler doesn’t yet let you run your own transforms.
  • And what if your project isn’t using TypeScript?
• esbuild doesn’t allow you to manipulate the AST
• Babel Plugin (That’s my option)
  • More powerful & easier to conceptualize.
• Babel Macros (https://github.com/kentcdodds/babel-plugin-macros)
  • Useful for create-react-app and things that don’t allow you to change configuration easily.
  • Macros have to be CommonJS
    • A Babel visitor must be synchronous and the visitor needs to require() the macro definition, but import() is async.
  • The interface is more limited (for example, I think it doesn’t give you easy access to the output file name).
  • The emotion documentation, for example, also recommends a Babel plugin approach instead of a macro if you can, because it allows for extra optimizations.
• recast (https://github.com/benjamn/recast & https://github.com/benjamn/ast-types)
  • It’s more for codemods, where a human is involved in looking at the output.
  • Doesn’t offer a lot more on top of Babel. It’s purpose is, for example, to preserve whitespace in the code, which we don’t care about.
• https://github.com/facebook/jscodeshift
  • codemod seems abandoned
  • Based on recast
  • Seems to only be useful if you’re already in the context of codemods
• https://github.com/acornjs/acorn
  • More popular than Babel, but requires other auxiliary tools
  • https://github.com/estools/escodegen
• https://github.com/swc-project/swc
  • Plugin is written in Rust.
• Useful references:
  • https://astexplorer.net
  • https://babeljs.io/docs/en/babel-types
  • https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md
• Implementation references:
  • https://github.com/CraigCav/css-zero
  • https://github.com/callstack/linaria/tree/master/packages/babel
  • https://github.com/sgtpep/csstag