olovaplugin 1.0.13 → 1.0.15

package/runtime/router.tsx

@@ -0,0 +1,381 @@
+import React, { useState, useEffect, createContext, useContext, type ReactNode } from 'react';
+
+// @ts-ignore - Virtual module generated by olovaplugin
+import { routes } from 'olova/routes';
+
+// =============================================================================
+// ROUTER CONTEXT
+// =============================================================================
+const RouterContext = createContext<{ params: Record<string, string>, path: string }>({ params: {}, path: '/' });
+
+export function useParams() {
+    return useContext(RouterContext).params;
+}
+
+export function usePath() {
+    return useContext(RouterContext).path;
+}
+
+/**
+ * Returns the current pathname (without query string or hash)
+ * Similar to Next.js usePathname hook
+ */
+export function usePathname(): string {
+    const [pathname, setPathname] = useState(() => {
+        if (typeof window === 'undefined') return '/';
+        return window.location.pathname;
+    });
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleNavigation = () => {
+            setPathname(window.location.pathname);
+        };
+
+        window.addEventListener('popstate', handleNavigation);
+        window.addEventListener('pushstate', handleNavigation);
+
+        return () => {
+            window.removeEventListener('popstate', handleNavigation);
+            window.removeEventListener('pushstate', handleNavigation);
+        };
+    }, []);
+
+    return pathname;
+}
+
+/**
+ * A read-only interface for URLSearchParams
+ * Similar to Next.js useSearchParams hook
+ */
+interface ReadonlyURLSearchParams {
+    get(name: string): string | null;
+    getAll(name: string): string[];
+    has(name: string): boolean;
+    keys(): IterableIterator<string>;
+    values(): IterableIterator<string>;
+    entries(): IterableIterator<[string, string]>;
+    forEach(callback: (value: string, key: string, parent: URLSearchParams) => void): void;
+    toString(): string;
+    size: number;
+}
+
+/**
+ * Returns the current URL search parameters
+ * Similar to Next.js useSearchParams hook
+ */
+export function useSearchParams(): ReadonlyURLSearchParams {
+    const [searchParams, setSearchParams] = useState<URLSearchParams>(() => {
+        if (typeof window === 'undefined') return new URLSearchParams();
+        return new URLSearchParams(window.location.search);
+    });
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleNavigation = () => {
+            setSearchParams(new URLSearchParams(window.location.search));
+        };
+
+        window.addEventListener('popstate', handleNavigation);
+        window.addEventListener('pushstate', handleNavigation);
+
+        return () => {
+            window.removeEventListener('popstate', handleNavigation);
+            window.removeEventListener('pushstate', handleNavigation);
+        };
+    }, []);
+
+    return {
+        get: (name: string) => searchParams.get(name),
+        getAll: (name: string) => searchParams.getAll(name),
+        has: (name: string) => searchParams.has(name),
+        keys: () => searchParams.keys(),
+        values: () => searchParams.values(),
+        entries: () => searchParams.entries(),
+        forEach: (callback) => searchParams.forEach(callback),
+        toString: () => searchParams.toString(),
+        get size() { return Array.from(searchParams.keys()).length; }
+    };
+}
+
+// =============================================================================
+// ROUTE MATCHING
+// =============================================================================
+const normalizePath = (path: string) => {
+    let p = path.split('?')[0].split('#')[0];
+    if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
+    return p || '/';
+};
+
+export function matchRoute(path: string) {
+    const normalizedPath = normalizePath(path);
+    const routeKeys = Object.keys(routes);
+    
+    for (const route of routeKeys) {
+        if (route === normalizedPath) {
+            return { loader: routes[route], params: {}, pattern: route };
+        }
+        
+        const regexPath = route
+            .replace(/:[^\/]+/g, '([^/]+)')
+            .replace(/\$[^\/]+/g, '([^/]+)');
+            
+        const regex = new RegExp(`^${regexPath}$`);
+        const match = normalizedPath.match(regex);
+        
+        if (match) {
+            const params: Record<string, string> = {};
+            const paramNames = (route.match(/[:$][^\/]+/g) || []).map(s => s.slice(1));
+            paramNames.forEach((name, i) => {
+                params[name] = match[i + 1];
+            });
+            return { loader: routes[route], params, pattern: route };
+        }
+    }
+    return null;
+}
+
+// Metadata type - like Next.js
+export interface Metadata {
+    title?: string;
+    description?: string;
+    keywords?: string | string[];
+    openGraph?: {
+        title?: string;
+        description?: string;
+        url?: string;
+        siteName?: string;
+        images?: { url: string; width?: number; height?: number; alt?: string }[];
+        type?: string;
+    };
+    twitter?: {
+        card?: 'summary' | 'summary_large_image' | 'app' | 'player';
+        site?: string;
+        creator?: string;
+        title?: string;
+        description?: string;
+        images?: string[];
+    };
+    robots?: string;
+    canonical?: string;
+    jsonLd?: object | object[];
+}
+
+// Simple markdown to HTML converter
+function parseMarkdown(md: string): string {
+    return md
+        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+        .replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>')
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+        .replace(/`(.*?)`/g, '<code>$1</code>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+        .replace(/\n\n/g, '</p><p>')
+        .replace(/\n/g, '<br>')
+        .replace(/^(.*)$/, '<p>$1</p>');
+}
+
+function HtmlContent({ html }: { html: string }) {
+    return React.createElement('div', { 
+        dangerouslySetInnerHTML: { __html: html },
+        className: 'olova-html-content'
+    });
+}
+
+function MarkdownContent({ markdown }: { markdown: string }) {
+    const html = parseMarkdown(markdown);
+    return React.createElement('article', { 
+        dangerouslySetInnerHTML: { __html: html },
+        className: 'olova-markdown-content'
+    });
+}
+
+export async function loadRoute(path: string) {
+    const match = matchRoute(path);
+    if (match) {
+        console.log(`[Router] Loading route: ${path} (pattern: ${match.pattern})`);
+        const module = await match.loader();
+        
+        if (module.__isHtml) {
+            return { 
+                module: {
+                    default: () => HtmlContent({ html: module.__rawHtml as string }),
+                },
+                params: match.params,
+                metadata: undefined
+            };
+        }
+        
+        if (module.__isMd) {
+            return { 
+                module: {
+                    default: () => MarkdownContent({ markdown: module.default as unknown as string }),
+                },
+                params: match.params,
+                metadata: undefined
+            };
+        }
+        
+        return { 
+           module,
+           params: match.params,
+           metadata: module.metadata as Metadata | undefined
+        };
+    }
+    console.warn(`[Router] No match for: ${path}`);
+    return null;
+}
+
+// =============================================================================
+// ROUTER COMPONENT
+// =============================================================================
+interface RouterProps {
+    url?: string;
+    initialComponent?: React.ComponentType;
+    initialParams?: Record<string, string>;
+    onRouteChange?: (metadata: Metadata | undefined) => void;
+}
+
+export function Router({ url, initialComponent, initialParams, onRouteChange }: RouterProps) {
+    const [path, setPath] = useState(() => normalizePath(url || (typeof window !== 'undefined' ? window.location.pathname : '/')));
+    const [Component, setComponent] = useState<React.ComponentType | null>(() => initialComponent || null);
+    const [params, setParams] = useState<Record<string, string>>(() => initialParams || {});
+    const hasHydrated = React.useRef(false);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleNavigation = () => {
+            const newPath = normalizePath(window.location.pathname);
+            console.log(`[Router] Navigation event: ${newPath}`);
+            setPath(newPath);
+        };
+
+        window.addEventListener('popstate', handleNavigation);
+        window.addEventListener('pushstate', handleNavigation);
+
+        return () => {
+            window.removeEventListener('popstate', handleNavigation);
+            window.removeEventListener('pushstate', handleNavigation);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!hasHydrated.current && initialComponent && path === normalizePath(url || '')) {
+            console.log(`[Router] Hydration skipped for: ${path}`);
+            hasHydrated.current = true;
+            return;
+        }
+
+        let isCancelled = false;
+        const load = async () => {
+            const result = await loadRoute(path);
+            if (!isCancelled) {
+                if (result) {
+                    setComponent(() => result.module.default);
+                    setParams(result.params);
+                    if (onRouteChange) {
+                        onRouteChange(result.metadata);
+                    }
+                } else {
+                    const fallbackResult = await loadRoute('/404');
+                    if (fallbackResult) {
+                        console.log('[Router] Serving custom 404 page');
+                        setComponent(() => fallbackResult.module.default);
+                        setParams(fallbackResult.params);
+                        if (onRouteChange) {
+                            onRouteChange(fallbackResult.metadata);
+                        }
+                    } else {
+                        setComponent(() => () => <div>404 Not Found</div>);
+                        setParams({});
+                        if (onRouteChange) {
+                            onRouteChange(undefined);
+                        }
+                    }
+                }
+            }
+        };
+
+        load();
+        return () => { isCancelled = true; };
+    }, [path, onRouteChange]);
+
+    if (!Component) return <div>Loading...</div>;
+    
+    return (
+        <RouterContext.Provider value={{ params, path }}>
+            <Component {...params} />
+        </RouterContext.Provider>
+    );
+}
+
+// =============================================================================
+// LINK COMPONENT
+// =============================================================================
+export function Link({ href, children, ...props }: { href: string, children: ReactNode } & React.AnchorHTMLAttributes<HTMLAnchorElement>): React.ReactElement {
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        if (href.startsWith('http') || href.startsWith('//')) return;
+
+        e.preventDefault();
+        
+        const currentUrl = window.location.pathname + window.location.search;
+        const targetUrl = href.startsWith('/') ? href : '/' + href;
+        
+        if (currentUrl === targetUrl) return;
+        
+        window.history.pushState({}, '', href);
+        window.dispatchEvent(new Event('pushstate'));
+    };
+
+    return (
+        <a href={href} onClick={handleClick} {...props}>
+            {children}
+        </a>
+    );
+}
+
+// =============================================================================
+// HYDRATION UTILITIES
+// =============================================================================
+export function parseFlightData(): Record<string, unknown> | null {
+    if (typeof globalThis === 'undefined' || typeof (globalThis as Record<string, unknown>).document === 'undefined') {
+        return null;
+    }
+    
+    const flightArray = ((globalThis as Record<string, unknown>).__olova_f) as unknown[] | undefined;
+    if (!flightArray) return null;
+    
+    type FlightDataType = 'M' | 'T' | 'R' | 'P' | 'A' | 'S' | 'D' | 'H' | 'E';
+    
+    const result: Record<string, unknown> = {};
+    const typeMap: Record<FlightDataType, string> = {
+        'M': '$meta',
+        'T': '$tree', 
+        'R': '$route',
+        'P': '$params',
+        'A': '$assets',
+        'S': '$state',
+        'D': '$schema',
+        'H': '$hints',
+        'E': '$end'
+    };
+    
+    for (const chunk of flightArray) {
+        if (Array.isArray(chunk) && chunk.length >= 3) {
+            const [_index, type, data] = chunk;
+            const key = typeMap[type as FlightDataType];
+            if (key && key !== '$end') {
+                result[key] = data;
+            }
+        }
+    }
+    
+    return result;
+}

