Support wildcard imports

styleguidist · Feb 17, 2021 · 2cb959b · 2cb959b
1 parent 13e2d0f
commit 2cb959b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 27 deletions.
diff --git a/src/loaders/rehype/__tests__/exportStories.spec.ts b/src/loaders/rehype/__tests__/exportStories.spec.ts
@@ -17,7 +17,9 @@ const compile = async (mdxContent: string, storyContent: string) => {
 		filepath: 'Pizza.md',
 		rehypePlugins: [exportStories({ component: 'Pizza', resourcePath: '/Pizza/Pizza.md' })],
 	});
-	return result.split('const MDXLayout = "wrapper"')[0];
+
+	// Strip repeated parts
+	return result.split('/* @jsx mdx */')[1].split('const MDXLayout = "wrapper"')[0];
 };
 
 describe('imports', () => {
@@ -30,8 +32,7 @@ export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 		import * as __story_import_0 from './Container'
 		export const __namedExamples = {
 		  'basic': 'import Container from \\\\'./Container\\\\'\\\\n\\\\n<Container><Button /></Container>'
@@ -57,8 +58,7 @@ export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 		import * as __story_import_0 from './components'
 		export const __namedExamples = {
 		  'basic': 'import { Button, Input } from \\\\'./components\\\\'\\\\n\\\\n<Container><Button /></Container>'
@@ -84,8 +84,7 @@ export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 		import * as __story_import_0 from './components'
 		export const __namedExamples = {
 		  'basic': 'import Input, { Button } from \\\\'./components\\\\'\\\\n\\\\n<Container><Button /></Container>'
@@ -111,8 +110,7 @@ export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 		import * as __story_import_0 from './components'
 		export const __namedExamples = {
 		  'basic': 'import { Input as Button } from \\\\'./components\\\\'\\\\n\\\\n<Container><Button /></Container>'
@@ -129,23 +127,51 @@ export const basic = () => <Container><Button /></Container>
 	`);
 	});
 
-	test('unused import', async () => {
+	test('wildcard import', async () => {
+		const result = await compile(
+			`Henlo`,
+			`
+import * as Buttons from './Buttons'
+export const basic = () => <Container><Buttons.Button /></Container>
+`
+		);
+		expect(result).toMatchInlineSnapshot(`
+		"
+		import * as __story_import_0 from './Buttons'
+		export const __namedExamples = {
+		  'basic': 'import * as Buttons from \\\\'./Buttons\\\\'\\\\n\\\\n<Container><Buttons.Button /></Container>'
+		};
+		export const __storiesScope = {
+		  './Buttons': __story_import_0
+		};
+
+		const layoutProps = {
+		  __namedExamples,
+		__storiesScope
+		};
+		"
+	`);
+	});
+
+	test('unused imports', async () => {
 		const result = await compile(
 			`Henlo`,
 			`
+import * as React from 'react'
 import { Coffee, Milk } from './drinks'
 export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
-		import * as __story_import_0 from './drinks'
+		"
+		import * as __story_import_0 from 'react'
+		import * as __story_import_1 from './drinks'
 		export const __namedExamples = {
 		  'basic': '<Container><Button /></Container>'
 		};
 		export const __storiesScope = {
-		  './drinks': __story_import_0
+		  'react': __story_import_0,
+		  './drinks': __story_import_1
 		};
 
 		const layoutProps = {
@@ -167,8 +193,7 @@ export const basic = () => <Container>{pizza}</Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 
 		export const __namedExamples = {
 		  'basic': 'const pizza = \\\\'pizza\\\\';\\\\n\\\\n<Container>{pizza}</Container>'
@@ -192,8 +217,7 @@ export const basic = () => <Container>{coffee}</Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 
 		export const __namedExamples = {
 		  'basic': 'const { coffee } = {coffee: \\\\'V60\\\\'};\\\\n\\\\n<Container>{coffee}</Container>'
@@ -217,8 +241,7 @@ export const basic = () => <Container>{pizza}</Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 
 		export const __namedExamples = {
 		  'basic': 'const { coffee: pizza } = {coffee: \\\\'V60\\\\'};\\\\n\\\\n<Container>{pizza}</Container>'
@@ -242,8 +265,7 @@ export const basic = () => <Container>{rest.map(x => <p>{x}</p>)}</Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 
 		export const __namedExamples = {
 		  'basic': 'const { coffee, ...rest } = {coffee: \\\\'V60\\\\'};\\\\n\\\\n<Container>{rest.map(x => <p>{x}</p>)}</Container>'
@@ -267,8 +289,7 @@ export const basic = () => <Container>pizza</Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 
 		export const __namedExamples = {
 		  'basic': '<Container>pizza</Container>'
@@ -292,8 +313,7 @@ export const basic = () => <Container>{javascript}</Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
-		"/* @jsxRuntime classic */
-		/* @jsx mdx */
+		"
 
 		export const __namedExamples = {
 		  'basic': '<Container>{javascript}</Container>'

diff --git a/src/loaders/rehype/exportStories.ts b/src/loaders/rehype/exportStories.ts
@@ -92,8 +92,8 @@ const getImportDeclarationName = (
 ): string => {
 	switch (specifier.type) {
 		case 'ImportSpecifier':
-			return specifier.local.name;
 		case 'ImportDefaultSpecifier':
+		case 'ImportNamespaceSpecifier':
 			return specifier.local.name;
 		default:
 			return '';