create-velox-app 0.4.13 → 0.6.23

package/src/templates/source/rsc/src/api/procedures/users.ts

@@ -0,0 +1,87 @@
+/**
+ * User Procedures
+ *
+ * CRUD operations for user management.
+ * Uses direct db import for proper PrismaClient typing.
+ */
+
+import { defineProcedures, procedure } from '@veloxts/router';
+import { z } from 'zod';
+
+import { db } from '../database.js';
+import { CreateUserSchema, UpdateUserSchema, UserSchema } from '../schemas/user.js';
+
+export const userProcedures = defineProcedures('users', {
+  /**
+   * List all users
+   * GET /api/users
+   */
+  listUsers: procedure()
+    .output(z.array(UserSchema))
+    .query(async () => {
+      return db.user.findMany({
+        orderBy: { createdAt: 'desc' },
+      });
+    }),
+
+  /**
+   * Get a single user by ID
+   * GET /api/users/:id
+   */
+  getUser: procedure()
+    .input(z.object({ id: z.string().uuid() }))
+    .output(UserSchema)
+    .query(async ({ input }) => {
+      const user = await db.user.findUnique({
+        where: { id: input.id },
+      });
+
+      if (!user) {
+        throw Object.assign(new Error('User not found'), { statusCode: 404 });
+      }
+
+      return user;
+    }),
+
+  /**
+   * Create a new user
+   * POST /api/users
+   */
+  createUser: procedure()
+    .input(CreateUserSchema)
+    .output(UserSchema)
+    .mutation(async ({ input }) => {
+      return db.user.create({
+        data: input,
+      });
+    }),
+
+  /**
+   * Update an existing user
+   * PUT /api/users/:id
+   */
+  updateUser: procedure()
+    .input(UpdateUserSchema.extend({ id: z.string().uuid() }))
+    .output(UserSchema)
+    .mutation(async ({ input }) => {
+      const { id, ...data } = input;
+      return db.user.update({
+        where: { id },
+        data,
+      });
+    }),
+
+  /**
+   * Delete a user
+   * DELETE /api/users/:id
+   */
+  deleteUser: procedure()
+    .input(z.object({ id: z.string().uuid() }))
+    .output(z.object({ success: z.boolean() }))
+    .mutation(async ({ input }) => {
+      await db.user.delete({
+        where: { id: input.id },
+      });
+      return { success: true };
+    }),
+});

package/src/templates/source/rsc/src/api/schemas/post.ts

@@ -0,0 +1,53 @@
+/**
+ * Post Schemas
+ *
+ * Zod schemas for post validation.
+ */
+
+import { z } from 'zod';
+
+/**
+ * Post entity schema
+ */
+export const PostSchema = z.object({
+  id: z.string().uuid(),
+  title: z.string(),
+  content: z.string().nullable(),
+  published: z.boolean(),
+  createdAt: z.date(),
+  updatedAt: z.date(),
+  userId: z.string().uuid(),
+});
+
+/**
+ * Post with user relation
+ */
+export const PostWithUserSchema = PostSchema.extend({
+  user: z.object({
+    id: z.string().uuid(),
+    name: z.string(),
+  }),
+});
+
+/**
+ * Create post input schema
+ */
+export const CreatePostSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  content: z.string().optional(),
+  published: z.boolean().optional().default(false),
+});
+
+/**
+ * Update post input schema (all fields optional)
+ */
+export const UpdatePostSchema = z.object({
+  title: z.string().min(1).optional(),
+  content: z.string().optional(),
+  published: z.boolean().optional(),
+});
+
+export type Post = z.infer<typeof PostSchema>;
+export type PostWithUser = z.infer<typeof PostWithUserSchema>;
+export type CreatePost = z.infer<typeof CreatePostSchema>;
+export type UpdatePost = z.infer<typeof UpdatePostSchema>;

package/src/templates/source/rsc/src/api/schemas/user.ts

