vite-plugin-react-native 0.0.1

package/README.en.md

@@ -0,0 +1,103 @@
+# vite-plugin-react-native
+
+Vite plugin for using React Native code in web environments, providing React Native to Web compatibility support.
+
+## Features
+
+- ✅ Automatically replaces `react-native` with `react-native-web`
+- ✅ Supports React Native extension resolution (`.web.js`, `.native.js`, etc.)
+- ✅ Provides web-compatible implementations for React Native libraries:
+  - `react-native-safe-area-context` - SafeArea components and Hooks
+  - `react-native-screens` - Screen components
+  - `use-latest-callback` - Callback Hook
+- ✅ Supports both ESM and CommonJS modes
+- ✅ Automatically configures Vite optimization options
+
+## Installation
+
+```bash
+npm install vite-plugin-react-native
+# or
+yarn add vite-plugin-react-native
+# or
+pnpm add vite-plugin-react-native
+```
+
+## Usage
+
+### ESM Mode (Recommended)
+
+```javascript
+// vite.config.js or vite.config.ts
+import { defineConfig } from 'vite';
+import { reactNative } from 'vite-plugin-react-native';
+
+export default defineConfig({
+  plugins: [
+    reactNative(),
+  ],
+});
+```
+
+### CommonJS Mode
+
+```javascript
+// vite.config.js
+const { defineConfig } = require('vite');
+const { reactNative } = require('vite-plugin-react-native');
+
+module.exports = defineConfig({
+  plugins: [
+    reactNative(),
+  ],
+});
+```
+
+## Compatibility
+
+### Supported React Native Libraries
+
+- ✅ `react-native` → Automatically replaced with `react-native-web`
+- ✅ `react-native-safe-area-context` → Web-compatible implementation
+- ✅ `react-native-screens` → Web-compatible implementation
+- ✅ `use-latest-callback` → Web-compatible implementation
+
+### Vite Version Support
+
+- Vite 4.x
+- Vite 5.x
+- Vite 6.x
+- Vite 7.x
+
+## How It Works
+
+This plugin:
+
+1. **Alias Replacement**: Automatically replaces `react-native` with `react-native-web`
+2. **Virtual Modules**: Provides web-compatible virtual implementations for React Native-specific libraries
+3. **Extension Resolution**: Supports React Native file extension conventions (`.web.js`, `.native.js`, etc.)
+4. **Dependency Optimization**: Automatically configures Vite's dependency pre-bundling options
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Will automatically build before publishing
+npm publish
+```
+
+## License
+
+ISC
+
+## Contributing
+
+1. Fork the repository
+2. Create a Feat_xxx branch
+3. Commit your code
+4. Create a Pull Request

package/README.md

@@ -0,0 +1,103 @@
+# vite-plugin-react-native
+
+Vite 插件，用于在 Web 环境中使用 React Native 代码，提供 React Native 到 Web 的兼容性支持。
+
+## 功能特性
+
+- ✅ 自动将 `react-native` 替换为 `react-native-web`
+- ✅ 支持 React Native 扩展名解析（`.web.js`, `.native.js` 等）
+- ✅ 提供 React Native 库的 Web 兼容实现：
+  - `react-native-safe-area-context` - SafeArea 组件和 Hooks
+  - `react-native-screens` - Screen 组件
+  - `use-latest-callback` - 回调 Hook
+- ✅ 支持 ESM 和 CommonJS 双模式
+- ✅ 自动配置 Vite 优化选项
+
+## 安装
+
+```bash
+npm install vite-plugin-react-native
+# 或
+yarn add vite-plugin-react-native
+# 或
+pnpm add vite-plugin-react-native
+```
+
+## 使用方法
+
+### ESM 模式（推荐）
+
+```javascript
+// vite.config.js 或 vite.config.ts
+import { defineConfig } from 'vite';
+import { reactNative } from 'vite-plugin-react-native';
+
+export default defineConfig({
+  plugins: [
+    reactNative(),
+  ],
+});
+```
+
+### CommonJS 模式
+
+```javascript
+// vite.config.js
+const { defineConfig } = require('vite');
+const { reactNative } = require('vite-plugin-react-native');
+
+module.exports = defineConfig({
+  plugins: [
+    reactNative(),
+  ],
+});
+```
+
+## 支持情况
+
+### 兼容的 React Native 库
+
+- ✅ `react-native` → 自动替换为 `react-native-web`
+- ✅ `react-native-safe-area-context` → Web 兼容实现
+- ✅ `react-native-screens` → Web 兼容实现
+- ✅ `use-latest-callback` → Web 兼容实现
+
+### Vite 版本支持
+
+- Vite 4.x
+- Vite 5.x
+- Vite 6.x
+- Vite 7.x
+
+## 工作原理
+
+该插件会：
+
+1. **别名替换**：将 `react-native` 自动替换为 `react-native-web`
+2. **虚拟模块**：为 React Native 特定库提供 Web 兼容的虚拟实现
+3. **扩展名解析**：支持 React Native 的文件扩展名约定（`.web.js`, `.native.js` 等）
+4. **依赖优化**：自动配置 Vite 的依赖预构建选项
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 构建
+npm run build
+
+# 发布前会自动构建
+npm publish
+```
+
+## 许可证
+
+ISC
+
+## 参与贡献
+
+1. Fork 本仓库
+2. 新建 Feat_xxx 分支
+3. 提交代码
+4. 新建 Pull Request

