@vistagenic/vista 0.1.0-alpha.1

package/dist/build/rsc/server-component-loader.js

@@ -0,0 +1,147 @@
+"use strict";
+/**
+ * Vista Server Component Loader
+ *
+ * Webpack loader that transforms server component imports in client bundles.
+ *
+ * When a server component is imported in a client bundle:
+ * 1. The loader detects if the file has 'client load' directive
+ * 2. If NOT a client component, replace the module with a proxy
+ * 3. The proxy provides helpful error messages when misused
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = serverComponentLoader;
+const path_1 = __importDefault(require("path"));
+/**
+ * Check if source has 'client load' directive
+ */
+function hasClientDirective(source) {
+    const trimmed = source.trim();
+    return trimmed.startsWith("'client load'") || trimmed.startsWith('"client load"');
+}
+/**
+ * Extract the component name from exports
+ */
+function extractComponentName(source) {
+    // Try to find "export default function ComponentName" or "export default ComponentName"
+    const defaultFuncMatch = source.match(/export\s+default\s+function\s+([A-Z][a-zA-Z0-9_]*)/);
+    if (defaultFuncMatch)
+        return defaultFuncMatch[1];
+    const defaultClassMatch = source.match(/export\s+default\s+class\s+([A-Z][a-zA-Z0-9_]*)/);
+    if (defaultClassMatch)
+        return defaultClassMatch[1];
+    const defaultConstMatch = source.match(/export\s+default\s+([A-Z][a-zA-Z0-9_]*)/);
+    if (defaultConstMatch)
+        return defaultConstMatch[1];
+    return 'ServerComponent';
+}
+/**
+ * Server Component Loader
+ */
+function serverComponentLoader(source) {
+    const options = this.getOptions();
+    const resourcePath = this.resourcePath;
+    // Only process files in the app directory
+    if (!resourcePath.startsWith(options.appDir)) {
+        return source;
+    }
+    // If this IS a client component, pass through unchanged
+    if (hasClientDirective(source)) {
+        return source;
+    }
+    // This is a server component - we need to check how it's being used
+    //
+    // The key insight: we're building the CLIENT bundle here.
+    // Server components should NOT be in the client bundle at all.
+    //
+    // However, there are valid use cases:
+    // 1. A client component might import a server component's TYPE only
+    // 2. A server component might be passed as children (rendered server-side)
+    //
+    // For safety, we replace the module with a proxy that:
+    // - Exports a function that throws a helpful error
+    // - Has a special marker so the RSC renderer can handle it
+    const relativePath = path_1.default.relative(options.appDir, resourcePath);
+    const componentId = `server:${relativePath.replace(/\\/g, '/').replace(/\.[jt]sx?$/, '')}`;
+    const componentName = extractComponentName(source);
+    // Generate proxy module
+    const proxyModule = `
+// Vista Server Component Proxy
+// This file was transformed because "${relativePath}" is a Server Component
+// Server Components cannot be rendered on the client.
+
+import * as React from 'react';
+
+const componentId = ${JSON.stringify(componentId)};
+const componentName = ${JSON.stringify(componentName)};
+
+function ServerComponentError(props) {
+    if (typeof window !== 'undefined') {
+        console.error(
+            \`[Vista RSC] Attempted to render server component "\${componentName}" on the client.\`,
+            \`\\nServer components can only be rendered on the server.\`,
+            \`\\nTo fix: add 'client load' at the top of the file if you need client-side interactivity.\`
+        );
+    }
+    
+    // In development, show an error UI
+    if (process.env.NODE_ENV === 'development') {
+        return React.createElement('div', {
+            style: {
+                padding: '20px',
+                background: '#fee2e2',
+                border: '2px solid #ef4444',
+                borderRadius: '8px',
+                color: '#991b1b',
+                fontFamily: 'monospace',
+            }
+        }, [
+            React.createElement('h3', { key: 'title', style: { margin: '0 0 10px 0' } }, '⚠️ Server Component Error'),
+            React.createElement('p', { key: 'msg', style: { margin: '0 0 10px 0' } }, 
+                \`Component "\${componentName}" is a Server Component and cannot be rendered on the client.\`
+            ),
+            React.createElement('p', { key: 'fix', style: { margin: 0, fontSize: '12px' } }, 
+                "Add 'client load' at the top of the file to make it a Client Component."
+            ),
+        ]);
+    }
+    
+    // In production, render nothing (the server should have rendered it)
+    return null;
+}
+
+// Mark as server component reference
+ServerComponentError.$$typeof = Symbol.for('vista.server.reference');
+ServerComponentError.$$id = componentId;
+ServerComponentError.$$name = componentName;
+
+// Re-export any named exports as proxies too
+${extractNamedExports(source)
+        .map((name) => `
+export const ${name} = ServerComponentError;
+`)
+        .join('\n')}
+
+export default ServerComponentError;
+`;
+    return proxyModule;
+}
+/**
+ * Extract named exports from source
+ */
+function extractNamedExports(source) {
+    const exports = [];
+    // Match: export const/let/var Name, export function Name, export class Name
+    const namedRegex = /export\s+(?:const|let|var|function|class)\s+([A-Z][a-zA-Z0-9_]*)/g;
+    let match;
+    while ((match = namedRegex.exec(source)) !== null) {
+        exports.push(match[1]);
+    }
+    return exports;
+}
+// Also export the raw loader for Webpack
+module.exports = serverComponentLoader;
+module.exports.default = serverComponentLoader;