@@ -0,0 +1,38 @@
+/**
+ * User Schemas
+ *
+ * Zod schemas for user validation.
+ */
+
+import { z } from 'zod';
+
+/**
+ * User entity schema
+ */
+export const UserSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string(),
+  email: z.string().email(),
+  createdAt: z.date(),
+  updatedAt: z.date(),
+});
+
+/**
+ * Create user input schema
+ */
+export const CreateUserSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email address'),
+});
+
+/**
+ * Update user input schema (all fields optional)
+ */
+export const UpdateUserSchema = z.object({
+  name: z.string().min(1).optional(),
+  email: z.string().email().optional(),
+});
+
+export type User = z.infer<typeof UserSchema>;
+export type CreateUser = z.infer<typeof CreateUserSchema>;
+export type UpdateUser = z.infer<typeof UpdateUserSchema>;

package/src/templates/source/rsc/src/entry.client.tsx

@@ -0,0 +1,28 @@
+/**
+ * Client Entry Point
+ *
+ * Hydrates the React application on the client side.
+ * For SSR apps, the server streams the component tree as HTML.
+ * We hydrate the existing DOM to attach event handlers.
+ */
+
+import { hydrateRoot } from '@veloxts/web';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement?.firstElementChild) {
+  // Hydrate the server-rendered React tree
+  // This attaches event handlers and makes the app interactive
+  hydrateRoot(rootElement, rootElement.firstElementChild as unknown as React.ReactNode, {
+    onRecoverableError: (error: unknown) => {
+      // Log hydration mismatches in development
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[VeloxTS] Hydration warning:', error);
+      }
+    },
+  });
+} else {
+  console.error(
+    '[VeloxTS] Root element or content not found. Ensure #root exists with server-rendered content.'
+  );
+}

package/src/templates/source/rsc/src/entry.server.tsx

