prev-cli 0.9.1 → 0.10.0

package/dist/cli.js

@@ -2,7 +2,7 @@
 
 // src/cli.ts
 import { parseArgs } from "util";
-import path5 from "path";
+import path7 from "path";
 
 // src/vite/start.ts
 import { createServer as createServer2, build, preview } from "vite";
@@ -13,9 +13,9 @@ import react from "@vitejs/plugin-react-swc";
 import mdx from "@mdx-js/rollup";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
-import path4 from "path";
+import path6 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { existsSync as existsSync4, readFileSync as readFileSync2 } from "fs";
 
 // src/utils/cache.ts
 import { createHash } from "crypto";
@@ -324,10 +324,15 @@ function entryPlugin(rootDir) {
       if (command === "build" && rootDir) {
         tempHtmlPath = path3.join(rootDir, "index.html");
         writeFileSync(tempHtmlPath, getHtml(entryPath, true));
+        const existingInput = config.build?.rollupOptions?.input || {};
+        const inputObj = typeof existingInput === "string" ? { _original: existingInput } : Array.isArray(existingInput) ? Object.fromEntries(existingInput.map((f, i) => [`entry${i}`, f])) : existingInput;
         return {
           build: {
             rollupOptions: {
-              input: tempHtmlPath
+              input: {
+                ...inputObj,
+                main: tempHtmlPath
+              }
             }
           }
         };
@@ -362,6 +367,73 @@ function entryPlugin(rootDir) {
   };
 }
 
+// src/vite/previews.ts
+import fg2 from "fast-glob";
+import path4 from "path";
+import { existsSync as existsSync2 } from "fs";
+async function scanPreviews(rootDir) {
+  const previewsDir = path4.join(rootDir, "previews");
+  if (!existsSync2(previewsDir)) {
+    return [];
+  }
+  const htmlFiles = await fg2.glob("**/index.html", {
+    cwd: previewsDir,
+    ignore: ["node_modules/**"]
+  });
+  return htmlFiles.map((file) => {
+    const dir = path4.dirname(file);
+    const name = dir === "." ? path4.basename(path4.dirname(path4.join(previewsDir, file))) : dir;
+    return {
+      name,
+      route: `/_preview/${name}`,
+      htmlPath: path4.join(previewsDir, file)
+    };
+  });
+}
+
+// src/vite/plugins/previews-plugin.ts
+import { existsSync as existsSync3, renameSync, mkdirSync, rmSync } from "fs";
+import path5 from "path";
+var VIRTUAL_MODULE_ID2 = "virtual:prev-previews";
+var RESOLVED_VIRTUAL_MODULE_ID2 = "\x00" + VIRTUAL_MODULE_ID2;
+function previewsPlugin(rootDir) {
+  return {
+    name: "prev-previews",
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID2) {
+        return RESOLVED_VIRTUAL_MODULE_ID2;
+      }
+    },
+    async load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID2) {
+        const previews = await scanPreviews(rootDir);
+        return `export const previews = ${JSON.stringify(previews)};`;
+      }
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.includes("/previews/") && file.endsWith(".html")) {
+        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID2);
+        if (mod) {
+          server.moduleGraph.invalidateModule(mod);
+          return [mod];
+        }
+      }
+    },
+    closeBundle() {
+      const distDir = path5.join(rootDir, "dist");
+      const previewsDir = path5.join(distDir, "previews");
+      const targetDir = path5.join(distDir, "_preview");
+      if (existsSync3(previewsDir)) {
+        mkdirSync(path5.dirname(targetDir), { recursive: true });
+        if (existsSync3(targetDir)) {
+          rmSync(targetDir, { recursive: true });
+        }
+        renameSync(previewsDir, targetDir);
+      }
+    }
+  };
+}
+
 // src/vite/config.ts
 function createFriendlyLogger() {
   const logger = createLogger("info", { allowClearScreen: false });
@@ -417,10 +489,10 @@ function createFriendlyLogger() {
   };
 }
 function findCliRoot2() {
-  let dir = path4.dirname(fileURLToPath2(import.meta.url));
+  let dir = path6.dirname(fileURLToPath2(import.meta.url));
   for (let i = 0;i < 10; i++) {
-    const pkgPath = path4.join(dir, "package.json");
-    if (existsSync2(pkgPath)) {
+    const pkgPath = path6.join(dir, "package.json");
+    if (existsSync4(pkgPath)) {
       try {
         const pkg = JSON.parse(readFileSync2(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli") {
@@ -428,24 +500,24 @@ function findCliRoot2() {
         }
       } catch {}
     }
-    const parent = path4.dirname(dir);
+    const parent = path6.dirname(dir);
     if (parent === dir)
       break;
     dir = parent;
   }
-  return path4.dirname(path4.dirname(fileURLToPath2(import.meta.url)));
+  return path6.dirname(path6.dirname(fileURLToPath2(import.meta.url)));
 }
 function findNodeModules(cliRoot2) {
-  const localNodeModules = path4.join(cliRoot2, "node_modules");
-  if (existsSync2(path4.join(localNodeModules, "react"))) {
+  const localNodeModules = path6.join(cliRoot2, "node_modules");
+  if (existsSync4(path6.join(localNodeModules, "react"))) {
     return localNodeModules;
   }
   let dir = cliRoot2;
   for (let i = 0;i < 10; i++) {
-    const parent = path4.dirname(dir);
+    const parent = path6.dirname(dir);
     if (parent === dir)
       break;
-    if (path4.basename(parent) === "node_modules" && existsSync2(path4.join(parent, "react"))) {
+    if (path6.basename(parent) === "node_modules" && existsSync4(path6.join(parent, "react"))) {
       return parent;
     }
     dir = parent;
@@ -454,10 +526,12 @@ function findNodeModules(cliRoot2) {
 }
 var cliRoot2 = findCliRoot2();
 var cliNodeModules = findNodeModules(cliRoot2);
-var srcRoot2 = path4.join(cliRoot2, "src");
+var srcRoot2 = path6.join(cliRoot2, "src");
 async function createViteConfig(options) {
   const { rootDir, mode, port, include } = options;
   const cacheDir = await ensureCacheDir(rootDir);
+  const previews = await scanPreviews(rootDir);
+  const previewInputs = Object.fromEntries(previews.map((p) => [`_preview/${p.name}`, p.htmlPath]));
   return {
     root: rootDir,
     mode,
@@ -471,18 +545,46 @@ async function createViteConfig(options) {
       }),
       react(),
       pagesPlugin(rootDir, { include }),
-      entryPlugin(rootDir)
+      entryPlugin(rootDir),
+      previewsPlugin(rootDir),
+      {
+        name: "prev-preview-server",
+        configureServer(server) {
+          server.middlewares.use(async (req, res, next) => {
+            if (req.url?.startsWith("/_preview/")) {
+              const previewName = decodeURIComponent(req.url.slice("/_preview/".length).split("?")[0]);
+              const previewsDir = path6.join(rootDir, "previews");
+              const htmlPath = path6.resolve(previewsDir, previewName, "index.html");
+              if (!htmlPath.startsWith(previewsDir)) {
+                return next();
+              }
+              if (existsSync4(htmlPath)) {
+                try {
+                  const html = await server.transformIndexHtml(req.url, readFileSync2(htmlPath, "utf-8"));
+                  res.setHeader("Content-Type", "text/html");
+                  res.end(html);
+                  return;
+                } catch (err) {
+                  console.error("Error serving preview:", err);
+                  return next();
+                }
+              }
+            }
+            next();
+          });
+        }
+      }
     ],
     resolve: {
       alias: {
-        "@prev/ui": path4.join(srcRoot2, "ui"),
-        "@prev/theme": path4.join(srcRoot2, "theme"),
-        react: path4.join(cliNodeModules, "react"),
-        "react-dom": path4.join(cliNodeModules, "react-dom"),
-        "@tanstack/react-router": path4.join(cliNodeModules, "@tanstack/react-router"),
-        mermaid: path4.join(cliNodeModules, "mermaid"),
-        dayjs: path4.join(cliNodeModules, "dayjs"),
-        "@terrastruct/d2": path4.join(cliNodeModules, "@terrastruct/d2")
+        "@prev/ui": path6.join(srcRoot2, "ui"),
+        "@prev/theme": path6.join(srcRoot2, "theme"),
+        react: path6.join(cliNodeModules, "react"),
+        "react-dom": path6.join(cliNodeModules, "react-dom"),
+        "@tanstack/react-router": path6.join(cliNodeModules, "@tanstack/react-router"),
+        mermaid: path6.join(cliNodeModules, "mermaid"),
+        dayjs: path6.join(cliNodeModules, "dayjs"),
+        "@terrastruct/d2": path6.join(cliNodeModules, "@terrastruct/d2")
       },
       dedupe: [
         "react",
@@ -515,8 +617,8 @@ async function createViteConfig(options) {
       },
       warmup: {
         clientFiles: [
-          path4.join(srcRoot2, "theme/entry.tsx"),
-          path4.join(srcRoot2, "theme/styles.css")
+          path6.join(srcRoot2, "theme/entry.tsx"),
+          path6.join(srcRoot2, "theme/styles.css")
         ]
       }
     },
@@ -525,9 +627,15 @@ async function createViteConfig(options) {
       strictPort: false
     },
     build: {
-      outDir: path4.join(rootDir, "dist"),
+      outDir: path6.join(rootDir, "dist"),
       reportCompressedSize: false,
-      chunkSizeWarningLimit: 1e4
+      chunkSizeWarningLimit: 1e4,
+      rollupOptions: {
+        input: {
+          main: path6.join(srcRoot2, "theme/index.html"),
+          ...previewInputs
+        }
+      }
     }
   };
 }
@@ -641,7 +749,7 @@ var { values, positionals } = parseArgs({
   allowPositionals: true
 });
 var command = positionals[0] || "dev";
-var rootDir = path5.resolve(values.cwd || positionals[1] || ".");
+var rootDir = path7.resolve(values.cwd || positionals[1] || ".");
 function printHelp() {
   console.log(`
 prev - Zero-config documentation site generator

package/dist/vite/plugins/previews-plugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function previewsPlugin(rootDir: string): Plugin;

package/dist/vite/previews.d.ts

@@ -0,0 +1,6 @@
+export interface Preview {
+    name: string;
+    route: string;
+    htmlPath: string;
+}
+export declare function scanPreviews(rootDir: string): Promise<Preview[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "test:all": "bun run test && bun run test:integration"
   },
   "dependencies": {
+    "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-router": "^1.145.7",

package/src/theme/Preview.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react'
+import { Maximize2, Minimize2, ExternalLink } from 'lucide-react'
+
+interface PreviewProps {
+  src: string
+  height?: string | number
+  title?: string
+}
+
+export function Preview({ src, height = 400, title }: PreviewProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const previewUrl = `/_preview/${src}`
+  const displayTitle = title || src
+
+  useEffect(() => {
+    if (!isFullscreen) return
+
+    // Lock body scroll
+    document.body.style.overflow = 'hidden'
+
+    // Handle escape key
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsFullscreen(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.body.style.overflow = ''
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isFullscreen])
+
+  if (isFullscreen) {
+    return (
+      <div className="fixed inset-0 z-50 bg-white dark:bg-zinc-900">
+        <div className="flex items-center justify-between p-2 border-b border-zinc-200 dark:border-zinc-700">
+          <span className="text-sm font-medium">{displayTitle}</span>
+          <div className="flex gap-2">
+            <a
+              href={previewUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded"
+              title="Open in new tab"
+              aria-label="Open in new tab"
+            >
+              <ExternalLink className="w-4 h-4" />
+            </a>
+            <button
+              onClick={() => setIsFullscreen(false)}
+              className="p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded"
+              title="Exit fullscreen"
+              aria-label="Exit fullscreen"
+            >
+              <Minimize2 className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+        <iframe
+          src={previewUrl}
+          className="w-full h-[calc(100vh-49px)]"
+          title={displayTitle}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="my-4 border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-2 bg-zinc-50 dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-700">
+        <span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
+          {displayTitle}
+        </span>
+        <div className="flex gap-1">
+          <a
+            href={previewUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded"
+            title="Open in new tab"
+            aria-label="Open in new tab"
+          >
+            <ExternalLink className="w-4 h-4 text-zinc-500" />
+          </a>
+          <button
+            onClick={() => setIsFullscreen(true)}
+            className="p-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded"
+            title="Fullscreen"
+            aria-label="Enter fullscreen"
+          >
+            <Maximize2 className="w-4 h-4 text-zinc-500" />
+          </button>
+        </div>
+      </div>
+      <iframe
+        src={previewUrl}
+        style={{ height: typeof height === 'number' ? `${height}px` : height }}
+        className="w-full"
+        title={displayTitle}
+      />
+    </div>
+  )
+}

package/src/theme/entry.tsx

@@ -7,10 +7,12 @@ import {
   createRoute,
   Outlet,
 } from '@tanstack/react-router'
+import { MDXProvider } from '@mdx-js/react'
 import { pages, sidebar } from 'virtual:prev-pages'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
 import { MetadataBlock } from './MetadataBlock'
+import { mdxComponents } from './mdx-components'
 import './styles.css'
 
 // PageTree types (simplified from fumadocs-core)
@@ -72,12 +74,12 @@ interface PageMeta {
 function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta: PageMeta }) {
   useDiagrams()
   return (
-    <>
+    <MDXProvider components={mdxComponents}>
       {meta.frontmatter && Object.keys(meta.frontmatter).length > 0 && (
         <MetadataBlock frontmatter={meta.frontmatter} />
       )}
       <Component />
-    </>
+    </MDXProvider>
   )
 }
 

package/src/theme/mdx-components.tsx

@@ -0,0 +1,5 @@
+import { Preview } from './Preview'
+
+export const mdxComponents = {
+  Preview,
+}