octane 0.1.49 → 0.1.50

package/README.md

@@ -43,6 +43,43 @@ taking ownership of the existing markup. See the
 For the full story, see the
 [main README](https://github.com/octanejs/octane#readme).
 
+## React interoperability
+
+`octane/react` exports both hosting directions: `ReactCompat` runs real React
+components inside Octane, and `OctaneCompat` runs compiled Octane components
+inside React 19. `ReactCompat` needs matching React and React DOM versions,
+19.2 or newer in the React 19 series.
+
+```tsrx
+// App.tsrx — compiled by Octane.
+import { ReactCompat } from 'octane/react';
+import { Counter } from './Counter.react';
+
+export function App() @{
+	<ReactCompat><Counter start={3} /></ReactCompat>
+}
+```
+
+`Counter.react.tsx` stays an ordinary React module, using hooks from `react` and
+React's JSX transform with `/** @jsxImportSource react */`. Native `.tsrx`
+components stay with Octane. In a mixed build, use `requireDirective: true` with
+both compilers and mark Octane-owned `.tsx` and hook helper modules with
+`/** @jsxImportSource octane */`. Do not alias React to Octane.
+
+React retains its own state, events, refs, and component types, including class,
+`memo`, `lazy`, and `forwardRef` components. Use
+`bridgeReactContext(OctaneContext, ReactContext)` and `ReactCompat`'s `contexts`
+prop to map native context into React. Within `OctaneCompat`, Octane's `use` or
+`useContext` can read a real React context directly.
+
+Both server implementations are exported from `octane/react/server`. Octane's
+server compiler selects that entry automatically; React-owned server entries
+that bypass it must select it explicitly. Each renderer commits its own work:
+Octane transitions and `flushSync()` do not synchronously commit a
+React root. The [React interoperability guide](https://octanejs.dev/docs/react-compat)
+and [full ReactCompat reference](https://github.com/octanejs/octane/blob/main/docs/react-compat.md)
+cover setup, pending updates, SSR buffering, hydration, and nesting limits.
+
 ## Browser compatibility
 
 See the [browser support guide](https://octanejs.dev/docs/browser-support) for

package/dist/cjs/runtime.cjs

@@ -106,6 +106,7 @@ __export(runtime_exports, {
   finishNativeReadWitness: () => finishNativeReadWitness,
   flushSync: () => flushSync,
   forBlock: () => forBlock,
+  getRendererOwnerVisibility: () => getRendererOwnerVisibility,
   getRootRenderRetryKey: () => getRootRenderRetryKey,
   getTransitionFallbackTimeout: () => getTransitionFallbackTimeout,
   hasPendingWork: () => hasPendingWork,
@@ -186,6 +187,7 @@ __export(runtime_exports, {
   renderClientContextProvider: () => renderClientContextProvider,
   replaceRef: () => replaceRef,
   replayNativeReadWitness: () => replayNativeReadWitness,
+  reportRendererOwnerError: () => reportRendererOwnerError,
   requestFormReset: () => requestFormReset,
   resetFloatResourceState: () => resetFloatResourceState,
   scheduleRenderCleanup: () => scheduleRenderCleanup,
@@ -660,6 +662,7 @@ function runEffectCleanupCallback(callback) {
   }
 }
 const QUEUE = [];
+let QUEUE_REINDEX_EPOCH = 0;
 let scheduled = false;
 let syncFlush = false;
 let inFlush = false;
@@ -2126,27 +2129,41 @@ function belongsToBlockTree(block, root) {
 }
 function drainHydrationRenderPhaseUpdates(root) {
   let renders = null;
-  for (; ; ) {
-    let index = -1;
-    for (let i = 0; i < QUEUE.length; i++) {
-      if (belongsToBlockTree(QUEUE[i], root)) {
-        index = i;
-        break;
+  let read = 0;
+  let write = 0;
+  let reindexEpoch = QUEUE_REINDEX_EPOCH;
+  try {
+    while (read < QUEUE.length) {
+      const block = QUEUE[read++];
+      if (!belongsToBlockTree(block, root)) {
+        QUEUE[write++] = block;
+        continue;
+      }
+      if (!block.pending || block.disposed) continue;
+      const seen = (renders ??= /* @__PURE__ */ new Map()).get(block) ?? 0;
+      if (seen >= RENDER_PHASE_UPDATE_LIMIT) {
+        throw new Error((0, import_error_codes_client_generated.formatClientError)(9));
+      }
+      renders.set(block, seen + 1);
+      block.crossRenderUpdate = false;
+      try {
+        renderBlock(block);
+      } catch (error) {
+        handleRenderError(block, error);
+      }
+      if (reindexEpoch !== QUEUE_REINDEX_EPOCH) {
+        reindexEpoch = QUEUE_REINDEX_EPOCH;
+        read = 0;
+        write = 0;
       }
     }
-    if (index === -1) return;
-    const block = QUEUE.splice(index, 1)[0];
-    if (!block.pending || block.disposed) continue;
-    const seen = (renders ??= /* @__PURE__ */ new Map()).get(block) ?? 0;
-    if (seen >= RENDER_PHASE_UPDATE_LIMIT) {
-      throw new Error((0, import_error_codes_client_generated.formatClientError)(9));
-    }
-    renders.set(block, seen + 1);
-    block.crossRenderUpdate = false;
-    try {
-      renderBlock(block);
-    } catch (error) {
-      handleRenderError(block, error);
+  } finally {
+    if (reindexEpoch === QUEUE_REINDEX_EPOCH) {
+      while (read < QUEUE.length) {
+        QUEUE[write++] = QUEUE[read++];
+      }
+      QUEUE.length = write;
+      QUEUE_REINDEX_EPOCH++;
     }
   }
 }
@@ -2282,6 +2299,7 @@ function drainQueue() {
     }
   }
   QUEUE.length = 0;
+  QUEUE_REINDEX_EPOCH++;
   if (activitiesToRehide !== null) {
     for (const activity of activitiesToRehide) SCHEDULED_VISIBILITY_DRIVER.rehide(activity);
   }
@@ -6314,6 +6332,21 @@ function readContextFromScope(scope, context) {
   recordContextDependency(scope.block, context);
   return readContextFrom(scope, scope.block, context);
 }
+function getRendererOwnerVisibility(scope) {
+  if (findHiddenActivity(scope.block) !== null) return "activity";
+  return findSuspenseHiddenTry(scope.block) !== null ? "suspense" : "visible";
+}
+function reportRendererOwnerError(scope, error) {
+  const origin = scope.block;
+  let owner = origin;
+  while (owner !== null && blockSubtreeDisposed(owner)) owner = owner.parentBlock;
+  const handler = findTryHandler(owner);
+  if (handler !== null) reportCaughtError(owner, error, handler(error));
+  else if (!reportUncaughtError(origin, error)) {
+    if (typeof reportError === "function") reportError(error);
+    else console.error(error);
+  }
+}
 function useContextInternal(context) {
   recordContextDependency(CURRENT_BLOCK, context);
   return readContextFrom(CURRENT_SCOPE, CURRENT_BLOCK, context);
@@ -7292,6 +7325,8 @@ class HydrationCapability {
   abandoned = false;
   freshNodes = /* @__PURE__ */ new WeakSet();
   unframedRootRanges = /* @__PURE__ */ new WeakMap();
+  /** Pairs discovered while matching an outer range; released with this hydration pass. */
+  matchingCloses = null;
   /** First unclaimed root sibling after a compiled root clone; undefined until known. */
   rootRemainder;
   rootCleanupBoundary = null;
@@ -7328,7 +7363,8 @@ class HydrationCapability {
     return isBlockClose(node);
   }
   close(open) {
-    const found = findMatchingClose(open);
+    const known = this.matchingCloses?.get(open);
+    const found = known ?? findMatchingClose(open, this.matchingCloses ??= /* @__PURE__ */ new WeakMap());
     if (!this.hasAdjacentRangePair && isBlockOpen(open.previousSibling) && isBlockClose(found.nextSibling)) {
       this.hasAdjacentRangePair = true;
     }
@@ -7981,8 +8017,8 @@ function isBlockClose(node) {
 function isTextSeparator(node) {
   return node !== null && node.nodeType === 8 && node.data === import_constants.HYDRATION_TEXT_SEP;
 }
-function findMatchingClose(open) {
-  let depth = 0;
+function findMatchingClose(open, matches) {
+  let nested = null;
   let node = getNextSibling(open);
   for (; ; ) {
     if (node.nodeType === 8) {
@@ -7998,12 +8034,14 @@ function findMatchingClose(open) {
         }
       }
       if (close) {
-        if (depth === 0) {
-          return node;
+        const found = node;
+        if (nested === null || nested.length === 0) {
+          matches.set(open, found);
+          return found;
         }
-        depth -= 1;
+        matches.set(nested.pop(), found);
       } else if (nestedOpen) {
-        depth += 1;
+        (nested ??= []).push(node);
       }
     }
     node = getNextSibling(node);
@@ -9616,7 +9654,7 @@ function namespaceHeadElement(headKey, tag, attrs, text, authoredKey) {
   if (key !== void 0) config.key = key;
   return createElement(namespaceHead, config);
 }
-function injectStyle(id, css) {
+function injectStyle(id, css, nonce) {
   if (_injectedStyles.has(id)) return;
   if (typeof document !== "undefined" && document.querySelector(`style[data-octane="${id}"], style[data-href="octane-${id}"]`)) {
     _injectedStyles.add(id);
@@ -9625,6 +9663,7 @@ function injectStyle(id, css) {
   _injectedStyles.add(id);
   const el = document.createElement("style");
   el.setAttribute("data-octane", id);
+  if (nonce !== void 0) el.nonce = nonce;
   el.textContent = css;
   document.head.appendChild(el);
 }
@@ -19102,8 +19141,21 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
   const blockGroups = /* @__PURE__ */ new WeakMap();
   const scopeGroups = /* @__PURE__ */ new WeakMap();
   const ownerGroups = /* @__PURE__ */ new WeakMap();
+  const groups = [];
   const seenBlocks = /* @__PURE__ */ new WeakSet();
   const seenScopes = /* @__PURE__ */ new WeakSet();
+  let redundantMarkers = null;
+  let removalRange = null;
+  function canonicalGroup(group) {
+    let canonical = group;
+    while (canonical.parent !== null) canonical = canonical.parent;
+    while (group.parent !== null && group.parent !== canonical) {
+      const parent = group.parent;
+      group.parent = canonical;
+      group = parent;
+    }
+    return canonical;
+  }
   function makeGroup(startNode, endNode, block, liteScope, owner) {
     if (!isBlockOpen(startNode) || !isBlockClose(endNode) || startNode === endNode) return null;
     if (startNode.parentNode === null || startNode.parentNode !== endNode.parentNode) return null;
@@ -19114,43 +19166,51 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
       start: startNode,
       end: endNode,
       depth: openDepth,
+      parent: null,
       blocks: block === void 0 ? [] : [block],
       liteScopes: liteScope === void 0 ? [] : [liteScope],
       owners: owner === void 0 ? [] : [owner]
     };
+    groups.push(group);
     if (block !== void 0) blockGroups.set(block, group);
     if (liteScope !== void 0) scopeGroups.set(liteScope, group);
     if (owner !== void 0) ownerGroups.set(owner, group);
     return group;
   }
-  function appendUnique(target, source) {
-    for (let i = 0; i < source.length; i++) {
-      if (target.indexOf(source[i]) === -1) target.push(source[i]);
-    }
-  }
-  function remapGroup(from, to) {
-    for (let i = 0; i < from.blocks.length; i++) blockGroups.set(from.blocks[i], to);
-    for (let i = 0; i < from.liteScopes.length; i++) scopeGroups.set(from.liteScopes[i], to);
-    for (let i = 0; i < from.owners.length; i++) ownerGroups.set(from.owners[i], to);
-  }
   function writeMultiplicity(group) {
     group.start.data = group.depth === 1 ? import_constants.HYDRATION_START : import_constants.HYDRATION_START + String(group.depth);
     group.end.data = group.depth === 1 ? import_constants.HYDRATION_END : import_constants.HYDRATION_END + String(group.depth);
   }
+  function removeRedundantMarkerRun(anchor, after) {
+    if (redundantMarkers === null) return;
+    const adjacent = after ? anchor.nextSibling : anchor.previousSibling;
+    if (adjacent === null || adjacent.nodeType !== 8 || !redundantMarkers.has(adjacent)) {
+      return;
+    }
+    let edge = adjacent;
+    for (; ; ) {
+      const next = after ? edge.nextSibling : edge.previousSibling;
+      if (next === null || next.nodeType !== 8 || !redundantMarkers.has(next)) break;
+      edge = next;
+    }
+    const range = removalRange ??= anchor.ownerDocument.createRange();
+    range.setStartBefore(after ? adjacent : edge);
+    range.setEndAfter(after ? edge : adjacent);
+    range.deleteContents();
+  }
   function unifySharedPair(outer, inner) {
+    outer = canonicalGroup(outer);
+    inner = canonicalGroup(inner);
     if (outer === inner) return outer;
     outer.depth = Math.max(outer.depth, inner.depth);
-    appendUnique(outer.blocks, inner.blocks);
-    appendUnique(outer.liteScopes, inner.liteScopes);
-    appendUnique(outer.owners, inner.owners);
-    remapGroup(inner, outer);
+    inner.parent = outer;
     writeMultiplicity(outer);
     return outer;
   }
   function rangesAreExactlyNested(outer, inner) {
     return outer.start.parentNode !== null && outer.start.parentNode === inner.start.parentNode && outer.end.parentNode === outer.start.parentNode && inner.end.parentNode === outer.start.parentNode && outer.start.nextSibling === inner.start && inner.end.nextSibling === outer.end;
   }
-  function borrowInnerRange(outer, inner) {
+  function borrowGroupMembers(outer, inner) {
     for (let i = 0; i < inner.blocks.length; i++) {
       const block = inner.blocks[i];
       block.startMarker = outer.start;
@@ -19178,6 +19238,8 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
     }
   }
   function mergeExactRanges(outer, inner) {
+    outer = canonicalGroup(outer);
+    inner = canonicalGroup(inner);
     if (outer === inner) return outer;
     if (outer.start === inner.start && outer.end === inner.end) {
       return unifySharedPair(outer, inner);
@@ -19185,19 +19247,15 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
     if (!rangesAreExactlyNested(outer, inner)) return outer;
     const mergedDepth = outer.depth + inner.depth;
     if (!Number.isSafeInteger(mergedDepth)) return outer;
-    borrowInnerRange(outer, inner);
-    inner.start.remove();
-    inner.end.remove();
+    (redundantMarkers ??= /* @__PURE__ */ new Set()).add(inner.start).add(inner.end);
     outer.depth = mergedDepth;
-    appendUnique(outer.blocks, inner.blocks);
-    appendUnique(outer.liteScopes, inner.liteScopes);
-    appendUnique(outer.owners, inner.owners);
-    remapGroup(inner, outer);
+    inner.parent = outer;
     writeMultiplicity(outer);
     return outer;
   }
   function attachOwner(group, owner) {
     if (group === null) return;
+    group = canonicalGroup(group);
     if (group.owners.indexOf(owner) === -1) group.owners.push(owner);
     ownerGroups.set(owner, group);
   }
@@ -19223,7 +19281,8 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
   }
   function mappedGroup(value) {
     if (value === null || typeof value !== "object") return void 0;
-    return ownerGroups.get(value) ?? scopeGroups.get(value);
+    const group = ownerGroups.get(value) ?? scopeGroups.get(value);
+    return group === void 0 ? void 0 : canonicalGroup(group);
   }
   function soleRangeCandidate(scope) {
     let only = void 0;
@@ -19241,7 +19300,8 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
     }
     const registered = scope._slots;
     if (registered !== null && registered.length === 1 && scope.children === null && registered[0].__kind === "childSlot" && registered[0].compactable && mayBorrowCandidate(registered[0])) {
-      return ownerGroups.get(registered[0]) ?? null;
+      const group = ownerGroups.get(registered[0]);
+      return group === void 0 ? null : canonicalGroup(group);
     }
     return null;
   }
@@ -19324,6 +19384,21 @@ function coalesceHydratedRanges(rootBlock, liteRanges) {
     for (let i = 0; i < registered.length; i++) visitSlot(registered[i]);
   }
   visitBlock(rootBlock);
+  for (let i = 0; i < groups.length; i++) {
+    const group = groups[i];
+    const canonical = canonicalGroup(group);
+    if (group.start !== canonical.start || group.end !== canonical.end) {
+      borrowGroupMembers(canonical, group);
+    }
+  }
+  if (redundantMarkers !== null) {
+    for (let i = 0; i < groups.length; i++) {
+      const group = groups[i];
+      if (group.parent !== null) continue;
+      removeRedundantMarkerRun(group.start, true);
+      removeRedundantMarkerRun(group.end, false);
+    }
+  }
 }
 let ROOT_ERROR_HANDLERS = null;
 function registerRootErrorHandlers(root, options) {
@@ -20507,6 +20582,7 @@ function scriptResource(attrs) {
   finishNativeReadWitness,
   flushSync,
   forBlock,
+  getRendererOwnerVisibility,
   getRootRenderRetryKey,
   getTransitionFallbackTimeout,
   hasPendingWork,
@@ -20587,6 +20663,7 @@ function scriptResource(attrs) {
   renderClientContextProvider,
   replaceRef,
   replayNativeReadWitness,
+  reportRendererOwnerError,
   requestFormReset,
   resetFloatResourceState,
   scheduleRenderCleanup,