vite-plugin-rnw 0.0.10 → 0.0.11-next-1

package/dist/{index.d.ts → index.d.mts}

@@ -3,6 +3,6 @@ import { Options } from "@vitejs/plugin-react";
 
 //#region src/index.d.ts
 type RnwOptions = Options;
-declare function rnw(opts?: RnwOptions): Plugin[];
+declare function rnw(opts?: RnwOptions): Array<Plugin | Plugin[]>;
 //#endregion
 export { RnwOptions, rnw };

package/dist/{index.js → index.mjs}

@@ -1,13 +1,16 @@
 import * as vite from "vite";
-import { createFilter } from "vite";
-import { esbuildFlowPlugin, flowPlugin } from "@bunchtogether/vite-plugin-flow";
+import { createFilter, version } from "vite";
 import commonjs from "vite-plugin-commonjs";
 import { makeIdFiltersToMatchWithQuery } from "@rolldown/pluginutils";
 import MagicString from "magic-string";
 import react from "@vitejs/plugin-react";
-
+import { readFile } from "node:fs/promises";
+import flowRemoveTypes from "flow-remove-types";
 //#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
 */
@@ -132,9 +135,90 @@ function transformCssInteropDoctorCheck(code, id, opts) {
 		changed: true
 	};
 }
-
+//#endregion
+//#region src/removeFlow.ts
+const defaultFlowOptions = {
+	all: false,
+	pretty: false,
+	ignoreUninitializedFields: false
+};
+const defaultPluginOptions = {
+	include: /\.(flow|jsx?)$/,
+	exclude: /node_modules/,
+	flow: defaultFlowOptions
+};
+const jsxRegex = /\.jsx$/;
+const defaultLoaderFunction = (path) => jsxRegex.test(path) ? "jsx" : "js";
+const toError = (error) => error instanceof Error ? error : new Error(String(error));
+/**
+* Create a Vite plugin object.
+*/
+function flowPlugin({ exclude = defaultPluginOptions.exclude, include = defaultPluginOptions.include, flow = defaultFlowOptions } = defaultPluginOptions) {
+	const filter = createFilter(include, exclude);
+	return {
+		enforce: "pre",
+		name: "flow",
+		transform(src, id) {
+			if (!filter(id)) return null;
+			return {
+				code: flowRemoveTypes(src, flow).toString(),
+				map: null
+			};
+		}
+	};
+}
+/**
+* Create an esbuild plugin object.
+*/
+function esbuildFlowPlugin(filter = /\.(flow|jsx?)$/, loaderFunction = defaultLoaderFunction, flowOptions = defaultFlowOptions) {
+	return {
+		name: "flow",
+		setup(build) {
+			build.onLoad({ filter }, async ({ path, namespace }) => {
+				try {
+					return {
+						contents: flowRemoveTypes(await readFile(path, "utf-8"), flowOptions).toString(),
+						loader: loaderFunction(path)
+					};
+				} catch (error) {
+					const resolvedError = toError(error);
+					return { errors: [{
+						text: resolvedError.message,
+						location: {
+							file: path,
+							namespace
+						},
+						detail: resolvedError
+					}] };
+				}
+			});
+		}
+	};
+}
+function rollDownFlowPlugin(filter = /\.(flow|jsx?)$/, loaderFunction = defaultLoaderFunction, flowOptions = defaultFlowOptions) {
+	return {
+		name: "rolldown-flow",
+		load: {
+			filter: { id: { include: filter } },
+			handler: async (id) => {
+				return {
+					code: flowRemoveTypes(await readFile(id, "utf-8"), flowOptions).toString(),
+					moduleType: loaderFunction(id)
+				};
+			}
+		}
+	};
+}
 //#endregion
 //#region src/index.ts
+const shouldUseRolldownOptions = () => {
+	try {
+		return Number(version.split(".")[0]) >= 8;
+	} catch {
+		return false;
+	}
+};
+const shouldUseRollDown = shouldUseRolldownOptions();
 const extensions = [
 	".web.mjs",
 	".web.js",
@@ -160,6 +244,57 @@ const getJsxOption = (jsxRuntime) => {
 	};
 	return jsxRuntime && jsxRuntime in jsxOptionMapping ? jsxOptionMapping[jsxRuntime] : "automatic";
 };