package/dist/index.cjs

@@ -0,0 +1,191 @@
+'use strict';
+
+// index.ts
+function uniqueStrings(values) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const v of values) {
+    if (!v) continue;
+    if (seen.has(v)) continue;
+    seen.add(v);
+    out.push(v);
+  }
+  return out;
+}
+var reactNativeResolveExtensions = [
+  ".web.mjs",
+  ".web.js",
+  ".web.ts",
+  ".web.tsx",
+  ".web.jsx",
+  ".native.mjs",
+  ".native.js",
+  ".native.ts",
+  ".native.tsx",
+  ".native.jsx",
+  ".mjs",
+  ".js",
+  ".ts",
+  ".tsx",
+  ".jsx",
+  ".json"
+];
+var useLatestCallbackShimModule = `
+import * as React from 'react';
+const useClientLayoutEffect =
+  typeof document !== 'undefined' ||
+  (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
+    ? React.useLayoutEffect
+    : React.useEffect;
+export default function useLatestCallback(callback) {
+  const ref = React.useRef(callback);
+  const latestCallback = React.useRef(function latestCallback() {
+    return ref.current.apply(this, arguments);
+  }).current;
+  useClientLayoutEffect(() => {
+    ref.current = callback;
+  });
+  return latestCallback;
+}
+`;
+function latestCallbackEsbuildShim() {
+  const namespace = "virtual-use-latest-callback";
+  return {
+    name: "use-latest-callback-esbuild-shim",
+    setup(build) {
+      build.onResolve({ filter: /^use-latest-callback$/ }, () => {
+        return { path: "use-latest-callback", namespace };
+      });
+      build.onLoad({ filter: /.*/, namespace }, () => {
+        return { contents: useLatestCallbackShimModule, loader: "js" };
+      });
+    }
+  };
+}
+function reactNative() {
+  const safeAreaId = "virtual:rn-safe-area-context";
+  const resolvedSafeAreaId = "\0" + safeAreaId;
+  const screensId = "virtual:rn-screens";
+  const resolvedScreensId = "\0" + screensId;
+  const latestCallbackId = "virtual:use-latest-callback";
+  const resolvedLatestCallbackId = "\0" + latestCallbackId;
+  return {
+    name: "vite-plugin-react-native",
+    enforce: "pre",
+    config(userConfig, env) {
+      const mode = env.mode;
+      const isProd = mode === "production";
+      const userResolveExtensions = Array.isArray(userConfig.resolve?.extensions) ? userConfig.resolve?.extensions : null;
+      const userOptimizeDepsExclude = Array.isArray(userConfig.optimizeDeps?.exclude) ? userConfig.optimizeDeps?.exclude : [];
+      const userOptimizeDepsInclude = Array.isArray(userConfig.optimizeDeps?.include) ? userConfig.optimizeDeps?.include : [];
+      const userEsbuildPlugins = Array.isArray(userConfig.optimizeDeps?.esbuildOptions?.plugins) ? userConfig.optimizeDeps?.esbuildOptions?.plugins : [];
+      const config = {
+        resolve: {
+          alias: [{ find: /^react-native$/, replacement: "react-native-web" }],
+          dedupe: ["react", "react-dom"],
+          extensions: userResolveExtensions ? void 0 : reactNativeResolveExtensions
+        },
+        define: {
+          __DEV__: JSON.stringify(!isProd),
+          "process.env.NODE_ENV": JSON.stringify(mode),
+          global: "globalThis"
+        },
+        optimizeDeps: {
+          include: uniqueStrings([
+            ...userOptimizeDepsInclude,
+            "react",
+            "react-dom",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime"
+          ]),
+          exclude: uniqueStrings([
+            ...userOptimizeDepsExclude,
+            "react-native",
+            "react-native-gesture-handler",
+            "react-native-safe-area-context",
+            "react-native-screens"
+          ]),
+          esbuildOptions: {
+            plugins: [...userEsbuildPlugins, latestCallbackEsbuildShim()]
+          }
+        }
+      };
+      return config;
+    },
+    resolveId(source) {
+      if (source === "react-native-safe-area-context") return resolvedSafeAreaId;
+      if (source === "react-native-screens") return resolvedScreensId;
+      if (source === "use-latest-callback") return resolvedLatestCallbackId;
+      if (source === "use-latest-callback/esm.mjs") return resolvedLatestCallbackId;
+      if (source.endsWith("use-latest-callback/lib/src/index.js")) return resolvedLatestCallbackId;
+      if (source === "./lib/src/index.js") return resolvedLatestCallbackId;
+      return null;
+    },
+    load(id) {
+      const normalizedId = id.split("?")[0];
+      if (id === resolvedSafeAreaId) {
+        return `
+import * as React from 'react';
+import { View } from 'react-native';
+export const SafeAreaInsetsContext = React.createContext(null);
+export const SafeAreaFrameContext = React.createContext(null);
+const zeroInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+const initialFrame = {
+  x: 0,
+  y: 0,
+  width: typeof window !== 'undefined' ? window.innerWidth : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight : 0,
+};
+export const initialWindowMetrics = { frame: initialFrame, insets: zeroInsets };
+export function SafeAreaProvider(props) {
+  const { children, initialMetrics, initialSafeAreaInsets, ...rest } = props ?? {};
+  const insets = (initialMetrics && initialMetrics.insets) || initialSafeAreaInsets || zeroInsets;
+  const frame = (initialMetrics && initialMetrics.frame) || initialFrame;
+  return React.createElement(
+    SafeAreaFrameContext.Provider,
+    { value: frame },
+    React.createElement(
+      SafeAreaInsetsContext.Provider,
+      { value: insets },
+      React.createElement(View, rest, children),
+    ),
+  );
+}
+export function useSafeAreaInsets() {
+  return React.useContext(SafeAreaInsetsContext) || zeroInsets;
+}
+export function useSafeAreaFrame() {
+  return React.useContext(SafeAreaFrameContext) || initialFrame;
+}
+export function SafeAreaView(props) {
+  return React.createElement(View, props);
+}
+`;
+      }
+      if (id === resolvedScreensId) {
+        return `
+import * as React from 'react';
+import { View } from 'react-native';
+export function enableScreens() {}
+export function screensEnabled() { return false; }
+export function enableFreeze() {}
+export function freezeEnabled() { return false; }
+export function Screen(props) { return React.createElement(View, props); }
+export function ScreenContainer(props) { return React.createElement(View, props); }
+`;
+      }
+      if (id === resolvedLatestCallbackId) {
+        return useLatestCallbackShimModule;
+      }
+      if (normalizedId.includes("/node_modules/use-latest-callback/lib/src/index.js")) {
+        return useLatestCallbackShimModule;
+      }
+      if (normalizedId.includes("/node_modules/use-latest-callback/esm.mjs")) {
+        return useLatestCallbackShimModule;
+      }
+      return null;
+    }
+  };
+}
+
+exports.reactNative = reactNative;

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vite';
+
+declare function reactNative(): Plugin;
+
+export { reactNative };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vite';
+
+declare function reactNative(): Plugin;
+
+export { reactNative };

