Repository files navigation

A collection of awesomebabel macros and related resources

• 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

• param.macro: Partial application syntax and lambda parameters for JavaScript, inspired by Scala's_ and Kotlin'sit
• ms.macro: Convert various time formats to milliseconds
• data-uri.macro: Convert assets todata URIs
• regexgen.macro: Convert set of strings to optimized regular expression
• tinker.macro: Evaluate Laravel code
• @lingui/macro: Macro for internationalization inLinguiJS
• pipeline.macro: Macro working similarly to the pipeline operator
• paths.macro: Import paths like__dirname and__filename as static values
• for-own.macro: Makefor-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

• 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: TranspileObject.assign-style expressions to direct assignments

• 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 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.

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

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

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

• penv.macro: Pick specified value or branch according to the build environment
• dev-console.macro: Remove allconsole.log,console.warn andconsole.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'srequire.context()
• @ts-delight/debug.macro: Make usage ofvisionmedia/debug more convenient through build time enhancements

• 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: ApplySVGR
• 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 forreact-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 tostyleName property

• react-emotion/macro: Minify and optimizeemotion styles
• glamorous.macro: Give yourglamorous components a nicedisplayName for React DevTools
• styled-jsx/macro: Usestyled-jsx'sresolve tag
• styled-components/macro: Improve the debugging experience and add server-side rendering support tostyled-components
• styled-import/macro: Lightweight CSS parser for stealing rules from stylesheets, for use withstyled-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 toTailwind as a macro
• cssed/macro: 🤷‍♂️ CSS-in-JS modules that lets you write CSS in JS. That's it, no gimmicks

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

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

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

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

• Gatsby
• Create React App

1. preval vscodegen↩️

Contributions welcome! Read thecontribution guidelines first.

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