@zap-js/client 0.0.2 → 0.0.5

package/dist/runtime/router-simple.js

@@ -0,0 +1,330 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ZapJS Production Router with Nested Layouts
+ *
+ * Features:
+ * - Nested layout support
+ * - Route-level code splitting
+ * - Error boundaries per route
+ * - Suspense boundaries
+ * - Type-safe navigation
+ */
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo, useTransition, Suspense, memo, } from 'react';
+const RouterContext = createContext(null);
+// ============================================================================
+// Route Matching
+// ============================================================================
+function matchRoute(pathname, routes) {
+    const normalizedPath = pathname === '' ? '/' : pathname;
+    for (const route of routes) {
+        const match = normalizedPath.match(route.pattern);
+        if (match) {
+            const params = {};
+            route.paramNames.forEach((name, index) => {
+                const value = match[index + 1];
+                if (value !== undefined && value !== '') {
+                    params[name] = decodeURIComponent(value);
+                }
+            });
+            return { route, params, pathname: normalizedPath };
+        }
+    }
+    return null;
+}
+function parseUrl(url) {
+    try {
+        const parsed = new URL(url, window.location.origin);
+        return {
+            pathname: parsed.pathname,
+            search: parsed.search,
+            hash: parsed.hash,
+        };
+    }
+    catch {
+        const hashIndex = url.indexOf('#');
+        const searchIndex = url.indexOf('?');
+        let pathname = url;
+        let search = '';
+        let hash = '';
+        if (hashIndex !== -1) {
+            hash = url.slice(hashIndex);
+            pathname = url.slice(0, hashIndex);
+        }
+        if (searchIndex !== -1 && (hashIndex === -1 || searchIndex < hashIndex)) {
+            search = pathname.slice(searchIndex, hashIndex !== -1 ? hashIndex - searchIndex : undefined);
+            pathname = pathname.slice(0, searchIndex);
+        }
+        return { pathname: pathname || '/', search, hash };
+    }
+}
+const LayoutWrapper = memo(({ layouts, layoutPath, children }) => {
+    if (!layoutPath) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Find the layout and build the chain
+    const layoutChain = [];
+    let currentPath = layoutPath;
+    while (currentPath) {
+        const layout = layouts.find(l => l.path === currentPath);
+        if (layout) {
+            layoutChain.unshift(layout);
+            currentPath = layout.parentLayout;
+        }
+        else {
+            break;
+        }
+    }
+    // Nest layouts
+    return layoutChain.reduce((content, layout) => {
+        const LayoutComponent = layout.component;
+        return (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading layout..." }), children: _jsx(LayoutComponent, { children: content }) }));
+    }, children);
+});
+LayoutWrapper.displayName = 'LayoutWrapper';
+export function RouterProvider({ routes, layouts = [], children, notFound: NotFound, fallback = null, }) {
+    const [isPending, startTransition] = useTransition();
+    const [state, setState] = useState(() => {
+        const { pathname, search, hash } = parseUrl(window.location.href);
+        return {
+            pathname,
+            search,
+            hash,
+            match: matchRoute(pathname, routes),
+        };
+    });
+    const navigate = useCallback((path, options = {}) => {
+        const { replace = false, scroll = true } = options;
+        const { pathname, search, hash } = parseUrl(path);
+        const url = pathname + search + hash;
+        if (replace) {
+            window.history.replaceState(options.state ?? null, '', url);
+        }
+        else {
+            window.history.pushState(options.state ?? null, '', url);
+        }
+        startTransition(() => {
+            setState({
+                pathname,
+                search,
+                hash,
+                match: matchRoute(pathname, routes),
+            });
+        });
+        if (scroll) {
+            if (hash) {
+                const element = document.querySelector(hash);
+                element?.scrollIntoView();
+            }
+            else {
+                window.scrollTo(0, 0);
+            }
+        }
+    }, [routes]);
+    const router = useMemo(() => ({
+        push: (path, options) => navigate(path, options),
+        replace: (path, options) => navigate(path, { ...options, replace: true }),
+        back: () => window.history.back(),
+        forward: () => window.history.forward(),
+        refresh: () => {
+            startTransition(() => {
+                setState((prev) => ({ ...prev, match: matchRoute(prev.pathname, routes) }));
+            });
+        },
+        prefetch: (path) => {
+            const { pathname } = parseUrl(path);
+            const match = matchRoute(pathname, routes);
+            if (match?.route.component) {
+                const component = match.route.component;
+                if (component._payload && component._init) {
+                    try {
+                        component._init(component._payload);
+                    }
+                    catch {
+                        // Component will load when rendered
+                    }
+                }
+            }
+        },
+    }), [navigate, routes]);
+    useEffect(() => {
+        const handlePopState = () => {
+            const { pathname, search, hash } = parseUrl(window.location.href);
+            startTransition(() => {
+                setState({
+                    pathname,
+                    search,
+                    hash,
+                    match: matchRoute(pathname, routes),
+                });
+            });
+        };
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, [routes]);
+    // Update document meta on route change
+    useEffect(() => {
+        if (state.match?.route.meta) {
+            state.match.route.meta().then((meta) => {
+                if (meta.title) {
+                    document.title = meta.title;
+                }
+                if (meta.description) {
+                    const metaDesc = document.querySelector('meta[name="description"]');
+                    if (metaDesc) {
+                        metaDesc.setAttribute('content', meta.description);
+                    }
+                }
+            }).catch(() => {
+                // Ignore meta errors
+            });
+        }
+    }, [state.match]);
+    const contextValue = useMemo(() => ({
+        state,
+        router,
+        routes,
+        layouts,
+        isPending,
+    }), [state, router, routes, layouts, isPending]);
+    return (_jsx(RouterContext.Provider, { value: contextValue, children: _jsx(Suspense, { fallback: fallback, children: children }) }));
+}
+// ============================================================================
+// Hooks
+// ============================================================================
+export function useRouter() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('useRouter must be used within a RouterProvider');
+    }
+    return context.router;
+}
+export function useParams() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('useParams must be used within a RouterProvider');
+    }
+    return (context.state.match?.params ?? {});
+}
+export function usePathname() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('usePathname must be used within a RouterProvider');
+    }
+    return context.state.pathname;
+}
+export function useSearchParams() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('useSearchParams must be used within a RouterProvider');
+    }
+    const searchParams = useMemo(() => new URLSearchParams(context.state.search), [context.state.search]);
+    const setSearchParams = useCallback((params) => {
+        const newParams = new URLSearchParams(params);
+        const newSearch = newParams.toString();
+        const path = context.state.pathname + (newSearch ? `?${newSearch}` : '') + context.state.hash;
+        context.router.push(path, { scroll: false });
+    }, [context.router, context.state.pathname, context.state.hash]);
+    return [searchParams, setSearchParams];
+}
+export function useRouteMatch() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('useRouteMatch must be used within a RouterProvider');
+    }
+    return context.state.match;
+}
+export function useIsPending() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('useIsPending must be used within a RouterProvider');
+    }
+    return context.isPending;
+}
+export function Link({ to, replace = false, prefetch = true, scroll = true, children, onClick, onMouseEnter, ...props }) {
+    const context = useContext(RouterContext);
+    const handleClick = useCallback((e) => {
+        onClick?.(e);
+        if (e.defaultPrevented ||
+            e.button !== 0 ||
+            e.metaKey ||
+            e.ctrlKey ||
+            e.shiftKey ||
+            e.altKey) {
+            return;
+        }
+        const href = to;
+        if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+            return;
+        }
+        e.preventDefault();
+        context?.router[replace ? 'replace' : 'push'](to, { scroll });
+    }, [context?.router, to, replace, scroll, onClick]);
+    const handleMouseEnter = useCallback((e) => {
+        onMouseEnter?.(e);
+        if (prefetch && context) {
+            context.router.prefetch(to);
+        }
+    }, [context, to, prefetch, onMouseEnter]);
+    return (_jsx("a", { href: to, onClick: handleClick, onMouseEnter: handleMouseEnter, ...props, children: children }));
+}
+export function Outlet({ notFound: NotFound, fallback = null }) {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('Outlet must be used within a RouterProvider');
+    }
+    const { match } = context.state;
+    if (!match) {
+        return NotFound ? _jsx(NotFound, {}) : null;
+    }
+    const { route, params } = match;
+    const Component = route.component;
+    const ErrorComponent = route.errorComponent;
+    const PendingComponent = route.pendingComponent;
+    const routeElement = (_jsx(Suspense, { fallback: PendingComponent ? _jsx(PendingComponent, {}) : fallback, children: _jsx(Component, { params: params }) }));
+    const wrappedElement = (_jsx(LayoutWrapper, { layouts: context.layouts, layoutPath: route.layoutPath, children: ErrorComponent ? (_jsx(RouteErrorBoundary, { fallback: _jsx(ErrorComponent, {}), children: routeElement })) : routeElement }));
+    return wrappedElement;
+}
+class RouteErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Route error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback;
+        }
+        return this.props.children;
+    }
+}
+export function NavLink({ to, activeClassName, activeStyle, exact = false, pending = false, pendingClassName, pendingStyle, className, style, ...props }) {
+    const pathname = usePathname();
+    const isPending = useIsPending();
+    const isActive = exact
+        ? pathname === to
+        : pathname.startsWith(to) && (to === '/' ? pathname === '/' : true);
+    const isPendingRoute = pending && isPending;
+    const combinedClassName = [
+        className,
+        isActive && activeClassName,
+        isPendingRoute && pendingClassName,
+    ].filter(Boolean).join(' ').trim() || undefined;
+    const combinedStyle = {
+        ...style,
+        ...(isActive ? activeStyle : {}),
+        ...(isPendingRoute ? pendingStyle : {}),
+    };
+    return (_jsx(Link, { to: to, className: combinedClassName, style: combinedStyle, ...props }));
+}
+export function Redirect({ to, replace = true }) {
+    const router = useRouter();
+    useEffect(() => {
+        router[replace ? 'replace' : 'push'](to);
+    }, [router, to, replace]);
+    return null;
+}

