@vertz/ui 0.2.23 → 0.2.25

package/dist/src/internals.js

@@ -1,21 +1,15 @@
 import {
+  ListAnimationContext,
   deserializeProps,
   onAnimationsComplete,
   resolveComponent
-} from "../shared/chunk-p3fz6qqp.js";
+} from "../shared/chunk-ymc3wwam.js";
 import {
-  __attr,
-  __classList,
   __discardMountFrame,
   __flushMountFrame,
   __on,
-  __prop,
-  __pushMountFrame,
-  __show
-} from "../shared/chunk-2kyhn86t.js";
-import {
-  styleObjectToString
-} from "../shared/chunk-4xkw6h1s.js";
+  __pushMountFrame
+} from "../shared/chunk-svvqjmyy.js";
 import {
   executeLoaders,
   matchPath,
@@ -26,7 +20,7 @@ import {
   MemoryCache,
   QueryEnvelopeStore,
   deriveKey
-} from "../shared/chunk-g6fb5yc2.js";
+} from "../shared/chunk-1jgws7rs.js";
 import"../shared/chunk-jrtrk5z4.js";
 import {
   ALIGNMENT_MAP,
@@ -47,28 +41,35 @@ import {
   SIZE_KEYWORDS,
   SPACING_SCALE,
   compileTheme
-} from "../shared/chunk-xhc7arn9.js";
+} from "../shared/chunk-j1a7t906.js";
 import {
+  RENDER_NODE_BRAND,
   __append,
+  __attr,
   __child,
+  __classList,
   __element,
   __enterChildren,
   __exitChildren,
   __insert,
+  __prop,
+  __show,
   __staticText,
-  __text
-} from "../shared/chunk-13tvh4wq.js";
-import"../shared/chunk-prj7nm08.js";
-import {
-  RENDER_NODE_BRAND,
+  __text,
   createDOMAdapter,
   getAdapter,
   isRenderNode,
   setAdapter
-} from "../shared/chunk-2y9f9j62.js";
+} from "../shared/chunk-djvarb8r.js";
+import {
+  SVG_NS,
+  normalizeSVGAttr,
+  styleObjectToString
+} from "../shared/chunk-h1fsr8kv.js";
+import"../shared/chunk-09ntccdx.js";
 import {
   isBrowser
-} from "../shared/chunk-da2w7j7w.js";
+} from "../shared/chunk-xs5s8gqe.js";
 import {
   _tryOnCleanup,
   claimComment,
@@ -87,23 +88,39 @@ import {
   setContextScope,
   signal,
   startSignalCollection,
-  stopSignalCollection
-} from "../shared/chunk-656n0x6y.js";
+  stopSignalCollection,
+  useContext
+} from "../shared/chunk-ppr06jgn.js";
 // src/dom/conditional.ts
