:package: Generate server component runtime.

2 files changed, 80 insertions, 46 deletions

diff --git a/priv/static/lustre-server-component.min.mjs b/priv/static/lustre-server-component.min.mjs
index 8cdbe00..70aaef4 100644
--- a/priv/static/lustre-server-component.min.mjs
+++ b/priv/static/lustre-server-component.min.mjs
@@ -1 +1 @@
-function k(l,n,i,s=!1){let t,o=[{prev:l,next:n,parent:l.parentNode}];for(;o.length;){let{prev:e,next:r,parent:u}=o.pop();if(r.subtree!==void 0&&(r=r.subtree()),r.content!==void 0)if(e)if(e.nodeType===Node.TEXT_NODE)e.textContent!==r.content&&(e.textContent=r.content),t??=e;else{let a=document.createTextNode(r.content);u.replaceChild(a,e),t??=a}else{let a=document.createTextNode(r.content);u.appendChild(a),t??=a}else if(r.tag!==void 0){let a=$({prev:e,next:r,dispatch:i,stack:o,isComponent:s});e?e!==a&&u.replaceChild(a,e):u.appendChild(a),t??=a}}return t}function L(l,n,i){let s=l.parentNode;for(let t of n[0]){let o=t[0].split("-"),e=t[1],r=N(s,o),u;if(r!==null&&r!==s)u=k(r,e,i);else{let a=N(s,o.slice(0,-1)),f=document.createTextNode("");a.appendChild(f),u=k(f,e,i)}o==="0"&&(l=u)}for(let t of n[1]){let o=t[0].split("-");N(s,o).remove()}for(let t of n[2]){let o=t[0].split("-"),e=t[1],r=N(s,o),u=v.get(r);for(let a of e[0]){let f=a[0],m=a[1];if(f.startsWith("data-lustre-on-")){let b=f.slice(15),d=i(J);u.has(b)||el.addEventListener(b,y),u.set(b,d),el.setAttribute(f,m)}else r.setAttribute(f,m),r[f]=m}for(let a of e[1])if(a[0].startsWith("data-lustre-on-")){let f=a[0].slice(15);r.removeEventListener(f,y),u.delete(f)}else r.removeAttribute(a[0])}return l}function $({prev:l,next:n,dispatch:i,stack:s}){let t=n.namespace||"http://www.w3.org/1999/xhtml",o=l&&l.nodeType===Node.ELEMENT_NODE&&l.localName===n.tag&&l.namespaceURI===(n.namespace||"http://www.w3.org/1999/xhtml"),e=o?l:t?document.createElementNS(t,n.tag):document.createElement(n.tag),r;if(v.has(e))r=v.get(e);else{let c=new Map;v.set(e,c),r=c}let u=o?new Set(r.keys()):null,a=o?new Set(Array.from(l.attributes,c=>c.name)):null,f=null,m=null,b=null;for(let c of n.attrs){let h=c[0],p=c[1];if(c[2])e[h]=p;else if(h.startsWith("on")){let g=h.slice(2),A=i(p);r.has(g)||e.addEventListener(g,y),r.set(g,A),o&&u.delete(g)}else if(h.startsWith("data-lustre-on-")){let g=h.slice(15),A=i(J);r.has(g)||e.addEventListener(g,y),r.set(g,A),e.setAttribute(h,p)}else h==="class"?f=f===null?p:f+" "+p:h==="style"?m=m===null?p:m+p:h==="dangerous-unescaped-html"?b=p:(e.setAttribute(h,p),h==="value"&&(e[h]=p),o&&a.delete(h))}if(f!==null&&(e.setAttribute("class",f),o&&a.delete("class")),m!==null&&(e.setAttribute("style",m),o&&a.delete("style")),o){for(let c of a)e.removeAttribute(c);for(let c of u)e.removeEventListener(c,y)}if(n.key!==void 0&&n.key!=="")e.setAttribute("data-lustre-key",n.key);else if(b!==null)return e.innerHTML=b,e;let d=e.firstChild,C=null,w=null,O=null,E=n.children[Symbol.iterator]().next().value;E!==void 0&&E.key!==void 0&&E.key!==""&&(C=new Set,w=T(l),O=T(n));for(let c of n.children)if(c.key!==void 0&&C!==null){for(;d&&!O.has(d.getAttribute("data-lustre-key"));){let p=d.nextSibling;e.removeChild(d),d=p}if(w.size===0){s.unshift({prev:d,next:c,parent:e}),d=d?.nextSibling;continue}if(C.has(c.key)){console.warn(`Duplicate key found in Lustre vnode: ${c.key}`),s.unshift({prev:null,next:c,parent:e});continue}C.add(c.key);let h=w.get(c.key);if(!h&&!d){s.unshift({prev:null,next:c,parent:e});continue}if(!h&&d!==null){let p=document.createTextNode("");e.insertBefore(p,d),s.unshift({prev:p,next:c,parent:e});continue}if(!h||h===d){s.unshift({prev:d,next:c,parent:e}),d=d?.nextSibling;continue}e.insertBefore(h,d),s.unshift({prev:h,next:c,parent:e})}else s.unshift({prev:d,next:c,parent:e}),d=d?.nextSibling;for(;d;){let c=d.nextSibling;e.removeChild(d),d=c}return e}var v=new WeakMap;function y(l){let n=l.currentTarget;if(!v.has(n)){n.removeEventListener(l.type,y);return}let i=v.get(n);if(!i.has(l.type)){n.removeEventListener(l.type,y);return}i.get(l.type)(l)}function J(l){let n=l.target,i=n.getAttribute(`data-lustre-on-${l.type}`),s=JSON.parse(n.getAttribute("data-lustre-data")||"{}"),t=JSON.parse(n.getAttribute("data-lustre-include")||"[]");switch(l.type){case"input":case"change":t.push("target.value");break}return{tag:i,data:t.reduce((o,e)=>{let r=e.split(".");for(let u=0,a=o,f=l;u<r.length;u++)u===r.length-1?a[r[u]]=f[r[u]]:(a[r[u]]??={},f=f[r[u]],a=a[r[u]]);return o},{data:s})}}function T(l){let n=new Map;if(l)for(let i of l.children){let s=i.key||i?.getAttribute("data-lustre-key");s&&n.set(s,i)}return n}function N(l,n){let i,s,t=l;for(;[i,...s]=n,i!==void 0;)t=t.childNodes.item(i),n=s;return t}var S=class extends HTMLElement{static get observedAttributes(){return["route"]}#n=null;#t=null;#e=null;constructor(){super(),this.#n=new MutationObserver(n=>{let i=[];for(let s of n)if(s.type==="attributes"){let{attributeName:t,oldValue:o}=s,e=this.getAttribute(t);if(o!==e)try{i.push([t,JSON.parse(e)])}catch{i.push([t,e])}}i.length&&this.#e?.send(JSON.stringify([5,i]))})}connectedCallback(){this.#t=document.createElement("div"),this.appendChild(this.#t)}attributeChangedCallback(n,i,s){switch(n){case"route":if(!s)this.#e?.close(),this.#e=null;else if(i!==s){let t=this.getAttribute("id"),o=s+(t?`?id=${t}`:"");this.#e?.close(),this.#e=new WebSocket(`ws://${window.location.host}${o}`),this.#e.addEventListener("message",e=>this.messageReceivedCallback(e))}}}messageReceivedCallback({data:n}){let[i,...s]=JSON.parse(n);switch(i){case 0:return this.diff(s);case 1:return this.emit(s);case 2:return this.init(s)}}init([n,i]){let s=[];for(let t of n)t in this?s.push([t,this[t]]):this.hasAttribute(t)&&s.push([t,this.getAttribute(t)]),Object.defineProperty(this,t,{get(){return this[`_${t}`]??this.getAttribute(t)},set(o){let e=this[t];typeof o=="string"?this.setAttribute(t,o):this[`_${t}`]=o,e!==o&&this.#e?.send(JSON.stringify([5,[[t,o]]]))}});this.#n.observe(this,{attributeFilter:n,attributeOldValue:!0,attributes:!0,characterData:!1,characterDataOldValue:!1,childList:!1,subtree:!1}),this.morph(i),s.length&&this.#e?.send(JSON.stringify([5,s]))}morph(n){this.#t=k(this.#t,n,i=>s=>{let t=i(s);this.#e?.send(JSON.stringify([4,t.tag,t.data]))})}diff([n]){this.#t=L(this.#t,n,i=>s=>{let t=i(s);this.#e?.send(JSON.stringify([4,t.tag,t.data]))})}emit([n,i]){this.dispatchEvent(new CustomEvent(n,{detail:i}))}disconnectedCallback(){this.#e?.close()}};window.customElements.define("lustre-server-component",S);export{S as LustreServerComponent};
+function w(t,e,i,r=!1){let n,a=[{prev:t,next:e,parent:t.parentNode}];for(;a.length;){let{prev:s,next:o,parent:l}=a.pop();if(o.subtree!==void 0&&(o=o.subtree()),o.content!==void 0)if(s)if(s.nodeType===Node.TEXT_NODE)s.textContent!==o.content&&(s.textContent=o.content),n??=s;else{let c=document.createTextNode(o.content);l.replaceChild(c,s),n??=c}else{let c=document.createTextNode(o.content);l.appendChild(c),n??=c}else if(o.tag!==void 0){let c=D({prev:s,next:o,dispatch:i,stack:a,isComponent:r});s?s!==c&&l.replaceChild(c,s):l.appendChild(c),n??=c}else o.elements!==void 0&&x(o,c=>{a.unshift({prev:s,next:c,parent:l}),s=s?.nextSibling})}return n}function J(t,e,i){let r=t.parentNode;for(let n of e[0]){let a=n[0].split("-"),s=n[1],o=k(r,a),l;if(o!==null&&o!==r)l=w(o,s,i);else{let c=k(r,a.slice(0,-1)),u=document.createTextNode("");c.appendChild(u),l=w(u,s,i)}a==="0"&&(t=l)}for(let n of e[1]){let a=n[0].split("-");k(r,a).remove()}for(let n of e[2]){let a=n[0].split("-"),s=n[1],o=k(r,a),l=N.get(o);for(let c of s[0]){let u=c[0],m=c[1];if(u.startsWith("data-lustre-on-")){let b=u.slice(15),h=i(M);l.has(b)||el.addEventListener(b,y),l.set(b,h),el.setAttribute(u,m)}else o.setAttribute(u,m),o[u]=m}for(let c of s[1])if(c[0].startsWith("data-lustre-on-")){let u=c[0].slice(15);o.removeEventListener(u,y),l.delete(u)}else o.removeAttribute(c[0])}return t}function D({prev:t,next:e,dispatch:i,stack:r}){let n=e.namespace||"http://www.w3.org/1999/xhtml",a=t&&t.nodeType===Node.ELEMENT_NODE&&t.localName===e.tag&&t.namespaceURI===(e.namespace||"http://www.w3.org/1999/xhtml"),s=a?t:n?document.createElementNS(n,e.tag):document.createElement(e.tag),o;if(N.has(s))o=N.get(s);else{let d=new Map;N.set(s,d),o=d}let l=a?new Set(o.keys()):null,c=a?new Set(Array.from(t.attributes,d=>d.name)):null,u=null,m=null,b=null;for(let d of e.attrs){let f=d[0],p=d[1];if(d.as_property)s[f]=p;else if(f.startsWith("on")){let g=f.slice(2),v=i(p);o.has(g)||s.addEventListener(g,y),o.set(g,v),a&&l.delete(g)}else if(f.startsWith("data-lustre-on-")){let g=f.slice(15),v=i(M);o.has(g)||s.addEventListener(g,y),o.set(g,v),s.setAttribute(f,p)}else f==="class"?u=u===null?p:u+" "+p:f==="style"?m=m===null?p:m+p:f==="dangerous-unescaped-html"?b=p:(typeof p=="string"&&s.setAttribute(f,p),(f==="value"||f==="selected")&&(s[f]=p),a&&c.delete(f))}if(u!==null&&(s.setAttribute("class",u),a&&c.delete("class")),m!==null&&(s.setAttribute("style",m),a&&c.delete("style")),a){for(let d of c)s.removeAttribute(d);for(let d of l)o.delete(d),s.removeEventListener(d,y)}if(e.key!==void 0&&e.key!=="")s.setAttribute("data-lustre-key",e.key);else if(b!==null)return s.innerHTML=b,s;let h=s.firstChild,E=null,C=null,T=null,A=e.children[Symbol.iterator]().next().value;a&&A!==void 0&&A.key!==void 0&&A.key!==""&&(E=new Set,C=L(t),T=L(e));for(let d of e.children)x(d,f=>{f.key!==void 0&&E!==null?h=W(h,f,s,r,T,C,E):(r.unshift({prev:h,next:f,parent:s}),h=h?.nextSibling)});for(;h;){let d=h.nextSibling;s.removeChild(h),h=d}return s}var N=new WeakMap;function y(t){let e=t.currentTarget;if(!N.has(e)){e.removeEventListener(t.type,y);return}let i=N.get(e);if(!i.has(t.type)){e.removeEventListener(t.type,y);return}i.get(t.type)(t)}function M(t){let e=t.target,i=e.getAttribute(`data-lustre-on-${t.type}`),r=JSON.parse(e.getAttribute("data-lustre-data")||"{}"),n=JSON.parse(e.getAttribute("data-lustre-include")||"[]");switch(t.type){case"input":case"change":n.push("target.value");break}return{tag:i,data:n.reduce((a,s)=>{let o=s.split(".");for(let l=0,c=a,u=t;l<o.length;l++)l===o.length-1?c[o[l]]=u[o[l]]:(c[o[l]]??={},u=u[o[l]],c=c[o[l]]);return a},{data:r})}}function L(t){let e=new Map;if(t)for(let i of t.children)x(i,r=>{let n=r?.key||r?.getAttribute?.("data-lustre-key");n&&e.set(n,r)});return e}function k(t,e){let i,r,n=t;for(;[i,...r]=e,i!==void 0;)console.log({n:i,rest:r,child:n,path:e}),n=n.childNodes.item(i),e=r;return n}function W(t,e,i,r,n,a,s){for(;t&&!n.has(t.getAttribute("data-lustre-key"));){let l=t.nextSibling;i.removeChild(t),t=l}if(a.size===0)return x(e,l=>{r.unshift({prev:t,next:l,parent:i}),t=t?.nextSibling}),t;if(s.has(e.key))return console.warn(`Duplicate key found in Lustre vnode: ${e.key}`),r.unshift({prev:null,next:e,parent:i}),t;s.add(e.key);let o=a.get(e.key);if(!o&&!t)return r.unshift({prev:null,next:e,parent:i}),t;if(!o&&t!==null){let l=document.createTextNode("");return i.insertBefore(l,t),r.unshift({prev:l,next:e,parent:i}),t}return!o||o===t?(r.unshift({prev:t,next:e,parent:i}),t=t?.nextSibling,t):(i.insertBefore(o,t),r.unshift({prev:o,next:e,parent:i}),t)}function x(t,e){if(t.elements!==void 0)for(let i of t.elements)e(i);else e(t)}var O=class extends HTMLElement{static get observedAttributes(){return["route"]}#n=null;#t=null;#e=null;constructor(){super(),this.#n=new MutationObserver(e=>{let i=[];for(let r of e)if(r.type==="attributes"){let{attributeName:n,oldValue:a}=r,s=this.getAttribute(n);if(a!==s)try{i.push([n,JSON.parse(s)])}catch{i.push([n,s])}}i.length&&this.#e?.send(JSON.stringify([5,i]))})}connectedCallback(){this.#t=document.createElement("div"),this.appendChild(this.#t)}attributeChangedCallback(e,i,r){switch(e){case"route":if(!r)this.#e?.close(),this.#e=null;else if(i!==r){let n=this.getAttribute("id"),a=r+(n?`?id=${n}`:"");this.#e?.close(),this.#e=new WebSocket(`ws://${window.location.host}${a}`),this.#e.addEventListener("message",s=>this.messageReceivedCallback(s))}}}messageReceivedCallback({data:e}){let[i,...r]=JSON.parse(e);switch(i){case 0:return this.diff(r);case 1:return this.emit(r);case 2:return this.init(r)}}init([e,i]){let r=[];for(let n of e)n in this?r.push([n,this[n]]):this.hasAttribute(n)&&r.push([n,this.getAttribute(n)]),Object.defineProperty(this,n,{get(){return this[`_${n}`]??this.getAttribute(n)},set(a){let s=this[n];typeof a=="string"?this.setAttribute(n,a):this[`_${n}`]=a,s!==a&&this.#e?.send(JSON.stringify([5,[[n,a]]]))}});this.#n.observe(this,{attributeFilter:e,attributeOldValue:!0,attributes:!0,characterData:!1,characterDataOldValue:!1,childList:!1,subtree:!1}),this.morph(i),r.length&&this.#e?.send(JSON.stringify([5,r]))}morph(e){this.#t=w(this.#t,e,i=>r=>{let n=i(r);this.#e?.send(JSON.stringify([4,n.tag,n.data]))})}diff([e]){this.#t=J(this.#t,e,i=>r=>{let n=i(r);this.#e?.send(JSON.stringify([4,n.tag,n.data]))})}emit([e,i]){this.dispatchEvent(new CustomEvent(e,{detail:i}))}disconnectedCallback(){this.#e?.close()}};window.customElements.define("lustre-server-component",O);export{O as LustreServerComponent};
diff --git a/priv/static/lustre-server-component.mjs b/priv/static/lustre-server-component.mjs
index 971b731..239addc 100644
--- a/priv/static/lustre-server-component.mjs
+++ b/priv/static/lustre-server-component.mjs
@@ -41,6 +41,11 @@ function morph(prev, next, dispatch, isComponent = false) {
         parent.replaceChild(created, prev2);
       }
       out ??= created;
+    } else if (next2.elements !== void 0) {
+      iterateElement(next2, (fragmentElement) => {
+        stack.unshift({ prev: prev2, next: fragmentElement, parent });
+        prev2 = prev2?.nextSibling;
+      });
     }
   }
   return out;
