create-velox-app 0.6.31 → 0.6.51

package/src/templates/source/rsc/app/layouts/root.tsx

@@ -21,19 +21,84 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <title>VeloxTS App</title>
         <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
         <style>{`
-          * {
+          /* Global Reset & Dark Mode Base */
+          *,
+          *::before,
+          *::after {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
+            font: inherit;
+          }
+
+          html {
+            font-size: 16px;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
           }
 
           body {
-            font-family: system-ui, -apple-system, sans-serif;
+            background: #0a0a0a;
+            color: #ededed;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
             line-height: 1.6;
-            color: #1a1a2e;
-            background: #f8f9fa;
+            min-height: 100svh;
+          }
+
+          h1, h2, h3, h4, h5, h6 {
+            text-wrap: balance;
+          }
+
+          p, li, figcaption {
+            text-wrap: pretty;
+          }
+
+          img, picture, svg, video, canvas {
+            max-width: 100%;
           }
 
+          a {
+            color: #00d9ff;
+            text-decoration: none;
+            transition: opacity 0.2s;
+          }
+
+          a:hover {
+            opacity: 0.8;
+          }
+
+          code {
+            font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, "Courier New", monospace;
+            background: #1a1a1a;
+            padding: 0.2em 0.4em;
+            border-radius: 4px;
+            font-size: 0.9em;
+          }
+
+          ::selection {
+            background: #00d9ff;
+            color: #000;
+          }
+
+          ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+          }
+
+          ::-webkit-scrollbar-track {
+            background: #111;
+          }
+
+          ::-webkit-scrollbar-thumb {
+            background: #333;
+            border-radius: 4px;
+          }
+
+          ::-webkit-scrollbar-thumb:hover {
+            background: #444;
+          }
+
+          /* Layout Structure */
           .layout {
             min-height: 100vh;
             display: flex;
@@ -41,8 +106,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
           }
 
           .nav {
-            background: #1a1a2e;
+            background: #111;
             padding: 1rem 2rem;
+            border-bottom: 1px solid #222;
           }
 
           .nav-list {
@@ -51,17 +117,21 @@ export default function RootLayout({ children }: RootLayoutProps) {
             list-style: none;
             max-width: 1200px;
             margin: 0 auto;
+            align-items: center;
           }
 
           .nav-link {
-            color: #e8e8e8;
+            color: #ededed;
             text-decoration: none;
             font-weight: 500;
             transition: color 0.2s;
+            padding: 0.5rem 0.75rem;
+            border-radius: 4px;
           }
 
           .nav-link:hover {
-            color: #6366f1;
+            color: #00d9ff;
+            background: #1a1a1a;
           }
 
           .main {
@@ -73,14 +143,15 @@ export default function RootLayout({ children }: RootLayoutProps) {
           }
 
           .footer {
-            background: #1a1a2e;
-            color: #a8a8b8;
+            background: #111;
+            color: #888;
             text-align: center;
             padding: 1rem;
             font-size: 0.875rem;
+            border-top: 1px solid #222;
           }
 
-          /* Page styles */
+          /* Home Page Hero */
           .home-page .hero {
             text-align: center;
             padding: 3rem 0;
@@ -88,50 +159,64 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
           .home-page h1 {
             font-size: 2.5rem;
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.75rem;
+            font-weight: 700;
           }
 
           .home-page .tagline {
-            color: #666;
+            color: #888;
             font-size: 1.25rem;
           }
 
+          /* Stats Cards */
           .stats {
             display: flex;
             gap: 1rem;
             justify-content: center;
             margin: 2rem 0;
+            flex-wrap: wrap;
           }
 
           .stat-card {
-            background: white;
+            background: #111;
             padding: 1.5rem 2rem;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            border: 1px solid #222;
             text-align: center;
+            min-width: 150px;
+            transition: border-color 0.2s;
+          }
+
+          .stat-card:hover {
+            border-color: #00d9ff;
           }
 
           .stat-value {
             display: block;
             font-size: 2rem;
             font-weight: 700;
-            color: #6366f1;
+            color: #00d9ff;
           }
 
           .stat-label {
-            color: #666;
+            color: #888;
             font-size: 0.875rem;
+            margin-top: 0.5rem;
           }
 
+          /* Features Section */
           .features {
-            background: white;
+            background: #111;
             padding: 2rem;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            border: 1px solid #222;
+            margin-top: 2rem;
           }
 
           .features h2 {
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
+            font-size: 1.5rem;
+            font-weight: 600;
           }
 
           .features ul {
@@ -139,8 +224,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
           }
 
           .features li {
-            padding: 0.5rem 0;
-            border-bottom: 1px solid #eee;
+            padding: 0.75rem 0;
+            border-bottom: 1px solid #222;
+            color: #ededed;
           }
 
           .features li:last-child {
@@ -150,27 +236,23 @@ export default function RootLayout({ children }: RootLayoutProps) {
           .cta {
             text-align: center;
             margin-top: 2rem;
-            color: #666;
+            color: #888;
           }
 
-          code {
-            background: #f0f0f0;
-            padding: 0.2rem 0.4rem;
-            border-radius: 4px;
-            font-family: monospace;
-          }
-
-          /* Users page */
+          /* Users Page */
           .users-page h1 {
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
+            font-size: 2rem;
+            font-weight: 700;
           }
 
           .empty-state {
-            color: #666;
+            color: #888;
             padding: 2rem;
             text-align: center;
-            background: white;
+            background: #111;
             border-radius: 8px;
+            border: 1px solid #222;
           }
 
           .user-list {
@@ -180,21 +262,48 @@ export default function RootLayout({ children }: RootLayoutProps) {
           }
 
           .user-card {
-            background: white;
+            background: #111;
             padding: 1rem;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            border: 1px solid #222;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            transition: border-color 0.2s;
+          }
+
+          .user-card:hover {
+            border-color: #00d9ff;
           }
 
           .user-name {
             font-weight: 600;
+            color: #ededed;
           }
 
           .user-email {
-            color: #666;
+            color: #888;
+            font-size: 0.875rem;
+          }
+
+          /* About Page */
+          .about-page h1 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            font-weight: 700;
+          }
+
+          .about-page h2 {
+            font-size: 1.5rem;
+            margin-top: 2rem;
+            margin-bottom: 1rem;
+            font-weight: 600;
+          }
+
+          .about-page p {
+            color: #888;
+            margin-bottom: 1rem;
+            line-height: 1.8;
           }
         `}</style>
       </head>
