akanjs 2.3.1-rc.1 → 2.3.1-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.3.1-rc.1",
+  "version": "2.3.1-rc.2",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/server/rscClient.tsx

@@ -1,4 +1,5 @@
-import { createElement, type ReactNode, startTransition, use, type Usable, useLayoutEffect, useState } from "react";
+import { createElement, type ReactNode, startTransition, type Usable, use, useLayoutEffect, useState } from "react";
+import { flushSync } from "react-dom";
 import { hydrateRoot } from "react-dom/client";
 import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
 import {
@@ -80,6 +81,7 @@ type RscFetchResult =
     }
   | { type: "redirected"; status?: number };
 const MAX_RSC_CACHE_ENTRIES = 32;
+const AKAN_RSC_NAVIGATION_COMMITTED_EVENT = "akan:rsc-navigation-committed";
 let documentNavigationFallbackInFlight = false;
 
 class RscRedirectNavigationStarted extends Error {
@@ -150,6 +152,10 @@ function hardNavigateAfterRscFailure(target: string, replace = false, error?: un
   else window.location.assign(target);
 }
 
+function dispatchRscNavigationCommitted(href: string): void {
+  window.dispatchEvent(new CustomEvent(AKAN_RSC_NAVIGATION_COMMITTED_EVENT, { detail: { href } }));
+}
+
 function navigateAfterRscRedirect(target: string, replace = true): void {
   const error = new RscRedirectNavigationStarted(target);
   const navigate = globalThis.__AKAN_RSC_NAVIGATE__;
@@ -168,12 +174,14 @@ function commitRscPatchNavigation({
   replace,
   scrollToTop,
   bumpScrollToTop,
+  onCommitted,
 }: {
   target: string;
   patch: Extract<RscFetchResult, { type: "patched" }>;
   replace?: boolean;
   scrollToTop?: boolean;
   bumpScrollToTop?: () => void;
+  onCommitted?: () => void;
 }): boolean {
   const patchThenable = patch.patchedNode.thenable;
   if (!patchThenable) throw new Error("[rscClient] validated RSC patch is missing a thenable");
@@ -182,7 +190,7 @@ function commitRscPatchNavigation({
 
   let outletCommitted = false;
   let headApplied = false;
-  startTransition(() => {
+  flushSync(() => {
     try {
       headApplied = commitPreparedAkanHeadSnapshotPatch(preparedHeadPatch);
       if (!headApplied) {
@@ -203,6 +211,7 @@ function commitRscPatchNavigation({
       outletCommitted = false;
     }
   });
+  if (outletCommitted && headApplied) onCommitted?.();
   return outletCommitted && headApplied;
 }
 
@@ -375,9 +384,12 @@ function Root(): ReactNode {
         maxEntries: MAX_RSC_CACHE_ENTRIES,
         startTransition,
         commitThenable: (node) => {
-          resetAkanSegmentOutletPatches();
-          setThenable(node.thenable);
+          flushSync(() => {
+            resetAkanSegmentOutletPatches();
+            setThenable(node.thenable);
+          });
         },
+        onCommitted: () => dispatchRscNavigationCommitted(target),
         navId,
         getCurrentNavId: () => navigationSeq,
       });
@@ -420,6 +432,7 @@ function Root(): ReactNode {
                 replace: options.replace,
                 scrollToTop,
                 bumpScrollToTop: () => setScrollToTopTick((tick) => tick + 1),
+                onCommitted: () => dispatchRscNavigationCommitted(target),
               })
             ) {
               rememberPatchedRouteState(patchResult.tree, patchResult.patchedNode);
@@ -444,6 +457,7 @@ function Root(): ReactNode {
               replace: options.replace,
               scrollToTop,
               bumpScrollToTop: () => setScrollToTopTick((tick) => tick + 1),
+              onCommitted: () => dispatchRscNavigationCommitted(target),
             })
           ) {
             rememberPatchedRouteState(fetched.tree, fetched.patchedNode);
@@ -490,8 +504,10 @@ function Root(): ReactNode {
         maxEntries: MAX_RSC_CACHE_ENTRIES,
         startTransition,
         commitThenable: (node) => {
-          resetAkanSegmentOutletPatches();
-          setThenable(node.thenable);
+          flushSync(() => {
+            resetAkanSegmentOutletPatches();
+            setThenable(node.thenable);
+          });
         },
         updateHistory: () => {
           if (options.replace) window.history.replaceState(null, "", target);
@@ -499,6 +515,7 @@ function Root(): ReactNode {
         },
         scrollToTop,
         bumpScrollToTop: () => setScrollToTopTick((tick) => tick + 1),
+        onCommitted: () => dispatchRscNavigationCommitted(target),
         navId,
         getCurrentNavId: () => navigationSeq,
       });

package/server/rscNavigationState.ts

@@ -329,6 +329,7 @@ interface CommitRscNavigationInput<T> {
   updateHistory?: () => void;
   scrollToTop?: boolean;
   bumpScrollToTop?: () => void;
+  onCommitted?: () => void;
 }
 
 export function commitRscNavigation<T>({
@@ -341,6 +342,7 @@ export function commitRscNavigation<T>({
   updateHistory,
   scrollToTop,
   bumpScrollToTop,
+  onCommitted,
 }: CommitRscNavigationInput<T>): void {
   rememberRscCacheEntry(cache, href, thenable, maxEntries);
   startTransition(() => {
@@ -348,6 +350,7 @@ export function commitRscNavigation<T>({
     updateHistory?.();
     if (scrollToTop) bumpScrollToTop?.();
   });
+  onCommitted?.();
 }
 
 export function commitLatestRscNavigation<T>({

package/types/server/rscNavigationState.d.ts

@@ -87,8 +87,9 @@ interface CommitRscNavigationInput<T> {
     updateHistory?: () => void;
     scrollToTop?: boolean;
     bumpScrollToTop?: () => void;
+    onCommitted?: () => void;
 }
-export declare function commitRscNavigation<T>({ cache, href, thenable, maxEntries, startTransition, commitThenable, updateHistory, scrollToTop, bumpScrollToTop, }: CommitRscNavigationInput<T>): void;
+export declare function commitRscNavigation<T>({ cache, href, thenable, maxEntries, startTransition, commitThenable, updateHistory, scrollToTop, bumpScrollToTop, onCommitted, }: CommitRscNavigationInput<T>): void;
 export declare function commitLatestRscNavigation<T>({ navId, getCurrentNavId, ...input }: CommitRscNavigationInput<T> & {
     navId: number;
     getCurrentNavId: () => number;

package/ui/System/Client.tsx

@@ -244,6 +244,8 @@ function buildSearchParams(entries: Iterable<[string, string]>): Record<string,
   return params;
 }
 
+const AKAN_RSC_NAVIGATION_COMMITTED_EVENT = "akan:rsc-navigation-committed";
+
 export const ClientInner = () => {
   const uiOperation = st.use.uiOperation();
   return (
@@ -290,11 +292,9 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
       prefix,
       router: {
         push: (href, routeOptions) => {
-          syncHref(href);
           navigateRscWithFallback(href, routeOptions, () => window.location.assign(href));
         },
         replace: (href, routeOptions) => {
-          syncHref(href);
           navigateRscWithFallback(href, { ...routeOptions, replace: true }, () => window.location.replace(href));
         },
         back: () => {
@@ -302,7 +302,6 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
         },
         refresh: () => {
           clearRscNavigationCache();
-          syncHref(window.location.href);
           void navigateRsc(window.location.href, {
             replace: true,
             scrollToTop: false,
@@ -310,7 +309,13 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
         },
       },
     });
+    const syncCommittedNavigation = (event: Event) => {
+      const detail = (event as CustomEvent<{ href?: string }>).detail;
+      syncHref(detail?.href ?? window.location.href);
+    };
+    window.addEventListener(AKAN_RSC_NAVIGATION_COMMITTED_EVENT, syncCommittedNavigation);
     void Device.load({ lang });
+    return () => window.removeEventListener(AKAN_RSC_NAVIGATION_COMMITTED_EVENT, syncCommittedNavigation);
   }, [lang, prefix]);
 
   useEffect(() => {
@@ -322,8 +327,6 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
       st.set({ pathname: window.location.pathname, path, searchParams });
     };
     sync();
-    window.addEventListener("popstate", sync);
-    return () => window.removeEventListener("popstate", sync);
   }, [lang, prefix]);
   return null;
 };