prev-cli 0.11.0 → 0.12.0

package/dist/cli.js

@@ -5,7 +5,7 @@ import { parseArgs } from "util";
 import path7 from "path";
 
 // src/vite/start.ts
-import { createServer as createServer2, build, preview } from "vite";
+import { createServer as createServer2, build as build2, preview } from "vite";
 
 // src/vite/config.ts
 import { createLogger } from "vite";
@@ -15,7 +15,7 @@ import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import path6 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { existsSync as existsSync4, readFileSync as readFileSync2 } from "fs";
+import { existsSync as existsSync4, readFileSync as readFileSync3 } from "fs";
 
 // src/utils/cache.ts
 import { createHash } from "crypto";
@@ -348,7 +348,7 @@ function entryPlugin(rootDir) {
       const html = getHtml(entryPath, false);
       server.middlewares.use(async (req, res, next) => {
         const url = req.url || "/";
-        if (url === "/" || !url.includes(".") && !url.startsWith("/@")) {
+        if (url === "/" || !url.includes(".") && !url.startsWith("/@") && !url.startsWith("/_preview")) {
           try {
             const transformed = await server.transformIndexHtml(url, html);
             res.setHeader("Content-Type", "text/html");
@@ -370,7 +370,7 @@ function entryPlugin(rootDir) {
 // src/vite/previews.ts
 import fg2 from "fast-glob";
 import path4 from "path";
-import { existsSync as existsSync2 } from "fs";
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
 async function scanPreviews(rootDir) {
   const previewsDir = path4.join(rootDir, "previews");
   if (!existsSync2(previewsDir)) {
@@ -390,15 +390,167 @@ async function scanPreviews(rootDir) {
     };
   });
 }
+async function scanPreviewFiles(previewDir) {
+  const files = await fg2.glob("**/*.{tsx,ts,jsx,js,css,json}", {
+    cwd: previewDir,
+    ignore: ["node_modules/**", "dist/**"]
+  });
+  return files.map((file) => {
+    const content = readFileSync2(path4.join(previewDir, file), "utf-8");
+    const ext = path4.extname(file).slice(1);
+    return {
+      path: file,
+      content,
+      type: ext
+    };
+  });
+}
+function detectEntry(files) {
+  const priorities = ["App.tsx", "App.jsx", "index.tsx", "index.jsx", "main.tsx", "main.jsx"];
+  for (const name of priorities) {
+    const file = files.find((f) => f.path === name);
+    if (file)
+      return file.path;
+  }
+  const jsxFile = files.find((f) => f.type === "tsx" || f.type === "jsx");
+  return jsxFile?.path || files[0]?.path || "App.tsx";
+}
+async function buildPreviewConfig(previewDir) {
+  const files = await scanPreviewFiles(previewDir);
+  const entry = detectEntry(files);
+  return {
+    files,
+    entry,
+    tailwind: true
+  };
+}
+
+// src/preview-runtime/build.ts
+import { build } from "esbuild";
+async function buildPreviewHtml(config) {
+  try {
+    const virtualFs = {};
+    for (const file of config.files) {
+      const ext = file.path.split(".").pop()?.toLowerCase();
+      const loader = ext === "css" ? "css" : ext === "json" ? "json" : ext || "tsx";
+      virtualFs[file.path] = { contents: file.content, loader };
+    }
+    const entryFile = config.files.find((f) => f.path === config.entry);
+    if (!entryFile) {
+      return { html: "", error: `Entry file not found: ${config.entry}` };
+    }
+    const hasDefaultExport = /export\s+default/.test(entryFile.content);
+    const entryCode = hasDefaultExport ? `
+      import React from 'react'
+      import { createRoot } from 'react-dom/client'
+      import App from './${config.entry}'
+
+      const root = createRoot(document.getElementById('root'))
+      root.render(React.createElement(App))
+    ` : `
+      import './${config.entry}'
+    `;
+    const result = await build({
+      stdin: {
+        contents: entryCode,
+        loader: "tsx",
+        resolveDir: "/"
+      },
+      bundle: true,
+      write: false,
+      format: "esm",
+      jsx: "automatic",
+      jsxImportSource: "react",
+      target: "es2020",
+      minify: true,
+      plugins: [{
+        name: "virtual-fs",
+        setup(build2) {
+          build2.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
+            const parts = args.path.split("/");
+            const pkg = parts[0];
+            const subpath = parts.slice(1).join("/");
+            const url = subpath ? `https://esm.sh/${pkg}@18/${subpath}` : `https://esm.sh/${pkg}@18`;
+            return { path: url, external: true };
+          });
+          build2.onResolve({ filter: /^[^./]/ }, (args) => {
+            if (args.path.startsWith("https://"))
+              return;
+            return { path: `https://esm.sh/${args.path}`, external: true };
+          });
+          build2.onResolve({ filter: /^\./ }, (args) => {
+            let resolved = args.path.replace(/^\.\//, "");
+            if (!resolved.includes(".")) {
+              for (const ext of [".tsx", ".ts", ".jsx", ".js", ".css"]) {
+                if (virtualFs[resolved + ext]) {
+                  resolved = resolved + ext;
+                  break;
+                }
+              }
+            }
+            return { path: resolved, namespace: "virtual" };
+          });
+          build2.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
+            const file = virtualFs[args.path];
+            if (file) {
+              if (file.loader === "css") {
+                const css = file.contents.replace(/`/g, "\\`").replace(/\$/g, "\\$");
+                return {
+                  contents: `
+                    const style = document.createElement('style');
+                    style.textContent = \`${css}\`;
+                    document.head.appendChild(style);
+                  `,
+                  loader: "js"
+                };
+              }
+              return { contents: file.contents, loader: file.loader };
+            }
+            return { contents: "", loader: "empty" };
+          });
+        }
+      }]
+    });
+    const jsFile = result.outputFiles.find((f) => f.path.endsWith(".js")) || result.outputFiles[0];
+    const jsCode = jsFile?.text || "";
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Preview</title>
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <style>
+    body { margin: 0; }
+    #root { min-height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module">${jsCode}</script>
+</body>
+</html>`;
+    return { html };
+  } catch (err) {
+    return {
+      html: "",
+      error: err instanceof Error ? err.message : String(err)
+    };
+  }
+}
 
 // src/vite/plugins/previews-plugin.ts
-import { existsSync as existsSync3, renameSync, mkdirSync, rmSync } from "fs";
+import { existsSync as existsSync3, mkdirSync, rmSync, writeFileSync as writeFileSync2 } 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) {
+  let isBuild = false;
   return {
     name: "prev-previews",
+    config(_, { command }) {
+      isBuild = command === "build";
+    },
     resolveId(id) {
       if (id === VIRTUAL_MODULE_ID2) {
         return RESOLVED_VIRTUAL_MODULE_ID2;
@@ -411,7 +563,7 @@ function previewsPlugin(rootDir) {
       }
     },
     handleHotUpdate({ file, server }) {
-      if (file.includes("/previews/") && file.endsWith(".html")) {
+      if (file.includes("/previews/") && /\.(html|tsx|ts|jsx|js|css)$/.test(file)) {
         const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID2);
         if (mod) {
           server.moduleGraph.invalidateModule(mod);
@@ -419,16 +571,40 @@ function previewsPlugin(rootDir) {
         }
       }
     },
-    closeBundle() {
+    async closeBundle() {
+      if (!isBuild)
+        return;
       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 });
+      const previewsDir = path5.join(rootDir, "previews");
+      const oldPreviewsDir = path5.join(distDir, "previews");
+      if (existsSync3(oldPreviewsDir)) {
+        rmSync(oldPreviewsDir, { recursive: true });
+      }
+      if (existsSync3(targetDir)) {
+        rmSync(targetDir, { recursive: true });
+      }
+      const previews = await scanPreviews(rootDir);
+      if (previews.length === 0)
+        return;
+      console.log(`
+  Building ${previews.length} preview(s)...`);
+      for (const preview of previews) {
+        const previewDir = path5.join(previewsDir, preview.name);
+        try {
+          const config = await buildPreviewConfig(previewDir);
+          const result = await buildPreviewHtml(config);
+          if (result.error) {
+            console.error(`    ✗ ${preview.name}: ${result.error}`);
+            continue;
+          }
+          const outputDir = path5.join(targetDir, preview.name);
+          mkdirSync(outputDir, { recursive: true });
+          writeFileSync2(path5.join(outputDir, "index.html"), result.html);
+          console.log(`    ✓ ${preview.name}`);
+        } catch (err) {
+          console.error(`    ✗ ${preview.name}: ${err}`);
         }
-        renameSync(previewsDir, targetDir);
       }
     }
   };
@@ -494,7 +670,7 @@ function findCliRoot2() {
     const pkgPath = path6.join(dir, "package.json");
     if (existsSync4(pkgPath)) {
       try {
-        const pkg = JSON.parse(readFileSync2(pkgPath, "utf-8"));
+        const pkg = JSON.parse(readFileSync3(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli") {
           return dir;
         }
@@ -530,8 +706,6 @@ 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,
@@ -549,25 +723,74 @@ async function createViteConfig(options) {
       previewsPlugin(rootDir),
       {
         name: "prev-preview-server",
+        resolveId(id) {
+          if (id.startsWith("/_preview/")) {
+            const relativePath = id.slice("/_preview/".length);
+            const previewsDir = path6.join(rootDir, "previews");
+            const resolved = path6.resolve(previewsDir, relativePath);
+            if (resolved.startsWith(previewsDir)) {
+              return resolved;
+            }
+          }
+        },
         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 urlPath = req.url?.split("?")[0] || "";
+            if (urlPath === "/_preview-runtime") {
+              const templatePath = path6.join(srcRoot2, "preview-runtime/template.html");
+              if (existsSync4(templatePath)) {
+                const html = readFileSync3(templatePath, "utf-8");
+                res.setHeader("Content-Type", "text/html");
+                res.end(html);
+                return;
+              }
+            }
+            if (urlPath.startsWith("/_preview-config/")) {
+              const previewName = decodeURIComponent(urlPath.slice("/_preview-config/".length));
               const previewsDir = path6.join(rootDir, "previews");
-              const htmlPath = path6.resolve(previewsDir, previewName, "index.html");
-              if (!htmlPath.startsWith(previewsDir)) {
-                return next();
+              const previewDir = path6.resolve(previewsDir, previewName);
+              if (!previewDir.startsWith(previewsDir)) {
+                res.statusCode = 403;
+                res.end("Forbidden");
+                return;
               }
-              if (existsSync4(htmlPath)) {
+              if (existsSync4(previewDir)) {
                 try {
-                  const html = await server.transformIndexHtml(req.url, readFileSync2(htmlPath, "utf-8"));
-                  res.setHeader("Content-Type", "text/html");
-                  res.end(html);
+                  const config = await buildPreviewConfig(previewDir);
+                  res.setHeader("Content-Type", "application/json");
+                  res.end(JSON.stringify(config));
                   return;
                 } catch (err) {
-                  console.error("Error serving preview:", err);
+                  console.error("Error building preview config:", err);
+                  res.statusCode = 500;
+                  res.end(JSON.stringify({ error: String(err) }));
+                  return;
+                }
+              }
+            }
+            if (urlPath.startsWith("/_preview/")) {
+              const isHtmlRequest = !path6.extname(urlPath) || urlPath.endsWith("/");
+              if (isHtmlRequest) {
+                const previewName = decodeURIComponent(urlPath.slice("/_preview/".length).replace(/\/$/, ""));
+                const previewsDir = path6.join(rootDir, "previews");
+                const htmlPath = path6.resolve(previewsDir, previewName, "index.html");
+                if (!htmlPath.startsWith(previewsDir)) {
                   return next();
                 }
+                if (existsSync4(htmlPath)) {
+                  try {
+                    let html = readFileSync3(htmlPath, "utf-8");
+                    const previewBase = `/_preview/${previewName}/`;
+                    html = html.replace(/(src|href)=["']\.\/([^"']+)["']/g, `$1="${previewBase}$2"`);
+                    const transformed = await server.transformIndexHtml(req.url, html);
+                    res.setHeader("Content-Type", "text/html");
+                    res.end(transformed);
+                    return;
+                  } catch (err) {
+                    console.error("Error serving preview:", err);
+                    return next();
+                  }
+                }
               }
             }
             next();
@@ -632,8 +855,7 @@ async function createViteConfig(options) {
       chunkSizeWarningLimit: 1e4,
       rollupOptions: {
         input: {
-          main: path6.join(srcRoot2, "theme/index.html"),
-          ...previewInputs
+          main: path6.join(srcRoot2, "theme/index.html")
         }
       }
     }
@@ -713,7 +935,7 @@ async function buildSite(rootDir, options = {}) {
     mode: "production",
     include: options.include
   });
-  await build(config);
+  await build2(config);
   console.log();
   console.log("  Done! Your site is ready in ./dist");
   console.log("  You can deploy this folder anywhere.");

package/dist/preview-runtime/build.d.ts

@@ -0,0 +1,10 @@
+import type { PreviewConfig } from './types';
+export interface PreviewBuildResult {
+    html: string;
+    error?: string;
+}
+/**
+ * Build a preview into a standalone HTML file for production
+ * Uses esbuild (native) to bundle at build time
+ */
+export declare function buildPreviewHtml(config: PreviewConfig): Promise<PreviewBuildResult>;

package/dist/preview-runtime/types.d.ts

@@ -0,0 +1,32 @@
+export interface PreviewFile {
+    path: string;
+    content: string;
+    type: 'tsx' | 'ts' | 'jsx' | 'js' | 'css' | 'html' | 'json';
+}
+export interface PreviewConfig {
+    files: PreviewFile[];
+    entry: string;
+    tailwind?: boolean;
+}
+export interface BuildResult {
+    success: boolean;
+    code?: string;
+    css?: string;
+    error?: string;
+    buildTime?: number;
+}
+export type PreviewMessage = {
+    type: 'init';
+    config: PreviewConfig;
+} | {
+    type: 'update';
+    files: PreviewFile[];
+} | {
+    type: 'ready';
+} | {
+    type: 'built';
+    result: BuildResult;
+} | {
+    type: 'error';
+    error: string;
+};

package/dist/vite/previews.d.ts

@@ -1,6 +1,23 @@
+import type { PreviewFile, PreviewConfig } from '../preview-runtime/types';
 export interface Preview {
     name: string;
     route: string;
     htmlPath: string;
 }
+export interface PreviewWithFiles extends Preview {
+    files: PreviewFile[];
+    entry: string;
+}
 export declare function scanPreviews(rootDir: string): Promise<Preview[]>;
+/**
+ * Scan all files in a preview directory for WASM bundling
+ */
+export declare function scanPreviewFiles(previewDir: string): Promise<PreviewFile[]>;
+/**
+ * Detect the entry file for a preview (looks for App.tsx, index.tsx, etc.)
+ */
+export declare function detectEntry(files: PreviewFile[]): string;
+/**
+ * Build a PreviewConfig for WASM runtime
+ */
+export declare function buildPreviewConfig(previewDir: string): Promise<PreviewConfig>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",

package/src/theme/Preview.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
-import { Smartphone, Tablet, Monitor, SunMedium, Moon, Maximize2, Minimize2, GripVertical, SlidersHorizontal, X } from 'lucide-react'
+import { Smartphone, Tablet, Monitor, SunMedium, Moon, Maximize2, Minimize2, GripVertical, SlidersHorizontal, X, Loader2 } from 'lucide-react'
+import type { PreviewConfig, PreviewMessage, BuildResult } from '../preview-runtime/types'
 
 interface PreviewProps {
   src: string
   height?: string | number
   title?: string
+  mode?: 'wasm' | 'legacy' // 'wasm' uses browser bundling, 'legacy' uses Vite
 }
 
 type DeviceMode = 'mobile' | 'tablet' | 'desktop'
@@ -20,7 +22,7 @@ interface Position {
   y: number
 }
 
-export function Preview({ src, height = 400, title }: PreviewProps) {
+export function Preview({ src, height = 400, title, mode = 'wasm' }: PreviewProps) {
   const [isFullscreen, setIsFullscreen] = useState(false)
   const [deviceMode, setDeviceMode] = useState<DeviceMode>('desktop')
   const [customWidth, setCustomWidth] = useState<number | null>(null)
@@ -30,11 +32,17 @@ export function Preview({ src, height = 400, title }: PreviewProps) {
   const [isDragging, setIsDragging] = useState(false)
   const [dragOffset, setDragOffset] = useState<Position>({ x: 0, y: 0 })
 
+  // WASM preview state
+  const [buildStatus, setBuildStatus] = useState<'loading' | 'building' | 'ready' | 'error'>('loading')
+  const [buildTime, setBuildTime] = useState<number | null>(null)
+  const [buildError, setBuildError] = useState<string | null>(null)
+
   const iframeRef = useRef<HTMLIFrameElement>(null)
   const pillRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const previewUrl = `/_preview/${src}`
+  // URL depends on mode
+  const previewUrl = mode === 'wasm' ? '/_preview-runtime' : `/_preview/${src}`
   const displayTitle = title || src
 
   // Calculate current width
@@ -88,6 +96,60 @@ export function Preview({ src, height = 400, title }: PreviewProps) {
     }
   }, [isDarkMode])
 
+  // WASM preview: Initialize and send config to iframe
+  useEffect(() => {
+    if (mode !== 'wasm') return
+
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    let configSent = false
+
+    // Handle messages from iframe
+    const handleMessage = (event: MessageEvent) => {
+      const msg = event.data as PreviewMessage
+
+      if (msg.type === 'ready' && !configSent) {
+        // Iframe is ready, fetch and send config
+        configSent = true
+        setBuildStatus('building')
+
+        fetch(`/_preview-config/${src}`)
+          .then(res => res.json())
+          .then((config: PreviewConfig) => {
+            iframe.contentWindow?.postMessage({ type: 'init', config } as PreviewMessage, '*')
+          })
+          .catch(err => {
+            setBuildStatus('error')
+            setBuildError(`Failed to load preview config: ${err.message}`)
+          })
+      }
+
+      if (msg.type === 'built') {
+        const result = msg.result as BuildResult
+        if (result.success) {
+          setBuildStatus('ready')
+          setBuildTime(result.buildTime || null)
+          setBuildError(null)
+        } else {
+          setBuildStatus('error')
+          setBuildError(result.error || 'Build failed')
+        }
+      }
+
+      if (msg.type === 'error') {
+        setBuildStatus('error')
+        setBuildError(msg.error)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [mode, src])
+
   // Drag handlers
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     if (!pillRef.current) return
@@ -344,14 +406,36 @@ export function Preview({ src, height = 400, title }: PreviewProps) {
     >
       {/* Header */}
       <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>
-        <span className="text-xs text-zinc-400">
-          {currentWidth ? `${currentWidth}px` : '100%'}
-        </span>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
+            {displayTitle}
+          </span>
+          {mode === 'wasm' && buildStatus === 'building' && (
+            <Loader2 className="w-3.5 h-3.5 text-blue-500 animate-spin" />
+          )}
+          {mode === 'wasm' && buildStatus === 'error' && (
+            <span className="text-xs text-red-500">Error</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {mode === 'wasm' && buildTime && (
+            <span className="text-xs text-zinc-400">{buildTime}ms</span>
+          )}
+          <span className="text-xs text-zinc-400">
+            {currentWidth ? `${currentWidth}px` : '100%'}
+          </span>
+        </div>
       </div>
 
+      {/* Build error display */}
+      {mode === 'wasm' && buildError && (
+        <div className="px-3 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800">
+          <pre className="text-xs text-red-600 dark:text-red-400 whitespace-pre-wrap font-mono overflow-auto max-h-32">
+            {buildError}
+          </pre>
+        </div>
+      )}
+
       {/* Preview area with checkered background */}
       <div
         className="relative bg-zinc-100 dark:bg-zinc-900"