Ensure that we have a semicolon (;) at the end: we must put a semicol…

…on in front of JSX in generated code
styleguidist · Feb 19, 2021 · 9de0dfa · 9de0dfa
1 parent 90fef0d
commit 9de0dfa
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 13 deletions.
diff --git a/src/loaders/rehype/__tests__/exportStories.spec.ts b/src/loaders/rehype/__tests__/exportStories.spec.ts
@@ -27,15 +27,15 @@ describe('imports', () => {
 		const result = await compile(
 			`Henlo`,
 			`
-import Container from './Container'
+import Container from './Container';
 export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
 		"
 		import * as __story_import_0 from './Container'
 		export const __namedExamples = {
-		  'basic': 'import Container from \\\\'./Container\\\\'\\\\n\\\\n<Container><Button /></Container>'
+		  'basic': 'import Container from \\\\'./Container\\\\';\\\\n\\\\n<Container><Button /></Container>'
 		};
 		export const __storiesScope = {
 		  './Container': __story_import_0
@@ -53,15 +53,15 @@ export const basic = () => <Container><Button /></Container>
 		const result = await compile(
 			`Henlo`,
 			`
-import { Button, Input } from './components'
+import { Button, Input } from './components';
 export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
 		"
 		import * as __story_import_0 from './components'
 		export const __namedExamples = {
-		  'basic': 'import { Button, Input } from \\\\'./components\\\\'\\\\n\\\\n<Container><Button /></Container>'
+		  'basic': 'import { Button, Input } from \\\\'./components\\\\';\\\\n\\\\n<Container><Button /></Container>'
 		};
 		export const __storiesScope = {
 		  './components': __story_import_0
@@ -79,15 +79,15 @@ export const basic = () => <Container><Button /></Container>
 		const result = await compile(
 			`Henlo`,
 			`
-import Input, { Button } from './components'
+import Input, { Button } from './components';
 export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
 		"
 		import * as __story_import_0 from './components'
 		export const __namedExamples = {
-		  'basic': 'import Input, { Button } from \\\\'./components\\\\'\\\\n\\\\n<Container><Button /></Container>'
+		  'basic': 'import Input, { Button } from \\\\'./components\\\\';\\\\n\\\\n<Container><Button /></Container>'
 		};
 		export const __storiesScope = {
 		  './components': __story_import_0
@@ -105,15 +105,15 @@ export const basic = () => <Container><Button /></Container>
 		const result = await compile(
 			`Henlo`,
 			`
-import { Input as Button } from './components'
+import { Input as Button } from './components';
 export const basic = () => <Container><Button /></Container>
 `
 		);
 		expect(result).toMatchInlineSnapshot(`
 		"
 		import * as __story_import_0 from './components'
 		export const __namedExamples = {
-		  'basic': 'import { Input as Button } from \\\\'./components\\\\'\\\\n\\\\n<Container><Button /></Container>'
+		  'basic': 'import { Input as Button } from \\\\'./components\\\\';\\\\n\\\\n<Container><Button /></Container>'
 		};
 		export const __storiesScope = {
 		  './components': __story_import_0
@@ -131,15 +131,15 @@ export const basic = () => <Container><Button /></Container>
 		const result = await compile(
 			`Henlo`,
 			`
-import * as Buttons from './Buttons'
+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>'
+		  'basic': 'import * as Buttons from \\\\'./Buttons\\\\';\\\\n\\\\n<Container><Buttons.Button /></Container>'
 		};
 		export const __storiesScope = {
 		  './Buttons': __story_import_0
@@ -157,8 +157,8 @@ export const basic = () => <Container><Buttons.Button /></Container>
 		const result = await compile(
 			`Henlo`,
 			`
-import * as React from 'react'
-import { Coffee, Milk } from './drinks'
+import * as React from 'react';
+import { Coffee, Milk } from './drinks';
 export const basic = () => <Container><Button /></Container>
 `
 		);
@@ -181,6 +181,32 @@ export const basic = () => <Container><Button /></Container>
 		"
 	`);
 	});
+
+	test('add semicolon', async () => {
+		const result = await compile(
+			`Henlo`,
+			`
+import Container from './Container'
+export const basic = () => <Container><Button /></Container>
+`
+		);
+		expect(result).toMatchInlineSnapshot(`
+		"
+		import * as __story_import_0 from './Container'
+		export const __namedExamples = {
+		  'basic': 'import Container from \\\\'./Container\\\\';\\\\n\\\\n<Container><Button /></Container>'
+		};
+		export const __storiesScope = {
+		  './Container': __story_import_0
+		};
+
+		const layoutProps = {
+		  __namedExamples,
+		__storiesScope
+		};
+		"
+	`);
+	});
 });
 
 describe('local variables', () => {
@@ -327,4 +353,28 @@ export const basic = () => <Container>{javascript}</Container>
 		"
 	`);
 	});
+
+	test('add semicolon', async () => {
+		const result = await compile(
+			`Henlo`,
+			`
+const pizza = 'pizza'
+export const basic = () => <Container>{pizza}</Container>
+`
+		);
+		expect(result).toMatchInlineSnapshot(`
+		"
+
+		export const __namedExamples = {
+		  'basic': 'const pizza = \\\\'pizza\\\\';\\\\n\\\\n<Container>{pizza}</Container>'
+		};
+		export const __storiesScope = {};
+
+		const layoutProps = {
+		  __namedExamples,
+		__storiesScope
+		};
+		"
+	`);
+	});
 });
diff --git a/src/loaders/rehype/exportStories.ts b/src/loaders/rehype/exportStories.ts
@@ -32,6 +32,10 @@ interface Dependency {
 
 const getLocalName = (index: number) => `__story_import_${index}`;
 
+// Ensure that we have a semicolon (;) at the end: we must put a semicolon
+// in front of JSX (`import 'foo'; <Button/>`), otherwise it won't compile
+const ensureSemicolon = (s: string): string => s.replace(/(?:;\s*)?$/, ';');
+
 // TODO: Deduplicate?
 const getModulePathToModuleMap = (modules: string[]) => {
 	const moduleMap: ModuleMap = {};
@@ -208,7 +212,7 @@ const prependExampleWithDependencies = (code: string, dependencies: Dependency[]
 	);
 	return [
 		usedDependencies
-			.map((dependency) => dependency.code)
+			.map((dependency) => ensureSemicolon(dependency.code))
 			.filter(Boolean)
 			.join('\n'),
 		code,