Fix case where a removed node has been re-added, such as examples/ts/todo-list.ts#109

Author: MatAtBread

guide/examples/ts/todo-list.ts

@@ -106,7 +106,7 @@ const AppInstance = div.extended({
       add = AddItem(),
       todo = div(
         add.item.map!(newItem => [
-          todo.children,
+          todo.childNodes,
           ToDoItem(newItem)
         ])
       )

module/dist/ai-ui.cjs

@@ -12,4 +12,4 @@ Element contains: ${q(l)}
 ${B}`)),h.next().then(F).catch(ae)}},ae=U=>{U&&(v.warn("Dynamic attribute termination",U,b,q(s),B,q(l)),l.appendChild(g({error:U})))},W=y.valueOf();W!==void 0&&W!==y&&!G(W)?F({done:!1,value:W}):h.next().then(F).catch(ae),x.onRemoval([l],b,()=>{h.return?.(),h=null})}function P(y,b){if(y instanceof Node)v.info(`Having DOM Nodes as properties of other DOM Nodes is a bad idea as it makes the DOM tree into a cyclic graph. You should reference nodes by ID or via a collection such as .childNodes. Propety: '${b}' value: ${q(y)} destination: ${l instanceof Node?q(l):l}`),T(b,y);else if(!(b in s)||s[b]===y||Array.isArray(s[b])&&s[b].length!==y.length)if(y.constructor===Object||y.constructor===Array){let h=new y.constructor;f(h,y),T(b,h)}else T(b,y);else Object.getOwnPropertyDescriptor(s,b)?.set?T(b,y):f(s[b],y)}})(l,p)}function w(l){for(let p=l.constructor;p;p=p.super)if(p===this)return!0;return!1}function E(l){let p=typeof l!="function"?y=>Object.assign({},l,y):l,f=Date.now().toString(36)+(mt++).toString(36)+Math.random().toString(36).slice(2),s=p({[ue]:f});s.styles&&document.getElementById(we)?.appendChild(r.createTextNode(s.styles+`
 `));let u=Object.assign((y,...b)=>{let h=ge(y),S=[],B={[se]:(h?S:y[se])??S},C=h?this(B,y,...b):this(B,...b);C.constructor=u;let F=p({[ue]:f});if(B[se].push(F),O){let W=(U,M)=>{for(let K=U;K;K=K.super)if(K.definition?.declare&&M in K.definition.declare)return!0;return!1};if(F.declare){let U=Object.keys(F.declare).filter(M=>M in C||W(this,M));U.length&&v.log(`Declared keys '${U}' in ${u.name} already exist in base '${this.valueOf()}'`)}if(F.override){let U=Object.keys(F.override).filter(M=>!(M in C)&&!(a&&M in a)&&!W(this,M));U.length&&v.log(`Overridden keys '${U}' in ${u.name} do not exist in base '${this.valueOf()}'`)}}k(C,F.declare,!0),k(C,F.override);let ae=new Set;if(F.iterable&&Object.keys(F.iterable).forEach(W=>{W in C?(v.log(`Ignoring attempt to re-define iterable property "${W}" as it could already have consumers`),ae.add(W)):ve(C,W,F.iterable[W])}),B[se]===S){h||L(C,y);for(let M of S){let K=M?.constructed?.call(C);ge(K)&&C.append(...A(K))}let W={},U=!1;for(let M of S)if(M.iterable)for(let K of Object.keys(M.iterable)){let De=!h&&K in y;if(ae.has(K)&&De||!(De&&(!V(y[K])||!G(y[K])))){let ke=C[K]?.valueOf();ke!==void 0&&(W[K]=ke,U=!0)}}U&&Object.assign(C,W)}return C},{super:this,definition:Object.assign(s,{[ue]:f}),extended:E,valueOf:()=>{let y=[...Object.keys(s.declare||{}),...Object.keys(s.iterable||{})];return`${u.name}: {${y.join(", ")}}
  \u21AA ${this.valueOf()}`}});Object.defineProperty(u,Symbol.hasInstance,{value:w,writable:!0,configurable:!0});let T={};(function y(b){b?.super&&y(b.super);let h=b.definition;h&&(k(T,h?.override),k(T,h?.declare))})(this),k(T,s.override),k(T,s.declare),Object.defineProperties(u,Object.getOwnPropertyDescriptors(T));let z=T&&"className"in T&&typeof T.className=="string"?T.className:f,P=O?new Error().stack?.split(`
-`)[2]??"":"";if(Object.defineProperty(u,"name",{value:"<ai-"+z.replace(/\s+/g,"-")+P+">"}),O){let y=Object.keys(s).filter(b=>!["styles","ids","constructed","declare","override","iterable"].includes(b));y.length&&v.log(`${u.name} defines extraneous keys '${y}', which are unknown`)}return u}let D={createElement:(l,p,...f)=>l instanceof Node?l:typeof l=="string"&&l in D?D[l](p,f):l===D.createElement?[...A(...f)]:typeof l=="function"?l(p,f):g({error:new Error("Illegal type in createElement:"+l)})};function Z(l){if(D[l])return D[l];let p=(s,...I)=>{if(ge(s)&&(I.unshift(s),s={}),!ge(s)){if(s.debugger){debugger;delete s.debugger}let u=i?r.createElementNS(i,l.toLowerCase()):r.createElement(l);return u.constructor=p,k(u,m),L(u,s),u.append(...A(...I)),u}},f=Object.assign(p,{super:()=>{throw new Error("Can't invoke native elemenet constructors directly. Use document.createElement().")},extended:E,valueOf(){return`TagCreator: <${i||""}${i?"::":""}${l}>`}});return Object.defineProperty(p,Symbol.hasInstance,{value:w,writable:!0,configurable:!0}),Object.defineProperty(p,"name",{value:"<"+l+">"}),D[l]=f}return o.forEach(Z),D};function ht(e){let t=new WeakSet,n=new WeakMap;function i(o){for(let d of o)if(!d.isConnected){t.add(d),i(d.childNodes);let a=n.get(d);if(a){n.delete(d);for(let[r,c]of a?.entries())try{c.call(d)}catch{v.info("Ignored exception handling node removal",r,c,q(d))}}}}return new MutationObserver(o=>{o.forEach(function(d){d.type==="childList"&&d.removedNodes.length&&i(d.removedNodes)})}).observe(e,{subtree:!0,childList:!0}),{has(o){return t.has(o)},add(o){return t.add(o)},getRemovalHandler(o,d){return n.get(o)?.get(d)},onRemoval(o,d,a){a?o.forEach(r=>{let c=n.get(r)??new Map;n.set(r,c),c.set(d,a)}):o.forEach(r=>{let c=n.get(r);c&&(c.delete(d),c.size||n.delete(r))})}}}
+`)[2]??"":"";if(Object.defineProperty(u,"name",{value:"<ai-"+z.replace(/\s+/g,"-")+P+">"}),O){let y=Object.keys(s).filter(b=>!["styles","ids","constructed","declare","override","iterable"].includes(b));y.length&&v.log(`${u.name} defines extraneous keys '${y}', which are unknown`)}return u}let D={createElement:(l,p,...f)=>l instanceof Node?l:typeof l=="string"&&l in D?D[l](p,f):l===D.createElement?[...A(...f)]:typeof l=="function"?l(p,f):g({error:new Error("Illegal type in createElement:"+l)})};function Z(l){if(D[l])return D[l];let p=(s,...I)=>{if(ge(s)&&(I.unshift(s),s={}),!ge(s)){if(s.debugger){debugger;delete s.debugger}let u=i?r.createElementNS(i,l.toLowerCase()):r.createElement(l);return u.constructor=p,k(u,m),L(u,s),u.append(...A(...I)),u}},f=Object.assign(p,{super:()=>{throw new Error("Can't invoke native elemenet constructors directly. Use document.createElement().")},extended:E,valueOf(){return`TagCreator: <${i||""}${i?"::":""}${l}>`}});return Object.defineProperty(p,Symbol.hasInstance,{value:w,writable:!0,configurable:!0}),Object.defineProperty(p,"name",{value:"<"+l+">"}),D[l]=f}return o.forEach(Z),D};function ht(e){let t=new WeakSet,n=new WeakMap;function i(o){for(let d of o)if(!d.isConnected){t.add(d),i(d.childNodes);let a=n.get(d);if(a){n.delete(d);for(let[r,c]of a?.entries())try{c.call(d)}catch{v.info("Ignored exception handling node removal",r,c,q(d))}}}}return new MutationObserver(o=>{o.forEach(function(d){d.type==="childList"&&d.removedNodes.length&&i(d.removedNodes)})}).observe(e,{subtree:!0,childList:!0}),{has(o){return t.has(o)?o.isConnected?(t.delete(o),!1):!0:!1},add(o){return t.add(o)},getRemovalHandler(o,d){return n.get(o)?.get(d)},onRemoval(o,d,a){a?o.forEach(r=>{let c=n.get(r)??new Map;n.set(r,c),c.set(d,a)}):o.forEach(r=>{let c=n.get(r);c&&(c.delete(d),c.size||n.delete(r))})}}}

