Skip to content

Instantly share code, notes, and snippets.

@hyrious
Last active May 17, 2024 02:10
Show Gist options
  • Save hyrious/0ec637c7ec2214096cb591062ec73ee0 to your computer and use it in GitHub Desktop.
Save hyrious/0ec637c7ec2214096cb591062ec73ee0 to your computer and use it in GitHub Desktop.
// Reference: https://github.com/SukkaW/react-compiler-webpack
import fs from 'node:fs'
import babel from '@babel/core'
import BabelPluginReactCompiler from 'babel-plugin-react-compiler'
/** @returns {import('esbuild').Plugin} */
export function reactCompiler(options = {}) {
const filter = options.filter || /\.[jt]sx$/
const reactCompilerConfig = options.reactCompilerConfig || {}
function b64enc(b) {
return Buffer.from(b).toString('base64')
}
function toUrl(map) {
return 'data:application/json;charset=utf-8;base64,' + b64enc(JSON.stringify(map))
}
return {
name: 'react-compiler',
setup({ onLoad }) {
onLoad({ filter }, async args => {
let input = await fs.promises.readFile(args.path, 'utf8')
let result = await babel.transformAsync(input, {
filename: args.path,
plugins: [
[BabelPluginReactCompiler, reactCompilerConfig],
],
parserOpts: {
plugins: ['jsx', 'typescript'],
},
ast: false,
sourceMaps: true,
configFile: false,
babelrc: false,
})
if (result == null) {
return { errors: [{ text: 'babel.transformAsync with react compiler plugin returns null' }] }
}
const { code, map } = result
return { contents: `${code}\n//# sourceMappingURL=${toUrl(map)}`, loader: 'default' }
})
}
}
}
export default reactCompiler
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment