vite-plugin-rnw 0.0.5 → 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present, dannyhw You and Vite contributors
+
+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/dist/index.cjs

@@ -104,6 +104,70 @@ function removeLineBreaksIfNeeded(code, enabled) {
 	return enabled ? code.replace(/\n/g, "") : code;
 }
 
+//#endregion
+//#region src/transforms.ts
+/**
+* Code transformation utilities for fixing React Native package compatibility issues
+*/
+/**
+* Analyzes require statements in code and maps them to module imports.
+* Handles patterns like: varName = require('path').prop or require('path').default
+*/
+function analyzeRequireStatements(originalCode, exportedVars) {
+	const importMap = /* @__PURE__ */ 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;
+}
+/**
+* Removes try/catch blocks that contain require statements and export let declarations.
+* This cleans up the problematic CommonJS patterns.
+*/
+function removeTryCatchRequireBlocks(code) {
+	let transformed = code.replace(/try\s*\{[^{}]*?require\([^)]+\)[^{}]*?\}\s*catch[^{}]*?\{[^{}]*?\}/gs, "");
+	transformed = transformed.replace(/export let \w+;/g, "");
+	return transformed;
+}
+/**
+* Generates direct export statements from the import map.
+* Creates modern ESM exports like: export { default as varName } from 'module';
+*/
+function generateDirectExports(importMap) {
+	let exports$1 = "";
+	for (const [key, vars] of importMap) {
+		const [modulePath, prop] = key.split(":");
+		if (prop === "default") for (const varName of vars) exports$1 += `export { default as ${varName} } from '${modulePath}';\n`;
+		else for (const varName of vars) exports$1 += `export { ${prop} as ${varName} } from '${modulePath}';\n`;
+	}
+	return exports$1;
+}
+/**
+* Transforms React Native Reanimated webUtils files to fix problematic
+* export let + try/catch + require patterns by converting them to proper ESM.
+* 
+* This transformation handles the incompatible module patterns in React Native Reanimated
+* that cause build errors in Vite due to mixing CommonJS require() with ESM exports.
+*/
+function transformReanimatedWebUtils(toTransform, originalCode, id, isProduction) {
+	if (!isProduction || !id.includes("node_modules/react-native-reanimated") || !id.includes("ReanimatedModule/js-reanimated/webUtils") || !originalCode.includes("export let") || !originalCode.includes("try") || !originalCode.includes("require")) return toTransform;
+	const exportLetMatches = Array.from(originalCode.matchAll(/export let (\w+);/g));
+	const exportedVars = exportLetMatches.map((match) => match[1]);
+	if (exportedVars.length === 0) return toTransform;
+	const importMap = analyzeRequireStatements(originalCode, exportedVars);
+	toTransform = removeTryCatchRequireBlocks(toTransform);
+	const exports$1 = generateDirectExports(importMap);
+	if (exports$1) toTransform = `${toTransform}\n${exports$1}`;
+	return toTransform;
+}
+
 //#endregion
 //#region src/index.ts
 const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
