vite-plugin-rnw 0.0.5 → 0.0.6

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
  1. package/dist/index.cjs +68 -12
  2. package/dist/index.js +68 -12
  3. package/package.json +4 -2
package/dist/index.cjs CHANGED
@@ -104,6 +104,70 @@ function removeLineBreaksIfNeeded(code, enabled) {
104
104
  return enabled ? code.replace(/\n/g, "") : code;
105
105
  }
106
106
 
107
+ //#endregion
108
+ //#region src/transforms.ts
109
+ /**
110
+ * Code transformation utilities for fixing React Native package compatibility issues
111
+ */
112
+ /**
113
+ * Analyzes require statements in code and maps them to module imports.
114
+ * Handles patterns like: varName = require('path').prop or require('path').default
115
+ */
116
+ function analyzeRequireStatements(originalCode, exportedVars) {
117
+ const importMap = /* @__PURE__ */ new Map();
118
+ for (const varName of exportedVars) {
119
+ const requirePattern = new RegExp(`${varName}\\s*=\\s*[\\s\\S]*?require\\(['"]([^'"]+)['"]\\)(?:\\.([\\w]+))?`, "g");
120
+ const requireMatch = requirePattern.exec(originalCode);
121
+ if (requireMatch) {
122
+ const [, modulePath, prop] = requireMatch;
123
+ const key = `${modulePath}:${prop || "default"}`;
124
+ if (!importMap.has(key)) importMap.set(key, []);
125
+ importMap.get(key).push(varName);
126
+ }
127
+ }
128
+ return importMap;
129
+ }
130
+ /**
131
+ * Removes try/catch blocks that contain require statements and export let declarations.
132
+ * This cleans up the problematic CommonJS patterns.
133
+ */
134
+ function removeTryCatchRequireBlocks(code) {
135
+ let transformed = code.replace(/try\s*\{[^{}]*?require\([^)]+\)[^{}]*?\}\s*catch[^{}]*?\{[^{}]*?\}/gs, "");
136
+ transformed = transformed.replace(/export let \w+;/g, "");
137
+ return transformed;
138
+ }
139
+ /**
140
+ * Generates direct export statements from the import map.
141
+ * Creates modern ESM exports like: export { default as varName } from 'module';
142
+ */
143
+ function generateDirectExports(importMap) {
144
+ let exports$1 = "";
145
+ for (const [key, vars] of importMap) {
146
+ const [modulePath, prop] = key.split(":");
147
+ if (prop === "default") for (const varName of vars) exports$1 += `export { default as ${varName} } from '${modulePath}';\n`;
148
+ else for (const varName of vars) exports$1 += `export { ${prop} as ${varName} } from '${modulePath}';\n`;
149
+ }
150
+ return exports$1;
151
+ }
152
+ /**
153
+ * Transforms React Native Reanimated webUtils files to fix problematic
154
+ * export let + try/catch + require patterns by converting them to proper ESM.
155
+ *
156
+ * This transformation handles the incompatible module patterns in React Native Reanimated
157
+ * that cause build errors in Vite due to mixing CommonJS require() with ESM exports.
158
+ */
159
+ function transformReanimatedWebUtils(toTransform, originalCode, id, isProduction) {
160
+ 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;
161
+ const exportLetMatches = Array.from(originalCode.matchAll(/export let (\w+);/g));
162
+ const exportedVars = exportLetMatches.map((match) => match[1]);
163
+ if (exportedVars.length === 0) return toTransform;
164
+ const importMap = analyzeRequireStatements(originalCode, exportedVars);
165
+ toTransform = removeTryCatchRequireBlocks(toTransform);
166
+ const exports$1 = generateDirectExports(importMap);
167
+ if (exports$1) toTransform = `${toTransform}\n${exports$1}`;
168
+ return toTransform;
169
+ }
170
+
107
171
  //#endregion
108
172
  //#region src/index.ts
109
173
  const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
@@ -183,11 +247,12 @@ function rnw(opts = {}) {
183
247
  _WORKLET: false,
184
248
  __DEV__: JSON.stringify(development),
185
249
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || env.mode),
250
+ EXPO_OS: JSON.stringify("web"),
251
+ "process.env.EXPO_OS": JSON.stringify("web"),
186
252
  "global.Error": "Error"
