@tanstack/redact 0.0.14 → 0.0.16

package/dist/dom/features/hydration/full.js

@@ -1,78 +1,62 @@
 // packages/redact/src/dom/features/hydration/full.ts
-import { FiberTag } from "../../../core";
-import { setProp } from "../../dom";
-import { findRoot } from "../../reconcile";
+import {
+  FiberTag,
+  REACT_ELEMENT_TYPE
+} from "../../../core";
+import { createHostNode, setProp } from "../../dom";
 import { drainReplayQueue } from "../../event-replay";
-var GUARD_WINDOW_MS = 3e3;
+import { discardPendingWork, findRoot, flushSyncWork, renderRoot } from "../../reconcile";
+import { attachRootFiber, createFiberRoot } from "../../root-internal";
 function installHydrationScrollGuard() {
   if (typeof window === "undefined") return;
   const w = window;
-  if (w.__redactScrollGuardInstalled) return;
-  w.__redactScrollGuardInstalled = true;
-  const guardStartedAt = performance.now();
+  if (w._r) return;
+  const time = Date.now;
+  const guardStartedAt = w._r = time();
   let lastUserScrollAt = 0;
-  let programmatic = 0;
-  w.__redactScrollLog = [];
-  window.addEventListener(
+  let programmatic = false;
+  w.addEventListener(
     "scroll",
     () => {
-      if (programmatic === 0) {
-        lastUserScrollAt = performance.now();
-        w.__redactScrollLog.push({ t: Math.round(lastUserScrollAt), ev: "user-scroll", y: window.scrollY });
+      if (!programmatic) {
+        lastUserScrollAt = time();
       }
     },
     { capture: true, passive: true }
   );
-  const origScrollTo = window.scrollTo.bind(window);
-  window.scrollTo = function(...args) {
-    const now = performance.now();
-    const inGuardWindow = now - guardStartedAt < GUARD_WINDOW_MS;
-    const userScrolledRecently = lastUserScrollAt > 0 && now - lastUserScrollAt < 1500;
-    if (inGuardWindow && userScrolledRecently) {
-      w.__redactScrollLog.push({
-        t: Math.round(now),
-        ev: "suppressed",
-        args: JSON.stringify(args).slice(0, 80),
-        tSinceHydrate: Math.round(now - guardStartedAt),
-        tSinceUserScroll: Math.round(now - lastUserScrollAt)
-      });
+  const origScrollTo = w.scrollTo;
+  w.scrollTo = function(...args) {
+    const now = time();
+    if (now - guardStartedAt < 3e3 && now - lastUserScrollAt < 1500) {
       return;
     }
-    w.__redactScrollLog.push({
-      t: Math.round(now),
-      ev: "allowed",
-      args: JSON.stringify(args).slice(0, 80),
-      tSinceHydrate: Math.round(now - guardStartedAt),
-      inGuard: inGuardWindow,
-      userScrolled: userScrolledRecently
-    });
-    programmatic++;
+    programmatic = true;
     try {
-      return origScrollTo.apply(this, args);
+      return origScrollTo.apply(w, args);
     } finally {
       queueMicrotask(() => {
-        programmatic = Math.max(0, programmatic - 1);
+        programmatic = false;
       });
     }
   };
 }
 var HydrationCursor = class {
-  next;
-  parent;
-  endBefore;
+  n;
+  p;
+  e;
   constructor(parent, start = null, endBefore = null) {
-    this.parent = parent;
-    this.next = start ?? parent.firstChild;
-    this.endBefore = endBefore;
+    this.p = parent;
+    this.n = start ?? parent.firstChild;
+    this.e = endBefore;
   }
-  takeHostNode() {
-    while (this.next && this.next !== this.endBefore) {
-      const n = this.next;
+  take() {
+    while (this.n && this.n !== this.e) {
+      const n = this.n;
       if (n.nodeType !== 1 && n.nodeType !== 3) {
-        this.next = n.nextSibling;
+        this.n = n.nextSibling;
         continue;
       }
-      this.next = n.nextSibling;
+      this.n = n.nextSibling;
       return n;
     }
     return null;
@@ -84,10 +68,10 @@ var HydrationCursor = class {
    * name/property for meta, src for script). Non-matching nodes stay in
    * place so the SSR'd stylesheet/script order is preserved.
    */
-  takeMatchingHeadElement(tag, props) {
+  head(tag, props) {
     const target = tag.toLowerCase();
-    const keyAttrs = HEAD_KEY_ATTRS[target] ?? [];
-    let scan = this.parent.firstChild;
+    const keyAttrs = HEAD_KEY_ATTRS[target];
+    let scan = this.p.firstChild;
     while (scan) {
       if (scan.nodeType === 1 && scan.tagName.toLowerCase() === target && headAttrsMatch(scan, props, keyAttrs)) {
         CLAIMED.add(scan);
@@ -97,58 +81,130 @@ var HydrationCursor = class {
     }
     return null;
   }
-  remaining() {
-    const out = [];
-    let n = this.next;
-    while (n && n !== this.endBefore) {
-      out.push(n);
+  has() {
+    let n = this.n;
+    while (n && n !== this.e) {
+      if (n.nodeType === 1 || n.nodeType === 3) return true;
       n = n.nextSibling;
     }
-    return out;
+    return false;
   }
 };
 var hydrationCursors = /* @__PURE__ */ new WeakMap();
+var PROD_HYDRATION_ERROR = "Hydration mismatch.";
+function isHydrationBailout(error) {
+  return !!error && error.f !== void 0;
+}
+function abortHydration(cause, fiber = null) {
+  const error = cause instanceof Error ? cause : new Error(PROD_HYDRATION_ERROR);
+  error.f = fiber;
+  throw error;
+}
+function hydrateRootImpl(container, initialChildren, options) {
+  const target = container;
+  const isDocument = container.nodeType === 9;
+  const body = isDocument ? target.body : null;
+  const root = createFiberRoot(target, options);
+  installHydrationScrollGuard();
+  const normalizedInitialChildren = isDocument ? normalizeDocumentChildren(initialChildren) : initialChildren;
+  let documentBodyFallback = false;
+  let hydrationError = null;
+  beginHydration(root);
+  try {
+    flushSyncWork(() => {
+      renderRoot(root, normalizedInitialChildren);
+    });
+  } catch (e) {
+    hydrationError = e;
+  }
+  endHydration(root);
+  if (hydrationError) {
+    if (!isHydrationBailout(hydrationError)) {
+      throw hydrationError;
+    }
+    let recoveryContainer = target;
+    let recoveryChildren = normalizedInitialChildren;
+    const hostRecovery = getRecoverableHostChildren(hydrationError);
+    if (hostRecovery) {
+      recoveryContainer = hostRecovery[0];
+      recoveryChildren = hostRecovery[1];
+    } else if (body) {
+      const bodyChildren = getRecoverableDocumentBodyChildren(hydrationError);
+      if (bodyChildren != null) {
+        documentBodyFallback = true;
+        recoveryContainer = body;
+        recoveryChildren = bodyChildren;
+      }
+    }
+    resetAfterHydrationFailure(root, recoveryContainer);
+    try {
+      flushSyncWork(() => {
+        renderRoot(root, recoveryChildren);
+      });
+    } catch (clientError) {
+      resetAfterHydrationFailure(root, recoveryContainer);
+      throw clientError;
+    }
+  }
+  drainReplayQueue();
+  return {
+    render(children) {
+      flushSyncWork(() => {
+        const normalized = isDocument ? normalizeDocumentChildren(children) : children;
+        renderRoot(
+          root,
+          documentBodyFallback ? getStaticDocumentBodyChildren(normalized) ?? normalized : normalized
+        );
+      });
+    },
+    unmount() {
+      flushSyncWork(() => {
+        renderRoot(root, null);
+      });
+    }
+  };
+}
 var HEAD_KEY_ATTRS = {
   link: ["rel", "href", "sizes", "type"],
   meta: ["name", "property", "charset", "http-equiv"],
-  script: ["src", "type"],
-  style: [],
-  title: []
+  script: ["src", "type"]
 };
 var DOCUMENT_HEAD_TAGS = /* @__PURE__ */ new Set(["base", "link", "meta", "script", "style", "title"]);
 var CLAIMED = /* @__PURE__ */ new WeakSet();
 function headAttrsMatch(el, props, keys) {
   if (CLAIMED.has(el)) return false;
-  if (keys.length === 0) return true;
+  if (!keys) return true;
+  let matched = false;
   for (const k of keys) {
     const propVal = props[k] ?? (k === "http-equiv" ? props.httpEquiv : void 0);
     const elVal = el.getAttribute(k);
     if (propVal == null && elVal == null) continue;
+    matched = true;
     if (propVal == null || elVal == null) continue;
     if (String(propVal) !== elVal) return false;
   }
-  return keys.some((k) => props[k] != null || el.hasAttribute(k));
+  return matched;
 }
 function beginHydration(root) {
-  root.hydrating = true;
-  hydrationCursors.set(root.current, new HydrationCursor(root.container));
+  root.h = true;
+  hydrationCursors.set(root.r, new HydrationCursor(root.c));
 }
 function endHydration(root) {
-  root.hydrating = false;
-  hydrationCursors.delete(root.current);
+  root.h = false;
+  hydrationCursors.delete(root.r);
 }
 function tryConsumeBoundary(parent) {
   const cursor = hydrationCursors.get(findHostParent(parent));
   if (!cursor) return null;
-  const peek = cursor.next;
+  const peek = cursor.n;
   if (!peek || peek.nodeType !== 8) return null;
   const data = peek.data;
   const m = /^(\$\??)(\d+)$/.exec(data);
   if (!m) return null;
-  const kind = m[1] === "$?" ? "pending" : "resolved";
+  const kind = m[1] === "$?" ? 1 : 0;
   const id = Number(m[2]);
   const startMark = peek;
-  cursor.next = startMark.nextSibling;
+  cursor.n = startMark.nextSibling;
   let endMark = null;
   let scan = startMark.nextSibling;
   while (scan) {
@@ -159,12 +215,12 @@ function tryConsumeBoundary(parent) {
     scan = scan.nextSibling;
   }
   if (!endMark) return null;
-  return { kind, id, startMark, endMark };
+  return [kind, id, startMark, endMark];
 }
 function advanceCursorPast(parent, node) {
   const cursor = hydrationCursors.get(findHostParent(parent));
   if (!cursor) return;
-  cursor.next = node.nextSibling;
+  cursor.n = node.nextSibling;
 }
 function getHydrationCursor(hostFiber) {
   return hydrationCursors.get(hostFiber);
@@ -180,20 +236,20 @@ function adoptHostDom(fiber, parent) {
   const cursor = hydrationCursors.get(hostParent);
   if (!cursor) return false;
   const tag = fiber.type.toLowerCase();
-  const documentHeadParent = getDocumentHeadParent(cursor.parent, tag);
-  const parentEl = cursor.parent;
+  const documentHeadParent = cursor.p.nodeType === 9 && DOCUMENT_HEAD_TAGS.has(tag) ? cursor.p.head : null;
+  const parentEl = cursor.p;
   const parentTag = parentEl.nodeType === 1 ? parentEl.tagName.toLowerCase() : "";
   const isHeadish = parentTag === "head" || parentTag === "html" || !!documentHeadParent;
   let candidate;
   if (documentHeadParent) {
-    candidate = new HydrationCursor(documentHeadParent).takeMatchingHeadElement(
+    candidate = new HydrationCursor(documentHeadParent).head(
       tag,
-      fiber.pendingProps ?? {}
+      fiber.pp ?? {}
     );
   } else if (isHeadish) {
-    candidate = cursor.takeMatchingHeadElement(tag, fiber.pendingProps ?? {});
+    candidate = cursor.head(tag, fiber.pp ?? {});
   } else {
-    candidate = cursor.takeHostNode();
+    candidate = cursor.take();
   }
   if (!candidate) {
     if (!isHeadish) onMismatch(fiber, null);
@@ -204,30 +260,32 @@ function adoptHostDom(fiber, parent) {
     return false;
   }
   fiber.dom = candidate;
-  const props = fiber.pendingProps ?? {};
+  const props = fiber.pp ?? {};
   const isSvg = tag === "svg" || candidate.namespaceURI === "http://www.w3.org/2000/svg" && tag !== "foreignobject";
+  validateHydrationProps(fiber, candidate, props, tag, isSvg);
   for (const k in props) {
     if (k === "children") continue;
-    if (k[0] === "o" && k[1] === "n" && typeof props[k] === "function") {
+    if (k[0] === "o" && k[1] === "n" && typeof props[k] == "function") {
       setProp(candidate, k, props[k], void 0, isSvg);
     }
   }
   hydrationCursors.set(fiber, new HydrationCursor(candidate));
   return true;
 }
-function getDocumentHeadParent(parent, tag) {
-  if (parent.nodeType !== 9 || !DOCUMENT_HEAD_TAGS.has(tag)) return null;
-  return parent.head;
-}
 function adoptTextDom(fiber, parent, text) {
   const cursor = hydrationCursors.get(findHostParent(parent));
   if (!cursor) return false;
-  const candidate = cursor.takeHostNode();
-  if (!candidate) return false;
+  const candidate = cursor.take();
+  if (!candidate) onMismatch(fiber, null);
   if (candidate.nodeType === 3) {
     if (candidate.data !== text) {
-      ;
-      candidate.data = text;
+      if (true) {
+        failHydration(
+          fiber,
+          new Error(`Hydration text mismatch: expected "${text}" but found "${candidate.data}".`)
+        );
+      }
+      failHydration(fiber);
     }
     fiber.dom = candidate;
     return true;
@@ -244,21 +302,286 @@ function findHostParent(fiber) {
     }
     f = f.parent;
   }
-  throw new Error("No host parent found");
+  if (true) {
+    throw new Error("No host parent found");
+  }
+  throw new Error();
 }
 function onMismatch(fiber, actualNode) {
-  const root = findRoot(fiber);
-  if (root?.onRecoverableError) {
-    root.onRecoverableError(
+  if (true) {
+    failHydration(
+      fiber,
       new Error(
         `Hydration mismatch: expected <${fiber.type ?? "text"}> but found ${actualNode ? actualNode.nodeType === 1 ? actualNode.tagName : "text" : "nothing"}.`
       )
     );
   }
-  if (actualNode && actualNode.parentNode) actualNode.parentNode.removeChild(actualNode);
+  failHydration(fiber);
+}
+function failHydration(fiber, error = new Error(PROD_HYDRATION_ERROR)) {
+  const root = findRoot(fiber);
+  if (root?.re) {
+    root.re(error);
+  }
+  abortHydration(error, findHostRecoveryParent(fiber) ?? fiber);
+}
+function findHostRecoveryParent(fiber) {
+  if (fiber.tag === FiberTag.Text) {
+    let directHost = fiber.parent;
+    while (directHost && (directHost.tag !== FiberTag.Host || !directHost.dom)) {
+      directHost = directHost.parent;
+    }
+    if (!directHost) return null;
+    let hasEvent;
+    const props = directHost.pp ?? directHost.mp;
+    if (props) {
+      for (const k in props) {
+        if (k[0] === "o" && k[1] === "n" && typeof props[k] == "function") {
+          hasEvent = true;
+        }
+      }
+    }
+    return findNearestSafeHostAboveComposite(
+      hasEvent ? directHost.parent : directHost.parent?.tag === FiberTag.Host ? directHost.parent : directHost
+    );
+  }
+  return findNearestSafeHostAboveComposite(fiber.parent);
+}
+function findNearestSafeHostAboveComposite(fiber) {
+  let host = null;
+  let f = fiber;
+  while (f) {
+    if (f.tag === FiberTag.Host && f.dom) {
+      if (!isSafeHostRecoveryElement(f)) return null;
+      const parentTag = f.parent?.tag;
+      if (!host || parentTag > FiberTag.Text && parentTag < FiberTag.Suspense) {
+        host = f;
+      }
+    }
+    f = f.parent;
+  }
+  return host;
+}
+function isSafeHostRecoveryElement(fiber) {
+  const tag = fiber.type.toLowerCase();
+  return tag !== "html" && tag !== "head" && tag !== "body";
+}
+function resetAfterHydrationFailure(root, container) {
+  discardPendingWork(root);
+  clearHydrationContainer(container);
+  attachRootFiber(root, container);
+  root.h = false;
+}
+function clearHydrationContainer(container) {
+  if (container.nodeType === 9) {
+    let node = container.firstChild;
+    while (node) {
+      const next = node.nextSibling;
+      if (node.nodeType !== 10) {
+        container.removeChild(node);
+      }
+      node = next;
+    }
+    return;
+  }
+  ;
+  container.textContent = "";
+}
+function getRecoverableHostChildren(error) {
+  const host = error.f;
+  if (host?.tag !== FiberTag.Host || !host.dom || !findNearestSafeHostAboveComposite(host.parent)) {
+    return null;
+  }
+  return [host.dom, (host.pp ?? host.mp)?.children ?? null];
+}
+function getRecoverableDocumentBodyChildren(error) {
+  const bodyFiber = findBodyAncestor(error.f);
+  if (!bodyFiber) return null;
+  return (bodyFiber.pp ?? bodyFiber.mp)?.children ?? null;
+}
+function findBodyAncestor(fiber) {
+  let f = fiber;
+  while (f) {
+    if (f.tag === FiberTag.Host && f.type === "body") {
+      return f === fiber ? null : f;
+    }
+    f = f.parent;
+  }
+  return null;
+}
+function getStaticDocumentBodyChildren(children) {
+  const list = toChildArray(children);
+  const html = list.find((child) => isHostElement(child, "html"));
+  if (!html) return null;
+  const htmlChildren = toChildArray(html.props?.children);
+  const body = htmlChildren.find((child) => isHostElement(child, "body"));
+  return body ? body.props?.children ?? null : null;
+}
+function normalizeDocumentChildren(children) {
+  const list = toChildArray(children);
+  const htmlIndex = list.findIndex((child) => isHostElement(child, "html"));
+  if (htmlIndex === -1) return children;
+  const headNodes = list.filter(isHeadElement);
+  if (headNodes.length === 0) return children;
+  const htmlElement = list[htmlIndex];
+  const normalizedHtml = hoistIntoHtmlHead(htmlElement, headNodes);
+  return list.filter((child, index) => index === htmlIndex || !isHeadElement(child)).map((child) => child === htmlElement ? normalizedHtml : child);
+}
+function hoistIntoHtmlHead(htmlElement, headNodes) {
+  const htmlChildren = toChildArray(htmlElement.props?.children);
+  const headIndex = htmlChildren.findIndex((child) => isHostElement(child, "head"));
+  let nextChildren;
+  if (headIndex === -1) {
+    nextChildren = [
+      createHostElement("head", { children: headNodes }),
+      ...htmlChildren
+    ];
+  } else {
+    const headElement = htmlChildren[headIndex];
+    const existingHeadChildren = toChildArray(headElement.props?.children);
+    const nextHead = {
+      ...headElement,
+      props: {
+        ...headElement.props,
+        children: [...headNodes, ...existingHeadChildren]
+      }
+    };
+    nextChildren = htmlChildren.map((child, index) => index === headIndex ? nextHead : child);
+  }
+  return {
+    ...htmlElement,
+    props: {
+      ...htmlElement.props,
+      children: nextChildren
+    }
+  };
+}
+function toChildArray(children) {
+  if (children == null || typeof children === "boolean") return [];
+  if (Array.isArray(children)) return children;
+  if (isReactElement(children)) return [children];
+  if (typeof children !== "string" && isIterable(children)) return Array.from(children);
+  return [children];
+}
+function isHeadElement(value) {
+  return isReactElement(value) && typeof value.type === "string" && DOCUMENT_HEAD_TAGS.has(value.type);
+}
+function isHostElement(value, tag) {
+  return isReactElement(value) && value.type === tag;
+}
+function isReactElement(value) {
+  return !!value && typeof value === "object" && value.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isIterable(value) {
+  return !!value && typeof value[Symbol.iterator] == "function";
+}
+function createHostElement(type, props) {
+  return {
+    $$typeof: REACT_ELEMENT_TYPE,
+    type,
+    key: null,
+    ref: null,
+    props
+  };
+}
+function validateHydrationProps(fiber, el, props, tag, isSvg) {
+  if (props.suppressHydrationWarning) return;
+  let expected;
+  for (const k in props) {
+    const value = props[k];
+    if (k === "children" || k === "key" || k === "ref" || k === "suppressHydrationWarning" || k === "suppressContentEditableWarning" || k[0] === "o" && k[1] === "n" && typeof value == "function") continue;
+    if (k === "dangerouslySetInnerHTML") {
+      const probe = document.createElement("div");
+      probe.innerHTML = value?.__html ?? "";
+      if (el.innerHTML !== probe.innerHTML) {
+        if (true) {
+          failHydration(
+            fiber,
+            new Error(`Hydration HTML mismatch inside <${tag}>.`)
+          );
+        }
+        failHydration(fiber);
+      }
+      continue;
+    }
+    if (k === "value" || k === "defaultValue") {
+      if (tag === "select") continue;
+      if (tag === "input" || tag === "textarea") {
+        if (k === "value" || props.value == null) {
+          if (value != null && el.value !== "" + value) {
+            if (true) {
+              failHydration(fiber, new Error(`Hydration ${tag} value mismatch on <${tag}>.`));
+            }
+            failHydration(fiber);
+          }
+        }
+        continue;
+      }
+    }
+    if (tag === "input" && (k === "checked" || k === "defaultChecked")) {
+      if (k === "checked" || props.checked == null) {
+        if (value != null && el.checked !== !!value) {
+          if (true) {
+            failHydration(fiber, new Error(`Hydration checked mismatch on <input>.`));
+          }
+          failHydration(fiber);
+        }
+      }
+      continue;
+    }
+    if (tag === "option" && k === "selected") {
+      if (value != null && el.selected !== !!value) {
+        if (true) {
+          failHydration(fiber, new Error(`Hydration selected mismatch on <option>.`));
+        }
+        failHydration(fiber);
+      }
+      continue;
+    }
+    if (k === "style") {
+      expected ??= createHostNode(tag, isSvg);
+      setProp(expected, k, value, void 0, isSvg);
+      if (el.style.cssText !== expected.style.cssText) {
+        if (true) {
+          failHydration(
+            fiber,
+            new Error(`Hydration style mismatch on <${tag}>.`)
+          );
+        }
+        failHydration(fiber);
+      }
+      continue;
+    }
+    const stringifiedBoolean = k.startsWith("aria-") || k.startsWith("data-");
+    const attr = k === "className" ? "class" : k === "htmlFor" ? "for" : stringifiedBoolean ? k : k.toLowerCase();
+    let expectedValue;
+    if (value == null || value === false && !stringifiedBoolean) {
+      expectedValue = null;
+    } else {
+      expected ??= createHostNode(tag, isSvg);
+      setProp(expected, k, value, void 0, isSvg);
+      expectedValue = expected.getAttribute(attr);
+    }
+    const actualValue = el.getAttribute(attr);
+    if (expectedValue !== actualValue) {
+      if (true) {
+        failHydration(
+          fiber,
+          new Error(
+            `Hydration attribute mismatch on <${tag}> for "${attr}": expected ${formatHydrationValue(expectedValue)} but found ${formatHydrationValue(actualValue)}.`
+          )
+        );
+      }
+      failHydration(fiber);
+    }
+  }
+}
+function formatHydrationValue(value) {
+  return value == null ? "nothing" : JSON.stringify(value);
 }
 export {
   HydrationCursor,
+  abortHydration,
   adoptHostDom,
   adoptTextDom,
   advanceCursorPast,
@@ -268,7 +591,9 @@ export {
   endHydration,
   findHostParent,
   getHydrationCursor,
+  hydrateRootImpl,
   installHydrationScrollGuard,
+  isHydrationBailout,
   setHydrationCursor,
   tryConsumeBoundary
 };