jgierer12 / Awesome Babel Macros
A collection of awesome babel macros and related resources
Stars: ✭ 413
Projects that are alternatives of or similar to Awesome Babel Macros
Awesome Babel
😎A list of awesome Babel plugins, presets, etc.
Stars: ✭ 770 (+86.44%)
Mutual labels: babel, list
Awesome Nestjs
A curated list of awesome things related to NestJS 😎
Stars: ✭ 5,032 (+1118.4%)
Mutual labels: list
Awesome Vscode
🎨 A curated list of delightful VS Code packages and resources.
Stars: ✭ 19,659 (+4660.05%)
Mutual labels: list
I18nize React
Internationalize react apps within a lunch break
Stars: ✭ 389 (-5.81%)
Mutual labels: babel
Awesome Docker
🐳 A curated list of Docker resources and projects
Stars: ✭ 20,870 (+4953.27%)
Mutual labels: list
Eslint Plugin Babel
An ESlint rule plugin companion to babel-eslint
Stars: ✭ 391 (-5.33%)
Mutual labels: babel
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+948.18%)
Mutual labels: list
Compilers Targeting C
A list of compilers that can generate C code
Stars: ✭ 385 (-6.78%)
Mutual labels: list
Twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+1143.83%)
Mutual labels: babel
Generator Babel Boilerplate
A Yeoman generator to author libraries in ES2015 (and beyond!) for Node and the browser.
Stars: ✭ 380 (-7.99%)
Mutual labels: babel
Astexplorer
A web tool to explore the ASTs generated by various parsers.
Stars: ✭ 4,330 (+948.43%)
Mutual labels: babel
Ava
Node.js test runner that lets you develop with confidence 🚀
Stars: ✭ 19,458 (+4611.38%)
Mutual labels: babel
Proposals
✍️ Tracking the status of Babel's implementation of TC39 proposals (may be out of date)
Stars: ✭ 401 (-2.91%)
Mutual labels: babel
Pingy Cli
The Simple Frontend Build Tool. No Configuration, No Plugins.
Stars: ✭ 390 (-5.57%)
Mutual labels: babel
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (-2.18%)
Mutual labels: babel
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 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
: 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
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
: 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 objects -
json.macro
: Load JSON files individually or by pattern matching, with special support for package.json, version and tsconfig files.
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 code1 -
codegen.macro
: Generate code1 -
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 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 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 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
CSS-in-JS
-
react-emotion/macro
: Minify and optimize emotion styles -
glamorous.macro
: Give your glamorous components a nicedisplayName
for React DevTools -
styled-jsx/macro
: Use styled-jsx'sresolve
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
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:
Footnotes
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].