rsbuild-plugin-react-native-web 3.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rspack Contrib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# rsbuild-plugin-react-native-web
+
+Rsbuild plugin for React Native Web support. This plugin enables you to use React Native components in web applications built with Rsbuild.
+
+## Installation
+
+```bash
+npm install rsbuild-plugin-react-native-web react-native-web
+```
+
+## Usage
+
+```ts
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+import { pluginReactNativeWeb } from 'rsbuild-plugin-react-native-web'
+
+export default defineConfig({
+  plugins: [pluginReactNativeWeb()],
+})
+```
+
+## Options
+
+### modulesToTranspile
+
+An array of additional node_modules that need to be transpiled. By default, packages starting with `react-native`, `@react-native`, `expo`, and `@expo` are already included.
+
+```ts
+pluginReactNativeWeb({
+  modulesToTranspile: ['my-react-native-library'],
+})
+```
+
+## Features
+
+- Aliases `react-native` to `react-native-web`
+- Adds `.web.*` file extensions with higher priority
+- Configures global variables required by React Native (`__DEV__`, `EXPO_OS`, etc.)
+- Handles Flow syntax in React Native packages
+- Transforms problematic code patterns for web compatibility
+
+## Credits
+
+This plugin is inspired by [vite-plugin-rnw](https://github.com/dannyhw/vite-plugin-rnw) by [@dannyhw](https://github.com/dannyhw). Many of the core transformation techniques and React Native Web compatibility patterns were adapted from that project. Thanks for the great work.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+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 };

package/dist/index.js

@@ -0,0 +1,228 @@
+import CJS_COMPAT_NODE_URL_62a820a7ed2baf7c from 'node:url';
+import CJS_COMPAT_NODE_PATH_62a820a7ed2baf7c from 'node:path';
+import CJS_COMPAT_NODE_MODULE_62a820a7ed2baf7c from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_62a820a7ed2baf7c.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_62a820a7ed2baf7c.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_62a820a7ed2baf7c.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 { normalize } from "pathe";
+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);
+    }
+  }
+  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;
+}
+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 };
+}
+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 };
+}
+
+// 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"
+];
+function createTranspileIncludePattern(modules) {
+  let 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
+            }
+          );
+          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 };
+        }
+      );
+    }
+  };
+}
+export {
+  pluginReactNativeWeb
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "rsbuild-plugin-react-native-web",
+  "version": "3.2.0",
+  "description": "Rsbuild plugin for React Native Web support",
+  "keywords": [
+    "rsbuild",
+    "rspack",
+    "react-native",
+    "react-native-web",
+    "expo"
+  ],
+  "homepage": "https://github.com/rspack-contrib/storybook-rsbuild",
+  "bugs": {
+    "url": "https://github.com/rspack-contrib/storybook-rsbuild/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rspack-contrib/storybook-rsbuild",
+    "directory": "packages/rsbuild-plugin-react-native-web"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "build": "pnpm run prep --production",
+    "check": "jiti ../../scripts/check/check-package.ts",
+    "prep": "jiti ../../scripts/build/build-package.ts",
+    "prepare": "pnpm run build"
+  },
+  "dependencies": {
+    "magic-string": "^0.30.21",
+    "pathe": "^2.0.3"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.6.13",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "^1.5.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ],
+    "platform": "node"
+  }
+}