package/dist/runtime/router.d.ts

@@ -0,0 +1,103 @@
+/**
+ * ZapJS Production Router
+ *
+ * Features:
+ * - Nested layouts
+ * - Route-level middleware
+ * - Code splitting
+ * - Error boundaries
+ * - Type-safe navigation
+ */
+import React, { type ReactNode, type ComponentType } from 'react';
+import { type RouteMiddleware } from './middleware.js';
+export interface LayoutDefinition {
+    path: string;
+    component: React.LazyExoticComponent<ComponentType<any>>;
+    parentLayout?: string;
+}
+export interface RouteDefinition {
+    path: string;
+    pattern: RegExp;
+    paramNames: string[];
+    component: React.LazyExoticComponent<ComponentType<any>>;
+    layoutPath?: string;
+    errorComponent?: React.LazyExoticComponent<ComponentType<any>>;
+    pendingComponent?: React.LazyExoticComponent<ComponentType<any>>;
+    meta?: () => Promise<RouteMeta>;
+    middleware?: () => Promise<RouteMiddleware[]>;
+}
+export interface RouteMeta {
+    title?: string;
+    description?: string;
+    keywords?: string[];
+    [key: string]: any;
+}
+export interface RouteMatch {
+    route: RouteDefinition;
+    params: Record<string, string>;
+    pathname: string;
+}
+export interface RouterState {
+    pathname: string;
+    search: string;
+    hash: string;
+    match: RouteMatch | null;
+    middlewareData?: Record<string, any>;
+}
+export interface NavigateOptions {
+    replace?: boolean;
+    scroll?: boolean;
+    state?: unknown;
+}
+export interface Router {
+    push(path: string, options?: NavigateOptions): void;
+    replace(path: string, options?: NavigateOptions): void;
+    back(): void;
+    forward(): void;
+    refresh(): void;
+    prefetch(path: string): void;
+}
+interface RouterProviderProps {
+    routes: RouteDefinition[];
+    layouts?: LayoutDefinition[];
+    children: ReactNode;
+    notFound?: ComponentType;
+    fallback?: ReactNode;
+    onRouteError?: (error: Error) => void;
+}
+export declare function RouterProvider({ routes, layouts, children, notFound: NotFound, fallback, onRouteError, }: RouterProviderProps): JSX.Element;
+export declare function useRouter(): Router;
+export declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
+export declare function usePathname(): string;
+export declare function useSearchParams(): [URLSearchParams, (params: Record<string, string>) => void];
+export declare function useMiddlewareData<T = Record<string, any>>(): T | undefined;
+export declare function useRouteMatch(): RouteMatch | null;
+export declare function useIsPending(): boolean;
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    to: string;
+    replace?: boolean;
+    prefetch?: boolean;
+    scroll?: boolean;
+    children: ReactNode;
+}
+export declare function Link({ to, replace, prefetch, scroll, children, onClick, onMouseEnter, ...props }: LinkProps): JSX.Element;
+interface OutletProps {
+    notFound?: ComponentType;
+    fallback?: ReactNode;
+}
+export declare function Outlet({ notFound: NotFound, fallback }: OutletProps): JSX.Element | null;
+interface NavLinkProps extends LinkProps {
+    activeClassName?: string;
+    activeStyle?: React.CSSProperties;
+    exact?: boolean;
+    pending?: boolean;
+    pendingClassName?: string;
+    pendingStyle?: React.CSSProperties;
+}
+export declare function NavLink({ to, activeClassName, activeStyle, exact, pending, pendingClassName, pendingStyle, className, style, ...props }: NavLinkProps): JSX.Element;
+interface RedirectProps {
+    to: string;
+    replace?: boolean;
+}
+export declare function Redirect({ to, replace }: RedirectProps): null;
+export {};