rsbuild-plugin-react-native-web 3.4.1 → 3.6.0

package/dist/index.d.ts

@@ -1,62 +1,71 @@
-import { RsbuildPlugin } from '@rsbuild/core';
-import MagicString from 'magic-string';
-
-/**
- * Code transformation utilities for fixing React Native package compatibility issues
- * Ported from vite-plugin-rnw (https://github.com/dannyhw/vite-plugin-rnw)
- */
-
-interface TransformResult {
-    code: string;
-    map: ReturnType<MagicString['generateMap']> | null;
-    changed: boolean;
-}
-
-interface PluginReactNativeWebOptions {
-    /**
-     * Additional node_modules that need to be transpiled.
-     * By default, packages starting with `react-native`, `@react-native`, `expo`, and `@expo`
-     * are already included.
-     *
-     * @example ['my-react-native-library']
-     */
-    modulesToTranspile?: string[];
-    /**
-     * The JSX runtime to use.
-     * - 'automatic': Uses the new JSX transform (React 17+)
-     * - 'classic': Uses React.createElement
-     * @default 'automatic'
-     */
-    jsxRuntime?: 'automatic' | 'classic';
-    /**
-     * The source for JSX imports when using the automatic runtime.
-     * @default 'react'
-     * @example 'nativewind' for NativeWind v4+
-     */
-    jsxImportSource?: string;
-    /**
-     * Modules that should not be tree-shaken.
-     * Some React Native packages have side effects that may be incorrectly removed.
-     * @default ['react-native-css-interop', 'expo-modules-core']
-     */
-    noTreeshakeModules?: string[];
-    /**
-     * Absolute path to the react-native-web package directory.
-     * This is needed for pnpm/monorepo setups where react-native-reanimated
-     * cannot resolve react-native-web internal modules.
-     *
-     * If provided, the plugin will rewrite import paths in transformed code
-     * to use absolute paths, ensuring proper module resolution.
-     *
-     * @example '/path/to/node_modules/react-native-web'
-     */
-    reactNativeWebPath?: string;
-}
-/**
- * Rsbuild plugin for React Native Web support.
- * This plugin enables you to use React Native components in web applications.
- */
-declare function pluginReactNativeWeb(options?: PluginReactNativeWebOptions): RsbuildPlugin;
-
-export { pluginReactNativeWeb };
-export type { PluginReactNativeWebOptions, TransformResult };
+import type { RsbuildPlugin } from '@rsbuild/core';
+
+/**
+ * Rsbuild plugin for React Native Web support.
+ * This plugin enables you to use React Native components in web applications.
+ */
+export declare function pluginReactNativeWeb(options?: PluginReactNativeWebOptions): RsbuildPlugin;
+
+export declare interface PluginReactNativeWebOptions {
+    /**
+     * Whether React Native Web should run in development mode.
+     *
+     * `process.env.NODE_ENV` and `__DEV__` are resolved independently using this
+     * priority: `dev` > the corresponding existing define > the host environment.
+     * Define expressions are intentionally not parsed. If only `process.env.NODE_ENV`
+     * is customized while `dev` and `__DEV__` are unset, `__DEV__` falls back to the
+     * host environment and may disagree with that custom define. To keep them aligned,
+     * set `dev` or define `__DEV__` explicitly.
+     */
+    dev?: boolean;
+    /**
+     * Additional node_modules that need to be transpiled.
+     * By default, packages starting with `react-native`, `@react-native`, `expo`, and `@expo`
+     * are already included.
+     *
+     * @example ['my-react-native-library']
+     */
+    modulesToTranspile?: string[];
+    /**
+     * The JSX runtime to use.
+     * - 'automatic': Uses the new JSX transform (React 17+)
+     * - 'classic': Uses React.createElement
+     * @default 'automatic'
+     */
+    jsxRuntime?: 'automatic' | 'classic';
+    /**
+     * The source for JSX imports when using the automatic runtime.
+     * @default 'react'
+     * @example 'nativewind' for NativeWind v4+
+     */
+    jsxImportSource?: string;
+    /**
+     * Modules that should not be tree-shaken.
+     * Some React Native packages have side effects that may be incorrectly removed.
+     * @default ['react-native-css-interop', 'expo-modules-core']
+     */
+    noTreeshakeModules?: string[];
+    /**
+     * Absolute path to the react-native-web package directory.
+     * This is needed for pnpm/monorepo setups where react-native-reanimated
+     * cannot resolve react-native-web internal modules.
+     *
+     * If provided, the plugin will rewrite import paths in transformed code
+     * to use absolute paths, ensuring proper module resolution.
+     *
+     * @example '/path/to/node_modules/react-native-web'
+     */
+    reactNativeWebPath?: string;
+}
+
+/**
+ * Code transformation utilities for fixing React Native package compatibility issues
+ * Ported from vite-plugin-rnw (https://github.com/dannyhw/vite-plugin-rnw)
+ */
+export declare interface TransformResult {
+    code: string;
+    map: string | null;
+    changed: boolean;
+}
+
+export { }

