prev-cli 0.1.4 → 0.1.6

package/dist/cli.js

@@ -7,6 +7,7 @@ import { parseArgs } from "util";
 import { createServer as createServer2, build, preview } from "vite";
 
 // src/vite/config.ts
+import { createLogger } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
 import mdx from "@mdx-js/rollup";
@@ -269,6 +270,59 @@ function entryPlugin(rootDir) {
 }
 
 // src/vite/config.ts
+function createFriendlyLogger() {
+  const logger = createLogger("info", { allowClearScreen: false });
+  const hiddenPatterns = [
+    /Re-optimizing dependencies/,
+    /new dependencies optimized/,
+    /optimized dependencies changed/,
+    /Dependencies bundled/,
+    /Pre-bundling dependencies/,
+    /\(client\) ✨/
+  ];
+  const transformMessage = (msg) => {
+    for (const pattern of hiddenPatterns) {
+      if (pattern.test(msg))
+        return null;
+    }
+    if (msg.includes("hmr update")) {
+      const match = msg.match(/hmr update (.+)/);
+      if (match) {
+        return `  ↻ Updated: ${match[1]}`;
+      }
+    }
+    if (msg.includes("page reload")) {
+      return "  ↻ Page reloaded";
+    }
+    return msg;
+  };
+  return {
+    ...logger,
+    info(msg, options) {
+      const transformed = transformMessage(msg);
+      if (transformed)
+        logger.info(transformed, options);
+    },
+    warn(msg, options) {
+      if (!hiddenPatterns.some((p) => p.test(msg))) {
+        logger.warn(msg, options);
+      }
+    },
+    warnOnce(msg, options) {
+      if (!hiddenPatterns.some((p) => p.test(msg))) {
+        logger.warnOnce(msg, options);
+      }
+    },
+    error(msg, options) {
+      logger.error(msg, options);
+    },
+    clearScreen() {},
+    hasErrorLogged(err) {
+      return logger.hasErrorLogged(err);
+    },
+    hasWarned: false
+  };
+}
 function findCliRoot2() {
   let dir = path4.dirname(fileURLToPath2(import.meta.url));
   for (let i = 0;i < 10; i++) {
@@ -315,6 +369,8 @@ async function createViteConfig(options) {
     root: rootDir,
     mode,
     cacheDir,
+    customLogger: createFriendlyLogger(),
+    logLevel: mode === "production" ? "silent" : "info",
     plugins: [
       mdx({
         remarkPlugins: [remarkGfm],
@@ -365,7 +421,9 @@ async function createViteConfig(options) {
       strictPort: false
     },
     build: {
-      outDir: path4.join(rootDir, "dist")
+      outDir: path4.join(rootDir, "dist"),
+      reportCompressedSize: false,
+      chunkSizeWarningLimit: 1e4
     }
   };
 }
@@ -402,6 +460,22 @@ async function findAvailablePort(minPort, maxPort) {
 }
 
 // src/vite/start.ts
+function printWelcome(type) {
+  console.log();
+  console.log("  ✨ prev");
+  console.log();
+  if (type === "dev") {
+    console.log("  Your docs are ready! Open in your browser:");
+  } else {
+    console.log("  Previewing your production build:");
+  }
+}
+function printReady() {
+  console.log();
+  console.log("  Edit your .mdx files and see changes instantly.");
+  console.log("  Press Ctrl+C to stop.");
+  console.log();
+}
 async function startDev(rootDir, options = {}) {
   const port = options.port ?? await getRandomPort();
   const config = await createViteConfig({
@@ -411,20 +485,24 @@ async function startDev(rootDir, options = {}) {
   });
   const server = await createServer2(config);
   await server.listen();
-  console.log();
-  console.log(`  prev dev server running at:`);
+  printWelcome("dev");
   server.printUrls();
-  console.log();
+  printReady();
   return server;
 }
 async function buildSite(rootDir) {
+  console.log();
+  console.log("  ✨ prev build");
+  console.log();
+  console.log("  Building your documentation site...");
   const config = await createViteConfig({
     rootDir,
     mode: "production"
   });
   await build(config);
   console.log();
-  console.log(`  Build complete. Output in ./dist`);
+  console.log("  Done! Your site is ready in ./dist");
+  console.log("  You can deploy this folder anywhere.");
   console.log();
 }
 async function previewSite(rootDir, options = {}) {
@@ -435,10 +513,11 @@ async function previewSite(rootDir, options = {}) {
     port
   });
   const server = await preview(config);
-  console.log();
-  console.log(`  Preview server running at:`);
+  printWelcome("preview");
   server.printUrls();
   console.log();
+  console.log("  Press Ctrl+C to stop.");
+  console.log();
   return server;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@mdx-js/rollup": "^3.0.0",
+    "@terrastruct/d2": "^0.1.33",
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "class-variance-authority": "^0.7.0",

package/src/theme/Layout.tsx

@@ -5,15 +5,16 @@ import './styles.css'
 
 // Lazy-load and render mermaid diagrams
 async function renderMermaidDiagrams() {
-  const codeBlocks = document.querySelectorAll('code.language-mermaid')
+  const codeBlocks = document.querySelectorAll('code.language-mermaid, code.hljs.language-mermaid')
   if (codeBlocks.length === 0) return
 
   const mermaid = await import('mermaid')
   mermaid.default.initialize({ startOnLoad: false, theme: 'neutral' })
 
   for (const block of codeBlocks) {
-    const pre = block.parentElement
-    if (!pre || pre.dataset.mermaidRendered) continue
+    const pre = block.parentElement as HTMLElement
+    if (!pre || pre.dataset.rendered) continue
+    pre.dataset.rendered = 'true'
 
     const code = block.textContent || ''
     const container = document.createElement('div')
@@ -22,19 +23,59 @@ async function renderMermaidDiagrams() {
     try {
       const { svg } = await mermaid.default.render(`mermaid-${Math.random().toString(36).slice(2)}`, code)
       container.innerHTML = svg
-      pre.replaceWith(container)
+      // Hide original instead of replacing (avoids React DOM conflicts)
+      pre.style.display = 'none'
+      pre.insertAdjacentElement('afterend', container)
     } catch (e) {
       console.error('Mermaid render error:', e)
     }
   }
 }
 
+// Lazy-load and render D2 diagrams
+async function renderD2Diagrams() {
+  const codeBlocks = document.querySelectorAll('code.language-d2, code.hljs.language-d2')
+  if (codeBlocks.length === 0) return
+
+  const { D2 } = await import('@terrastruct/d2')
+  const d2 = new D2()
+
+  for (const block of codeBlocks) {
+    const pre = block.parentElement as HTMLElement
+    if (!pre || pre.dataset.rendered) continue
+    pre.dataset.rendered = 'true'
+
+    const code = block.textContent || ''
+    const container = document.createElement('div')
+    container.className = 'd2-diagram'
+
+    try {
+      const result = await d2.compile(code)
+      const svg = await d2.render(result.diagram)
+      container.innerHTML = svg
+      // Hide original instead of replacing (avoids React DOM conflicts)
+      pre.style.display = 'none'
+      pre.insertAdjacentElement('afterend', container)
+    } catch (e) {
+      console.error('D2 render error:', e)
+    }
+  }
+}
+
+// Render all diagrams
+async function renderDiagrams() {
+  await Promise.all([
+    renderMermaidDiagrams(),
+    renderD2Diagrams()
+  ])
+}
+
 export function Layout() {
   const location = useLocation()
 
   useEffect(() => {
-    // Render mermaid after content loads
-    const timer = setTimeout(renderMermaidDiagrams, 100)
+    // Render diagrams after content loads
+    const timer = setTimeout(renderDiagrams, 100)
     return () => clearTimeout(timer)
   }, [location.pathname])