vite-plugin-react-deck 1.0.7 → 1.1.0

package/config.d.ts

@@ -0,0 +1,13 @@
+import { PestacleConfig } from "./types";
+/**
+ * Allow to type the config object (similar to Vite's defineConfig)
+ */
+export declare function defineConfig(config: PestacleConfig): PestacleConfig;
+/**
+ * Create a default config object
+ */
+export declare function createDefaultConfig(): PestacleConfig;
+/**
+ * Load the config file from the project root
+ */
+export declare function loadConfigFile(): Promise<PestacleConfig>;

package/helpers.d.ts

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

package/index.cjs

@@ -4,6 +4,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -26,17 +30,16 @@ var fs2 = __toESM(require("fs/promises"), 1);
 
 // src/slides.ts
 var import_gray_matter = __toESM(require("gray-matter"), 1);
+var import_remark_directive = __toESM(require("remark-directive"), 1);
 var import_fs = __toESM(require("fs"), 1);
 var import_mdx = require("@mdx-js/mdx");
 
 // src/codegen.ts
 var Patterns = {
-  FragmentProd: /_jsxs\(_Fragment, {\s*children:|\s*\}\);/g,
-  FragmentDev: /<>\s*|\s*<\/>;\s*$/g
+  FragmentProd: /^\s*_jsxs\(_Fragment, {\s*children:|\s*\}\);/g,
+  FragmentDev: /^\s*<>\s*|\s*<\/>;\s*$/g
 };
