From 9de0dfaa6ee24adea5292dc27053b14d7c88b0b3 Mon Sep 17 00:00:00 2001
From: Artem Sapegin <artem@sapegin.ru>
Date: Fri, 19 Feb 2021 12:45:33 +0100
Subject: [PATCH] Ensure that we have a semicolon (;) at the end: we must put a
 semicolon in front of JSX in generated code

---
 .../rehype/__tests__/exportStories.spec.ts    | 74 ++++++++++++++++---
 src/loaders/rehype/exportStories.ts           |  6 +-
 2 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/src/loaders/rehype/__tests__/exportStories.spec.ts b/src/loaders/rehype/__tests__/exportStories.spec.ts
index 345a2360d..965f8f708 100644
--- a/src/loaders/rehype/__tests__/exportStories.spec.ts
+++ b/src/loaders/rehype/__tests__/exportStories.spec.ts
@@ -27,7 +27,7 @@ describe('imports', () => {
 		const result = await compile(
 			`Henlo`,
 			`
-import Container from './Container'
+import Container from './Container';
 export const basic = () => <Container><Button /></Container>
 `
 		);
@@ -35,7 +35,7 @@ export const basic = () => <Container><Button /></Container>
 		"
 		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,7 +53,7 @@ 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>
 `
 		);
@@ -61,7 +61,7 @@ export const basic = () => <Container><Button /></Container>
 		"
 		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,7 +79,7 @@ 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>
 `
 		);
@@ -87,7 +87,7 @@ export const basic = () => <Container><Button /></Container>
 		"
 		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,7 +105,7 @@ 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>
 `
 		);
@@ -113,7 +113,7 @@ export const basic = () => <Container><Button /></Container>
 		"
 		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,7 +131,7 @@ 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>
 `
 		);
@@ -139,7 +139,7 @@ export const basic = () => <Container><Buttons.Button /></Container>
 		"
 		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
index eb7b2ca94..10855f346 100644
--- 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,