@syndicate-lang/html2 - npm Package Compare versions

Comparing version 0.36.1 to 0.36.2

dist/syndicate-html2.es6.js

@@ -53,4 +53,4 @@ import * as __SYNDICATE__ from '@syndicate-lang/core';
 }
-function followPath(topNodes, path) {
-    let n = topNodes[path[0]];
+function followPath(topNode, path) {
+    let n = topNode.childNodes[path[0]];
     for (let j = 1; j < path.length; j++)
@@ -180,3 +180,7 @@ n = n.childNodes[path[j]];
         this.state = {};
+        this.nodes = Array.from(this.container.childNodes);
     }
+    reset() {
+        this.nodes.forEach(n => this.container.appendChild(n));
+    }
 }
@@ -278,5 +282,6 @@ function makePlaceholder() {
     clone() {
-        return new HtmlFragmentInstance(Array.from(this.template.cloneNode(true).content.childNodes));
+        return new HtmlFragmentInstance(this.template.content.cloneNode(true));
     }
     update(template, variableParts) {
+        template.reset();
         this.placeholderActions.forEach(({ path, action }) => {
@@ -313,3 +318,3 @@ var _a;
         b.update(i, variableParts);
-        return i.container;
+        return Array.from(i.container.childNodes);
     };
@@ -316,0 +321,0 @@ }

dist/syndicate-html2.es6.min.js

@@ -1,2 +0,2 @@
-import*as e from"@syndicate-lang/core";import{randomId as t,Dataspace as n,Turn as r}from"@syndicate-lang/core";const a=t(8,!0),s=new RegExp(`x-${a}-(\\d+)-${a}-x`),o=new RegExp(`x-${a}-(\\d+)-${a}-x`,"g");function i(e){let t=null,n=0;const r=[],a=[];for(;null!==(t=o.exec(e));)r.push(e.substring(n,t.index)),a.push(parseInt(t[1],10)),n=o.lastIndex;return r.push(e.substring(n)),{constantParts:r,placeholders:a}}function l(e,t){const n=[];return function e(r){if(Array.isArray(r))r.forEach(e);else switch(typeof r){case"string":n.push(t?r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"):r);break;case"number":n.push(""+r);break;default:throw new Error("Cannot render Node in attribute context")}}(e),n}function c(e,t){let n=e[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}class u{constructor(e){this.variablePartIndex=e}reset(e,t){var n,r;if("nodeCount"in e){const a=e.nodeCount;null===(n=t.parentNode)||void 0===n||n.insertBefore(f(),t);for(let e=0;e<a;e++){const e=t.nextSibling;if(null===(r=t.parentNode)||void 0===r||r.removeChild(t),null===e)break;t=e}}e.nodeCount=0}act(e,t,n){var r;!function t(r){var a;if(Array.isArray(r))r.forEach(t);else{let t;switch(typeof r){case"string":t=document.createTextNode(r);break;case"number":t=document.createTextNode(""+r);break;case"object":if(null!==r&&"nodeType"in r){t=r;break}default:{let e;try{e=""+r}catch(t){e=r.toString()}t=document.createTextNode(`<ERROR: invalid HtmlFragment: ${e}>`);break}}null===(a=n.parentNode)||void 0===a||a.insertBefore(t,n),e.nodeCount++}}(t[this.variablePartIndex]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}class h{constructor(e){this.variablePartIndex=e}reset(e,t){var n;(null!==(n=e.attrNames)&&void 0!==n?n:[]).forEach((e=>t.removeAttribute(e))),e.attrNames=[]}act(e,t,n){const r=document.createElement("template"),a=this.variablePartIndex;r.innerHTML=`<x-dummy ${l(t[a],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((t=>{e.attrNames.push(t.name),n.setAttribute(t.name,t.value)}))}}class d{constructor(e,t,n){this.attrName=e,this.constantParts=t,this.placeholders=n}reset(e,t){}act(e,t,n){const r=[this.constantParts[0]];this.placeholders.forEach(((e,n)=>{r.push(...l(t[e],!1)),r.push(this.constantParts[n+1])})),n.setAttribute(this.attrName,r.join(""))}}class v{constructor(e){this.actions=e}reset(e,t){this.actions.forEach(((n,r)=>{var a;const s=null!==(a=e[r])&&void 0!==a?a:e[r]={};n.reset(s,t)}))}act(e,t,n){this.actions.forEach(((r,a)=>{var s;const o=null!==(s=e[a])&&void 0!==s?s:e[a]={};r.act(o,t,n)}))}}class p{constructor(e){this.container=e,this.state={}}}function f(){return document.createElement("x-placeholder")}class m{constructor(e){this.template=document.createElement("template"),this.placeholderActions=[];const t=[];e.raw.forEach(((e,n)=>{n>0&&t.push(`x-${a}-${n-1}-${a}-x`),t.push(e)})),this.template.innerHTML=t.join(""),this.indexPlaceholders()}indexTextNode(e,t){var n,r;const{constantParts:a,placeholders:s}=i(null!==(n=e.textContent)&&void 0!==n?n:"");a.forEach(((t,n)=>{var r,a;n>0&&(null===(r=e.parentNode)||void 0===r||r.insertBefore(f(),e)),null===(a=e.parentNode)||void 0===a||a.insertBefore(document.createTextNode(t),e)}));const o=e.nextSibling;return null===(r=e.parentNode)||void 0===r||r.removeChild(e),s.forEach(((e,n)=>{const r=t.slice();r[r.length-1]+=2*n+1,this.placeholderActions.push({path:r,action:new u(e)})})),t[t.length-1]+=a.length+s.length,o}indexElement(e,t){const n=[];for(let t=0;t<e.attributes.length;t++){const r=e.attributes[t],a=r.name,o=a.match(s);if(null!==o){e.removeAttributeNode(r),t--;const a=parseInt(o[1],10);n.push(new h(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(new d(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:1===n.length?n[0]:new v(n)})}indexPlaceholders(){const e=[],t=n=>{e.push(0);let r=n.firstChild;for(;null!==r;){const n=r;switch(n.nodeType){case Node.TEXT_NODE:r=this.indexTextNode(n,e);break;case Node.ELEMENT_NODE:{const a=n;this.indexElement(a,e),t(a),r=a.nextSibling,e[e.length-1]++;break}default:r=n.nextSibling,e[e.length-1]++}}e.pop()};t(this.template.content)}clone(){return new p(Array.from(this.template.cloneNode(!0).content.childNodes))}update(e,t){this.placeholderActions.forEach((({path:t,action:n})=>{var r,a,s;const o=null!==(r=(a=e.state)[s=t.map((e=>""+e)).join(".")])&&void 0!==r?r:a[s]={};n.reset(o,c(e.container,t))})),this.placeholderActions.forEach((({path:n,action:r})=>{var a,s,o;const i=null!==(a=(s=e.state)[o=n.map((e=>""+e)).join(".")])&&void 0!==a?a:s[o]={};r.act(i,t,c(e.container,n))}))}}const g=new WeakMap;function b(){const e=new WeakMap;return(t,...n)=>{let r=g.get(t);void 0===r&&(r=new m(t),g.set(t,r));let a=e.get(t);return void 0===a&&(a=r.clone(),e.set(t,a)),r.update(a,n),a.container}}const N=e.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);function E(t=n.local){!function(t){e.Dataspace._spawn((()=>{e.Turn.activeFacet.actor.name="LocationHashTracker",(t=>{const n=e.Turn.active.field("/","hashValue"),a=()=>{var e=decodeURIComponent(window.location.hash);e.length&&"#"===e[0]&&(e=e.slice(1)),n.value=e||"/"},s=r.activeFacet,o=()=>s.turn(a);window.addEventListener("hashchange",o),e.Turn.activeFacet.onStop((()=>{window.removeEventListener("hashchange",o)})),a(),e.Turn.active.assertDataflow((()=>({target:t(),assertion:N(n.value)}))),e.Turn.active.assertDataflow((()=>({target:t(),assertion:e.Observe({pattern:e.QuasiValue.finish(e.QuasiValue.ctor(N,e.QuasiValue.bind(e.QuasiValue._))),observer:e.Turn.ref({message:e=>{if(Array.isArray(e)){if("string"!=typeof e[0])return;const t=e[0];window.location.hash=t}}})})})))})((()=>t))}))}(t)}class w{get node(){return this._node}constructor(t,n){let a;this._node=null,this.callbacks=new Map,a="object"==typeof n?y(t,n):"function"==typeof t?t:()=>[t],this.facet=r.activeFacet;const s=this.facet.actor.atExit((()=>this.node.remove()));e.Turn.activeFacet.onStop((()=>{this.node.remove(),s()}));const o=b();e.Turn.active._dataflow((()=>{const e=a(o);if(1!==e.length)throw new Error("@syndicate-lang/html2: Expected exactly one node from template");if(null===this._node)this._node=e[0];else if(this._node!==e[0])throw new Error("@syndicate-lang/html2: Node generator is not stable")}))}get _nodeAsParent(){return this._node&&"querySelector"in this._node?this._node:null}get parent(){return this.node.parentNode}set parent(e){this.setParent(e)}setParent(e,t=document){return"string"==typeof e&&(e=t.querySelector(e)),this.node.parentNode!==e&&(null===e?this.node.remove():e.appendChild(this.node)),this}querySelector(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelector(e);return r?new(null!=t?t:w)(r):null}querySelectorAll(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelectorAll(e),a=[];return r&&r.forEach((e=>a.push(new(null!=t?t:w)(e)))),a}on(e,t){return this.addEventListener(e,t),this}once(e,t){return this.addEventListener(e,t,{once:!0}),this}off(e,t){return this.removeEventListener(e,t),this}addEventListener(e,t,n){if(null===t)return;let r=this.callbacks.get(e);if(void 0===r)r=new Map,this.callbacks.set(e,r);else if(r.has(t))return;const a={wrapped:"function"==typeof t?e=>this.facet.turn((()=>t(e))):e=>this.facet.turn((()=>t.handleEvent(e))),options:n};r.set(t,a),this.node.addEventListener(e,a.wrapped,n)}dispatchEvent(e){return this.node.dispatchEvent(e)}removeEventListener(e,t,n){if(null===t)return;const r=this.callbacks.get(e);if(void 0===r)return;const a=r.get(t);void 0!==a&&(this.node.removeEventListener(e,a.wrapped,n),r.delete(t),0===r.size&&this.callbacks.delete(e))}}class x extends w{constructor(t,n,r){super(t,n);const a="string"==typeof n?n:"string"==typeof r?r:"change",s=e.Turn.active.field("","value");this._value=s;const o=e.Turn.active.field(NaN,"valueAsNumber");this._valueAsNumber=o,"value"in this.node&&(this.on(a,(()=>this.readValues())),this.readValues(),e.Turn.active._dataflow((()=>{this.valueAsNumber=this._valueAsNumber.value})),e.Turn.active._dataflow((()=>{this.value=this._value.value})))}readValues(){var e,t;const n=this.node;this.suppressCycleWarning(),this._value.value=null!==(e=n.value)&&void 0!==e?e:"",this._valueAsNumber.value=null!==(t=n.valueAsNumber)&&void 0!==t?t:NaN}get value(){return this._value.value}set value(e){this.node.value=e,this._value.value=e}get valueAsNumber(){return this._valueAsNumber.value}set valueAsNumber(e){this.node.value=Number.isNaN(e)?"":""+e,this._valueAsNumber.value=e}suppressCycleWarning(){this._value.suppressCycleWarning(),this._valueAsNumber.suppressCycleWarning()}}function y(e,t){const n="string"==typeof e?document.querySelector(e):e;if(null===n)throw new Error("Cannot find template: "+e);const r=`return t => t\`${n.innerHTML.trim().split("`").join("\\`")}\``,a=Object.entries(t),s=a.map((e=>e[0])),o=a.map((e=>e[1]));return new Function(...s,r)(...o)}export{N as LocationHash,x as ValueWidget,w as Widget,E as boot,b as template,y as templateGenerator};
+import*as e from"@syndicate-lang/core";import{randomId as t,Dataspace as n,Turn as r}from"@syndicate-lang/core";const a=t(8,!0),s=new RegExp(`x-${a}-(\\d+)-${a}-x`),o=new RegExp(`x-${a}-(\\d+)-${a}-x`,"g");function i(e){let t=null,n=0;const r=[],a=[];for(;null!==(t=o.exec(e));)r.push(e.substring(n,t.index)),a.push(parseInt(t[1],10)),n=o.lastIndex;return r.push(e.substring(n)),{constantParts:r,placeholders:a}}function l(e,t){const n=[];return function e(r){if(Array.isArray(r))r.forEach(e);else switch(typeof r){case"string":n.push(t?r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"):r);break;case"number":n.push(""+r);break;default:throw new Error("Cannot render Node in attribute context")}}(e),n}function c(e,t){let n=e.childNodes[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}class u{constructor(e){this.variablePartIndex=e}reset(e,t){var n,r;if("nodeCount"in e){const a=e.nodeCount;null===(n=t.parentNode)||void 0===n||n.insertBefore(f(),t);for(let e=0;e<a;e++){const e=t.nextSibling;if(null===(r=t.parentNode)||void 0===r||r.removeChild(t),null===e)break;t=e}}e.nodeCount=0}act(e,t,n){var r;!function t(r){var a;if(Array.isArray(r))r.forEach(t);else{let t;switch(typeof r){case"string":t=document.createTextNode(r);break;case"number":t=document.createTextNode(""+r);break;case"object":if(null!==r&&"nodeType"in r){t=r;break}default:{let e;try{e=""+r}catch(t){e=r.toString()}t=document.createTextNode(`<ERROR: invalid HtmlFragment: ${e}>`);break}}null===(a=n.parentNode)||void 0===a||a.insertBefore(t,n),e.nodeCount++}}(t[this.variablePartIndex]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}class h{constructor(e){this.variablePartIndex=e}reset(e,t){var n;(null!==(n=e.attrNames)&&void 0!==n?n:[]).forEach((e=>t.removeAttribute(e))),e.attrNames=[]}act(e,t,n){const r=document.createElement("template"),a=this.variablePartIndex;r.innerHTML=`<x-dummy ${l(t[a],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((t=>{e.attrNames.push(t.name),n.setAttribute(t.name,t.value)}))}}class d{constructor(e,t,n){this.attrName=e,this.constantParts=t,this.placeholders=n}reset(e,t){}act(e,t,n){const r=[this.constantParts[0]];this.placeholders.forEach(((e,n)=>{r.push(...l(t[e],!1)),r.push(this.constantParts[n+1])})),n.setAttribute(this.attrName,r.join(""))}}class v{constructor(e){this.actions=e}reset(e,t){this.actions.forEach(((n,r)=>{var a;const s=null!==(a=e[r])&&void 0!==a?a:e[r]={};n.reset(s,t)}))}act(e,t,n){this.actions.forEach(((r,a)=>{var s;const o=null!==(s=e[a])&&void 0!==s?s:e[a]={};r.act(o,t,n)}))}}class p{constructor(e){this.container=e,this.state={},this.nodes=Array.from(this.container.childNodes)}reset(){this.nodes.forEach((e=>this.container.appendChild(e)))}}function f(){return document.createElement("x-placeholder")}class m{constructor(e){this.template=document.createElement("template"),this.placeholderActions=[];const t=[];e.raw.forEach(((e,n)=>{n>0&&t.push(`x-${a}-${n-1}-${a}-x`),t.push(e)})),this.template.innerHTML=t.join(""),this.indexPlaceholders()}indexTextNode(e,t){var n,r;const{constantParts:a,placeholders:s}=i(null!==(n=e.textContent)&&void 0!==n?n:"");a.forEach(((t,n)=>{var r,a;n>0&&(null===(r=e.parentNode)||void 0===r||r.insertBefore(f(),e)),null===(a=e.parentNode)||void 0===a||a.insertBefore(document.createTextNode(t),e)}));const o=e.nextSibling;return null===(r=e.parentNode)||void 0===r||r.removeChild(e),s.forEach(((e,n)=>{const r=t.slice();r[r.length-1]+=2*n+1,this.placeholderActions.push({path:r,action:new u(e)})})),t[t.length-1]+=a.length+s.length,o}indexElement(e,t){const n=[];for(let t=0;t<e.attributes.length;t++){const r=e.attributes[t],a=r.name,o=a.match(s);if(null!==o){e.removeAttributeNode(r),t--;const a=parseInt(o[1],10);n.push(new h(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(new d(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:1===n.length?n[0]:new v(n)})}indexPlaceholders(){const e=[],t=n=>{e.push(0);let r=n.firstChild;for(;null!==r;){const n=r;switch(n.nodeType){case Node.TEXT_NODE:r=this.indexTextNode(n,e);break;case Node.ELEMENT_NODE:{const a=n;this.indexElement(a,e),t(a),r=a.nextSibling,e[e.length-1]++;break}default:r=n.nextSibling,e[e.length-1]++}}e.pop()};t(this.template.content)}clone(){return new p(this.template.content.cloneNode(!0))}update(e,t){e.reset(),this.placeholderActions.forEach((({path:t,action:n})=>{var r,a,s;const o=null!==(r=(a=e.state)[s=t.map((e=>""+e)).join(".")])&&void 0!==r?r:a[s]={};n.reset(o,c(e.container,t))})),this.placeholderActions.forEach((({path:n,action:r})=>{var a,s,o;const i=null!==(a=(s=e.state)[o=n.map((e=>""+e)).join(".")])&&void 0!==a?a:s[o]={};r.act(i,t,c(e.container,n))}))}}const g=new WeakMap;function b(){const e=new WeakMap;return(t,...n)=>{let r=g.get(t);void 0===r&&(r=new m(t),g.set(t,r));let a=e.get(t);return void 0===a&&(a=r.clone(),e.set(t,a)),r.update(a,n),Array.from(a.container.childNodes)}}const N=e.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);function E(t=n.local){!function(t){e.Dataspace._spawn((()=>{e.Turn.activeFacet.actor.name="LocationHashTracker",(t=>{const n=e.Turn.active.field("/","hashValue"),a=()=>{var e=decodeURIComponent(window.location.hash);e.length&&"#"===e[0]&&(e=e.slice(1)),n.value=e||"/"},s=r.activeFacet,o=()=>s.turn(a);window.addEventListener("hashchange",o),e.Turn.activeFacet.onStop((()=>{window.removeEventListener("hashchange",o)})),a(),e.Turn.active.assertDataflow((()=>({target:t(),assertion:N(n.value)}))),e.Turn.active.assertDataflow((()=>({target:t(),assertion:e.Observe({pattern:e.QuasiValue.finish(e.QuasiValue.ctor(N,e.QuasiValue.bind(e.QuasiValue._))),observer:e.Turn.ref({message:e=>{if(Array.isArray(e)){if("string"!=typeof e[0])return;const t=e[0];window.location.hash=t}}})})})))})((()=>t))}))}(t)}class w{get node(){return this._node}constructor(t,n){let a;this._node=null,this.callbacks=new Map,a="object"==typeof n?y(t,n):"function"==typeof t?t:()=>[t],this.facet=r.activeFacet;const s=this.facet.actor.atExit((()=>this.node.remove()));e.Turn.activeFacet.onStop((()=>{this.node.remove(),s()}));const o=b();e.Turn.active._dataflow((()=>{const e=a(o);if(1!==e.length)throw new Error("@syndicate-lang/html2: Expected exactly one node from template");if(null===this._node)this._node=e[0];else if(this._node!==e[0])throw new Error("@syndicate-lang/html2: Node generator is not stable")}))}get _nodeAsParent(){return this._node&&"querySelector"in this._node?this._node:null}get parent(){return this.node.parentNode}set parent(e){this.setParent(e)}setParent(e,t=document){return"string"==typeof e&&(e=t.querySelector(e)),this.node.parentNode!==e&&(null===e?this.node.remove():e.appendChild(this.node)),this}querySelector(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelector(e);return r?new(null!=t?t:w)(r):null}querySelectorAll(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelectorAll(e),a=[];return r&&r.forEach((e=>a.push(new(null!=t?t:w)(e)))),a}on(e,t){return this.addEventListener(e,t),this}once(e,t){return this.addEventListener(e,t,{once:!0}),this}off(e,t){return this.removeEventListener(e,t),this}addEventListener(e,t,n){if(null===t)return;let r=this.callbacks.get(e);if(void 0===r)r=new Map,this.callbacks.set(e,r);else if(r.has(t))return;const a={wrapped:"function"==typeof t?e=>this.facet.turn((()=>t(e))):e=>this.facet.turn((()=>t.handleEvent(e))),options:n};r.set(t,a),this.node.addEventListener(e,a.wrapped,n)}dispatchEvent(e){return this.node.dispatchEvent(e)}removeEventListener(e,t,n){if(null===t)return;const r=this.callbacks.get(e);if(void 0===r)return;const a=r.get(t);void 0!==a&&(this.node.removeEventListener(e,a.wrapped,n),r.delete(t),0===r.size&&this.callbacks.delete(e))}}class x extends w{constructor(t,n,r){super(t,n);const a="string"==typeof n?n:"string"==typeof r?r:"change",s=e.Turn.active.field("","value");this._value=s;const o=e.Turn.active.field(NaN,"valueAsNumber");this._valueAsNumber=o,"value"in this.node&&(this.on(a,(()=>this.readValues())),this.readValues(),e.Turn.active._dataflow((()=>{this.valueAsNumber=this._valueAsNumber.value})),e.Turn.active._dataflow((()=>{this.value=this._value.value})))}readValues(){var e,t;const n=this.node;this.suppressCycleWarning(),this._value.value=null!==(e=n.value)&&void 0!==e?e:"",this._valueAsNumber.value=null!==(t=n.valueAsNumber)&&void 0!==t?t:NaN}get value(){return this._value.value}set value(e){this.node.value=e,this._value.value=e}get valueAsNumber(){return this._valueAsNumber.value}set valueAsNumber(e){this.node.value=Number.isNaN(e)?"":""+e,this._valueAsNumber.value=e}suppressCycleWarning(){this._value.suppressCycleWarning(),this._valueAsNumber.suppressCycleWarning()}}function y(e,t){const n="string"==typeof e?document.querySelector(e):e;if(null===n)throw new Error("Cannot find template: "+e);const r=`return t => t\`${n.innerHTML.trim().split("`").join("\\`")}\``,a=Object.entries(t),s=a.map((e=>e[0])),o=a.map((e=>e[1]));return new Function(...s,r)(...o)}export{N as LocationHash,x as ValueWidget,w as Widget,E as boot,b as template,y as templateGenerator};
 //# sourceMappingURL=syndicate-html2.es6.min.js.map

dist/syndicate-html2.js

@@ -76,4 +76,4 @@ (function (global, factory) {
     }
-    function followPath(topNodes, path) {
-        let n = topNodes[path[0]];
+    function followPath(topNode, path) {
+        let n = topNode.childNodes[path[0]];
         for (let j = 1; j < path.length; j++)
@@ -203,3 +203,7 @@ n = n.childNodes[path[j]];
             this.state = {};
+            this.nodes = Array.from(this.container.childNodes);
         }
+        reset() {
+            this.nodes.forEach(n => this.container.appendChild(n));
+        }
     }
@@ -301,5 +305,6 @@ function makePlaceholder() {
         clone() {
-            return new HtmlFragmentInstance(Array.from(this.template.cloneNode(true).content.childNodes));
+            return new HtmlFragmentInstance(this.template.content.cloneNode(true));
         }
         update(template, variableParts) {
+            template.reset();
             this.placeholderActions.forEach(({ path, action }) => {
@@ -336,3 +341,3 @@ var _a;
             b.update(i, variableParts);
-            return i.container;
+            return Array.from(i.container.childNodes);
         };
@@ -339,0 +344,0 @@ }

dist/syndicate-html2.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syndicate-lang/core")):"function"==typeof define&&define.amd?define(["exports","@syndicate-lang/core"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).SyndicateHtml2={},e.Syndicate)}(this,(function(e,t){"use strict";function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(t);const a=t.randomId(8,!0),s=new RegExp(`x-${a}-(\\d+)-${a}-x`),o=new RegExp(`x-${a}-(\\d+)-${a}-x`,"g");function i(e){let t=null,n=0;const r=[],a=[];for(;null!==(t=o.exec(e));)r.push(e.substring(n,t.index)),a.push(parseInt(t[1],10)),n=o.lastIndex;return r.push(e.substring(n)),{constantParts:r,placeholders:a}}function l(e,t){const n=[];return function e(r){if(Array.isArray(r))r.forEach(e);else switch(typeof r){case"string":n.push(t?r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"):r);break;case"number":n.push(""+r);break;default:throw new Error("Cannot render Node in attribute context")}}(e),n}function c(e,t){let n=e[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}class u{constructor(e){this.variablePartIndex=e}reset(e,t){var n,r;if("nodeCount"in e){const a=e.nodeCount;null===(n=t.parentNode)||void 0===n||n.insertBefore(f(),t);for(let e=0;e<a;e++){const e=t.nextSibling;if(null===(r=t.parentNode)||void 0===r||r.removeChild(t),null===e)break;t=e}}e.nodeCount=0}act(e,t,n){var r;!function t(r){var a;if(Array.isArray(r))r.forEach(t);else{let t;switch(typeof r){case"string":t=document.createTextNode(r);break;case"number":t=document.createTextNode(""+r);break;case"object":if(null!==r&&"nodeType"in r){t=r;break}default:{let e;try{e=""+r}catch(t){e=r.toString()}t=document.createTextNode(`<ERROR: invalid HtmlFragment: ${e}>`);break}}null===(a=n.parentNode)||void 0===a||a.insertBefore(t,n),e.nodeCount++}}(t[this.variablePartIndex]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}class d{constructor(e){this.variablePartIndex=e}reset(e,t){var n;(null!==(n=e.attrNames)&&void 0!==n?n:[]).forEach((e=>t.removeAttribute(e))),e.attrNames=[]}act(e,t,n){const r=document.createElement("template"),a=this.variablePartIndex;r.innerHTML=`<x-dummy ${l(t[a],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((t=>{e.attrNames.push(t.name),n.setAttribute(t.name,t.value)}))}}class h{constructor(e,t,n){this.attrName=e,this.constantParts=t,this.placeholders=n}reset(e,t){}act(e,t,n){const r=[this.constantParts[0]];this.placeholders.forEach(((e,n)=>{r.push(...l(t[e],!1)),r.push(this.constantParts[n+1])})),n.setAttribute(this.attrName,r.join(""))}}class p{constructor(e){this.actions=e}reset(e,t){this.actions.forEach(((n,r)=>{var a;const s=null!==(a=e[r])&&void 0!==a?a:e[r]={};n.reset(s,t)}))}act(e,t,n){this.actions.forEach(((r,a)=>{var s;const o=null!==(s=e[a])&&void 0!==s?s:e[a]={};r.act(o,t,n)}))}}class v{constructor(e){this.container=e,this.state={}}}function f(){return document.createElement("x-placeholder")}class m{constructor(e){this.template=document.createElement("template"),this.placeholderActions=[];const t=[];e.raw.forEach(((e,n)=>{n>0&&t.push(`x-${a}-${n-1}-${a}-x`),t.push(e)})),this.template.innerHTML=t.join(""),this.indexPlaceholders()}indexTextNode(e,t){var n,r;const{constantParts:a,placeholders:s}=i(null!==(n=e.textContent)&&void 0!==n?n:"");a.forEach(((t,n)=>{var r,a;n>0&&(null===(r=e.parentNode)||void 0===r||r.insertBefore(f(),e)),null===(a=e.parentNode)||void 0===a||a.insertBefore(document.createTextNode(t),e)}));const o=e.nextSibling;return null===(r=e.parentNode)||void 0===r||r.removeChild(e),s.forEach(((e,n)=>{const r=t.slice();r[r.length-1]+=2*n+1,this.placeholderActions.push({path:r,action:new u(e)})})),t[t.length-1]+=a.length+s.length,o}indexElement(e,t){const n=[];for(let t=0;t<e.attributes.length;t++){const r=e.attributes[t],a=r.name,o=a.match(s);if(null!==o){e.removeAttributeNode(r),t--;const a=parseInt(o[1],10);n.push(new d(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(new h(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:1===n.length?n[0]:new p(n)})}indexPlaceholders(){const e=[],t=n=>{e.push(0);let r=n.firstChild;for(;null!==r;){const n=r;switch(n.nodeType){case Node.TEXT_NODE:r=this.indexTextNode(n,e);break;case Node.ELEMENT_NODE:{const a=n;this.indexElement(a,e),t(a),r=a.nextSibling,e[e.length-1]++;break}default:r=n.nextSibling,e[e.length-1]++}}e.pop()};t(this.template.content)}clone(){return new v(Array.from(this.template.cloneNode(!0).content.childNodes))}update(e,t){this.placeholderActions.forEach((({path:t,action:n})=>{var r,a,s;const o=null!==(r=(a=e.state)[s=t.map((e=>""+e)).join(".")])&&void 0!==r?r:a[s]={};n.reset(o,c(e.container,t))})),this.placeholderActions.forEach((({path:n,action:r})=>{var a,s,o;const i=null!==(a=(s=e.state)[o=n.map((e=>""+e)).join(".")])&&void 0!==a?a:s[o]={};r.act(i,t,c(e.container,n))}))}}const g=new WeakMap;function b(){const e=new WeakMap;return(t,...n)=>{let r=g.get(t);void 0===r&&(r=new m(t),g.set(t,r));let a=e.get(t);return void 0===a&&(a=r.clone(),e.set(t,a)),r.update(a,n),a.container}}const y=r.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);class N{get node(){return this._node}constructor(e,n){let a;this._node=null,this.callbacks=new Map,a="object"==typeof n?E(e,n):"function"==typeof e?e:()=>[e],this.facet=t.Turn.activeFacet;const s=this.facet.actor.atExit((()=>this.node.remove()));r.Turn.activeFacet.onStop((()=>{this.node.remove(),s()}));const o=b();r.Turn.active._dataflow((()=>{const e=a(o);if(1!==e.length)throw new Error("@syndicate-lang/html2: Expected exactly one node from template");if(null===this._node)this._node=e[0];else if(this._node!==e[0])throw new Error("@syndicate-lang/html2: Node generator is not stable")}))}get _nodeAsParent(){return this._node&&"querySelector"in this._node?this._node:null}get parent(){return this.node.parentNode}set parent(e){this.setParent(e)}setParent(e,t=document){return"string"==typeof e&&(e=t.querySelector(e)),this.node.parentNode!==e&&(null===e?this.node.remove():e.appendChild(this.node)),this}querySelector(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelector(e);return r?new(null!=t?t:N)(r):null}querySelectorAll(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelectorAll(e),a=[];return r&&r.forEach((e=>a.push(new(null!=t?t:N)(e)))),a}on(e,t){return this.addEventListener(e,t),this}once(e,t){return this.addEventListener(e,t,{once:!0}),this}off(e,t){return this.removeEventListener(e,t),this}addEventListener(e,t,n){if(null===t)return;let r=this.callbacks.get(e);if(void 0===r)r=new Map,this.callbacks.set(e,r);else if(r.has(t))return;const a={wrapped:"function"==typeof t?e=>this.facet.turn((()=>t(e))):e=>this.facet.turn((()=>t.handleEvent(e))),options:n};r.set(t,a),this.node.addEventListener(e,a.wrapped,n)}dispatchEvent(e){return this.node.dispatchEvent(e)}removeEventListener(e,t,n){if(null===t)return;const r=this.callbacks.get(e);if(void 0===r)return;const a=r.get(t);void 0!==a&&(this.node.removeEventListener(e,a.wrapped,n),r.delete(t),0===r.size&&this.callbacks.delete(e))}}function E(e,t){const n="string"==typeof e?document.querySelector(e):e;if(null===n)throw new Error("Cannot find template: "+e);const r=`return t => t\`${n.innerHTML.trim().split("`").join("\\`")}\``,a=Object.entries(t),s=a.map((e=>e[0])),o=a.map((e=>e[1]));return new Function(...s,r)(...o)}e.LocationHash=y,e.ValueWidget=class extends N{constructor(e,t,n){super(e,t);const a="string"==typeof t?t:"string"==typeof n?n:"change",s=r.Turn.active.field("","value");this._value=s;const o=r.Turn.active.field(NaN,"valueAsNumber");this._valueAsNumber=o,"value"in this.node&&(this.on(a,(()=>this.readValues())),this.readValues(),r.Turn.active._dataflow((()=>{this.valueAsNumber=this._valueAsNumber.value})),r.Turn.active._dataflow((()=>{this.value=this._value.value})))}readValues(){var e,t;const n=this.node;this.suppressCycleWarning(),this._value.value=null!==(e=n.value)&&void 0!==e?e:"",this._valueAsNumber.value=null!==(t=n.valueAsNumber)&&void 0!==t?t:NaN}get value(){return this._value.value}set value(e){this.node.value=e,this._value.value=e}get valueAsNumber(){return this._valueAsNumber.value}set valueAsNumber(e){this.node.value=Number.isNaN(e)?"":""+e,this._valueAsNumber.value=e}suppressCycleWarning(){this._value.suppressCycleWarning(),this._valueAsNumber.suppressCycleWarning()}},e.Widget=N,e.boot=function(e=t.Dataspace.local){!function(e){r.Dataspace._spawn((()=>{r.Turn.activeFacet.actor.name="LocationHashTracker",(e=>{const n=r.Turn.active.field("/","hashValue"),a=()=>{var e=decodeURIComponent(window.location.hash);e.length&&"#"===e[0]&&(e=e.slice(1)),n.value=e||"/"},s=t.Turn.activeFacet,o=()=>s.turn(a);window.addEventListener("hashchange",o),r.Turn.activeFacet.onStop((()=>{window.removeEventListener("hashchange",o)})),a(),r.Turn.active.assertDataflow((()=>({target:e(),assertion:y(n.value)}))),r.Turn.active.assertDataflow((()=>({target:e(),assertion:r.Observe({pattern:r.QuasiValue.finish(r.QuasiValue.ctor(y,r.QuasiValue.bind(r.QuasiValue._))),observer:r.Turn.ref({message:e=>{if(Array.isArray(e)){if("string"!=typeof e[0])return;const t=e[0];window.location.hash=t}}})})})))})((()=>e))}))}(e)},e.template=b,e.templateGenerator=E,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syndicate-lang/core")):"function"==typeof define&&define.amd?define(["exports","@syndicate-lang/core"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).SyndicateHtml2={},e.Syndicate)}(this,(function(e,t){"use strict";function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(t);const a=t.randomId(8,!0),s=new RegExp(`x-${a}-(\\d+)-${a}-x`),o=new RegExp(`x-${a}-(\\d+)-${a}-x`,"g");function i(e){let t=null,n=0;const r=[],a=[];for(;null!==(t=o.exec(e));)r.push(e.substring(n,t.index)),a.push(parseInt(t[1],10)),n=o.lastIndex;return r.push(e.substring(n)),{constantParts:r,placeholders:a}}function l(e,t){const n=[];return function e(r){if(Array.isArray(r))r.forEach(e);else switch(typeof r){case"string":n.push(t?r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"):r);break;case"number":n.push(""+r);break;default:throw new Error("Cannot render Node in attribute context")}}(e),n}function c(e,t){let n=e.childNodes[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}class u{constructor(e){this.variablePartIndex=e}reset(e,t){var n,r;if("nodeCount"in e){const a=e.nodeCount;null===(n=t.parentNode)||void 0===n||n.insertBefore(f(),t);for(let e=0;e<a;e++){const e=t.nextSibling;if(null===(r=t.parentNode)||void 0===r||r.removeChild(t),null===e)break;t=e}}e.nodeCount=0}act(e,t,n){var r;!function t(r){var a;if(Array.isArray(r))r.forEach(t);else{let t;switch(typeof r){case"string":t=document.createTextNode(r);break;case"number":t=document.createTextNode(""+r);break;case"object":if(null!==r&&"nodeType"in r){t=r;break}default:{let e;try{e=""+r}catch(t){e=r.toString()}t=document.createTextNode(`<ERROR: invalid HtmlFragment: ${e}>`);break}}null===(a=n.parentNode)||void 0===a||a.insertBefore(t,n),e.nodeCount++}}(t[this.variablePartIndex]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}class d{constructor(e){this.variablePartIndex=e}reset(e,t){var n;(null!==(n=e.attrNames)&&void 0!==n?n:[]).forEach((e=>t.removeAttribute(e))),e.attrNames=[]}act(e,t,n){const r=document.createElement("template"),a=this.variablePartIndex;r.innerHTML=`<x-dummy ${l(t[a],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((t=>{e.attrNames.push(t.name),n.setAttribute(t.name,t.value)}))}}class h{constructor(e,t,n){this.attrName=e,this.constantParts=t,this.placeholders=n}reset(e,t){}act(e,t,n){const r=[this.constantParts[0]];this.placeholders.forEach(((e,n)=>{r.push(...l(t[e],!1)),r.push(this.constantParts[n+1])})),n.setAttribute(this.attrName,r.join(""))}}class p{constructor(e){this.actions=e}reset(e,t){this.actions.forEach(((n,r)=>{var a;const s=null!==(a=e[r])&&void 0!==a?a:e[r]={};n.reset(s,t)}))}act(e,t,n){this.actions.forEach(((r,a)=>{var s;const o=null!==(s=e[a])&&void 0!==s?s:e[a]={};r.act(o,t,n)}))}}class v{constructor(e){this.container=e,this.state={},this.nodes=Array.from(this.container.childNodes)}reset(){this.nodes.forEach((e=>this.container.appendChild(e)))}}function f(){return document.createElement("x-placeholder")}class m{constructor(e){this.template=document.createElement("template"),this.placeholderActions=[];const t=[];e.raw.forEach(((e,n)=>{n>0&&t.push(`x-${a}-${n-1}-${a}-x`),t.push(e)})),this.template.innerHTML=t.join(""),this.indexPlaceholders()}indexTextNode(e,t){var n,r;const{constantParts:a,placeholders:s}=i(null!==(n=e.textContent)&&void 0!==n?n:"");a.forEach(((t,n)=>{var r,a;n>0&&(null===(r=e.parentNode)||void 0===r||r.insertBefore(f(),e)),null===(a=e.parentNode)||void 0===a||a.insertBefore(document.createTextNode(t),e)}));const o=e.nextSibling;return null===(r=e.parentNode)||void 0===r||r.removeChild(e),s.forEach(((e,n)=>{const r=t.slice();r[r.length-1]+=2*n+1,this.placeholderActions.push({path:r,action:new u(e)})})),t[t.length-1]+=a.length+s.length,o}indexElement(e,t){const n=[];for(let t=0;t<e.attributes.length;t++){const r=e.attributes[t],a=r.name,o=a.match(s);if(null!==o){e.removeAttributeNode(r),t--;const a=parseInt(o[1],10);n.push(new d(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(new h(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:1===n.length?n[0]:new p(n)})}indexPlaceholders(){const e=[],t=n=>{e.push(0);let r=n.firstChild;for(;null!==r;){const n=r;switch(n.nodeType){case Node.TEXT_NODE:r=this.indexTextNode(n,e);break;case Node.ELEMENT_NODE:{const a=n;this.indexElement(a,e),t(a),r=a.nextSibling,e[e.length-1]++;break}default:r=n.nextSibling,e[e.length-1]++}}e.pop()};t(this.template.content)}clone(){return new v(this.template.content.cloneNode(!0))}update(e,t){e.reset(),this.placeholderActions.forEach((({path:t,action:n})=>{var r,a,s;const o=null!==(r=(a=e.state)[s=t.map((e=>""+e)).join(".")])&&void 0!==r?r:a[s]={};n.reset(o,c(e.container,t))})),this.placeholderActions.forEach((({path:n,action:r})=>{var a,s,o;const i=null!==(a=(s=e.state)[o=n.map((e=>""+e)).join(".")])&&void 0!==a?a:s[o]={};r.act(i,t,c(e.container,n))}))}}const g=new WeakMap;function b(){const e=new WeakMap;return(t,...n)=>{let r=g.get(t);void 0===r&&(r=new m(t),g.set(t,r));let a=e.get(t);return void 0===a&&(a=r.clone(),e.set(t,a)),r.update(a,n),Array.from(a.container.childNodes)}}const y=r.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);class N{get node(){return this._node}constructor(e,n){let a;this._node=null,this.callbacks=new Map,a="object"==typeof n?E(e,n):"function"==typeof e?e:()=>[e],this.facet=t.Turn.activeFacet;const s=this.facet.actor.atExit((()=>this.node.remove()));r.Turn.activeFacet.onStop((()=>{this.node.remove(),s()}));const o=b();r.Turn.active._dataflow((()=>{const e=a(o);if(1!==e.length)throw new Error("@syndicate-lang/html2: Expected exactly one node from template");if(null===this._node)this._node=e[0];else if(this._node!==e[0])throw new Error("@syndicate-lang/html2: Node generator is not stable")}))}get _nodeAsParent(){return this._node&&"querySelector"in this._node?this._node:null}get parent(){return this.node.parentNode}set parent(e){this.setParent(e)}setParent(e,t=document){return"string"==typeof e&&(e=t.querySelector(e)),this.node.parentNode!==e&&(null===e?this.node.remove():e.appendChild(this.node)),this}querySelector(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelector(e);return r?new(null!=t?t:N)(r):null}querySelectorAll(e,t){var n;const r=null===(n=this._nodeAsParent)||void 0===n?void 0:n.querySelectorAll(e),a=[];return r&&r.forEach((e=>a.push(new(null!=t?t:N)(e)))),a}on(e,t){return this.addEventListener(e,t),this}once(e,t){return this.addEventListener(e,t,{once:!0}),this}off(e,t){return this.removeEventListener(e,t),this}addEventListener(e,t,n){if(null===t)return;let r=this.callbacks.get(e);if(void 0===r)r=new Map,this.callbacks.set(e,r);else if(r.has(t))return;const a={wrapped:"function"==typeof t?e=>this.facet.turn((()=>t(e))):e=>this.facet.turn((()=>t.handleEvent(e))),options:n};r.set(t,a),this.node.addEventListener(e,a.wrapped,n)}dispatchEvent(e){return this.node.dispatchEvent(e)}removeEventListener(e,t,n){if(null===t)return;const r=this.callbacks.get(e);if(void 0===r)return;const a=r.get(t);void 0!==a&&(this.node.removeEventListener(e,a.wrapped,n),r.delete(t),0===r.size&&this.callbacks.delete(e))}}function E(e,t){const n="string"==typeof e?document.querySelector(e):e;if(null===n)throw new Error("Cannot find template: "+e);const r=`return t => t\`${n.innerHTML.trim().split("`").join("\\`")}\``,a=Object.entries(t),s=a.map((e=>e[0])),o=a.map((e=>e[1]));return new Function(...s,r)(...o)}e.LocationHash=y,e.ValueWidget=class extends N{constructor(e,t,n){super(e,t);const a="string"==typeof t?t:"string"==typeof n?n:"change",s=r.Turn.active.field("","value");this._value=s;const o=r.Turn.active.field(NaN,"valueAsNumber");this._valueAsNumber=o,"value"in this.node&&(this.on(a,(()=>this.readValues())),this.readValues(),r.Turn.active._dataflow((()=>{this.valueAsNumber=this._valueAsNumber.value})),r.Turn.active._dataflow((()=>{this.value=this._value.value})))}readValues(){var e,t;const n=this.node;this.suppressCycleWarning(),this._value.value=null!==(e=n.value)&&void 0!==e?e:"",this._valueAsNumber.value=null!==(t=n.valueAsNumber)&&void 0!==t?t:NaN}get value(){return this._value.value}set value(e){this.node.value=e,this._value.value=e}get valueAsNumber(){return this._valueAsNumber.value}set valueAsNumber(e){this.node.value=Number.isNaN(e)?"":""+e,this._valueAsNumber.value=e}suppressCycleWarning(){this._value.suppressCycleWarning(),this._valueAsNumber.suppressCycleWarning()}},e.Widget=N,e.boot=function(e=t.Dataspace.local){!function(e){r.Dataspace._spawn((()=>{r.Turn.activeFacet.actor.name="LocationHashTracker",(e=>{const n=r.Turn.active.field("/","hashValue"),a=()=>{var e=decodeURIComponent(window.location.hash);e.length&&"#"===e[0]&&(e=e.slice(1)),n.value=e||"/"},s=t.Turn.activeFacet,o=()=>s.turn(a);window.addEventListener("hashchange",o),r.Turn.activeFacet.onStop((()=>{window.removeEventListener("hashchange",o)})),a(),r.Turn.active.assertDataflow((()=>({target:e(),assertion:y(n.value)}))),r.Turn.active.assertDataflow((()=>({target:e(),assertion:r.Observe({pattern:r.QuasiValue.finish(r.QuasiValue.ctor(y,r.QuasiValue.bind(r.QuasiValue._))),observer:r.Turn.ref({message:e=>{if(Array.isArray(e)){if("string"!=typeof e[0])return;const t=e[0];window.location.hash=t}}})})})))})((()=>e))}))}(e)},e.template=b,e.templateGenerator=E,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=syndicate-html2.min.js.map

lib/html.d.ts

@@ -11,7 +11,9 @@ export declare function escape(s: string): string;
 export declare class HtmlFragmentInstance {
-    container: ChildNode[];
+    container: ParentNode;
     state: {
         [path: string]: PlaceholderState;
     };
-    constructor(container: ChildNode[]);
+    nodes: ChildNode[];
+    constructor(container: ParentNode);
+    reset(): void;
 }
@@ -18,0 +20,0 @@ export declare class HtmlFragmentBuilder {

lib/html.js

@@ -52,4 +52,4 @@ /// SPDX-License-Identifier: GPL-3.0-or-later
 }
-function followPath(topNodes, path) {
-    let n = topNodes[path[0]];
+function followPath(topNode, path) {
+    let n = topNode.childNodes[path[0]];
     for (let j = 1; j < path.length; j++)
@@ -179,3 +179,7 @@ n = n.childNodes[path[j]];
         this.state = {};
+        this.nodes = Array.from(this.container.childNodes);
     }
+    reset() {
+        this.nodes.forEach(n => this.container.appendChild(n));
+    }
 }
@@ -277,5 +281,6 @@ function makePlaceholder() {
     clone() {
-        return new HtmlFragmentInstance(Array.from(this.template.cloneNode(true).content.childNodes));
+        return new HtmlFragmentInstance(this.template.content.cloneNode(true));
     }
     update(template, variableParts) {
+        template.reset();
         this.placeholderActions.forEach(({ path, action }) => {
@@ -312,5 +317,5 @@ var _a;
         b.update(i, variableParts);
-        return i.container;
+        return Array.from(i.container.childNodes);
     };
 }
 //# sourceMappingURL=html.js.map

package.json

 {
   "name": "@syndicate-lang/html2",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "description": "DOM/HTML UI for Syndicate/JS",
@@ -36,3 +36,3 @@ "homepage": "https://github.com/syndicate-lang/syndicate-js/tree/main/packages/html2",
   },
-  "gitHead": "2d5bc9ba1e8d14fc3d382c8dfe4fb810321508e5"
+  "gitHead": "72ac8edc44072726f727f9627b9d8238ccf98dde"
 }

src/html.ts

@@ -55,4 +55,4 @@ /// SPDX-License-Identifier: GPL-3.0-or-later
 
-function followPath(topNodes: ChildNode[], path: number[]): Node {
-    let n = topNodes[path[0]];
+function followPath(topNode: ParentNode, path: number[]): Node {
+    let n = topNode.childNodes[path[0]];
     for (let j = 1; j < path.length; j++) n = n.childNodes[path[j]];
@@ -180,5 +180,12 @@ return n;
     state: { [path: string]: PlaceholderState } = {};
+    nodes: ChildNode[];
     constructor(
-        public container: ChildNode[],
-    ) {}
+        public container: ParentNode,
+    ) {
+        this.nodes = Array.from(this.container.childNodes);
+    }
+
+    reset() {
+        this.nodes.forEach(n => this.container.appendChild(n));
+    }
 }
@@ -288,7 +295,7 @@
     clone(): HtmlFragmentInstance {
-        return new HtmlFragmentInstance(Array.from(
-            (this.template.cloneNode(true) as HTMLTemplateElement).content.childNodes));
+        return new HtmlFragmentInstance(this.template.content.cloneNode(true) as ParentNode);
     }
 
     update(template: HtmlFragmentInstance, variableParts: Array<HtmlFragment>) {
+        template.reset();
         this.placeholderActions.forEach(({ path, action }) => {
@@ -327,4 +334,4 @@ const state = template.state[path.map(n => '' + n).join('.')] ??= {};
         b.update(i, variableParts);
-        return i.container;
+        return Array.from(i.container.childNodes);
     };
 }

test/html.test.ts

@@ -8,3 +8,3 @@ /// SPDX-License-Identifier: GPL-3.0-or-later
 function compareHTML(nodes: ChildNode[], expected: string) {
-    expect(nodes.map((n: any) => n.outerHTML).join('')).toEqual(expected);
+    expect(nodes.map((n: any) => n.outerHTML ?? n.textContent).join('')).toEqual(expected);
 }
@@ -24,2 +24,7 @@
 
+    it('should substitute a string without surrounding context', () => {
+        const y = 'abc';
+        compareHTML(template()`${y}`, 'abc');
+    });
+
     it('should substitute multiple strings', () => {
@@ -139,3 +144,3 @@ const y = 'abc';
         compareHTML(n2, '<i>1</i>');
-        expect(n1).toBe(n2);
+        expect(n1[0]).toBe(n2[0]);
     });
@@ -152,4 +157,4 @@
         compareHTML(n2, '<i><b>1</b></i>');
-        expect(n1).toBe(n2);
+        expect(n1[0]).toBe(n2[0]);
     });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

331809

increased by0.92%

Lines of code

2566

increased by1.14%

No dependency changes