hadars 0.1.28 → 0.1.30

package/src/slim-react/render.ts

@@ -28,6 +28,7 @@ import {
   popTreeContext,
   pushComponentScope,
   popComponentScope,
+  componentCalledUseId,
   snapshotContext,
   restoreContext,
   pushContextValue,
@@ -35,7 +36,9 @@ import {
   getContextValue,
   swapContextMap,
   captureMap,
+  type TreeContext,
 } from "./renderContext";
+import { installDispatcher, restoreDispatcher } from "./dispatcher";
 
 // ---------------------------------------------------------------------------
 // HTML helpers
@@ -630,6 +633,7 @@ function renderComponent(
   }
 
   let result: SlimNode;
+  const prevDispatcher = installDispatcher();
   try {
     if (type.prototype && typeof type.prototype.render === "function") {
       const instance = new (type as any)(props);
@@ -643,12 +647,25 @@ function renderComponent(
       result = type(props);
     }
   } catch (e) {
+    restoreDispatcher(prevDispatcher);
     popComponentScope(savedScope);
     if (isProvider) popContextValue(ctx, prevCtxValue);
     throw e;
   }
+  restoreDispatcher(prevDispatcher);
+
+  // React 19 finishFunctionComponent: if the component called useId, push a
+  // tree-context slot for the component's OUTPUT children — matching React 19's
+  // `pushTreeContext(keyPath, 1, 0)` call inside finishFunctionComponent.
+  // This ensures that useId IDs produced by child components of a useId-calling
+  // component are tree-positioned identically to React's own renderer.
+  let savedIdTree: TreeContext | undefined;
+  if (!(result instanceof Promise) && componentCalledUseId()) {
+    savedIdTree = pushTreeContext(1, 0);
+  }
 
   const finish = () => {
+    if (savedIdTree !== undefined) popTreeContext(savedIdTree);
     popComponentScope(savedScope);
     if (isProvider) popContextValue(ctx, prevCtxValue);
   };
@@ -658,15 +675,25 @@ function renderComponent(
     const m = captureMap();
     return result.then((resolved) => {
       swapContextMap(m);
+      // Check useId after the async body has finished executing.
+      let asyncSavedIdTree: TreeContext | undefined;
+      if (componentCalledUseId()) {
+        asyncSavedIdTree = pushTreeContext(1, 0);
+      }
+      const asyncFinish = () => {
+        if (asyncSavedIdTree !== undefined) popTreeContext(asyncSavedIdTree);
+        popComponentScope(savedScope);
+        if (isProvider) popContextValue(ctx, prevCtxValue);
+      };
       const r = renderNode(resolved, writer, isSvg);
       if (r && typeof (r as any).then === "function") {
         const m2 = captureMap();
         return (r as Promise<void>).then(
-          () => { swapContextMap(m2); finish(); },
-          (e) => { swapContextMap(m2); finish(); throw e; },
+          () => { swapContextMap(m2); asyncFinish(); },
+          (e) => { swapContextMap(m2); asyncFinish(); throw e; },
         );
       }
-      finish();
+      asyncFinish();
     }, (e) => { swapContextMap(m); finish(); throw e; });
   }
 
@@ -785,8 +812,8 @@ async function renderSuspense(
   while (attempts < MAX_SUSPENSE_RETRIES) {
     // Restore context to the state it was in when we entered <Suspense>.
     restoreContext(snap);
+    let buffer = new BufferWriter();
     try {
-      const buffer = new BufferWriter();
       const r = renderNode(children, buffer, isSvg);
       if (r && typeof (r as any).then === "function") {
         const m = captureMap(); await r; swapContextMap(m);
@@ -823,19 +850,32 @@ async function renderSuspense(
 // Public API
 // ---------------------------------------------------------------------------
 
+export interface RenderOptions {
+  /**
+   * Must match the `identifierPrefix` option passed to `hydrateRoot` on the
+   * client so that `useId()` generates identical IDs on server and client.
+   * Defaults to `""` (React's default).
+   */
+  identifierPrefix?: string;
+}
+
 /**
  * Render a component tree to a `ReadableStream<Uint8Array>`.
  *
  * The stream pauses at `<Suspense>` boundaries until the suspended
  * promise resolves, then continues writing HTML.
  */
-export function renderToStream(element: SlimNode): ReadableStream<Uint8Array> {
+export function renderToStream(
+  element: SlimNode,
+  options?: RenderOptions,
+): ReadableStream<Uint8Array> {
   const encoder = new TextEncoder();
+  const idPrefix = options?.identifierPrefix ?? "";
 
   const contextMap = new Map<object, unknown>();
   return new ReadableStream({
     async start(controller) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       const prev = swapContextMap(contextMap);
 
       const writer: Writer = {
@@ -870,12 +910,16 @@ export function renderToStream(element: SlimNode): ReadableStream<Uint8Array> {
  * Retries the full tree when a component throws a Promise (Suspense protocol),
  * so useServerData and similar hooks work without requiring explicit <Suspense>.
  */
-export async function renderToString(element: SlimNode): Promise<string> {
+export async function renderToString(
+  element: SlimNode,
+  options?: RenderOptions,
+): Promise<string> {
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = new Map<object, unknown>();
   const prev = swapContextMap(contextMap);
   try {
     for (let attempt = 0; attempt < MAX_SUSPENSE_RETRIES; attempt++) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       swapContextMap(contextMap); // re-activate our map on each retry
       const chunks: string[] = [];
       const writer: Writer = {

package/src/slim-react/renderContext.ts

@@ -92,10 +92,11 @@ function s(): RenderState {
   return g[GLOBAL_KEY] as RenderState;
 }
 
-export function resetRenderState() {
+export function resetRenderState(idPrefix = "") {
   const st = s();
   st.currentTreeContext = { ...EMPTY };
   st.localIdCounter = 0;
+  st.idPrefix = idPrefix;
 }
 
 export function setIdPrefix(prefix: string) {
@@ -160,6 +161,11 @@ export function popComponentScope(saved: number) {
   s().localIdCounter = saved;
 }
 
+/** True if the current component has called useId at least once. */
+export function componentCalledUseId(): boolean {
+  return s().localIdCounter > 0;
+}
+
 export function snapshotContext(): { tree: TreeContext; localId: number } {
   const st = s();
   return { tree: { ...st.currentTreeContext }, localId: st.localIdCounter };
@@ -187,19 +193,19 @@ function getTreeId(): string {
 /**
  * Generate a `useId`-compatible ID for the current call site.
  *
- * Format: `_<idPrefix>R_<treeId>_`
- *   with an optional `H<n>` suffix when the same component calls useId
- *   more than once (matching React 19's `localIdCounter` behaviour).
+ * Format: `_R_<idPrefix><treeId>_`  (React 19.2+)
+ *   with an optional `H<n>` suffix for the n-th useId call in the same
+ *   component (matching React 19's `localIdCounter` behaviour).
  *
- * This matches React 19's `mountId` output on both the Fizz SSR renderer
- * and the client hydration path, so the IDs produced here will agree with
- * the real React runtime during `hydrateRoot`.
+ * React 19.2 uses `_R_<id>_` (underscore-delimited).
+ * This matches React 19.2's output from both renderToString (Fizz) and
+ * hydrateRoot, so SSR-generated IDs agree with client React during hydration.
  */
 export function makeId(): string {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = "_" + st.idPrefix + "R_" + treeId;
+  let id = "_R_" + st.idPrefix + treeId;
   if (n > 0) id += "H" + n.toString(32);
   return id + "_";
 }

package/src/ssr-render-worker.ts

@@ -13,7 +13,7 @@
 import { workerData, parentPort } from 'node:worker_threads';
 import { pathToFileURL } from 'node:url';
 import { processSegmentCache } from './utils/segmentCache';
-import { renderToString, createElement, Fragment } from './slim-react/index';
+import { renderToString, createElement } from './slim-react/index';
 
 const { ssrBundlePath } = workerData as { ssrBundlePath: string };
 
@@ -145,26 +145,21 @@ parentPort!.on('message', async (msg: any) => {
 
         const Component = _ssrMod.default;
 
-        const page = createElement(Fragment, null,
-            createElement('div', { id: 'app' }, createElement(Component, finalAppProps)),
-            createElement('script', {
-                id: 'hadars',
-                type: 'application/json',
-                dangerouslySetInnerHTML: {
-                    __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c'),
-                },
-            }),
-        );
-
-        // Re-use the same cache so useServerData returns immediately (no re-fetch).
+        // Render the Component as the direct root — matching hydrateRoot(div#app, <Component>)
+        // on the client.  Wrapping in Fragment(div#app(...), script) would add an extra
+        // pushTreeContext(2,0) from the Fragment's child array, shifting all tree-position
+        // useId values by 2 bits and causing a hydration mismatch.
         (globalThis as any).__hadarsUnsuspend = unsuspend;
-        let html: string;
+        let appHtml: string;
         try {
-            html = await renderToString(page);
+            appHtml = await renderToString(createElement(Component, finalAppProps));
         } finally {
             (globalThis as any).__hadarsUnsuspend = null;
         }
-        html = processSegmentCache(html);
+        appHtml = processSegmentCache(appHtml);
+
+        const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c');
+        const html = `<div id="app">${appHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>`;
 
         parentPort!.postMessage({ id, html, headHtml, status });
 

package/src/utils/Head.tsx

@@ -204,6 +204,9 @@ export function initServerDataCache(data: Record<string, unknown>) {
  *   awaited, the cache entry is then cleared so that the next render re-calls
  *   `fn()` — at that point the Suspense hook returns synchronously.
  *
+ * `fn` is **server-only**: it is never called in the browser. The resolved value
+ * is serialised into `__serverData` and returned from cache during hydration.
+ *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));
  * const post = useServerData(['post', postId], () => db.getPost(postId));
@@ -213,14 +216,9 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
     const cacheKey = Array.isArray(key) ? JSON.stringify(key) : key;
 
     if (typeof window !== 'undefined') {
-        // Client: if the server serialised a value for this key, return it directly
-        // (normal async case — no re-fetch in the browser).
-        if (clientServerDataCache.has(cacheKey)) {
-            return clientServerDataCache.get(cacheKey) as T | undefined;
-        }
-        // Key not serialised → Suspense hook case (e.g. useSuspenseQuery).
-        // Call fn() directly so the hook runs with its own hydrated cache.
-        return fn() as T | undefined;
+        // Client: if the server serialised a value for this key, return it directly.
+        // fn() is a server-only operation and must never run in the browser.
+        return clientServerDataCache.get(cacheKey) as T | undefined;
     }
 
     // Server: communicate via globalThis.__hadarsUnsuspend which is set by the

package/src/utils/response.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { AppHead, HadarsRequest, HadarsEntryBase, HadarsEntryModule, HadarsProps, AppContext } from "../types/hadars";
-import { renderToString, createElement, Fragment } from '../slim-react/index';
+import { renderToString, createElement } from '../slim-react/index';
 
 interface ReactResponseOptions {
     document: {
@@ -55,14 +55,12 @@ export const getReactResponse = async (
     req: HadarsRequest,
     opts: ReactResponseOptions,
 ): Promise<{
-    ReactPage: any,
+    App: React.FC<any>,
+    appProps: Record<string, unknown>,
+    clientProps: Record<string, unknown>,
     unsuspend: { cache: Map<string, any> },
     status: number,
     headHtml: string,
-    renderPayload: {
-        appProps: Record<string, unknown>;
-        clientProps: Record<string, unknown>;
-    };
 }> => {
     const App = opts.document.body;
     const { getInitProps, getAfterRenderProps, getFinalProps } = opts.document;
@@ -105,27 +103,14 @@ export const getReactResponse = async (
         ...(Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}),
     };
 
-    const ReactPage = createElement(Fragment, null,
-        createElement('div', { id: 'app' },
-            createElement(App as any, { ...props, location: req.location, context } as any),
-        ),
-        createElement('script', {
-            id: 'hadars',
-            type: 'application/json',
-            dangerouslySetInnerHTML: {
-                __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c'),
-            },
-        }),
-    );
+    const appProps = { ...props, location: req.location, context } as unknown as Record<string, unknown>;
 
     return {
-        ReactPage,
+        App: App as React.FC<any>,
+        appProps,
+        clientProps: clientProps as Record<string, unknown>,
         unsuspend,
         status: context.head.status,
         headHtml: getHeadHtml(context.head),
-        renderPayload: {
-            appProps: { ...props, location: req.location, context } as Record<string, unknown>,
-            clientProps: clientProps as Record<string, unknown>,
-        },
     };
 };