npm - @vistagenic/vista - Versions diffs - 0.1.0-alpha.1 - Mend

@vistagenic/vista 0.1.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/bin/vista.js +98 -0
package/dist/auth/index.d.ts +8 -0
package/dist/auth/index.js +16 -0
package/dist/bin/build-rsc.d.ts +17 -0
package/dist/bin/build-rsc.js +320 -0
package/dist/bin/build.d.ts +4 -0
package/dist/bin/build.js +336 -0
package/dist/bin/file-scanner.d.ts +66 -0
package/dist/bin/file-scanner.js +399 -0
package/dist/bin/server-component-plugin.d.ts +17 -0
package/dist/bin/server-component-plugin.js +133 -0
package/dist/bin/webpack.config.d.ts +6 -0
package/dist/bin/webpack.config.js +138 -0
package/dist/build/manifest.d.ts +95 -0
package/dist/build/manifest.js +168 -0
package/dist/build/rsc/client-manifest.d.ts +48 -0
package/dist/build/rsc/client-manifest.js +191 -0
package/dist/build/rsc/client-reference-plugin.d.ts +37 -0
package/dist/build/rsc/client-reference-plugin.js +185 -0
package/dist/build/rsc/compiler.d.ts +36 -0
package/dist/build/rsc/compiler.js +311 -0
package/dist/build/rsc/index.d.ts +16 -0
package/dist/build/rsc/index.js +32 -0
package/dist/build/rsc/native-scanner.d.ts +123 -0
package/dist/build/rsc/native-scanner.js +165 -0
package/dist/build/rsc/rsc-renderer.d.ts +99 -0
package/dist/build/rsc/rsc-renderer.js +269 -0
package/dist/build/rsc/server-component-loader.d.ts +19 -0
package/dist/build/rsc/server-component-loader.js +147 -0
package/dist/build/rsc/server-manifest.d.ts +63 -0
package/dist/build/rsc/server-manifest.js +268 -0
package/dist/build/webpack/loaders/vista-flight-loader.d.ts +17 -0
package/dist/build/webpack/loaders/vista-flight-loader.js +93 -0
package/dist/build/webpack/plugins/vista-flight-plugin.d.ts +36 -0
package/dist/build/webpack/plugins/vista-flight-plugin.js +133 -0
package/dist/client/dynamic.d.ts +25 -0
package/dist/client/dynamic.js +68 -0
package/dist/client/font.d.ts +98 -0
package/dist/client/font.js +109 -0
package/dist/client/head.d.ts +79 -0
package/dist/client/head.js +261 -0
package/dist/client/hydration.d.ts +45 -0
package/dist/client/hydration.js +291 -0
package/dist/client/link.d.ts +30 -0
package/dist/client/link.js +188 -0
package/dist/client/navigation.d.ts +28 -0
package/dist/client/navigation.js +116 -0
package/dist/client/router.d.ts +41 -0
package/dist/client/router.js +190 -0
package/dist/client/script.d.ts +51 -0
package/dist/client/script.js +118 -0
package/dist/components/client-island.d.ts +34 -0
package/dist/components/client-island.js +75 -0
package/dist/components/client.d.ts +29 -0
package/dist/components/client.js +102 -0
package/dist/components/index.d.ts +1 -0
package/dist/components/index.js +8 -0
package/dist/components/link.d.ts +6 -0
package/dist/components/link.js +13 -0
package/dist/config.d.ts +10 -0
package/dist/config.js +31 -0
package/dist/dev-error.d.ts +35 -0
package/dist/dev-error.js +310 -0
package/dist/image/get-img-props.d.ts +28 -0
package/dist/image/get-img-props.js +49 -0
package/dist/image/image-config.d.ts +20 -0
package/dist/image/image-config.js +20 -0
package/dist/image/image-loader.d.ts +7 -0
package/dist/image/image-loader.js +14 -0
package/dist/image/index.d.ts +6 -0
package/dist/image/index.js +110 -0
package/dist/image.d.ts +10 -0
package/dist/image.js +7 -0
package/dist/index.d.ts +20 -0
package/dist/index.js +53 -0
package/dist/metadata/generate.d.ts +22 -0
package/dist/metadata/generate.js +324 -0
package/dist/metadata/index.d.ts +7 -0
package/dist/metadata/index.js +26 -0
package/dist/metadata/types.d.ts +325 -0
package/dist/metadata/types.js +15 -0
package/dist/router/context.d.ts +8 -0
package/dist/router/context.js +13 -0
package/dist/router/index.d.ts +2 -0
package/dist/router/index.js +18 -0
package/dist/router/provider.d.ts +5 -0
package/dist/router/provider.js +31 -0
package/dist/server/client-boundary.d.ts +48 -0
package/dist/server/client-boundary.js +133 -0
package/dist/server/engine.d.ts +4 -0
package/dist/server/engine.js +651 -0
package/dist/server/index.d.ts +95 -0
package/dist/server/index.js +177 -0
package/dist/server/rsc-engine.d.ts +20 -0
package/dist/server/rsc-engine.js +588 -0
package/dist/server/rsc-module-system.d.ts +33 -0
package/dist/server/rsc-module-system.js +119 -0
package/dist/types/index.d.ts +4 -0
package/dist/types/index.js +2 -0
package/package.json +103 -0

