@cloudwerk/vite-plugin 0.1.2 → 0.2.0

package/README.md

@@ -0,0 +1,66 @@
+# @cloudwerk/vite-plugin
+
+Vite plugin for Cloudwerk file-based routing with virtual entry generation.
+
+## Installation
+
+```bash
+npm install @cloudwerk/vite-plugin vite
+```
+
+## Setup
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import cloudwerk from '@cloudwerk/vite-plugin'
+
+export default defineConfig({
+  plugins: [
+    cloudwerk({
+      // Options (all optional)
+      appDir: 'app',        // Directory containing app files
+      routesDir: 'routes',  // Subdirectory for routes
+      renderer: 'hono-jsx', // 'hono-jsx' or 'react'
+      verbose: false,       // Enable debug logging
+    })
+  ]
+})
+```
+
+## Virtual Modules
+
+The plugin generates virtual modules for your application:
+
+| Module | Description |
+|--------|-------------|
+| `virtual:cloudwerk/server-entry` | Server entry with route registration |
+| `virtual:cloudwerk/client-entry` | Client entry for hydration |
+| `virtual:cloudwerk/manifest` | Compiled route manifest |
+
+Import in your code:
+
+```typescript
+import app from 'virtual:cloudwerk/server-entry'
+import manifest from 'virtual:cloudwerk/manifest'
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `appDir` | `string` | `'app'` | Directory containing route files |
+| `routesDir` | `string` | `'routes'` | Subdirectory within appDir for routes |
+| `config` | `object` | - | Override Cloudwerk configuration |
+| `serverEntry` | `string` | - | Custom server entry file path |
+| `clientEntry` | `string` | - | Custom client entry file path |
+| `renderer` | `string` | `'hono-jsx'` | UI renderer (`'hono-jsx'` or `'react'`) |
+| `verbose` | `boolean` | `false` | Enable verbose logging |
+
+## Documentation
+
+For full documentation, visit: https://github.com/squirrelsoft-dev/cloudwerk
+
+## Part of Cloudwerk
+
+This package is part of the [Cloudwerk](https://github.com/squirrelsoft-dev/cloudwerk) monorepo.

package/dist/index.d.ts

@@ -149,7 +149,7 @@ declare function cloudwerkPlugin(options?: CloudwerkVitePluginOptions): Plugin;
  * - Layouts applied to pages in correct order
  * - Middleware chains applied
  * - Route config support
- * - Error and 404 handling
+ * - Error and 404 handling with error.tsx and not-found.tsx support
  *
  * @param manifest - Route manifest from @cloudwerk/core
  * @param scanResult - Scan result with file information

package/dist/index.js

@@ -1,11 +1,13 @@
 // src/plugin.ts
-import * as path from "path";
+import * as path2 from "path";
 import * as fs from "fs";
 import {
   scanRoutes,
   buildRouteManifest,
   resolveLayouts,
   resolveMiddleware,
+  resolveErrorBoundary,
+  resolveNotFoundBoundary,
   loadConfig,
   resolveRoutesPath,
   hasUseClientDirective,
@@ -26,19 +28,56 @@ var RESOLVED_VIRTUAL_IDS = {
 };
 
 // src/virtual-modules/server-entry.ts
+import * as path from "path";
 function generateServerEntry(manifest, scanResult, options) {
   const imports = [];
   const pageRegistrations = [];
   const routeRegistrations = [];
   const layoutImports = [];
   const middlewareImports = [];
+  const errorImports = [];
+  const notFoundImports = [];
   const importedModules = /* @__PURE__ */ new Set();
   const layoutModules = /* @__PURE__ */ new Map();
   const middlewareModules = /* @__PURE__ */ new Map();
+  const errorModules = /* @__PURE__ */ new Map();
+  const notFoundModules = /* @__PURE__ */ new Map();
   let pageIndex = 0;
   let routeIndex = 0;
   let layoutIndex = 0;
   let middlewareIndex = 0;
+  let errorIndex = 0;
+  let notFoundIndex = 0;
+  for (const err of scanResult.errors) {
+    if (!importedModules.has(err.absolutePath)) {
+      const varName = `error_${errorIndex++}`;
+      errorImports.push(`import * as ${varName} from '${err.absolutePath}'`);
+      errorModules.set(err.absolutePath, varName);
+      importedModules.add(err.absolutePath);
+    }
+  }
+  for (const nf of scanResult.notFound) {
+    if (!importedModules.has(nf.absolutePath)) {
+      const varName = `notFound_${notFoundIndex++}`;
+      notFoundImports.push(`import * as ${varName} from '${nf.absolutePath}'`);
+      notFoundModules.set(nf.absolutePath, varName);
+      importedModules.add(nf.absolutePath);
+    }
+  }
+  const errorBoundaryMapEntries = [];
+  for (const err of scanResult.errors) {
+    const dir = path.posix.dirname(err.relativePath);
+    const normalizedDir = dir === "." ? "" : dir;
+    const varName = errorModules.get(err.absolutePath);
+    errorBoundaryMapEntries.push(`  ['${normalizedDir}', ${varName}]`);
+  }
+  const notFoundBoundaryMapEntries = [];
+  for (const nf of scanResult.notFound) {
+    const dir = path.posix.dirname(nf.relativePath);
+    const normalizedDir = dir === "." ? "" : dir;
+    const varName = notFoundModules.get(nf.absolutePath);
+    notFoundBoundaryMapEntries.push(`  ['${normalizedDir}', ${varName}]`);
+  }
   for (const route of manifest.routes) {
     for (const middlewarePath of route.middleware) {
       if (!importedModules.has(middlewarePath)) {
@@ -63,15 +102,17 @@ function generateServerEntry(manifest, scanResult, options) {
       imports.push(`import * as ${varName} from '${route.absolutePath}'`);
       const layoutChain = route.layouts.map((p) => layoutModules.get(p)).join(", ");
       const middlewareChain = route.middleware.map((p) => middlewareModules.get(p)).join(", ");
+      const errorModule = route.errorBoundary ? errorModules.get(route.errorBoundary) : null;
+      const notFoundModule = route.notFoundBoundary ? notFoundModules.get(route.notFoundBoundary) : null;
       const hasOptionalCatchAll = route.segments.some((s) => s.type === "optionalCatchAll");
       if (hasOptionalCatchAll) {
         const basePath = route.urlPattern.replace(/\/:[^/]+\{\.\*\}$/, "") || "/";
         pageRegistrations.push(
-          `  registerPage(app, '${basePath}', ${varName}, [${layoutChain}], [${middlewareChain}])`
+          `  registerPage(app, '${basePath}', ${varName}, [${layoutChain}], [${middlewareChain}], ${errorModule || "null"}, ${notFoundModule || "null"})`
         );
       }
       pageRegistrations.push(
-        `  registerPage(app, '${route.urlPattern}', ${varName}, [${layoutChain}], [${middlewareChain}])`
+        `  registerPage(app, '${route.urlPattern}', ${varName}, [${layoutChain}], [${middlewareChain}], ${errorModule || "null"}, ${notFoundModule || "null"})`
       );
     } else if (route.fileType === "route") {
       const varName = `route_${routeIndex++}`;
@@ -89,7 +130,7 @@ function generateServerEntry(manifest, scanResult, options) {
  */
 
 import { Hono } from 'hono'
-import { contextMiddleware, createHandlerAdapter, createMiddlewareAdapter, setRouteConfig } from '@cloudwerk/core/runtime'
+import { contextMiddleware, createHandlerAdapter, createMiddlewareAdapter, setRouteConfig, NotFoundError, RedirectError } from '@cloudwerk/core/runtime'
 import { setActiveRenderer } from '@cloudwerk/ui'
 
 // Page and Route Imports
@@ -101,13 +142,151 @@ ${layoutImports.join("\n")}
 // Middleware Imports
 ${middlewareImports.join("\n")}
 
+// Error Boundary Imports
+${errorImports.join("\n")}
+
+// Not-Found Boundary Imports
+${notFoundImports.join("\n")}
+
+// ============================================================================
+// Boundary Maps for Runtime Lookup
+// ============================================================================
+
+const errorBoundaryMap = new Map([
+${errorBoundaryMapEntries.join(",\n")}
+])
+
+const notFoundBoundaryMap = new Map([
+${notFoundBoundaryMapEntries.join(",\n")}
+])
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Generate a unique error digest for matching server logs.
+ */
+function generateErrorDigest() {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8)
+}
+
+/**
+ * Find the closest error boundary for a given URL path.
+ * Walks from closest directory to root, returning first match.
+ */
+function findClosestErrorBoundary(urlPath) {
+  // Convert URL path to directory segments
+  const segments = urlPath.split('/').filter(Boolean)
+
+  // Walk from closest to root
+  while (segments.length >= 0) {
+    const dir = segments.join('/')
+    const boundary = errorBoundaryMap.get(dir)
+    if (boundary) {
+      return boundary
+    }
+    if (segments.length === 0) break
+    segments.pop()
+  }
+
+  return null
+}
+
+/**
+ * Find the closest not-found boundary for a given URL path.
+ * Walks from closest directory to root, returning first match.
+ */
+function findClosestNotFoundBoundary(urlPath) {
+  // Convert URL path to directory segments
+  const segments = urlPath.split('/').filter(Boolean)
+
+  // Walk from closest to root
+  while (segments.length >= 0) {
+    const dir = segments.join('/')
+    const boundary = notFoundBoundaryMap.get(dir)
+    if (boundary) {
+      return boundary
+    }
+    if (segments.length === 0) break
+    segments.pop()
+  }
+
+  return null
+}
+
+/**
+ * Render an error page with the given error boundary module.
+ */
+async function renderErrorPage(error, errorModule, layoutModules, layoutLoaderData, params, searchParams, errorType) {
+  // Add digest to error for log matching
+  const digest = generateErrorDigest()
+  error.digest = digest
+
+  // Build error boundary props
+  const errorProps = {
+    error: {
+      message: error.message,
+      digest,
+      stack: error.stack,
+    },
+    errorType,
+    reset: () => {}, // No-op on server
+    params,
+    searchParams,
+  }
+
+  // Render error boundary
+  let element = await Promise.resolve(errorModule.default(errorProps))
+
+  // Wrap with layouts if available
+  for (let i = layoutModules.length - 1; i >= 0; i--) {
+    const Layout = layoutModules[i].default
+    const layoutProps = {
+      children: element,
+      params,
+      ...layoutLoaderData[i],
+    }
+    element = await Promise.resolve(Layout(layoutProps))
+  }
+
+  return renderWithHydration(element, 500)
+}
+
+/**
+ * Render a not-found page with the given not-found boundary module.
+ */
+async function renderNotFoundPage(notFoundModule, layoutModules, layoutLoaderData, params, searchParams) {
+  // Build not-found props
+  const notFoundProps = {
+    params,
+    searchParams,
+  }
+
+  // Render not-found boundary
+  let element = await Promise.resolve(notFoundModule.default(notFoundProps))
+
+  // Wrap with layouts if available
+  for (let i = layoutModules.length - 1; i >= 0; i--) {
+    const Layout = layoutModules[i].default
+    const layoutProps = {
+      children: element,
+      params,
+      ...layoutLoaderData[i],
+    }
+    element = await Promise.resolve(Layout(layoutProps))
+  }
+
+  return renderWithHydration(element, 404)
+}
+
 // ============================================================================
 // Route Registration Helpers
 // ============================================================================
 
 const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD']
 
-function registerPage(app, pattern, pageModule, layoutModules, middlewareModules) {
+function registerPage(app, pattern, pageModule, layoutModules, middlewareModules, errorModule, notFoundModule) {
   // Apply middleware (wrap with adapter to convert Cloudwerk middleware to Hono middleware)
   for (const mw of middlewareModules) {
     app.use(pattern, createMiddlewareAdapter(mw))
@@ -128,51 +307,76 @@ function registerPage(app, pattern, pageModule, layoutModules, middlewareModules
     const url = new URL(request.url)
     const searchParams = Object.fromEntries(url.searchParams.entries())
 
-    // Execute layout loaders
+    // Track layout loader data for use in error boundaries
     const layoutLoaderData = []
     const loaderArgs = { params, request, context: c }
 
-    for (const layoutModule of layoutModules) {
-      if (layoutModule.loader) {
-        const data = await Promise.resolve(layoutModule.loader(loaderArgs))
-        layoutLoaderData.push(data ?? {})
-      } else {
-        layoutLoaderData.push({})
+    try {
+      // Execute layout loaders
+      for (const layoutModule of layoutModules) {
+        if (layoutModule.loader) {
+          const data = await Promise.resolve(layoutModule.loader(loaderArgs))
+          layoutLoaderData.push(data ?? {})
+        } else {
+          layoutLoaderData.push({})
+        }
       }
-    }
 
-    // Execute page loader
-    let pageLoaderData = {}
-    if (pageModule.loader) {
-      pageLoaderData = (await Promise.resolve(pageModule.loader(loaderArgs))) ?? {}
-    }
+      // Execute page loader
+      let pageLoaderData = {}
+      if (pageModule.loader) {
+        pageLoaderData = (await Promise.resolve(pageModule.loader(loaderArgs))) ?? {}
+      }
 
-    // Build page props
-    const pageProps = { params, searchParams, ...pageLoaderData }
+      // Build page props
+      const pageProps = { params, searchParams, ...pageLoaderData }
 
-    // Render page
-    let element = await Promise.resolve(pageModule.default(pageProps))
+      // Render page
+      let element = await Promise.resolve(pageModule.default(pageProps))
 
-    // Wrap with layouts (inside-out)
-    for (let i = layoutModules.length - 1; i >= 0; i--) {
-      const Layout = layoutModules[i].default
-      const layoutProps = {
-        children: element,
-        params,
-        ...layoutLoaderData[i],
+      // Wrap with layouts (inside-out)
+      for (let i = layoutModules.length - 1; i >= 0; i--) {
+        const Layout = layoutModules[i].default
+        const layoutProps = {
+          children: element,
+          params,
+          ...layoutLoaderData[i],
+        }
+        element = await Promise.resolve(Layout(layoutProps))
+      }
+
+      // Render the page with hydration script injection
+      return renderWithHydration(element)
+    } catch (error) {
+      // Handle NotFoundError (check both instanceof and name for module duplication)
+      if (error instanceof NotFoundError || error?.name === 'NotFoundError') {
+        if (notFoundModule) {
+          return renderNotFoundPage(notFoundModule, layoutModules, layoutLoaderData, params, searchParams)
+        }
+        // Re-throw to trigger global not-found handler
+        throw error
       }
-      element = await Promise.resolve(Layout(layoutProps))
-    }
 
-    // Render the page with hydration script injection
-    return renderWithHydration(element)
+      // Handle RedirectError (check both instanceof and name for module duplication)
+      if (error instanceof RedirectError || error?.name === 'RedirectError') {
+        return c.redirect(error.url, error.status)
+      }
+
+      // Handle other errors
+      console.error('Page render error:', error.message)
+      if (errorModule) {
+        return renderErrorPage(error, errorModule, layoutModules, layoutLoaderData, params, searchParams, 'loader')
+      }
+      // Re-throw to trigger global error handler
+      throw error
+    }
   })
 }
 
 /**
  * Render element to a Response, injecting hydration script before </body>.
  */
-function renderWithHydration(element) {
+function renderWithHydration(element, status = 200) {
   // Hono JSX elements have toString() for synchronous rendering
   const html = '<!DOCTYPE html>' + String(element)
 
@@ -184,6 +388,7 @@ function renderWithHydration(element) {
     : html + hydrationScript
 
   return new Response(injectedHtml, {
+    status,
     headers: {
       'Content-Type': 'text/html; charset=utf-8',
     },
@@ -240,13 +445,64 @@ ${pageRegistrations.join("\n")}
 ${routeRegistrations.join("\n")}
 
 // 404 handler
-app.notFound((c) => {
-  return c.json({ error: 'Not Found', path: c.req.path }, 404)
+app.notFound(async (c) => {
+  const path = c.req.path
+
+  // API routes return JSON 404
+  if (path.startsWith('/api')) {
+    return c.json({ error: 'Not Found', path }, 404)
+  }
+
+  // Try to find a not-found boundary for this path
+  const notFoundModule = findClosestNotFoundBoundary(path)
+  if (notFoundModule) {
+    return renderNotFoundPage(notFoundModule, [], [], {}, {})
+  }
+
+  // Fallback to JSON 404
+  return c.json({ error: 'Not Found', path }, 404)
 })
 
 // Error handler
-app.onError((err, c) => {
+app.onError(async (err, c) => {
+  const path = c.req.path
+
+  // Handle NotFoundError (check both instanceof and name for module duplication)
+  if (err instanceof NotFoundError || err?.name === 'NotFoundError') {
+    // API routes return JSON 404
+    if (path.startsWith('/api')) {
+      return c.json({ error: 'Not Found', path }, 404)
+    }
+
+    // Try to find a not-found boundary
+    const notFoundModule = findClosestNotFoundBoundary(path)
+    if (notFoundModule) {
+      return renderNotFoundPage(notFoundModule, [], [], {}, {})
+    }
+
+    return c.json({ error: 'Not Found', path }, 404)
+  }
+
+  // Handle RedirectError (check both instanceof and name for module duplication)
+  if (err instanceof RedirectError || err?.name === 'RedirectError') {
+    return c.redirect(err.url, err.status)
+  }
+
+  // Log the error
   console.error('Request error:', err.message)
+
+  // API routes return JSON 500
+  if (path.startsWith('/api')) {
+    return c.json({ error: 'Internal Server Error', message: err.message }, 500)
+  }
+
+  // Try to find an error boundary for this path
+  const errorModule = findClosestErrorBoundary(path)
+  if (errorModule) {
+    return renderErrorPage(err, errorModule, [], [], {}, {}, 'unknown')
+  }
+
+  // Fallback to JSON 500
   return c.json({ error: 'Internal Server Error', message: err.message }, 500)
 })
 
@@ -674,7 +930,9 @@ function cloudwerkPlugin(options = {}) {
       state.scanResult,
       routesPath,
       resolveLayouts,
-      resolveMiddleware
+      resolveMiddleware,
+      resolveErrorBoundary,
+      resolveNotFoundBoundary
     );
     state.serverEntryCache = null;
     state.clientEntryCache = null;
@@ -684,9 +942,9 @@ function cloudwerkPlugin(options = {}) {
   }
   function isRouteFile(filePath) {
     if (!state) return false;
-    const appDir = path.resolve(state.options.root, state.options.appDir);
+    const appDir = path2.resolve(state.options.root, state.options.appDir);
     if (!filePath.startsWith(appDir)) return false;
-    const basename2 = path.basename(filePath);
+    const basename2 = path2.basename(filePath);
     const nameWithoutExt = basename2.replace(/\.(ts|tsx|js|jsx)$/, "");
     return ROUTE_FILE_NAMES.includes(nameWithoutExt);
   }
@@ -712,13 +970,13 @@ function cloudwerkPlugin(options = {}) {
      */
     async configResolved(config) {
       const root = config.root;
-      let detectedServerEntry = options.serverEntry ? path.resolve(root, options.serverEntry) : null;
+      let detectedServerEntry = options.serverEntry ? path2.resolve(root, options.serverEntry) : null;
       if (!detectedServerEntry) {
         const conventionalPaths = [
-          path.resolve(root, "app/server.ts"),
-          path.resolve(root, "app/server.tsx"),
-          path.resolve(root, "src/server.ts"),
-          path.resolve(root, "src/server.tsx")
+          path2.resolve(root, "app/server.ts"),
+          path2.resolve(root, "app/server.tsx"),
+          path2.resolve(root, "src/server.ts"),
+          path2.resolve(root, "src/server.tsx")
         ];
         for (const p of conventionalPaths) {
           if (fs.existsSync(p)) {
@@ -748,6 +1006,8 @@ function cloudwerkPlugin(options = {}) {
           routes: [],
           layouts: /* @__PURE__ */ new Map(),
           middleware: /* @__PURE__ */ new Map(),
+          errorBoundaries: /* @__PURE__ */ new Map(),
+          notFoundBoundaries: /* @__PURE__ */ new Map(),
           errors: [],
           warnings: [],
           generatedAt: /* @__PURE__ */ new Date(),
@@ -773,11 +1033,11 @@ function cloudwerkPlugin(options = {}) {
     configureServer(devServer) {
       server = devServer;
       if (!state) return;
-      const appDir = path.resolve(state.options.root, state.options.appDir);
+      const appDir = path2.resolve(state.options.root, state.options.appDir);
       devServer.watcher.on("add", async (filePath) => {
         if (isRouteFile(filePath)) {
           if (state?.options.verbose) {
-            console.log(`[cloudwerk] Route added: ${path.relative(appDir, filePath)}`);
+            console.log(`[cloudwerk] Route added: ${path2.relative(appDir, filePath)}`);
           }
           await buildManifest(state.options.root);
           invalidateVirtualModules();
@@ -786,7 +1046,7 @@ function cloudwerkPlugin(options = {}) {
       devServer.watcher.on("unlink", async (filePath) => {
         if (isRouteFile(filePath)) {
           if (state?.options.verbose) {
-            console.log(`[cloudwerk] Route removed: ${path.relative(appDir, filePath)}`);
+            console.log(`[cloudwerk] Route removed: ${path2.relative(appDir, filePath)}`);
           }
           await buildManifest(state.options.root);
           invalidateVirtualModules();
@@ -795,7 +1055,7 @@ function cloudwerkPlugin(options = {}) {
       devServer.watcher.on("change", async (filePath) => {
         if (isRouteFile(filePath)) {
           if (state?.options.verbose) {
-            console.log(`[cloudwerk] Route changed: ${path.relative(appDir, filePath)}`);
+            console.log(`[cloudwerk] Route changed: ${path2.relative(appDir, filePath)}`);
           }
           await buildManifest(state.options.root);
           invalidateVirtualModules();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/vite-plugin",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "@swc/core": "^1.3.100",
-    "@cloudwerk/core": "^0.7.1",
-    "@cloudwerk/ui": "^0.7.1"
+    "@cloudwerk/core": "^0.8.0",
+    "@cloudwerk/ui": "^0.8.0"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0",