package/dist/build/rsc/server-manifest.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Server Component Manifest Generator
+ *
+ * Scans the app directory and builds a manifest of all Server Components.
+ * Server components are all components WITHOUT 'client load' directive.
+ *
+ * Server components:
+ * - Render on the server only
+ * - Have access to server resources (DB, file system, env vars)
+ * - Contribute 0kb to the client JavaScript bundle
+ */
+export interface ServerComponentEntry {
+    /** Unique ID for this component */
+    id: string;
+    /** Relative path from app directory */
+    path: string;
+    /** Absolute file path */
+    absolutePath: string;
+    /** Component type: page, layout, loading, error, component */
+    type: 'page' | 'layout' | 'loading' | 'error' | 'not-found' | 'component';
+    /** Has static metadata export */
+    hasMetadata: boolean;
+    /** Has generateMetadata function */
+    hasGenerateMetadata: boolean;
+    /** List of client components this server component imports */
+    clientDependencies: string[];
+}
+export interface ServerManifest {
+    /** Build ID */
+    buildId: string;
+    /** Map of module ID to server component info */
+    serverModules: Record<string, ServerComponentEntry>;
+    /** Map of path to module ID */
+    pathToId: Record<string, string>;
+    /** Routes discovered */
+    routes: RouteEntry[];
+}
+export interface RouteEntry {
+    /** URL path pattern */
+    pattern: string;
+    /** Page component path */
+    pagePath: string;
+    /** Layout component paths (from root to this route) */
+    layoutPaths: string[];
+    /** Loading component path if exists */
+    loadingPath?: string;
+    /** Error component path if exists */
+    errorPath?: string;
+    /** Route type */
+    type: 'static' | 'dynamic' | 'catch-all';
+}
+/**
+ * Generate the server component manifest
+ */
+export declare function generateServerManifest(cwd: string, appDir: string): ServerManifest;
+/**
+ * Get server component by path
+ */
+export declare function getServerComponent(manifest: ServerManifest, filePath: string): ServerComponentEntry | undefined;
+/**
+ * Check if a path is a server component
+ */
+export declare function isServerComponentPath(manifest: ServerManifest, filePath: string): boolean;

package/dist/build/rsc/server-manifest.js

