Merge pull request #196 from ieow/feat/esbuildOptions

Feat/esbuild options

Author: inokawa

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`.

src/plugin/bundler.ts

@@ -54,7 +54,8 @@ module.exports = (function () {
  */
 export const bundle = async (
   filename: string,
-  options: RNRBConfig = {}
+  options: RNRBConfig = {},
+  esbuildOptions: Omit<esbuild.BuildOptions , "write" | "entryPoints" | "alias"> = {},
 ): Promise<string> => {
   const alias: Record<string, string> = {};
 
@@ -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;

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<BuildOptions, "write" | "entryPoints" | "alias"> = {}
+) => {
+  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();