vite-plugin-react-deck 1.5.1 → 1.6.0

package/index.cjs

@@ -427,6 +427,7 @@ document.head.appendChild(link)
 
 // src/slides.ts
 var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path = __toESM(require("path"), 1);
 var import_mdx = require("@mdx-js/mdx");
 var import_gray_matter = __toESM(require("gray-matter"), 1);
 var import_remark_directive = __toESM(require("remark-directive"), 1);
@@ -435,7 +436,7 @@ var import_unist_util_visit = require("unist-util-visit");
 
 // src/codegen.ts
 var Patterns = {
-  FragmentProd: /^\s*_jsxs\(_Fragment, {\s*children:|\s*\}\);/g,
+  FragmentProd: /^\s*_jsxs\(_Fragment, {\s*children:|\s*\}\);$/g,
   FragmentDev: /^\s*<>\s*|\s*<\/>;\s*$/g
 };
 function extractMainCodeAsChildren(source, { isJsx }) {
@@ -469,6 +470,39 @@ ${header}
 }
 
 // src/slides.ts
+var INCLUDE_RE = /^::include\{file=(.+?)\}\s*$/gm;
+function resolveIncludes(content, filePath, { maxDepth = 10, _depth = 0 } = {}) {
+  const includedFiles = [];
+  const dir = import_node_path.default.dirname(filePath);
+  const resolved = content.replace(
+    INCLUDE_RE,
+    (_match, includePath) => {
+      if (_depth >= maxDepth) {
+        throw new Error(
+          `Include depth limit (${maxDepth}) exceeded when including "${includePath}" from "${filePath}". Check for circular includes.`
+        );
+      }
+      const absolutePath = import_node_path.default.resolve(dir, includePath);
+      let fileContent;
+      try {
+        fileContent = import_node_fs.default.readFileSync(absolutePath, "utf-8");
+      } catch {
+        throw new Error(
+          `Could not read included file "${includePath}" (resolved to "${absolutePath}") from "${filePath}".`
+        );
+      }
+      includedFiles.push(absolutePath);
+      const { content: innerContent } = (0, import_gray_matter.default)(fileContent);
+      const nested = resolveIncludes(innerContent, absolutePath, {
+        maxDepth,
+        _depth: _depth + 1
+      });
+      includedFiles.push(...nested.includedFiles);
+      return nested.content;
+    }
+  );
+  return { content: resolved, includedFiles };
+}
 function myRemarkPlugin() {
   return (tree) => {
     (0, import_unist_util_visit.visit)(tree, (node) => {
@@ -487,12 +521,19 @@ function myRemarkPlugin() {
 }
 async function transformSlidesMdxToReact(sourceContent, {
   production: isProd,
+  filePath,
   ...options
 }) {
   const { data: metadata, content } = (0, import_gray_matter.default)(sourceContent);
-  const { content: finalContent, inlineModules } = extractInlineModules(
-    normalizeNewline(content)
-  );
+  const normalized = normalizeNewline(content);
+  let resolvedContent = normalized;
+  let includedFiles = [];
+  if (filePath) {
+    const result = resolveIncludes(normalized, filePath);
+    resolvedContent = result.content;
+    includedFiles = result.includedFiles;
+  }
+  const { content: finalContent, inlineModules } = extractInlineModules(resolvedContent);
   const slides = finalContent.split("---\n");
   const enrichedSlides = [];
   let frontmatterForNextSlide = null;
@@ -564,7 +605,7 @@ Deck.slides = [
     inlineModules
   );
   import_node_fs.default.writeFileSync("slides.js", output);
-  return output;
+  return { code: output, includedFiles };
 }
 var MOD_REG = /\\`|`(?:\\`|[^`])*`|(^(?:import|export).*$)/gm;
 function extractInlineModules(source, {
@@ -607,9 +648,9 @@ var PestacleConfigSchema = import_zod.z.object({
 });
 
 // src/index.ts
-async function checkIfDirectoryExists(path) {
+async function checkIfDirectoryExists(path2) {
   try {
-    await fs2.access(path);
+    await fs2.access(path2);
     return true;
   } catch {
     return false;
@@ -653,10 +694,10 @@ async function extractDeckMeta(filePath) {
     return { slideCount: 0 };
   }
 }
-async function fileExists(_name, path) {
+async function fileExists(_name, path2) {
   const candidateExts = [".ts", ".tsx", ".js", ".jsx"];
   for await (const ext of candidateExts) {
-    const fullPath = `${path}${ext}`;
+    const fullPath = `${path2}${ext}`;
     try {
       await fs2.access(fullPath);
       return fullPath.replace(/^\./, "");
@@ -765,9 +806,9 @@ var src_default = async (options) => {
         let deckTheme;
         try {
           const raw = await fs2.readFile(deckMdxPath, "utf-8");
-          const { data: data2 } = (0, import_gray_matter2.default)(raw);
-          if (typeof data2.theme === "string") {
-            deckTheme = data2.theme;
+          const { data } = (0, import_gray_matter2.default)(raw);
+          if (typeof data.theme === "string") {
+            deckTheme = data.theme;
           }
         } catch {
         }
@@ -782,12 +823,17 @@ var src_default = async (options) => {
       if (!id.endsWith("deck.mdx")) {
         return;
       }
+      const absoluteId = id.startsWith("/") ? id : `${process.cwd()}/${id}`;
       const content = await fs2.readFile(id, "utf-8");
-      const data = await transformSlidesMdxToReact(content, {
+      const { code, includedFiles } = await transformSlidesMdxToReact(content, {
         production: isProd,
+        filePath: absoluteId,
         ...options
       });
-      return data;
+      for (const file of includedFiles) {
+        this.addWatchFile(file);
+      }
+      return code;
     },
     transformIndexHtml: {
       order: "pre",

package/index.mjs

@@ -406,6 +406,7 @@ document.head.appendChild(link)
 
 // src/slides.ts
 import fs from "fs";
+import path from "path";
 import { compile } from "@mdx-js/mdx";
 import matter from "gray-matter";
 import remarkDirective from "remark-directive";
@@ -414,7 +415,7 @@ import { visit } from "unist-util-visit";
 
 // src/codegen.ts
 var Patterns = {
-  FragmentProd: /^\s*_jsxs\(_Fragment, {\s*children:|\s*\}\);/g,
+  FragmentProd: /^\s*_jsxs\(_Fragment, {\s*children:|\s*\}\);$/g,
   FragmentDev: /^\s*<>\s*|\s*<\/>;\s*$/g
 };
 function extractMainCodeAsChildren(source, { isJsx }) {
@@ -448,6 +449,39 @@ ${header}
 }
 
 // src/slides.ts
+var INCLUDE_RE = /^::include\{file=(.+?)\}\s*$/gm;
+function resolveIncludes(content, filePath, { maxDepth = 10, _depth = 0 } = {}) {
+  const includedFiles = [];
+  const dir = path.dirname(filePath);
+  const resolved = content.replace(
+    INCLUDE_RE,
+    (_match, includePath) => {
+      if (_depth >= maxDepth) {
+        throw new Error(
+          `Include depth limit (${maxDepth}) exceeded when including "${includePath}" from "${filePath}". Check for circular includes.`
+        );
+      }
+      const absolutePath = path.resolve(dir, includePath);
+      let fileContent;
+      try {
+        fileContent = fs.readFileSync(absolutePath, "utf-8");
+      } catch {
+        throw new Error(
+          `Could not read included file "${includePath}" (resolved to "${absolutePath}") from "${filePath}".`
+        );
+      }
+      includedFiles.push(absolutePath);
+      const { content: innerContent } = matter(fileContent);
+      const nested = resolveIncludes(innerContent, absolutePath, {
+        maxDepth,
+        _depth: _depth + 1
+      });
+      includedFiles.push(...nested.includedFiles);
+      return nested.content;
+    }
+  );
+  return { content: resolved, includedFiles };
+}
 function myRemarkPlugin() {
   return (tree) => {
     visit(tree, (node) => {
@@ -466,12 +500,19 @@ function myRemarkPlugin() {
 }
 async function transformSlidesMdxToReact(sourceContent, {
   production: isProd,
+  filePath,
   ...options
 }) {
   const { data: metadata, content } = matter(sourceContent);
-  const { content: finalContent, inlineModules } = extractInlineModules(
-    normalizeNewline(content)
-  );
+  const normalized = normalizeNewline(content);
+  let resolvedContent = normalized;
+  let includedFiles = [];
+  if (filePath) {
+    const result = resolveIncludes(normalized, filePath);
+    resolvedContent = result.content;
+    includedFiles = result.includedFiles;
+  }
+  const { content: finalContent, inlineModules } = extractInlineModules(resolvedContent);
   const slides = finalContent.split("---\n");
   const enrichedSlides = [];
   let frontmatterForNextSlide = null;
@@ -543,7 +584,7 @@ Deck.slides = [
     inlineModules
   );
   fs.writeFileSync("slides.js", output);
-  return output;
+  return { code: output, includedFiles };
 }
 var MOD_REG = /\\`|`(?:\\`|[^`])*`|(^(?:import|export).*$)/gm;
 function extractInlineModules(source, {
@@ -591,9 +632,9 @@ function defineConfig(config) {
 }
 
 // src/index.ts
-async function checkIfDirectoryExists(path) {
+async function checkIfDirectoryExists(path2) {
   try {
-    await fs2.access(path);
+    await fs2.access(path2);
     return true;
   } catch {
     return false;
@@ -637,10 +678,10 @@ async function extractDeckMeta(filePath) {
     return { slideCount: 0 };
   }
 }
-async function fileExists(_name, path) {
+async function fileExists(_name, path2) {
   const candidateExts = [".ts", ".tsx", ".js", ".jsx"];
   for await (const ext of candidateExts) {
-    const fullPath = `${path}${ext}`;
+    const fullPath = `${path2}${ext}`;
     try {
       await fs2.access(fullPath);
       return fullPath.replace(/^\./, "");
@@ -749,9 +790,9 @@ var index_default = async (options) => {
         let deckTheme;
         try {
           const raw = await fs2.readFile(deckMdxPath, "utf-8");
-          const { data: data2 } = matter2(raw);
-          if (typeof data2.theme === "string") {
-            deckTheme = data2.theme;
+          const { data } = matter2(raw);
+          if (typeof data.theme === "string") {
+            deckTheme = data.theme;
           }
         } catch {
         }
@@ -766,12 +807,17 @@ var index_default = async (options) => {
       if (!id.endsWith("deck.mdx")) {
         return;
       }
+      const absoluteId = id.startsWith("/") ? id : `${process.cwd()}/${id}`;
       const content = await fs2.readFile(id, "utf-8");
-      const data = await transformSlidesMdxToReact(content, {
+      const { code, includedFiles } = await transformSlidesMdxToReact(content, {
         production: isProd,
+        filePath: absoluteId,
         ...options
       });
-      return data;
+      for (const file of includedFiles) {
+        this.addWatchFile(file);
+      }
+      return code;
     },
     transformIndexHtml: {
       order: "pre",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-deck",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",

package/slides.d.ts

@@ -1,5 +1,18 @@
 import type { ReactDeckOptions } from "./types";
 type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins" | "remarkPlugins">;
+/**
+ * Resolve `::include{file=./path/to/file.mdx}` directives by replacing them
+ * with the content of the referenced file (stripping its top-level frontmatter).
+ * Supports nested includes up to a depth limit to prevent infinite recursion.
+ * Returns the resolved content and the set of included file paths (for HMR).
+ */
+export declare function resolveIncludes(content: string, filePath: string, { maxDepth, _depth }?: {
+    maxDepth?: number;
+    _depth?: number;
+}): {
+    content: string;
+    includedFiles: string[];
+};
 /**
  * Slides are separated by "---" in the markdown file.
  *
@@ -23,9 +36,14 @@ type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins" | "remarkPlugins">;
  * # Slide 2
  *
  */
-export declare function transformSlidesMdxToReact(sourceContent: string, { production: isProd, ...options }: {
+export declare function transformSlidesMdxToReact(sourceContent: string, { production: isProd, filePath, ...options }: {
     production: boolean;
-} & CompileOptions): Promise<string>;
+    /** Absolute path to the source MDX file, used to resolve includes. */
+    filePath?: string;
+} & CompileOptions): Promise<{
+    code: string;
+    includedFiles: string[];
+}>;
 export declare function extractInlineModules(source: string, { inlineModules, }?: {
     inlineModules?: Set<string>;
 }): {