npm - vite-plugin-react-deck - Versions diffs - 1.0.8 → 1.1.1 - Mend

vite-plugin-react-deck 1.0.8 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/config.d.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 | undefined;
+    };
 }): string;

package/index.cjs CHANGED Viewed

@@ -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,6 +30,7 @@ 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");
@@ -66,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
@@ -99,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
@@ -167,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>
@@ -191,10 +251,20 @@ 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];
+  const layoutImport = config.layoutsFile ? `import layouts from "${config.layoutsFile}";` : "import { layouts } from '@gpichot/spectacle-deck';";
   return `import React, { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { Deck } from '@gpichot/spectacle-deck';
+${layoutImport};
 import deck from "${slidePath}";
@@ -203,7 +273,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <StrictMode>
-    <Deck deck={deck} />
+    <Deck deck={deck} theme={${JSON.stringify(themeObject)}} layouts={layouts} />
   </StrictMode>
 )`;
 }
@@ -211,6 +281,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);
@@ -219,7 +300,32 @@ 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) => {
   let isProd = false;
   const deckConfig = {
     decks: []
@@ -265,6 +371,7 @@ var src_default = (options) => {
       }
     },
     async load(id) {
+      const config = await loadCustomConfig();
       const deck = deckConfig.decks.find((deck2) => deck2.index === id);
       if (deck) {
         return createIndexFile({
@@ -280,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")) {
@@ -310,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,8 +1,15 @@
+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";
@@ -43,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
@@ -76,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
@@ -144,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>
@@ -168,10 +230,20 @@ 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];
+  const layoutImport = config.layoutsFile ? `import layouts from "${config.layoutsFile}";` : "import { layouts } from '@gpichot/spectacle-deck';";
   return `import React, { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { Deck } from '@gpichot/spectacle-deck';
+${layoutImport};
 import deck from "${slidePath}";
@@ -180,7 +252,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <StrictMode>
-    <Deck deck={deck} />
+    <Deck deck={deck} theme={${JSON.stringify(themeObject)}} layouts={layouts} />
   </StrictMode>
 )`;
 }
@@ -188,6 +260,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);
@@ -196,7 +284,32 @@ 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) => {
   let isProd = false;
   const deckConfig = {
     decks: []
@@ -242,6 +355,7 @@ var src_default = (options) => {
       }
     },
     async load(id) {
+      const config = await loadCustomConfig();
       const deck = deckConfig.decks.find((deck2) => deck2.index === id);
       if (deck) {
         return createIndexFile({
@@ -257,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")) {
@@ -287,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-deck",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "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 CHANGED Viewed

@@ -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 ADDED Viewed

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

package/themes/index.d.ts ADDED Viewed

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

package/themes/purple.d.ts ADDED Viewed

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

package/types.d.ts CHANGED Viewed

@@ -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>;