Add support for commonjs proxy modules

packages/wmr/src/lib/acorn-traverse.js

@@ -835,6 +835,7 @@ const TYPES = {
 	importDefaultSpecifier: local => ({ type: 'ImportDefaultSpecifier', local }),
 	importNamespaceSpecifier: local => ({ type: 'ImportNamespaceSpecifier', local }),
 	exportDefaultDeclaration: declaration => ({ type: 'ExportDefaultDeclaration', declaration }),
+	exportAllDeclaration: (source, exported = null) => ({ type: 'ExportAllDeclaration', source, exported }),
 	assignmentExpression: (operator, left, right) => ({ type: 'AssignmentExpression', operator, left, right }),
 	variableDeclaration: (kind, declarations) => ({ type: 'VariableDeclaration', kind, declarations }),
 	variableDeclarator: (id, init) => ({ type: 'VariableDeclarator', id, init }),

packages/wmr/src/lib/plugins.js

@@ -101,7 +101,7 @@ export function getPlugins(options) {
 			// Only transpile CommonJS in node_modules and explicit .cjs files:
 			include: /(^npm\/|[/\\]node_modules[/\\]|\.cjs$)/
 		}),
-		npmPlugin2({ cwd, autoInstall }),
+		npmPlugin2({ cwd, autoInstall, production }),
 		resolveExtensionsPlugin({
 			extensions: ['.ts', '.tsx', '.js', '.cjs'],
 			index: true

packages/wmr/src/plugins/npm-plugin-2/commonjs.js

@@ -5,46 +5,132 @@ const CJS_KEYWORDS = /\b(module\.exports|exports)\b/;
 export const ESM_KEYWORDS =
 	/(\bimport\s*(\{.*?\}\s*from|\s[\w$]+\s+from)?\s*['"]|[\s;]export(\s+(default|const|var|let|function|class)[^\w$]|\s*\{))/;
 
-function acornCjs({ types: t }) {
-	return {
-		name: 'commonjs-transform',
-		visitor: {
-			Program(path) {
-				for (let i = 0; i < path.node.body.length; i++) {
-					const stmt = path.node.body[i];
-					if (
-						t.isExpressionStatement(stmt) &&
-						t.isAssignmentExpression(stmt.expression) &&
-						t.isMemberExpression(stmt.expression.left) &&
-						path.get(`body.${i}.expression.left`).getSource() === 'module.exports'
-					) {
-						path
-							.get(`body.${i}`)
-							.replaceWith(
-								t.variableDeclaration('const', [t.variableDeclarator(t.identifier('__default'), stmt.expression.right)])
-							);
-						path.get(`body.${i}`).appendString(`export default __default;`);
+/**
+ * @param {{ production: boolean}} options
+ */
+function acornCjs(options) {
+	return ({ types: t }) => {
+		return {
+			name: 'commonjs-transform',
+			visitor: {
+				Program: {
+					exit(path) {
+						for (let i = 0; i < path.node.body.length; i++) {
+							const stmt = path.node.body[i];
+
+							if (
+								t.isExpressionStatement(stmt) &&
+								t.isAssignmentExpression(stmt.expression) &&
+								t.isMemberExpression(stmt.expression.left) &&
+								t.isIdentifier(stmt.expression.left.object) &&
+								stmt.expression.left.object.name === 'module' &&
+								t.isIdentifier(stmt.expression.left.property) &&
+								stmt.expression.left.property.name === 'exports'
+							) {
+								let replacement = null;
+
+								// Detect: `module.exports = require("...");`
+								if (
+									t.isCallExpression(stmt.expression.right) &&
+									t.isIdentifier(stmt.expression.right.callee) &&
+									stmt.expression.right.callee.name === 'require'
+								) {
+									replacement = t.exportAllDeclaration(t.clone(stmt.expression.right.arguments[0]));
+
+									path.get(`body.${i}`).replaceWith(replacement);
+								}
+								// Otherwise use a variable instead
+								else {
+									replacement = t.variableDeclaration('const', [
+										t.variableDeclarator(t.identifier('__default'), t.cloneDeep(stmt.expression.right))
+									]);
+
+									path.get(`body.${i}`).replaceWith(replacement);
+									path.get(`body.${i}`).appendString(`export default __default;`);
+								}
+							}
+						}
+					}
+				},
+				ExpressionStatement(path) {
+					// Remove "use strict" directive
+					if (t.isLiteral(path.node.expression) && path.node.expression.value === 'use strict') {
+						path.remove();
+					}
+				},
+				IfStatement(path) {
+					// path.replaceWithString(`const foo = 42;`);
+					// return;
+					// Detect proxy modules. They usually have the form:
+					//
+					//   if (process.env.NODE_ENV === 'production') {
+					//     module.exports = require('./prod.js');
+					//   } else {
+					//     module.exports = require('./dev.js');
+					//   }
+					if (t.isBinaryExpression(path.node.test)) {
+						const node = path.node.test;
+						const { operator } = path.node.test;
+
+						let envMember = null;
+						let literal = null;
+						if (t.isMemberExpression(node.left) && t.isLiteral(node.right) && typeof node.right.value === 'string') {
+							envMember = path.get(`test.left`);
+							literal = path.get(`test.right`);
+						} else if (
+							t.isMemberExpression(node.right) &&
+							t.isLiteral(node.left) &&
+							typeof node.left.value === 'string'
+						) {
+							envMember = path.get(`test.right`);
+							literal = path.get(`test.left`);
+						}
+
+						if (envMember && literal && envMember.getSource() === 'process.env.NODE_ENV') {
+							const actual = options.production ? 'production' : 'development';
+							const expected = literal.node.value;
+
+							let replacement = null;
+							if ((operator === '===' && actual === expected) || (operator === '!==' && actual !== expected)) {
+								replacement = path.node.consequent;
+							} else {
+								replacement = path.node.alternate;
+							}
+
+							if (replacement !== null) {
+								if (t.isBlockStatement(replacement)) {
+									// TODO: Once we have a more stable parser
+									// in place we can prependItems
+									path.replaceWith(t.cloneDeep(replacement.body[0]));
+								} else {
+									path.replaceWith(t.cloneDeep(replacement));
+								}
+							}
+						}
 					}
 				}
 			}
-		}
+		};
 	};
 }
 
 /**
+ * Attempt to convert CommonJS modules to ESM
+ * @param {object} options
+ * @param {boolean} options.production
  * @returns {import('rollup').Plugin}
  */
-export function commonjsPlugin() {
+export function commonjsPlugin({ production }) {
 	return {
 		name: 'commonjs',
-		transform(code, id) {
+		async transform(code, id) {
 			const hasCjsKeywords = CJS_KEYWORDS.test(code);
 			const hasEsmKeywords = ESM_KEYWORDS.test(code);
 			if (!hasCjsKeywords || hasEsmKeywords) return;
 
 			const result = transform(code, {
 				parse: this.parse,
-				plugins: [acornCjs]
+				plugins: [acornCjs({ production })]
 			});
 
 			return {

packages/wmr/src/plugins/npm-plugin-2/index.js

@@ -5,9 +5,10 @@ import { isValidPackageName } from './utils.js';
  * @param {object} options
  * @param {string} options.cwd
  * @param {boolean} options.autoInstall
+ * @param {boolean} options.production
  * @returns {import('rollup').Plugin}
  */
-export function npmPlugin2({ cwd, autoInstall }) {
+export function npmPlugin2({ cwd, autoInstall, production }) {
 	const PREFIX = '\0npm:';
 
 	// FIXME: Buffer for assets
@@ -26,7 +27,7 @@ export function npmPlugin2({ cwd, autoInstall }) {
 
 			// TODO: Caching
 
-			let result = await npmBundle(cwd, id, { autoInstall });
+			let result = await npmBundle(cwd, id, { autoInstall, production });
 
 			result.output.forEach(chunkOrAsset => {
 				if (chunkOrAsset.fileName === 'virtual-entry.js') {

packages/wmr/src/plugins/npm-plugin-2/npm-bundle.js

@@ -13,8 +13,9 @@ import { npmAutoInstall } from './npm-auto-install.js';
  * @param {string} requestId
  * @param {object} options
  * @param {boolean} options.autoInstall
+ * @param {boolean} options.production
  */
-export async function npmBundle(cwd, requestId, { autoInstall }) {
+export async function npmBundle(cwd, requestId, { autoInstall, production }) {
 	const meta = getPackageInfo(requestId);
 	const pkgName = meta.name;
 
@@ -41,7 +42,7 @@ export async function npmBundle(cwd, requestId, { autoInstall }) {
 			!process.env.DISABLE_LOCAL_NPM && npmLocalPackage({ root: cwd }),
 			autoInstall && npmAutoInstall({ cwd }),
 			npmLoad({ browserReplacement }),
-			commonjsPlugin(),
+			commonjsPlugin({ production }),
 			subPackageLegacy({ rootId: requestId })
 		]
 	});

packages/wmr/test/fixtures/npm-commonjs-proxy/index.html

@@ -0,0 +1,2 @@
+<h1>it doesn't work</h1>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/npm-commonjs-proxy/index.js

@@ -0,0 +1,3 @@
+import { value } from 'foo';
+
+document.querySelector('h1').textContent = value;

packages/wmr/test/npm.test.js

@@ -196,6 +196,15 @@ describe('node modules', () => {
 					expect(text).toMatch(/it works/);
 				});
 			});
+
+			it('should inline proxy modules based on `process.env.NODE_ENV`', async () => {
+				await loadFixture('npm-commonjs-proxy', env);
+				instance = await runWmrFast(env.tmp.path);
+				await withLog(instance.output, async () => {
+					const text = await getOutput(env, instance);
+					expect(text).toMatch(/This is development/);
+				});
+			});
 		});
 
 		describe('auto install', () => {