@@ -0,0 +1,304 @@
+/**
+ * Server Entry Point
+ *
+ * Handles server-side rendering of React Server Components.
+ * Uses h3 event handler for Vinxi compatibility.
+ * Supports dynamic routes with [param] and [...catchAll] patterns.
+ */
+
+import { PassThrough } from 'node:stream';
+
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import { renderToPipeableStream } from 'react-dom/server';
+
+import DashboardLayout from '../app/layouts/dashboard.tsx';
+import MarketingLayout from '../app/layouts/marketing.tsx';
+import MinimalLayout from '../app/layouts/minimal.tsx';
+// Static imports for layout components
+import RootLayout from '../app/layouts/root.tsx';
+import NotFoundPage from '../app/pages/_not-found.tsx';
+import ProfilePage from '../app/pages/(dashboard)/profile.tsx';
+import SettingsPage from '../app/pages/(dashboard)/settings.tsx';
+import AboutPage from '../app/pages/(marketing)/about.tsx';
+import DocsPage from '../app/pages/docs/[...slug].tsx';
+// Static imports for page components (using .tsx extension for Vite)
+import HomePage from '../app/pages/index.tsx';
+import PrintPage from '../app/pages/print.tsx';
+import UsersLayout from '../app/pages/users/_layout.tsx';
+import PostDetailPage from '../app/pages/users/[id]/posts/[postId].tsx';
+import UserPostsPage from '../app/pages/users/[id]/posts/index.tsx';
+import NewPostPage from '../app/pages/users/[id]/posts/new.tsx';
+import UserDetailPage from '../app/pages/users/[id].tsx';
+import UsersPage from '../app/pages/users.tsx';
+
+// Page props type
+interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+
+// Layout props type
+interface LayoutProps {
+  children: ReactNode;
+  params: Record<string, string>;
+}
+
+type LayoutComponent = ComponentType<LayoutProps>;
+
+// Route definition with pattern matching
+interface RouteDefinition {
+  pattern: string;
+  component: ComponentType<PageProps>;
+  // Compiled regex and param names for matching
+  regex: RegExp;
+  paramNames: string[];
+  // Layout chain for this route (outermost first)
+  layouts: LayoutComponent[];
+}
+
+// Route match result
+interface RouteMatch {
+  component: ComponentType<PageProps>;
+  params: Record<string, string>;
+  layouts: LayoutComponent[];
+}
+
+/**
+ * Compiles a file-based route pattern into a regex
+ * Supports:
+ *   - Static segments: /users -> matches exactly /users
+ *   - Dynamic segments: /users/[id] -> matches /users/123, extracts id=123
+ *   - Catch-all: /posts/[...slug] -> matches /posts/a/b/c, extracts slug=a/b/c
+ */
+function compileRoute(pattern: string): { regex: RegExp; paramNames: string[] } {
+  const paramNames: string[] = [];
+
+  // Process pattern replacements BEFORE escaping to preserve [...] and [] syntax
+  const regexStr = pattern
+    // Handle catch-all [...param] first (before escaping dots)
+    .replace(/\[\.\.\.(\w+)\]/g, (_, name) => {
+      paramNames.push(name);
+      return '___CATCH_ALL___';
+    })
+    // Handle dynamic [param]
+    .replace(/\[(\w+)\]/g, (_, name) => {
+      paramNames.push(name);
+      return '___DYNAMIC___';
+    })
+    // Now escape special regex chars
+    .replace(/[.+?^${}()|\\]/g, '\\$&')
+    // Restore placeholders with actual regex patterns
+    .replace(/___CATCH_ALL___/g, '(.+)')
+    .replace(/___DYNAMIC___/g, '([^/]+)');
+
+  // Exact match
+  const regex = new RegExp(`^${regexStr}$`);
+  return { regex, paramNames };
+}
+
+/**
+ * Creates a route definition from pattern and component
+ */
+function defineRoute(
+  pattern: string,
+  component: ComponentType<PageProps>,
+  layouts: LayoutComponent[] = [RootLayout]
+): RouteDefinition {
+  const { regex, paramNames } = compileRoute(pattern);
+  return { pattern, component, regex, paramNames, layouts };
+}
+
+/**
+ * Wraps a page element with its layout chain.
+ * Layouts are applied from outermost (root) to innermost.
+ * Uses reduceRight to build the nested component tree.
+ */
+function wrapWithLayouts(
+  pageElement: ReactElement,
+  layouts: LayoutComponent[],
+  params: Record<string, string>
+): ReactElement {
+  return layouts.reduceRight(
+    (children, Layout) => (
+      <Layout key={Layout.name || Layout.displayName || 'layout'} params={params}>
+        {children}
+      </Layout>
+    ),
+    pageElement
+  );
+}
+
+// Route registry with patterns (order matters - more specific first)
+const routes: RouteDefinition[] = [
+  // Home
+  defineRoute('/', HomePage),
+  defineRoute('/index', HomePage),
+
+  // Users section (with segment layout)
+  defineRoute('/users', UsersPage, [RootLayout, UsersLayout]),
+  // Static 'new' before dynamic [postId] for proper precedence
+  defineRoute('/users/[id]/posts/new', NewPostPage, [RootLayout, UsersLayout]),
+  defineRoute('/users/[id]/posts/[postId]', PostDetailPage, [RootLayout, UsersLayout]),
+  defineRoute('/users/[id]/posts', UserPostsPage, [RootLayout, UsersLayout]),
+  defineRoute('/users/[id]', UserDetailPage, [RootLayout, UsersLayout]),
+
+  // Dashboard group pages (with dashboard layout)
+  defineRoute('/settings', SettingsPage, [RootLayout, DashboardLayout]),
+  defineRoute('/profile', ProfilePage, [RootLayout, DashboardLayout]),
+
+  // Marketing group pages
+  defineRoute('/about', AboutPage, [RootLayout, MarketingLayout]),
+
+  // Documentation catch-all
+  defineRoute('/docs/[...slug]', DocsPage),
+
+  // Per-route layout override - uses MinimalLayout instead of RootLayout
+  defineRoute('/print', PrintPage, [MinimalLayout]),
+];
+
+console.log(
+  '[SSR] Available routes:',
+  routes.map((r) => r.pattern)
+);
+
+// H3 event type for Vinxi
+interface H3Event {
+  node: {
+    req: { url?: string };
+    res: {
+      statusCode?: number;
+      setHeader: (name: string, value: string) => void;
+      end: (data?: unknown) => void;
+      write: (chunk: unknown) => boolean;
+    };
+  };
+}
+
+/**
+ * Match a pathname against registered routes
+ * Returns the matched component and extracted params
+ */
+function matchRoute(pathname: string): RouteMatch | null {
+  console.log('[SSR] Matching:', pathname);
+
+  for (const route of routes) {
+    const match = pathname.match(route.regex);
+    if (match) {
+      // Extract params from capture groups
+      const params: Record<string, string> = {};
+      route.paramNames.forEach((name, index) => {
+        params[name] = match[index + 1];
+      });
+
+      console.log('[SSR] Matched:', route.pattern, 'params:', params);
+      return { component: route.component, params, layouts: route.layouts };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Parse search params from URL
+ */
+function parseSearchParams(url: URL): Record<string, string | string[]> {
+  const searchParams: Record<string, string | string[]> = {};
+  url.searchParams.forEach((value, key) => {
+    const existing = searchParams[key];
+    if (existing) {
+      searchParams[key] = Array.isArray(existing) ? [...existing, value] : [existing, value];
+    } else {
+      searchParams[key] = value;
+    }
+  });
+  return searchParams;
+}
+
+/**
+ * H3-compatible SSR handler for Vinxi
+ */
+export default async function ssrHandler(event: H3Event): Promise<void> {
+  const res = event.node.res;
+  const url = new URL(event.node.req.url || '/', 'http://localhost');
+  const pathname = url.pathname;
+
+  console.log('[SSR] Handling:', pathname);
+
+  // Match route and extract params
+  const match = matchRoute(pathname);
+
+  if (!match) {
+    // Use the NotFoundPage component with RootLayout
+    const pageProps: PageProps = {
+      params: {},
+      searchParams: parseSearchParams(url),
+    };
+
+    const notFoundElement = <NotFoundPage {...pageProps} />;
+    const html = wrapWithLayouts(notFoundElement, [RootLayout], {});
+
+    const passThrough = new PassThrough();
+    const { pipe } = renderToPipeableStream(html, {
+      onShellReady() {
+        res.statusCode = 404;
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        passThrough.on('data', (chunk) => res.write(chunk));
+        passThrough.on('end', () => res.end());
+        pipe(passThrough);
+      },
+      onShellError(error) {
+        console.error('[SSR] 404 Shell error:', error);
+        res.statusCode = 404;
+        res.setHeader('Content-Type', 'text/html');
+        res.end(
+          `<!DOCTYPE html><html><body><h1>404 - Page Not Found</h1><p>Path: ${pathname}</p></body></html>`
+        );
+      },
+    });
+    return;
+  }
+
+  const { component: PageComponent, params, layouts } = match;
+
+  // Prepare page props with extracted params and search params
+  const pageProps: PageProps = {
+    params,
+    searchParams: parseSearchParams(url),
+  };
+
+  try {
+    // Create the page element
+    const pageElement = <PageComponent {...pageProps} />;
+
+    // Wrap page with layout chain (layouts provide the HTML shell)
+    const html = wrapWithLayouts(pageElement, layouts, params);
+
+    // Stream the response
+    const passThrough = new PassThrough();
+    const { pipe } = renderToPipeableStream(html, {
+      onShellReady() {
+        res.statusCode = 200;
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        passThrough.on('data', (chunk) => res.write(chunk));
+        passThrough.on('end', () => res.end());
+        pipe(passThrough);
+      },
+      onShellError(error) {
+        console.error('[SSR] Shell error:', error);
+        res.statusCode = 500;
+        res.setHeader('Content-Type', 'text/html');
+        res.end(`<h1>Render Error</h1><pre>${error}</pre>`);
+      },
+      onError(error) {
+        console.error('[SSR] Render error:', error);
+      },
+    });
+  } catch (error) {
+    console.error('[SSR] Handler error:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'text/html');
+    res.end(
+      `<h1>Server Error</h1><pre>${error instanceof Error ? error.stack : String(error)}</pre>`
+    );
+  }
+}

package/src/templates/source/rsc/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/app/*": ["./app/*"]
+    },
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src/**/*", "src/**/*.d.ts", "app/**/*", "*.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/src/templates/source/web/App.module.css

@@ -296,7 +296,7 @@
 .emptyState {
   text-align: center;
   color: #666;
-  padding: 2rem !important;
+  padding: 2rem;
 }
 
 /* Responsive */

package/src/templates/source/web/api.ts

@@ -22,7 +22,14 @@
 
 import { createVeloxHooks } from '@veloxts/client/react';
 
-import type { AppRouter } from '../../api/src/index.js';
+/**
+ * AppRouter type imported from the type-only router file.
+ *
+ * The router.types.ts file contains ONLY type imports and declarations,
+ * which are completely erased at compile time. This means Vite never
+ * scans the @veloxts/* packages when building the frontend.
+ */
+import type { AppRouter } from '../../api/src/router.types.js';
 
 /**
  * Type-safe API hooks with full autocomplete

package/src/templates/source/web/main.tsx

@@ -6,11 +6,11 @@ import { createRoot } from 'react-dom/client';
 import { routeTree } from './routeTree.gen';
 import './styles/global.css';
 
-// Import router type from API for full type safety
-import type { AppRouter } from '../../api/src/index.js';
+// Import router type from browser-safe types file
+import type { AppRouter } from '../../api/src/router.types.js';
 /* @if auth */
-// Import routes directly from backend - no manual duplication needed
-import { routes } from '../../api/src/index.js';
+// Import routes from browser-safe routes file
+import { routes } from '../../api/src/routes.js';
 
 /* @endif auth */
 

package/src/templates/source/web/package.json

@@ -5,25 +5,25 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@tanstack/react-query": "5.90.12",
-    "@tanstack/react-router": "1.140.5",
+    "@tanstack/react-router": "1.141.8",
     "@veloxts/client": "__VELOXTS_VERSION__",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-error-boundary": "5.0.0"
+    "react-error-boundary": "6.0.0"
   },
   "devDependencies": {
-    "@tanstack/router-plugin": "1.140.5",
-    "@types/node": "25.0.2",
+    "@tanstack/router-plugin": "1.142.0",
+    "@types/node": "25.0.3",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.2",
     "typescript": "5.9.3",
-    "vite": "7.2.7"
+    "vite": "7.3.0"
   }
 }

package/src/templates/source/web/routes/__root.tsx

@@ -1,10 +1,10 @@
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
-import styles from '@/App.module.css';
 /* @if auth */
 import { useQuery } from '@veloxts/client/react';
 
-import type { AppRouter } from '../../../api/src/index.js';
+import type { AppRouter } from '../../../api/src/router.types.js';
 /* @endif auth */
+import styles from '@/App.module.css';
 
 export const Route = createRootRoute({
   component: RootLayout,

package/src/templates/source/web/routes/index.auth.tsx

@@ -94,6 +94,7 @@ function HomePage() {
           <div className={styles.card}>
             <h2>Actions</h2>
             <button
+              type="button"
               onClick={() => logout.mutate({})}
               className={styles.button}
               disabled={logout.isPending}
@@ -117,12 +118,14 @@ function HomePage() {
       <div className={styles.authCard}>
         <div className={styles.authTabs}>
           <button
+            type="button"
             className={`${styles.authTab} ${isLogin ? styles.authTabActive : ''}`}
             onClick={() => setIsLogin(true)}
           >
             Login
           </button>
           <button
+            type="button"
             className={`${styles.authTab} ${!isLogin ? styles.authTabActive : ''}`}
             onClick={() => setIsLogin(false)}
           >

package/src/templates/source/web/routes/users.tsx

@@ -40,7 +40,7 @@ function UsersPage() {
  * No need for isLoading/error checks - handled by boundaries.
  */
 function UsersTable() {
-  const { data } = api.users.listUsers.useSuspenseQuery({});
+  const { data } = api.users.listUsers.useSuspenseQuery();
 
   return (
     <div className={styles.tableContainer}>