@torpor/view 0.1.10 → 0.2.0

package/dist/index.cjs

@@ -25,16 +25,16 @@ __export(index_exports, {
   $unwrap: () => $unwrap,
   $watch: () => $watch,
   clearLayoutSlot: () => clearLayoutSlot,
+  fillLayoutSlot: () => fillLayoutSlot,
   hydrate: () => hydrate,
   mount: () => mount,
-  runLayoutSlot: () => runLayoutSlot,
   t_add_fragment: () => addFragment,
   t_anchor: () => nodeAnchor,
   t_animate: () => addAnimation,
   t_apply_props: () => applyProps,
   t_attribute: () => setAttribute,
   t_child: () => nodeChild,
-  t_class: () => getClasses,
+  t_class: () => buildClasses,
   t_dynamic: () => setDynamicElement,
   t_event: () => addEvent,
   t_fmt: () => formatText,
@@ -49,7 +49,7 @@ __export(index_exports, {
   t_run_control: () => runControl,
   t_run_list: () => runList,
   t_skip: () => nodeSkip,
-  t_style: () => getStyles
+  t_style: () => buildStyles
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -309,6 +309,11 @@ async function animate(el, enter, keyframes, options) {
   }
 }
 
+// src/render/isFragmentNode.ts
+function isFragmentNode(node) {
+  return node?.nodeType === 11;
+}
+
 // src/render/addFragment.ts
 function addFragment(fragment, parent, before, endNode) {
   const range = context_default.activeRange;
@@ -321,7 +326,7 @@ function addFragment(fragment, parent, before, endNode) {
       range.endNode = fragment.lastChild;
     }
   }
-  let parentIsFragment = parent.nodeType === 11;
+  let parentIsFragment = isFragmentNode(parent);
   if (!hydrationNode) {
     if (parentIsFragment) {
       parent = before.parentNode;
@@ -381,6 +386,59 @@ function applyProps(el, props, propNamesUsed) {
   }
 }
 
+// src/render/buildClasses.ts
+function buildClasses(value, styleHash) {
+  if (typeof value === "string") {
+    if (styleHash) {
+      value += " " + styleHash;
+    }
+    return value;
+  } else {
+    let classes = [];
+    gatherNames("", value, classes);
+    if (styleHash) {
+      classes.push(styleHash);
+    }
+    return classes.join(" ");
+  }
+}
+function gatherNames(name, value, classes) {
+  if (value) {
+    if (Array.isArray(value)) {
+      for (let v of value) {
+        gatherNames(v, v, classes);
+      }
+    } else if (typeof value === "object") {
+      for (let [n, v] of Object.entries(value)) {
+        gatherNames(n, v, classes);
+      }
+    } else {
+      classes.push(name);
+    }
+  }
+}
+
+// src/render/buildStyles.ts
+function buildStyles(value) {
+  if (typeof value === "string") {
+    return value;
+  } else {
+    let styles = [];
+    if (value) {
+      if (Array.isArray(value)) {
+        for (let v of value) {
+          styles.push(v);
+        }
+      } else if (typeof value === "object") {
+        for (let [n, v] of Object.entries(value)) {
+          styles.push(`${n}: ${v}`);
+        }
+      }
+    }
+    return styles.join("; ");
+  }
+}
+
 // src/render/clearRange.ts
 function clearRange(range) {
   let animations = [];
@@ -434,34 +492,47 @@ function clearLayoutSlot(range) {
   clearRange(range);
 }
 
-// src/render/formatText.ts
-function formatText(value) {
-  return value ?? "";
+// src/render/newRange.ts
+function newRange() {
+  return {
+    startNode: null,
+    endNode: null,
+    children: null,
+    index: 0,
+    effects: null,
+    animations: null
+  };
 }
 
-// src/render/getClasses.ts
-function getClasses(value, styleHash) {
-  let classes = [];
-  gatherNames("", value, classes);
-  if (styleHash) {
-    classes.push(styleHash);
-  }
-  return classes.join(" ");
+// src/render/popRange.ts
+function popRange(oldRange) {
+  context_default.activeRange = oldRange;
 }
-function gatherNames(name, value, classes) {
-  if (value) {
-    if (Array.isArray(value)) {
-      for (let v of value) {
-        gatherNames(v, v, classes);
-      }
-    } else if (typeof value === "object") {
-      for (let [n, v] of Object.entries(value)) {
-        gatherNames(n, v, classes);
-      }
-    } else {
-      classes.push(name);
-    }
+
+// src/render/pushRange.ts
+function pushRange(range, toParent = false) {
+  const activeRange = context_default.activeRange;
+  if (toParent && activeRange) {
+    (activeRange.children ??= []).push(range);
   }
+  context_default.activeRange = range;
+  return activeRange;
+}
+
+// src/render/fillLayoutSlot.ts
+function fillLayoutSlot(component, slot, parent, anchor, $props, $context) {
+  const range = newRange();
+  const oldRange = pushRange(range);
+  component(parent, anchor, $props, $context, {
+    _: slot
+  });
+  popRange(oldRange);
+  return range;
+}
+
+// src/render/formatText.ts
+function formatText(value) {
+  return value ?? "";
 }
 
 // src/render/getFragment.ts
@@ -483,15 +554,6 @@ function getFragment(document, array, index, html, ns) {
   return fragment;
 }
 
-// src/render/getStyles.ts
-function getStyles(value) {
-  let styles = [];
-  for (let [n, v] of Object.entries(value)) {
-    styles.push(`${n}: ${v}`);
-  }
-  return styles.join("; ");
-}
-
 // src/render/hydrate.ts
 function hydrate(parent, component, props, slots) {
   context_default.hydrationNode = parent.firstChild;
@@ -528,37 +590,25 @@ function newListItem(data, key) {
   };
 }
 
-// src/render/newRange.ts
-function newRange() {
-  return {
-    startNode: null,
-    endNode: null,
-    children: null,
-    index: 0,
-    effects: null,
-    animations: null
-  };
-}
-
 // src/render/hydrationMarkers.ts
 var HYDRATION_START = "[";
 var HYDRATION_END = "]";
 var HYDRATION_BREAK = "^";
 
-// src/render/isComment.ts
-function isComment(node) {
+// src/render/isCommentNode.ts
+function isCommentNode(node) {
   return node?.nodeType === 8;
 }
 
-// src/render/isText.ts
-function isText(node) {
+// src/render/isTextNode.ts
+function isTextNode(node) {
   return node?.nodeType === 3;
 }
 
 // src/render/nodeCheckHydrationBreak.ts
 function nodeCheckHydrationBreak(node) {
   if (context_default.hydrationNode) {
-    if (node && isComment(node) && node.data === HYDRATION_BREAK) {
+    if (node && isCommentNode(node) && node.data === HYDRATION_BREAK) {
       let comment = node;
       node = node.nextSibling;
       comment.remove();
@@ -570,7 +620,7 @@ function nodeCheckHydrationBreak(node) {
 
 // src/render/nodeNext.ts
 function nodeNext(node, text = false) {
-  if (context_default.hydrationNode && text && isText(node)) {
+  if (context_default.hydrationNode && text && isTextNode(node)) {
     return node;
   }
   let nextNode = nodeCheckHydrationBreak(node.nextSibling);
@@ -580,12 +630,12 @@ function nodeNext(node, text = false) {
 // src/render/nodeAnchor.ts
 function nodeAnchor(node) {
   if (context_default.hydrationNode) {
-    if (isComment(node) && node.data === HYDRATION_START) {
+    if (isCommentNode(node) && node.data === HYDRATION_START) {
       let currentNode = nodeNext(node);
       node.remove();
       let level = 1;
       while (currentNode) {
-        if (isComment(currentNode)) {
+        if (isCommentNode(currentNode)) {
           if (currentNode.data === HYDRATION_START) {
             level += 1;
           } else if (currentNode.data === HYDRATION_END) {
@@ -626,10 +676,14 @@ function nodeChild(parent) {
 function nodeRoot(parent, text = false) {
   if (context_default.hydrationNode) {
     let rootNode = context_default.hydrationNode;
-    if (text && !isText(rootNode) && isText(rootNode.previousSibling)) {
+    if (text && !isTextNode(rootNode) && isTextNode(rootNode.previousSibling)) {
       rootNode = rootNode.previousSibling;
       context_default.hydrationNode = rootNode;
     }
+    if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
+      rootNode = rootNode.nextSibling;
+      context_default.hydrationNode = rootNode;
+    }
     const range = context_default.activeRange;
     if (range && !range.startNode) {
       range.startNode = rootNode;
@@ -649,21 +703,6 @@ function nodeSkip(node, count) {
   return nextNode;
 }
 
-// src/render/popRange.ts
-function popRange(oldRange) {
-  context_default.activeRange = oldRange;
-}
-
-// src/render/pushRange.ts
-function pushRange(range, toParent = false) {
-  const activeRange = context_default.activeRange;
-  if (toParent && activeRange) {
-    (activeRange.children ??= []).push(range);
-  }
-  context_default.activeRange = range;
-  return activeRange;
-}
-
 // src/render/runControl.ts
 function runControl(range, anchor, create) {
   range.index = -1;
@@ -697,21 +736,13 @@ 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);
-  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;
   let currentNode = range.startNode;
+  if (isFragmentNode(parent)) {
+    parent = before.parentNode;
+  }
   while (currentNode) {
     const nextNode = currentNode.nextSibling;
     parent.insertBefore(currentNode, before);
@@ -866,9 +897,9 @@ function setDynamicElement(el, tag) {
   $unwrap,
   $watch,
   clearLayoutSlot,
+  fillLayoutSlot,
   hydrate,
   mount,
-  runLayoutSlot,
   t_add_fragment,
   t_anchor,
   t_animate,