npm - rsbuild-plugin-react-native-web - Versions diffs - 3.4.1 → 3.6.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"
   }
 }