Refactor: Improve default/named module resolution in example

Author: Artem Sapegin

src/client/utils/__tests__/compileCode.spec.js

@@ -14,7 +14,10 @@ var bar = baz.bar;"
 
 	test('transform imports to require()', () => {
 		const result = compileCode(`import foo from 'bar'`, compilerConfig);
-		expect(result).toMatchInlineSnapshot(`"const foo = require('bar');"`);
+		expect(result).toMatchInlineSnapshot(`
+"const bar$0 = require('bar');
+const foo = bar$0.default || bar$0;"
+`);
 	});
 
 	test('transform imports to require() in front of JSX', () => {
@@ -27,8 +30,10 @@ import Button from 'button';
 		);
 		expect(result).toMatchInlineSnapshot(`
 "
-const foo = require('bar');
-const Button = require('button');
+const bar$0 = require('bar');
+const foo = bar$0.default || bar$0;
+const button$0 = require('button');
+const Button = button$0.default || button$0;
 React.createElement( Button, null )"
 `);
 	});

src/client/utils/__tests__/transpileImports.spec.js

@@ -3,7 +3,10 @@ import transpileImports from '../transpileImports';
 describe('transpileImports', () => {
 	test('transpile default imports', () => {
 		const result = transpileImports(`import B from 'cat'`);
-		expect(result).toMatchInlineSnapshot(`"const B = require('cat');"`);
+		expect(result).toMatchInlineSnapshot(`
+"const cat$0 = require('cat');
+const B = cat$0.default || cat$0;"
+`);
 	});
 
 	test('transpile named imports', () => {
@@ -17,8 +20,9 @@ const B = cat$0.B;"
 	test('transpile mixed imports', () => {
 		const result = transpileImports(`import A, {B} from 'cat'`);
 		expect(result).toMatchInlineSnapshot(`
-"const A = require('cat');
-const B = A.B;"
+"const cat$0 = require('cat');
+const A = cat$0.default || cat$0;
+const B = cat$0.B;"
 `);
 	});
 
@@ -40,11 +44,15 @@ import E from 'snake'
 */
 require('dog');
 /* Less important comments */
-const B = require('cat');
+const cat$0 = require('cat');
+const B = cat$0.default || cat$0;
 // Absolutely not important comment
-const C = require('capybara');
-const D = require('hamster'); // One more comment
-const E = require('snake');
+const capybara$0 = require('capybara');
+const C = capybara$0.default || capybara$0;
+const hamster$0 = require('hamster');
+const D = hamster$0.default || hamster$0; // One more comment
+const snake$0 = require('snake');
+const E = snake$0.default || snake$0;
 "
 `);
 	});

src/client/utils/rewriteImports.js

@@ -15,20 +15,23 @@ function alias(key) {
 
 function generate(keys, dep, base, fn) {
 	const tmp =
-		base ||
 		dep
 			.split('/')
 			.pop()
 			.replace(/\W/g, '_') +
-			'$' +
-			num++; // uniqueness
-	const name = base || alias(tmp).name;
+		'$' +
+		num++; // uniqueness
+	const name = alias(tmp).name;
 
 	dep = `${fn}('${dep}')`;
 
 	let obj;
 	let out = `const ${name} = ${dep};`;
 
+	if (base) {
+		out += `\nconst ${base} = ${tmp}.default || ${tmp};`;
+	}
+
 	keys.forEach(key => {
 		obj = alias(key);
 		out += `\nconst ${obj.name} = ${tmp}.${obj.key};`;

src/loaders/__tests__/examples-loader.spec.js

@@ -180,7 +180,9 @@ it('should prepend example code with React require()', () => {
 
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
-	expect(result).toMatch(`const React = require('react');`);
+	expect(result).toMatch(
+		`const React$0 = require('react');\\nconst React = React$0.default || React$0;`
+	);
 });
 
 it('should prepend example code with component require()', () => {
@@ -195,7 +197,9 @@ it('should prepend example code with component require()', () => {
 
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
-	expect(result).toMatch(`const FooComponent = require('../foo.js');`);
+	expect(result).toMatch(
+		`const FooComponent$0 = require('../foo.js');\\nconst FooComponent = FooComponent$0.default || FooComponent$0;`
+	);
 });
 
 it('should allow explicit import of React and component module', () => {
@@ -213,8 +217,12 @@ it('should allow explicit import of React and component module', () => {
 
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
-	expect(result).toMatch(`const React = require('react');`);
-	expect(result).toMatch(`const FooComponent = require('../foo.js');`);
+	expect(result).toMatch(
+		`const React$0 = require('react');\\nconst React = React$0.default || React$0;`
+	);
+	expect(result).toMatch(
+		`const FooComponent$0 = require('../foo.js');\\nconst FooComponent = FooComponent$0.default || FooComponent$0;`
+	);
 });
 
 it('should works for any Markdown file, without a current component', () => {
@@ -232,6 +240,8 @@ it('should works for any Markdown file, without a current component', () => {
 
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
-	expect(result).toMatch(`const React = require('react');`);
+	expect(result).toMatch(
+		`const React$0 = require('react');\\nconst React = React$0.default || React$0;`
+	);
 	expect(result).not.toMatch('undefined');
 });

src/loaders/examples-loader.js

@@ -2,6 +2,7 @@ import path from 'path';
 import filter from 'lodash/filter';
 import map from 'lodash/map';
 import values from 'lodash/values';
+import flatten from 'lodash/flatten';
 import loaderUtils from 'loader-utils';
 import { generate } from 'escodegen';
 import toAst from 'to-ast';
@@ -71,10 +72,19 @@ export default function examplesLoader(source) {
 
 	// Require context modules so they are available in an example
 	const requireContextCode = b.program(
-		// const name = require(path)
-		map(fullContext, (requireRequest, name) =>
-			b.variableDeclaration('const', [
-				b.variableDeclarator(b.identifier(name), requireIt(requireRequest).toAST()),
+		flatten(
+			map(fullContext, (requireRequest, name) => [
+				// const name$0 = require(path);
+				b.variableDeclaration('const', [
+					b.variableDeclarator(b.identifier(`${name}$0`), requireIt(requireRequest).toAST()),
+				]),
+				// const name = name$0.default || name$0;
+				b.variableDeclaration('const', [
+					b.variableDeclarator(
+						b.identifier(name),
+						b.logicalExpression('||', b.identifier(`${name}$0.default`), b.identifier(`${name}$0`))
+					),
+				]),
 			])
 		)
 	);

src/loaders/utils/client/__tests__/requireInRuntime.spec.js

@@ -2,17 +2,6 @@ import requireInRuntime from '../requireInRuntime';
 
 const map = {
 	a: () => 'a',
-	b: () => 'b',
-	c: {
-		default: () => 'c.default',
-	},
-	d: {
-		named: () => 'd.named',
-	},
-	e: {
-		default: () => 'e.default',
-		named: () => 'e.named',
-	},
 };
 
 test('return a module from the map', () => {
@@ -21,27 +10,6 @@ test('return a module from the map', () => {
 	expect(result()).toBe('a');
 });
 
-test('return a default export', () => {
-	const result = requireInRuntime(map, 'c');
-	expect(result).toBeDefined();
-	expect(result()).toBe('c.default');
-});
-
-test('return a named export', () => {
-	const result = requireInRuntime(map, 'd');
-	expect(result).toBeDefined();
-	expect(result.named).toBeDefined();
-	expect(result.named()).toBe('d.named');
-});
-
-test('return both a default and a named exports', () => {
-	const result = requireInRuntime(map, 'e');
-	expect(result).toBeDefined();
-	expect(result.named).toBeDefined();
-	expect(result()).toBe('e.default');
-	expect(result.named()).toBe('e.named');
-});
-
 test('throw if module is not in the map', () => {
 	const fn = () => requireInRuntime(map, 'pizza');
 	expect(fn).toThrowError('require() statements can be added');

src/loaders/utils/client/requireInRuntime.js

@@ -3,18 +3,6 @@
 type Module = { [name: string]: any } | (() => any);
 type RequireMap = { [filepath: string]: Module };
 
-const getModule = (mod: Module): Module => {
-	if (!mod.default) {
-		return mod;
-	}
-
-	// Merge named exports with default export to allow requiring like this:
-	// const a, {b} = requireInRuntime('a')
-	const merged = mod.default;
-	Object.assign(merged, mod);
-	return merged;
-};
-
 /**
  * Return module from a given map (like {react: require('react')}) or throw.
  * We alllow to require modules only from Markdown examples (won’t work dinamically becasue we need to know all required
@@ -26,5 +14,6 @@ export default function requireInRuntime(requireMap: RequireMap, filepath: strin
 			`import or require() statements can be added only by editing a Markdown example file: ${filepath}`
 		);
 	}
-	return getModule(requireMap[filepath]);
+
+	return requireMap[filepath];
 }