Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
babel-plugin-codegen
Advanced tools
Generate code at build-time
The applications of this plugin are wide, so it's kinda hard to sum it up, but
basically my use case was I needed to add a bunch of named exports to
glamorous
(one for every DOM node type) and I didn't want to
maintain the exports in my source file. So someone created a post-build script
to concatenate them to the end of the file. I built this plugin so I could do
that without having an ad-hoc post-build script.
Read "Make maintainable workarounds with codegen 💥" for more inspiration
This plugin allows you to generate code at build-time. Any code that runs synchronously in node can be used to generate a string of code and that string will be inserted in place of where your usage appears.
It works by accepting your code string (or module when using the // @codegen
comment directive) and requiring it as a module. Then it takes whatever the
export was (which should be a string) and converts that string to an AST node
and swaps your usage node with the new AST node.
babel-plugin-macros
This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies
:
npm install --save-dev babel-plugin-codegen
This package works in a very similar way to babel-plugin-preval
except in this case instead of any value being replaced in the code, you're
actually replacing it with code (giving you a little bit more power in exchange
for potentially being a little more confusing).
Important notes:
codegen
is not run in a sandboxed environmentYou may like to watch this YouTube video to get an idea of what codegen is and how it can be used.
Before:
codegen`
const fs = require('fs')
module.exports = fs.readFileSync(require.resolve('./some-code.js'), 'utf8')
`
After (assuming some-code.js
contains the text: var x = 'Hello world!'
):
var x = 'Hello world!'
Here you can see the difference between this plugin and
babel-plugin-preval, which
would output the content of some-code.js
as a string instead:
"var x = 'Hello world!'"
codegen
can also handle some simple dynamic values as well:
Before:
const three = 3
const x = codegen`module.exports = '${three}'`
After:
const three = 3
const x = 3
Before:
import /* codegen */ './assign-one.js'
After (assign-one.js
is: module.exports = 'var x = 1'
):
var x = 1
You can also provide arguments! In this case, the module you import should export a function which accepts those arguments and returns a string.
Before:
import /* codegen(3) */ './assign-identity'
After (assign-identity.js
is:
module.exports = input => 'var x = ' + JSON.stringify(input) + ';'
):
var x = 3
Before:
const x = codegen.require('./es6-identity', 3)
After (es6-identity.js
is:
export default input => 'var x = ' + JSON.stringify(input) + ';'
):
const x = 3
// @codegen
)Using the codegen file comment will update a whole file to be evaluated down to an export.
Whereas the above usages (assignment/import/require) will only codegen the scope of the assignment or file being imported.
Before:
// @codegen
const array = ['apple', 'orange', 'pear']
module.exports = array
.map(fruit => `export const ${fruit} = '${fruit}';`)
.join('')
After:
export const apple = 'apple'
export const orange = 'orange'
export const pear = 'pear'
.babelrc
(Recommended).babelrc
{
"plugins": ["codegen"]
}
babel --plugins codegen script.js
require('babel-core').transform('code', {
plugins: ['codegen'],
})
babel-plugin-macros
Once you've
configured babel-plugin-macros
you can import/require the codegen macro at babel-plugin-codegen/macro
. For
example:
import codegen from 'babel-plugin-codegen/macro'
codegen`module.exports = ['a', 'b', 'c'].map(l => 'export const ' + l + ' = ' + JSON.stringify(l)).join(';')`
↓ ↓ ↓ ↓ ↓ ↓
export const a = "a";
export const b = "b";
export const c = "c";
You could also use
codegen.macro
if you'd prefer to type less 😀
One really important thing to note here is that it doesn't work by simply replacing your code with whatever string you export. Instead it replaces it at the AST level. This means that the resulting code should operate the same, but the format of the code could be entirely different. Most of the time this should not matter, but if it matters to you, please feel free to contribute back if you feel like you could make it work!
codegen.macro
I built this to solve a problem I was experiencing with glamorous. It's heavily based on my work in babel-plugin-preval.
I'm not aware of any, if you are please make a pull request and add it here!
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Thanks goes to these people (emoji key):
Kent C. Dodds 💻 📖 🚇 ⚠️ | Michael Rawlings 💻 📖 ⚠️ | Jan Willem Henckel 💻 📖 ⚠️ | Karan Thakkar 📖 | Justin Dorfman 🔍 | Michaël De Boey 💻 | Matija Marohnić 📖 |
Minh Nguyen 💻 ⚠️ | Caleb Eby 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
FAQs
Generate code at build-time
The npm package babel-plugin-codegen receives a total of 4,257 weekly downloads. As such, babel-plugin-codegen popularity was classified as popular.
We found that babel-plugin-codegen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.