@@ -213,8 +322,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
                 </a>
               </li>
               <li>
-                <a href="/settings" className="nav-link">
-                  Settings
+                <a href="/about" className="nav-link">
+                  About
                 </a>
               </li>
               <li>
@@ -222,11 +331,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
                   Docs
                 </a>
               </li>
-              <li>
-                <a href="/api/health" className="nav-link">
-                  API
-                </a>
-              </li>
             </ul>
           </nav>
 
@@ -234,7 +338,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
           <footer className="footer">Built with VeloxTS &bull; React Server Components</footer>
         </div>
-        <script src="/_build/entry.client.js" type="module" />
+        <script src="/_build/src/entry.client.tsx" type="module" />
       </body>
     </html>
   );

package/src/templates/source/rsc/docker-compose.yml

@@ -0,0 +1,21 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: __PROJECT_NAME__-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: ${DATABASE_USER:-user}
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD:-password}
+      POSTGRES_DB: ${DATABASE_NAME:-__PROJECT_NAME__}
+    ports:
+      - "${DATABASE_PORT:-5432}:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${DATABASE_USER:-user} -d ${DATABASE_NAME:-__PROJECT_NAME__}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres_data:

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

@@ -11,7 +11,8 @@
     "db:push": "prisma db push",
     "db:migrate": "prisma migrate dev",
     "db:studio": "prisma studio",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "lint:client": "./scripts/check-client-imports.sh"
   },
   "dependencies": {
     "@prisma/adapter-better-sqlite3": "7.2.0",
@@ -35,7 +36,6 @@
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "prisma": "7.2.0",
-    "typescript": "5.9.3",
-    "vite": "7.3.0"
+    "typescript": "5.9.3"
   }
 }

package/src/templates/source/rsc/src/api/database.ts

@@ -23,7 +23,6 @@ import type { PrismaPg as PrismaPgType } from '@prisma/adapter-pg';
 /* @endif postgresql */
 import type { PrismaClient as PrismaClientType } from '@prisma/client';
 import dotenv from 'dotenv';
-import type { Pool as PoolType } from 'pg';
 
 // Runtime imports using createRequire for Node.js v24+ CJS interop
 const require = createRequire(import.meta.url);