module/dist/ai-ui.js

@@ -12,4 +12,4 @@ Element contains: ${q(i)}
 ${B}`)),h.next().then(F).catch(ae)}},ae=U=>{U&&(v.warn("Dynamic attribute termination",U,b,q(s),B,q(i)),i.appendChild(g({error:U})))},W=y.valueOf();W!==void 0&&W!==y&&!G(W)?F({done:!1,value:W}):h.next().then(F).catch(ae),x.onRemoval([i],b,()=>{h.return?.(),h=null})}function P(y,b){if(y instanceof Node)v.info(`Having DOM Nodes as properties of other DOM Nodes is a bad idea as it makes the DOM tree into a cyclic graph. You should reference nodes by ID or via a collection such as .childNodes. Propety: '${b}' value: ${q(y)} destination: ${i instanceof Node?q(i):i}`),T(b,y);else if(!(b in s)||s[b]===y||Array.isArray(s[b])&&s[b].length!==y.length)if(y.constructor===Object||y.constructor===Array){let h=new y.constructor;f(h,y),T(b,h)}else T(b,y);else Object.getOwnPropertyDescriptor(s,b)?.set?T(b,y):f(s[b],y)}})(i,p)}function w(i){for(let p=i.constructor;p;p=p.super)if(p===this)return!0;return!1}function E(i){let p=typeof i!="function"?y=>Object.assign({},i,y):i,f=Date.now().toString(36)+(dt++).toString(36)+Math.random().toString(36).slice(2),s=p({[pe]:f});s.styles&&document.getElementById(Ae)?.appendChild(r.createTextNode(s.styles+`
 `));let u=Object.assign((y,...b)=>{let h=me(y),S=[],B={[se]:(h?S:y[se])??S},C=h?this(B,y,...b):this(B,...b);C.constructor=u;let F=p({[pe]:f});if(B[se].push(F),O){let W=(U,M)=>{for(let K=U;K;K=K.super)if(K.definition?.declare&&M in K.definition.declare)return!0;return!1};if(F.declare){let U=Object.keys(F.declare).filter(M=>M in C||W(this,M));U.length&&v.log(`Declared keys '${U}' in ${u.name} already exist in base '${this.valueOf()}'`)}if(F.override){let U=Object.keys(F.override).filter(M=>!(M in C)&&!(a&&M in a)&&!W(this,M));U.length&&v.log(`Overridden keys '${U}' in ${u.name} do not exist in base '${this.valueOf()}'`)}}k(C,F.declare,!0),k(C,F.override);let ae=new Set;if(F.iterable&&Object.keys(F.iterable).forEach(W=>{W in C?(v.log(`Ignoring attempt to re-define iterable property "${W}" as it could already have consumers`),ae.add(W)):Te(C,W,F.iterable[W])}),B[se]===S){h||L(C,y);for(let M of S){let K=M?.constructed?.call(C);me(K)&&C.append(...A(K))}let W={},U=!1;for(let M of S)if(M.iterable)for(let K of Object.keys(M.iterable)){let Ce=!h&&K in y;if(ae.has(K)&&Ce||!(Ce&&(!V(y[K])||!G(y[K])))){let Oe=C[K]?.valueOf();Oe!==void 0&&(W[K]=Oe,U=!0)}}U&&Object.assign(C,W)}return C},{super:this,definition:Object.assign(s,{[pe]:f}),extended:E,valueOf:()=>{let y=[...Object.keys(s.declare||{}),...Object.keys(s.iterable||{})];return`${u.name}: {${y.join(", ")}}
  \u21AA ${this.valueOf()}`}});Object.defineProperty(u,Symbol.hasInstance,{value:w,writable:!0,configurable:!0});let T={};(function y(b){b?.super&&y(b.super);let h=b.definition;h&&(k(T,h?.override),k(T,h?.declare))})(this),k(T,s.override),k(T,s.declare),Object.defineProperties(u,Object.getOwnPropertyDescriptors(T));let z=T&&"className"in T&&typeof T.className=="string"?T.className:f,P=O?new Error().stack?.split(`