package/dist/index.js

@@ -1,228 +1,248 @@
-import CJS_COMPAT_NODE_URL_25fbad5c92e2ff5b from 'node:url';
-import CJS_COMPAT_NODE_PATH_25fbad5c92e2ff5b from 'node:path';
-import CJS_COMPAT_NODE_MODULE_25fbad5c92e2ff5b from "node:module";
-
-var __filename = CJS_COMPAT_NODE_URL_25fbad5c92e2ff5b.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_25fbad5c92e2ff5b.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_25fbad5c92e2ff5b.createRequire(import.meta.url);
-
-// ------------------------------------------------------------
-// end of CJS compatibility banner, injected by Storybook's esbuild configuration
-// ------------------------------------------------------------
-
-// src/index.ts
-import { normalize as normalize2 } from "pathe";
-
-// src/transforms.ts
-import MagicString from "magic-string";
+import "node:module";
 import { normalize } from "pathe";
+import magic_string from "magic-string";
 function analyzeRequireStatements(originalCode, exportedVars) {
-  let importMap = /* @__PURE__ */ new Map();
-  for (let varName of exportedVars) {
-    let requireMatch = new RegExp(
-      `${varName}\\s*=\\s*[\\s\\S]*?require\\(['"]([^'"]+)['"]\\)(?:\\.([\\w]+))?`,
-      "g"
-    ).exec(originalCode);
-    if (requireMatch) {
-      let [, modulePath, prop] = requireMatch, key = `${modulePath}:${prop || "default"}`;
-      importMap.has(key) || importMap.set(key, []), importMap.get(key).push(varName);
+    const importMap = new Map();
+    for (const varName of exportedVars){
+        const requirePattern = new RegExp(`${varName}\\s*=\\s*[\\s\\S]*?require\\(['"]([^'"]+)['"]\\)(?:\\.([\\w]+))?`, 'g');
+        const requireMatch = requirePattern.exec(originalCode);
+        if (requireMatch) {
+            const [, modulePath, prop] = requireMatch;
+            const key = `${modulePath}:${prop || 'default'}`;
+            if (!importMap.has(key)) importMap.set(key, []);
+            importMap.get(key).push(varName);
+        }
     }
-  }
-  return importMap;
+    return importMap;
 }
 function generateDirectExports(importMap, resolveModule) {
-  let exports = "";
-  for (let [key, vars] of importMap) {
-    let [modulePath, prop] = key.split(":"), resolvedPath = resolveModule ? resolveModule(modulePath) : modulePath;
-    if (prop === "default")
-      for (let varName of vars)
-        exports += `export { default as ${varName} } from '${resolvedPath}';
-`;
-    else
-      for (let varName of vars)
-        exports += `export { ${prop} as ${varName} } from '${resolvedPath}';
-`;
-  }
-  return exports;
+    let exports = '';
+    for (const [key, vars] of importMap){
+        const [modulePath, prop] = key.split(':');
+        const resolvedPath = resolveModule ? resolveModule(modulePath) : modulePath;
+        if ('default' === prop) for (const varName of vars)exports += `export { default as ${varName} } from '${resolvedPath}';\n`;
+        else for (const varName of vars)exports += `export { ${prop} as ${varName} } from '${resolvedPath}';\n`;
+    }
+    return exports;
 }
 function transformReanimatedWebUtils(code, id, _isProduction, opts) {
-  let normalizedId = normalize(id);
-  if (!(normalizedId.includes("react-native-reanimated") && normalizedId.includes("node_modules")) || !normalizedId.includes("ReanimatedModule/js-reanimated/webUtils") || !code.includes("export let") || !code.includes("try") || !code.includes("require"))
-    return { code, map: null, changed: !1 };
-  let exportedVars = Array.from(code.matchAll(/export let (\w+);/g)).map((match) => match[1]);
-  if (exportedVars.length === 0)
-    return { code, map: null, changed: !1 };
-  let importMap = analyzeRequireStatements(code, exportedVars), ms = new MagicString(code), changed = !1;
-  for (let m of code.matchAll(
-    /try\s*\{[^{}]*?require\([^)]+\)[^{}]*?\}\s*catch[^{}]*?\{[^{}]*?\}/gs
-  )) {
-    let start = m.index, end = start + m[0].length;
-    ms.remove(start, end), changed = !0;
-  }
-  for (let m of code.matchAll(/export let \w+;/g)) {
-    let start = m.index, end = start + m[0].length;
-    ms.remove(start, end), changed = !0;
-  }
-  let exports = generateDirectExports(importMap, opts?.resolveModule);
-  if (exports && (ms.append(`
-${exports}`), changed = !0), !changed)
-    return { code, map: null, changed: !1 };
-  let resultCode = ms.toString(), map = ms.generateMap({
-    source: opts?.source ?? id.split("?")[0],
-    includeContent: !0,
-    hires: !0
-  });
-  return { code: resultCode, map, changed: !0 };
+    const normalizedId = normalize(id);
+    const reanimatedInNodeModules = normalizedId.includes('react-native-reanimated') && normalizedId.includes('node_modules');
+    if (!reanimatedInNodeModules || !normalizedId.includes('ReanimatedModule/js-reanimated/webUtils') || !code.includes('export let') || !code.includes('try') || !code.includes('require')) return {
+        code,
+        map: null,
+        changed: false
+    };
+    const exportLetMatches = Array.from(code.matchAll(/export let (\w+);/g));
+    const exportedVars = exportLetMatches.map((match)=>match[1]);
+    if (0 === exportedVars.length) return {
+        code,
+        map: null,
+        changed: false
+    };
+    const importMap = analyzeRequireStatements(code, exportedVars);
+    const ms = new magic_string(code);
+    let changed = false;
+    for (const m of code.matchAll(/try\s*\{[^{}]*?require\([^)]+\)[^{}]*?\}\s*catch[^{}]*?\{[^{}]*?\}/gs)){
+        const start = m.index;
+        const end = start + m[0].length;
+        ms.remove(start, end);
+        changed = true;
+    }
+    for (const m of code.matchAll(/export let \w+;/g)){
+        const start = m.index;
+        const end = start + m[0].length;
+        ms.remove(start, end);
+        changed = true;
+    }
+    const exports = generateDirectExports(importMap, opts?.resolveModule);
+    if (exports) {
+        ms.append(`\n${exports}`);
+        changed = true;
+    }
+    if (!changed) return {
+        code,
+        map: null,
+        changed: false
+    };
+    const resultCode = ms.toString();
+    const map = ms.generateMap({
+        source: opts?.source ?? id.split('?')[0],
+        includeContent: true,
+        hires: true
+    }).toString();
+    return {
+        code: resultCode,
+        map,
+        changed: true
+    };
 }
 function transformCssInteropDoctorCheck(code, id, opts) {
-  if (!normalize(id).includes(
-    "node_modules/react-native-css-interop/dist/doctor.js"
-  ))
-    return { code, map: null, changed: !1 };
-  let pattern = /return\s*<react-native-css-interop-jsx-pragma-check\s*\/>\s*===\s*true\s*;/g;
-  if (!pattern.test(code))
-    return { code, map: null, changed: !1 };
-  let ms = new MagicString(code), match;
-  for (pattern.lastIndex = 0; (match = pattern.exec(code)) !== null; ) {
-    let start = match.index, end = start + match[0].length;
-    ms.overwrite(start, end, "return true;");
-  }
-  let resultCode = ms.toString(), map = ms.generateMap({
-    source: opts?.source ?? id.split("?")[0],
-    includeContent: !0,
-    hires: !0
-  });
-  return { code: resultCode, map, changed: !0 };
+    const normalizedId = normalize(id);
+    const isTargetFile = normalizedId.includes('node_modules/react-native-css-interop/dist/doctor.js');
+    if (!isTargetFile) return {
+        code,
+        map: null,
+        changed: false
+    };
+    const pattern = /return\s*<react-native-css-interop-jsx-pragma-check\s*\/>\s*===\s*true\s*;/g;
+    if (!pattern.test(code)) return {
+        code,
+        map: null,
+        changed: false
+    };
+    const ms = new magic_string(code);
+    let match;
+    pattern.lastIndex = 0;
+    while(null !== (match = pattern.exec(code))){
+        const start = match.index;
+        const end = start + match[0].length;
+        ms.overwrite(start, end, 'return true;');
+    }
+    const resultCode = ms.toString();
+    const map = ms.generateMap({
+        source: opts?.source ?? id.split('?')[0],
+        includeContent: true,
+        hires: true
+    }).toString();
+    return {
+        code: resultCode,
+        map,
+        changed: true
+    };
 }
