@zap-js/client 0.0.2 → 0.0.5

package/dist/router/codegen-enhanced.js

@@ -0,0 +1,275 @@
+/**
+ * Enhanced Route Code Generator with Layout Support
+ */
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+export function generateEnhancedRouteTree(options) {
+    const { outputDir, routeTree } = options;
+    if (!existsSync(outputDir)) {
+        mkdirSync(outputDir, { recursive: true });
+    }
+    // Generate TypeScript route tree
+    const tsContent = generateTypeScriptRouteTree(routeTree, outputDir);
+    writeFileSync(join(outputDir, 'routeTree.ts'), tsContent);
+    // Generate JSON manifest
+    const manifest = generateManifest(routeTree);
+    writeFileSync(join(outputDir, 'routeManifest.json'), JSON.stringify(manifest, null, 2));
+    // Generate router configuration with layouts
+    const routerConfig = generateRouterConfigWithLayouts(routeTree, outputDir);
+    writeFileSync(join(outputDir, 'routerConfig.ts'), routerConfig);
+}
+function generateTypeScriptRouteTree(tree, outputDir) {
+    const lines = [
+        '/**',
+        ' * Auto-generated by @zap-js/server',
+        ' * DO NOT EDIT MANUALLY',
+        ' */',
+        '',
+        "import { lazy } from 'react';",
+        '',
+    ];
+    // Import ErrorBoundary if needed
+    const hasAnyErrorComponents = tree.routes.some((r) => r.hasErrorComponent);
+    if (hasAnyErrorComponents) {
+        lines.push("import { ErrorBoundary } from '@zap-js/client';");
+    }
+    lines.push('');
+    // Generate layout imports
+    if (tree.layouts.length > 0) {
+        lines.push('// Layout components');
+        for (const layout of tree.layouts) {
+            const varName = layoutToVarName(layout);
+            const relativePath = getRelativeImportPath(outputDir, layout.filePath);
+            lines.push(`const ${varName} = lazy(() => import('${relativePath}'));`);
+        }
+        lines.push('');
+    }
+    // Generate route imports
+    lines.push('// Route components');
+    for (const route of tree.routes.filter(r => r.type === 'page')) {
+        const varName = routeToVarName(route);
+        const relativePath = getRelativeImportPath(outputDir, route.filePath);
+        lines.push(`const ${varName} = lazy(() => import('${relativePath}'));`);
+        if (route.hasErrorComponent) {
+            const errorVarName = routeToErrorVarName(route);
+            const exportName = route.errorComponentExport || 'errorComponent';
+            lines.push(`const ${errorVarName} = lazy(() => import('${relativePath}').then(m => ({ default: m.${exportName} })));`);
+        }
+        if (route.hasPendingComponent) {
+            const pendingVarName = routeToPendingVarName(route);
+            const exportName = route.pendingComponentExport || 'pendingComponent';
+            lines.push(`const ${pendingVarName} = lazy(() => import('${relativePath}').then(m => ({ default: m.${exportName} })));`);
+        }
+        if (route.hasMeta) {
+            const metaVarName = routeToMetaVarName(route);
+            lines.push(`const ${metaVarName} = () => import('${relativePath}').then(m => m.meta);`);
+        }
+    }
+    lines.push('');
+    // Generate layout configuration
+    if (tree.layouts.length > 0) {
+        lines.push('// Layout definitions');
+        lines.push('export const layoutDefinitions = [');
+        for (const layout of tree.layouts) {
+            lines.push('  {');
+            lines.push(`    path: '${layout.urlPath}',`);
+            lines.push(`    component: ${layoutToVarName(layout)},`);
+            if (layout.parentLayout) {
+                const parent = tree.layouts.find(l => l.filePath === layout.parentLayout);
+                if (parent) {
+                    lines.push(`    parentLayout: '${parent.urlPath}',`);
+                }
+            }
+            lines.push('  },');
+        }
+        lines.push('];');
+        lines.push('');
+    }
+    // Generate route configuration
+    lines.push('// Route definitions');
+    lines.push('export const routeDefinitions = [');
+    for (const route of tree.routes.filter(r => r.type === 'page')) {
+        const { pattern, paramNames } = pathToRegexForCodegen(route.urlPath);
+        lines.push('  {');
+        lines.push(`    path: '${route.urlPath}',`);
+        lines.push(`    pattern: ${pattern},`);
+        lines.push(`    paramNames: ${JSON.stringify(paramNames)},`);
+        lines.push(`    component: ${routeToVarName(route)},`);
+        if (route.layoutPath) {
+            const layout = tree.layouts.find(l => l.filePath === route.layoutPath);
+            if (layout) {
+                lines.push(`    layoutPath: '${layout.urlPath}',`);
+            }
+        }
+        if (route.hasErrorComponent) {
+            lines.push(`    errorComponent: ${routeToErrorVarName(route)},`);
+        }
+        if (route.hasPendingComponent) {
+            lines.push(`    pendingComponent: ${routeToPendingVarName(route)},`);
+        }
+        if (route.hasMeta) {
+            lines.push(`    meta: ${routeToMetaVarName(route)},`);
+        }
+        lines.push('  },');
+    }
+    lines.push('];');
+    lines.push('');
+    // Generate API routes
+    if (tree.apiRoutes.length > 0) {
+        lines.push('// API routes for server');
+        lines.push('export const apiRoutes = [');
+        for (const route of tree.apiRoutes) {
+            lines.push('  {');
+            lines.push(`    path: '${route.urlPath}',`);
+            lines.push(`    filePath: '${route.relativePath}',`);
+            lines.push(`    methods: ${JSON.stringify(route.methods || ['GET'])},`);
+            lines.push('  },');
+        }
+        lines.push('];');
+        lines.push('');
+    }
+    // Generate route path type
+    const paths = tree.routes
+        .filter(r => r.type === 'page')
+        .map(r => `  | '${r.urlPath}'`);
+    lines.push('// Type-safe route paths');
+    lines.push(`export type RoutePath =\n${paths.join('\n')};`);
+    lines.push('');
+    // Generate path builder functions
+    lines.push('// Path builder functions');
+    for (const route of tree.routes.filter(r => r.type === 'page' && r.params.length > 0)) {
+        const fnName = urlPathToFunctionName(route.urlPath);
+        const params = route.params
+            .map(p => `${p.name}${p.optional ? '?' : ''}: string`)
+            .join(', ');
+        let template = route.urlPath;
+        for (const param of route.params) {
+            const optionalMarker = param.optional ? '?' : '';
+            if (param.catchAll) {
+                template = template.replace(`*${param.name}${optionalMarker}`, `\${${param.name} || ''}`);
+            }
+            else {
+                template = template.replace(`:${param.name}${optionalMarker}`, `\${${param.name} || ''}`);
+            }
+        }
+        lines.push(`export function ${fnName}(${params}): string {`);
+        lines.push(`  return \`${template}\`.replace(/\\/+$/, '') || '/';`);
+        lines.push('}');
+        lines.push('');
+    }
+    return lines.join('\n');
+}
+function generateRouterConfigWithLayouts(tree, outputDir) {
+    const lines = [
+        '/**',
+        ' * Production Router Configuration',
+        ' * Auto-generated by @zap-js/server',
+        ' */',
+        '',
+        "import type { RouteDefinition, LayoutDefinition } from '@zap-js/client';",
+        "import { routeDefinitions as routes, layoutDefinitions as layouts } from './routeTree.js';",
+        '',
+        '// Re-export for convenience',
+        'export { routes, layouts };',
+        '',
+        '// Route configuration for RouterProvider',
+        'export const routerConfig = {',
+        '  routes,',
+        '  layouts,',
+        '};',
+        '',
+    ];
+    return lines.join('\n');
+}
+function generateManifest(tree) {
+    return {
+        version: '1.0.0',
+        generatedAt: new Date().toISOString(),
+        routes: tree.routes.map((r) => ({
+            ...r,
+            filePath: r.relativePath,
+        })),
+        apiRoutes: tree.apiRoutes.map((r) => ({
+            ...r,
+            filePath: r.relativePath,
+        })),
+    };
+}
+// Helper functions
+function routeToVarName(route) {
+    let name = route.urlPath
+        .replace(/^\//, '')
+        .replace(/\//g, '_')
+        .replace(/[:\*\[\]]/g, '')
+        .replace(/-/g, '_')
+        .replace(/\?/g, '');
+    if (!name)
+        name = 'Index';
+    name = name
+        .split('_')
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join('');
+    return `${name}Route`;
+}
+function routeToErrorVarName(route) {
+    return routeToVarName(route).replace(/Route$/, 'ErrorComponent');
+}
+function routeToPendingVarName(route) {
+    return routeToVarName(route).replace(/Route$/, 'PendingComponent');
+}
+function routeToMetaVarName(route) {
+    return routeToVarName(route).replace(/Route$/, 'Meta');
+}
+function layoutToVarName(layout) {
+    let name = layout.scopePath
+        .replace(/\//g, '_')
+        .replace(/-/g, '_')
+        .replace(/[\[\]]/g, '');
+    if (!name)
+        name = 'Root';
+    name = name
+        .split('_')
+        .filter(Boolean)
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join('');
+    return `${name}Layout`;
+}
+function urlPathToFunctionName(urlPath) {
+    let name = urlPath
+        .replace(/^\//, '')
+        .replace(/\//g, '_')
+        .replace(/[:\*\[\]]/g, '')
+        .replace(/-/g, '_')
+        .replace(/\?/g, '');
+    if (!name)
+        name = 'index';
+    const parts = name.split('_');
+    name = parts[0] + parts.slice(1).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join('');
+    return `${name}Path`;
+}
+function pathToRegexForCodegen(path) {
+    const paramNames = [];
+    let regexStr = path
+        .replace(/\//g, '\\/')
+        .replace(/:\w+\??/g, (match) => {
+        const isOptional = match.endsWith('?');
+        const name = match.slice(1).replace('?', '');
+        paramNames.push(name);
+        return isOptional ? '([^/]*)?' : '([^/]+)';
+    })
+        .replace(/\*\w+\??/g, (match) => {
+        const isOptional = match.endsWith('?');
+        const name = match.slice(1).replace('?', '');
+        paramNames.push(name);
+        return isOptional ? '(.*)?' : '(.+)';
+    });
+    return { pattern: `/^${regexStr}$/`, paramNames };
+}
+function getRelativeImportPath(fromDir, toFile) {
+    let rel = relative(fromDir, toFile);
+    if (!rel.startsWith('.')) {
+        rel = './' + rel;
+    }
+    rel = rel.replace(/\.(tsx?|jsx?)$/, '');
+    return rel;
+}

package/dist/router/codegen.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Route tree code generator
+ *
+ * Generates TypeScript files for:
+ * - routeTree.ts - Route definitions and type-safe paths
+ * - routeManifest.json - JSON manifest for Rust server
+ * - routerConfig.ts - Client-side router configuration
+ */
+import type { RouteTree, CodegenOptions } from './types.js';
+/**
+ * Generate route tree TypeScript file and manifest
+ */
+export declare function generateRouteTree(options: CodegenOptions): void;
+/**
+ * Generate a Rust-compatible route manifest
+ */
+export declare function generateRustManifest(tree: RouteTree): string;