package/dist/client/head.js ADDED Viewed

@@ -0,0 +1,261 @@
+"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.Head = Head;
+exports.generateMetadataHead = generateMetadataHead;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Vista Head Component
+ *
+ * Allows injection of elements into the document <head>.
+ * Similar to Next.js Head component.
+ */
+const React = __importStar(require("react"));
+// Store for head elements (for SSR)
+const headElements = [];
+/**
+ * Head component - injects children into document head
+ */
+function Head({ children }) {
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const head = document.head;
+        const fragment = document.createDocumentFragment();
+        const elements = [];
+        // Process children
+        React.Children.forEach(children, (child) => {
+            if (!React.isValidElement(child))
+                return;
+            const { type, props } = child;
+            let element = null;
+            if (type === 'title') {
+                // Update existing title or create new
+                const existingTitle = head.querySelector('title');
+                if (existingTitle) {
+                    existingTitle.textContent = props.children;
+                    return;
+                }
+                element = document.createElement('title');
+                element.textContent = props.children;
+            }
+            else if (type === 'meta') {
+                // Check for existing meta with same name/property
+                const name = (props.name || props.property);
+                if (name) {
+                    const selector = props.name
+                        ? `meta[name="${props.name}"]`
+                        : `meta[property="${props.property}"]`;
+                    const existing = head.querySelector(selector);
+                    if (existing) {
+                        existing.setAttribute('content', props.content);
+                        return;
+                    }
+                }
+                element = document.createElement('meta');
+                Object.entries(props).forEach(([key, value]) => {
+                    if (key !== 'children' && value !== undefined) {
+                        element.setAttribute(key, String(value));
+                    }
+                });
+            }
+            else if (type === 'link') {
+                // Check for existing link with same href
+                if (props.rel === 'canonical') {
+                    const existing = head.querySelector('link[rel="canonical"]');
+                    if (existing) {
+                        existing.setAttribute('href', props.href);
+                        return;
+                    }
+                }
+                element = document.createElement('link');
+                Object.entries(props).forEach(([key, value]) => {
+                    if (key !== 'children' && value !== undefined) {
+                        element.setAttribute(key, String(value));
+                    }
+                });
+            }
+            else if (type === 'style') {
+                element = document.createElement('style');
+                if (props.dangerouslySetInnerHTML) {
+                    element.innerHTML = props.dangerouslySetInnerHTML.__html;
+                }
+                else if (props.children) {
+                    element.textContent = props.children;
+                }
+                if (props.id)
+                    element.id = props.id;
+            }
+            else if (type === 'script') {
+                element = document.createElement('script');
+                Object.entries(props).forEach(([key, value]) => {
+                    if (key === 'dangerouslySetInnerHTML') {
+                        element.innerHTML = value.__html;
+                    }
+                    else if (key !== 'children' && value !== undefined) {
+                        element.setAttribute(key, String(value));
+                    }
+                });
+                if (props.children) {
+                    element.textContent = props.children;
+                }
+            }
+            if (element) {
+                elements.push(element);
+                fragment.appendChild(element);
+            }
+        });
+        // Append all elements
+        head.appendChild(fragment);
+        // Cleanup on unmount
+        return () => {
+            elements.forEach((el) => {
+                if (el.parentNode === head) {
+                    head.removeChild(el);
+                }
+            });
+        };
+    }, [children]);
+    return null;
+}
+/**
+ * Generate head elements from metadata object
+ */
+function generateMetadataHead(metadata) {
+    const elements = [];
+    // Title
+    if (metadata.title) {
+        const titleStr = typeof metadata.title === 'string'
+            ? metadata.title
+            : metadata.title.default;
+        elements.push((0, jsx_runtime_1.jsx)("title", { children: titleStr }, "title"));
+    }
+    // Description
+    if (metadata.description) {
+        elements.push((0, jsx_runtime_1.jsx)("meta", { name: "description", content: metadata.description }, "description"));
+    }
+    // Keywords
+    if (metadata.keywords) {
+        const keywordsStr = Array.isArray(metadata.keywords)
+            ? metadata.keywords.join(', ')
+            : metadata.keywords;
+        elements.push((0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: keywordsStr }, "keywords"));
+    }
+    // Viewport
+    if (metadata.viewport) {
+        const viewportStr = typeof metadata.viewport === 'string'
+            ? metadata.viewport
+            : `width=${metadata.viewport.width || 'device-width'}, initial-scale=${metadata.viewport.initialScale || 1}`;
+        elements.push((0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: viewportStr }, "viewport"));
+    }
+    // Theme color
+    if (metadata.themeColor) {
+        if (typeof metadata.themeColor === 'string') {
+            elements.push((0, jsx_runtime_1.jsx)("meta", { name: "theme-color", content: metadata.themeColor }, "themeColor"));
+        }
+    }
+    // Robots
+    if (metadata.robots) {
+        const robotsStr = typeof metadata.robots === 'string'
+            ? metadata.robots
+            : `${metadata.robots.index !== false ? 'index' : 'noindex'}, ${metadata.robots.follow !== false ? 'follow' : 'nofollow'}`;
+        elements.push((0, jsx_runtime_1.jsx)("meta", { name: "robots", content: robotsStr }, "robots"));
+    }
+    // Open Graph
+    if (metadata.openGraph) {
+        const og = metadata.openGraph;
+        if (og.title)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: og.title }, "og:title"));
+        if (og.description)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: og.description }, "og:description"));
+        if (og.url)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: og.url }, "og:url"));
+        if (og.siteName)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:site_name", content: og.siteName }, "og:site_name"));
+        if (og.type)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: og.type }, "og:type"));
+        if (og.locale)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:locale", content: og.locale }, "og:locale"));
+        if (og.images) {
+            og.images.forEach((img, i) => {
+                elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: img.url }, `og:image:${i}`));
+                if (img.width)
+                    elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:image:width", content: String(img.width) }, `og:image:width:${i}`));
+                if (img.height)
+                    elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:image:height", content: String(img.height) }, `og:image:height:${i}`));
+                if (img.alt)
+                    elements.push((0, jsx_runtime_1.jsx)("meta", { property: "og:image:alt", content: img.alt }, `og:image:alt:${i}`));
+            });
+        }
+    }
+    // Twitter
+    if (metadata.twitter) {
+        const tw = metadata.twitter;
+        if (tw.card)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: tw.card }, "twitter:card"));
+        if (tw.site)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { name: "twitter:site", content: tw.site }, "twitter:site"));
+        if (tw.creator)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { name: "twitter:creator", content: tw.creator }, "twitter:creator"));
+        if (tw.title)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: tw.title }, "twitter:title"));
+        if (tw.description)
+            elements.push((0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: tw.description }, "twitter:description"));
+        if (tw.images) {
+            tw.images.forEach((img, i) => {
+                elements.push((0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: img }, `twitter:image:${i}`));
+            });
+        }
+    }
+    // Canonical
+    if (metadata.alternates?.canonical) {
+        elements.push((0, jsx_runtime_1.jsx)("link", { rel: "canonical", href: metadata.alternates.canonical }, "canonical"));
+    }
+    // Manifest
+    if (metadata.manifest) {
+        elements.push((0, jsx_runtime_1.jsx)("link", { rel: "manifest", href: metadata.manifest }, "manifest"));
+    }
+    // Icons
+    if (metadata.icons) {
+        if (metadata.icons.icon) {
+            elements.push((0, jsx_runtime_1.jsx)("link", { rel: "icon", href: metadata.icons.icon }, "icon"));
+        }
+        if (metadata.icons.apple) {
+            elements.push((0, jsx_runtime_1.jsx)("link", { rel: "apple-touch-icon", href: metadata.icons.apple }, "apple-touch-icon"));
+        }
+    }
+    return (0, jsx_runtime_1.jsx)(Head, { children: elements });
+}
+exports.default = Head;

