@torpor/view 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -24,8 +24,10 @@ __export(index_exports, {
   $run: () => $run,
   $unwrap: () => $unwrap,
   $watch: () => $watch,
+  clearLayoutSlot: () => clearLayoutSlot,
   hydrate: () => hydrate,
   mount: () => mount,
+  runLayoutSlot: () => runLayoutSlot,
   t_add_fragment: () => addFragment,
   t_anchor: () => nodeAnchor,
   t_animate: () => addAnimation,
@@ -46,6 +48,7 @@ __export(index_exports, {
   t_run_branch: () => runControlBranch,
   t_run_control: () => runControl,
   t_run_list: () => runList,
+  t_skip: () => nodeSkip,
   t_style: () => getStyles
 });
 module.exports = __toCommonJS(index_exports);
@@ -307,12 +310,12 @@ async function animate(el, enter, keyframes, options) {
 }
 
 // src/render/addFragment.ts
-function addFragment(fragment, parent, before) {
+function addFragment(fragment, parent, before, endNode) {
   const range = context_default.activeRange;
   const hydrationNode = context_default.hydrationNode;
   if (range) {
     if (hydrationNode) {
-      range.endNode = hydrationNode;
+      range.endNode = endNode ?? hydrationNode;
     } else {
       range.startNode = fragment.firstChild;
       range.endNode = fragment.lastChild;
@@ -326,7 +329,7 @@ function addFragment(fragment, parent, before) {
     parent.insertBefore(fragment, before);
   }
   if (!parentIsFragment) {
-    if (!context_default.hydrationNode) {
+    if (!hydrationNode) {
       for (let effect of context_default.mountEffects) {
         $run(effect);
       }
@@ -378,6 +381,59 @@ function applyProps(el, props, propNamesUsed) {
   }
 }
 
+// src/render/clearRange.ts
+function clearRange(range) {
+  let animations = [];
+  clearEffects(range, animations);
+  if (animations.length) {
+    Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(range));
+  } else {
+    clearNodes(range);
+  }
+}
+function clearEffects(range, animations) {
+  if (range.effects) {
+    const oldRange = context_default.activeRange;
+    context_default.activeRange = range;
+    for (let effect of range.effects) {
+      removeEffect(effect);
+    }
+    context_default.activeRange = oldRange;
+  }
+  if (range.animations) {
+    for (let animation of range.animations) {
+      animations.push(animation);
+    }
+  }
+  if (range.children) {
+    for (let child of range.children) {
+      clearEffects(child, animations);
+    }
+    range.children.length = 0;
+  }
+}
+function clearNodes(range) {
+  if (range.startNode) {
+    let currentNode = range.endNode || range.startNode;
+    if (range.startNode.parentNode !== currentNode.parentNode) {
+      throw new Error("range nodes have different parents");
+    }
+    while (currentNode !== range.startNode) {
+      let nextNode = currentNode.previousSibling;
+      currentNode.remove();
+      currentNode = nextNode;
+    }
+    currentNode.remove();
+    range.startNode = null;
+    range.endNode = null;
+  }
+}
+
+// src/render/clearLayoutSlot.ts
+function clearLayoutSlot(range) {
+  clearRange(range);
+}
+
 // src/render/formatText.ts
 function formatText(value) {
   return value ?? "";
@@ -487,58 +543,71 @@ function newRange() {
 // src/render/hydrationMarkers.ts
 var HYDRATION_START = "[";
 var HYDRATION_END = "]";
-var HYDRATION_BRANCH = "^";
+var HYDRATION_BREAK = "^";
 
 // src/render/isComment.ts
 function isComment(node) {
-  return node.nodeType === 8;
+  return node?.nodeType === 8;
 }
 
-// src/render/nodeNext.ts
-function nodeNext(node, count) {
-  let nextNode = checkHydrationNode(node.nextSibling);
-  if (count) {
-    for (let i = 1; i < count; i++) {
-      nextNode = checkHydrationNode(nextNode.nextSibling);
-    }
-  }
-  return nextNode;
+// src/render/isText.ts
+function isText(node) {
+  return node?.nodeType === 3;
 }
-function checkHydrationNode(nextNode) {
+
+// src/render/nodeCheckHydrationBreak.ts
+function nodeCheckHydrationBreak(node) {
   if (context_default.hydrationNode) {
-    if (nextNode && isComment(nextNode) && nextNode.data === HYDRATION_BRANCH) {
-      let comment = nextNode;
-      nextNode = nextNode.nextSibling;
+    if (node && isComment(node) && node.data === HYDRATION_BREAK) {
+      let comment = node;
+      node = node.nextSibling;
       comment.remove();
     }
-    context_default.hydrationNode = nextNode;
+    context_default.hydrationNode = node;
   }
+  return node;
+}
+
+// src/render/nodeNext.ts
+function nodeNext(node, text = false) {
+  if (context_default.hydrationNode && text && isText(node)) {
+    return node;
+  }
+  let nextNode = nodeCheckHydrationBreak(node.nextSibling);
   return nextNode;
 }
 
 // src/render/nodeAnchor.ts
-function nodeAnchor(node) {
-  if (context_default.hydrationNode && isComment(node) && node.data === HYDRATION_START) {
-    let currentNode = nodeNext(node);
-    node.remove();
-    let level = 1;
-    while (currentNode) {
-      if (isComment(currentNode)) {
-        if (currentNode.data === HYDRATION_START) {
-          level += 1;
-        } else if (currentNode.data === HYDRATION_END) {
-          level -= 1;
-        }
-        if (level === 0) {
-          const endNode = currentNode.nextSibling;
-          currentNode.remove();
-          return endNode;
+function nodeAnchor(node, subsequent = false) {
+  if (context_default.hydrationNode) {
+    if (subsequent) {
+      return context_default.hydrationNode;
+    }
+    if (isComment(node) && node.data === HYDRATION_START) {
+      let currentNode = nodeNext(node);
+      node.remove();
+      let level = 1;
+      while (currentNode) {
+        if (isComment(currentNode)) {
+          if (currentNode.data === HYDRATION_START) {
+            level += 1;
+          } else if (currentNode.data === HYDRATION_END) {
+            level -= 1;
+            if (level === 0) {
+              const endNode = currentNode.nextSibling;
+              currentNode.remove();
+              if (context_default.hydrationNode === currentNode) {
+                context_default.hydrationNode = endNode;
+              }
+              return endNode;
+            }
+          }
         }
+        currentNode = currentNode.nextSibling;
+      }
+      if (!currentNode) {
+        throw new Error("End hydration comment not found");
       }
-      currentNode = currentNode.nextSibling;
-    }
-    if (!currentNode) {
-      throw new Error("End hydration comment not found");
     }
   }
   return node;
@@ -546,30 +615,43 @@ function nodeAnchor(node) {
 
 // src/render/nodeChild.ts
 function nodeChild(parent) {
-  let child = parent.firstChild;
+  let childNode = parent.firstChild;
   if (context_default.hydrationNode) {
-    if (!child) {
-      child = parent.appendChild(parent.ownerDocument.createTextNode(""));
+    if (!childNode) {
+      childNode = parent.appendChild(parent.ownerDocument.createTextNode(""));
     }
-    context_default.hydrationNode = child;
+    context_default.hydrationNode = childNode;
   }
-  return child;
+  return childNode;
 }
 
 // src/render/nodeRoot.ts
-function nodeRoot(parent) {
-  const hydrationNode = context_default.hydrationNode;
-  if (hydrationNode) {
+function nodeRoot(parent, text = false) {
+  if (context_default.hydrationNode) {
+    let rootNode = context_default.hydrationNode;
+    if (text && !isText(rootNode) && isText(rootNode.previousSibling)) {
+      rootNode = rootNode.previousSibling;
+      context_default.hydrationNode = rootNode;
+    }
     const range = context_default.activeRange;
     if (range && !range.startNode) {
-      range.startNode = hydrationNode;
+      range.startNode = rootNode;
     }
-    return hydrationNode;
+    return rootNode;
   } else {
     return parent.firstChild;
   }
 }
 
+// src/render/nodeSkip.ts
+function nodeSkip(node, count) {
+  let nextNode = node;
+  for (let i = 0; i < count; i++) {
+    nextNode = nodeCheckHydrationBreak(nextNode.nextSibling);
+  }
+  return nextNode;
+}
+
 // src/render/popRange.ts
 function popRange(oldRange) {
   context_default.activeRange = oldRange;
@@ -600,54 +682,6 @@ function runControl(range, anchor, create) {
   popRange(oldRange);
 }
 
-// src/render/clearRange.ts
-function clearRange(range) {
-  let animations = [];
-  clearEffects(range, animations);
-  if (animations.length) {
-    Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(range));
-  } else {
-    clearNodes(range);
-  }
-}
-function clearEffects(range, animations) {
-  if (range.effects) {
-    const oldRange = context_default.activeRange;
-    context_default.activeRange = range;
-    for (let effect of range.effects) {
-      removeEffect(effect);
-    }
-    context_default.activeRange = oldRange;
-  }
-  if (range.animations) {
-    for (let animation of range.animations) {
-      animations.push(animation);
-    }
-  }
-  if (range.children) {
-    for (let child of range.children) {
-      clearEffects(child, animations);
-    }
-    range.children.length = 0;
-  }
-}
-function clearNodes(range) {
-  if (range.startNode) {
-    let currentNode = range.endNode || range.startNode;
-    if (range.startNode.parentNode !== currentNode.parentNode) {
-      throw new Error("range nodes have different parents");
-    }
-    while (currentNode !== range.startNode) {
-      let nextNode = currentNode.previousSibling;
-      currentNode.remove();
-      currentNode = nextNode;
-    }
-    currentNode.remove();
-    range.startNode = null;
-    range.endNode = null;
-  }
-}
-
 // src/render/runControlBranch.ts
 function runControlBranch(range, index, create) {
   if (index >= 0 && range.index === index) {
@@ -666,6 +700,17 @@ function runControlBranch(range, index, create) {
   range.index = index;
 }
 
+// src/render/runLayoutSlot.ts
+function runLayoutSlot(component, slot, parent, anchor, $props, $context) {
+  const range = newRange();
+  const oldRange = pushRange(range, true);
+  component(parent, anchor, $props, $context, {
+    _: slot
+  });
+  popRange(oldRange);
+  return range;
+}
+
 // src/render/moveRange.ts
 function moveRange(parent, range, before) {
   const endNode = range.endNode || range.startNode;
@@ -823,8 +868,10 @@ function setDynamicElement(el, tag) {
   $run,
   $unwrap,
   $watch,
+  clearLayoutSlot,
   hydrate,
   mount,
+  runLayoutSlot,
   t_add_fragment,
   t_anchor,
   t_animate,
@@ -845,6 +892,7 @@ function setDynamicElement(el, tag) {
   t_run_branch,
   t_run_control,
   t_run_list,
+  t_skip,
   t_style
 });
 //# sourceMappingURL=index.cjs.map