vite-plugin-react-deck 1.0.0

package/codegen.d.ts

@@ -0,0 +1 @@
+export declare function extractMainCodeAsChildren(source: string): string;

package/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare function createIndexFile({ entrypoint }: {
+    entrypoint: string;
+}): string;
+export declare function createAppDeckFile({ slidePath }: {
+    slidePath: string;
+}): string;

package/index.cjs

@@ -0,0 +1,296 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var fs = __toESM(require("fs/promises"), 1);
+
+// src/slides.ts
+var import_gray_matter = __toESM(require("gray-matter"), 1);
+var import_mdx = require("@mdx-js/mdx");
+
+// src/codegen.ts
+function extractMainCodeAsChildren(source) {
+  const start = source.indexOf("const _components = {");
+  const end = source.indexOf("\n}", start);
+  const components = source.slice(start, end);
+  if (!components) {
+    return "";
+  }
+  const withWrapper = components.replace(
+    /};\s*return/gm,
+    "};\n  const {wrapper: MDXLayout} = _components;\nreturn"
+  );
+  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 _jsx(_components",
+    "  return _jsx(MDXLayout, {...props, children: _jsx(_components"
+  ).replace(/}\);$/gm, "})});");
+  return result;
+}
+
+// src/slides.ts
+async function transformSlidesMdxToReact(sourceContent, {
+  production: isProd,
+  ...options
+}) {
+  const { data: metadata, content } = (0, import_gray_matter.default)(sourceContent);
+  const { content: finalContent, inlineModules } = extractInlineModules(
+    normalizeNewline(content)
+  );
+  const slides = finalContent.split("---");
+  const enrichedSlides = [];
+  const LAYOUT_REGEX = /\S*\nlayout: (.*)/g;
+  let frontmatterForNextSlide = null;
+  for (const slide of slides) {
+    if (LAYOUT_REGEX.test(slide)) {
+      frontmatterForNextSlide = (0, import_gray_matter.default)(`---
+${slide}
+---`).data;
+      continue;
+    }
+    enrichedSlides.push({
+      metadata: frontmatterForNextSlide,
+      content: slide
+    });
+    frontmatterForNextSlide = null;
+  }
+  const compiledSlides = await Promise.all(
+    enrichedSlides.map(async (slide) => {
+      const code = addInlineModules(slide.content, inlineModules);
+      const normalizedCode = code.replace("process.env", "process\u200B.env");
+      const result = await (0, import_mdx.compile)(normalizedCode, {
+        outputFormat: "program",
+        jsx: !isProd,
+        providerImportSource: "@mdx-js/react",
+        ...options
+      });
+      const mainCode = extractMainCodeAsChildren(result.value.toString());
+      return {
+        ...slide,
+        mdxContent: mainCode
+      };
+    })
+  );
+  return addInlineModules(
+    `
+import React from 'react';
+${isProd ? 'import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";import {useMDXComponents as _provideComponents} from "@mdx-js/react" ' : "import {useMDXComponents as _provideComponents} from '@mdx-js/react';"}
+  
+export default {
+    metadata: ${JSON.stringify(metadata)},
+    slides: [${compiledSlides.map(
+      (slide) => `{
+        metadata: ${JSON.stringify(slide.metadata)},
+        slideComponent: (baseProps) => {
+          const props = {...baseProps, frontmatter: ${JSON.stringify(
+        slide.metadata
+      )} };
+          ${slide.mdxContent}
+        }
+      }`
+    ).join(",")}
+    ]
+  };`,
+    inlineModules
+  );
+}
+var MOD_REG = /\\`|`(?:\\`|[^`])*`|(^(?:import|export).*$)/gm;
+function extractInlineModules(source, {
+  inlineModules = /* @__PURE__ */ new Set()
+} = {}) {
+  const finalContent = source.replace(MOD_REG, (value, group1) => {
+    if (!group1) {
+      return value;
+    }
+    inlineModules.add(value);
+    return "";
+  });
+  return { content: finalContent, inlineModules };
+}
+function addInlineModules(source, inlineModules) {
+  return `
+${[...inlineModules.keys()].join("\n")}
+
+${source}
+  `;
+}
+var CRLF = "\r\n";
+function normalizeNewline(input) {
+  return input.replace(new RegExp(CRLF, "g"), "\n");
+}
+
+// src/helpers.ts
+function createIndexFile({ entrypoint }) {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+
+    <style>
+      html {
+        --code-preview-background-color: #222;
+      }
+    </style>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${entrypoint}"></script>
+  </body>
+</html>
+`;
+}
+function createAppDeckFile({ slidePath }) {
+  return `import React, { StrictMode } from "react";
+import * as ReactDOM from "react-dom/client";
+import { Deck } from '@gpichot/spectacle-deck';
+
+import deck from "${slidePath}";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <Deck deck={deck} />
+  </StrictMode>
+)`;
+}
+
+// src/index.ts
+var glob = __toESM(require("glob"), 1);
+var import_node_path = __toESM(require("path"), 1);
+async function checkIfDirectoryExists(path2) {
+  try {
+    await fs.access(path2);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var src_default = (options) => {
+  let isProd = false;
+  const deckConfig = {
+    decks: []
+  };
+  return {
+    name: "react-deck",
+    async config(config) {
+      var _a, _b, _c;
+      const decks = await glob.glob("./src/**/deck.mdx");
+      const inputs = ((_b = (_a = config.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
+      deckConfig.decks = decks.map((deck) => ({
+        originalFile: deck,
+        index: deck.replace("/deck.mdx", "/index.html").replace("src/", "")
+      }));
+      const newInputs = decks.reduce((acc, deck) => {
+        const deckPath = deck.replace("/deck.mdx", "");
+        return [...acc, `${deckPath.replace("src/", "")}/index.html`];
+      }, []);
+      const finalInputs = typeof inputs === "string" ? [inputs, ...decks] : Array.isArray(inputs) ? [...inputs, ...decks] : { ...inputs, ...newInputs };
+      return {
+        ...config,
+        build: {
+          ...config.build,
+          rollupOptions: {
+            ...(_c = config.build) == null ? void 0 : _c.rollupOptions,
+            input: finalInputs
+          }
+        }
+      };
+    },
+    configResolved(config) {
+      isProd = config.isProduction;
+    },
+    resolveId(id) {
+      if (deckConfig.decks.some((deck) => deck.index === id)) {
+        return id;
+      }
+      if (id.endsWith("__deck.tsx")) {
+        return id;
+      }
+      if (id.endsWith("deck.mdx")) {
+        return id;
+      }
+    },
+    async load(id) {
+      const deck = deckConfig.decks.find((deck2) => deck2.index === id);
+      if (deck) {
+        return createIndexFile({
+          entrypoint: deck.originalFile.replace("deck.mdx", "__deck.tsx")
+        });
+      }
+      if (id.endsWith("__deck.tsx")) {
+        const directory = id.replace("/__deck.tsx", "");
+        const dir2 = directory.startsWith(".") ? directory : `./${directory}`;
+        const path2 = `${dir2}/deck.mdx`;
+        if (!await checkIfDirectoryExists(path2)) {
+          console.warn(`No deck.mdx file found in ${path2}`);
+          return;
+        }
+        const contentIndex = createAppDeckFile({
+          slidePath: `${directory}/deck.mdx`
+        });
+        return contentIndex;
+      }
+      if (!id.endsWith("deck.mdx"))
+        return;
+      const content = await fs.readFile(id, "utf-8");
+      const data = await transformSlidesMdxToReact(content, {
+        production: isProd,
+        ...options
+      });
+      const dir = import_node_path.default.relative(process.cwd(), id);
+      return data;
+    },
+    transformIndexHtml: {
+      order: "pre",
+      enforce: "pre",
+      transform: async (html, ctx) => {
+        var _a;
+        const originalUrl = ((_a = ctx.originalUrl) == null ? void 0 : _a.split("?")[0]) || "";
+        const deckDir = ctx.path.replace("/index.html", "");
+        const dir = originalUrl ? `./src${originalUrl}` : `.${deckDir}`;
+        const path2 = `${dir}/deck.mdx`;
+        if (!await checkIfDirectoryExists(path2)) {
+          return html.replace("__SCRIPT__", `./src/main.tsx`);
+        }
+        const deckPath = dir.startsWith(".") ? dir : `.${dir}`;
+        return html.replace("__SCRIPT__", `${deckPath}/__deck.tsx`);
+      }
+    }
+  };
+};
+
+// <stdin>
+module.exports = src_default;
+module.exports.default = src_default;

package/index.d.ts

@@ -0,0 +1,4 @@
+import { PluginOption } from "vite";
+import { ReactDeckOptions } from "./types";
+declare const _default: (options: ReactDeckOptions) => PluginOption;
+export default _default;

package/index.mjs

@@ -0,0 +1,272 @@
+// src/index.ts
+import * as fs from "fs/promises";
+
+// src/slides.ts
+import matter from "gray-matter";
+import { compile } from "@mdx-js/mdx";
+
+// src/codegen.ts
+function extractMainCodeAsChildren(source) {
+  const start = source.indexOf("const _components = {");
+  const end = source.indexOf("\n}", start);
+  const components = source.slice(start, end);
+  if (!components) {
+    return "";
+  }
+  const withWrapper = components.replace(
+    /};\s*return/gm,
+    "};\n  const {wrapper: MDXLayout} = _components;\nreturn"
+  );
+  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 _jsx(_components",
+    "  return _jsx(MDXLayout, {...props, children: _jsx(_components"
+  ).replace(/}\);$/gm, "})});");
+  return result;
+}
+
+// src/slides.ts
+async function transformSlidesMdxToReact(sourceContent, {
+  production: isProd,
+  ...options
+}) {
+  const { data: metadata, content } = matter(sourceContent);
+  const { content: finalContent, inlineModules } = extractInlineModules(
+    normalizeNewline(content)
+  );
+  const slides = finalContent.split("---");
+  const enrichedSlides = [];
+  const LAYOUT_REGEX = /\S*\nlayout: (.*)/g;
+  let frontmatterForNextSlide = null;
+  for (const slide of slides) {
+    if (LAYOUT_REGEX.test(slide)) {
+      frontmatterForNextSlide = matter(`---
+${slide}
+---`).data;
+      continue;
+    }
+    enrichedSlides.push({
+      metadata: frontmatterForNextSlide,
+      content: slide
+    });
+    frontmatterForNextSlide = null;
+  }
+  const compiledSlides = await Promise.all(
+    enrichedSlides.map(async (slide) => {
+      const code = addInlineModules(slide.content, inlineModules);
+      const normalizedCode = code.replace("process.env", "process\u200B.env");
+      const result = await compile(normalizedCode, {
+        outputFormat: "program",
+        jsx: !isProd,
+        providerImportSource: "@mdx-js/react",
+        ...options
+      });
+      const mainCode = extractMainCodeAsChildren(result.value.toString());
+      return {
+        ...slide,
+        mdxContent: mainCode
+      };
+    })
+  );
+  return addInlineModules(
+    `
+import React from 'react';
+${isProd ? 'import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";import {useMDXComponents as _provideComponents} from "@mdx-js/react" ' : "import {useMDXComponents as _provideComponents} from '@mdx-js/react';"}
+  
+export default {
+    metadata: ${JSON.stringify(metadata)},
+    slides: [${compiledSlides.map(
+      (slide) => `{
+        metadata: ${JSON.stringify(slide.metadata)},
+        slideComponent: (baseProps) => {
+          const props = {...baseProps, frontmatter: ${JSON.stringify(
+        slide.metadata
+      )} };
+          ${slide.mdxContent}
+        }
+      }`
+    ).join(",")}
+    ]
+  };`,
+    inlineModules
+  );
+}
+var MOD_REG = /\\`|`(?:\\`|[^`])*`|(^(?:import|export).*$)/gm;
+function extractInlineModules(source, {
+  inlineModules = /* @__PURE__ */ new Set()
+} = {}) {
+  const finalContent = source.replace(MOD_REG, (value, group1) => {
+    if (!group1) {
+      return value;
+    }
+    inlineModules.add(value);
+    return "";
+  });
+  return { content: finalContent, inlineModules };
+}
+function addInlineModules(source, inlineModules) {
+  return `
+${[...inlineModules.keys()].join("\n")}
+
+${source}
+  `;
+}
+var CRLF = "\r\n";
+function normalizeNewline(input) {
+  return input.replace(new RegExp(CRLF, "g"), "\n");
+}
+
+// src/helpers.ts
+function createIndexFile({ entrypoint }) {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+
+    <style>
+      html {
+        --code-preview-background-color: #222;
+      }
+    </style>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${entrypoint}"></script>
+  </body>
+</html>
+`;
+}
+function createAppDeckFile({ slidePath }) {
+  return `import React, { StrictMode } from "react";
+import * as ReactDOM from "react-dom/client";
+import { Deck } from '@gpichot/spectacle-deck';
+
+import deck from "${slidePath}";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <Deck deck={deck} />
+  </StrictMode>
+)`;
+}
+
+// src/index.ts
+import * as glob from "glob";
+import path from "path";
+async function checkIfDirectoryExists(path2) {
+  try {
+    await fs.access(path2);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var src_default = (options) => {
+  let isProd = false;
+  const deckConfig = {
+    decks: []
+  };
+  return {
+    name: "react-deck",
+    async config(config) {
+      var _a, _b, _c;
+      const decks = await glob.glob("./src/**/deck.mdx");
+      const inputs = ((_b = (_a = config.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
+      deckConfig.decks = decks.map((deck) => ({
+        originalFile: deck,
+        index: deck.replace("/deck.mdx", "/index.html").replace("src/", "")
+      }));
+      const newInputs = decks.reduce((acc, deck) => {
+        const deckPath = deck.replace("/deck.mdx", "");
+        return [...acc, `${deckPath.replace("src/", "")}/index.html`];
+      }, []);
+      const finalInputs = typeof inputs === "string" ? [inputs, ...decks] : Array.isArray(inputs) ? [...inputs, ...decks] : { ...inputs, ...newInputs };
+      return {
+        ...config,
+        build: {
+          ...config.build,
+          rollupOptions: {
+            ...(_c = config.build) == null ? void 0 : _c.rollupOptions,
+            input: finalInputs
+          }
+        }
+      };
+    },
+    configResolved(config) {
+      isProd = config.isProduction;
+    },
+    resolveId(id) {
+      if (deckConfig.decks.some((deck) => deck.index === id)) {
+        return id;
+      }
+      if (id.endsWith("__deck.tsx")) {
+        return id;
+      }
+      if (id.endsWith("deck.mdx")) {
+        return id;
+      }
+    },
+    async load(id) {
+      const deck = deckConfig.decks.find((deck2) => deck2.index === id);
+      if (deck) {
+        return createIndexFile({
+          entrypoint: deck.originalFile.replace("deck.mdx", "__deck.tsx")
+        });
+      }
+      if (id.endsWith("__deck.tsx")) {
+        const directory = id.replace("/__deck.tsx", "");
+        const dir2 = directory.startsWith(".") ? directory : `./${directory}`;
+        const path2 = `${dir2}/deck.mdx`;
+        if (!await checkIfDirectoryExists(path2)) {
+          console.warn(`No deck.mdx file found in ${path2}`);
+          return;
+        }
+        const contentIndex = createAppDeckFile({
+          slidePath: `${directory}/deck.mdx`
+        });
+        return contentIndex;
+      }
+      if (!id.endsWith("deck.mdx"))
+        return;
+      const content = await fs.readFile(id, "utf-8");
+      const data = await transformSlidesMdxToReact(content, {
+        production: isProd,
+        ...options
+      });
+      const dir = path.relative(process.cwd(), id);
+      return data;
+    },
+    transformIndexHtml: {
+      order: "pre",
+      enforce: "pre",
+      transform: async (html, ctx) => {
+        var _a;
+        const originalUrl = ((_a = ctx.originalUrl) == null ? void 0 : _a.split("?")[0]) || "";
+        const deckDir = ctx.path.replace("/index.html", "");
+        const dir = originalUrl ? `./src${originalUrl}` : `.${deckDir}`;
+        const path2 = `${dir}/deck.mdx`;
+        if (!await checkIfDirectoryExists(path2)) {
+          return html.replace("__SCRIPT__", `./src/main.tsx`);
+        }
+        const deckPath = dir.startsWith(".") ? dir : `.${dir}`;
+        return html.replace("__SCRIPT__", `${deckPath}/__deck.tsx`);
+      }
+    }
+  };
+};
+export {
+  src_default as default
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vite-plugin-react-deck",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "index.cjs",
+  "types": "index.d.ts",
+  "module": "index.mjs",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./index.cjs",
+      "import": "./index.mjs"
+    }
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "react",
+    "swc",
+    "react-refresh",
+    "fast refresh"
+  ],
+  "dependencies": {
+    "@mdx-js/mdx": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "glob": "^10.3.10",
+    "gray-matter": "^4.0.3"
+  }
+}

package/slides.d.ts

@@ -0,0 +1,35 @@
+import { ReactDeckOptions } from "./types";
+type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins">;
+/**
+ * Slides are separated by "---" in the markdown file.
+ *
+ * A file can use frontmatter to specify the title of the slide and internal
+ * frontmatter to specify layout like this :
+ *
+ * ---
+ *
+ * layout: main
+ *
+ * ---
+ *
+ * # Slide 1
+ *
+ * ---
+ *
+ * layout: slide2
+ *
+ * ---
+ *
+ * # Slide 2
+ *
+ */
+export declare function transformSlidesMdxToReact(sourceContent: string, { production: isProd, ...options }: {
+    production: boolean;
+} & CompileOptions): Promise<string>;
+export declare function extractInlineModules(source: string, { inlineModules, }?: {
+    inlineModules?: Set<string>;
+}): {
+    content: string;
+    inlineModules: Set<string>;
+};
+export {};

package/types.d.ts

@@ -0,0 +1,3 @@
+export type ReactDeckOptions = {
+    rehypePlugins: any[];
+};