@opentf/web 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentf/web",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The native-first OTF Web runtime — signal-based reactivity and zero-VDOM DOM operations, paired with the IR-based compiler.",
   "type": "module",
   "exports": {

package/runtime/dom.js

@@ -147,6 +147,26 @@ export function setAttr(el, name, value) {
  * component picks it up from `getAttribute` when it upgrades.
  */
 export function setProp(el, name, value) {
+  // A component prop must land as a *property* (carrying the rich value), never a
+  // stringified attribute. A server-parsed custom element that a parent's adopt walk
+  // reaches while it is still inert — its own `customElements.define`-driven upgrade
+  // hasn't run yet (synchronous upgrades fire in document order, so a parent upgrades
+  // and runs this before its later-in-DOM children) — has no accessors, so `name in el`
+  // is false. Falling back to `setAttr` would stringify an object to "[object Object]"
+  // and, via `attributeChangedCallback`, clobber the child's payload-hydrated signal —
+  // flipping conditional branches and desyncing the adopt walk. Force the pending upgrade
+  // first so the property setter exists; it's a no-op for already-upgraded or non-custom
+  // elements. (A client CSR build creates already-upgraded instances, so this never fires
+  // there.)
+  if (
+    !(name in el) &&
+    el.tagName &&
+    el.tagName.includes("-") &&
+    typeof customElements !== "undefined" &&
+    customElements.get(el.tagName.toLowerCase())
+  ) {
+    customElements.upgrade(el);
+  }
   if (name in el) el[name] = value;
   else setAttr(el, name, value);
 }

package/runtime/hydrate.js

@@ -58,13 +58,55 @@ export class HydrationMismatch extends Error {
 // `firstChild`, so the structural test alone can't tell "adopt the server DOM" from
 // "build and slot these children" (it mis-adopts on plain SPA navigation). The flag is
 // the unambiguous signal — it is only ever set during the one-shot first-paint pass.
-let _hydrating = false;
+//
+// Why it initializes from the DOM sentinel, not `false`: a custom element upgrades — and
+// its `connectedCallback` runs the build-vs-adopt switch — the instant its class is
+// `customElements.define`d. Framework components imported *eagerly* by the app entry
+// (e.g. `<Link>` from `@opentf/web`) are therefore defined and upgraded during the entry
+// bundle's evaluation, **before** `mountApp` runs `beginHydration()`. If the flag were
+// still `false` then, every server-rendered `<web-link>` would take the *build* arm —
+// re-wrapping the server subtree it should have adopted (a silent `<a><a>` double-build)
+// — long before the router ever starts hydrating. So the flag is seeded synchronously
+// at module load from the server sentinel (`[data-otfw-hydrate]`, stamped only when the
+// page shipped adoptable server markup): the deferred entry module evaluates after the
+// HTML is parsed, so the sentinel is present, and this module is a transitive dependency
+// of every component (via the runtime), so it evaluates before any component's `define`.
+// `mountApp` still brackets the pass with `beginHydration`/`endHydration`, and clears the
+// flag when it decides *not* to hydrate (no sentinel / empty root), so a CSR mount and
+// every subsequent SPA navigation build fresh.
+let _hydrating =
+  typeof document !== "undefined" && !!document.querySelector("[data-otfw-hydrate]");
 
 /** Is the client mid-hydration right now? */
 export function isHydrating() {
   return _hydrating;
 }
 
+/**
+ * Run `fn` with the hydration flag *cleared*, restoring the prior value (nesting-safe).
+ *
+ * The build/adopt decision hangs on one module-global flag, but the invariant it must
+ * encode is narrower: `isHydrating()` may be true only while the DOM being processed is
+ * the server's. The moment a component builds fresh DOM — because its view isn't
+ * adoptable (`RebuildIfServerChildren`), or its adopt hit a mismatch and it's recovering,
+ * or it's a nested build — that fresh subtree is *not* server-rendered. Its child custom
+ * elements upgrade synchronously during `appendChild` inside this build, and if they still
+ * saw `isHydrating()` true they'd try to *adopt* content their parent just `createElement`'d
+ * → a guaranteed `HydrationMismatch` cascade (a non-adoptable layout would tear the whole
+ * page's islands into rebuild-storms). Bracketing every build path with this makes the
+ * children build too, matching the DOM they're actually handed. Synchronous only — builds
+ * never await — so a plain global save/restore is correct even when builds nest.
+ */
+export function runBuild(fn) {
+  const prev = _hydrating;
+  _hydrating = false;
+  try {
+    return fn();
+  } finally {
+    _hydrating = prev;
+  }
+}
+
 /** Run `fn` with the hydration flag set, restoring the prior value (nesting-safe).
  * Synchronous only — for the async first-paint pass use {@link beginHydration} /
  * {@link endHydration}, which span the route module's `import()`. */

package/runtime/router.js

@@ -504,6 +504,12 @@ export function mountApp({ pages, target, guard: g, i18n, nav, loaders } = {}) {
     typeof rootEl.hasAttribute === "function" &&
     rootEl.hasAttribute("data-otfw-hydrate")
   );
+  // The flag is seeded `true` from the sentinel at module load (so eagerly-defined
+  // framework components adopt on upgrade — see hydrate.js). If this mount is NOT
+  // hydrating after all (no sentinel, or an empty root), clear it now so the CSR build
+  // below — and every later navigation — builds fresh. The hydrate path clears it itself
+  // (via `endHydration` in `navigate`'s `finally`) once first paint is adopted.
+  if (!hydrate) endHydration();
   return navigate(
     window.location.pathname + window.location.search + window.location.hash,
     true,