{"id":13395206,"url":"https://github.com/jgierer12/awesome-babel-macros","last_synced_at":"2025-10-02T23:35:45.964Z","repository":{"id":38206146,"uuid":"157602983","full_name":"jgierer12/awesome-babel-macros","owner":"jgierer12","description":"A collection of awesome babel macros and related resources","archived":true,"fork":false,"pushed_at":"2022-10-09T05:41:16.000Z","size":49,"stargazers_count":507,"open_issues_count":1,"forks_count":24,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-09-25T07:33:38.629Z","etag":null,"topics":["awesome","awesome-list","babel","babel-macros","babel-plugin-macros","list"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgierer12.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-14T19:54:15.000Z","updated_at":"2024-08-27T07:17:23.000Z","dependencies_parsed_at":"2023-01-19T14:32:11.293Z","dependency_job_id":null,"html_url":"https://github.com/jgierer12/awesome-babel-macros","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgierer12%2Fawesome-babel-macros","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgierer12%2Fawesome-babel-macros/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgierer12%2Fawesome-babel-macros/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgierer12%2Fawesome-babel-macros/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgierer12","download_url":"https://codeload.github.com/jgierer12/awesome-babel-macros/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219876112,"owners_count":16554735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","babel","babel-macros","babel-plugin-macros","list"],"created_at":"2024-07-30T17:01:46.165Z","updated_at":"2025-10-02T23:35:40.926Z","avatar_url":"https://github.com/jgierer12.png","language":null,"funding_links":[],"categories":["Others","miscellaneous"],"sub_categories":[],"readme":"# Awesome babel macros [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\n\u003e A collection of awesome [babel macros](https://github.com/kentcdodds/babel-plugin-macros) and related resources\n\n## Contents\n\n- [Macros](#macros)\n  - [General](#general)\n  - [Performance and Memory management](#performance-and-memory-management)\n  - [File loading](#file-loading)\n  - [Object/Array manipulation](#objectarray-manipulation)\n  - [TypeScript](#typescript)\n  - [Code generation](#code-generation)\n  - [Development](#development)\n  - [React](#react)\n  - [CSS-in-JS](#css-in-js)\n  - [GraphQL](#graphql)\n- [Resources](#resources)\n  - [General](#general-1)\n  - [Developing macros](#developing-macros)\n- [Integrations](#integrations)\n\n---\n\n## Macros\n\n### General\n\n- [`param.macro`](https://github.com/citycide/param.macro): Partial application syntax and lambda parameters for JavaScript, inspired by Scala's `_` and Kotlin's `it`\n- [`ms.macro`](https://github.com/knpwrs/ms.macro): Convert various time formats to milliseconds\n- [`data-uri.macro`](https://github.com/Andarist/data-uri.macro): Convert assets to [data URIs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)\n- [`regexgen.macro`](https://github.com/Andarist/regexgen.macro): Convert set of strings to optimized regular expression\n- [`tinker.macro`](https://github.com/bradlc/tinker.macro): Evaluate Laravel code\n- [`@lingui/macro`](https://lingui.js.org/ref/macro.html): Macro for internationalization in [LinguiJS](https://github.com/lingui/js-lingui/)\n- [`pipeline.macro`](https://github.com/Andarist/pipeline.macro): Macro working similarly to the pipeline operator\n- [`paths.macro`](https://github.com/storybookjs/paths.macro): Import paths like `__dirname` and `__filename` as static values\n- [`for-own.macro`](https://github.com/nicolo-ribaudo/for-own.macro): Make `for-in` only visit own properties\n- [`files.macro`](https://github.com/ridermansb/files.macro): Transform directory into array of file names\n- [`flavors.macro`](https://github.com/gnithin/flavors.macro): Build different flavors of an app by manipulating import headers\n- [`yaml-to-js.macro`](https://github.com/lorefnon/yaml-to-js.macro): Convert yaml template strings to javascript objects at build time\n- [`@ts-delight/pipe.macro`](https://github.com/ts-delight/pipe.macro): TypeScript friendly fluent pipeline API with support for async steps, additional arguments, early returns and reconciliation\n- [`@ts-delight/if-expr.macro`](https://github.com/ts-delight/if-expr.macro): Expression-oriented fluent alternative to javascript's if-statement that compiles away to ternary expressions\n- [`@ts-delight/switch-expr.macro`](https://github.com/ts-delight/switch-expr.macro): An expression-oriented fluent alternative to javascript's switch-statement that compiles away to ternary expressions\n- [`@ts-delight/async-to-generator.macro`](https://github.com/ts-delight/async-to-generator.macro): Transform async functions to generator functions\n- [`fast-fp.macro`](https://github.com/rakeshpai/fast-fp.macro): Zero overhead functional programming library\n- [`return.macro`](https://github.com/proteriax/return.macro): Kotlin’s early-return guard `?: return` in JavaScript\n\n### Performance and Memory management\n\n- [`using.macro`](https://github.com/Veetaha/using.macro): Wrap your resource handles into try-finally blocks automatically similarly to C# [using declaration](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/proposals/csharp-8.0/using#using-declaration) style\n- [`inline-loops.macro`](https://github.com/planttheidea/inline-loops.macro): Inline to native loops for performance\n- [`assign.macro`](https://github.com/vincentriemer/assign.macro): Transpile `Object.assign`-style expressions to direct assignments\n\n### File loading\n\n- [`lqip.macro`](https://github.com/stereobooster/lqip.macro): Create LQIP at build-time, similar to webpack's [`lqip-loader`](https://github.com/zouhir/lqip-loader)\n- [`raw.macro`](https://github.com/pveyes/raw.macro): Apply webpack's `raw-loader`\n- [`yaml.macro`](https://github.com/eemeli/yaml.macro): Load YAML files as pre-parsed objects\n- [`json.macro`](https://github.com/ifiokjr/json.macro): Load JSON files individually or by pattern matching, with special support for package.json, version and tsconfig files.\n- [`fetch.macro`](https://github.com/r17x/fetch.macro): Allows you to build fetcher function by URL at compile-time.\n\n### Object/Array manipulation\n\n- [`traph.macro`](https://github.com/caesarsol/traph.macro): Transform Objects easily, leveraging object getters and graphs\n- [`idx.macro`](https://github.com/dralletje/idx.macro): Traverse properties on objects and arrays\n\n### TypeScript\n- [`typecheck.macro`](https://github.com/vedantroy/typecheck.macro): Automatically generate type-checker functions for TypeScript types\n- [`ts-nameof.macro`](https://github.com/dsherret/ts-nameof/tree/master/packages/ts-nameof.macro): [`nameof`](https://msdn.microsoft.com/en-us/library/dn986596.aspx) in TypeScript\n\n### Code generation\n\n- [`preval.macro`](https://github.com/kentcdodds/preval.macro): Pre-evaluate code\u003cspan id=\"backlink-1\" /\u003e[\u003csup\u003e1\u003c/sup\u003e](#footnote-1)\n- [`codegen.macro`](https://github.com/kentcdodds/codegen.macro): Generate code[\u003csup\u003e1\u003c/sup\u003e](#footnote-1)\n- [`import-all.macro`](https://github.com/kentcdodds/import-all.macro): Import all files that match a glob\n\n### Development\n\n- [`penv.macro`](https://github.com/chengjianhua/penv.macro): Pick specified value or branch according to the build environment\n- [`dev-console.macro`](https://github.com/eemeli/dev-console.macro): Remove all `console.log`, `console.warn` and `console.error` calls from production builds\n- [`babel-plugin-trace/macro`](https://github.com/codemix/babel-plugin-trace): Add labeled statement logging helpers with file and function name prefix\n- [`inspect.macro`](https://github.com/bgschiller/inspect.macro): Log an expression and the result of that expression to the console\n- [`require-context.macro`](https://github.com/storybooks/require-context.macro): Mock webpack's `require.context()`\n- [`@ts-delight/debug.macro`](https://github.com/ts-delight/debug.macro): Make usage of [visionmedia/debug](https://github.com/visionmedia/debug) more convenient through build time enhancements\n\n### React\n\n- [`tersus-jsx.macro`](https://github.com/davidyu85/Tersus-JSX): Inspired by AngularJS, ng-if (use tj-if) and ng-repeat (use tj-for) for neater JSX in React\n- [`tagged-translations`](https://github.com/vinhlh/tagged-translations): Translate text in React applications\n- [`svgr.macro`](https://github.com/evenchange4/svgr.macro): Apply [SVGR](https://github.com/smooth-code/svgr)\n- [`css-to-rn.macro`](https://github.com/jhen0409/css-to-rn.macro): Convert CSS to React Native style sheet\n- [`hooks.macro`](https://github.com/yuchi/hooks.macro): Automatic React Hooks memoization invalidation\n- [`inline-mdx.macro`](https://github.com/hamlim/inline-mdx.macro): Convert MDX into inline components\n- [`react-broker/macros`](https://github.com/jaredLunde/react-broker): Lazy-load React components\n- [`rpi.macro`](https://github.com/stereobooster/rpi.macro): Macro for [`react-precious-image`](https://github.com/stereobooster/react-precious-image)\n- [`mdi-norm/macro`](https://github.com/eugeneilyin/mdi-norm#with-babel-macros): Embed Material Design system SVG icons\n- [`reactive.macro`](https://github.com/yesmeck/reactive.macro): Reduce React boilerplate\n- [`@ts-delight/inject-display-name.macro`](https://github.com/ts-delight/inject-display-name.macro): Inject display name into dynamically constructed components\n- [`react-css-modules.macro`](https://github.com/bohdanbirdie/react-css-modules.macro): Map CSS Modules to `styleName` property\n\n### CSS-in-JS\n\n- [`react-emotion/macro`](https://emotion.sh/docs/babel-plugin-emotion#babel-macros): Minify and optimize [emotion](https://github.com/emotion-js/emotion) styles\n- [`glamorous.macro`](https://github.com/kentcdodds/glamorous.macro): Give your [glamorous](https://github.com/paypal/glamorous) components a nice `displayName` for React DevTools\n- [`styled-jsx/macro`](https://github.com/vercel/styled-jsx#using-resolve-as-a-babel-macro): Use [styled-jsx](https://github.com/vercel/styled-jsx)'s `resolve` tag\n- [`styled-components/macro`](https://www.styled-components.com/docs/tooling#babel-macro): Improve the debugging experience and add server-side rendering support to [styled-components](https://www.styled-components.com/)\n- [`styled-import/macro`](https://github.com/glortho/styled-import): Lightweight CSS parser for stealing rules from stylesheets, for use with [styled-components](https://www.styled-components.com/), React, or anywhere else you might be doing CSS in JS -- especially useful for working with global or 3rd-party stylesheets\n- [`unique-classname.macro`](https://github.com/huchenme/unique-classname.macro): Generate unique className for emotion\n- [`twin.macro`](https://github.com/ben-rogerson/twin.macro): Alternative and more up-to-date solution to [Tailwind](https://tailwindcss.com/) as a macro\n- [`cssed/macro`](https://github.com/okotoki/cssed): 🤷‍♂️ CSS-in-JS modules that lets you write CSS in JS. That's it, no gimmicks\n\n### GraphQL\n\n- [`graphql.macro`](https://github.com/evenchange4/graphql.macro): Compile GraphQL AST\n- [`blade.macro`](https://github.com/babel-blade/babel-blade): Generate GraphQL query strings inline and solve the [double declaration problem](https://babel-blade.netlify.com/docs/declarationdeclaration.html)\n\n## Resources\n\n### General\n\n- [`babel-plugin-macros` usage](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md)\n- Search npm for [keyword:babel-plugin-macros](https://www.npmjs.com/search?q=keywords:babel-plugin-macros) to find macros\n- [Difference between plugins and macros](https://github.com/kentcdodds/babel-plugin-macros#whats-the-difference-between-babel-plugins-and-macros)\n- [Zero-config code transformation with babel-plugin-macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros)\n\n### Developing macros\n\n- [`babel-plugin-macros` usage for macro authors](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md)\n- [jamiebuilds/babel-handbook](https://github.com/jamiebuilds/babel-handbook)\n- [Writing custom Babel and ESLint plugins with ASTs](https://kentcdodds.com/talks/#writing-custom-babel-and-es-lint-plugins-with-as-ts)\n\n## Integrations\n\nThe following projects include `babel-plugin-macros`, so macros can be used out of the box without additional configuration:\n\n- [Gatsby](https://www.gatsbyjs.org/)\n- [Create React App](https://create-react-app.dev/)\n\n---\n\n## Footnotes\n\n1. \u003cspan id=\"footnote-1\" /\u003e[`preval` vs `codegen`](https://www.youtube.com/watch?v=1queadQ0048\u0026list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u) [:leftwards_arrow_with_hook:](#backlink-1)\n\n## Contribute\n\nContributions welcome! Read the [contribution guidelines](contributing.md) first.\n\n## License\n\n[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](http://creativecommons.org/publicdomain/zero/1.0)\n\nTo the extent possible under law, Jonas Gierer has waived all copyright and\nrelated or neighboring rights to this work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgierer12%2Fawesome-babel-macros","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgierer12%2Fawesome-babel-macros","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgierer12%2Fawesome-babel-macros/lists"}