-`)[2]??"":"";if(Object.defineProperty(u,"name",{value:"<ai-"+z.replace(/\s+/g,"-")+P+">"}),O){let y=Object.keys(s).filter(b=>!["styles","ids","constructed","declare","override","iterable"].includes(b));y.length&&v.log(`${u.name} defines extraneous keys '${y}', which are unknown`)}return u}let D={createElement:(i,p,...f)=>i instanceof Node?i:typeof i=="string"&&i in D?D[i](p,f):i===D.createElement?[...A(...f)]:typeof i=="function"?i(p,f):g({error:new Error("Illegal type in createElement:"+i)})};function Z(i){if(D[i])return D[i];let p=(s,...I)=>{if(me(s)&&(I.unshift(s),s={}),!me(s)){if(s.debugger){debugger;delete s.debugger}let u=l?r.createElementNS(l,i.toLowerCase()):r.createElement(i);return u.constructor=p,k(u,m),L(u,s),u.append(...A(...I)),u}},f=Object.assign(p,{super:()=>{throw new Error("Can't invoke native elemenet constructors directly. Use document.createElement().")},extended:E,valueOf(){return`TagCreator: <${l||""}${l?"::":""}${i}>`}});return Object.defineProperty(p,Symbol.hasInstance,{value:w,writable:!0,configurable:!0}),Object.defineProperty(p,"name",{value:"<"+i+">"}),D[i]=f}return o.forEach(Z),D};function yt(e){let t=new WeakSet,n=new WeakMap;function l(o){for(let d of o)if(!d.isConnected){t.add(d),l(d.childNodes);let a=n.get(d);if(a){n.delete(d);for(let[r,c]of a?.entries())try{c.call(d)}catch{v.info("Ignored exception handling node removal",r,c,q(d))}}}}return new MutationObserver(o=>{o.forEach(function(d){d.type==="childList"&&d.removedNodes.length&&l(d.removedNodes)})}).observe(e,{subtree:!0,childList:!0}),{has(o){return t.has(o)},add(o){return t.add(o)},getRemovalHandler(o,d){return n.get(o)?.get(d)},onRemoval(o,d,a){a?o.forEach(r=>{let c=n.get(r)??new Map;n.set(r,c),c.set(d,a)}):o.forEach(r=>{let c=n.get(r);c&&(c.delete(d),c.size||n.delete(r))})}}}export{Be as Iterators,He as Ready,pe as UniqueID,ft as tag,Se as when};
+`)[2]??"":"";if(Object.defineProperty(u,"name",{value:"<ai-"+z.replace(/\s+/g,"-")+P+">"}),O){let y=Object.keys(s).filter(b=>!["styles","ids","constructed","declare","override","iterable"].includes(b));y.length&&v.log(`${u.name} defines extraneous keys '${y}', which are unknown`)}return u}let D={createElement:(i,p,...f)=>i instanceof Node?i:typeof i=="string"&&i in D?D[i](p,f):i===D.createElement?[...A(...f)]:typeof i=="function"?i(p,f):g({error:new Error("Illegal type in createElement:"+i)})};function Z(i){if(D[i])return D[i];let p=(s,...I)=>{if(me(s)&&(I.unshift(s),s={}),!me(s)){if(s.debugger){debugger;delete s.debugger}let u=l?r.createElementNS(l,i.toLowerCase()):r.createElement(i);return u.constructor=p,k(u,m),L(u,s),u.append(...A(...I)),u}},f=Object.assign(p,{super:()=>{throw new Error("Can't invoke native elemenet constructors directly. Use document.createElement().")},extended:E,valueOf(){return`TagCreator: <${l||""}${l?"::":""}${i}>`}});return Object.defineProperty(p,Symbol.hasInstance,{value:w,writable:!0,configurable:!0}),Object.defineProperty(p,"name",{value:"<"+i+">"}),D[i]=f}return o.forEach(Z),D};function yt(e){let t=new WeakSet,n=new WeakMap;function l(o){for(let d of o)if(!d.isConnected){t.add(d),l(d.childNodes);let a=n.get(d);if(a){n.delete(d);for(let[r,c]of a?.entries())try{c.call(d)}catch{v.info("Ignored exception handling node removal",r,c,q(d))}}}}return new MutationObserver(o=>{o.forEach(function(d){d.type==="childList"&&d.removedNodes.length&&l(d.removedNodes)})}).observe(e,{subtree:!0,childList:!0}),{has(o){return t.has(o)?o.isConnected?(t.delete(o),!1):!0:!1},add(o){return t.add(o)},getRemovalHandler(o,d){return n.get(o)?.get(d)},onRemoval(o,d,a){a?o.forEach(r=>{let c=n.get(r)??new Map;n.set(r,c),c.set(d,a)}):o.forEach(r=>{let c=n.get(r);c&&(c.delete(d),c.size||n.delete(r))})}}}export{Be as Iterators,He as Ready,pe as UniqueID,ft as tag,Se as when};