vite-plugin-react-deck 1.0.3 → 1.0.5

package/codegen.d.ts

@@ -1 +1 @@
-export declare function extractMainCodeAsChildren(source: string): string;
+export declare function extractMainCodeAsChildren(source: string): Promise<string>;

package/index.cjs

@@ -29,29 +29,34 @@ var import_gray_matter = __toESM(require("gray-matter"), 1);
 var import_mdx = require("@mdx-js/mdx");
 
 // src/codegen.ts
-function extractMainCodeAsChildren(source) {
+var import_core = __toESM(require("@swc/core"), 1);
+function findMainFunction(program) {
+  for (const statement of program.body) {
+    if (statement.type === "FunctionDeclaration") {
+      return statement;
+    }
+  }
+}
+async function extractMainCodeAsChildren(source) {
   const start = source.indexOf("const _components = {");
   const end = source.indexOf("\n}", start);
   const components = source.slice(start, end);
+  const code = await import_core.default.parse(source);
+  const mainFunction = findMainFunction(code);
+  const extractedFunction = await import_core.default.print({ type: "Module", body: [mainFunction], span: { start: 0, end: 1e3, ctxt: 0 }, interpreter: null });
+  const body = extractedFunction.code.split("\n").slice(1, -2).join("\n");
   if (!components) {
     return "";
   }
-  const withWrapper = components.replace(
+  const withWrapper = body.replace(
     /};\s*return/gm,
-    "};\n  const {wrapper: MDXLayout} = _components;\nreturn"
+    "};\n  const {wrapper: MDXLayout} = _components;\nconst _content ="
   );
-  const hasLayout = withWrapper.match(/\n\s*return (<>|_jsxs\(_Fragment)/gm);
-  if (hasLayout) {
-    return withWrapper.replace(/\n\s*return <>/gm, "\nreturn <MDXLayout {...props}>").replace(/<\/>;\s*$/gm, "</MDXLayout>;\n").replace(
-      /return _jsxs?\(_Fragment, \{/,
-      "  return _jsx(MDXLayout, {...props,"
-    );
-  }
-  const result = withWrapper.replace(/\n\s*return\s*</gm, "\nreturn <MDXLayout {...props}><").replace(/>;\s*$/gm, "></MDXLayout>;\n").replace(
-    /return _jsxs?\(_components/gm,
-    "  return _jsx(MDXLayout, {...props, children: _jsx(_components"
-  ).replace(/}\);$/gm, "})});");
-  return result;
+  return `${withWrapper}
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: content
+  }) : content;`;
 }
 
 // src/slides.ts
@@ -82,7 +87,7 @@ ${slide}
     frontmatterForNextSlide = null;
   }
   const compiledSlides = await Promise.all(
-    enrichedSlides.map(async (slide) => {
+    enrichedSlides.map(async (slide, index) => {
       const code = addInlineModules(slide.content, inlineModules);
       const normalizedCode = code.replace("process.env", "process\u200B.env");
       const result = await (0, import_mdx.compile)(normalizedCode, {
@@ -92,7 +97,7 @@ ${slide}
         remarkPlugins: [import_remark_gfm.default],
         ...options
       });
-      const mainCode = extractMainCodeAsChildren(result.value.toString());
+      const mainCode = await extractMainCodeAsChildren(result.value.toString());
       return {
         ...slide,
         mdxContent: mainCode
@@ -271,8 +276,9 @@ var src_default = (options) => {
         });
         return contentIndex;
       }
-      if (!id.endsWith("deck.mdx"))
+      if (!id.endsWith("deck.mdx")) {
         return;
+      }
       const content = await fs.readFile(id, "utf-8");
       const data = await transformSlidesMdxToReact(content, {
         production: isProd,

package/index.mjs

@@ -6,29 +6,34 @@ import matter from "gray-matter";
 import { compile } from "@mdx-js/mdx";
 
 // src/codegen.ts
-function extractMainCodeAsChildren(source) {
+import swc from "@swc/core";
+function findMainFunction(program) {
+  for (const statement of program.body) {
+    if (statement.type === "FunctionDeclaration") {
+      return statement;
+    }
+  }
+}
+async function extractMainCodeAsChildren(source) {
   const start = source.indexOf("const _components = {");
   const end = source.indexOf("\n}", start);
   const components = source.slice(start, end);
+  const code = await swc.parse(source);
+  const mainFunction = findMainFunction(code);
+  const extractedFunction = await swc.print({ type: "Module", body: [mainFunction], span: { start: 0, end: 1e3, ctxt: 0 }, interpreter: null });
+  const body = extractedFunction.code.split("\n").slice(1, -2).join("\n");
   if (!components) {
     return "";
   }
-  const withWrapper = components.replace(
+  const withWrapper = body.replace(
     /};\s*return/gm,
-    "};\n  const {wrapper: MDXLayout} = _components;\nreturn"
+    "};\n  const {wrapper: MDXLayout} = _components;\nconst _content ="
   );
-  const hasLayout = withWrapper.match(/\n\s*return (<>|_jsxs\(_Fragment)/gm);
-  if (hasLayout) {
-    return withWrapper.replace(/\n\s*return <>/gm, "\nreturn <MDXLayout {...props}>").replace(/<\/>;\s*$/gm, "</MDXLayout>;\n").replace(
-      /return _jsxs?\(_Fragment, \{/,
-      "  return _jsx(MDXLayout, {...props,"
-    );
-  }
-  const result = withWrapper.replace(/\n\s*return\s*</gm, "\nreturn <MDXLayout {...props}><").replace(/>;\s*$/gm, "></MDXLayout>;\n").replace(
-    /return _jsxs?\(_components/gm,
-    "  return _jsx(MDXLayout, {...props, children: _jsx(_components"
-  ).replace(/}\);$/gm, "})});");
-  return result;
+  return `${withWrapper}
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: content
+  }) : content;`;
 }
 
 // src/slides.ts
@@ -59,7 +64,7 @@ ${slide}
     frontmatterForNextSlide = null;
   }
   const compiledSlides = await Promise.all(
-    enrichedSlides.map(async (slide) => {
+    enrichedSlides.map(async (slide, index) => {
       const code = addInlineModules(slide.content, inlineModules);
       const normalizedCode = code.replace("process.env", "process\u200B.env");
       const result = await compile(normalizedCode, {
@@ -69,7 +74,7 @@ ${slide}
         remarkPlugins: [remarkGfm],
         ...options
       });
-      const mainCode = extractMainCodeAsChildren(result.value.toString());
+      const mainCode = await extractMainCodeAsChildren(result.value.toString());
       return {
         ...slide,
         mdxContent: mainCode
@@ -248,8 +253,9 @@ var src_default = (options) => {
         });
         return contentIndex;
       }
-      if (!id.endsWith("deck.mdx"))
+      if (!id.endsWith("deck.mdx")) {
         return;
+      }
       const content = await fs.readFile(id, "utf-8");
       const data = await transformSlidesMdxToReact(content, {
         production: isProd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-deck",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",
@@ -24,6 +24,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@swc/core": "^1.4.1",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
     "remark-gfm": "^4.0.0"