@@ -122,8 +127,7 @@ function createElementNode({ prev, next, dispatch, stack }) {
   for (const attr of next.attrs) {
     const name = attr[0];
     const value = attr[1];
-    const isProperty = attr[2];
-    if (isProperty) {
+    if (attr.as_property) {
       el2[name] = value;
     } else if (name.startsWith("on")) {
       const eventName = name.slice(2);
@@ -149,8 +153,9 @@ function createElementNode({ prev, next, dispatch, stack }) {
     } else if (name === "dangerous-unescaped-html") {
       innerHTML = value;
     } else {
-      el2.setAttribute(name, value);
-      if (name === "value")
+      if (typeof value === "string")
+        el2.setAttribute(name, value);
+      if (name === "value" || name === "selected")
         el2[name] = value;
       if (canMorph)
         prevAttributes.delete(name);
@@ -171,6 +176,7 @@ function createElementNode({ prev, next, dispatch, stack }) {
       el2.removeAttribute(attr);
     }
     for (const eventName of prevHandlers) {
+      handlersForEl.delete(eventName);
       el2.removeEventListener(eventName, lustreGenericEventHandler);
     }
   }
@@ -185,7 +191,7 @@ function createElementNode({ prev, next, dispatch, stack }) {
   let keyedChildren = null;
   let incomingKeyedChildren = null;
   let firstChild = next.children[Symbol.iterator]().next().value;
-  if (firstChild !== void 0 && // Explicit checks are more verbose but truthy checks force a bunch of comparisons
+  if (canMorph && firstChild !== void 0 && // Explicit checks are more verbose but truthy checks force a bunch of comparisons
   // we don't care about: it's never gonna be a number etc.
   firstChild.key !== void 0 && firstChild.key !== "") {
     seenKeys = /* @__PURE__ */ new Set();
@@ -193,45 +199,22 @@ function createElementNode({ prev, next, dispatch, stack }) {
     incomingKeyedChildren = getKeyedChildren(next);
   }
   for (const child of next.children) {
-    if (child.key !== void 0 && seenKeys !== null) {
-      while (prevChild && !incomingKeyedChildren.has(prevChild.getAttribute("data-lustre-key"))) {
-        const nextChild = prevChild.nextSibling;
-        el2.removeChild(prevChild);
-        prevChild = nextChild;
-      }
-      if (keyedChildren.size === 0) {
-        stack.unshift({ prev: prevChild, next: child, parent: el2 });
-        prevChild = prevChild?.nextSibling;
-        continue;
-      }
-      if (seenKeys.has(child.key)) {
-        console.warn(`Duplicate key found in Lustre vnode: ${child.key}`);
-        stack.unshift({ prev: null, next: child, parent: el2 });
-        continue;
-      }
-      seenKeys.add(child.key);
-      const keyedChild = keyedChildren.get(child.key);
-      if (!keyedChild && !prevChild) {
-        stack.unshift({ prev: null, next: child, parent: el2 });
-        continue;
-      }
-      if (!keyedChild && prevChild !== null) {
-        const placeholder = document.createTextNode("");
-        el2.insertBefore(placeholder, prevChild);
-        stack.unshift({ prev: placeholder, next: child, parent: el2 });
-        continue;
-      }
-      if (!keyedChild || keyedChild === prevChild) {
-        stack.unshift({ prev: prevChild, next: child, parent: el2 });
+    iterateElement(child, (currElement) => {
+      if (currElement.key !== void 0 && seenKeys !== null) {
+        prevChild = diffKeyedChild(
+          prevChild,
+          currElement,
+          el2,
+          stack,
+          incomingKeyedChildren,
+          keyedChildren,
+          seenKeys
+        );
+      } else {
+        stack.unshift({ prev: prevChild, next: currElement, parent: el2 });
         prevChild = prevChild?.nextSibling;
-        continue;
       }
-      el2.insertBefore(keyedChild, prevChild);
-      stack.unshift({ prev: keyedChild, next: child, parent: el2 });
-    } else {
-      stack.unshift({ prev: prevChild, next: child, parent: el2 });
-      prevChild = prevChild?.nextSibling;
-    }
+    });
   }
   while (prevChild) {
     const next2 = prevChild.nextSibling;
@@ -289,9 +272,11 @@ function getKeyedChildren(el2) {
   const keyedChildren = /* @__PURE__ */ new Map();
   if (el2) {
     for (const child of el2.children) {
-      const key = child.key || child?.getAttribute("data-lustre-key");
-      if (key)
-        keyedChildren.set(key, child);
+      iterateElement(child, (currElement) => {
+        const key = currElement?.key || currElement?.getAttribute?.("data-lustre-key");
+        if (key)
+          keyedChildren.set(key, currElement);
+      });
     }
   }
   return keyedChildren;
@@ -301,11 +286,60 @@ function getDeepChild(el2, path) {
   let rest;
   let child = el2;
   while ([n, ...rest] = path, n !== void 0) {
+    console.log({ n, rest, child, path });
     child = child.childNodes.item(n);
     path = rest;
   }
   return child;
 }
+function diffKeyedChild(prevChild, child, el2, stack, incomingKeyedChildren, keyedChildren, seenKeys) {
+  while (prevChild && !incomingKeyedChildren.has(prevChild.getAttribute("data-lustre-key"))) {
+    const nextChild = prevChild.nextSibling;
+    el2.removeChild(prevChild);
+    prevChild = nextChild;
+  }
+  if (keyedChildren.size === 0) {
+    iterateElement(child, (currChild) => {
+      stack.unshift({ prev: prevChild, next: currChild, parent: el2 });
+      prevChild = prevChild?.nextSibling;
+    });
+    return prevChild;
+  }
+  if (seenKeys.has(child.key)) {
+    console.warn(`Duplicate key found in Lustre vnode: ${child.key}`);
+    stack.unshift({ prev: null, next: child, parent: el2 });
+    return prevChild;
+  }
+  seenKeys.add(child.key);
+  const keyedChild = keyedChildren.get(child.key);
+  if (!keyedChild && !prevChild) {
+    stack.unshift({ prev: null, next: child, parent: el2 });
+    return prevChild;
+  }
+  if (!keyedChild && prevChild !== null) {
+    const placeholder = document.createTextNode("");
+    el2.insertBefore(placeholder, prevChild);
+    stack.unshift({ prev: placeholder, next: child, parent: el2 });
+    return prevChild;
+  }
+  if (!keyedChild || keyedChild === prevChild) {
+    stack.unshift({ prev: prevChild, next: child, parent: el2 });
+    prevChild = prevChild?.nextSibling;
+    return prevChild;
+  }
+  el2.insertBefore(keyedChild, prevChild);
+  stack.unshift({ prev: keyedChild, next: child, parent: el2 });
+  return prevChild;
+}
+function iterateElement(element, processElement) {
+  if (element.elements !== void 0) {
+    for (const currElement of element.elements) {
+      processElement(currElement);
+    }
+  } else {
+    processElement(element);
+  }
+}
 
 // src/server-component.mjs
 var LustreServerComponent = class extends HTMLElement {