package/dist/client/hydration.d.ts ADDED Viewed

@@ -0,0 +1,45 @@
+/**
+ * Vista Selective Hydration
+ *
+ * This module provides selective hydration for RSC (React Server Components).
+ *
+ * Key Features:
+ * - Only hydrates client component "islands"
+ * - Server components are rendered as static HTML
+ * - Progressive hydration based on priority and visibility
+ * - Minimal JavaScript for maximum performance
+ */
+export interface ClientReference {
+    id: string;
+    mountId: string;
+    props: Record<string, any>;
+    chunkUrl: string;
+    exportName: string;
+}
+export interface HydrationOptions {
+    /** Whether to use progressive hydration based on visibility */
+    progressive?: boolean;
+    /** Hydration priority (higher = sooner) */
+    priority?: 'high' | 'normal' | 'low';
+    /** Whether to use requestIdleCallback for low priority */
+    useIdleCallback?: boolean;
+}
+/**
+ * Hydrate a single client component
+ */
+declare function hydrateComponent(reference: ClientReference): Promise<void>;
+/**
+ * Hydrate all client components on the page
+ */
+export declare function hydrateClientComponents(options?: HydrationOptions): Promise<void>;
+/**
+ * Initialize Vista hydration
+ * Call this after the page loads
+ */
+export declare function initializeHydration(): void;
+declare const _default: {
+    hydrateClientComponents: typeof hydrateClientComponents;
+    hydrateComponent: typeof hydrateComponent;
+    initializeHydration: typeof initializeHydration;
+};
+export default _default;

