Fix: Mixed named/default imports in examples

import a, {b} from 'a'

Author: Artem Sapegin

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

@@ -1,6 +1,27 @@
 import transpileImports from '../transpileImports';
 
 describe('transpileImports', () => {
+	test('transpile default imports', () => {
+		const result = transpileImports(`import B from 'cat'`);
+		expect(result).toMatchInlineSnapshot(`"const B = require('cat');"`);
+	});
+
+	test('transpile named imports', () => {
+		const result = transpileImports(`import {B} from 'cat'`);
+		expect(result).toMatchInlineSnapshot(`
+"const cat$0 = require('cat');
+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;"
+`);
+	});
+
 	test('transpile multiple import statements', () => {
 		const result = transpileImports(`/**
 * Some important comment

src/client/utils/getComponent.js

@@ -1,13 +1,13 @@
+// @flow
+
+type Module = { [name: string]: any } | (() => any);
+
 /**
  * Given a component module and a name,
  * return the appropriate export.
  * See /docs/Components.md
- *
- * @param  {object} module
- * @param  {string} name
- * @return {function|object}
  */
-export default function getComponent(module, name) {
+export default function getComponent(module: Module, name: string): Module {
 	//
 	// If the module defines a default export, return that
 	// e.g.
@@ -31,7 +31,6 @@ export default function getComponent(module, name) {
 	if (!module.__esModule && typeof module === 'function') {
 		return module;
 	}
-	const moduleKeys = Object.keys(module);
 
 	// If the module exports just one named export, return that
 	// e.g.
@@ -40,8 +39,9 @@ export default function getComponent(module, name) {
 	// export function Component() { ... }
 	// ```
 	//
-	if (moduleKeys.length === 1) {
-		return module[moduleKeys[0]];
+	const namedExports = Object.keys(module);
+	if (namedExports.length === 1) {
+		return module[namedExports[0]];
 	}
 
 	// If the module exports a named export with the same name as the

src/client/utils/rewriteImports.js

@@ -0,0 +1,48 @@
+// Temporary copy to fix
+// https://github.com/lukeed/rewrite-imports/issues/10
+
+const UNNAMED = /import\s*['"]([^'"]+)['"];?/gi;
+const NAMED = /import\s*(\*\s*as)?\s*(\w*?)\s*,?\s*(?:\{([\s\S]*?)\})?\s*from\s*['"]([^'"]+)['"];?/gi;
+
+function alias(key) {
+	key = key.trim();
+	const name = key.split(' as ');
+	if (name.length > 1) {
+		key = name.shift();
+	}
+	return { key, name: name[0] };
+}
+
+function generate(keys, dep, base, fn) {
+	const tmp =
+		base ||
+		dep
+			.split('/')
+			.pop()
+			.replace(/\W/g, '_') +
+			'$' +
+			num++; // uniqueness
+	const name = base || alias(tmp).name;
+
+	dep = `${fn}('${dep}')`;
+
+	let obj;
+	let out = `const ${name} = ${dep};`;
+
+	keys.forEach(key => {
+		obj = alias(key);
+		out += `\nconst ${obj.name} = ${tmp}.${obj.key};`;
+	});
+
+	return out;
+}
+
+let num;
+export default function(str, fn = 'require') {
+	num = 0;
+	return str
+		.replace(NAMED, (_, asterisk, base, req, dep) =>
+			generate(req ? req.split(',') : [], dep, base, fn)
+		)
+		.replace(UNNAMED, (_, dep) => `${fn}('${dep}');`);
+}

src/client/utils/transpileImports.js

@@ -1,6 +1,6 @@
 // @flow
 import walkes from 'walkes';
-import rewriteImports from 'rewrite-imports';
+import rewriteImports from './rewriteImports';
 import getAst from './getAst';
 
 const hasImports = (code: string): boolean => !!code.match(/import[\S\s]+?['"]([^'"]+)['"];?/m);

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

@@ -1,16 +1,48 @@
 import requireInRuntime from '../requireInRuntime';
 
 const map = {
-	a: 42,
-	b: 43,
+	a: () => 'a',
+	b: () => 'b',
+	c: {
+		default: () => 'c.default',
+	},
+	d: {
+		named: () => 'd.named',
+	},
+	e: {
+		default: () => 'e.default',
+		named: () => 'e.named',
+	},
 };
 
-it('should return a module from the map', () => {
+test('return a module from the map', () => {
 	const result = requireInRuntime(map, 'a');
-	expect(result).toBe(map.a);
+	expect(result).toBeDefined();
+	expect(result()).toBe('a');
 });
 
-it('should throw if module is not in the map', () => {
-	const fn = () => requireInRuntime(map, 'c');
+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

@@ -1,18 +1,30 @@
+// @flow
+
+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
  * modules in advance to be able to bundle them with the code).
- *
- * @param {object} requireMap
- * @param {string} filepath
- * @return {object}
  */
-export default function requireInRuntime(requireMap, filepath) {
+export default function requireInRuntime(requireMap: RequireMap, filepath: string): Module {
 	if (!(filepath in requireMap)) {
 		throw new Error(
 			`import or require() statements can be added only by editing a Markdown example file: ${filepath}`
 		);
 	}
-	const mod = requireMap[filepath];
-	return mod.default || mod;
+	return getModule(requireMap[filepath]);
 }