-
-// src/index.ts
-var webExtensions = [
-  ".web.mjs",
-  ".web.js",
-  ".web.jsx",
-  ".web.ts",
-  ".web.tsx",
-  ".mjs",
-  ".js",
-  ".jsx",
-  ".ts",
-  ".tsx",
-  ".json"
-], DEFAULT_MODULES_TO_TRANSPILE = [
-  "react-native",
-  "@react-native",
-  "expo",
-  "@expo"
-], DEFAULT_NO_TREESHAKE_MODULES = [
-  "react-native-css-interop",
-  "react-native-css",
-  "expo-modules-core"
+const webExtensions = [
+    '.web.mjs',
+    '.web.js',
+    '.web.jsx',
+    '.web.ts',
+    '.web.tsx',
+    '.mjs',
+    '.js',
+    '.jsx',
+    '.ts',
+    '.tsx',
+    '.json'
+];
+const DEFAULT_MODULES_TO_TRANSPILE = [
+    'react-native',
+    '@react-native',
+    'expo',
+    '@expo'
+];
+const DEFAULT_NO_TREESHAKE_MODULES = [
+    'react-native-css-interop',
+    'react-native-css',
+    'expo-modules-core'
 ];
 function createTranspileIncludePattern(modules) {
-  let escapedModules = modules.map(
-    (m) => m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-  );
-  return new RegExp(`node_modules[\\\\/](${escapedModules.join("|")})`);
+    const escapedModules = modules.map((m)=>m.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    return new RegExp(`node_modules[\\\\/](${escapedModules.join('|')})`);
 }
 function pluginReactNativeWeb(options = {}) {
-  let modulesToTranspile = [
-    .../* @__PURE__ */ new Set([
-      ...DEFAULT_MODULES_TO_TRANSPILE,
-      ...options.modulesToTranspile || []
-    ])
-  ], includePattern = createTranspileIncludePattern(modulesToTranspile), jsxRuntime = options.jsxRuntime ?? "automatic", jsxImportSource = options.jsxImportSource, noTreeshakeModules = [
-    .../* @__PURE__ */ new Set([
-      ...DEFAULT_NO_TREESHAKE_MODULES,
-      ...options.noTreeshakeModules || []
-    ])
-  ], noTreeshakePattern = createTranspileIncludePattern(noTreeshakeModules), reactNativeWebPath = options.reactNativeWebPath;
-  function createModuleResolver() {
-    if (!reactNativeWebPath)
-      return;
-    let normalizedReactNativeWebPath = normalize2(reactNativeWebPath);
-    return (modulePath) => {
-      if (modulePath.startsWith("react-native-web/")) {
-        let relativePart = modulePath.slice(17);
-        return `${normalizedReactNativeWebPath}/${relativePart}`;
-      }
-      return modulePath;
-    };
-  }
-  return {
-    name: "rsbuild:react-native-web",
-    setup(api) {
-      let isProduction = !1;
-      api.modifyRsbuildConfig((config) => (config.source ??= {}, config.source.define = {
-        ...config.source.define,
-        __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
-        "process.env.NODE_ENV": JSON.stringify(
-          process.env.NODE_ENV || "development"
-        ),
-        EXPO_OS: JSON.stringify("web"),
-        "process.env.EXPO_OS": JSON.stringify("web"),
-        _WORKLET: "false",
-        _frameTimestamp: "undefined",
-        "global.Error": "Error",
-        "global.__x": "{}"
-      }, config.resolve ??= {}, config.resolve.extensions = webExtensions, config.source.include = [
-        ...config.source.include || [],
-        includePattern
-      ], config)), api.onBeforeCreateCompiler(() => {
-        isProduction = api.context.bundlerType === "rspack" ? process.env.NODE_ENV === "production" : !1;
-      }), api.modifyBundlerChain((chain) => {
-        let jsRule = chain.module.rule("js");
-        jsRule && jsRule.include.add(includePattern);
-        let reactConfig = {
-          runtime: jsxRuntime
-        };
-        jsxImportSource && jsxRuntime === "automatic" && (reactConfig.importSource = jsxImportSource), chain.module.rule("react-native-jsx").test(/\.(js|mjs|jsx)$/).include.add(includePattern).end().use("swc").loader("builtin:swc-loader").options({
-          jsc: {
-            parser: {
-              syntax: "ecmascript",
-              jsx: !0
-            },
-            transform: {
-              react: reactConfig
-            }
-          }
-        }), chain.module.rule("react-native-no-treeshake").test(/\.(js|mjs|jsx|ts|tsx)$/).include.add(noTreeshakePattern).end().set("sideEffects", !0);
-      });
-      let moduleResolver = createModuleResolver();
-      api.transform(
-        {
-          test: /\.(js|mjs|jsx|ts|tsx)$/
-        },
-        ({ code, resource }) => {
-          let cssInteropResult = transformCssInteropDoctorCheck(
-            code,
-            resource,
-            {
-              source: resource
+    const modulesToTranspile = [
+        ...new Set([
+            ...DEFAULT_MODULES_TO_TRANSPILE,
+            ...options.modulesToTranspile || []
+        ])
+    ];
+    const includePattern = createTranspileIncludePattern(modulesToTranspile);
+    const jsxRuntime = options.jsxRuntime ?? 'automatic';
+    const jsxImportSource = options.jsxImportSource;
+    const noTreeshakeModules = [
+        ...new Set([
+            ...DEFAULT_NO_TREESHAKE_MODULES,
+            ...options.noTreeshakeModules || []
+        ])
+    ];
+    const noTreeshakePattern = createTranspileIncludePattern(noTreeshakeModules);
+    const reactNativeWebPath = options.reactNativeWebPath;
+    function createModuleResolver() {
+        if (!reactNativeWebPath) return;
+        const normalizedReactNativeWebPath = normalize(reactNativeWebPath);
+        return (modulePath)=>{
+            if (modulePath.startsWith('react-native-web/')) {
+                const relativePart = modulePath.slice(17);
+                return `${normalizedReactNativeWebPath}/${relativePart}`;
             }
-          );
-          if (cssInteropResult.changed)
-            return {
-              code: cssInteropResult.code,
-              map: cssInteropResult.map ?? void 0
-            };
-          let reanimatedResult = transformReanimatedWebUtils(
-            code,
-            resource,
-            isProduction,
-            {
-              source: resource,
-              resolveModule: moduleResolver
-            }
-          );
-          return reanimatedResult.changed ? {
-            code: reanimatedResult.code,
-            map: reanimatedResult.map ?? void 0
-          } : { code };
-        }
-      );
+            return modulePath;
+        };
     }
-  };
+    return {
+        name: 'rsbuild:react-native-web',
+        setup (api) {
+            let isProduction = false;
+            api.modifyRsbuildConfig((config)=>{
+                config.source ??= {};
+                const isDevelopment = options.dev ?? 'production' !== process.env.NODE_ENV;
+                const nodeEnvDefine = null != options.dev ? JSON.stringify(isDevelopment ? 'development' : 'production') : config.source.define?.['process.env.NODE_ENV'] ?? JSON.stringify(process.env.NODE_ENV || 'development');
+                const devDefine = null != options.dev ? JSON.stringify(options.dev) : config.source.define?.__DEV__ ?? JSON.stringify(isDevelopment);
+                config.source.define = {
+                    ...config.source.define,
+                    __DEV__: devDefine,
+                    'process.env.NODE_ENV': nodeEnvDefine,
+                    EXPO_OS: JSON.stringify('web'),
+                    'process.env.EXPO_OS': JSON.stringify('web'),
+                    _WORKLET: 'false',
+                    _frameTimestamp: 'undefined',
+                    'global.Error': 'Error',
+                    'global.__x': '{}'
+                };
+                config.resolve ??= {};
+                config.resolve.extensions = webExtensions;
+                config.source.include = [
+                    ...config.source.include || [],
+                    includePattern
+                ];
+                return config;
+            });
+            api.onBeforeCreateCompiler(()=>{
+                isProduction = 'rspack' === api.context.bundlerType ? 'production' === process.env.NODE_ENV : false;
+            });
+            api.modifyBundlerChain((chain)=>{
+                const jsRule = chain.module.rule('js');
+                if (jsRule) jsRule.include.add(includePattern);
+                const reactConfig = {
+                    runtime: jsxRuntime
+                };
+                if (jsxImportSource && 'automatic' === jsxRuntime) reactConfig.importSource = jsxImportSource;
+                chain.module.rule('react-native-jsx').test(/\.(js|mjs|jsx)$/).include.add(includePattern).end().use('swc').loader('builtin:swc-loader').options({
+                    jsc: {
+                        parser: {
+                            syntax: "ecmascript",
+                            jsx: true
+                        },
+                        transform: {
+                            react: reactConfig
+                        }
+                    }
+                });
+                chain.module.rule('react-native-no-treeshake').test(/\.(js|mjs|jsx|ts|tsx)$/).include.add(noTreeshakePattern).end().set('sideEffects', true);
+            });
+            const moduleResolver = createModuleResolver();
+            api.transform({
+                test: /\.(js|mjs|jsx|ts|tsx)$/
+            }, ({ code, resource })=>{
+                const cssInteropResult = transformCssInteropDoctorCheck(code, resource, {
+                    source: resource
+                });
+                if (cssInteropResult.changed) return {
+                    code: cssInteropResult.code,
+                    map: cssInteropResult.map ?? void 0
+                };
+                const reanimatedResult = transformReanimatedWebUtils(code, resource, isProduction, {
+                    source: resource,
+                    resolveModule: moduleResolver
+                });
+                if (reanimatedResult.changed) return {
+                    code: reanimatedResult.code,
+                    map: reanimatedResult.map ?? void 0
+                };
+                return {
+                    code
+                };
+            });
+        }
+    };
 }
-export {
-  pluginReactNativeWeb
-};
+export { pluginReactNativeWeb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsbuild-plugin-react-native-web",
-  "version": "3.4.1",
+  "version": "3.6.0",
   "description": "Rsbuild plugin for React Native Web support",
   "keywords": [
     "rsbuild",
@@ -35,11 +35,12 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "magic-string": "^0.30.21",
+    "magic-string": "^1.4.1",
     "pathe": "^2.0.3"
   },
   "devDependencies": {
-    "@rsbuild/core": "^2.1.10",
+    "@microsoft/api-extractor": "^7.59.1",
+    "@rsbuild/core": "^2.2.6",
     "@types/node": "^22.0.0",
     "typescript": "^5.9.3"
   },
@@ -59,8 +60,7 @@
     "platform": "node"
   },
   "scripts": {
-    "build": "pnpm run prep --production",
-    "check": "jiti ../../scripts/check/check-package.ts",
-    "prep": "jiti ../../scripts/build/build-package.ts"
+    "build": "rstack lib",
+    "dev": "rstack lib --watch"
   }
 }