package/dist/client/hydration.js ADDED Viewed

@@ -0,0 +1,291 @@
+"use strict";
+/**
+ * Vista Selective Hydration
+ *
+ * This module provides selective hydration for RSC (React Server Components).
+ *
+ * Key Features:
+ * - Only hydrates client component "islands"
+ * - Server components are rendered as static HTML
+ * - Progressive hydration based on priority and visibility
+ * - Minimal JavaScript for maximum performance
+ */
+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.hydrateClientComponents = hydrateClientComponents;
+exports.initializeHydration = initializeHydration;
+const React = __importStar(require("react"));
+const client_1 = require("react-dom/client");
+// Track hydrated components
+const hydratedComponents = new Set();
+const loadedChunks = new Map();
+const pendingHydrations = new Map();
+/**
+ * Deserialize props that were serialized on the server
+ */
+function deserializeProps(props) {
+    const result = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (value && typeof value === 'object' && value.__type) {
+            switch (value.__type) {
+                case 'Date':
+                    result[key] = new Date(value.value);
+                    break;
+                case 'undefined':
+                    result[key] = undefined;
+                    break;
+                case 'ReactElement':
+                    // React elements rendered on server - keep as is
+                    result[key] = null;
+                    break;
+                default:
+                    result[key] = value;
+            }
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Load a chunk dynamically
+ * Uses indirect eval to bypass webpack's static analysis
+ */
+async function loadChunk(chunkUrl) {
+    if (loadedChunks.has(chunkUrl)) {
+        return loadedChunks.get(chunkUrl);
+    }
+    try {
+        // Use Function constructor to create dynamic import that webpack won't analyze
+        // This prevents the "Critical dependency" warning
+        const dynamicImport = new Function('url', 'return import(url)');
+        const module = await dynamicImport(chunkUrl);
+        loadedChunks.set(chunkUrl, module);
+        return module;
+    }
+    catch (error) {
+        console.error(`[Vista] Failed to load chunk: ${chunkUrl}`, error);
+        throw error;
+    }
+}
+/**
+ * Hydrate a single client component
+ */
+async function hydrateComponent(reference) {
+    // Skip if already hydrated
+    if (hydratedComponents.has(reference.mountId)) {
+        return;
+    }
+    // Check if already pending
+    if (pendingHydrations.has(reference.mountId)) {
+        return pendingHydrations.get(reference.mountId);
+    }
+    const hydrationPromise = (async () => {
+        try {
+            // Find mount point
+            const mountPoint = document.getElementById(reference.mountId);
+            if (!mountPoint) {
+                console.warn(`[Vista] Mount point not found: ${reference.mountId}`);
+                return;
+            }
+            // Load the component chunk
+            const module = await loadChunk(reference.chunkUrl);
+            const Component = module[reference.exportName] || module.default;
+            if (!Component) {
+                console.error(`[Vista] Component not found in chunk: ${reference.exportName}`);
+                return;
+            }
+            // Deserialize props
+            const props = deserializeProps(reference.props);
+            // Check if there's existing content to hydrate
+            const hasContent = mountPoint.innerHTML.trim().length > 0;
+            if (hasContent) {
+                // Hydrate existing SSR content
+                (0, client_1.hydrateRoot)(mountPoint, React.createElement(Component, props));
+            }
+            else {
+                // No SSR content - create new root
+                const root = (0, client_1.createRoot)(mountPoint);
+                root.render(React.createElement(Component, props));
+            }
+            // Mark as hydrated
+            hydratedComponents.add(reference.mountId);
+            mountPoint.removeAttribute('data-vista-cc');
+            mountPoint.setAttribute('data-hydrated', 'true');
+        }
+        catch (error) {
+            console.error(`[Vista] Hydration error for ${reference.id}:`, error);
+            // In development, show error in the mount point
+            if (process.env.NODE_ENV === 'development') {
+                const mountPoint = document.getElementById(reference.mountId);
+                if (mountPoint) {
+                    mountPoint.innerHTML = `
+                        <div style="padding: 20px; background: #fee2e2; border: 2px solid #ef4444; border-radius: 8px; color: #991b1b; font-family: monospace;">
+                            <h3 style="margin: 0 0 10px 0;">⚠️ Hydration Error</h3>
+                            <p style="margin: 0 0 10px 0;">${error.message}</p>
+                            <p style="margin: 0; font-size: 12px;">Component: ${reference.id}</p>
+                        </div>
+                    `;
+                }
+            }
+        }
+        finally {
+            pendingHydrations.delete(reference.mountId);
+        }
+    })();
+    pendingHydrations.set(reference.mountId, hydrationPromise);
+    return hydrationPromise;
+}
+/**
+ * Hydrate all client components on the page
+ */
+async function hydrateClientComponents(options = {}) {
+    const { progressive = false, priority = 'normal', useIdleCallback = false } = options;
+    // Get references from window
+    const references = window.__VISTA_CLIENT_REFERENCES__ || [];
+    if (references.length === 0) {
+        console.log('[Vista] No client components to hydrate');
+        return;
+    }
+    console.log(`[Vista] Hydrating ${references.length} client component(s)`);
+    if (progressive) {
+        // Progressive hydration - hydrate visible components first
+        await hydrateProgressively(references);
+    }
+    else if (useIdleCallback && priority === 'low') {
+        // Use idle callback for low priority hydration
+        await hydrateOnIdle(references);
+    }
+    else {
+        // Hydrate all at once
+        await Promise.all(references.map(hydrateComponent));
+    }
+}
+/**
+ * Progressive hydration based on visibility
+ */
+async function hydrateProgressively(references) {
+    // First, hydrate above-the-fold components
+    const aboveTheFold = [];
+    const belowTheFold = [];
+    for (const ref of references) {
+        const element = document.getElementById(ref.mountId);
+        if (element && isInViewport(element)) {
+            aboveTheFold.push(ref);
+        }
+        else {
+            belowTheFold.push(ref);
+        }
+    }
+    // Hydrate above-the-fold immediately
+    await Promise.all(aboveTheFold.map(hydrateComponent));
+    // Set up intersection observer for below-the-fold
+    if (belowTheFold.length > 0 && 'IntersectionObserver' in window) {
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    const mountId = entry.target.id;
+                    const ref = belowTheFold.find((r) => r.mountId === mountId);
+                    if (ref) {
+                        hydrateComponent(ref);
+                        observer.unobserve(entry.target);
+                    }
+                }
+            }
+        }, {
+            rootMargin: '50px', // Start loading slightly before visible
+        });
+        for (const ref of belowTheFold) {
+            const element = document.getElementById(ref.mountId);
+            if (element) {
+                observer.observe(element);
+            }
+        }
+    }
+    else {
+        // Fallback: hydrate after a delay
+        setTimeout(() => {
+            Promise.all(belowTheFold.map(hydrateComponent));
+        }, 1000);
+    }
+}
+/**
+ * Hydrate during browser idle time
+ */
+async function hydrateOnIdle(references) {
+    const requestIdleCallback = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+    for (const ref of references) {
+        await new Promise((resolve) => {
+            requestIdleCallback(() => {
+                hydrateComponent(ref).then(resolve);
+            });
+        });
+    }
+}
+/**
+ * Check if an element is in the viewport
+ */
+function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (rect.top < window.innerHeight + 100 &&
+        rect.bottom > -100 &&
+        rect.left < window.innerWidth + 100 &&
+        rect.right > -100);
+}
+/**
+ * Initialize Vista hydration
+ * Call this after the page loads
+ */
+function initializeHydration() {
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            hydrateClientComponents({ progressive: true });
+        });
+    }
+    else {
+        hydrateClientComponents({ progressive: true });
+    }
+}
+// Auto-initialize if this module is loaded
+if (typeof window !== 'undefined') {
+    initializeHydration();
+}
+exports.default = {
+    hydrateClientComponents,
+    hydrateComponent,
+    initializeHydration,
+};

package/dist/client/link.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import React, { AnchorHTMLAttributes } from 'react';
+type Url = string | {
+    href: string;
+    query?: Record<string, string>;
+    hash?: string;
+};
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    href: Url;
+    as?: Url;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean | 'auto' | null;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onNavigate?: () => void;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Hook to check link navigation status
+ */
+export declare const useLinkStatus: () => {
+    pending: boolean;
+};
+/**
+ * Hook to check if a path is active
+ */
+export declare const useIsActive: (path: string) => boolean;
+export default Link;