Fix process.env import skewing env inlining offsets

.changeset/dry-forks-yell.md

@@ -0,0 +1,5 @@
+---
+"wmr": patch
+---
+
+Fix complex `process.env` usage (ex: `let {A}=process.env`, but not `process.env.A`) generating invalid code.

packages/wmr/src/plugins/process-global-plugin.js

@@ -69,25 +69,22 @@ export default function processGlobalPlugin({ NODE_ENV = 'development', env = {}
 			});
 
 			code = result.code;
-
 			const s = new MagicString(code);
 
 			// if that wasn't the only way `process.env` was referenced...
 			if (code.match(/[^a-zA-Z0-9]process\.env/)) {
 				// hack: avoid injecting imports into commonjs modules
 				if (/^\s*(import|export)[\s{]/gm.test(code)) {
 					s.prepend(`import process from '${PREFIX}process.js';\n`);
-					code = `import process from '${PREFIX}process.js';${code}`;
 				} else {
 					s.prepend(`var process=${processObj};\n`);
-					code = `var process=${processObj};${code}`;
 				}
-			}
-
-			const reg = /typeof(\s+|\s*\(+\s*)process([^a-zA-Z$_])/g;
-			let match = null;
-			while ((match = reg.exec(code)) !== null) {
-				s.overwrite(match.index, match.index + match[0].length, `typeof${match[1]}undefined${match[2]}`);
+			} else {
+				const reg = /typeof(\s+|\s*\(+\s*)process([^a-zA-Z$_.])/g;
+				let match = null;
+				while ((match = reg.exec(code)) !== null) {
+					s.overwrite(match.index, match.index + match[0].length, `typeof${match[1]}undefined${match[2]}`);
+				}
 			}
 
 			/** @type {*} */

packages/wmr/test/fixtures.test.js

@@ -809,6 +809,35 @@ describe('fixtures', () => {
 				expect(output).toMatch(/false/i);
 			});
 		});
+
+		it('should handle complex / dynamic process.env usage', async () => {
+			await loadFixture('process-complex', env);
+			instance = await runWmrFast(env.tmp.path, {
+				env: {
+					WMR_A: 'wmr-a',
+					WMR_B: 'wmr-b',
+					WMR_C: 'wmr-c'
+				}
+			});
+			await getOutput(env, instance);
+			const result = JSON.parse((await env.page.$eval('#out', node => node.textContent)) || 'undefined');
+			expect(result).toEqual({
+				WMR_A: 'wmr-a',
+				WMR_B: 'wmr-b',
+				NODE_ENV: 'development',
+				keys: ['WMR_A', 'WMR_B', 'WMR_C', 'NODE_ENV'],
+				withFullAccess: {
+					type: 'object',
+					typeofEnv: 'object',
+					typeofWMR_A: 'string'
+				},
+				withoutFullAccess: {
+					type: 'object',
+					typeofEnv: 'object',
+					typeofWMR_A: 'string'
+				}
+			});
+		});
 	});
 
 	describe('import.meta.env', () => {

packages/wmr/test/fixtures/process-complex/index.html

@@ -0,0 +1,2 @@
+<pre id="out"></pre>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/process-complex/index.js

@@ -0,0 +1,21 @@
+import withoutFullAccess from './other.js';
+
+const { WMR_A, WMR_B } = process.env;
+const NODE_ENV = process.env.NODE_ENV;
+const keys = Object.keys(process.env);
+const type = typeof process;
+const typeofEnv = typeof process.env;
+const typeofWMR_A = typeof process.env.WMR_A;
+
+document.getElementById('out').textContent = JSON.stringify({
+	WMR_A,
+	WMR_B,
+	NODE_ENV,
+	keys,
+	withFullAccess: {
+		type,
+		typeofEnv,
+		typeofWMR_A
+	},
+	withoutFullAccess
+});

packages/wmr/test/fixtures/process-complex/other.js

@@ -0,0 +1,4 @@
+const type = typeof process;
+const typeofEnv = typeof process.env;
+const typeofWMR_A = typeof process.env.WMR_A;
+export default { type, typeofEnv, typeofWMR_A };