diff --git a/README.md b/README.md index 956b689..6046c24 100644 --- a/README.md +++ b/README.md @@ -146,6 +146,25 @@ module.exports = (async () => { })(); ``` +#### Custom Esbuild options + +To support custom Esbuild options, we can use Multiple Transformers method and replace the customTransformer.js file with the following code: + +```tsx +// root/customTransformer.js +const reactNativeReactBridgeTransformer = require("react-native-react-bridge/lib/plugin"); + +const esbuildOptions = { + pluglins: [], +}; +const transform = + reactNativeReactBridgeTransformer.createTransformer(esbuildOptions); + +module.exports.transform = function ({ src, filename, options }) { + return transform({ src, filename, options }); +}; +``` + ### 2. Make entry file for web app. - If you use React, React Native Web or Preact with React alias, import modules `react-native-react-bridge/lib/web`. diff --git a/src/plugin/bundler.ts b/src/plugin/bundler.ts index 9cf6fc8..bb7a1dc 100644 --- a/src/plugin/bundler.ts +++ b/src/plugin/bundler.ts @@ -54,7 +54,8 @@ module.exports = (function () { */ export const bundle = async ( filename: string, - options: RNRBConfig = {} + options: RNRBConfig = {}, + esbuildOptions: Omit = {}, ): Promise => { const alias: Record = {}; @@ -71,6 +72,8 @@ export const bundle = async ( alias["react-native"] = "react-native-web"; } + const {plugins, ...restOptions} = esbuildOptions; + const bundled = await esbuild.build({ entryPoints: [filename], bundle: true, @@ -139,7 +142,9 @@ export const bundle = async ( }); }, }, + ...(plugins || []) ], + ...restOptions, }); const code = bundled.outputFiles[0]!.text; diff --git a/src/plugin/index.ts b/src/plugin/index.ts index 039e532..93e56f2 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -4,6 +4,7 @@ * @module */ +import type { BuildOptions } from "esbuild"; import { isEntryFile } from "./babel"; import { RNRBConfig, bundle, escape } from "./bundler"; import { join } from "path"; @@ -31,19 +32,25 @@ try { // NOP } -export const transform = async (args: any /* TODO */) => { - const { filename, src } = args; - const isEntry = isEntryFile(src, filename); - if (isEntry) { - const res = await bundle(filename, metroOptions); - return metroTransformer.transform({ - ...args, - src: - "export default String.raw`" + - escape(res).replace(/\$\{(.*?)\}/g, '\\$\\{$1\\}') + - "`.replace(/\\\\([`${}])/g, '\\$1')", - }); - } - - return metroTransformer.transform(args); +export const createTransformer = ( + esbuildOptions: Omit = {} +) => { + return async (args: any /* TODO */) => { + const { filename, src } = args; + const isEntry = isEntryFile(src, filename); + if (isEntry) { + const res = await bundle(filename, metroOptions, esbuildOptions); + return metroTransformer.transform({ + ...args, + src: + "export default String.raw`" + + escape(res).replace(/\$\{(.*?)\}/g, "\\$\\{$1\\}") + + "`.replace(/\\\\([`${}])/g, '\\$1')", + }); + } + + return metroTransformer.transform(args); + }; }; + +export const transform = createTransformer();