prev-cli 0.13.1 → 0.14.1

package/dist/cli.js

@@ -3,7 +3,8 @@
 // src/cli.ts
 import { parseArgs } from "util";
 import path7 from "path";
-import { existsSync as existsSync5, mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
+import { existsSync as existsSync5, mkdirSync as mkdirSync2, writeFileSync as writeFileSync3, rmSync as rmSync2, readFileSync as readFileSync4 } from "fs";
+import { fileURLToPath as fileURLToPath3 } from "url";
 
 // src/vite/start.ts
 import { createServer as createServer2, build as build2, preview } from "vite";
@@ -960,6 +961,21 @@ async function previewSite(rootDir, options = {}) {
 }
 
 // src/cli.ts
+function getVersion() {
+  try {
+    let dir = path7.dirname(fileURLToPath3(import.meta.url));
+    for (let i = 0;i < 5; i++) {
+      const pkgPath = path7.join(dir, "package.json");
+      if (existsSync5(pkgPath)) {
+        const pkg = JSON.parse(readFileSync4(pkgPath, "utf-8"));
+        if (pkg.name === "prev-cli")
+          return pkg.version;
+      }
+      dir = path7.dirname(dir);
+    }
+  } catch {}
+  return "unknown";
+}
 var { values, positionals } = parseArgs({
   args: process.argv.slice(2),
   options: {
@@ -967,7 +983,8 @@ var { values, positionals } = parseArgs({
     days: { type: "string", short: "d" },
     cwd: { type: "string", short: "c" },
     include: { type: "string", short: "i", multiple: true },
-    help: { type: "boolean", short: "h" }
+    help: { type: "boolean", short: "h" },
+    version: { type: "boolean", short: "v" }
   },
   allowPositionals: true
 });
@@ -982,7 +999,8 @@ Usage:
   prev build [options]        Build for production
   prev preview [options]      Preview production build
   prev create [name]          Create preview in previews/<name>/ (default: "example")
-  prev clean [options]        Remove old cache directories
+  prev clearcache             Clear Vite cache (.vite directory)
+  prev clean [options]        Remove old prev-cli caches
 
 Options:
   -c, --cwd <path>       Set working directory
@@ -990,6 +1008,7 @@ Options:
   -i, --include <dir>    Include dot-prefixed directory (can use multiple times)
   -d, --days <days>      Cache age threshold for clean (default: 30)
   -h, --help             Show this help message
+  -v, --version          Show version number
 
 Previews:
   Previews must be in the previews/ directory at your project root.
@@ -1021,6 +1040,8 @@ Previews:
   Previews are bundled via esbuild-wasm in dev, and pre-compiled
   to standalone HTML files in production builds.
 
+  Browse all previews at /previews (Storybook-like catalog).
+
 Examples:
   prev                       Start dev server on random port
   prev -p 3000               Start dev server on port 3000
@@ -1031,6 +1052,27 @@ Examples:
   prev clean -d 7            Remove caches older than 7 days
 `);
 }
+function clearViteCache(rootDir2) {
+  const viteCacheDir = path7.join(rootDir2, ".vite");
+  const nodeModulesVite = path7.join(rootDir2, "node_modules", ".vite");
+  let cleared = 0;
+  if (existsSync5(viteCacheDir)) {
+    rmSync2(viteCacheDir, { recursive: true });
+    cleared++;
+    console.log(`  ✓ Removed .vite/`);
+  }
+  if (existsSync5(nodeModulesVite)) {
+    rmSync2(nodeModulesVite, { recursive: true });
+    cleared++;
+    console.log(`  ✓ Removed node_modules/.vite/`);
+  }
+  if (cleared === 0) {
+    console.log("  No Vite cache found");
+  } else {
+    console.log(`
+  Cleared ${cleared} cache director${cleared === 1 ? "y" : "ies"}`);
+  }
+}
 function createPreview(rootDir2, name) {
   const previewDir = path7.join(rootDir2, "previews", name);
   if (existsSync5(previewDir)) {
@@ -1176,6 +1218,10 @@ export default function App() {
 `);
 }
 async function main() {
+  if (values.version) {
+    console.log(`prev-cli v${getVersion()}`);
+    process.exit(0);
+  }
   if (values.help) {
     printHelp();
     process.exit(0);
@@ -1202,6 +1248,9 @@ async function main() {
         const previewName = positionals[1] || "example";
         createPreview(rootDir, previewName);
         break;
+      case "clearcache":
+        clearViteCache(rootDir);
+        break;
       default:
         console.error(`Unknown command: ${command}`);
         printHelp();

package/package.json

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

package/src/theme/entry.tsx

@@ -9,6 +9,8 @@ import {
 } from '@tanstack/react-router'
 import { MDXProvider } from '@mdx-js/react'
 import { pages, sidebar } from 'virtual:prev-pages'
+import { previews } from 'virtual:prev-previews'
+import { Preview } from './Preview'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
 import { MetadataBlock } from './MetadataBlock'
@@ -83,6 +85,92 @@ function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta
   )
 }
 
+// Previews catalog - Storybook-like gallery
+function PreviewsCatalog() {
+  if (!previews || previews.length === 0) {
+    return (
+      <div style={{ padding: '40px 20px', textAlign: 'center' }}>
+        <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
+          No Previews Found
+        </h1>
+        <p style={{ color: '#666', marginBottom: '24px' }}>
+          Create your first preview with:
+        </p>
+        <code style={{
+          display: 'inline-block',
+          padding: '12px 20px',
+          backgroundColor: '#f4f4f5',
+          borderRadius: '8px',
+          fontFamily: 'monospace',
+        }}>
+          prev create my-demo
+        </code>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px' }}>
+          Previews
+        </h1>
+        <p style={{ color: '#666' }}>
+          {previews.length} component preview{previews.length !== 1 ? 's' : ''} available
+        </p>
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))',
+        gap: '24px',
+      }}>
+        {previews.map((preview: { name: string; route: string }) => (
+          <div key={preview.name} style={{
+            border: '1px solid #e4e4e7',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            backgroundColor: '#fff',
+          }}>
+            <div style={{
+              padding: '12px 16px',
+              borderBottom: '1px solid #e4e4e7',
+              backgroundColor: '#fafafa',
+            }}>
+              <h2 style={{ fontSize: '16px', fontWeight: 600, margin: 0 }}>
+                {preview.name}
+              </h2>
+              <code style={{
+                fontSize: '12px',
+                color: '#666',
+                fontFamily: 'monospace',
+              }}>
+                previews/{preview.name}/
+              </code>
+            </div>
+            <Preview src={preview.name} height={300} />
+          </div>
+        ))}
+      </div>
+
+      <div style={{
+        marginTop: '40px',
+        padding: '16px',
+        backgroundColor: '#f0f9ff',
+        border: '1px solid #bae6fd',
+        borderRadius: '8px',
+      }}>
+        <p style={{ margin: 0, fontSize: '14px', color: '#0369a1' }}>
+          <strong>Tip:</strong> Embed any preview in your MDX docs with{' '}
+          <code style={{ backgroundColor: '#e0f2fe', padding: '2px 6px', borderRadius: '4px' }}>
+            {'<Preview src="name" />'}
+          </code>
+        </p>
+      </div>
+    </div>
+  )
+}
+
 // Root layout with custom lightweight Layout
 function RootLayout() {
   const pageTree = convertToPageTree(sidebar)
@@ -101,6 +189,13 @@ const rootRoute = createRootRoute({
   component: RootLayout,
 })
 
+// Previews catalog route
+const previewsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/previews',
+  component: PreviewsCatalog,
+})
+
 // Create routes from pages
 const pageRoutes = pages.map((page: { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> }) => {
   const Component = getPageComponent(page.file)
@@ -117,7 +212,7 @@ const pageRoutes = pages.map((page: { route: string; file: string; title?: strin
 })
 
 // Create router
-const routeTree = rootRoute.addChildren(pageRoutes)
+const routeTree = rootRoute.addChildren([previewsRoute, ...pageRoutes])
 const router = createRouter({ routeTree })
 
 // Mount app - RouterProvider must be outermost so TanStack Router context is available