@nisli/core 0.57.0 → 0.57.1

package/dist/index.js

@@ -1319,8 +1319,10 @@ function html(strings, ...values) {
       mounted = true;
       const template = parseTemplate(strings, values.length);
       const fragment = template.content.cloneNode(true);
-      processNode(fragment, values, bindings, disposers);
+      const afterMount = [];
+      processNode(fragment, values, bindings, disposers, afterMount);
       host.appendChild(fragment);
+      for (const sync of afterMount) sync();
     },
     dispose() {
       for (const d of disposers) {
@@ -1343,10 +1345,11 @@ function html(strings, ...values) {
     }
   };
 }
-function processNode(node, values, bindings, disposers) {
+function processNode(node, values, bindings, disposers, afterMount) {
+  let afterChildren;
   if (node.nodeType === Node.ELEMENT_NODE) {
     const el2 = node;
-    processAttributes(el2, values, bindings, disposers);
+    afterChildren = processAttributes(el2, values, bindings, disposers, afterMount);
   }
   if (node.nodeType === Node.COMMENT_NODE) {
     const comment = node;
@@ -1360,11 +1363,13 @@ function processNode(node, values, bindings, disposers) {
   }
   const children2 = [...node.childNodes];
   for (const child of children2) {
-    processNode(child, values, bindings, disposers);
+    processNode(child, values, bindings, disposers, afterMount);
   }
+  if (afterChildren) for (const bind of afterChildren) bind();
 }
-function processAttributes(el2, values, bindings, disposers) {
+function processAttributes(el2, values, bindings, disposers, afterMount) {
   const attrsToRemove = [];
+  let afterChildren;
   for (const attr of [...el2.attributes]) {
     const name = attr.name;
     const attrValue = attr.value;
@@ -1423,8 +1428,9 @@ function processAttributes(el2, values, bindings, disposers) {
       const markers = [...attrValue.matchAll(/<!--bk-(\d+)-->/g)];
       if (markers.length) {
         const first = markers[0];
+        let value;
         if (markers.length === 1 && first && attrValue === first[0]) {
-          bindAttribute(el2, name, values[Number(first[1])], bindings, disposers);
+          value = values[Number(first[1])];
         } else {
           const resolve = () => attrValue.replace(/<!--bk-(\d+)-->/g, (_, i) => {
             const v = values[Number(i)];
@@ -1432,7 +1438,12 @@ function processAttributes(el2, values, bindings, disposers) {
             return raw2 == null || raw2 === false ? "" : String(raw2);
           });
           const hasSignals = markers.some((m) => isSignal(values[Number(m[1])]));
-          bindAttribute(el2, name, hasSignals ? computed(resolve) : resolve(), bindings, disposers);
+          value = hasSignals ? computed(resolve) : resolve();
+        }
+        if (nativeFormProperty(el2, name)) {
+          (afterChildren ??= []).push(() => bindAttribute(el2, name, value, bindings, disposers, afterMount));
+        } else {
+          bindAttribute(el2, name, value, bindings, disposers, afterMount);
         }
       }
       continue;
@@ -1441,6 +1452,7 @@ function processAttributes(el2, values, bindings, disposers) {
   for (const name of attrsToRemove) {
     el2.removeAttribute(name);
   }
+  return afterChildren;
 }
 function mountFactoryResult(factory) {
   const el2 = document.createElement(factory.tagName);
@@ -1639,7 +1651,7 @@ function replaceMarkerWithBinding(comment, value, bindings, disposers) {
     parent.replaceChild(textNode, comment);
   }
 }
-function bindAttribute(el2, name, value, bindings, disposers) {
+function bindAttribute(el2, name, value, bindings, disposers, afterMount) {
   if (name === "class") {
     bindClassAttribute(el2, value, bindings, disposers);
     return;
@@ -1660,32 +1672,69 @@ function bindAttribute(el2, name, value, bindings, disposers) {
     }
     return;
   }
-  bindPlainAttribute(el2, name, value, bindings, disposers);
+  bindPlainAttribute(el2, name, value, bindings, disposers, afterMount);
 }
-function bindPlainAttribute(el2, name, value, bindings, disposers) {
+function bindPlainAttribute(el2, name, value, bindings, disposers, afterMount) {
+  const property = nativeFormProperty(el2, name);
+  let current;
+  const apply = (v) => {
+    current = v;
+    if (v == null || v === false) {
+      el2.removeAttribute(name);
+    } else {
+      el2.setAttribute(name, v === true ? "" : String(v));
+    }
+    if (property) syncFormProperty(el2, property, v);
+  };
   if (isSignal(value)) {
     const binding = { type: "attribute", element: el2, name };
     bindings.push(binding);
-    const dispose = effect(() => {
-      const v = value.value;
-      if (v == null || v === false) {
-        el2.removeAttribute(name);
-      } else if (v === true) {
-        el2.setAttribute(name, "");
-      } else {
-        el2.setAttribute(name, String(v));
-      }
-    });
+    const dispose = effect(() => apply(value.value));
     binding.dispose = dispose;
     disposers.push(dispose);
   } else {
-    if (value == null || value === false) {
-      el2.removeAttribute(name);
-    } else if (value === true) {
-      el2.setAttribute(name, "");
-    } else {
-      el2.setAttribute(name, String(value));
-    }
+    apply(value);
+  }
+  if (property === "value" && el2.localName === "select") {
+    let active = true;
+    const sync = () => {
+      if (active) syncFormProperty(el2, "value", current);
+    };
+    const observer = new MutationObserver(sync);
+    observer.observe(el2, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["value", "selected"]
+    });
+    disposers.push(() => {
+      active = false;
+      observer.disconnect();
+    });
+    afterMount.push(sync);
+    queueMicrotask(sync);
+  }
+}
+function nativeFormProperty(el2, name) {
+  const attribute = name.toLowerCase();
+  if (attribute !== "value" && attribute !== "checked" && attribute !== "selected") return;
+  if (el2.namespaceURI !== "http://www.w3.org/1999/xhtml") return;
+  const tag = el2.localName;
+  if (attribute === "value" && (tag === "input" || tag === "textarea" || tag === "select")) return attribute;
+  if (attribute === "checked" && tag === "input") return attribute;
+  if (attribute === "selected" && tag === "option") return attribute;
+}
+function syncFormProperty(el2, property, value) {
+  if (property === "value") {
+    const control = el2;
+    const next = value == null || typeof value === "boolean" ? "" : String(value);
+    if (el2.localName === "input" && el2.type === "file" && next !== "") return;
+    if (el2.localName === "select" || control.value !== next) control.value = next;
+  } else {
+    const control = el2;
+    const next = value != null && value !== false;
+    if (control[property] !== next) control[property] = next;
   }
 }
 function bindClassAttribute(el2, value, bindings, disposers) {
@@ -1941,11 +1990,28 @@ function each(items, keyFn, templateFn) {
         entry.wrapper.parentNode?.removeChild(entry.wrapper);
       }
     }
-    let cursor = startMarker;
-    for (const entry of newEntries) {
+    const atomic = canMoveWithin(parent);
+    let focusedIndex = -1;
+    if (!atomic) {
+      const root = parent.getRootNode();
+      let active = "activeElement" in root ? root.activeElement : null;
+      while (active && active.parentNode !== parent) active = active.parentElement;
+      if (active) focusedIndex = newEntries.findIndex((entry) => entry.wrapper === active);
+    }
+    if (focusedIndex !== -1) {
+      let next = newEntries[focusedIndex].wrapper;
+      for (let i = focusedIndex - 1; i >= 0; i--) {
+        const wrapper = newEntries[i].wrapper;
+        if (wrapper.nextSibling !== next) parent.insertBefore(wrapper, next);
+        next = wrapper;
+      }
+    }
+    let cursor = focusedIndex === -1 ? startMarker : newEntries[focusedIndex].wrapper;
+    for (let i = focusedIndex + 1; i < newEntries.length; i++) {
+      const entry = newEntries[i];
       const nextSibling = cursor.nextSibling;
       if (nextSibling !== entry.wrapper) {
-        if (entry.wrapper.parentNode === parent && canMoveWithin(parent)) {
+        if (entry.wrapper.parentNode === parent && atomic) {
           parent.moveBefore(entry.wrapper, nextSibling);
         } else {
           parent.insertBefore(entry.wrapper, nextSibling);
@@ -1985,8 +2051,11 @@ function el(tag, props = {}, children2) {
     mount(host) {
       const element = document.createElement(tag);
       node = element;
+      let afterChildren;
+      const afterMount = [];
       for (const [key, val] of Object.entries(props)) {
-        if (val === void 0) continue;
+        const formProperty = nativeFormProperty(element, key);
+        if (val === void 0 && !formProperty) continue;
         if (key === "ref") {
           if (isRef(val)) {
             val.current = element;
@@ -2006,7 +2075,11 @@ function el(tag, props = {}, children2) {
           bindClassAttribute(element, val, bindings, disposers);
           continue;
         }
-        bindPlainAttribute(element, key, val, bindings, disposers);
+        if (formProperty) {
+          (afterChildren ??= []).push(() => bindPlainAttribute(element, key, val, bindings, disposers, afterMount));
+        } else {
+          bindPlainAttribute(element, key, val, bindings, disposers, afterMount);
+        }
       }
       const flat = [];
       flattenChildren(children2, flat);
@@ -2015,7 +2088,9 @@ function el(tag, props = {}, children2) {
         element.appendChild(anchor);
         replaceMarkerWithBinding(anchor, child, bindings, disposers);
       }
+      if (afterChildren) for (const bind of afterChildren) bind();
       host.appendChild(element);
+      for (const sync of afterMount) sync();
     },
     dispose() {
       for (const d of disposers) {