@@ -183,11 +247,12 @@ function rnw(opts = {}) {
 					_WORKLET: false,
 					__DEV__: JSON.stringify(development),
 					"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || env.mode),
+					EXPO_OS: JSON.stringify("web"),
+					"process.env.EXPO_OS": JSON.stringify("web"),
 					"global.Error": "Error"
 				},
 				optimizeDeps: {
 					...initialOptions.optimizeDeps,
-					include: ["react-native-reanimated", "react-native-css-interop"],
 					esbuildOptions: {
 						...(_initialOptions$optim = initialOptions.optimizeDeps) === null || _initialOptions$optim === void 0 ? void 0 : _initialOptions$optim.esbuildOptions,
 						resolveExtensions: extensions,
@@ -200,7 +265,7 @@ function rnw(opts = {}) {
 					plugins: [{
 						name: "nativewind-fix",
 						async transform(code, id) {
-							if (id.includes("react-native-css-interop") && id.includes("runtime/components.js")) return { moduleSideEffects: "no-treeshake" };
+							if (id.includes("react-native-css-interop")) return { moduleSideEffects: "no-treeshake" };
 						}
 					}]
 				} },
@@ -264,16 +329,7 @@ function rnw(opts = {}) {
 				if (tsRE.test(filepath)) parserPlugins.push("typescript");
 				const babel$1 = await loadBabel();
 				let toTransform = code;
-				if (isProduction && id.includes("node_modules/react-native-reanimated") && id.includes("ReanimatedModule/js-reanimated/webUtils") && code.includes("require")) toTransform = `
-
-            import createReactDOMStyle from 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle';
-            import {
-              createTextShadowValue,
-              createTransformValue,
-            } from 'react-native-web/dist/exports/StyleSheet/preprocess';
-
-            export { createReactDOMStyle, createTextShadowValue, createTransformValue };
-          `;
+				toTransform = transformReanimatedWebUtils(toTransform, code, id, isProduction);
 				const result = await babel$1.transformAsync(toTransform, {
 					...babelOptions,
 					root: projectRoot,

package/dist/index.js

@@ -82,6 +82,70 @@ function removeLineBreaksIfNeeded(code, enabled) {
 	return enabled ? code.replace(/\n/g, "") : code;
 }
 
+//#endregion
+//#region src/transforms.ts
+/**
+* Code transformation utilities for fixing React Native package compatibility issues
+*/
+/**
+* Analyzes require statements in code and maps them to module imports.
+* Handles patterns like: varName = require('path').prop or require('path').default
+*/
+function analyzeRequireStatements(originalCode, exportedVars) {
+	const importMap = /* @__PURE__ */ 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;
+}
+/**
+* Removes try/catch blocks that contain require statements and export let declarations.
+* This cleans up the problematic CommonJS patterns.
+*/
+function removeTryCatchRequireBlocks(code) {
+	let transformed = code.replace(/try\s*\{[^{}]*?require\([^)]+\)[^{}]*?\}\s*catch[^{}]*?\{[^{}]*?\}/gs, "");
+	transformed = transformed.replace(/export let \w+;/g, "");
+	return transformed;
+}
+/**
+* Generates direct export statements from the import map.
+* Creates modern ESM exports like: export { default as varName } from 'module';
+*/
+function generateDirectExports(importMap) {
+	let exports = "";
+	for (const [key, vars] of importMap) {
+		const [modulePath, prop] = key.split(":");
+		if (prop === "default") for (const varName of vars) exports += `export { default as ${varName} } from '${modulePath}';\n`;
+		else for (const varName of vars) exports += `export { ${prop} as ${varName} } from '${modulePath}';\n`;
+	}
+	return exports;
+}
+/**
+* Transforms React Native Reanimated webUtils files to fix problematic
+* export let + try/catch + require patterns by converting them to proper ESM.
+* 
+* This transformation handles the incompatible module patterns in React Native Reanimated
+* that cause build errors in Vite due to mixing CommonJS require() with ESM exports.
+*/
+function transformReanimatedWebUtils(toTransform, originalCode, id, isProduction) {
+	if (!isProduction || !id.includes("node_modules/react-native-reanimated") || !id.includes("ReanimatedModule/js-reanimated/webUtils") || !originalCode.includes("export let") || !originalCode.includes("try") || !originalCode.includes("require")) return toTransform;
+	const exportLetMatches = Array.from(originalCode.matchAll(/export let (\w+);/g));
+	const exportedVars = exportLetMatches.map((match) => match[1]);
+	if (exportedVars.length === 0) return toTransform;
+	const importMap = analyzeRequireStatements(originalCode, exportedVars);
+	toTransform = removeTryCatchRequireBlocks(toTransform);
+	const exports = generateDirectExports(importMap);
+	if (exports) toTransform = `${toTransform}\n${exports}`;
+	return toTransform;
+}
+
 //#endregion
 //#region src/index.ts
 const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
@@ -161,11 +225,12 @@ function rnw(opts = {}) {
 					_WORKLET: false,
 					__DEV__: JSON.stringify(development),
 					"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || env.mode),
+					EXPO_OS: JSON.stringify("web"),
+					"process.env.EXPO_OS": JSON.stringify("web"),
 					"global.Error": "Error"
 				},
 				optimizeDeps: {
 					...initialOptions.optimizeDeps,
-					include: ["react-native-reanimated", "react-native-css-interop"],
 					esbuildOptions: {
 						...(_initialOptions$optim = initialOptions.optimizeDeps) === null || _initialOptions$optim === void 0 ? void 0 : _initialOptions$optim.esbuildOptions,
 						resolveExtensions: extensions,
@@ -178,7 +243,7 @@ function rnw(opts = {}) {
 					plugins: [{
 						name: "nativewind-fix",
 						async transform(code, id) {
-							if (id.includes("react-native-css-interop") && id.includes("runtime/components.js")) return { moduleSideEffects: "no-treeshake" };
+							if (id.includes("react-native-css-interop")) return { moduleSideEffects: "no-treeshake" };
 						}
 					}]
 				} },
@@ -242,16 +307,7 @@ function rnw(opts = {}) {
 				if (tsRE.test(filepath)) parserPlugins.push("typescript");
 				const babel$1 = await loadBabel();
 				let toTransform = code;
-				if (isProduction && id.includes("node_modules/react-native-reanimated") && id.includes("ReanimatedModule/js-reanimated/webUtils") && code.includes("require")) toTransform = `
-
-            import createReactDOMStyle from 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle';
-            import {
-              createTextShadowValue,
-              createTransformValue,
-            } from 'react-native-web/dist/exports/StyleSheet/preprocess';
-
-            export { createReactDOMStyle, createTextShadowValue, createTransformValue };
-          `;
+				toTransform = transformReanimatedWebUtils(toTransform, code, id, isProduction);
 				const result = await babel$1.transformAsync(toTransform, {
 					...babelOptions,
 					root: projectRoot,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.5",
+  "version": "0.0.7",
   "name": "vite-plugin-rnw",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -14,7 +14,9 @@
     "react-native"
   ],
   "files": [
-    "dist"
+    "dist",
+    "LICENSE",
+    "README.md"
   ],
   "exports": {
     ".": {
@@ -32,7 +34,9 @@
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "node --no-warnings --experimental-strip-types --test --experimental-test-coverage src/**/*.test.ts",
+    "test:watch": "node --no-warnings --experimental-strip-types --test --watch src/**/*.test.ts"
   },
   "engines": {
     "node": "^14.18.0 || >=16.0.0"