@vesk/vesk-cli 0.2.41 → 0.2.42

package/dist/cli.js

@@ -2283,6 +2283,16 @@ function runInHydrateBlock(fn) {
     throw error;
   }
 }
+function recordClaim(root3, record) {
+  claimRegistry.set(record.el, record);
+  if (!root3) return;
+  const records = walkerClaimRecords.get(root3);
+  if (records) records.push(record);
+  else walkerClaimRecords.set(root3, [record]);
+}
+function isAdopted(el) {
+  return claimRegistry.get(el)?.state === "adopted";
+}
 function reportHydrationIssue(issue) {
   if (!__mismatchHandler) return;
   try {
@@ -2304,13 +2314,15 @@ function reportMiss(kind, detail, loud) {
   }
   if (loud) devWarn(`${kind}: ${detail}`);
 }
-function stampClaimed(el) {
-  if (__hydrateDevMode) {
-    try {
-      el.setAttribute(CLAIMED_ATTR, "");
-    } catch {
-    }
-  }
+function recordAdopted(root3, el, expectedTag) {
+  recordClaim(root3, {
+    state: "adopted",
+    el,
+    owner: root3,
+    expectedTag,
+    actualTag: el.tagName.toLowerCase(),
+    detached: false
+  });
 }
 function stripDirectTextNodes(el) {
   let text = "";
@@ -2361,8 +2373,8 @@ function scanTwins(container) {
     let a = false;
     let b = false;
     try {
-      a = el.hasAttribute(CLAIMED_ATTR);
-      b = prev.hasAttribute(CLAIMED_ATTR);
+      a = isAdopted(el);
+      b = isAdopted(prev);
     } catch {
       continue;
     }
@@ -2405,6 +2417,30 @@ function auditHydration(container) {
     }
     if (!sample && container.outerHTML) sample = String(container.outerHTML).slice(0, 800);
   }
+  const structuralRecords = [];
+  const seenRecords = /* @__PURE__ */ new Set();
+  const collectWalkerRecords = (el) => {
+    const records = walkerClaimRecords.get(el);
+    if (records) {
+      for (const record of records) {
+        if (!seenRecords.has(record)) {
+          seenRecords.add(record);
+          structuralRecords.push(record);
+        }
+      }
+    }
+    for (let i = 0; i < el.children.length; i++) collectWalkerRecords(el.children[i]);
+  };
+  collectWalkerRecords(container);
+  const structuralGhosts = structuralRecords.filter((record) => record.state === "ghost");
+  if (structuralGhosts.length > 0) {
+    unclaimed += structuralGhosts.length;
+    if (orphanNames.length < 5) {
+      orphanNames.push(
+        `${structuralGhosts.length} structural hydration ghost(s) (${structuralGhosts.slice(0, 3).map((record) => `<${record.actualTag}> expected <${record.expectedTag}>`).join(", ")})`
+      );
+    }
+  }
   const twinRes = scanTwins(container);
   const issues = [];
   if (unclaimed > 0) {
@@ -2432,6 +2468,14 @@ function auditHydration(container) {
       } catch {
       }
     }
+    for (const record of structuralGhosts) {
+      try {
+        if (record.detached || !record.owner || record.el.parentNode !== record.owner) continue;
+        record.el.remove();
+        record.detached = true;
+      } catch {
+      }
+    }
   }
   if (__mismatchHandler) {
     for (const issue of issues) {
@@ -2462,7 +2506,7 @@ ${report.sample}`
 }
 function underClaimedAncestor(el, container) {
   for (let n = el; n && n !== container; n = n.parentElement) {
-    if (n.nodeType === 1 && n.hasAttribute(CLAIMED_ATTR)) return true;
+    if (n.nodeType === 1 && isAdopted(n)) return true;
   }
   return false;
 }
@@ -2523,7 +2567,7 @@ function checkMarkerIdentity(marker, el) {
     }
   }
 }
-function adoptElement(marker, tag) {
+function adoptElement(root3, marker, tag) {
   const el = marker.nextElementSibling;
   if (!el) {
     marker.remove();
@@ -2534,10 +2578,10 @@ function adoptElement(marker, tag) {
   marker.remove();
   stripDirectTextNodes(el);
   captureSsrElementChildren(el);
-  stampClaimed(el);
+  recordAdopted(root3, el, tag || el.tagName.toLowerCase());
   return el;
 }
-function adoptElementRaw(marker, tag) {
+function adoptElementRaw(root3, marker, tag) {
   const el = marker.nextElementSibling;
   if (!el) {
     marker.remove();
@@ -2547,7 +2591,7 @@ function adoptElementRaw(marker, tag) {
   checkMarkerIdentity(marker, el);
   marker.remove();
   captureSsrElementChildren(el);
-  stampClaimed(el);
+  recordAdopted(root3, el, tag || el.tagName.toLowerCase());
   return el;
 }
 function createHydrateWalker(container, markerList) {
@@ -2752,14 +2796,15 @@ function hydrateOnInteraction(container, componentFn, props, options = {}) {
     }
   };
 }
-var __hydrateDevMode, CLAIMED_ATTR, __hydrateStrict, __mismatchHandler, _SHOW_COMMENT, _FILTER_ACCEPT, _FILTER_SKIP, WalkerEngine, StructuralWalker;
+var __hydrateDevMode, claimRegistry, walkerClaimRecords, __hydrateStrict, __mismatchHandler, _SHOW_COMMENT, _FILTER_ACCEPT, _FILTER_SKIP, WalkerEngine, StructuralWalker;
 var init_hydrate = __esm({
   "../runtime/src/hydrate.ts"() {
     "use strict";
     init_ripple_runtime();
     init_ripple_blocks();
     __hydrateDevMode = true;
-    CLAIMED_ATTR = "data-vsk-claimed";
+    claimRegistry = /* @__PURE__ */ new WeakMap();
+    walkerClaimRecords = /* @__PURE__ */ new WeakMap();
     __hydrateStrict = false;
     __mismatchHandler = null;
     _SHOW_COMMENT = 128;
@@ -2844,7 +2889,7 @@ var init_hydrate = __esm({
             break;
           }
           this.idx++;
-          const adopted = adoptElement(tm.comment, tag);
+          const adopted = adoptElement(this.root, tm.comment, tag);
           if (adopted === null) {
             tm.state = "claimed";
             break;
@@ -2896,7 +2941,7 @@ ${String(this.root.outerHTML).slice(0, 800)}` : ""),
             break;
           }
           this.idx++;
-          const adopted = adoptElementRaw(tm.comment, tag);
+          const adopted = adoptElementRaw(this.root, tm.comment, tag);
           if (adopted === null) {
             tm.state = "claimed";
             break;
@@ -2986,7 +3031,7 @@ ${String(this.root.outerHTML).slice(0, 800)}` : ""),
         tm.comment.remove();
         stripDirectTextNodes(el);
         captureSsrElementChildren(el);
-        stampClaimed(el);
+        recordAdopted(this.root, el, el.tagName.toLowerCase());
         return { el };
       }
       claimByKey(key, options) {
@@ -3160,12 +3205,37 @@ ${String(this.root.outerHTML).slice(0, 800)}` : ""),
           const el = this.els[target];
           if (tag && el.tagName.toLowerCase() !== tag) {
             this.idx = this.advancePastSkippable(target + 1);
+            const ghost = {
+              state: "ghost",
+              el,
+              owner: this.root,
+              expectedTag: tag || "div",
+              actualTag: el.tagName.toLowerCase(),
+              detached: false
+            };
+            recordClaim(this.root, ghost);
+            if (this.root && el.parentNode === this.root) {
+              try {
+                el.remove();
+                ghost.detached = true;
+              } catch {
+              }
+            }
+            const fresh2 = document.createElement(tag || "div");
+            recordClaim(this.root, {
+              state: "fresh",
+              el: fresh2,
+              owner: this.root,
+              expectedTag: tag || "div",
+              actualTag: fresh2.tagName.toLowerCase(),
+              detached: false
+            });
             reportMiss(
               "tag-mismatch",
-              `descriptor wanted <${tag}> but the SSR slot holds <${el.tagName.toLowerCase()}>; consuming one slot and rendering fresh.`,
+              `descriptor wanted <${tag}> but the SSR slot holds <${el.tagName.toLowerCase()}>; consumed one slot, detached the local ghost, and rendered fresh.`,
               false
             );
-            return document.createElement(tag || "div");
+            return fresh2;
           }
           if (this.adopted.has(el)) {
             target = this.advancePastSkippable(target + 1);
@@ -3175,10 +3245,19 @@ ${String(this.root.outerHTML).slice(0, 800)}` : ""),
           this.adopted.add(el);
           if (!raw2) stripDirectTextNodes(el);
           captureSsrElementChildren(el);
-          stampClaimed(el);
+          recordAdopted(this.root, el, tag || el.tagName.toLowerCase());
           return el;
         }
         this.idx = this.els.length;
+        const fresh = document.createElement(tag || "div");
+        recordClaim(this.root, {
+          state: "fresh",
+          el: fresh,
+          owner: this.root,
+          expectedTag: tag || "div",
+          actualTag: fresh.tagName.toLowerCase(),
+          detached: false
+        });
         reportMiss(
           "exhausted",
           `hydration claim missed <${tag || "element"}>; the client rendered more or different content than SSR.`,
@@ -3187,7 +3266,7 @@ ${String(this.root.outerHTML).slice(0, 800)}` : ""),
           // nodes) — telemetry-only, mirroring the marker engine.
           false
         );
-        return document.createElement(tag || "div");
+        return fresh;
       }
       nextElement(tag, skipK = 0) {
         return this.claimAt(tag, skipK, false);
@@ -3236,7 +3315,7 @@ ${String(this.root.outerHTML).slice(0, 800)}` : ""),
           this.adopted.add(el);
           stripDirectTextNodes(el);
           captureSsrElementChildren(el);
-          stampClaimed(el);
+          recordAdopted(this.root, el, el.tagName.toLowerCase());
           return { el };
         }
         this.idx = this.els.length;
@@ -23367,7 +23446,8 @@ function Form(props, registry, hydrate) {
     return `<form ${attrStr}>${children || ""}</form>`;
   }
   if (hydrate && hydrate.nextElement) {
-    let form2 = hydrate.nextElement("form");
+    const skipK = typeof hydrate.takeSkipK === "function" ? hydrate.takeSkipK() : 0;
+    let form2 = hydrate.nextElement("form", skipK);
     if (form2 && !form2.parentNode && hydrate.root) {
       const existing = hydrate.root.querySelector("form");
       if (existing) form2 = existing;
@@ -29213,7 +29293,7 @@ function emitComponentCall(ctx2, node, tracked2, effectsVar, parentVar, compPref
       const frag = ctx2.n();
       const wipeMount = ctx2.linkNames.has(node.componentName);
       const savedHydrate = ctx2.hydrate;
-      if (wipeMount) ctx2.hydrate = false;
+      if (wipeMount || ctx2.selfClaimNames.has(node.componentName)) ctx2.hydrate = false;
       ctx2.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
       const savedEffects = ctx2.effects;
       ctx2.effects = [];
@@ -43760,7 +43840,7 @@ function emitComponentCall2(ctx2, node, tracked2, effectsVar, parentVar, compPre
       const frag = ctx2.n();
       const wipeMount = ctx2.linkNames.has(node.componentName);
       const savedHydrate = ctx2.hydrate;
-      if (wipeMount)
+      if (wipeMount || ctx2.selfClaimNames.has(node.componentName))
         ctx2.hydrate = false;
       ctx2.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
       const savedEffects = ctx2.effects;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/vesk-cli",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "type": "module",
   "description": "Vesk — compiler-first framework for the post-VDOM web. vesk dev, vesk build.",
   "bin": {
@@ -8,10 +8,10 @@
   },
   "main": "./dist/cli.js",
   "dependencies": {
-    "@vesk/adapter": "^0.2.41",
-    "@vesk/compiler": "^0.2.41",
-    "@vesk/plugin-tailwind": "^0.2.41",
-    "@vesk/runtime": "^0.2.41",
+    "@vesk/adapter": "^0.2.42",
+    "@vesk/compiler": "^0.2.42",
+    "@vesk/plugin-tailwind": "^0.2.42",
+    "@vesk/runtime": "^0.2.42",
     "esrap": "^2.3.0",
     "typescript": "^5.8.0",
     "ws": "^8.18.0",