@vistagenic/vista 0.1.0-alpha.1

package/dist/client/script.js

@@ -0,0 +1,118 @@
+/**
+ * Vista Script Component
+ *
+ * Optimized script loading with different strategies.
+ * Similar to Next.js Script component.
+ */
+'client load';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Script;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+// Track loaded scripts to prevent duplicates
+const loadedScripts = new Set();
+/**
+ * Script component for optimized script loading
+ */
+function Script({ src, dangerouslySetInnerHTML, strategy = 'afterInteractive', onLoad, onError, onReady, id, ...rest }) {
+    const scriptId = id || src;
+    React.useEffect(() => {
+        // Skip if already loaded
+        if (scriptId && loadedScripts.has(scriptId)) {
+            onLoad?.();
+            return;
+        }
+        const loadScript = () => {
+            const script = document.createElement('script');
+            if (src) {
+                script.src = src;
+                script.async = true;
+                script.onload = () => {
+                    if (scriptId)
+                        loadedScripts.add(scriptId);
+                    onLoad?.();
+                };
+                script.onerror = () => {
+                    onError?.();
+                };
+            }
+            else if (dangerouslySetInnerHTML) {
+                script.innerHTML = dangerouslySetInnerHTML.__html;
+            }
+            // Apply additional attributes
+            Object.entries(rest).forEach(([key, value]) => {
+                if (typeof value === 'string') {
+                    script.setAttribute(key, value);
+                }
+            });
+            document.body.appendChild(script);
+            if (dangerouslySetInnerHTML) {
+                onReady?.();
+            }
+        };
+        switch (strategy) {
+            case 'beforeInteractive':
+                // Already handled during SSR, just mark as loaded
+                if (scriptId)
+                    loadedScripts.add(scriptId);
+                break;
+            case 'afterInteractive':
+                // Load immediately after hydration
+                loadScript();
+                break;
+            case 'lazyOnload':
+                // Load during idle time
+                if ('requestIdleCallback' in window) {
+                    window.requestIdleCallback(loadScript);
+                }
+                else {
+                    setTimeout(loadScript, 200);
+                }
+                break;
+            case 'worker':
+                // Web worker loading (simplified - would need full worker setup)
+                console.warn('[Vista Script] strategy="worker" is experimental');
+                loadScript();
+                break;
+        }
+    }, [src, strategy, scriptId]);
+    // beforeInteractive scripts are rendered in SSR
+    if (strategy === 'beforeInteractive' && src) {
+        return (0, jsx_runtime_1.jsx)("script", { src: src, ...rest });
+    }
+    return null;
+}

package/dist/components/client-island.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Vista ClientIsland Component
+ *
+ * Wraps client components to mark them for hydration.
+ * Usage in server components:
+ *
+ * import { ClientIsland } from 'vista/client-island';
+ * import Counter from './counter';
+ *
+ * <ClientIsland component="counter">
+ *   <Counter />
+ * </ClientIsland>
+ */
+import * as React from 'react';
+interface ClientIslandProps {
+    /** Component ID - must match the registered client component name */
+    component: string;
+    /** Props to pass to the client component for hydration */
+    props?: Record<string, any>;
+    /** Children - the server-rendered content of the client component */
+    children: React.ReactNode;
+}
+/**
+ * ClientIsland wraps client components with hydration markers.
+ *
+ * During SSR, it renders:
+ * <div data-vista-client="counter" data-props="{}">
+ *   {children from SSR}
+ * </div>
+ *
+ * The client then hydrates only these marked islands.
+ */
+export declare function ClientIsland({ component, props, children }: ClientIslandProps): React.ReactElement;
+export default ClientIsland;

package/dist/components/client-island.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * Vista ClientIsland Component
+ *
+ * Wraps client components to mark them for hydration.
+ * Usage in server components:
+ *
+ * import { ClientIsland } from 'vista/client-island';
+ * import Counter from './counter';
+ *
+ * <ClientIsland component="counter">
+ *   <Counter />
+ * </ClientIsland>
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientIsland = ClientIsland;
+const React = __importStar(require("react"));
+/**
+ * ClientIsland wraps client components with hydration markers.
+ *
+ * During SSR, it renders:
+ * <div data-vista-client="counter" data-props="{}">
+ *   {children from SSR}
+ * </div>
+ *
+ * The client then hydrates only these marked islands.
+ */
+function ClientIsland({ component, props = {}, children }) {
+    // Serialize props (exclude functions and React elements)
+    const safeProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (typeof value !== 'function' && !React.isValidElement(value)) {
+            safeProps[key] = value;
+        }
+    }
+    return React.createElement('div', {
+        'data-vista-client': component,
+        'data-props': JSON.stringify(safeProps),
+        style: { display: 'contents' } // Don't affect layout
+    }, children);
+}
+exports.default = ClientIsland;

