@torpor/view 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -43,29 +43,10 @@ declare function addAnimation(el: HTMLElement, entry?: Animation$1, exit?: Anima
 
 declare function addEvent(el: Element, type: string, listener: (this: Element, ev: any) => any): void;
 
-declare function addFragment(fragment: DocumentFragment, parent: ParentNode, before: Node | null): void;
+declare function addFragment(fragment: DocumentFragment, parent: ParentNode, before: Node | null, endNode?: ChildNode): void;
 
 declare function applyProps(el: Element, props: Record<string, any> | undefined, propNamesUsed: string[]): void;
 
-declare function getFragment(document: Document, array: DocumentFragment[], index: number, html: string, ns?: boolean): DocumentFragment;
-
-/**
- * Hydrates a component into an existing DOM tree
- * @param parent The parent node
- * @param component The component to mount
- * @param props An object containing component props
- */
-declare function hydrate(parent: ParentNode, component: Component, props?: Record<string, any>, slots?: Record<string, SlotRender>): void;
-
-/**
- * Mounts a component into a DOM node
- *
- * @param parent The node to mount the component into
- * @param component The component to mount
- * @param props An object containing component props
- */
-declare function mount(parent: ParentNode, component: Component, props?: Record<string, any>, slots?: Record<string, SlotRender>): void;
-
 /**
  * State data for a property in a proxy.
  */
@@ -110,6 +91,27 @@ type Range = {
     animations: Set<Animation> | null;
 };
 
+declare function clearLayoutSlot(range: Range): void;
+
+declare function getFragment(document: Document, array: DocumentFragment[], index: number, html: string, ns?: boolean): DocumentFragment;
+
+/**
+ * Hydrates a component into an existing DOM tree
+ * @param parent The parent node
+ * @param component The component to mount
+ * @param props An object containing component props
+ */
+declare function hydrate(parent: ParentNode, component: Component, props?: Record<string, any>, slots?: Record<string, SlotRender>): void;
+
+/**
+ * Mounts a component into a DOM node
+ *
+ * @param parent The node to mount the component into
+ * @param component The component to mount
+ * @param props An object containing component props
+ */
+declare function mount(parent: ParentNode, component: Component, props?: Record<string, any>, slots?: Record<string, SlotRender>): void;
+
 type ListItem = Range & {
     data: Record<string, any>;
     key: any;
@@ -119,22 +121,75 @@ declare function newListItem(data: Record<PropertyKey, any>, key?: any): ListIte
 
 declare function newRange(): Range;
 
-declare function nodeAnchor(node: Node): Node;
+/**
+ * Gets the anchor node for a control statement or component.
+ *
+ * When mounting, this just returns the anchor node parameter (because it was
+ * created).
+ *
+ * When hydrating, there should be matched <![> and <!]> comments in the HTML,
+ * and the anchor node should be after the end comment. The matched comment
+ * nodes will be deleted, and the hydration node set to the first node inside
+ * the matched comments.
+ *
+ * @param node The potential anchor node.
+ * @returns The anchor node.
+ */
+declare function nodeAnchor(node: ChildNode): ChildNode;
 
 /**
- * Gets the first child of a node
+ * Gets the first child of a node.
+ *
+ * Sets the hydration node.
+ *
+ * @param parent The parent node.
  */
-declare function nodeChild(parent: Node): Node;
+declare function nodeChild(parent: Node): ChildNode;
 
 /**
- * Gets the next sibling of a node
+ * Gets the next sibling of a node.
+ *
+ * When hydrating, sets the hydration node.
+ *
+ * @param node The node.
+ * @param text Whether we require a text node.
  */
-declare function nodeNext(node: Node, count?: number): Node;
+declare function nodeNext(node: ChildNode, text?: boolean): ChildNode;
 
 /**
- * Gets the first child in a fragment
- * */
-declare function nodeRoot(parent: Node): Node;
+ * Gets the anchor node after adding a fragment.
+ *
+ * When hydrating, the anchor node initially gets set to the first node in the
+ * statement, and then we work through the nodes until we get to the anchor node
+ * itself. So, after hydrating, we need to set the anchor node to the actual
+ * anchor node, from the current hydration node.
+ *
+ * I'm not sure this is going to always be the case...
+ *
+ * @param node The anchor node.
+ * @returns The (maybe new) anchor node.
+ */
+declare function nodeReanchor(node: ChildNode): ChildNode;
+
+/**
+ * Gets the first child in a fragment.
+ *
+ * When hydrating, also sets the active range's start node, while we have it.
+ *
+ * @param parent The parent of the fragment.
+ * @param text Whether we require a text node.
+ */
+declare function nodeRoot(parent: Node, text?: boolean): ChildNode;
+
+/**
+ * Gets the sibling of a node, x nodes after it.
+ *
+ * When hydrating, sets the hydration node.
+ *
+ * @param node The node.
+ * @param count The number of nodes to skip.
+ */
+declare function nodeSkip(node: ChildNode, count: number): ChildNode;
 
 declare function popRange(oldRange: Range | null): void;
 
@@ -148,6 +203,8 @@ declare function runControl(range: Range, anchor: Node | null, create: (anchor:
 
 declare function runControlBranch(range: Range, index: number, create: () => void): void;
 
+declare function runLayoutSlot(component: Component, slot: SlotRender, parent: ParentNode, anchor: Node | null, $props: Record<string, string>, $context?: Record<PropertyKey, any>): Range;
+
 /**
  * Runs a `for` control statement
  * @param create A function that creates the control statement's branches
@@ -163,4 +220,4 @@ declare function setDynamicElement(el: HTMLElement, tag: string): HTMLElement;
  */
 type ServerComponent = ($props?: Record<string, any>, $context?: Record<string, any>, $slots?: Record<string, ServerSlotRender>) => string;
 
-export { $mount, $run, $unwrap, $watch, Component, type ListItem, type ServerComponent, ServerSlotRender, SlotRender, hydrate, mount, addFragment as t_add_fragment, nodeAnchor as t_anchor, addAnimation as t_animate, applyProps as t_apply_props, setAttribute as t_attribute, nodeChild as t_child, setDynamicElement as t_dynamic, addEvent as t_event, getFragment as t_fragment, newListItem as t_list_item, nodeNext as t_next, popRange as t_pop_range, pushRange as t_push_range, newRange as t_range, nodeRoot as t_root, runControlBranch as t_run_branch, runControl as t_run_control, runList as t_run_list };
+export { $mount, $run, $unwrap, $watch, Component, type ListItem, type ServerComponent, ServerSlotRender, SlotRender, clearLayoutSlot, hydrate, mount, runLayoutSlot, addFragment as t_add_fragment, nodeAnchor as t_anchor, addAnimation as t_animate, applyProps as t_apply_props, setAttribute as t_attribute, nodeChild as t_child, setDynamicElement as t_dynamic, addEvent as t_event, getFragment as t_fragment, newListItem as t_list_item, nodeNext as t_next, popRange as t_pop_range, pushRange as t_push_range, newRange as t_range, nodeReanchor as t_reanchor, nodeRoot as t_root, runControlBranch as t_run_branch, runControl as t_run_control, runList as t_run_list, nodeSkip as t_skip };

package/dist/index.js

@@ -262,12 +262,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;
@@ -281,7 +281,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);
       }
@@ -333,6 +333,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/getFragment.ts
 function getFragment(document, array, index, html, ns) {
   if (array[index] === void 0) {
@@ -403,58 +456,68 @@ 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;
+  if (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;
@@ -462,30 +525,48 @@ 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/nodeReanchor.ts
+function nodeReanchor(node) {
+  return context_default.hydrationNode ?? node;
 }
 
 // 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;
@@ -516,54 +597,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) {
@@ -582,6 +615,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;
@@ -738,8 +782,10 @@ export {
   $run,
   $unwrap,
   $watch,
+  clearLayoutSlot,
   hydrate,
   mount,
+  runLayoutSlot,
   addFragment as t_add_fragment,
   nodeAnchor as t_anchor,
   addAnimation as t_animate,
@@ -756,10 +802,12 @@ export {
   popRange as t_pop_range,
   pushRange as t_push_range,
   newRange as t_range,
+  nodeReanchor as t_reanchor,
   nodeRoot as t_root,
   runControlBranch as t_run_branch,
   runControl as t_run_control,
   runList as t_run_list,
+  nodeSkip as t_skip,
   getStyles as t_style
 };
 //# sourceMappingURL=index.js.map