create-velox-app 0.6.31 → 0.6.51

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

@@ -0,0 +1,63 @@
+/**
+ * Client Entry Point
+ *
+ * Hydrates React client components on the client side.
+ * Only pages marked with 'use client' need hydration.
+ * Server-only components remain static HTML.
+ *
+ * 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>
+ */
+
+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';
+// Import client pages (only pages with 'use client' directive)
+import LoginPage from '../app/pages/auth/login.tsx';
+import RegisterPage from '../app/pages/auth/register.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> = {
+  '/auth/login': { Page: LoginPage, Layout: MinimalContent },
+  '/auth/register': { Page: RegisterPage, Layout: MinimalContent },
+};
+
+const rootElement = document.getElementById('root');
+const pathname = window.location.pathname;
+
+// 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) => {
+        // Log hydration mismatches in development
+        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');
+}

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

@@ -0,0 +1,262 @@
+/**
+ * Server Entry Point
+ *
+ * Handles server-side rendering of React Server Components.
+ * Uses h3 event handler for Vinxi compatibility.
+ */
+
+import { PassThrough } from 'node:stream';
+
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import { renderToPipeableStream } from 'react-dom/server';
+
+// Static imports for layout components
+import DashboardLayout from '../app/layouts/dashboard.tsx';
+import MarketingLayout from '../app/layouts/marketing.tsx';
+import MinimalLayout from '../app/layouts/minimal.tsx';
+import RootLayout from '../app/layouts/root.tsx';
+// Static imports for page components
+import NotFoundPage from '../app/pages/_not-found.tsx';
+import LoginPage from '../app/pages/auth/login.tsx';
+import RegisterPage from '../app/pages/auth/register.tsx';
+import DashboardPage from '../app/pages/dashboard/index.tsx';
+import HomePage from '../app/pages/index.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>;
+  regex: RegExp;
+  paramNames: string[];
+  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
+ */
+function compileRoute(pattern: string): { regex: RegExp; paramNames: string[] } {
+  const paramNames: string[] = [];
+
+  const regexStr = pattern
+    .replace(/\[\.\.\.(\w+)\]/g, (_, name) => {
+      paramNames.push(name);
+      return '___CATCH_ALL___';
+    })
+    .replace(/\[(\w+)\]/g, (_, name) => {
+      paramNames.push(name);
+      return '___DYNAMIC___';
+    })
+    .replace(/[.+?^${}()|\\]/g, '\\$&')
+    .replace(/___CATCH_ALL___/g, '(.+)')
+    .replace(/___DYNAMIC___/g, '([^/]+)');
+
+  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
+ */
+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 (order matters - more specific first)
+const routes: RouteDefinition[] = [
+  // Home
+  defineRoute('/', HomePage, [RootLayout, MarketingLayout]),
+  defineRoute('/index', HomePage, [RootLayout, MarketingLayout]),
+
+  // Auth pages (minimal layout - replaces root)
+  defineRoute('/auth/login', LoginPage, [MinimalLayout]),
+  defineRoute('/auth/register', RegisterPage, [MinimalLayout]),
+
+  // Protected pages (dashboard layout)
+  defineRoute('/dashboard', DashboardPage, [RootLayout, DashboardLayout]),
+
+  // Public pages
+  defineRoute('/users', UsersPage, [RootLayout, MarketingLayout]),
+];
+
+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
+ */
+function matchRoute(pathname: string): RouteMatch | null {
+  console.log('[SSR] Matching:', pathname);
+
+  for (const route of routes) {
+    const match = pathname.match(route.regex);
+    if (match) {
+      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);
+
+  const match = matchRoute(pathname);
+
+  if (!match) {
+    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;
+
+  const pageProps: PageProps = {
+    params,
+    searchParams: parseSearchParams(url),
+  };
+
+  try {
+    const pageElement = <PageComponent {...pageProps} />;
+    const html = wrapWithLayouts(pageElement, layouts, params);
+
+    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-auth/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/shared/scripts/check-client-imports.sh

@@ -0,0 +1,75 @@
+#!/bin/bash
+# check-client-imports.sh
+# Checks for server-only imports in client bundle files
+#
+# Usage: ./scripts/check-client-imports.sh
+
+set -e
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# Patterns that should NOT appear in client files
+FORBIDDEN_IMPORTS=(
+  "@veloxts/web/server"
+  "@veloxts/web/actions"
+  "@veloxts/core"
+  "@veloxts/orm"
+  "@veloxts/auth"
+  "@/api/database"
+  "@/api/procedures"
+)
+
+# Client file patterns to check
+CLIENT_FILES=(
+  "src/entry.client.tsx"
+  "src/entry.client.ts"
+)
+
+# Find files with 'use client' directive
+USE_CLIENT_FILES=$(grep -rl "^'use client'" app/ 2>/dev/null || true)
+
+errors=0
+
+echo "Checking for server imports in client files..."
+echo ""
+
+# Check explicit client entry files
+for file in "${CLIENT_FILES[@]}"; do
+  if [ -f "$file" ]; then
+    for pattern in "${FORBIDDEN_IMPORTS[@]}"; do
+      if grep -q "from ['\"]${pattern}" "$file" 2>/dev/null; then
+        echo -e "${RED}ERROR:${NC} $file imports '$pattern'"
+        echo "       Server-only imports cannot be used in client bundles."
+        ((errors++))
+      fi
+    done
+  fi
+done
+
+# Check files with 'use client' directive
+for file in $USE_CLIENT_FILES; do
+  for pattern in "${FORBIDDEN_IMPORTS[@]}"; do
+    if grep -q "from ['\"]${pattern}" "$file" 2>/dev/null; then
+      echo -e "${RED}ERROR:${NC} $file imports '$pattern'"
+      echo "       This file has 'use client' but imports server-only code."
+      ((errors++))
+    fi
+  done
+done
+
+echo ""
+
+if [ $errors -gt 0 ]; then
+  echo -e "${RED}Found $errors server import(s) in client files.${NC}"
+  echo ""
+  echo "Solutions:"
+  echo "1. Use @veloxts/web/client for browser-safe exports"
+  echo "2. Move server logic to files with 'use server' directive"
+  echo "3. Import server actions (not server modules) in client components"
+  exit 1
+else
+  echo -e "${GREEN}No forbidden imports found in client files.${NC}"
+  exit 0
+fi