-function extractMainCodeAsChildren(source, {
-  isJsx
-}) {
+function extractMainCodeAsChildren(source, { isJsx }) {
   const start = source.indexOf("const _components = {");
   const end = source.indexOf("\n}", start);
   const components = source.slice(start, end);
@@ -48,13 +51,13 @@ function extractMainCodeAsChildren(source, {
   const header = lines.slice(0, returnPos).join("\n");
   const footer = lines.slice(returnPos).join("\n").replace("return", "");
   if (isJsx) {
-    const finalFooter2 = footer.replace(Patterns.FragmentDev, "");
+    const finalFooter2 = footer.replace(Patterns.FragmentDev, " ").replace(/;$/, "");
     return `${header}
   const {wrapper: MDXLayout} = _components;
   return <MDXLayout {...props}>${finalFooter2}</MDXLayout>;
   `.trim();
   }
-  const finalFooter = footer.match(/^\s*_jsxs?\(_Fragment,/gm) ? footer.replace(Patterns.FragmentProd, "") : footer;
+  const finalFooter = footer.match(/^\s*_jsxs?\(_Fragment,/gm) ? footer.replace(Patterns.FragmentProd, " ") : footer;
   return `
 ${header}
   const _content = ${finalFooter};
@@ -68,6 +71,20 @@ ${header}
 
 // src/slides.ts
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_unist_util_visit = require("unist-util-visit");
+function myRemarkPlugin() {
+  return (tree) => {
+    (0, import_unist_util_visit.visit)(tree, (node) => {
+      if (node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective") {
+        const data = node.data || (node.data = {});
+        data.hName = "directive";
+        data.hProperties = node.attributes;
+        data.hProperties._name = node.name;
+        data.hProperties._kind = node.type;
+      }
+    });
+  };
+}
 async function transformSlidesMdxToReact(sourceContent, {
   production: isProd,
   ...options
@@ -101,8 +118,13 @@ ${slide}
         outputFormat: "program",
         jsx: !isProd,
         providerImportSource: "@mdx-js/react",
-        remarkPlugins: [import_remark_gfm.default],
-        ...options
+        ...options,
+        remarkPlugins: [
+          import_remark_gfm.default,
+          import_remark_directive.default,
+          myRemarkPlugin,
+          ...options.remarkPlugins
+        ]
       });
       const mainCode = extractMainCodeAsChildren(result.value.toString(), {
         isJsx: !isProd
@@ -169,6 +191,42 @@ function normalizeNewline(input) {
   return input.replace(new RegExp(CRLF, "g"), "\n");
 }
 
+// src/themes/index.ts
+var themes_exports = {};
+__export(themes_exports, {
+  green: () => green_exports,
+  purple: () => purple_exports
+});
+
+// src/themes/green.ts
+var green_exports = {};
+__export(green_exports, {
+  themeTokens: () => themeTokens
+});
+var colors = {
+  primary: "#FFFFFF",
+  secondary: "#F49676",
+  tertiary: "#042F3B"
+};
+var themeTokens = {
+  colors
+};
+
+// src/themes/purple.ts
+var purple_exports = {};
+__export(purple_exports, {
+  themeTokens: () => themeTokens2
+});
+var colors2 = {
+  //primary: "#56D4F8",
+  primary: "#ffffff",
+  secondary: "#F530EC",
+  tertiary: "#2B135A"
+};
+var themeTokens2 = {
+  colors: colors2
+};
+
 // src/helpers.ts
 function createIndexFile({ entrypoint }) {
   return `<!DOCTYPE html>
@@ -193,10 +251,19 @@ function createIndexFile({ entrypoint }) {
 </html>
 `;
 }
-function createAppDeckFile({ slidePath }) {
+function createAppDeckFile({
+  slidePath,
+  theme,
+  config
+}) {
+  if (!themes_exports[theme]) {
+    throw new Error(`Theme ${theme} not found`);
+  }
+  const themeObject = themes_exports[theme];
   return `import React, { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { Deck } from '@gpichot/spectacle-deck';
+import layouts from "${config.layoutsFile}";
 
 import deck from "${slidePath}";
 
@@ -205,7 +272,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <StrictMode>
-    <Deck deck={deck} />
+    <Deck deck={deck} theme={${JSON.stringify(themeObject)}} layouts={layouts} />
   </StrictMode>
 )`;
 }
@@ -213,6 +280,17 @@ root.render(
 // src/index.ts
 var glob = __toESM(require("glob"), 1);
 var import_node_path = __toESM(require("path"), 1);
+
+// src/config.ts
+var import_lodash = __toESM(require("lodash"), 1);
+
+// src/types.ts
+var import_zod = require("zod");
+var PestacleConfigSchema = import_zod.z.object({
+  theme: import_zod.z.enum(["green", "purple"]).default("green")
+});
+
+// src/index.ts
 async function checkIfDirectoryExists(path2) {
   try {
     await fs2.access(path2);
@@ -221,17 +299,44 @@ async function checkIfDirectoryExists(path2) {
     return false;
   }
 }
-var src_default = (options) => {
+async function findDecks({ port }) {
+  const decks = await glob.glob("./src/**/deck.mdx");
+  return decks.map((deck) => ({
+    deckFile: deck,
+    deckUrl: `http://localhost:${port}/${deck.replace("src/", "").replace("deck.mdx", "")}`
+  }));
+}
+async function fileExists(name, path2) {
+  const candidateExts = [".ts", ".tsx", ".js", ".jsx"];
+  for await (const ext of candidateExts) {
+    const fullPath = `${path2}${ext}`;
+    try {
+      await fs2.access(fullPath);
+      return fullPath.replace(/^\./, "");
+    } catch {
+      continue;
+    }
+  }
+}
+async function loadCustomConfig() {
+  const layoutsFile = await fileExists("layouts", "./pestacle/layouts");
+  return {
+    layoutsFile
+  };
+}
+var src_default = async (options) => {
+  const config = await loadCustomConfig();
+  console.log(config);
   let isProd = false;
   const deckConfig = {
     decks: []
   };
   return {
     name: "react-deck",
-    async config(config) {
+    async config(config2) {
       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) || {};
+      const inputs = ((_b = (_a = config2.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/", "")
@@ -242,18 +347,18 @@ var src_default = (options) => {
       }, []);
       const finalInputs = typeof inputs === "string" ? [inputs, ...decks] : Array.isArray(inputs) ? [...inputs, ...decks] : { ...inputs, ...newInputs };
       return {
-        ...config,
+        ...config2,
         build: {
-          ...config.build,
+          ...config2.build,
           rollupOptions: {
-            ...(_c = config.build) == null ? void 0 : _c.rollupOptions,
+            ...(_c = config2.build) == null ? void 0 : _c.rollupOptions,
             input: finalInputs
           }
         }
       };
     },
-    configResolved(config) {
-      isProd = config.isProduction;
+    configResolved(config2) {
+      isProd = config2.isProduction;
     },
     resolveId(id) {
       if (deckConfig.decks.some((deck) => deck.index === id)) {
@@ -282,8 +387,11 @@ var src_default = (options) => {
           return;
         }
         const contentIndex = createAppDeckFile({
-          slidePath: `${directory}/deck.mdx`
+          slidePath: `${directory}/deck.mdx`,
+          theme: options.theme,
+          config
         });
+        console.log({ contentIndex });
         return contentIndex;
       }
       if (!id.endsWith("deck.mdx")) {
@@ -312,6 +420,16 @@ var src_default = (options) => {
         const deckPath = dir.startsWith(".") ? dir : `.${dir}`;
         return html.replace("__SCRIPT__", `${deckPath}/__deck.tsx`);
       }
+    },
+    configureServer(server) {
+      var _a;
+      (_a = server.httpServer) == null ? void 0 : _a.once("listening", async () => {
+        const port = server.config.server.port || 5173;
+        const decks = await findDecks({ port });
+        for (const deck of decks) {
+          console.log(`Deck available at ${deck.deckUrl}`);
+        }
+      });
     }
   };
 };

package/index.d.ts

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

package/index.mjs

@@ -1,19 +1,24 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
 // src/index.ts
 import * as fs2 from "fs/promises";
 
 // src/slides.ts
 import matter from "gray-matter";
+import remarkDirective from "remark-directive";
 import fs from "fs";
 import { compile } from "@mdx-js/mdx";
 
 // src/codegen.ts
 var Patterns = {
-  FragmentProd: /_jsxs\(_Fragment, {\s*children:|\s*\}\);/g,
-  FragmentDev: /<>\s*|\s*<\/>;\s*$/g
+  FragmentProd: /^\s*_jsxs\(_Fragment, {\s*children:|\s*\}\);/g,
+  FragmentDev: /^\s*<>\s*|\s*<\/>;\s*$/g
 };
-function extractMainCodeAsChildren(source, {
-  isJsx
-}) {
+function extractMainCodeAsChildren(source, { isJsx }) {
   const start = source.indexOf("const _components = {");
   const end = source.indexOf("\n}", start);
   const components = source.slice(start, end);
@@ -25,13 +30,13 @@ function extractMainCodeAsChildren(source, {
   const header = lines.slice(0, returnPos).join("\n");
   const footer = lines.slice(returnPos).join("\n").replace("return", "");
   if (isJsx) {
-    const finalFooter2 = footer.replace(Patterns.FragmentDev, "");
+    const finalFooter2 = footer.replace(Patterns.FragmentDev, " ").replace(/;$/, "");
     return `${header}
   const {wrapper: MDXLayout} = _components;
   return <MDXLayout {...props}>${finalFooter2}</MDXLayout>;
   `.trim();
   }
-  const finalFooter = footer.match(/^\s*_jsxs?\(_Fragment,/gm) ? footer.replace(Patterns.FragmentProd, "") : footer;
+  const finalFooter = footer.match(/^\s*_jsxs?\(_Fragment,/gm) ? footer.replace(Patterns.FragmentProd, " ") : footer;
   return `
 ${header}
   const _content = ${finalFooter};
@@ -45,6 +50,20 @@ ${header}
 
 // src/slides.ts
 import remarkGfm from "remark-gfm";
+import { visit } from "unist-util-visit";
+function myRemarkPlugin() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective") {
+        const data = node.data || (node.data = {});
+        data.hName = "directive";
+        data.hProperties = node.attributes;
+        data.hProperties._name = node.name;
+        data.hProperties._kind = node.type;
+      }
+    });
+  };
+}
 async function transformSlidesMdxToReact(sourceContent, {
   production: isProd,
   ...options
@@ -78,8 +97,13 @@ ${slide}
         outputFormat: "program",
         jsx: !isProd,
         providerImportSource: "@mdx-js/react",
-        remarkPlugins: [remarkGfm],
-        ...options
+        ...options,
+        remarkPlugins: [
+          remarkGfm,
+          remarkDirective,
+          myRemarkPlugin,
+          ...options.remarkPlugins
+        ]
       });
       const mainCode = extractMainCodeAsChildren(result.value.toString(), {
         isJsx: !isProd
@@ -146,6 +170,42 @@ function normalizeNewline(input) {
   return input.replace(new RegExp(CRLF, "g"), "\n");
 }
 
+// src/themes/index.ts
+var themes_exports = {};
+__export(themes_exports, {
+  green: () => green_exports,
+  purple: () => purple_exports
+});
+
+// src/themes/green.ts
+var green_exports = {};
+__export(green_exports, {
+  themeTokens: () => themeTokens
+});
+var colors = {
+  primary: "#FFFFFF",
+  secondary: "#F49676",
+  tertiary: "#042F3B"
+};
+var themeTokens = {
+  colors
+};
+
+// src/themes/purple.ts
+var purple_exports = {};
+__export(purple_exports, {
+  themeTokens: () => themeTokens2
+});
+var colors2 = {
+  //primary: "#56D4F8",
+  primary: "#ffffff",
+  secondary: "#F530EC",
+  tertiary: "#2B135A"
+};
+var themeTokens2 = {
+  colors: colors2
+};
+
 // src/helpers.ts
 function createIndexFile({ entrypoint }) {
   return `<!DOCTYPE html>
@@ -170,10 +230,19 @@ function createIndexFile({ entrypoint }) {
 </html>
 `;
 }
-function createAppDeckFile({ slidePath }) {
+function createAppDeckFile({
+  slidePath,
+  theme,
+  config
+}) {
+  if (!themes_exports[theme]) {
+    throw new Error(`Theme ${theme} not found`);
+  }
+  const themeObject = themes_exports[theme];
   return `import React, { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { Deck } from '@gpichot/spectacle-deck';
+import layouts from "${config.layoutsFile}";
 
 import deck from "${slidePath}";
 
@@ -182,7 +251,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <StrictMode>
-    <Deck deck={deck} />
+    <Deck deck={deck} theme={${JSON.stringify(themeObject)}} layouts={layouts} />
   </StrictMode>
 )`;
 }
@@ -190,6 +259,22 @@ root.render(
 // src/index.ts
 import * as glob from "glob";
 import path from "path";
+
+// src/config.ts
+import _ from "lodash";
+
+// src/types.ts
+import { z } from "zod";
+var PestacleConfigSchema = z.object({
+  theme: z.enum(["green", "purple"]).default("green")
+});
+
+// src/config.ts
+function defineConfig(config) {
+  return config;
+}
+
+// src/index.ts
 async function checkIfDirectoryExists(path2) {
   try {
     await fs2.access(path2);
@@ -198,17 +283,44 @@ async function checkIfDirectoryExists(path2) {
     return false;
   }
 }
-var src_default = (options) => {
+async function findDecks({ port }) {
+  const decks = await glob.glob("./src/**/deck.mdx");
+  return decks.map((deck) => ({
+    deckFile: deck,
+    deckUrl: `http://localhost:${port}/${deck.replace("src/", "").replace("deck.mdx", "")}`
+  }));
+}
+async function fileExists(name, path2) {
+  const candidateExts = [".ts", ".tsx", ".js", ".jsx"];
+  for await (const ext of candidateExts) {
+    const fullPath = `${path2}${ext}`;
+    try {
+      await fs2.access(fullPath);
+      return fullPath.replace(/^\./, "");
+    } catch {
+      continue;
+    }
+  }
+}
+async function loadCustomConfig() {
+  const layoutsFile = await fileExists("layouts", "./pestacle/layouts");
+  return {
+    layoutsFile
+  };
+}
+var src_default = async (options) => {
+  const config = await loadCustomConfig();
+  console.log(config);
   let isProd = false;
   const deckConfig = {
     decks: []
   };
   return {
     name: "react-deck",
-    async config(config) {
+    async config(config2) {
       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) || {};
+      const inputs = ((_b = (_a = config2.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/", "")
@@ -219,18 +331,18 @@ var src_default = (options) => {
       }, []);
       const finalInputs = typeof inputs === "string" ? [inputs, ...decks] : Array.isArray(inputs) ? [...inputs, ...decks] : { ...inputs, ...newInputs };
       return {
-        ...config,
+        ...config2,
         build: {
-          ...config.build,
+          ...config2.build,
           rollupOptions: {
-            ...(_c = config.build) == null ? void 0 : _c.rollupOptions,
+            ...(_c = config2.build) == null ? void 0 : _c.rollupOptions,
             input: finalInputs
           }
         }
       };
     },
-    configResolved(config) {
-      isProd = config.isProduction;
+    configResolved(config2) {
+      isProd = config2.isProduction;
     },
     resolveId(id) {
       if (deckConfig.decks.some((deck) => deck.index === id)) {
@@ -259,8 +371,11 @@ var src_default = (options) => {
           return;
         }
         const contentIndex = createAppDeckFile({
-          slidePath: `${directory}/deck.mdx`
+          slidePath: `${directory}/deck.mdx`,
+          theme: options.theme,
+          config
         });
+        console.log({ contentIndex });
         return contentIndex;
       }
       if (!id.endsWith("deck.mdx")) {
@@ -289,9 +404,20 @@ var src_default = (options) => {
         const deckPath = dir.startsWith(".") ? dir : `.${dir}`;
         return html.replace("__SCRIPT__", `${deckPath}/__deck.tsx`);
       }
+    },
+    configureServer(server) {
+      var _a;
+      (_a = server.httpServer) == null ? void 0 : _a.once("listening", async () => {
+        const port = server.config.server.port || 5173;
+        const decks = await findDecks({ port });
+        for (const deck of decks) {
+          console.log(`Deck available at ${deck.deckUrl}`);
+        }
+      });
     }
   };
 };
 export {
-  src_default as default
+  src_default as default,
+  defineConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-deck",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",
@@ -22,11 +22,16 @@
     "fast refresh"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@swc/core": "^1.4.1",
-    "glob": "^10.3.10",
+    "@mdx-js/mdx": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@swc/core": "^1.5.7",
+    "glob": "^10.3.15",
     "gray-matter": "^4.0.3",
-    "remark-gfm": "^4.0.0"
+    "hastscript": "^9.0.0",
+    "lodash": "^4.17.21",
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "unist-util-visit": "^5.0.0",
+    "zod": "^3.23.8"
   }
 }

package/slides.d.ts

@@ -1,5 +1,5 @@
 import { ReactDeckOptions } from "./types";
-type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins">;
+type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins" | "remarkPlugins">;
 /**
  * Slides are separated by "---" in the markdown file.
  *
@@ -15,7 +15,7 @@ type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins">;
  * # Slide 1
  *
  * ---
- *
+ t
  * layout: slide2
  *
  * ---

package/themes/green.d.ts

@@ -0,0 +1,7 @@
+export declare const themeTokens: {
+    colors: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+};

package/themes/index.d.ts

@@ -0,0 +1,2 @@
+export * as green from "./green";
+export * as purple from "./purple";

package/themes/purple.d.ts

@@ -0,0 +1,7 @@
+export declare const themeTokens: {
+    colors: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+};

package/types.d.ts

@@ -1,3 +1,14 @@
-export type ReactDeckOptions = {
+import { z } from "zod";
+export interface ReactDeckOptions {
     rehypePlugins: any[];
-};
+    remarkPlugins: any[];
+    theme: "green" | "purple";
+}
+export declare const PestacleConfigSchema: z.ZodObject<{
+    theme: z.ZodDefault<z.ZodEnum<["green", "purple"]>>;
+}, "strip", z.ZodTypeAny, {
+    theme?: "green" | "purple";
+}, {
+    theme?: "green" | "purple";
+}>;
+export type PestacleConfig = z.infer<typeof PestacleConfigSchema>;