187
253
  },
188
254
  optimizeDeps: {
189
255
  ...initialOptions.optimizeDeps,
190
- include: ["react-native-reanimated", "react-native-css-interop"],
191
256
  esbuildOptions: {
192
257
  ...(_initialOptions$optim = initialOptions.optimizeDeps) === null || _initialOptions$optim === void 0 ? void 0 : _initialOptions$optim.esbuildOptions,
193
258
  resolveExtensions: extensions,
@@ -200,7 +265,7 @@ function rnw(opts = {}) {
200
265
  plugins: [{
201
266
  name: "nativewind-fix",
202
267
  async transform(code, id) {
203
- if (id.includes("react-native-css-interop") && id.includes("runtime/components.js")) return { moduleSideEffects: "no-treeshake" };
268
+ if (id.includes("react-native-css-interop")) return { moduleSideEffects: "no-treeshake" };
204
269
  }
205
270
  }]
206
271
  } },
@@ -264,16 +329,7 @@ function rnw(opts = {}) {
264
329
  if (tsRE.test(filepath)) parserPlugins.push("typescript");
265
330
  const babel$1 = await loadBabel();
266
331
  let toTransform = code;
267
- if (isProduction && id.includes("node_modules/react-native-reanimated") && id.includes("ReanimatedModule/js-reanimated/webUtils") && code.includes("require")) toTransform = `
268
-
269
- import createReactDOMStyle from 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle';
270
- import {
271
- createTextShadowValue,
272
- createTransformValue,
273
- } from 'react-native-web/dist/exports/StyleSheet/preprocess';
274
-
275
- export { createReactDOMStyle, createTextShadowValue, createTransformValue };
276
- `;
332
+ toTransform = transformReanimatedWebUtils(toTransform, code, id, isProduction);
277
333
  const result = await babel$1.transformAsync(toTransform, {
278
334
  ...babelOptions,
279
335
  root: projectRoot,
package/dist/index.js CHANGED
@@ -82,6 +82,70 @@ function removeLineBreaksIfNeeded(code, enabled) {
82
82
  return enabled ? code.replace(/\n/g, "") : code;
83
83
  }
84
84
 
85
+ //#endregion
86
+ //#region src/transforms.ts
87
+ /**
88
+ * Code transformation utilities for fixing React Native package compatibility issues
89
+ */
90
+ /**
91
+ * Analyzes require statements in code and maps them to module imports.
92
+ * Handles patterns like: varName = require('path').prop or require('path').default
93
+ */
94
+ function analyzeRequireStatements(originalCode, exportedVars) {
95
+ const importMap = /* @__PURE__ */ new Map();
96
+ for (const varName of exportedVars) {
97
+ const requirePattern = new RegExp(`${varName}\\s*=\\s*[\\s\\S]*?require\\(['"]([^'"]+)['"]\\)(?:\\.([\\w]+))?`, "g");
98
+ const requireMatch = requirePattern.exec(originalCode);
99
+ if (requireMatch) {
100
+ const [, modulePath, prop] = requireMatch;
101
+ const key = `${modulePath}:${prop || "default"}`;
102
+ if (!importMap.has(key)) importMap.set(key, []);
103
+ importMap.get(key).push(varName);
104
+ }
105
+ }
106
+ return importMap;
107
+ }
108
+ /**
109
+ * Removes try/catch blocks that contain require statements and export let declarations.
110
+ * This cleans up the problematic CommonJS patterns.
111
+ */
112
+ function removeTryCatchRequireBlocks(code) {
113
+ let transformed = code.replace(/try\s*\{[^{}]*?require\([^)]+\)[^{}]*?\}\s*catch[^{}]*?\{[^{}]*?\}/gs, "");
114
+ transformed = transformed.replace(/export let \w+;/g, "");
115
+ return transformed;
116
+ }
117
+ /**
118
+ * Generates direct export statements from the import map.
119
+ * Creates modern ESM exports like: export { default as varName } from 'module';
120
+ */
121
+ function generateDirectExports(importMap) {
122
+ let exports = "";
123
+ for (const [key, vars] of importMap) {
124
+ const [modulePath, prop] = key.split(":");
125
+ if (prop === "default") for (const varName of vars) exports += `export { default as ${varName} } from '${modulePath}';\n`;
126
+ else for (const varName of vars) exports += `export { ${prop} as ${varName} } from '${modulePath}';\n`;
127
+ }
128
+ return exports;
129
+ }
130
+ /**
131
+ * Transforms React Native Reanimated webUtils files to fix problematic
132
+ * export let + try/catch + require patterns by converting them to proper ESM.
133
+ *
134
+ * This transformation handles the incompatible module patterns in React Native Reanimated
135
+ * that cause build errors in Vite due to mixing CommonJS require() with ESM exports.
136
+ */
137
+ function transformReanimatedWebUtils(toTransform, originalCode, id, isProduction) {
138
+ 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;
139
+ const exportLetMatches = Array.from(originalCode.matchAll(/export let (\w+);/g));
140
+ const exportedVars = exportLetMatches.map((match) => match[1]);
141
+ if (exportedVars.length === 0) return toTransform;
142
+ const importMap = analyzeRequireStatements(originalCode, exportedVars);
143
+ toTransform = removeTryCatchRequireBlocks(toTransform);
144
+ const exports = generateDirectExports(importMap);
145
+ if (exports) toTransform = `${toTransform}\n${exports}`;
146
+ return toTransform;
147
+ }
148
+
85
149
  //#endregion
86
150
  //#region src/index.ts
87
151
  const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
@@ -161,11 +225,12 @@ function rnw(opts = {}) {
161
225
  _WORKLET: false,
162
226
  __DEV__: JSON.stringify(development),
163
227
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || env.mode),
228
+ EXPO_OS: JSON.stringify("web"),
229
+ "process.env.EXPO_OS": JSON.stringify("web"),
164
230
  "global.Error": "Error"
165
231
  },
166
232
  optimizeDeps: {
167
233
  ...initialOptions.optimizeDeps,
168
- include: ["react-native-reanimated", "react-native-css-interop"],
169
234
  esbuildOptions: {
170
235
  ...(_initialOptions$optim = initialOptions.optimizeDeps) === null || _initialOptions$optim === void 0 ? void 0 : _initialOptions$optim.esbuildOptions,
171
236
  resolveExtensions: extensions,
@@ -178,7 +243,7 @@ function rnw(opts = {}) {
178
243
  plugins: [{
179
244
  name: "nativewind-fix",
180
245
  async transform(code, id) {
181
- if (id.includes("react-native-css-interop") && id.includes("runtime/components.js")) return { moduleSideEffects: "no-treeshake" };
246
+ if (id.includes("react-native-css-interop")) return { moduleSideEffects: "no-treeshake" };
182
247
  }
183
248
  }]
184
249
  } },
@@ -242,16 +307,7 @@ function rnw(opts = {}) {
242
307
  if (tsRE.test(filepath)) parserPlugins.push("typescript");
243
308
  const babel$1 = await loadBabel();
244
309
  let toTransform = code;
245
- if (isProduction && id.includes("node_modules/react-native-reanimated") && id.includes("ReanimatedModule/js-reanimated/webUtils") && code.includes("require")) toTransform = `
246
-
247
- import createReactDOMStyle from 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle';
248
- import {
249
- createTextShadowValue,
250
- createTransformValue,
251
- } from 'react-native-web/dist/exports/StyleSheet/preprocess';
252
-
253
- export { createReactDOMStyle, createTextShadowValue, createTransformValue };
254
- `;
310
+ toTransform = transformReanimatedWebUtils(toTransform, code, id, isProduction);
255
311
  const result = await babel$1.transformAsync(toTransform, {
256
312
  ...babelOptions,
257
313
  root: projectRoot,
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.0.5",
2
+ "version": "0.0.6",
3
3
  "name": "vite-plugin-rnw",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
@@ -32,7 +32,9 @@
32
32
  "scripts": {
33
33
  "dev": "tsdown --watch",
34
34
  "build": "tsdown",
35
- "prepublishOnly": "npm run build"
35
+ "prepublishOnly": "npm run build",
36
+ "test": "node --no-warnings --experimental-strip-types --test --experimental-test-coverage src/**/*.test.ts",
37
+ "test:watch": "node --no-warnings --experimental-strip-types --test --watch src/**/*.test.ts"
36
38
  },
37
39
  "engines": {
38
40
  "node": "^14.18.0 || >=16.0.0"