@@ -36,9 +35,6 @@ const { PrismaBetterSqlite3 } = require('@prisma/adapter-better-sqlite3') as {
 const { PrismaPg } = require('@prisma/adapter-pg') as {
   PrismaPg: typeof PrismaPgType;
 };
-const { Pool } = require('pg') as {
-  Pool: typeof PoolType;
-};
 /* @endif postgresql */
 const { PrismaClient } = require('@prisma/client') as {
   PrismaClient: typeof PrismaClientType;
@@ -56,10 +52,6 @@ declare global {
   // Allow global `var` declarations for hot reload in development
   // eslint-disable-next-line no-var
   var __db: PrismaClient | undefined;
-  /* @if postgresql */
-  // eslint-disable-next-line no-var
-  var __pool: InstanceType<typeof PoolType> | undefined;
-  /* @endif postgresql */
 }
 
 /* @if sqlite */
@@ -88,32 +80,24 @@ function createPrismaClient(): PrismaClient {
 /* @endif sqlite */
 /* @if postgresql */
 /**
- * Create a PostgreSQL connection pool.
- * Uses connection pooling for better performance in production.
+ * Create a Prisma client instance using the PostgreSQL adapter.
+ *
+ * Prisma 7 Breaking Change:
+ * - PrismaPg now takes connectionString directly (not a Pool instance)
+ * - Pool management is handled internally by the adapter
  */
-function createPool(): InstanceType<typeof PoolType> {
-  const databaseUrl = process.env.DATABASE_URL;
+function createPrismaClient(): PrismaClient {
+  const connectionString = process.env.DATABASE_URL;
 
-  if (!databaseUrl) {
+  if (!connectionString) {
     throw new Error(
       '[VeloxTS] DATABASE_URL environment variable is not set. ' +
         'Ensure .env file exists in project root with DATABASE_URL defined.'
     );
   }
 
-  return new Pool({
-    connectionString: databaseUrl,
-    max: 10, // Maximum connections in pool
-  });
-}
-
-/**
- * Create a Prisma client instance using the PostgreSQL adapter.
- * Uses connection pooling for efficient database access.
- */
-function createPrismaClient(pool: InstanceType<typeof PoolType>): PrismaClient {
-  // Prisma 7 requires driver adapters for direct connections
-  const adapter = new PrismaPg(pool);
+  // Prisma 7: Pass connectionString directly to PrismaPg (not a Pool)
+  const adapter = new PrismaPg({ connectionString });
   return new PrismaClient({ adapter });
 }
 /* @endif postgresql */
@@ -127,19 +111,16 @@ if (process.env.NODE_ENV !== 'production') {
 }
 /* @endif sqlite */
 /* @if postgresql */
-// Use global singletons for hot reload in development
-const pool = globalThis.__pool ?? createPool();
-export const db = globalThis.__db ?? createPrismaClient(pool);
+// Use global singleton for hot reload in development
+export const db = globalThis.__db ?? createPrismaClient();
 
 if (process.env.NODE_ENV !== 'production') {
-  globalThis.__pool = pool;
   globalThis.__db = db;
 }
 
-// Graceful shutdown - close pool on process exit
+// Graceful shutdown - disconnect Prisma on process exit
 const shutdown = async () => {
   await db.$disconnect();
-  await pool.end();
   process.exit(0);
 };
 

package/src/templates/source/rsc/src/api/handler.ts

@@ -13,7 +13,7 @@
 import { veloxApp } from '@veloxts/core';
 import { databasePlugin } from '@veloxts/orm';
 import { rest } from '@veloxts/router';
-import { createH3ApiHandler } from '@veloxts/web';
+import { createH3ApiHandler } from '@veloxts/web/adapters';
 
 import { db } from './database.js';
 import { healthProcedures } from './procedures/health.js';

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

@@ -1,28 +1,75 @@
 /**
  * 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.
+ * Handles client-side hydration for pages marked with 'use client'.
+ * Server Components remain as static HTML without hydration.
+ *
+ * IMPORTANT: The hydration tree must match exactly what the server rendered.
+ * Server renders: <div id="root"><MinimalContent><Page /></MinimalContent></div>
+ * Client hydrates: <MinimalContent><Page /></MinimalContent>
+ *
+ * This template has no client components by default.
+ * To add interactive pages:
+ * 1. Create a page with 'use client' directive
+ * 2. Import it here
+ * 3. Add it to clientRoutes with its layout
+ *
+ * @example
+ * import MyPage from '../app/pages/my-page.tsx';
+ * import MinimalContent from '../app/layouts/minimal-content.tsx';
+ *
+ * const clientRoutes: Record<string, ClientRoute> = {
+ *   '/my-page': { Page: MyPage, Layout: MinimalContent },
+ * };
  */
 
-import { hydrateRoot } from '@veloxts/web';
+import { StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+// Import content layouts (shared between server and client)
+import MinimalContent from '../app/layouts/minimal-content.tsx';
+
+// Route mapping for client pages with their layouts
+// The layout must match what the server rendered inside <div id="root">
+interface ClientRoute {
+  Page: React.ComponentType;
+  Layout: React.ComponentType<{ children: React.ReactNode }>;
+}
+
+const clientRoutes: Record<string, ClientRoute> = {
+  // No client pages by default in the RSC template
+  // Example: '/my-page': { Page: MyPage, Layout: MinimalContent },
+};
+
+// Suppress unused variable warning - MinimalContent is imported for documentation
+void MinimalContent;
 
 const rootElement = document.getElementById('root');
+const pathname = window.location.pathname;
 
-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.'
+// Only hydrate if this is a client page
+const match = clientRoutes[pathname];
+
+if (rootElement && match) {
+  const { Page, Layout } = match;
+
+  // Hydrate with the exact same tree structure as server rendered
+  hydrateRoot(
+    rootElement,
+    <StrictMode>
+      <Layout>
+        <Page />
+      </Layout>
+    </StrictMode>,
+    {
+      onRecoverableError: (error: unknown) => {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('[VeloxTS] Hydration warning:', error);
+        }
+      },
+    }
   );
+} else {
+  // Server-only page, no hydration needed
+  console.debug('[VeloxTS] Server-rendered page, no client hydration needed');
 }