prev-cli 0.16.3 → 0.16.4

package/dist/cli.js

@@ -859,6 +859,28 @@ async function createViteConfig(options) {
           });
         }
       },
+      {
+        name: "prev-spa-fallback",
+        configureServer(server) {
+          return () => {
+            server.middlewares.use((req, res, next) => {
+              const urlPath = req.url?.split("?")[0] || "";
+              if (urlPath.startsWith("/__") || urlPath.startsWith("/@") || urlPath.startsWith("/node_modules") || urlPath.includes(".")) {
+                return next();
+              }
+              const indexPath = path7.join(srcRoot2, "theme/index.html");
+              if (existsSync5(indexPath)) {
+                server.transformIndexHtml(req.url, readFileSync4(indexPath, "utf-8")).then((html) => {
+                  res.setHeader("Content-Type", "text/html");
+                  res.end(html);
+                }).catch(next);
+                return;
+              }
+              next();
+            });
+          };
+        }
+      },
       {
         name: "prev-preview-server",
         resolveId(id) {

package/package.json

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

package/src/theme/Preview.tsx

@@ -32,8 +32,8 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
 
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
-  // URL depends on mode
-  const previewUrl = mode === 'wasm' ? '/_preview-runtime' : `/_preview/${src}`
+  // URL depends on mode - wasm mode needs src param
+  const previewUrl = mode === 'wasm' ? `/_preview-runtime?src=${src}` : `/_preview/${src}`
   const displayTitle = title || src
 
   // Calculate current width

package/src/theme/Toolbar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
-import { Link } from '@tanstack/react-router'
+import { Link, useLocation } from '@tanstack/react-router'
 import type { PageTree } from 'fumadocs-core/server'
 import { previews } from 'virtual:prev-previews'
 import { IconMenu2, IconLayoutGrid, IconSun, IconMoon, IconArrowsMaximize, IconArrowsMinimize } from '@tabler/icons-react'
@@ -20,6 +20,8 @@ export function Toolbar({ tree, onThemeToggle, onWidthToggle, isDark, isFullWidt
   const [dragging, setDragging] = useState(false)
   const dragStart = useRef({ x: 0, y: 0 })
   const toolbarRef = useRef<HTMLDivElement>(null)
+  const location = useLocation()
+  const isOnPreviews = location.pathname.startsWith('/previews')
 
   const handleMouseDown = (e: React.MouseEvent) => {
     if ((e.target as HTMLElement).closest('button, a')) return
@@ -63,7 +65,7 @@ export function Toolbar({ tree, onThemeToggle, onWidthToggle, isDark, isFullWidt
       </button>
 
       {previews && previews.length > 0 && (
-        <Link to="/previews" className="toolbar-btn" title="Previews">
+        <Link to="/previews" className={`toolbar-btn ${isOnPreviews ? 'active' : ''}`} title="Previews">
           <IconLayoutGrid size={18} />
         </Link>
       )}

package/src/theme/entry.tsx

@@ -6,6 +6,8 @@ import {
   createRootRoute,
   createRoute,
   Outlet,
+  redirect,
+  Navigate,
 } from '@tanstack/react-router'
 import { MDXProvider } from '@mdx-js/react'
 import { pages, sidebar } from 'virtual:prev-pages'
@@ -257,6 +259,10 @@ const previewDetailRoute = createRoute({
   component: PreviewPage,
 })
 
+// Check if we have an index page (route '/')
+const hasIndexPage = pages.some((page: { route: string }) => page.route === '/')
+const firstPage = pages[0] as { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> } | undefined
+
 // 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)
@@ -272,9 +278,30 @@ const pageRoutes = pages.map((page: { route: string; file: string; title?: strin
   })
 })
 
-// Create router
-const routeTree = rootRoute.addChildren([previewsRoute, previewDetailRoute, ...pageRoutes])
-const router = createRouter({ routeTree })
+// If no index page exists, create a redirect from '/' to the first page
+const indexRedirectRoute = !hasIndexPage && firstPage ? createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => <Navigate to={firstPage.route} />,
+}) : null
+
+// Not found component - redirect to first page or index
+function NotFoundPage() {
+  const targetRoute = firstPage?.route || '/'
+  return <Navigate to={targetRoute} />
+}
+
+// Create router with notFoundRoute
+const routeTree = rootRoute.addChildren([
+  previewsRoute,
+  previewDetailRoute,
+  ...(indexRedirectRoute ? [indexRedirectRoute] : []),
+  ...pageRoutes,
+])
+const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: NotFoundPage,
+})
 
 // Mount app - RouterProvider must be outermost so TanStack Router context is available
 const container = document.getElementById('root')