@@ -0,0 +1,268 @@
+"use strict";
+/**
+ * Server Component Manifest Generator
+ *
+ * Scans the app directory and builds a manifest of all Server Components.
+ * Server components are all components WITHOUT 'client load' directive.
+ *
+ * Server components:
+ * - Render on the server only
+ * - Have access to server resources (DB, file system, env vars)
+ * - Contribute 0kb to the client JavaScript bundle
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateServerManifest = generateServerManifest;
+exports.getServerComponent = getServerComponent;
+exports.isServerComponentPath = isServerComponentPath;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+// Try to load Rust NAPI bindings
+let rustNative = null;
+try {
+    const possiblePaths = [
+        path_1.default.resolve(__dirname, '../../../../../crates/vista-napi'),
+        path_1.default.resolve(__dirname, '../../../../crates/vista-napi'),
+    ];
+    for (const p of possiblePaths) {
+        try {
+            rustNative = require(p);
+            break;
+        }
+        catch (e) {
+            // Try next
+        }
+    }
+}
+catch (e) {
+    // Fallback to JS
+}
+/**
+ * Check if source has 'client load' directive
+ */
+function hasClientDirective(source) {
+    if (rustNative?.isClientComponent) {
+        return rustNative.isClientComponent(source);
+    }
+    const trimmed = source.trim();
+    return trimmed.startsWith("'client load'") || trimmed.startsWith('"client load"');
+}
+/**
+ * Check for metadata exports
+ */
+function analyzeMetadata(source) {
+    if (rustNative?.analyzeMetadata) {
+        const result = rustNative.analyzeMetadata(source);
+        return {
+            hasMetadata: result.has_static_metadata,
+            hasGenerateMetadata: result.has_generate_metadata,
+        };
+    }
+    return {
+        hasMetadata: /export\s+const\s+metadata\b/.test(source),
+        hasGenerateMetadata: /export\s+(async\s+)?function\s+generateMetadata\b/.test(source),
+    };
+}
+/**
+ * Determine component type from file name
+ */
+function getComponentType(fileName) {
+    const base = path_1.default.basename(fileName).replace(/\.[jt]sx?$/, '');
+    switch (base) {
+        case 'page':
+        case 'index':
+            return 'page';
+        case 'layout':
+        case 'root':
+            return 'layout';
+        case 'loading':
+            return 'loading';
+        case 'error':
+            return 'error';
+        case 'not-found':
+            return 'not-found';
+        default:
+            return 'component';
+    }
+}
+/**
+ * Extract client component imports from source
+ */
+function extractClientImports(source, appDir) {
+    const imports = [];
+    // Match import statements
+    const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+['"]([^'"]+)['"]/g;
+    let match;
+    while ((match = importRegex.exec(source)) !== null) {
+        const importPath = match[1];
+        // Skip node_modules
+        if (!importPath.startsWith('.') && !importPath.startsWith('/'))
+            continue;
+        // This is a relative import - we'd need to resolve and check if it's a client component
+        // For now, we'll mark it as a potential dependency
+        imports.push(importPath);
+    }
+    return imports;
+}
+/**
+ * Generate unique module ID
+ */
+function generateModuleId(relativePath) {
+    const normalized = relativePath.replace(/\\/g, '/').replace(/\.[jt]sx?$/, '');
+    return `server:${normalized}`;
+}
+/**
+ * Scan directory recursively for server components
+ */
+function scanForServerComponents(dir, appDir, components) {
+    if (!fs_1.default.existsSync(dir))
+        return;
+    const items = fs_1.default.readdirSync(dir, { withFileTypes: true });
+    for (const item of items) {
+        const fullPath = path_1.default.join(dir, item.name);
+        if (item.isDirectory()) {
+            if (!item.name.startsWith('.') && item.name !== 'node_modules' && item.name !== 'api') {
+                scanForServerComponents(fullPath, appDir, components);
+            }
+        }
+        else if (item.isFile()) {
+            const ext = path_1.default.extname(item.name);
+            if (!['.tsx', '.ts', '.jsx', '.js'].includes(ext))
+                continue;
+            try {
+                const source = fs_1.default.readFileSync(fullPath, 'utf-8');
+                // Only add if NOT a client component
+                if (!hasClientDirective(source)) {
+                    const relativePath = path_1.default.relative(appDir, fullPath);
+                    const moduleId = generateModuleId(relativePath);
+                    const metadata = analyzeMetadata(source);
+                    components.push({
+                        id: moduleId,
+                        path: relativePath,
+                        absolutePath: fullPath,
+                        type: getComponentType(item.name),
+                        hasMetadata: metadata.hasMetadata,
+                        hasGenerateMetadata: metadata.hasGenerateMetadata,
+                        clientDependencies: extractClientImports(source, appDir),
+                    });
+                }
+            }
+            catch (e) {
+                console.warn(`[Vista RSC] Failed to read ${fullPath}:`, e);
+            }
+        }
+    }
+}
+/**
+ * Build route entries from discovered components
+ */
+function buildRoutes(components, appDir) {
+    const routes = [];
+    const pages = components.filter((c) => c.type === 'page');
+    const layouts = components.filter((c) => c.type === 'layout');
+    const loadings = components.filter((c) => c.type === 'loading');
+    const errors = components.filter((c) => c.type === 'error');
+    for (const page of pages) {
+        const pageDir = path_1.default.dirname(page.absolutePath);
+        const relativePath = path_1.default.relative(appDir, pageDir);
+        // Build URL pattern
+        let pattern = '/' + relativePath.replace(/\\/g, '/');
+        let routeType = 'static';
+        // Handle dynamic segments
+        pattern = pattern
+            .replace(/\[\.\.\.([^\]]+)\]/g, (_, name) => {
+            routeType = 'catch-all';
+            return `:${name}*`;
+        })
+            .replace(/\[([^\]]+)\]/g, (_, name) => {
+            if (routeType !== 'catch-all')
+                routeType = 'dynamic';
+            return `:${name}`;
+        });
+        // Handle route groups - remove (groupname) from URL
+        pattern = pattern.replace(/\/\([^)]+\)/g, '');
+        // Root page
+        if (pattern === '/' || pattern === '') {
+            pattern = '/';
+        }
+        // Find layouts in ancestor directories
+        const layoutPaths = [];
+        let currentDir = pageDir;
+        while (currentDir.startsWith(appDir)) {
+            const layout = layouts.find((l) => path_1.default.dirname(l.absolutePath) === currentDir);
+            if (layout) {
+                layoutPaths.unshift(layout.absolutePath);
+            }
+            const parent = path_1.default.dirname(currentDir);
+            if (parent === currentDir)
+                break;
+            currentDir = parent;
+        }
+        // Find loading and error in same directory
+        const loading = loadings.find((l) => path_1.default.dirname(l.absolutePath) === pageDir);
+        const error = errors.find((e) => path_1.default.dirname(e.absolutePath) === pageDir);
+        routes.push({
+            pattern,
+            pagePath: page.absolutePath,
+            layoutPaths,
+            loadingPath: loading?.absolutePath,
+            errorPath: error?.absolutePath,
+            type: routeType,
+        });
+    }
+    // Sort routes: static first, then dynamic, then catch-all
+    routes.sort((a, b) => {
+        const order = { static: 0, dynamic: 1, 'catch-all': 2 };
+        return order[a.type] - order[b.type];
+    });
+    return routes;
+}
+/**
+ * Generate the server component manifest
+ */
+function generateServerManifest(cwd, appDir) {
+    const components = [];
+    scanForServerComponents(appDir, appDir, components);
+    const serverModules = {};
+    const pathToId = {};
+    for (const component of components) {
+        serverModules[component.id] = component;
+        pathToId[component.path] = component.id;
+        pathToId[component.absolutePath] = component.id;
+    }
+    const routes = buildRoutes(components, appDir);
+    // Get or generate build ID
+    const buildIdPath = path_1.default.join(cwd, '.vista', 'BUILD_ID');
+    let buildId = 'dev';
+    try {
+        if (fs_1.default.existsSync(buildIdPath)) {
+            buildId = fs_1.default.readFileSync(buildIdPath, 'utf-8').trim();
+        }
+    }
+    catch (e) {
+        // Use dev
+    }
+    return {
+        buildId,
+        serverModules,
+        pathToId,
+        routes,
+    };
+}
+/**
+ * Get server component by path
+ */
+function getServerComponent(manifest, filePath) {
+    const moduleId = manifest.pathToId[filePath];
+    if (!moduleId)
+        return undefined;
+    return manifest.serverModules[moduleId];
+}
+/**
+ * Check if a path is a server component
+ */
+function isServerComponentPath(manifest, filePath) {
+    return filePath in manifest.pathToId;
+}

