From 6f2bad3d9e728af9c7fbc0390bb7a8fc960d1b04 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Mon, 7 Feb 2022 18:07:36 +0100 Subject: [PATCH 01/32] [@blocz/detect-imports] remove package as now the ESAST is generated too for mdxjsEsm nodes --- packages/detect-imports/.npmignore | 9 -- packages/detect-imports/README.md | 58 --------- packages/detect-imports/acorn-jsx.d.ts | 5 - packages/detect-imports/package.json | 33 ----- .../detect-imports/src/detect-imports.test.ts | 122 ------------------ packages/detect-imports/src/detect-imports.ts | 42 ------ .../detect-imports/src/from-jsx-to-ast.ts | 12 -- packages/detect-imports/src/index.ts | 1 - 8 files changed, 282 deletions(-) delete mode 100644 packages/detect-imports/.npmignore delete mode 100644 packages/detect-imports/README.md delete mode 100644 packages/detect-imports/acorn-jsx.d.ts delete mode 100644 packages/detect-imports/package.json delete mode 100644 packages/detect-imports/src/detect-imports.test.ts delete mode 100644 packages/detect-imports/src/detect-imports.ts delete mode 100644 packages/detect-imports/src/from-jsx-to-ast.ts delete mode 100644 packages/detect-imports/src/index.ts diff --git a/packages/detect-imports/.npmignore b/packages/detect-imports/.npmignore deleted file mode 100644 index 61dd685..0000000 --- a/packages/detect-imports/.npmignore +++ /dev/null @@ -1,9 +0,0 @@ -.DS_Store - -node_modules/ -src/ -.rts2_cache*/ -.cache/ - -*.log -*.test.* diff --git a/packages/detect-imports/README.md b/packages/detect-imports/README.md deleted file mode 100644 index d6fc40b..0000000 --- a/packages/detect-imports/README.md +++ /dev/null @@ -1,58 +0,0 @@ -# TL;DR - -The goal of this library is to detect, in a JS code, the import statements, and parse them. - -This is supposed to be used with MDX 1, so TypeScript is not supposed to be parsed (so syntaxes like `import type` or `import { type A }` won't be supported). - -## How to use: - -### Signature - -```ts -detectImports(code: string): Promise -``` - -### Example - -```js -import { detectImports } from "@blocz/detect-imports"; - -const string = ` -import { a, A as As } from './a'; -import { B, - b } from 'b' - -const nonImport = 'nonImport'; -`; - -await detectImports(string); -// This will return: -// [ -// { -// imports: [ -// { -// imported: "a", -// local: "a", -// }, -// { -// imported: "A", -// local: "As", -// }, -// ], -// module: "./a", -// }, -// { -// imports: [ -// { -// imported: "B", -// local: "B", -// }, -// { -// imported: "b", -// local: "b", -// }, -// ], -// module: "b", -// }, -// ]; -``` diff --git a/packages/detect-imports/acorn-jsx.d.ts b/packages/detect-imports/acorn-jsx.d.ts deleted file mode 100644 index 9519b21..0000000 --- a/packages/detect-imports/acorn-jsx.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module "acorn-jsx" { - import { Parser } from "acorn"; - const jsx: (options?: any) => (BaseParser: typeof Parser) => typeof Parser; - export default jsx; -} diff --git a/packages/detect-imports/package.json b/packages/detect-imports/package.json deleted file mode 100644 index 77ef382..0000000 --- a/packages/detect-imports/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "@blocz/detect-imports", - "version": "0.1.0", - "source": "src/index.ts", - "main": "lib/detect-imports.js", - "module": "lib/detect-imports.module.js", - "exports": { - ".": { - "require": "./lib/detect-imports.js", - "import": "./lib/detect-imports.modern.js", - "browser": "./lib/detect-imports.modern.js" - }, - "./package.json": "./package.json" - }, - "types": "lib/index.d.ts", - "repository": "git@github.com:bloczjs/mdx.git", - "author": "Ayc0 ", - "license": "MIT", - "sideEffects": false, - "publishConfig": { - "access": "public" - }, - "scripts": { - "build": "rm -rf lib/ && microbundle -f modern,esm,cjs" - }, - "devDependencies": { - "microbundle": "^0.14.2" - }, - "dependencies": { - "acorn": "^8.7.0", - "acorn-jsx": "^5.3.2" - } -} diff --git a/packages/detect-imports/src/detect-imports.test.ts b/packages/detect-imports/src/detect-imports.test.ts deleted file mode 100644 index e575910..0000000 --- a/packages/detect-imports/src/detect-imports.test.ts +++ /dev/null @@ -1,122 +0,0 @@ -import { detectImports } from "./detect-imports"; - -describe("Detect imports in JSX", () => { - it("Should detect default imports", async () => { - expect( - await detectImports(` - import A from './a'; - import B - from 'b' - `), - ).toEqual([ - { - imports: [ - { - imported: "default", - local: "A", - }, - ], - module: "./a", - }, - { - imports: [ - { - imported: "default", - local: "B", - }, - ], - module: "b", - }, - ]); - }); - it("Should detect named imports", async () => { - expect( - await detectImports(` - import { a, A as As } from './a'; - import { B, - b } from 'b' - - const nonImport = 'nonImport'; - `), - ).toEqual([ - { - imports: [ - { - imported: "a", - local: "a", - }, - { - imported: "A", - local: "As", - }, - ], - module: "./a", - }, - { - imports: [ - { - imported: "B", - local: "B", - }, - { - imported: "b", - local: "b", - }, - ], - module: "b", - }, - ]); - }); - it("Should detect both default and named imports", async () => { - expect( - await detectImports(` - import a, { A, As as AS } from './a'; - import { B, - default as Bb, - b } from 'b' - `), - ).toEqual([ - { - imports: [ - { - imported: "default", - local: "a", - }, - { - imported: "A", - local: "A", - }, - { - imported: "As", - local: "AS", - }, - ], - module: "./a", - }, - { - imports: [ - { - imported: "B", - local: "B", - }, - { - imported: "default", - local: "Bb", - }, - { - imported: "b", - local: "b", - }, - ], - module: "b", - }, - ]); - }); - it("Should fail", async () => { - expect( - detectImports(` - import b, B from 'b' - `), - ).rejects.toThrowError(); - }); -}); diff --git a/packages/detect-imports/src/detect-imports.ts b/packages/detect-imports/src/detect-imports.ts deleted file mode 100644 index 6e63c23..0000000 --- a/packages/detect-imports/src/detect-imports.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { fromJSXToAst } from "./from-jsx-to-ast"; - -const ImportDeclaration = "ImportDeclaration"; -const ImportSpecifier = "ImportSpecifier"; -const ImportDefaultSpecifier = "ImportDefaultSpecifier"; - -export interface Import { - imported: string; - local: string; -} - -export interface ImportDeclaration { - module: string; - imports: Import[]; -} - -export const detectImports = async (code: string) => { - const ast = await fromJSXToAst(code); - const importDeclarations = ast.body.filter( - (declaration: any) => declaration.type === ImportDeclaration, - ); - return importDeclarations.map((declaration: any) => ({ - module: declaration.source.value, - imports: declaration.specifiers - .map((specifier: any) => { - if (specifier.type === ImportDefaultSpecifier) { - return { - imported: "default", - local: specifier.local.name, - }; - } - if (specifier.type === ImportSpecifier) { - return { - imported: specifier.imported.name, - local: specifier.local.name, - }; - } - return null; - }) - .filter(Boolean), - })) as ImportDeclaration[]; -}; diff --git a/packages/detect-imports/src/from-jsx-to-ast.ts b/packages/detect-imports/src/from-jsx-to-ast.ts deleted file mode 100644 index 633ec50..0000000 --- a/packages/detect-imports/src/from-jsx-to-ast.ts +++ /dev/null @@ -1,12 +0,0 @@ -import jsx from "acorn-jsx"; -import { Parser, Node } from "acorn"; - -interface GeneratedAST extends Node { - body: Node[]; -} - -export const fromJSXToAst = async (code: string) => - Parser.extend(jsx()).parse(code, { - ecmaVersion: "latest", - sourceType: "module", - }) as GeneratedAST; diff --git a/packages/detect-imports/src/index.ts b/packages/detect-imports/src/index.ts deleted file mode 100644 index 0a55603..0000000 --- a/packages/detect-imports/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { detectImports, Import, ImportDeclaration } from "./detect-imports"; From 1197d17329e36c8ecb2f169fd08a4867c0cca6be Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Mon, 7 Feb 2022 18:08:19 +0100 Subject: [PATCH 02/32] [@blocz/mdx-plugin-detect-imports] switch to MDX v2 (and to full ESM instead of CJS) --- .../mdx-plugin-detect-imports/package.json | 7 +- .../mdx-plugin-detect-imports/src/plugin.js | 259 ++++++++++++++---- .../src/plugin.test.js | 61 ++--- .../mdx-plugin-detect-imports/src/types.d.ts | 18 +- 4 files changed, 246 insertions(+), 99 deletions(-) diff --git a/packages/mdx-plugin-detect-imports/package.json b/packages/mdx-plugin-detect-imports/package.json index 7f67cb9..56c6223 100644 --- a/packages/mdx-plugin-detect-imports/package.json +++ b/packages/mdx-plugin-detect-imports/package.json @@ -7,14 +7,15 @@ "author": "Ayc0 ", "license": "MIT", "sideEffects": false, + "type": "module", "publishConfig": { "access": "public" }, "dependencies": { - "@blocz/detect-imports": "workspace:*", - "unist-util-select": "3.0.1" + "unist-util-select": "^4.0.1" }, "devDependencies": { - "@mdx-js/mdx": "^1.6.22" + "@mdx-js/mdx": "^2.0.0", + "ava": "^4.0.1" } } diff --git a/packages/mdx-plugin-detect-imports/src/plugin.js b/packages/mdx-plugin-detect-imports/src/plugin.js index ee6eb1f..1bbb179 100644 --- a/packages/mdx-plugin-detect-imports/src/plugin.js +++ b/packages/mdx-plugin-detect-imports/src/plugin.js @@ -1,59 +1,218 @@ -const { detectImports } = require("@blocz/detect-imports"); -const { selectAll } = require("unist-util-select"); +import { selectAll } from "unist-util-select"; -module.exports = - ({ exportName = "importStatements" } = {}) => - async (tree, file) => { - const imports = selectAll("import", tree); - const importStatementString = imports.map((i) => i.value).join("\n"); +const exportLength = "export ".length; +const exportConstLength = "export const ".length; - const importStatements = await detectImports(importStatementString); - // cannot use JSON.stringify because there are no quotes around `value: ` - const exportedArray = importStatements - .map( - (declaration) => `{ - module: "${declaration.module}", - imports: [ - ${declaration.imports - .map( - (importStatement) => `{ - imported: "${importStatement.imported}", - local: "${importStatement.local}", - value: ${importStatement.local} - }`, - ) - .join(", ")} - ] -}`, - ) - .join(", ") - .replace(/\s+/g, " "); +const generateImportStatements = (tree) => { + const importDeclarations = selectAll("mdxjsEsm", tree) + .flatMap((res) => res.data.estree.body) + .flatMap((res) => selectAll("ImportDeclaration", res)); - const exportTextWithImportStatements = `export const ${exportName} = [${exportedArray}];`; + const importStatements = []; + /** + * Note: we cannot use JSON.stringify because there are no quotes around `value: ` + * So we need to manually build the strings that will be injected in the MDX. + * That's why we use strings in `imports.push(...)` and why we manually do the `.join`s. + */ + for (const importDeclaration of importDeclarations) { + const imports = []; + for (const specifier of importDeclaration.specifiers) { + switch (specifier.type) { + case "ImportNamespaceSpecifier": + imports.push(`{ + kind: "namespace", + local: "${specifier.local.name}", + value: ${specifier.local.name} + }`); + continue; + case "ImportDefaultSpecifier": + imports.push(`{ + kind: "default", + local: "${specifier.local.name}", + value: ${specifier.local.name} + }`); + continue; + case "ImportSpecifier": + imports.push(`{ + kind: "named", + local: "${specifier.local.name}", + value: ${specifier.imported.name} + }`); + continue; + default: + continue; + } + } + // + const importStatement = `{ + module: "${importDeclaration.source.value}", + imports: [${imports.join(", ")}] + }`; + importStatements.push(importStatement); + } - const { line, position } = tree.position.end; + return `[${importStatements.join(", ").replace(/\s+/g, " ")}]`; +}; - // inject export statement - tree.children.push({ - type: "export", - value: exportTextWithImportStatements, - position: { - start: { - line: line + 1, - column: 1, - position: position + 1, - }, - end: { - line: line + 1, - column: 1 + exportTextWithImportStatements.length, - position: - position + 1 + exportTextWithImportStatements.length, +const getExportStatement = ({ line, offset, variableName, value }) => { + const rawCode = `export const ${variableName} = ${value};`; + const variablePlacement = exportConstLength + variableName.length; + const equalPlacement = variablePlacement + 3; + const length = rawCode.length; + const offsetEnd = offset + length; + return { + type: "mdxjsEsm", + value: rawCode, + position: { + start: { + line, + column: 1, + offset: offset, + }, + end: { + line, + column: 1 + length, + offset: offsetEnd, + }, + }, + data: { + estree: { + type: "Program", + start: offset, + end: offsetEnd, + body: [ + { + type: "ExportNamedDeclaration", + start: offset, + end: offsetEnd, + declaration: { + type: "VariableDeclaration", + start: offset + exportLength, + end: offsetEnd, + declarations: [ + { + type: "VariableDeclarator", + start: offset + exportConstLength, + end: offsetEnd - 1, + id: { + type: "Identifier", + start: offset + exportConstLength, + end: + offset + + exportConstLength + + variableName.length, + name: variableName, + loc: { + start: { + line, + column: exportConstLength, + }, + end: { + line, + column: + exportConstLength + + variableName.length, + }, + }, + range: [ + offset + exportConstLength, + offset + variablePlacement, + ], + }, + init: { + type: "Literal", + start: offset + equalPlacement, + end: offsetEnd - 1, + // TODO: use proper `ArrayExpression` and `ObjectExpression` nodes instead of abusing the `Literal` one + value, + raw: value, + loc: { + start: { + line, + column: equalPlacement, + }, + end: { + line, + column: length - 1, + }, + }, + range: [ + offset + equalPlacement, + offsetEnd - 1, + ], + }, + loc: { + start: { + line, + column: exportConstLength, + }, + end: { + line, + column: length - 1, + }, + }, + range: [ + offset + exportConstLength, + offsetEnd - 1, + ], + }, + ], + kind: "const", + loc: { + start: { + line, + column: exportLength, + }, + end: { + line, + column: length, + }, + }, + range: [offset + exportLength, offsetEnd], + }, + specifiers: [], + source: null, + loc: { + start: { + line, + column: 0, + }, + end: { + line, + column: length, + }, + }, + range: [offset, offsetEnd], + }, + ], + sourceType: "module", + comments: [], + loc: { + start: { + line, + column: 0, + }, + end: { + line, + column: length, + }, }, + range: [offset, offsetEnd], }, - }); + }, + }; +}; - // modify end position to include the new export statement - tree.position.end.line = line + 2; - tree.position.end.position = - position + 2 + exportTextWithImportStatements.length; +export default ({ exportName = "importStatements" } = {}) => + (tree, file) => { + const importStatements = generateImportStatements(tree); + const injectedNode = getExportStatement({ + line: tree.position.end.line + 1, + offset: tree.position.end.offset, + variableName: exportName, + value: importStatements, + }); + tree.children.push(injectedNode); + tree.position.end.line = injectedNode.position.end.line; + tree.position.end.position = injectedNode.position.end.position; }; diff --git a/packages/mdx-plugin-detect-imports/src/plugin.test.js b/packages/mdx-plugin-detect-imports/src/plugin.test.js index 68f2921..0231e67 100644 --- a/packages/mdx-plugin-detect-imports/src/plugin.test.js +++ b/packages/mdx-plugin-detect-imports/src/plugin.test.js @@ -1,9 +1,11 @@ -const mdx = require("@mdx-js/mdx"); -const plugin = require("@blocz/mdx-plugin-detect-imports"); +import { compileSync } from "@mdx-js/mdx"; +import plugin from "@blocz/mdx-plugin-detect-imports"; +import test from "ava"; const mdxText = ` -import { useFunction } from '@blocz/lib'; +import hello, { useFunction } from '@blocz/lib'; import { Tabs, Button } from '@blocz/elements'; +import * as foo from '@blocz/foo'; ### How it works @@ -31,7 +33,6 @@ export const props = { }
Hello
Click Me!
World
Click Me!
', - ); - }); +}); + +test("render MDX with export statement", async (t) => { + await act(async () => { + const { container } = await render( + , + ); + await wait(10); + t.is( + ` +
Hello
+
Click Me!
+
World
+
Click Me!
`, + container.innerHTML, + ); }); - it("render MDX with import statement", async () => { - await act(async () => { - const { container } = await render( - , - ); - await wait(10); - expect(container.innerHTML).toBe( - '
Hello
Click Me!
World
Click Me!
', - ); - }); +}); + +test("render MDX with import statement", async (t) => { + await act(async () => { + const { container } = await render( + , + ); + await wait(10); + t.is( + ` +
Hello
+
Click Me!
+
World
+
Click Me!
`, + container.innerHTML, + ); }); }); diff --git a/packages/mdx-live/src/MDX.tsx b/packages/mdx-live/src/MDX.tsx index f2e6a28..878c4d1 100644 --- a/packages/mdx-live/src/MDX.tsx +++ b/packages/mdx-live/src/MDX.tsx @@ -1,85 +1,79 @@ import * as React from "react"; -import * as mdxReact from "@mdx-js/react"; +// import * as mdxReact from "@mdx-js/react"; -import { useMDX, UseMDXParams, UseMDXOut } from "./use-mdx"; -import { compileMDX } from "./compile-mdx"; -import { Variables } from "./resolve-constants"; +import * as ReactRuntime from "react/jsx-runtime.js"; + +import { useMDX } from "./use-mdx.js"; +import type { UseMDXParams, UseMDXOut, ResolveImport } from "./use-mdx"; export type MDXContextType = UseMDXOut; +export type { ResolveImport }; -// @ts-ignore +// @ts-expect-error const DefaultProvider: React.Provider = ({ children }) => ( <>{children} ); -const Runtime: React.FunctionComponent<{ - scope: Variables; - remarkPlugins?: any[]; - rehypePlugins?: any[]; - code: string; -}> = ({ - scope = {}, - remarkPlugins = [], - rehypePlugins = [], - code, - ...props -}) => { - const fullScope = { - ...scope, - mdx: mdxReact.mdx, - MDXProvider: mdxReact.MDXProvider, - components: scope, - props, - }; - - const compiledCode = compileMDX({ - code, - scope, - remarkPlugins: remarkPlugins, - rehypePlugins: rehypePlugins, - }); +class DefaultErrorBoundary extends React.Component<{}, { error?: Error }> { + state: { error?: Error } = {}; - const keys = Object.keys(fullScope); - const values = Object.values(fullScope); + static getDerivedStateFromError(error: Error) { + return { error }; + } - var fn = new Function( - "_fn", - "React", - ...keys, - `${compiledCode}\n\n return React.createElement(MDXProvider, { components },\n React.createElement(MDXContent, props)\n );`, - ); + componentDidUpdate(prevProps: { children: React.ReactNode }) { + if (prevProps.children !== this.props.children) { + // Reset errors when children changes + this.setState({ error: undefined }); + } + } - return fn({}, React, ...values); -}; + render() { + const { error } = this.state; + if (error) { + return null; + } + return this.props.children; + } +} interface MDXProps extends UseMDXParams { Provider?: React.Provider; - remarkPlugins?: any[]; - rehypePlugins?: any[]; + ErrorBoundary?: React.ComponentType<{}>; } export const MDX: React.FunctionComponent = ({ Provider = DefaultProvider, + ErrorBoundary = DefaultErrorBoundary, code, defaultScope, resolveImport, - remarkPlugins, + recmaPlugins, rehypePlugins, + remarkPlugins, }) => { const { scope, text } = useMDX({ code, defaultScope, resolveImport, + recmaPlugins, + rehypePlugins, + remarkPlugins, }); + const Runtime = React.useMemo(() => { + if (!text) { + return () => null; + } + const fn = new Function(text); + return fn(ReactRuntime).default; + }, [text]); + return ( - + + + ); }; diff --git a/packages/mdx-live/src/buble.d.ts b/packages/mdx-live/src/buble.d.ts deleted file mode 100644 index b888d9a..0000000 --- a/packages/mdx-live/src/buble.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare module "buble-jsx-only" { - export * from "buble"; -} diff --git a/packages/mdx-live/src/compile-mdx.test.ts b/packages/mdx-live/src/compile-mdx.test.ts deleted file mode 100644 index b627964..0000000 --- a/packages/mdx-live/src/compile-mdx.test.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { compileMDX } from "./compile-mdx"; - -describe("compile-mdx", () => { - it("works with un-scoped variables", () => { - const unscoped = compileMDX({ - code: "", - scope: {}, - }); - - // Unscoped is flagged as shortcode - expect(unscoped).toContain( - 'const Unscoped = makeShortcode("Unscoped");', - ); - // no import statement - expect(unscoped).not.toContain("import {"); - // still includes the rendered component - expect(unscoped).toContain('mdx( Unscoped, { mdxType: "Unscoped" })'); - }); - - it("works with scoped code", () => { - const scoped = compileMDX({ - code: "", - scope: { Scoped: () => null }, - }); - - // Scoped isn't flagged as shortcode - expect(scoped).not.toContain('const Scoped = makeShortcode("Scoped");'); - // no import statement - expect(scoped).not.toContain("import { Scoped"); - // still includes the rendered component - expect(scoped).toContain('mdx( Scoped, { mdxType: "Scoped" })'); - }); -}); diff --git a/packages/mdx-live/src/compile-mdx.ts b/packages/mdx-live/src/compile-mdx.ts deleted file mode 100644 index 450e8fd..0000000 --- a/packages/mdx-live/src/compile-mdx.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { sync } from "@mdx-js/mdx"; -import { transform } from "buble-jsx-only"; - -export const compileMDX = ({ - scope, - code, - remarkPlugins = [], - rehypePlugins = [], -}: { - scope: Record; - code: string; - remarkPlugins?: any[]; - rehypePlugins?: any[]; -}) => { - const injectedImports = `import { ${Object.keys(scope)} } from '.';\n\n`; - const compiledCode = sync(injectedImports + code, { - remarkPlugins: remarkPlugins, - rehypePlugins: rehypePlugins, - skipExport: true, - }).trim(); - - let transformedCode; - - try { - transformedCode = transform(compiledCode, { - objectAssign: "Object.assign", - }).code; - transformedCode = transformedCode.replace( - /import \{.*?\} from '.';/, - "", - ); - } catch (err) { - console.error(err); - throw err; - } - - return transformedCode; -}; diff --git a/packages/mdx-live/src/index.ts b/packages/mdx-live/src/index.ts index 301fe7d..e6eebcd 100644 --- a/packages/mdx-live/src/index.ts +++ b/packages/mdx-live/src/index.ts @@ -1,2 +1,3 @@ -export { MDX, MDXContextType } from "./MDX"; -export { useMDX } from "./use-mdx"; +export type { MDXContextType, ResolveImport } from "./MDX"; +export { MDX } from "./MDX.js"; +export { useMDX } from "./use-mdx.js"; diff --git a/packages/mdx-live/src/mdx-js.d.ts b/packages/mdx-live/src/mdx-js.d.ts deleted file mode 100644 index 31af0dd..0000000 --- a/packages/mdx-live/src/mdx-js.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module "@mdx-js/mdx"; -declare module "@mdx-js/react"; diff --git a/packages/mdx-live/src/mdx-to-ast.ts b/packages/mdx-live/src/mdx-to-ast.ts deleted file mode 100644 index f8ba9a0..0000000 --- a/packages/mdx-live/src/mdx-to-ast.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { createMdxAstCompiler } from "@mdx-js/mdx"; - -const OPTIONS = { - footnotes: true, - remarkPlugins: [], - rehypePlugins: [], - compilers: [], -}; - -export const transformMDXToAST = async (text: string) => { - try { - return createMdxAstCompiler(OPTIONS).parse(text); - } catch (e) { - return { children: [] }; - } -}; diff --git a/packages/mdx-live/src/parse-exports.ts b/packages/mdx-live/src/parse-exports.ts deleted file mode 100644 index 37e5446..0000000 --- a/packages/mdx-live/src/parse-exports.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { transform } from "buble-jsx-only"; - -const transpile = (text: string) => - transform(text, { - objectAssign: "Object.assign", - transforms: { - computedProperty: false, - conciseMethodProperty: false, - }, - }).code; - -const removeTrailing = (line: string) => line.replace(/;$/, "").trim(); - -/** - * Replace every succession of white spaces by one space except new line - * @param {string} text - * @returns {string} - */ -const removeExtraWhiteSpaces = (text: string) => - removeTrailing(text.replace(/[^\S\r\n]+/g, " ").trim()); - -export const parseExportStatement = (text: string) => { - const textWithoutWhiteSpaces = removeExtraWhiteSpaces(text); - if (!textWithoutWhiteSpaces.startsWith("export const")) { - return undefined; - } - const statement = textWithoutWhiteSpaces.replace("export const ", ""); - const [name] = statement.split("="); - try { - return { name: name.trim(), value: transpile(`const ${statement}`) }; - } catch (error) { - return undefined; - } -}; diff --git a/packages/mdx-live/src/parse-mdx.test.ts b/packages/mdx-live/src/parse-mdx.test.ts deleted file mode 100644 index 67107d3..0000000 --- a/packages/mdx-live/src/parse-mdx.test.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { parseMDX } from "./parse-mdx"; - -describe("Parse MDX", () => { - it("Parse everything", async () => { - const parsed = await parseMDX(` -import { useFunction } from '@blocz/lib'; -import { Tabs, Button } from '@blocz/elements'; - -### How it works - -1. First item -2. Second item - ---- - -### TL;DR - -- First item -- Second item -- Nested list - - First nested \`item\` - - Second _nested_ item - - **Third** nested item - ---- - -export const label = "Click Me!"; - -export const props = { - label, - onClick: () => alert('Hello there!') -} - -