package/dist/components/client.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Vista Client Component Wrapper
+ *
+ * A wrapper that marks children as client components for hydration.
+ * SSR: Renders the component normally (like Next.js/Astro)
+ * Client: Hydrates the existing DOM (attaches event handlers)
+ *
+ * Usage:
+ * ```tsx
+ * import { Client } from 'vista';
+ *
+ * <Client>
+ *   <Counter />
+ * </Client>
+ * ```
+ */
+import * as React from 'react';
+interface ClientProps {
+    /** Children - client components to hydrate */
+    children: React.ReactNode;
+}
+/**
+ * Wraps child components and marks them for client-side hydration.
+ *
+ * During SSR, components are rendered normally (no placeholders).
+ * On client, hydrateRoot attaches to existing DOM.
+ */
+export declare function Client({ children }: ClientProps): React.ReactElement;
+export default Client;

package/dist/components/client.js

@@ -0,0 +1,102 @@
+"use strict";
+/**
+ * Vista Client Component Wrapper
+ *
+ * A wrapper that marks children as client components for hydration.
+ * SSR: Renders the component normally (like Next.js/Astro)
+ * Client: Hydrates the existing DOM (attaches event handlers)
+ *
+ * Usage:
+ * ```tsx
+ * import { Client } from 'vista';
+ *
+ * <Client>
+ *   <Counter />
+ * </Client>
+ * ```
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Client = Client;
+const React = __importStar(require("react"));
+/**
+ * Wraps child components and marks them for client-side hydration.
+ *
+ * During SSR, components are rendered normally (no placeholders).
+ * On client, hydrateRoot attaches to existing DOM.
+ */
+function Client({ children }) {
+    // Process children and wrap with hydration markers
+    const processedChildren = React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+        // Get component name from displayName, name, or fallback
+        const componentType = child.type;
+        let componentName = 'unknown';
+        if (typeof componentType === 'function') {
+            componentName = componentType.displayName ||
+                componentType.name ||
+                'Component';
+        }
+        else if (typeof componentType === 'string') {
+            // It's a native element - render it normally
+            return child;
+        }
+        // Convert to lowercase for hydration matching
+        const componentId = componentName.toLowerCase();
+        // Serialize safe props (exclude functions and react elements)
+        const safeProps = {};
+        if (child.props) {
+            for (const [key, value] of Object.entries(child.props)) {
+                if (key !== 'children' &&
+                    typeof value !== 'function' &&
+                    !React.isValidElement(value)) {
+                    safeProps[key] = value;
+                }
+            }
+        }
+        // Wrap the child with hydration marker AND render the actual child
+        // This is the Next.js/Astro approach - SSR the content, hydrate on client
+        return React.createElement('div', {
+            key: index,
+            'data-vista-client': componentId,
+            'data-props': JSON.stringify(safeProps),
+            style: { display: 'contents' } // Don't affect layout
+        }, child); // RENDER THE CHILD during SSR!
+    });
+    return React.createElement(React.Fragment, null, processedChildren);
+}
+exports.default = Client;

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Link } from './link';

package/dist/components/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+var link_1 = require("./link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(link_1).default; } });

package/dist/components/link.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function Link({ href, children, className }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/link.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Link;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../router/context");
+function Link({ href, children, className }) {
+    const router = (0, context_1.useRouter)();
+    const handleClick = (e) => {
+        e.preventDefault();
+        router.push(href);
+    };
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: handleClick, className: className, children: children }));
+}

package/dist/config.d.ts

@@ -0,0 +1,10 @@
+import { ImageConfig } from './image/image-config';
+export interface VistaConfig {
+    images?: ImageConfig;
+    react?: any;
+    server?: {
+        port?: number;
+    };
+}
+export declare const defaultConfig: VistaConfig;
+export declare function loadConfig(cwd?: string): VistaConfig;

package/dist/config.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultConfig = void 0;
+exports.loadConfig = loadConfig;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+exports.defaultConfig = {
+    images: {},
+};
+function loadConfig(cwd = process.cwd()) {
+    const tsPath = path_1.default.join(cwd, 'vista.config.ts');
+    const jsPath = path_1.default.join(cwd, 'vista.config.js');
+    try {
+        if (fs_1.default.existsSync(tsPath)) {
+            // We assume ts-node is registered by engine or bin
+            const mod = require(tsPath);
+            return { ...exports.defaultConfig, ...(mod.default || mod) };
+        }
+        else if (fs_1.default.existsSync(jsPath)) {
+            const mod = require(jsPath);
+            return { ...exports.defaultConfig, ...(mod.default || mod) };
+        }
+    }
+    catch (error) {
+        console.error("Error loading vista.config:", error);
+    }
+    return exports.defaultConfig;
+}

package/dist/dev-error.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Vista Error Overlay
+ *
+ * A standalone error overlay that works without React hydration.
+ * Uses inline styles and vanilla JS for interactivity.
+ */
+import React from 'react';
+export interface VistaError {
+    type: 'build' | 'runtime' | 'hydration';
+    message: string;
+    stack?: string;
+    file?: string;
+    line?: number;
+    column?: number;
+    codeFrame?: string;
+}
+interface ErrorOverlayProps {
+    errors: VistaError[];
+}
+export declare function ErrorOverlay({ errors }: ErrorOverlayProps): React.ReactElement;
+export declare class DevErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+}, {
+    hasError: boolean;
+    error: Error | null;
+}> {
+    constructor(props: any);
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: Error;
+    };
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>;
+}
+export { ErrorOverlay as VistaErrorOverlay };
+export { DevErrorBoundary as VistaDevErrorBoundary };