create-velox-app 0.4.7 → 0.4.9

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

@@ -2,62 +2,25 @@
  * User Procedures
  *
  * CRUD procedures for user management with authentication guards.
+ * Clean implementation without boilerplate:
+ * - No manual DbUser/DbClient interfaces needed
+ * - No toUserResponse() transformation needed
+ * - Output schema automatically serializes Date → string via withTimestamps()
  */
 
 import {
   AuthError,
   authenticated,
-  hasRole,
   defineProcedures,
   GuardError,
-  procedure,
+  hasRole,
+  NotFoundError,
   paginationInputSchema,
+  procedure,
   z,
 } from '@veloxts/velox';
 
-import {
-  CreateUserInput,
-  UpdateUserInput,
-  type User,
-  UserSchema,
-} from '../schemas/user.js';
-
-// ============================================================================
-// Database Types
-// ============================================================================
-
-interface DbUser {
-  id: string;
-  name: string;
-  email: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface DbClient {
-  user: {
-    findUnique: (args: { where: { id: string } }) => Promise<DbUser | null>;
-    findMany: (args?: { skip?: number; take?: number }) => Promise<DbUser[]>;
-    create: (args: { data: { name: string; email: string } }) => Promise<DbUser>;
-    update: (args: { where: { id: string }; data: { name?: string; email?: string } }) => Promise<DbUser>;
-    delete: (args: { where: { id: string } }) => Promise<DbUser>;
-    count: () => Promise<number>;
-  };
-}
-
-function getDb(ctx: { db: unknown }): DbClient {
-  return ctx.db as DbClient;
-}
-
-function toUserResponse(dbUser: DbUser): User {
-  return {
-    id: dbUser.id,
-    name: dbUser.name,
-    email: dbUser.email,
-    createdAt: dbUser.createdAt instanceof Date ? dbUser.createdAt.toISOString() : dbUser.createdAt,
-    updatedAt: dbUser.updatedAt instanceof Date ? dbUser.updatedAt.toISOString() : dbUser.updatedAt,
-  };
-}
+import { CreateUserInput, UpdateUserInput, UserSchema } from '../schemas/user.js';
 
 // ============================================================================
 // User Procedures
@@ -66,11 +29,14 @@ function toUserResponse(dbUser: DbUser): User {
 export const userProcedures = defineProcedures('users', {
   getUser: procedure()
     .input(z.object({ id: z.string().uuid() }))
-    .output(UserSchema.nullable())
+    .output(UserSchema)
     .query(async ({ input, ctx }) => {
-      const db = getDb(ctx);
-      const user = await db.user.findUnique({ where: { id: input.id } });
-      return user ? toUserResponse(user) : null;
+      const user = await ctx.db.user.findUnique({ where: { id: input.id } });
+      if (!user) {
+        throw new NotFoundError(`User with id '${input.id}' not found`);
+      }
+      // Return Prisma object directly - output schema handles Date serialization
+      return user;
     }),
 
   listUsers: procedure()
@@ -86,20 +52,17 @@ export const userProcedures = defineProcedures('users', {
       })
     )
     .query(async ({ input, ctx }) => {
-      const db = getDb(ctx);
       const page = input?.page ?? 1;
       const limit = input?.limit ?? 10;
       const skip = (page - 1) * limit;
 
-      const [dbUsers, total] = await Promise.all([
-        db.user.findMany({ skip, take: limit }),
-        db.user.count(),
+      const [users, total] = await Promise.all([
+        ctx.db.user.findMany({ skip, take: limit }),
+        ctx.db.user.count(),
       ]);
 
-      return {
-        data: dbUsers.map(toUserResponse),
-        meta: { page, limit, total },
-      };
+      // Return Prisma objects directly - output schema serializes dates
+      return { data: users, meta: { page, limit, total } };
     }),
 
   createUser: procedure()
@@ -107,9 +70,7 @@ export const userProcedures = defineProcedures('users', {
     .input(CreateUserInput)
     .output(UserSchema)
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
-      const user = await db.user.create({ data: input });
-      return toUserResponse(user);
+      return ctx.db.user.create({ data: input });
     }),
 
   updateUser: procedure()
@@ -117,7 +78,6 @@ export const userProcedures = defineProcedures('users', {
     .input(z.object({ id: z.string().uuid() }).merge(UpdateUserInput))
     .output(UserSchema)
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
       const { id, ...data } = input;
 
       if (!ctx.user) {
@@ -131,8 +91,7 @@ export const userProcedures = defineProcedures('users', {
         throw new GuardError('ownership', 'You can only update your own profile', 403);
       }
 
-      const updated = await db.user.update({ where: { id }, data });
-      return toUserResponse(updated);
+      return ctx.db.user.update({ where: { id }, data });
     }),
 
   patchUser: procedure()
@@ -140,7 +99,6 @@ export const userProcedures = defineProcedures('users', {
     .input(z.object({ id: z.string().uuid() }).merge(UpdateUserInput))
     .output(UserSchema)
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
       const { id, ...data } = input;
 
       if (!ctx.user) {
@@ -154,8 +112,7 @@ export const userProcedures = defineProcedures('users', {
         throw new GuardError('ownership', 'You can only update your own profile', 403);
       }
 
-      const updated = await db.user.update({ where: { id }, data });
-      return toUserResponse(updated);
+      return ctx.db.user.update({ where: { id }, data });
     }),
 
   deleteUser: procedure()
@@ -163,8 +120,7 @@ export const userProcedures = defineProcedures('users', {
     .input(z.object({ id: z.string().uuid() }))
     .output(z.object({ success: z.boolean() }))
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
-      await db.user.delete({ where: { id: input.id } });
+      await ctx.db.user.delete({ where: { id: input.id } });
       return { success: true };
     }),
 });

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

@@ -1,53 +1,33 @@
 /**
  * User Procedures
+ *
+ * Clean implementation without boilerplate:
+ * - No manual DbUser/DbClient interfaces needed
+ * - No toUserResponse() transformation needed
+ * - Output schema automatically serializes Date → string via withTimestamps()
  */
 
-import { defineProcedures, procedure, paginationInputSchema, z } from '@veloxts/velox';
+import {
+  defineProcedures,
+  NotFoundError,
+  paginationInputSchema,
+  procedure,
+  z,
+} from '@veloxts/velox';
 
 import { CreateUserInput, UpdateUserInput, UserSchema } from '../schemas/user.js';
 
-// Database types
-interface DbUser {
-  id: string;
-  name: string;
-  email: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface DbClient {
-  user: {
-    findUnique: (args: { where: { id: string } }) => Promise<DbUser | null>;
-    findMany: (args?: { skip?: number; take?: number }) => Promise<DbUser[]>;
-    create: (args: { data: { name: string; email: string } }) => Promise<DbUser>;
-    update: (args: { where: { id: string }; data: { name?: string; email?: string } }) => Promise<DbUser>;
-    delete: (args: { where: { id: string } }) => Promise<DbUser>;
-    count: () => Promise<number>;
-  };
-}
-
-function getDb(ctx: { db: unknown }): DbClient {
-  return ctx.db as DbClient;
-}
-
-function toUserResponse(dbUser: DbUser) {
-  return {
-    id: dbUser.id,
-    name: dbUser.name,
-    email: dbUser.email,
-    createdAt: dbUser.createdAt.toISOString(),
-    updatedAt: dbUser.updatedAt.toISOString(),
-  };
-}
-
 export const userProcedures = defineProcedures('users', {
   getUser: procedure()
     .input(z.object({ id: z.string().uuid() }))
-    .output(UserSchema.nullable())
+    .output(UserSchema)
     .query(async ({ input, ctx }) => {
-      const db = getDb(ctx);
-      const user = await db.user.findUnique({ where: { id: input.id } });
-      return user ? toUserResponse(user) : null;
+      const user = await ctx.db.user.findUnique({ where: { id: input.id } });
+      if (!user) {
+        throw new NotFoundError(`User with id '${input.id}' not found`);
+      }
+      // Return Prisma object directly - output schema handles Date serialization
+      return user;
     }),
 
   listUsers: procedure()
@@ -63,57 +43,47 @@ export const userProcedures = defineProcedures('users', {
       })
     )
     .query(async ({ input, ctx }) => {
-      const db = getDb(ctx);
       const page = input?.page ?? 1;
       const limit = input?.limit ?? 10;
       const skip = (page - 1) * limit;
 
-      const [dbUsers, total] = await Promise.all([
-        db.user.findMany({ skip, take: limit }),
-        db.user.count(),
+      const [users, total] = await Promise.all([
+        ctx.db.user.findMany({ skip, take: limit }),
+        ctx.db.user.count(),
       ]);
 
-      return {
-        data: dbUsers.map(toUserResponse),
-        meta: { page, limit, total },
-      };
+      // Return Prisma objects directly - output schema serializes dates
+      return { data: users, meta: { page, limit, total } };
     }),
 
   createUser: procedure()
     .input(CreateUserInput)
     .output(UserSchema)
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
-      const user = await db.user.create({ data: input });
-      return toUserResponse(user);
+      return ctx.db.user.create({ data: input });
     }),
 
   updateUser: procedure()
     .input(z.object({ id: z.string().uuid() }).merge(UpdateUserInput))
     .output(UserSchema)
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
       const { id, ...data } = input;
-      const user = await db.user.update({ where: { id }, data });
-      return toUserResponse(user);
+      return ctx.db.user.update({ where: { id }, data });
     }),
 
   patchUser: procedure()
     .input(z.object({ id: z.string().uuid() }).merge(UpdateUserInput))
     .output(UserSchema)
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
       const { id, ...data } = input;
-      const user = await db.user.update({ where: { id }, data });
-      return toUserResponse(user);
+      return ctx.db.user.update({ where: { id }, data });
     }),
 
   deleteUser: procedure()
     .input(z.object({ id: z.string().uuid() }))
     .output(z.object({ success: z.boolean() }))
     .mutation(async ({ input, ctx }) => {
-      const db = getDb(ctx);
-      await db.user.delete({ where: { id: input.id } });
+      await ctx.db.user.delete({ where: { id: input.id } });
       return { success: true };
     }),
 });

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

@@ -1,17 +1,22 @@
 /**
  * User Schemas
+ *
+ * Uses withTimestamps() for automatic Date → string serialization.
+ * No manual transformation needed in procedure handlers.
  */
 
-import { createIdSchema, emailSchema, z } from '@veloxts/velox';
+import { createIdSchema, emailSchema, withTimestamps, z } from '@veloxts/velox';
 
-export const UserSchema = z.object({
+// Business fields only - timestamps added separately
+const UserFields = z.object({
   id: createIdSchema('uuid'),
   name: z.string().min(1).max(100),
   email: emailSchema,
-  createdAt: z.coerce.date().transform((d) => d.toISOString()),
-  updatedAt: z.coerce.date().transform((d) => d.toISOString()),
 });
 
+// Complete schema with automatic Date → string serialization
+export const UserSchema = withTimestamps(UserFields);
+
 export type User = z.infer<typeof UserSchema>;
 
 export const CreateUserInput = z.object({

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

@@ -99,7 +99,9 @@
   border: 1px solid #222;
   border-radius: 12px;
   padding: 1.5rem;
-  transition: border-color 0.2s, transform 0.2s;
+  transition:
+    border-color 0.2s,
+    transform 0.2s;
 }
 
 .card:hover {
@@ -217,7 +219,9 @@
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s, transform 0.1s;
+  transition:
+    opacity 0.2s,
+    transform 0.1s;
 }
 
 .button:hover {

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

@@ -0,0 +1,42 @@
+/**
+ * VeloxTS API Hooks
+ *
+ * This file creates typed hooks for accessing your backend procedures.
+ * Import `api` in your components for full autocomplete support.
+ *
+ * @example
+ * ```tsx
+ * import { api } from '@/api';
+ * import { useQueryClient } from '@veloxts/client/react';
+ *
+ * function UserProfile({ userId }: { userId: string }) {
+ *   const queryClient = useQueryClient();
+ *
+ *   const { data: user } = api.users.getUser.useQuery({ id: userId });
+ *   const { mutate } = api.users.updateUser.useMutation({
+ *     onSuccess: () => api.users.getUser.invalidate({ id: userId }, queryClient),
+ *   });
+ * }
+ * ```
+ */
+
+import { createVeloxHooks } from '@veloxts/client/react';
+
+import type { AppRouter } from '../../api/src/index.js';
+
+/**
+ * Type-safe API hooks with full autocomplete
+ *
+ * Hooks (call inside components):
+ * - api.namespace.procedure.useQuery(input, options)
+ * - api.namespace.procedure.useMutation(options)
+ * - api.namespace.procedure.useSuspenseQuery(input, options)
+ *
+ * Cache utilities (input first, queryClient last):
+ * - api.namespace.procedure.getQueryKey(input)
+ * - api.namespace.procedure.invalidate(input, queryClient)
+ * - api.namespace.procedure.prefetch(input, queryClient)
+ * - api.namespace.procedure.getData(input, queryClient)
+ * - api.namespace.procedure.setData(input, data, queryClient)
+ */
+export const api = createVeloxHooks<AppRouter>();

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

@@ -1,12 +1,18 @@
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { VeloxProvider } from '@veloxts/client/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider, createRouter } from '@tanstack/react-router';
-import { VeloxProvider } from '@veloxts/client/react';
+
 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';
+/* @if auth */
+// Import routes directly from backend - no manual duplication needed
+import { routes } from '../../api/src/index.js';
+
+/* @endif auth */
 
 // Create router with route tree
 const router = createRouter({ routeTree });
@@ -25,15 +31,33 @@ const getAuthHeaders = () => {
   return token ? { Authorization: `Bearer ${token}` } : {};
 };
 
-// Route mappings for auth procedures with custom .rest() endpoints
-const routes = {
-  auth: {
-    createAccount: '/auth/register',
-    createSession: '/auth/login',
-    createRefresh: '/auth/refresh',
-    deleteSession: '/auth/logout',
-    getMe: '/auth/me',
-  },
+// Automatic token refresh on 401 responses
+const handleUnauthorized = async (): Promise<boolean> => {
+  const refreshToken = localStorage.getItem('refreshToken');
+  if (!refreshToken) return false;
+
+  try {
+    const res = await fetch('/api/auth/refresh', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken }),
+    });
+
+    if (!res.ok) {
+      // Refresh failed - clear tokens
+      localStorage.removeItem('token');
+      localStorage.removeItem('refreshToken');
+      return false;
+    }
+
+    const data = (await res.json()) as { accessToken: string; refreshToken: string };
+    localStorage.setItem('token', data.accessToken);
+    localStorage.setItem('refreshToken', data.refreshToken);
+    return true; // Retry the original request
+  } catch {
+    // Network error during refresh
+    return false;
+  }
 };
 /* @endif auth */
 
@@ -49,7 +73,14 @@ createRoot(rootElement).render(
     </VeloxProvider>
     {/* @endif default */}
     {/* @if auth */}
-    <VeloxProvider<AppRouter> config={{ baseUrl: '/api', headers: getAuthHeaders, routes }}>
+    <VeloxProvider<AppRouter>
+      config={{
+        baseUrl: '/api',
+        headers: getAuthHeaders,
+        routes,
+        onUnauthorized: handleUnauthorized,
+      }}
+    >
       <RouterProvider router={router} />
     </VeloxProvider>
     {/* @endif auth */}

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

@@ -14,7 +14,8 @@
     "@tanstack/react-router": "1.140.5",
     "@veloxts/client": "__VELOXTS_VERSION__",
     "react": "19.2.1",
-    "react-dom": "19.2.1"
+    "react-dom": "19.2.1",
+    "react-error-boundary": "5.0.0"
   },
   "devDependencies": {
     "@types/react": "19.2.7",

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

@@ -1,8 +1,9 @@
-import { createRootRoute, Outlet, Link } from '@tanstack/react-router';
-import styles from '@/App.module.css';
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 /* @if auth */
 import { useQuery } from '@veloxts/client/react';
+
 import type { AppRouter } from '../../../api/src/index.js';
+import styles from '@/App.module.css';
 /* @endif auth */
 
 export const Route = createRootRoute({
@@ -11,7 +12,12 @@ export const Route = createRootRoute({
 
 function RootLayout() {
   /* @if auth */
-  const { data: user } = useQuery<AppRouter, 'auth', 'getMe'>('auth', 'getMe', {}, { retry: false });
+  const { data: user } = useQuery<AppRouter, 'auth', 'getMe'>(
+    'auth',
+    'getMe',
+    {},
+    { retry: false }
+  );
   const isAuthenticated = !!user;
   /* @endif auth */
 
@@ -28,18 +34,30 @@ function RootLayout() {
             Home
           </Link>
           {/* @if default */}
-          <Link to="/users" className={styles.navLink} activeProps={{ className: styles.navLinkActive }}>
+          <Link
+            to="/users"
+            className={styles.navLink}
+            activeProps={{ className: styles.navLinkActive }}
+          >
             Users
           </Link>
           {/* @endif default */}
           {/* @if auth */}
           {isAuthenticated && (
-            <Link to="/users" className={styles.navLink} activeProps={{ className: styles.navLinkActive }}>
+            <Link
+              to="/users"
+              className={styles.navLink}
+              activeProps={{ className: styles.navLinkActive }}
+            >
               Users
             </Link>
           )}
           {/* @endif auth */}
-          <Link to="/about" className={styles.navLink} activeProps={{ className: styles.navLinkActive }}>
+          <Link
+            to="/about"
+            className={styles.navLink}
+            activeProps={{ className: styles.navLinkActive }}
+          >
             About
           </Link>
         </div>

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

@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
+
 import styles from '@/App.module.css';
 
 export const Route = createFileRoute('/about')({
@@ -18,12 +19,17 @@ function AboutPage() {
       <div className={styles.cards}>
         <div className={styles.card}>
           <h2>Type Safety</h2>
-          <p>End-to-end type safety without code generation. Types flow from backend to frontend automatically.</p>
+          <p>
+            End-to-end type safety without code generation. Types flow from backend to frontend
+            automatically.
+          </p>
         </div>
 
         <div className={styles.card}>
           <h2>Developer Experience</h2>
-          <p>Convention over configuration. Sensible defaults with escape hatches when you need them.</p>
+          <p>
+            Convention over configuration. Sensible defaults with escape hatches when you need them.
+          </p>
         </div>
 
         <div className={styles.card}>