@chidchanun/bcp 0.1.0

package/packages/client/src/navigation-state.ts

@@ -0,0 +1,80 @@
+import {
+    useSyncExternalStore,
+} from "react";
+
+export interface NavigationState {
+    isNavigating: boolean;
+
+    targetHref: string | null;
+
+    targetRoute: string | null;
+}
+
+const serverSnapshot: NavigationState = {
+    isNavigating: false,
+    targetHref: null,
+    targetRoute: null,
+};
+
+let currentState: NavigationState =
+    serverSnapshot;
+
+const listeners =
+    new Set<() => void>();
+
+export function getNavigationState(): NavigationState {
+    return currentState;
+}
+
+export function setNavigationState(
+    nextState: Partial<NavigationState>
+): void {
+    currentState = {
+        ...currentState,
+        ...nextState,
+    };
+
+    for (
+        const listener
+        of listeners
+    ) {
+        listener();
+    }
+}
+
+export function resetNavigationState(): void {
+    currentState = {
+        isNavigating: false,
+        targetHref: null,
+        targetRoute: null,
+    };
+
+    for (
+        const listener
+        of listeners
+    ) {
+        listener();
+    }
+}
+
+export function useNavigation(): NavigationState {
+    return useSyncExternalStore(
+        subscribe,
+        getNavigationState,
+        () => serverSnapshot
+    );
+}
+
+function subscribe(
+    listener: () => void
+): () => void {
+    listeners.add(
+        listener
+    );
+
+    return () => {
+        listeners.delete(
+            listener
+        );
+    };
+}

package/packages/client/src/not-found.ts

@@ -0,0 +1,34 @@
+const NOT_FOUND_CODE =
+    "BCP_NOT_FOUND";
+
+export interface BcpNotFoundError
+    extends Error {
+    code:
+        typeof NOT_FOUND_CODE;
+}
+
+export function notFound(): never {
+    const error =
+        new Error(
+            "BCP Framework: notFound() was called."
+        ) as BcpNotFoundError;
+
+    error.name =
+        "BcpNotFoundError";
+    error.code =
+        NOT_FOUND_CODE;
+
+    throw error;
+}
+
+export function isNotFoundError(
+    error: unknown
+): error is BcpNotFoundError {
+    return (
+        typeof error === "object" &&
+        error !== null &&
+        "code" in error &&
+        error.code ===
+            NOT_FOUND_CODE
+    );
+}

package/packages/client/src/persistent-layout-runtime.ts

@@ -0,0 +1,273 @@
+import {
+    createElement,
+    isValidElement,
+    type ReactElement,
+    type ReactNode,
+} from "react";
+
+declare global {
+    var __BCP_LAYOUT_RUNTIME_INSTALLED__:
+        | boolean
+        | undefined;
+}
+
+const layoutTypes =
+    new Map<string, ReactElement["type"]>();
+
+function installPersistentLayoutRuntime(): void {
+    if (
+        typeof window === "undefined"
+    ) {
+        return;
+    }
+
+    if (
+        globalThis.__BCP_LAYOUT_RUNTIME_INSTALLED__
+    ) {
+        return;
+    }
+
+    const root =
+        globalThis.__BCP_REACT_ROOT__;
+
+    if (!root) {
+        queueMicrotask(
+            installPersistentLayoutRuntime
+        );
+
+        return;
+    }
+
+    const originalRender =
+        root.render.bind(root);
+
+    root.render = (
+        tree: ReactNode
+    ) => {
+        originalRender(
+            normalizeLayoutTree(
+                tree
+            )
+        );
+    };
+
+    globalThis.__BCP_LAYOUT_RUNTIME_INSTALLED__ =
+        true;
+}
+
+queueMicrotask(
+    installPersistentLayoutRuntime
+);
+
+function normalizeLayoutTree(
+    tree: ReactNode
+): ReactNode {
+    const route =
+        getCurrentRoutePattern();
+
+    const layoutKeys =
+        getLayoutSegmentKeys(
+            route
+        );
+
+    const chain:
+        ReactElement[] = [];
+
+    let current =
+        tree;
+
+    let depth = 0;
+
+    while (
+        isValidElement(
+            current
+        )
+    ) {
+        const props =
+            current.props as {
+                children?: ReactNode;
+            };
+
+        if (
+            !isValidElement(
+                props.children
+            )
+        ) {
+            break;
+        }
+
+        if (
+            typeof current.type !==
+            "function"
+        ) {
+            break;
+        }
+
+        const layoutKey =
+            layoutKeys[depth] ??
+            `depth:${depth}`;
+
+        const existingType =
+            layoutTypes.get(
+                layoutKey
+            );
+
+        if (
+            existingType
+        ) {
+            chain.push(
+                createElement(
+                    existingType,
+                    createElementProps(
+                        current
+                    ),
+                    props.children
+                )
+            );
+        } else {
+            layoutTypes.set(
+                layoutKey,
+                current.type
+            );
+
+            chain.push(
+                current
+            );
+        }
+
+        current =
+            props.children;
+
+        depth++;
+    }
+
+    if (
+        chain.length === 0
+    ) {
+        return tree;
+    }
+
+    let result =
+        current;
+
+    for (
+        let index =
+            chain.length - 1;
+        index >= 0;
+        index--
+    ) {
+        const layout =
+            chain[index];
+
+        const props =
+            layout.props as
+            Record<string, unknown>;
+
+        result =
+            createElement(
+                layout.type,
+                {
+                    ...props,
+                    ...(layout.key !==
+                    null
+                        ? {
+                            key:
+                                layout.key,
+                        }
+                        : {}),
+                },
+                result
+            );
+    }
+
+    return result;
+}
+
+function getCurrentRoutePattern(): string {
+    if (
+        typeof document !==
+        "undefined"
+    ) {
+        const dataElement =
+            document.getElementById(
+                "__BCP_DATA__"
+            );
+
+        if (
+            dataElement?.textContent
+        ) {
+            try {
+                const data =
+                    JSON.parse(
+                        dataElement.textContent
+                    ) as {
+                        route?: unknown;
+                    };
+
+                if (
+                    typeof data.route ===
+                    "string"
+                ) {
+                    return data.route;
+                }
+            } catch {
+                // Fall through to the runtime URL.
+            }
+        }
+    }
+
+    return (
+        globalThis.__BCP_DEV_CONFIG__
+            ?.route ??
+        window.location.pathname
+    );
+}
+
+function createElementProps(
+    element: ReactElement
+): Record<string, unknown> {
+    return {
+        ...(element.props as
+            Record<string, unknown>),
+
+        ...(element.key !== null
+            ? {
+                key:
+                    element.key,
+            }
+            : {}),
+    };
+}
+
+function getLayoutSegmentKeys(
+    route: string
+): string[] {
+    const pathname =
+        route.split("?")[0] ||
+        "/";
+
+    const segments =
+        pathname
+            .split("/")
+            .filter(Boolean);
+
+    const keys = [
+        "/",
+    ];
+
+    let prefix = "";
+
+    for (
+        const segment
+        of segments
+    ) {
+        prefix +=
+            `/${segment}`;
+
+        keys.push(
+            prefix
+        );
+    }
+
+    return keys;
+}