package/runtime/server.tsx

@@ -0,0 +1,110 @@
+// =============================================================================
+// OLOVA SERVER ENTRY - Handles SSG/SSR rendering
+// Real TSX file served via Vite alias
+// =============================================================================
+
+import { renderToString } from 'react-dom/server';
+// @ts-ignore - User's root layout
+import Layout, { metadata as defaultMetadata } from '/src/root.tsx';
+import { Router, loadRoute, type Metadata } from './router';
+
+// =============================================================================
+// SEO HEAD GENERATION
+// =============================================================================
+function generateSeoHead(metadata: Metadata | undefined): string {
+    const meta = { ...defaultMetadata, ...metadata } as Metadata;
+    let head = '';
+    
+    if (meta.title) {
+        head += `<title>${meta.title}</title>\n`;
+    }
+    
+    if (meta.description) {
+        head += `<meta name="description" content="${meta.description}" />\n`;
+    }
+    if (meta.keywords) {
+        const content = Array.isArray(meta.keywords) ? meta.keywords.join(', ') : meta.keywords;
+        head += `<meta name="keywords" content="${content}" />\n`;
+    }
+    if (meta.robots) {
+        head += `<meta name="robots" content="${meta.robots}" />\n`;
+    }
+    if (meta.canonical) {
+        head += `<link rel="canonical" href="${meta.canonical}" />\n`;
+    }
+    
+    if (meta.openGraph) {
+        const og = meta.openGraph;
+        head += `<meta property="og:title" content="${og.title || meta.title}" />\n`;
+        if (og.description) head += `<meta property="og:description" content="${og.description}" />\n`;
+        if (og.url) head += `<meta property="og:url" content="${og.url}" />\n`;
+        if (og.siteName) head += `<meta property="og:site_name" content="${og.siteName}" />\n`;
+        if (og.type) head += `<meta property="og:type" content="${og.type}" />\n`;
+        if (og.images) {
+            og.images.forEach(img => {
+                head += `<meta property="og:image" content="${img.url}" />\n`;
+            });
+        }
+    }
+    
+    if (meta.twitter) {
+        const tw = meta.twitter;
+        head += `<meta name="twitter:card" content="${tw.card || 'summary'}" />\n`;
+        if (tw.site) head += `<meta name="twitter:site" content="${tw.site}" />\n`;
+        if (tw.creator) head += `<meta name="twitter:creator" content="${tw.creator}" />\n`;
+        head += `<meta name="twitter:title" content="${tw.title || meta.title}" />\n`;
+        if (tw.description) head += `<meta name="twitter:description" content="${tw.description}" />\n`;
+        if (tw.images) {
+            tw.images.forEach(img => {
+                head += `<meta name="twitter:image" content="${img}" />\n`;
+            });
+        }
+    }
+    
+    return head;
+}
+
+// =============================================================================
+// SERVER RENDER FUNCTIONS
+// =============================================================================
+export async function render(url: string) {
+    const result = await loadRoute(url);
+    const Component = result ? result.module.default : () => <div>404 Not Found</div>;
+    const params = result ? result.params : {};
+    const metadata = result ? result.metadata : undefined;
+    
+    const seoHead = generateSeoHead(metadata);
+    
+    let html = renderToString(
+        <Layout>
+          <Router url={url} initialComponent={Component} initialParams={params} />
+        </Layout>
+    );
+    
+    if (html.includes('</head>')) {
+        html = html.replace('</head>', seoHead + '</head>');
+    }
+    
+    return { html, hydrationData: { params, metadata } };
+}
+
+export function renderShell(): string {
+    const seoHead = generateSeoHead(undefined);
+    let html = renderToString(<Layout>{null}</Layout>);
+    if (html.includes('</head>')) {
+        html = html.replace('</head>', seoHead + '</head>');
+    }
+    return html;
+}
+
+export function renderShellWithMetadata(metadata: Metadata | undefined): string {
+    const seoHead = generateSeoHead(metadata);
+    let html = renderToString(<Layout>{null}</Layout>);
+    if (html.includes('</head>')) {
+        html = html.replace('</head>', seoHead + '</head>');
+    }
+    return html;
+}
+
+// Re-export loadRoute for SSG
+export { loadRoute };