-function normalizeNode(branchResult) {
-  if (branchResult == null || typeof branchResult === "boolean") {
-    return getAdapter().createComment("empty");
+function clearBetween(start, end) {
+  let current = start.nextSibling;
+  while (current && current !== end) {
+    const next = current.nextSibling;
+    current.parentNode?.removeChild(current);
+    current = next;
   }
+}
+function insertContentBefore(endMarker, branchResult) {
+  if (branchResult == null || typeof branchResult === "boolean")
+    return;
+  const parent = endMarker.parentNode;
+  if (!parent)
+    return;
   if (isRenderNode(branchResult)) {
-    if (branchResult.nodeType === 11) {
-      const wrap = getAdapter().createElement("span");
-      wrap.style.display = "contents";
-      wrap.appendChild(branchResult);
-      return wrap;
-    }
-    return branchResult;
+    parent.insertBefore(branchResult, endMarker);
+    return;
   }
-  return getAdapter().createTextNode(String(branchResult));
+  const text = getAdapter().createTextNode(String(branchResult));
+  parent.insertBefore(text, endMarker);
+}
+function appendBranchContent(fragment, branchResult) {
+  if (branchResult == null || typeof branchResult === "boolean")
+    return;
+  if (isRenderNode(branchResult)) {
+    fragment.appendChild(branchResult);
+    return;
+  }
+  fragment.appendChild(getAdapter().createTextNode(String(branchResult)));
 }
 function __conditional(condFn, trueFn, falseFn) {
   if (getIsHydrating()) {
@@ -117,11 +134,11 @@ function hydrateConditional(condFn, trueFn, falseFn) {
     return csrConditional(condFn, trueFn, falseFn);
   }
   const anchor = claimed;
-  let currentNode = null;
   let branchCleanups = [];
-  let resultNode = anchor;
-  const outerScope = pushScope();
+  let endMarker = null;
   let isFirstRun = true;
+  let needsCsrFallback = false;
+  const outerScope = pushScope();
   domEffect(() => {
     const show = condFn();
     if (isFirstRun) {
@@ -130,60 +147,47 @@ function hydrateConditional(condFn, trueFn, falseFn) {
       const branchResult2 = show ? trueFn() : falseFn();
       popScope();
       branchCleanups = scope2;
-      let contentNode = null;
-      if (branchResult2 == null || typeof branchResult2 === "boolean") {
-        contentNode = null;
-      } else if (isRenderNode(branchResult2)) {
-        contentNode = branchResult2;
-      } else {
-        const claimed2 = claimText();
-        contentNode = claimed2 ?? getAdapter().createTextNode(String(branchResult2));
+      if (branchResult2 != null && !isRenderNode(branchResult2) && typeof branchResult2 !== "boolean") {
+        claimText();
       }
-      const anchorParent = anchor.parentNode;
-      if (anchorParent) {
-        const wrap = getAdapter().createElement("span");
-        wrap.style.display = "contents";
-        anchorParent.insertBefore(wrap, anchor);
-        wrap.appendChild(anchor);
-        if (contentNode?.parentNode && contentNode.parentNode !== wrap) {
-          wrap.appendChild(contentNode);
-        }
-        currentNode = wrap;
-        resultNode = wrap;
-      } else {
-        currentNode = contentNode ?? getAdapter().createComment("empty");
-        resultNode = currentNode;
+      const claimedEnd = claimComment();
+      if (!claimedEnd) {
+        needsCsrFallback = true;
+        return;
       }
+      endMarker = claimedEnd;
       return;
     }
     runCleanups(branchCleanups);
+    clearBetween(anchor, endMarker);
     const scope = pushScope();
     const branchResult = show ? trueFn() : falseFn();
     popScope();
     branchCleanups = scope;
-    const newNode = normalizeNode(branchResult);
-    if (currentNode?.parentNode) {
-      currentNode.parentNode.replaceChild(newNode, currentNode);
-    } else if (anchor.parentNode) {
-      anchor.parentNode.insertBefore(newNode, anchor.nextSibling);
-    }
-    currentNode = newNode;
+    insertContentBefore(endMarker, branchResult);
   });
   popScope();
+  if (needsCsrFallback) {
+    runCleanups(branchCleanups);
+    runCleanups(outerScope);
+    return csrConditional(condFn, trueFn, falseFn);
+  }
   const disposeFn = () => {
     runCleanups(branchCleanups);
     runCleanups(outerScope);
   };
   _tryOnCleanup(disposeFn);
-  const result = Object.assign(resultNode, {
+  const result = Object.assign(anchor, {
     dispose: disposeFn
   });
   return result;
 }
 function csrConditional(condFn, trueFn, falseFn) {
   const anchor = getAdapter().createComment("conditional");
-  let currentNode = null;
+  const endMarker = getAdapter().createComment("/conditional");
   let branchCleanups = [];
+  let isFirstRun = true;
+  let firstRunResult;
   const outerScope = pushScope();
   domEffect(() => {
     const show = condFn();
@@ -192,26 +196,26 @@ function csrConditional(condFn, trueFn, falseFn) {
     const branchResult = show ? trueFn() : falseFn();
     popScope();
     branchCleanups = scope;
-    const newNode = normalizeNode(branchResult);
-    if (currentNode?.parentNode) {
-      currentNode.parentNode.replaceChild(newNode, currentNode);
-    } else if (anchor.parentNode) {
-      anchor.parentNode.insertBefore(newNode, anchor.nextSibling);
+    if (isFirstRun) {
+      isFirstRun = false;
+      firstRunResult = branchResult;
+      return;
     }
-    currentNode = newNode;
+    clearBetween(anchor, endMarker);
+    insertContentBefore(endMarker, branchResult);
   });
   popScope();
-  const wrapper = () => {
+  const disposeFn = () => {
     runCleanups(branchCleanups);
     runCleanups(outerScope);
   };
-  _tryOnCleanup(wrapper);
+  _tryOnCleanup(disposeFn);
   const fragment = getAdapter().createDocumentFragment();
   fragment.appendChild(anchor);
-  if (currentNode) {
-    fragment.appendChild(currentNode);
-  }
-  const result = Object.assign(fragment, { dispose: wrapper });
+  appendBranchContent(fragment, firstRunResult);
+  firstRunResult = undefined;
+  fragment.appendChild(endMarker);
+  const result = Object.assign(fragment, { dispose: disposeFn });
   return result;
 }
 // src/dom/insert.ts
@@ -227,6 +231,7 @@ function clearChildren(container) {
   }
 }
 // src/dom/list.ts
+var unkeyedListWarned = false;
 function createItemProxy(itemSignal) {
   const initial = itemSignal.peek();
   if (typeof initial !== "object" || initial == null) {
@@ -277,6 +282,10 @@ function __list(container, items, keyFn, renderFn) {
   const nodeMap = new Map;
   const scopeMap = new Map;
   const itemSignalMap = new Map;
+  if (!keyFn && !unkeyedListWarned) {
+    unkeyedListWarned = true;
+    console.warn("[vertz] .map() without a key prop uses full-replacement mode (slower). " + "Add a key prop to list items for efficient updates: " + "{items.map(item => <Item key={item.id} />)}");
+  }
   const isHydrationRun = getIsHydrating();
   let startOffset = isHydrationRun ? -1 : container.childNodes.length;
   const outerScope = pushScope();
@@ -286,20 +295,47 @@ function __list(container, items, keyFn, renderFn) {
     if (isFirstRun && isHydrationRun) {
       isFirstRun = false;
       for (const [i, item] of newItems.entries()) {
-        const key = keyFn(item, i);
-        const itemSig = signal(item);
-        const proxy = createItemProxy(itemSig);
+        const key = keyFn ? keyFn(item, i) : i;
         const scope = pushScope();
-        const node = renderFn(proxy);
+        if (keyFn) {
+          const itemSig = signal(item);
+          const proxy = createItemProxy(itemSig);
+          const node = renderFn(proxy);
+          itemSignalMap.set(key, itemSig);
+          nodeMap.set(key, node);
+        } else {
+          const node = renderFn(item);
+          nodeMap.set(key, node);
+        }
         popScope();
-        nodeMap.set(key, node);
         scopeMap.set(key, scope);
-        itemSignalMap.set(key, itemSig);
       }
       startOffset = container.childNodes.length - nodeMap.size;
       return;
     }
     isFirstRun = false;
+    if (!keyFn) {
+      for (const scope of scopeMap.values()) {
+        runCleanups(scope);
+      }
+      scopeMap.clear();
+      for (const node of nodeMap.values()) {
+        node.parentNode?.removeChild(node);
+      }
+      nodeMap.clear();
+      itemSignalMap.clear();
+      for (const item of newItems) {
+        const scope = pushScope();
+        const node = renderFn(item);
+        popScope();
+        container.appendChild(node);
+        const internalKey = nodeMap.size;
+        nodeMap.set(internalKey, node);
+        scopeMap.set(internalKey, scope);
+      }
+      fixUpSelectValue(container);
+      return;
+    }
     const newKeySet = new Set(newItems.map((item, i) => keyFn(item, i)));
     for (const [key, node] of nodeMap) {
       if (!newKeySet.has(key)) {
@@ -340,12 +376,7 @@ function __list(container, items, keyFn, renderFn) {
         container.insertBefore(desiredNode, currentChild ?? null);
       }
     }
-    if (container.tagName === "SELECT") {
-      const selected = container.querySelector("option[selected]");
-      if (selected) {
-        Reflect.set(container, "value", selected.value);
-      }
-    }
+    fixUpSelectValue(container);
   });
   popScope();
   const wrapper = () => {
@@ -358,6 +389,262 @@ function __list(container, items, keyFn, renderFn) {
   _tryOnCleanup(wrapper);
   return wrapper;
 }
+function fixUpSelectValue(container) {
+  if (container.tagName === "SELECT") {
+    const selected = container.querySelector("option[selected]");
+    if (selected) {
+      Reflect.set(container, "value", selected.value);
+    }
+  }
+}
+// src/dom/list-value.ts
+var unkeyedListValueWarned = false;
+function createItemProxy2(itemSignal) {
+  const initial = itemSignal.peek();
+  if (typeof initial !== "object" || initial == null) {
+    return initial;
+  }
+  return new Proxy(initial, {
+    get(_target, prop, receiver) {
+      const current = itemSignal.value;
+      if (current == null)
+        return;
+      const value = Reflect.get(current, prop, receiver);
+      if (typeof value === "function") {
+        return value.bind(current);
+      }
+      return value;
+    },
+    set() {
+      return false;
+    },
+    has(_target, prop) {
+      const current = itemSignal.value;
+      if (current == null)
+        return false;
+      return Reflect.has(current, prop);
+    },
+    ownKeys() {
+      const current = itemSignal.value;
+      if (current == null)
+        return [];
+      return Reflect.ownKeys(current);
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      const current = itemSignal.value;
+      if (current == null)
+        return;
+      return Reflect.getOwnPropertyDescriptor(current, prop);
+    },
+    getPrototypeOf() {
+      const current = itemSignal.value;
+      if (current == null)
+        return null;
+      return Object.getPrototypeOf(current);
+    }
+  });
+}
+function __listValue(items, keyFn, renderFn) {
+  const getItems = typeof items === "function" ? items : () => items.value;
+  const startMarker = document.createComment("lv-s");
+  const endMarker = document.createComment("lv-e");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(startMarker);
+  fragment.appendChild(endMarker);
+  const nodeMap = new Map;
+  const scopeMap = new Map;
+  const itemSignalMap = new Map;
+  const exitingNodes = new Set;
+  const exitingKeyMap = new Map;
+  const keyGeneration = new Map;
+  const animHooks = useContext(ListAnimationContext);
+  let isFirstRun = true;
+  if (!keyFn && !unkeyedListValueWarned) {
+    unkeyedListValueWarned = true;
+    console.warn("[vertz] .map() without a key prop uses full-replacement mode (slower). " + "Add a key prop to list items for efficient updates: " + "{items.map(item => <Item key={item.id} />)}");
+  }
+  const outerScope = pushScope();
+  try {
+    domEffect(() => {
+      const newItems = getItems() ?? [];
+      if (!keyFn) {
+        for (const scope of scopeMap.values()) {
+          runCleanups(scope);
+        }
+        scopeMap.clear();
+        for (const node of nodeMap.values()) {
+          node.parentNode?.removeChild(node);
+        }
+        nodeMap.clear();
+        itemSignalMap.clear();
+        for (const [i, item] of newItems.entries()) {
+          const scope = pushScope();
+          const node = renderFn(item);
+          popScope();
+          endMarker.parentNode?.insertBefore(node, endMarker);
+          nodeMap.set(i, node);
+          scopeMap.set(i, scope);
+        }
+        return;
+      }
+      if (isFirstRun) {
+        isFirstRun = false;
+        for (const [i, item] of newItems.entries()) {
+          const key = keyFn(item, i);
+          const itemSig = signal(item);
+          const proxy = createItemProxy2(itemSig);
+          const scope = pushScope();
+          const node = renderFn(proxy);
+          popScope();
+          nodeMap.set(key, node);
+          scopeMap.set(key, scope);
+          itemSignalMap.set(key, itemSig);
+          endMarker.parentNode?.insertBefore(node, endMarker);
+        }
+        return;
+      }
+      animHooks?.onBeforeReconcile();
+      const newKeySet = new Set(newItems.map((item, i) => keyFn(item, i)));
+      for (const [key, node] of nodeMap) {
+        if (!newKeySet.has(key)) {
+          const scope = scopeMap.get(key);
+          if (scope) {
+            runCleanups(scope);
+            scopeMap.delete(key);
+          }
+          nodeMap.delete(key);
+          itemSignalMap.delete(key);
+          if (animHooks) {
+            const gen = (keyGeneration.get(key) ?? 0) + 1;
+            keyGeneration.set(key, gen);
+            exitingNodes.add(node);
+            exitingKeyMap.set(key, node);
+            animHooks.onItemExit(node, key, () => {
+              if (keyGeneration.get(key) === gen) {
+                node.parentNode?.removeChild(node);
+                exitingNodes.delete(node);
+                exitingKeyMap.delete(key);
+              }
+            });
+          } else {
+            node.parentNode?.removeChild(node);
+          }
+        }
+      }
+      const desiredNodes = [];
+      const enterEntries = [];
+      for (const [i, item] of newItems.entries()) {
+        const key = keyFn(item, i);
+        let node = nodeMap.get(key);
+        if (!node) {
+          const oldExiting = exitingKeyMap.get(key);
+          if (oldExiting) {
+            oldExiting.parentNode?.removeChild(oldExiting);
+            exitingNodes.delete(oldExiting);
+            exitingKeyMap.delete(key);
+          }
+          const gen = (keyGeneration.get(key) ?? 0) + 1;
+          keyGeneration.set(key, gen);
+          const itemSig = signal(item);
+          const proxy = createItemProxy2(itemSig);
+          const scope = pushScope();
+          node = renderFn(proxy);
+          popScope();
+          nodeMap.set(key, node);
+          scopeMap.set(key, scope);
+          itemSignalMap.set(key, itemSig);
+          enterEntries.push({ node, key });
+        } else {
+          const itemSig = itemSignalMap.get(key);
+          if (itemSig) {
+            itemSig.value = item;
+          }
+        }
+        desiredNodes.push(node);
+      }
+      const parent = startMarker.parentNode;
+      if (parent) {
+        let cursor = startMarker.nextSibling;
+        for (const desired of desiredNodes) {
+          while (cursor && cursor !== endMarker && exitingNodes.has(cursor)) {
+            cursor = cursor.nextSibling;
+          }
+          if (cursor === endMarker) {
+            parent.insertBefore(desired, endMarker);
+          } else if (cursor === desired) {
+            cursor = cursor.nextSibling;
+          } else {
+            parent.insertBefore(desired, cursor);
+          }
+        }
+      }
+      if (animHooks) {
+        for (const { node, key } of enterEntries) {
+          animHooks.onItemEnter(node, key);
+        }
+      }
+      animHooks?.onAfterReconcile();
+    });
+  } finally {
+    popScope();
+  }
+  const dispose = () => {
+    for (const scope of scopeMap.values()) {
+      runCleanups(scope);
+    }
+    scopeMap.clear();
+    for (const node of exitingNodes) {
+      node.parentNode?.removeChild(node);
+    }
+    exitingNodes.clear();
+    exitingKeyMap.clear();
+    runCleanups(outerScope);
+  };
+  _tryOnCleanup(dispose);
+  return Object.assign(fragment, { dispose });
+}
+// src/dom/spread.ts
+var SKIP_KEYS = new Set(["children", "key"]);
+var PROP_ALIASES = {
+  className: "class",
+  htmlFor: "for"
+};
+function __spread(el, props) {
+  const isSvg = el.namespaceURI === SVG_NS;
+  for (const key of Object.keys(props)) {
+    if (SKIP_KEYS.has(key))
+      continue;
+    const value = props[key];
+    if (key === "ref") {
+      if (value && typeof value === "object" && "current" in value) {
+        value.current = el;
+      }
+      continue;
+    }
+    if (key.length > 2 && key.startsWith("on") && typeof value === "function") {
+      const eventName = key.slice(2).toLowerCase();
+      el.addEventListener(eventName, value);
+      continue;
+    }
+    if (value == null || value === false)
+      continue;
+    const attrName = PROP_ALIASES[key] ?? key;
+    if (attrName === "style") {
+      if (typeof value === "object") {
+        el.setAttribute("style", styleObjectToString(value));
+      } else {
+        el.setAttribute("style", String(value));
+      }
+      continue;
+    }
+    if (value === true) {
+      el.setAttribute(attrName, "");
+      continue;
+    }
+    const finalName = isSvg ? normalizeSVGAttr(attrName) : attrName;
+    el.setAttribute(finalName, String(value));
+  }
+}
 export {
   stopSignalCollection,
   startSignalCollection,
@@ -392,10 +679,12 @@ export {
   __text,
   styleObjectToString as __styleStr,
   __staticText,
+  __spread,
   __show,
   __pushMountFrame,
   __prop,
   __on,
+  __listValue,
   __list,
   __insert,
   __flushMountFrame,
@@ -418,6 +707,7 @@ export {
   PSEUDO_MAP,
   PROPERTY_MAP,
   MemoryCache,
+  ListAnimationContext,
   LINE_HEIGHT_SCALE,
   KEYWORD_MAP,
   HEIGHT_AXIS_PROPERTIES,

package/dist/src/jsx-runtime/index.js

@@ -1,11 +1,9 @@
-import {
-  styleObjectToString
-} from "../../shared/chunk-4xkw6h1s.js";
 import {
   SVG_NS,
   isSVGTag,
-  normalizeSVGAttr
-} from "../../shared/chunk-prj7nm08.js";
+  normalizeSVGAttr,
+  styleObjectToString
+} from "../../shared/chunk-h1fsr8kv.js";
 
 // src/jsx-runtime/index.ts
 function applyChildren(parent, children) {