Awesome babel macros

A collection of awesome babel macros and related resources

Contents

• Macros
  • General
  • Performance and Memory management
  • File loading
  • Object/Array manipulation
  • TypeScript
  • Code generation
  • Development
  • React
  • CSS-in-JS
  • GraphQL
• Resources
  • General
  • Developing macros
• Integrations

---

Macros

General

• param.macro: Partial application syntax and lambda parameters for JavaScript, inspired by Scala's _ and Kotlin's it
• ms.macro: Convert various time formats to milliseconds
• data-uri.macro: Convert assets to data URIs
• regexgen.macro: Convert set of strings to optimized regular expression
• tinker.macro: Evaluate Laravel code
• @lingui/macro: Macro for internationalization in LinguiJS
• pipeline.macro: Macro working similarly to the pipeline operator
• paths.macro: Import paths like __dirname and __filename as static values
• for-own.macro: Make for-in only visit own properties
• files.macro: Transform directory into array of file names
• flavors.macro: Build different flavors of an app by manipulating import headers
• yaml-to-js.macro: Convert yaml template strings to javascript objects at build time
• @ts-delight/pipe.macro: TypeScript friendly fluent pipeline API with support for async steps, additional arguments, early returns and reconciliation
• @ts-delight/if-expr.macro: Expression-oriented fluent alternative to javascript's if-statement that compiles away to ternary expressions
• @ts-delight/switch-expr.macro: An expression-oriented fluent alternative to javascript's switch-statement that compiles away to ternary expressions
• @ts-delight/async-to-generator.macro: Transform async functions to generator functions
• fast-fp.macro: Zero overhead functional programming library
• return.macro: Kotlin’s early-return guard ?: return in JavaScript

Performance and Memory management

• using.macro: Wrap your resource handles into try-finally blocks automatically similarly to C# using declaration style
• inline-loops.macro: Inline to native loops for performance
• assign.macro: Transpile Object.assign-style expressions to direct assignments

File loading

• lqip.macro: Create LQIP at build-time, similar to webpack's lqip-loader
• raw.macro: Apply webpack's raw-loader
• yaml.macro: Load YAML files as pre-parsed objects
• json.macro: Load JSON files individually or by pattern matching, with special support for package.json, version and tsconfig files.
• fetch.macro: Allows you to build fetcher function by URL at compile-time.

Object/Array manipulation

• traph.macro: Transform Objects easily, leveraging object getters and graphs
• idx.macro: Traverse properties on objects and arrays

TypeScript

• typecheck.macro: Automatically generate type-checker functions for TypeScript types
• ts-nameof.macro: nameof in TypeScript

Code generation

• preval.macro: Pre-evaluate code¹
• codegen.macro: Generate code¹
• import-all.macro: Import all files that match a glob

Development

• penv.macro: Pick specified value or branch according to the build environment
• dev-console.macro: Remove all console.log, console.warn and console.error calls from production builds
• babel-plugin-trace/macro: Add labeled statement logging helpers with file and function name prefix
• inspect.macro: Log an expression and the result of that expression to the console
• require-context.macro: Mock webpack's require.context()
• @ts-delight/debug.macro: Make usage of visionmedia/debug more convenient through build time enhancements

React

• tersus-jsx.macro: Inspired by AngularJS, ng-if (use tj-if) and ng-repeat (use tj-for) for neater JSX in React
• tagged-translations: Translate text in React applications
• svgr.macro: Apply SVGR
• css-to-rn.macro: Convert CSS to React Native style sheet
• hooks.macro: Automatic React Hooks memoization invalidation
• inline-mdx.macro: Convert MDX into inline components
• react-broker/macros: Lazy-load React components
• rpi.macro: Macro for react-precious-image
• mdi-norm/macro: Embed Material Design system SVG icons
• reactive.macro: Reduce React boilerplate
• @ts-delight/inject-display-name.macro: Inject display name into dynamically constructed components
• react-css-modules.macro: Map CSS Modules to styleName property

CSS-in-JS

• react-emotion/macro: Minify and optimize emotion styles
• glamorous.macro: Give your glamorous components a nice displayName for React DevTools
• styled-jsx/macro: Use styled-jsx's resolve tag
• styled-components/macro: Improve the debugging experience and add server-side rendering support to styled-components
• styled-import/macro: Lightweight CSS parser for stealing rules from stylesheets, for use with styled-components, React, or anywhere else you might be doing CSS in JS -- especially useful for working with global or 3rd-party stylesheets
• unique-classname.macro: Generate unique className for emotion
• twin.macro: Alternative and more up-to-date solution to Tailwind as a macro
• cssed/macro: 🤷‍♂️ CSS-in-JS modules that lets you write CSS in JS. That's it, no gimmicks

GraphQL

• graphql.macro: Compile GraphQL AST
• blade.macro: Generate GraphQL query strings inline and solve the double declaration problem

Resources

General

• babel-plugin-macros usage
• Search npm for keyword:babel-plugin-macros to find macros
• Difference between plugins and macros
• Zero-config code transformation with babel-plugin-macros

Developing macros

• babel-plugin-macros usage for macro authors
• jamiebuilds/babel-handbook
• Writing custom Babel and ESLint plugins with ASTs

Integrations

The following projects include babel-plugin-macros, so macros can be used out of the box without additional configuration:

• Gatsby
• Create React App

---

Footnotes

1. preval vs codegen ↩️

Contribute

Contributions welcome! Read the contribution guidelines first.

License

To the extent possible under law, Jonas Gierer has waived all copyright and related or neighboring rights to this work.