@chidchanun/bcp 0.1.0

package/packages/client/src/router-v2.tsx

@@ -0,0 +1,969 @@
+import {
+    useEffect,
+    type AnchorHTMLAttributes,
+    type MouseEvent,
+    type ReactNode,
+} from "react";
+
+import {
+    applyResolvedMetadata,
+    type ResolvedMetadata,
+} from "./metadata.js";
+
+import {
+    hideNavigationLoading,
+    showNavigationLoading,
+} from "./navigation-loading.js";
+
+import {
+    getNavigationState,
+    resetNavigationState,
+    setNavigationState,
+} from "./navigation-state.js";
+
+export interface NavigationOptions {
+    replace?: boolean;
+    scroll?: boolean;
+}
+
+export interface Router {
+    readonly isNavigating: boolean;
+    push(
+        href: string,
+        options?: Omit<NavigationOptions, "replace">
+    ): Promise<void>;
+    replace(
+        href: string,
+        options?: Omit<NavigationOptions, "replace">
+    ): Promise<void>;
+    back(): void;
+    forward(): void;
+    refresh(): Promise<void>;
+}
+
+export interface LinkProps
+    extends Omit<
+        AnchorHTMLAttributes<HTMLAnchorElement>,
+        "href"
+    > {
+    href: string;
+    replace?: boolean;
+    scroll?: boolean;
+}
+
+interface NavigationPayload {
+    route?: string;
+    params?: Record<string, string>;
+    clientScript: string;
+    clientImports: string[];
+    title: string;
+    metadata: ResolvedMetadata | null;
+    version: number;
+    loadingHtml: string | null;
+}
+
+interface BcpDevConfig {
+    eventsPath: string;
+    clientScript: string;
+    route: string;
+    version: number;
+}
+
+interface BcpReactRoot {
+    render(
+        tree: ReactNode
+    ): void;
+    unmount(): void;
+}
+
+declare global {
+    var __BCP_DEV_CONFIG__:
+        | BcpDevConfig
+        | undefined;
+    var __BCP_NAVIGATION__:
+        | Router
+        | undefined;
+    var __BCP_HMR_SOURCE__:
+        | EventSource
+        | undefined;
+    var __BCP_REACT_ROOT__:
+        | BcpReactRoot
+        | undefined;
+
+    interface Window {
+        __BCP_DEV_CONFIG__?: BcpDevConfig;
+        __BCP_NAVIGATION__?: Router;
+        __BCP_HMR_SOURCE__?: EventSource;
+        __BCP_REACT_ROOT__?: BcpReactRoot;
+        __BCP_ROUTER_INSTALLED__?: boolean;
+    }
+}
+
+let navigationController:
+    AbortController | null = null;
+
+export async function navigate(
+    href: string,
+    options: NavigationOptions = {}
+): Promise<void> {
+    if (typeof window === "undefined") {
+        return;
+    }
+
+    const target =
+        new URL(
+            href,
+            window.location.href
+        );
+
+    if (
+        target.origin !==
+        window.location.origin
+    ) {
+        window.location.assign(
+            target.href
+        );
+        return;
+    }
+
+    const currentWithoutHash =
+        `${window.location.pathname}${window.location.search}`;
+    const targetWithoutHash =
+        `${target.pathname}${target.search}`;
+
+    if (
+        currentWithoutHash ===
+            targetWithoutHash &&
+        target.hash !==
+            window.location.hash
+    ) {
+        updateHistory(
+            target,
+            Boolean(
+                options.replace
+            )
+        );
+        scrollToHash(
+            target.hash
+        );
+        return;
+    }
+
+    if (
+        target.href ===
+        window.location.href
+    ) {
+        return;
+    }
+
+    await loadNavigation(
+        target,
+        options
+    );
+}
+
+export function useRouter(): Router {
+    ensureNavigationRuntime();
+
+    if (
+        typeof window !== "undefined" &&
+        window.__BCP_NAVIGATION__
+    ) {
+        return window.__BCP_NAVIGATION__;
+    }
+
+    return createRouter();
+}
+
+export function Link({
+    href,
+    replace = false,
+    scroll = true,
+    onClick,
+    ...props
+}: LinkProps) {
+    useEffect(
+        () => {
+            ensureNavigationRuntime();
+        },
+        []
+    );
+
+    function handleClick(
+        event: MouseEvent<HTMLAnchorElement>
+    ) {
+        onClick?.(event);
+
+        if (
+            event.defaultPrevented ||
+            !shouldInterceptClick(
+                event
+            )
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+
+        void navigate(
+            href,
+            {
+                replace,
+                scroll,
+            }
+        ).catch(
+            (error) => {
+                if (isAbortError(error)) {
+                    return;
+                }
+
+                console.error(
+                    "[BCP Router] navigation failed:",
+                    error
+                );
+                window.location.assign(
+                    href
+                );
+            }
+        );
+    }
+
+    return (
+        <a
+            {...props}
+            href={href}
+            onClick={handleClick}
+        />
+    );
+}
+
+function createRouter(): Router {
+    return {
+        get isNavigating() {
+            return getNavigationState()
+                .isNavigating;
+        },
+        push(
+            href,
+            options = {}
+        ) {
+            return navigate(
+                href,
+                {
+                    ...options,
+                    replace: false,
+                }
+            );
+        },
+        replace(
+            href,
+            options = {}
+        ) {
+            return navigate(
+                href,
+                {
+                    ...options,
+                    replace: true,
+                }
+            );
+        },
+        back() {
+            if (
+                typeof window !==
+                "undefined"
+            ) {
+                window.history.back();
+            }
+        },
+        forward() {
+            if (
+                typeof window !==
+                "undefined"
+            ) {
+                window.history.forward();
+            }
+        },
+        refresh() {
+            if (
+                typeof window ===
+                "undefined"
+            ) {
+                return Promise.resolve();
+            }
+
+            return loadNavigation(
+                new URL(
+                    window.location.href
+                ),
+                {
+                    replace: true,
+                    scroll: false,
+                }
+            );
+        },
+    };
+}
+
+function ensureNavigationRuntime(): void {
+    if (typeof window === "undefined") {
+        return;
+    }
+
+    if (!window.__BCP_NAVIGATION__) {
+        window.__BCP_NAVIGATION__ =
+            createRouter();
+    }
+
+    if (window.__BCP_ROUTER_INSTALLED__) {
+        return;
+    }
+
+    window.__BCP_ROUTER_INSTALLED__ =
+        true;
+
+    window.addEventListener(
+        "popstate",
+        () => {
+            void loadNavigation(
+                new URL(
+                    window.location.href
+                ),
+                {
+                    replace: true,
+                    scroll: true,
+                    fromHistory: true,
+                }
+            ).catch(
+                (error) => {
+                    if (isAbortError(error)) {
+                        return;
+                    }
+
+                    console.error(
+                        "[BCP Router] history navigation failed:",
+                        error
+                    );
+                    window.location.reload();
+                }
+            );
+        }
+    );
+}
+
+async function loadNavigation(
+    target: URL,
+    options: NavigationOptions & {
+        fromHistory?: boolean;
+    }
+): Promise<void> {
+    ensureNavigationRuntime();
+    navigationController?.abort();
+
+    const controller =
+        new AbortController();
+    navigationController =
+        controller;
+
+    hideNavigationLoading();
+    setNavigationState({
+        isNavigating: true,
+        targetHref:
+            target.href,
+        targetRoute: null,
+    });
+
+    try {
+        const targetPath =
+            `${target.pathname}${target.search}`;
+
+        const response =
+            await fetch(
+                `/_bcp/navigation?url=${encodeURIComponent(
+                    targetPath
+                )}`,
+                {
+                    method: "GET",
+                    headers: {
+                        Accept:
+                            "application/json",
+                        "X-BCP-Navigation":
+                            "1",
+                    },
+                    signal:
+                        controller.signal,
+                }
+            );
+
+        if (!response.ok) {
+            window.location.assign(
+                target.href
+            );
+            return;
+        }
+
+        const payload =
+            await parseNavigationPayload(
+                response
+            );
+
+        if (!payload) {
+            window.location.assign(
+                target.href
+            );
+            return;
+        }
+
+        setNavigationState({
+            targetRoute:
+                payload.route ??
+                target.pathname,
+        });
+
+        showNavigationLoading(
+            payload.loadingHtml
+        );
+        preloadClientImports(
+            payload.clientImports
+        );
+        applyNavigationPayload(
+            payload
+        );
+
+        if (!options.fromHistory) {
+            updateHistory(
+                target,
+                Boolean(
+                    options.replace
+                )
+            );
+        }
+
+        updateDevConfig(
+            payload,
+            target
+        );
+        await restartDevRuntime();
+        await importClientBundle(
+            payload.clientScript
+        );
+        await waitForNextPaint();
+
+        if (options.scroll !== false) {
+            if (target.hash) {
+                scrollToHash(
+                    target.hash
+                );
+            } else {
+                window.scrollTo(
+                    0,
+                    0
+                );
+            }
+        }
+    } finally {
+        if (
+            navigationController ===
+            controller
+        ) {
+            navigationController =
+                null;
+            hideNavigationLoading();
+            resetNavigationState();
+        }
+    }
+}
+
+async function parseNavigationPayload(
+    response: Response
+): Promise<NavigationPayload | null> {
+    try {
+        const payload =
+            await response.json() as
+            Partial<NavigationPayload>;
+
+        if (
+            typeof payload.clientScript !==
+                "string" ||
+            typeof payload.title !==
+                "string" ||
+            typeof payload.version !==
+                "number" ||
+            !(
+                payload.loadingHtml === null ||
+                typeof payload.loadingHtml ===
+                    "string"
+            ) ||
+            !(
+                payload.clientImports ===
+                    undefined ||
+                (
+                    Array.isArray(
+                        payload.clientImports
+                    ) &&
+                    payload.clientImports.every(
+                        (item) =>
+                            typeof item ===
+                            "string"
+                    )
+                )
+            ) ||
+            !(
+                payload.metadata === undefined ||
+                payload.metadata === null ||
+                isResolvedMetadata(
+                    payload.metadata
+                )
+            )
+        ) {
+            return null;
+        }
+
+        return {
+            route:
+                payload.route,
+            params:
+                payload.params ?? {},
+            clientScript:
+                stripQuery(
+                    payload.clientScript
+                ),
+            clientImports:
+                (
+                    payload.clientImports ??
+                    []
+                ).map(
+                    stripQuery
+                ),
+            title:
+                payload.title,
+            metadata:
+                payload.metadata ??
+                null,
+            version:
+                payload.version,
+            loadingHtml:
+                payload.loadingHtml,
+        };
+    } catch {
+        return null;
+    }
+}
+
+function applyNavigationPayload(
+    payload: NavigationPayload
+): void {
+    if (
+        !document.getElementById(
+            "root"
+        )
+    ) {
+        throw new Error(
+            "BCP Framework: root element was not found during navigation."
+        );
+    }
+
+    const dataElement =
+        document.getElementById(
+            "__BCP_DATA__"
+        );
+
+    if (!dataElement) {
+        throw new Error(
+            "BCP Framework: framework data was not found during navigation."
+        );
+    }
+
+    dataElement.textContent =
+        serializeFrameworkData({
+            route:
+                payload.route ??
+                window.location.pathname,
+            params:
+                payload.params ?? {},
+            metadata:
+                payload.metadata,
+        });
+
+    if (payload.metadata) {
+        applyResolvedMetadata(
+            payload.metadata
+        );
+    } else {
+        document.title =
+            payload.title ||
+            document.title;
+    }
+}
+
+function preloadClientImports(
+    imports: string[]
+): void {
+    for (const importPath of imports) {
+        const target =
+            new URL(
+                importPath,
+                window.location.href
+            );
+
+        if (
+            target.origin !==
+            window.location.origin
+        ) {
+            continue;
+        }
+
+        const alreadyPreloaded =
+            Array.from(
+                document.querySelectorAll<HTMLLinkElement>(
+                    'link[rel="modulepreload"]'
+                )
+            ).some(
+                (link) =>
+                    link.href ===
+                    target.href
+            );
+
+        if (alreadyPreloaded) {
+            continue;
+        }
+
+        const link =
+            document.createElement(
+                "link"
+            );
+        link.rel =
+            "modulepreload";
+        link.href =
+            target.href;
+        link.dataset.bcpPreload =
+            "true";
+        document.head.appendChild(
+            link
+        );
+    }
+}
+
+function updateDevConfig(
+    payload: NavigationPayload,
+    target: URL
+): void {
+    const config =
+        window.__BCP_DEV_CONFIG__;
+
+    if (!config) {
+        return;
+    }
+
+    window.__BCP_DEV_CONFIG__ = {
+        ...config,
+        clientScript:
+            payload.clientScript,
+        route:
+            payload.route ??
+            target.pathname,
+        version:
+            payload.version,
+    };
+}
+
+function updateHistory(
+    target: URL,
+    replace: boolean
+): void {
+    const state = {
+        __bcp: true,
+    };
+
+    if (replace) {
+        window.history.replaceState(
+            state,
+            "",
+            target.href
+        );
+    } else {
+        window.history.pushState(
+            state,
+            "",
+            target.href
+        );
+    }
+}
+
+async function restartDevRuntime(): Promise<void> {
+    if (
+        typeof window === "undefined" ||
+        !window.__BCP_DEV_CONFIG__
+    ) {
+        return;
+    }
+
+    window.__BCP_HMR_SOURCE__?.close();
+    delete window.__BCP_HMR_SOURCE__;
+
+    document
+        .querySelector(
+            "script[data-bcp-runtime]"
+        )
+        ?.remove();
+
+    const script =
+        document.createElement(
+            "script"
+        );
+    script.dataset.bcpRuntime =
+        "true";
+    script.src =
+        `/_bcp/dev-runtime.js?bcp-nav-runtime=${Date.now()}`;
+    script.async = false;
+
+    await new Promise<void>(
+        (
+            resolve,
+            reject
+        ) => {
+            script.addEventListener(
+                "load",
+                () => resolve(),
+                {
+                    once: true,
+                }
+            );
+            script.addEventListener(
+                "error",
+                () => reject(
+                    new Error(
+                        "BCP Framework: failed to reload the dev runtime."
+                    )
+                ),
+                {
+                    once: true,
+                }
+            );
+            document.head.appendChild(
+                script
+            );
+        }
+    );
+}
+
+async function importClientBundle(
+    clientScript: string
+): Promise<void> {
+    const separator =
+        clientScript.includes("?")
+            ? "&"
+            : "?";
+
+    await import(
+        clientScript +
+        separator +
+        "bcp-nav=" +
+        Date.now()
+    );
+}
+
+function shouldInterceptClick(
+    event: MouseEvent<HTMLAnchorElement>
+): boolean {
+    if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+    ) {
+        return false;
+    }
+
+    const anchor =
+        event.currentTarget;
+
+    if (
+        anchor.target &&
+        anchor.target !== "_self"
+    ) {
+        return false;
+    }
+
+    if (
+        anchor.hasAttribute(
+            "download"
+        )
+    ) {
+        return false;
+    }
+
+    return (
+        new URL(
+            anchor.href,
+            window.location.href
+        ).origin ===
+        window.location.origin
+    );
+}
+
+function scrollToHash(
+    hash: string
+): void {
+    const element =
+        document.getElementById(
+            decodeURIComponent(
+                hash.slice(1)
+            )
+        );
+
+    if (element) {
+        element.scrollIntoView();
+    } else {
+        window.scrollTo(
+            0,
+            0
+        );
+    }
+}
+
+function stripQuery(
+    value: string
+): string {
+    const url =
+        new URL(
+            value,
+            window.location.href
+        );
+    url.search = "";
+    return `${url.pathname}${url.hash}`;
+}
+
+function serializeFrameworkData(
+    value: unknown
+): string {
+    return JSON.stringify(
+        value
+    )
+        .replace(
+            /</g,
+            "\\u003c"
+        )
+        .replace(
+            /\u2028/g,
+            "\\u2028"
+        )
+        .replace(
+            /\u2029/g,
+            "\\u2029"
+        );
+}
+
+function waitForNextPaint(): Promise<void> {
+    return new Promise(
+        (resolve) => {
+            requestAnimationFrame(
+                () => resolve()
+            );
+        }
+    );
+}
+
+function isAbortError(
+    error: unknown
+): boolean {
+    return (
+        error instanceof DOMException &&
+        error.name === "AbortError"
+    );
+}
+
+function isResolvedMetadata(
+    value: unknown
+): value is ResolvedMetadata {
+    if (
+        typeof value !== "object" ||
+        value === null
+    ) {
+        return false;
+    }
+
+    const metadata =
+        value as Partial<ResolvedMetadata>;
+
+    if (
+        typeof metadata.title !==
+            "string" ||
+        !isNullableString(
+            metadata.description
+        ) ||
+        !isNullableString(
+            metadata.robots
+        ) ||
+        !isNullableString(
+            metadata.canonical
+        ) ||
+        typeof metadata.icons !==
+            "object" ||
+        metadata.icons === null
+    ) {
+        return false;
+    }
+
+    if (
+        !isNullableString(
+            metadata.icons.icon
+        ) ||
+        !isNullableString(
+            metadata.icons.shortcut
+        ) ||
+        !isNullableString(
+            metadata.icons.apple
+        )
+    ) {
+        return false;
+    }
+
+    if (metadata.openGraph === null) {
+        return true;
+    }
+
+    if (
+        typeof metadata.openGraph !==
+            "object" ||
+        metadata.openGraph === null
+    ) {
+        return false;
+    }
+
+    return (
+        isNullableString(
+            metadata.openGraph.title
+        ) &&
+        isNullableString(
+            metadata.openGraph.description
+        ) &&
+        isNullableString(
+            metadata.openGraph.url
+        ) &&
+        isNullableString(
+            metadata.openGraph.type
+        ) &&
+        isNullableString(
+            metadata.openGraph.siteName
+        ) &&
+        Array.isArray(
+            metadata.openGraph.images
+        ) &&
+        metadata.openGraph.images.every(
+            (image) =>
+                typeof image ===
+                "string"
+        )
+    );
+}
+
+function isNullableString(
+    value: unknown
+): value is string | null {
+    return (
+        value === null ||
+        typeof value === "string"
+    );
+}