Awesome
Awesome babel macros
A collection of awesome babel macros and related resources
Contents
Macros
General
param.macro
: Partial application syntax and lambda parameters for JavaScript, inspired by Scala's_
and Kotlin'sit
ms.macro
: Convert various time formats to millisecondsdata-uri.macro
: Convert assets to data URIsregexgen.macro
: Convert set of strings to optimized regular expressiontinker.macro
: Evaluate Laravel code@lingui/macro
: Macro for internationalization in LinguiJSpipeline.macro
: Macro working similarly to the pipeline operatorpaths.macro
: Import paths like__dirname
and__filename
as static valuesfor-own.macro
: Makefor-in
only visit own propertiesfiles.macro
: Transform directory into array of file namesflavors.macro
: Build different flavors of an app by manipulating import headersyaml-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 functionsfast-fp.macro
: Zero overhead functional programming libraryreturn.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 styleinline-loops.macro
: Inline to native loops for performanceassign.macro
: TranspileObject.assign
-style expressions to direct assignments
File loading
lqip.macro
: Create LQIP at build-time, similar to webpack'slqip-loader
raw.macro
: Apply webpack'sraw-loader
yaml.macro
: Load YAML files as pre-parsed objectsjson.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 graphsidx.macro
: Traverse properties on objects and arrays
TypeScript
typecheck.macro
: Automatically generate type-checker functions for TypeScript typests-nameof.macro
:nameof
in TypeScript
Code generation
preval.macro
: Pre-evaluate code<span id="backlink-1" /><sup>1</sup>codegen.macro
: Generate code<sup>1</sup>import-all.macro
: Import all files that match a glob
Development
penv.macro
: Pick specified value or branch according to the build environmentdev-console.macro
: Remove allconsole.log
,console.warn
andconsole.error
calls from production buildsbabel-plugin-trace/macro
: Add labeled statement logging helpers with file and function name prefixinspect.macro
: Log an expression and the result of that expression to the consolerequire-context.macro
: Mock webpack'srequire.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 Reacttagged-translations
: Translate text in React applicationssvgr.macro
: Apply SVGRcss-to-rn.macro
: Convert CSS to React Native style sheethooks.macro
: Automatic React Hooks memoization invalidationinline-mdx.macro
: Convert MDX into inline componentsreact-broker/macros
: Lazy-load React componentsrpi.macro
: Macro forreact-precious-image
mdi-norm/macro
: Embed Material Design system SVG iconsreactive.macro
: Reduce React boilerplate@ts-delight/inject-display-name.macro
: Inject display name into dynamically constructed componentsreact-css-modules.macro
: Map CSS Modules tostyleName
property
CSS-in-JS
react-emotion/macro
: Minify and optimize emotion stylesglamorous.macro
: Give your glamorous components a nicedisplayName
for React DevToolsstyled-jsx/macro
: Use styled-jsx'sresolve
tagstyled-components/macro
: Improve the debugging experience and add server-side rendering support to styled-componentsstyled-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 stylesheetsunique-classname.macro
: Generate unique className for emotiontwin.macro
: Alternative and more up-to-date solution to Tailwind as a macrocssed/macro
: 🤷♂️ CSS-in-JS modules that lets you write CSS in JS. That's it, no gimmicks
GraphQL
graphql.macro
: Compile GraphQL ASTblade.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:
Footnotes
- <span id="footnote-1" />
preval
vscodegen
:leftwards_arrow_with_hook:
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.