package/dist/index.js

@@ -0,0 +1,189 @@
+// index.ts
+function uniqueStrings(values) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const v of values) {
+    if (!v) continue;
+    if (seen.has(v)) continue;
+    seen.add(v);
+    out.push(v);
+  }
+  return out;
+}
+var reactNativeResolveExtensions = [
+  ".web.mjs",
+  ".web.js",
+  ".web.ts",
+  ".web.tsx",
+  ".web.jsx",
+  ".native.mjs",
+  ".native.js",
+  ".native.ts",
+  ".native.tsx",
+  ".native.jsx",
+  ".mjs",
+  ".js",
+  ".ts",
+  ".tsx",
+  ".jsx",
+  ".json"
+];
+var useLatestCallbackShimModule = `
+import * as React from 'react';
+const useClientLayoutEffect =
+  typeof document !== 'undefined' ||
+  (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
+    ? React.useLayoutEffect
+    : React.useEffect;
+export default function useLatestCallback(callback) {
+  const ref = React.useRef(callback);
+  const latestCallback = React.useRef(function latestCallback() {
+    return ref.current.apply(this, arguments);
+  }).current;
+  useClientLayoutEffect(() => {
+    ref.current = callback;
+  });
+  return latestCallback;
+}
+`;
+function latestCallbackEsbuildShim() {
+  const namespace = "virtual-use-latest-callback";
+  return {
+    name: "use-latest-callback-esbuild-shim",
+    setup(build) {
+      build.onResolve({ filter: /^use-latest-callback$/ }, () => {
+        return { path: "use-latest-callback", namespace };
+      });
+      build.onLoad({ filter: /.*/, namespace }, () => {
+        return { contents: useLatestCallbackShimModule, loader: "js" };
+      });
+    }
+  };
+}
+function reactNative() {
+  const safeAreaId = "virtual:rn-safe-area-context";
+  const resolvedSafeAreaId = "\0" + safeAreaId;
+  const screensId = "virtual:rn-screens";
+  const resolvedScreensId = "\0" + screensId;
+  const latestCallbackId = "virtual:use-latest-callback";
+  const resolvedLatestCallbackId = "\0" + latestCallbackId;
+  return {
+    name: "vite-plugin-react-native",
+    enforce: "pre",
+    config(userConfig, env) {
+      const mode = env.mode;
+      const isProd = mode === "production";
+      const userResolveExtensions = Array.isArray(userConfig.resolve?.extensions) ? userConfig.resolve?.extensions : null;
+      const userOptimizeDepsExclude = Array.isArray(userConfig.optimizeDeps?.exclude) ? userConfig.optimizeDeps?.exclude : [];
+      const userOptimizeDepsInclude = Array.isArray(userConfig.optimizeDeps?.include) ? userConfig.optimizeDeps?.include : [];
+      const userEsbuildPlugins = Array.isArray(userConfig.optimizeDeps?.esbuildOptions?.plugins) ? userConfig.optimizeDeps?.esbuildOptions?.plugins : [];
+      const config = {
+        resolve: {
+          alias: [{ find: /^react-native$/, replacement: "react-native-web" }],
+          dedupe: ["react", "react-dom"],
+          extensions: userResolveExtensions ? void 0 : reactNativeResolveExtensions
+        },
+        define: {
+          __DEV__: JSON.stringify(!isProd),
+          "process.env.NODE_ENV": JSON.stringify(mode),
+          global: "globalThis"
+        },
+        optimizeDeps: {
+          include: uniqueStrings([
+            ...userOptimizeDepsInclude,
+            "react",
+            "react-dom",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime"
+          ]),
+          exclude: uniqueStrings([
+            ...userOptimizeDepsExclude,
+            "react-native",
+            "react-native-gesture-handler",
+            "react-native-safe-area-context",
+            "react-native-screens"
+          ]),
+          esbuildOptions: {
+            plugins: [...userEsbuildPlugins, latestCallbackEsbuildShim()]
+          }
+        }
+      };
+      return config;
+    },
+    resolveId(source) {
+      if (source === "react-native-safe-area-context") return resolvedSafeAreaId;
+      if (source === "react-native-screens") return resolvedScreensId;
+      if (source === "use-latest-callback") return resolvedLatestCallbackId;
+      if (source === "use-latest-callback/esm.mjs") return resolvedLatestCallbackId;
+      if (source.endsWith("use-latest-callback/lib/src/index.js")) return resolvedLatestCallbackId;
+      if (source === "./lib/src/index.js") return resolvedLatestCallbackId;
+      return null;
+    },
+    load(id) {
+      const normalizedId = id.split("?")[0];
+      if (id === resolvedSafeAreaId) {
+        return `
+import * as React from 'react';
+import { View } from 'react-native';
+export const SafeAreaInsetsContext = React.createContext(null);
+export const SafeAreaFrameContext = React.createContext(null);
+const zeroInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+const initialFrame = {
+  x: 0,
+  y: 0,
+  width: typeof window !== 'undefined' ? window.innerWidth : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight : 0,
+};
+export const initialWindowMetrics = { frame: initialFrame, insets: zeroInsets };
+export function SafeAreaProvider(props) {
+  const { children, initialMetrics, initialSafeAreaInsets, ...rest } = props ?? {};
+  const insets = (initialMetrics && initialMetrics.insets) || initialSafeAreaInsets || zeroInsets;
+  const frame = (initialMetrics && initialMetrics.frame) || initialFrame;
+  return React.createElement(
+    SafeAreaFrameContext.Provider,
+    { value: frame },
+    React.createElement(
+      SafeAreaInsetsContext.Provider,
+      { value: insets },
+      React.createElement(View, rest, children),
+    ),
+  );
+}
+export function useSafeAreaInsets() {
+  return React.useContext(SafeAreaInsetsContext) || zeroInsets;
+}
+export function useSafeAreaFrame() {
+  return React.useContext(SafeAreaFrameContext) || initialFrame;
+}
+export function SafeAreaView(props) {
+  return React.createElement(View, props);
+}
+`;
+      }
+      if (id === resolvedScreensId) {
+        return `
+import * as React from 'react';
+import { View } from 'react-native';
+export function enableScreens() {}
+export function screensEnabled() { return false; }
+export function enableFreeze() {}
+export function freezeEnabled() { return false; }
+export function Screen(props) { return React.createElement(View, props); }
+export function ScreenContainer(props) { return React.createElement(View, props); }
+`;
+      }
+      if (id === resolvedLatestCallbackId) {
+        return useLatestCallbackShimModule;
+      }
+      if (normalizedId.includes("/node_modules/use-latest-callback/lib/src/index.js")) {
+        return useLatestCallbackShimModule;
+      }
+      if (normalizedId.includes("/node_modules/use-latest-callback/esm.mjs")) {
+        return useLatestCallbackShimModule;
+      }
+      return null;
+    }
+  };
+}
+
+export { reactNative };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vite-plugin-react-native",
+  "version": "0.0.1",
+  "description": "Vite plugin for React Native web compatibility",
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "react-native",
+    "react-native-web",
+    "web",
+    "compatibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/ws18250840411/vite-plugin-react-native.git"
+  },
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0"
+  }
+}