+const treeshakePlugin = {
+	name: "treeshake-fix",
+	async transform(_code, id) {
+		if (id.includes("react-native-css-interop") || id.includes("react-native-css") || id.includes("expo-modules-core")) return { moduleSideEffects: "no-treeshake" };
+	}
+};
+const treeshakeSafePreset = {
+	annotations: true,
+	invalidImportSideEffects: true,
+	manualPureFunctions: [],
+	moduleSideEffects: true,
+	propertyReadSideEffects: "always",
+	unknownGlobalSideEffects: true,
+	propertyWriteSideEffects: "always"
+};
+function getBuildOptions() {
+	if (shouldUseRollDown) return { rolldownOptions: {
+		shimMissingExports: true,
+		treeshake: treeshakeSafePreset,
+		plugins: [treeshakePlugin]
+	} };
+	return { rollupOptions: {
+		shimMissingExports: true,
+		treeshake: treeshakeSafePreset,
+		plugins: [treeshakePlugin]
+	} };
+}
+function getOptimizeDepsOptions(opts) {
+	if (shouldUseRollDown) return { rolldownOptions: {
+		resolve: { extensions },
+		transform: { jsx: {
+			importSource: opts.jsxImportSource,
+			runtime: opts.jsxRuntime
+		} },
+		moduleTypes: {
+			".js": "jsx",
+			".mjs": "jsx"
+		},
+		plugins: [rollDownFlowPlugin(/* @__PURE__ */ new RegExp(/\.(flow|jsx?)$/), (_path) => "jsx")]
+	} };
+	return { esbuildOptions: {
+		resolveExtensions: extensions,
+		jsx: getJsxOption(opts.jsxRuntime),
+		jsxImportSource: opts.jsxImportSource,
+		loader: {
+			".js": "jsx",
+			".mjs": "jsx"
+		},
+		plugins: [esbuildFlowPlugin(/* @__PURE__ */ new RegExp(/\.(flow|jsx?)$/), (_path) => "jsx")]
+	} };
+}
 function rnw(opts = {}) {
 	const include = opts.include ?? defaultIncludeRE;
 	const exclude = opts.exclude ?? defaultExcludeRE;
@@ -183,25 +318,8 @@ function rnw(opts = {}) {
 					"process.env.EXPO_OS": JSON.stringify("web"),
 					"global.Error": "Error"
 				},
-				optimizeDeps: { esbuildOptions: {
-					resolveExtensions: extensions,
-					jsx: getJsxOption(opts.jsxRuntime),
-					jsxImportSource: opts.jsxImportSource,
-					loader: {
-						".js": "jsx",
-						".mjs": "jsx"
-					},
-					plugins: [esbuildFlowPlugin(/* @__PURE__ */ new RegExp(/\.(flow|jsx?)$/), (_path) => "jsx")]
-				} },
-				build: { rollupOptions: {
-					treeshake: "safest",
-					plugins: [{
-						name: "treeshake-fix",
-						async transform(_code, id) {
-							if (id.includes("react-native-css-interop") || id.includes("react-native-css") || id.includes("expo-modules-core")) return { moduleSideEffects: "no-treeshake" };
-						}
-					}]
-				} },
+				optimizeDeps: getOptimizeDepsOptions(opts),
+				build: getBuildOptions(),
 				resolve: {
 					extensions,
 					alias: { "react-native": "react-native-web" }
@@ -237,9 +355,17 @@ function rnw(opts = {}) {
 		flowPlugin({ exclude }),
 		{
 			name: "treat-js-files-as-jsx",
+			enforce: "pre",
 			async transform(code, id) {
 				if (id.match(/\.js$/) || id.match(/\.mjs$/)) {
 					const jsxOption = getJsxOption(opts.jsxRuntime);
+					if (shouldUseRollDown) return vite.transformWithOxc(code, id, {
+						lang: "jsx",
+						jsx: {
+							importSource: opts.jsxImportSource,
+							runtime: opts.jsxRuntime
+						}
+					});
 					return vite.transformWithEsbuild(code, id, {
 						loader: "jsx",
 						jsx: jsxOption,
@@ -257,6 +383,5 @@ function rnw(opts = {}) {
 		})
 	];
 }
-
 //#endregion
-export { rnw };
+export { rnw };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.10",
+  "version": "0.0.11-next-1",
   "name": "vite-plugin-rnw",
   "type": "module",
   "author": "Daniel Williams",
@@ -15,8 +15,13 @@
     "LICENSE",
     "README.md"
   ],
+  "types": "./dist/index.d.mts",
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
   },
   "repository": {
     "type": "git",
@@ -37,18 +42,19 @@
   },
   "devDependencies": {
     "@types/node": "^22",
-    "tsdown": "^0.15.12"
+    "tsdown": "^0.21.2",
+    "vite": "^8.0.0"
   },
   "peerDependencies": {
     "react-native-web": "*",
     "typescript": "^5",
-    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {
-    "@bunchtogether/vite-plugin-flow": "^1.0.2",
-    "@rolldown/pluginutils": "1.0.0-beta.46",
-    "@vitejs/plugin-react": "^5.1.0",
-    "magic-string": "^0.30.11",
+    "flow-remove-types": "^2.305.0",
+    "@rolldown/pluginutils": "^1.0.0-rc.9",
+    "@vitejs/plugin-react": "^5.2.0",
+    "magic-string": "^0.30.21",
     "vite-plugin-commonjs": "^0.10.4"
   }
 }