Use @babel/parser to parse example code in loaders

Author: sapegin

package-lock.json

@@ -27,13 +27,12 @@
     "node": ">=10"
   },
   "dependencies": {
+    "@babel/parser": "^7.13.11",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@tippyjs/react": "4.1.0",
     "@vxna/mini-html-webpack-template": "^2.0.0",
     "acorn": "^8.0.5",
-    "acorn-jsx": "^5.3.1",
-    "acorn-loose": "^8.0.2",
     "assert": "1.5.0",
     "ast-types": "~0.14.2",
     "clean-webpack-plugin": "^3.0.0",

package.json

@@ -527,7 +527,7 @@ export const basic = () => <Container>{nums.map(x => x)}</Container>
 		"
 
 		export const __namedExamples = {
-		  'basic': 'const nums = [\\\\'eins\\\\', \\\\'zwei\\\\', \\\\'polizei\\\\'];\\\\n\\\\n<Container>{nums.map(x => x)}</Container>'
+		  'basic': 'const nums = [\\\\'eins\\\\', \\\\'zwei\\\\', \\\\'polizei\\\\'] as const;\\\\n\\\\n<Container>{nums.map(x => x)}</Container>'
 		};
 		export const __storiesScope = {};
 

src/loaders/rehype/__tests__/exportStories.spec.ts

@@ -13,7 +13,6 @@ import {
 	ImportDefaultSpecifier,
 	ImportNamespaceSpecifier,
 } from 'estree';
-import acornJsx from 'acorn-jsx';
 import { Parent, Node as MdxNode } from 'unist';
 import { walk } from 'estree-walker';
 import { generate } from 'escodegen';
@@ -296,7 +295,7 @@ export default ({
 	}
 
 	const storiesCode = fs.readFileSync(storiesFile, 'utf8');
-	const storiesAst = getAst(storiesCode, [acornJsx()]);
+	const storiesAst = getAst(storiesCode);
 	if (!storiesAst) {
 		return tree;
 	}

src/loaders/rehype/exportStories.ts

@@ -1,24 +1,28 @@
-import acornJsx from 'acorn-jsx';
 import getAst from '../getAst';
 
 describe('getAst', () => {
 	test('return AST', () => {
 		const result = getAst(`42`);
-		expect(result).toHaveProperty('type', 'Program');
+		expect(result).toHaveProperty('type', 'File');
 	});
 
-	test('accept Acorn plugins', () => {
-		const result = getAst(`<X />`, [acornJsx()]);
-		expect(result).toHaveProperty('type', 'Program');
+	test('understands JSX', () => {
+		const result = getAst(`<X />`);
+		expect(result).toHaveProperty('type', 'File');
+	});
+
+	test('understands multiple JSX elements without a root element', () => {
+		const result = getAst(`<X /><Y />`);
+		expect(result).toHaveProperty('type', 'File');
 	});
 
 	test('understands new ECMAScript syntax', () => {
 		const result = getAst(`foo?.bar?.baz()`);
-		expect(result).toHaveProperty('type', 'Program');
+		expect(result).toHaveProperty('type', 'File');
 	});
 
 	test('understands TypeScript', () => {
 		const result = getAst(`const pizza = [1, 2, 3] as const`);
-		expect(result).toHaveProperty('type', 'Program');
+		expect(result).toHaveProperty('type', 'File');
 	});
 });

src/loaders/utils/__tests__/getAst.spec.ts

@@ -0,0 +1,9 @@
+import getImportsMap from '../getImportsMap';
+
+test('find import statements in code', () => {
+	expect(getImportsMap(`import A from 'pizza'; import { A as X, B } from 'lunch';`)).toEqual({
+		A: 'pizza',
+		B: 'lunch',
+		X: 'lunch',
+	});
+});

src/loaders/utils/__tests__/getImportsMap.spec.ts

@@ -1,34 +1,40 @@
-import { Parser, Options } from 'acorn';
-import { parse as looseParse } from 'acorn-loose';
+import { parse, ParserOptions } from '@babel/parser';
 import { Program } from 'estree';
 import Logger from 'glogg';
 
 const logger = Logger('rsg');
 
-export const ACORN_OPTIONS: Options = {
-	ecmaVersion: 'latest',
+const startsWithJsx = (code: string): boolean => !!code.trim().match(/^</);
+
+const wrapCodeInFragment = (code: string): string => `<React.Fragment>${code}</React.Fragment>;`;
+
+export const BABEL_OPTIONS: ParserOptions = {
+	allowReturnOutsideFunction: true,
+	allowAwaitOutsideFunction: true,
+	errorRecovery: true,
 	sourceType: 'module',
+	plugins: [
+		'jsx',
+		// TODO: How to support flow? We can't use `flow` and `typescript` plugins together
+		'typescript',
+		// Generate AST compatible with ESTree
+		// TODO: We may want to rewrite the code to use Babel AST instead
+		'estree',
+	],
 };
 
 /**
- * 1. Try to parse source code using Acorn, return AST.
- * 2. If failed: try to parse source using with Acorn Loose, return AST.
- * 3. If failed: return undefined.
+ * Try to parse source code using Babel parser, return AST.
+ * If failed, return undefined.
  */
-export default function getAst(
-	code: string,
-	plugins: ((BaseParser: typeof Parser) => typeof Parser)[] = []
-): Program | undefined {
-	const parser = Parser.extend(...plugins);
-
+export default function getAst(code: string): Program | undefined {
+	const wrappedCode = startsWithJsx(code) ? wrapCodeInFragment(code) : code;
 	try {
-		return (parser.parse(code, ACORN_OPTIONS) as unknown) as Program;
+		return (parse(wrappedCode, BABEL_OPTIONS) as unknown) as Program; // TODO: @babel/types.File
 	} catch (err) {
-		try {
-			return (looseParse(code, ACORN_OPTIONS) as unknown) as Program;
-		} catch (innerErr) {
-			logger.debug(`Acorn cannot parse code: ${innerErr.message}\n\nCode:\n${code}`);
-			return undefined;
-		}
+		// TODO: Remove console.log
+		console.log(`Babel cannot parse code: ${err.message}\n\nCode:\n${code}`);
+		logger.debug(`Babel cannot parse code: ${err.message}\n\nCode:\n${code}`);
+		return undefined;
 	}
 }

src/loaders/utils/getAst.ts

@@ -1,4 +1,3 @@
-import acornJsx from 'acorn-jsx';
 import { walk } from 'estree-walker';
 import { Node } from 'estree';
 import getAst from './getAst';
@@ -12,7 +11,7 @@ export default function getImports(code: string): string[] {
 	//    imports/requires are not allowed in this case, and we'll wrap the code
 	//    in React.Fragment on the frontend
 	// 2. All other errors - we'll deal with them on the frontend
-	const ast = getAst(code, [acornJsx()]);
+	const ast = getAst(code);
 	if (!ast) {
 		return [];
 	}

src/loaders/utils/getImports.ts

@@ -1,4 +1,3 @@
-import acornJsx from 'acorn-jsx';
 import { walk } from 'estree-walker';
 import { Node } from 'estree';
 import getAst from './getAst';
@@ -9,7 +8,7 @@ import getAst from './getAst';
 export default function getImportsMap(code: string): Record<string, string> {
 	// Parse example source code, but ignore errors:
 	// we'll deal with them on the frontend
-	const ast = getAst(code, [acornJsx()]);
+	const ast = getAst(code);
 	if (!ast) {
 		return {};
 	}