package/dist/build/webpack/loaders/vista-flight-loader.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Vista Flight Loader
+ *
+ * Rust-powered webpack loader that detects 'client load' directive
+ * and marks modules with RSC info for proper bundle separation.
+ *
+ * This is similar to Next.js's flight-loader but uses Vista's Rust scanner.
+ */
+import type { LoaderContext } from 'webpack';
+/**
+ * Vista Flight Loader
+ *
+ * Marks modules with RSC info based on 'client load' directive.
+ * Uses Rust for detection when available, falls back to TypeScript.
+ */
+export default function vistaFlightLoader(this: LoaderContext<{}>, source: string): string;
+export declare const raw = false;

package/dist/build/webpack/loaders/vista-flight-loader.js

@@ -0,0 +1,93 @@
+"use strict";
+/**
+ * Vista Flight Loader
+ *
+ * Rust-powered webpack loader that detects 'client load' directive
+ * and marks modules with RSC info for proper bundle separation.
+ *
+ * This is similar to Next.js's flight-loader but uses Vista's Rust scanner.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.raw = void 0;
+exports.default = vistaFlightLoader;
+// Try to load Rust native bindings
+let nativeBindings = null;
+try {
+    nativeBindings = require('../../../../crates/vista-napi');
+}
+catch (e) {
+    // Fall back to TypeScript implementation
+}
+/**
+ * Fallback TypeScript implementation of client directive detection
+ */
+function hasClientDirective(source) {
+    const lines = source.split('\n');
+    for (const line of lines) {
+        const trimmed = line.trim();
+        // Skip empty lines and comments
+        if (!trimmed || trimmed.startsWith('//') || trimmed.startsWith('/*')) {
+            continue;
+        }
+        // Check for 'client load' directive
+        if (trimmed === "'client load';" || trimmed === '"client load";' ||
+            trimmed === "'client load'" || trimmed === '"client load"') {
+            return true;
+        }
+        // If we hit an import or other statement first, it's not a client component
+        if (trimmed.startsWith('import') || trimmed.startsWith('export') ||
+            trimmed.startsWith('const') || trimmed.startsWith('function')) {
+            return false;
+        }
+    }
+    return false;
+}
+/**
+ * Vista Flight Loader
+ *
+ * Marks modules with RSC info based on 'client load' directive.
+ * Uses Rust for detection when available, falls back to TypeScript.
+ */
+function vistaFlightLoader(source) {
+    // Get module's build info
+    const buildInfo = this._module.buildInfo;
+    const fileName = this.resourcePath.split(/[\\/]/).pop() || '';
+    // Only process app directory files
+    if (!this.resourcePath.includes('app')) {
+        return source;
+    }
+    if (!buildInfo.rsc) {
+        // Detect directive using Rust or fallback
+        let isClient = false;
+        let directiveLine = 0;
+        if (nativeBindings) {
+            try {
+                const result = nativeBindings.analyzeClientDirective(source);
+                isClient = result.isClient;
+                directiveLine = result.directiveLine;
+            }
+            catch (e) {
+                // Fallback if Rust call fails
+                isClient = hasClientDirective(source);
+            }
+        }
+        else {
+            isClient = hasClientDirective(source);
+        }
+        // Mark module with RSC info (like Next.js does)
+        buildInfo.rsc = {
+            isClientRef: isClient,
+            type: isClient ? 'client' : 'server',
+            directiveLine
+        };
+        // Debug logging (only when VISTA_DEBUG is set)
+        if (process.env.VISTA_DEBUG && isClient) {
+            console.log(`[Vista Flight Loader] ${fileName}: isClient=${isClient}`);
+        }
+    }
+    // Pass through source unchanged
+    // The loader's job is just to mark modules, not transform code
+    return source;
+}
+// Allow async loading
+exports.raw = false;

package/dist/build/webpack/plugins/vista-flight-plugin.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Vista Flight Client Entry Plugin
+ *
+ * Webpack plugin that creates separate client entries for components
+ * marked with 'client load' directive. Uses Rust scanner for detection.
+ *
+ * This is similar to Next.js's FlightClientEntryPlugin.
+ */
+import webpack from 'webpack';
+interface PluginOptions {
+    appDir: string;
+    dev: boolean;
+}
+interface ClientModuleInfo {
+    moduleId: string | number;
+    absolutePath: string;
+    relativePath: string;
+    exports: string[];
+}
+export declare class VistaFlightPlugin {
+    private appDir;
+    private dev;
+    constructor(options: PluginOptions);
+    apply(compiler: webpack.Compiler): void;
+    /**
+     * Collect information about all modules and their RSC status
+     */
+    private collectModuleInfo;
+    /**
+     * Generate client reference manifest for hydration
+     */
+    private generateClientManifest;
+}
+export declare function getClientModules(): Map<string, ClientModuleInfo>;
+export declare function isClientModule(resourcePath: string): boolean;
+export default VistaFlightPlugin;