From bd1c860e871a58b53cf861df135e1dd27e75fb0a Mon Sep 17 00:00:00 2001 From: ieow Date: Tue, 1 Oct 2024 19:14:55 +0800 Subject: [PATCH 1/4] feat: esbuild options --- src/plugin/bundler.ts | 7 ++++++- src/plugin/index.ts | 21 +++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) 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..bb1bdaa 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -4,6 +4,7 @@ * @module */ +import { BuildOptions } from "esbuild"; import { isEntryFile } from "./babel"; import { RNRBConfig, bundle, escape } from "./bundler"; import { join } from "path"; @@ -47,3 +48,23 @@ export const transform = async (args: any /* TODO */) => { return metroTransformer.transform(args); }; + +export const createTransformer = (esbuildOptions: Omit = {} ) => { + const transform = 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); + }; + return transform; +} \ No newline at end of file From c0b6a25546d1e959bca8b43c64b5c26bbc17e3bd Mon Sep 17 00:00:00 2001 From: ieow Date: Wed, 2 Oct 2024 10:42:10 +0800 Subject: [PATCH 2/4] fix: update readme for esbuild options --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 956b689..c32a538 100644 --- a/README.md +++ b/README.md @@ -146,6 +146,23 @@ 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: + +``` +// root/customTransformer.js +const reactNativeReactBridgeTransformer = require("react-native-react-bridge/lib/plugin"); + +module.exports.transform = function ({ src, filename, options }) { + const esbuildOptions = { + pluglins: [ + ], + }; + const transform = reactNativeReactBridgeTransformer.createTransformer(esbuildOptions); + 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`. From a86d533f2bbad1f783dea02a8f35d50ef8b6bd25 Mon Sep 17 00:00:00 2001 From: ieow Date: Wed, 2 Oct 2024 16:27:18 +0800 Subject: [PATCH 3/4] fix: better escape --- src/plugin/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin/index.ts b/src/plugin/index.ts index bb1bdaa..0b5fd99 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -59,7 +59,7 @@ export const createTransformer = (esbuildOptions: Omit Date: Wed, 2 Oct 2024 19:54:03 +0900 Subject: [PATCH 4/4] Refactor --- README.md | 16 +++++++++------- src/plugin/index.ts | 36 +++++++++++------------------------- 2 files changed, 20 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index c32a538..6046c24 100644 --- a/README.md +++ b/README.md @@ -147,19 +147,21 @@ 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 }) { - const esbuildOptions = { - pluglins: [ - ], - }; - const transform = reactNativeReactBridgeTransformer.createTransformer(esbuildOptions); - return transform({ src, filename, options }); + return transform({ src, filename, options }); }; ``` diff --git a/src/plugin/index.ts b/src/plugin/index.ts index 0b5fd99..93e56f2 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -4,7 +4,7 @@ * @module */ -import { BuildOptions } from "esbuild"; +import type { BuildOptions } from "esbuild"; import { isEntryFile } from "./babel"; import { RNRBConfig, bundle, escape } from "./bundler"; import { join } from "path"; @@ -32,25 +32,10 @@ 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 = {} ) => { - const transform = async (args: any /* TODO */) => { +export const createTransformer = ( + esbuildOptions: Omit = {} +) => { + return async (args: any /* TODO */) => { const { filename, src } = args; const isEntry = isEntryFile(src, filename); if (isEntry) { @@ -59,12 +44,13 @@ export const createTransformer = (esbuildOptions: Omit