@syndicate-lang/html2 - npm Package Compare versions

Comparing version 0.34.0 to 0.35.0

dist/syndicate-html2.es6.js

@@ -76,5 +76,19 @@ import * as __SYNDICATE__ from '@syndicate-lang/core';
                         break;
-                    default:
-                        newNode = f;
+                    case 'object':
+                        if (f !== null && 'nodeType' in f) {
+                            newNode = f;
+                            break;
+                        }
+                    /* fall through */
+                    default: {
+                        let info;
+                        try {
+                            info = '' + f;
+                        }
+                        catch (_e) {
+                            info = f.toString();
+                        }
+                        newNode = document.createTextNode(`<ERROR: invalid HtmlFragment: ${info}>`);
                         break;
+                    }
                 }
@@ -234,10 +248,15 @@ (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, node);
     constructor(arg0, data) {
-        var _a, _b;
         this._node = null;
         this.callbacks = new Map();
+        let nodeGenerator;
         if (data === void 0) {
-            this.nodeGenerator = arg0;
+            if (typeof arg0 === 'function') {
+                nodeGenerator = arg0;
+            }
+            else {
+                nodeGenerator = () => [arg0];
+            }
         }
         else {
-            this.nodeGenerator = templateGenerator(arg0, data);
+            nodeGenerator = templateGenerator(arg0, data);
         }
@@ -252,3 +271,3 @@ this.facet = Turn.activeFacet;
         __SYNDICATE__.Turn.active._dataflow(() => {
-            const nodes = this.nodeGenerator(thisTemplate);
+            const nodes = nodeGenerator(thisTemplate);
             if (nodes.length !== 1) {
@@ -264,18 +283,13 @@ throw new Error(`@syndicate-lang/html2: Expected exactly one node from template`);
         });
-        const parentField = __SYNDICATE__.Turn.active.field((_b = (_a = this._node) === null || _a === void 0 ? void 0 : _a.parentNode) !== null && _b !== void 0 ? _b : null, "parentField");
-        this.parentField = parentField;
-        __SYNDICATE__.Turn.active._dataflow(() => {
-            const p = this.parentField.value;
-            if (this.node.parentNode !== p) {
-                if (p === null) {
-                    this.node.remove();
-                }
-                else {
-                    p.appendChild(this.node);
-                }
-            }
-        });
     }
+    get _nodeAsParent() {
+        if (this._node && 'querySelector' in this._node) {
+            return this._node;
+        }
+        else {
+            return null;
+        }
+    }
     get parent() {
-        return this.parentField.value;
+        return this.node.parentNode;
     }
@@ -289,5 +303,25 @@ set parent(p) {
         }
-        this.parentField.value = p;
+        if (this.node.parentNode !== p) {
+            if (p === null) {
+                this.node.remove();
+            }
+            else {
+                p.appendChild(this.node);
+            }
+        }
         return this;
     }
+    querySelector(selector, ctor) {
+        var _a;
+        const e = (_a = this._nodeAsParent) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+        return e ? new (ctor !== null && ctor !== void 0 ? ctor : Widget)(e) : null;
+    }
+    querySelectorAll(selector, ctor) {
+        var _a;
+        const es = (_a = this._nodeAsParent) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selector);
+        const ws = [];
+        if (es)
+            es.forEach(e => ws.push(new (ctor !== null && ctor !== void 0 ? ctor : Widget)(e)));
+        return ws;
+    }
     on(type, callback) {
@@ -353,10 +387,4 @@ this.addEventListener(type, callback);
         if ('value' in this.node) {
-            const readValues = (n) => {
-                var _a, _b;
-                this.suppressCycleWarning();
-                this._value.value = (_a = n === null || n === void 0 ? void 0 : n.value) !== null && _a !== void 0 ? _a : '';
-                this._valueAsNumber.value = (_b = n === null || n === void 0 ? void 0 : n.valueAsNumber) !== null && _b !== void 0 ? _b : NaN;
-            };
-            this.on(triggerEvent, e => readValues(e.target));
-            readValues(this.node);
+            this.on(triggerEvent, () => this.readValues());
+            this.readValues();
             __SYNDICATE__.Turn.active._dataflow(() => { this.valueAsNumber = this._valueAsNumber.value; });
@@ -366,2 +394,9 @@ __SYNDICATE__.Turn.active._dataflow(() => { this.value = this._value.value; });
     }
+    readValues() {
+        var _a, _b;
+        const n = this.node;
+        this.suppressCycleWarning();
+        this._value.value = (_a = n.value) !== null && _a !== void 0 ? _a : '';
+        this._valueAsNumber.value = (_b = n.valueAsNumber) !== null && _b !== void 0 ? _b : NaN;
+    }
     get value() {
@@ -405,5 +440,3 @@ return this._value.value;
             __SYNDICATE__.Turn.active.assertDataflow(() => ({ target: currentSyndicateTarget, assertion: LocationHash(hashValue.value) }));
-            __SYNDICATE__.Turn.active.assertDataflow(() => ({
-                target: currentSyndicateTarget,
-                assertion: __SYNDICATE__.Observe({
+            __SYNDICATE__.Turn.active.assertDataflow(() => ({ target: currentSyndicateTarget, assertion: __SYNDICATE__.Observe({
                     pattern: __SYNDICATE__.QuasiValue.finish((__SYNDICATE__.QuasiValue.ctor(LocationHash, (__SYNDICATE__.QuasiValue.bind((__SYNDICATE__.QuasiValue._)))))),
@@ -420,4 +453,3 @@ observer: __SYNDICATE__.Turn.ref({
                     }),
-                }),
-            }));
+                }) }));
         })(ds));
@@ -424,0 +456,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){return(t,n)=>{var r;!function e(t){var r;if(Array.isArray(t))t.forEach(e);else{let e;switch(typeof t){case"string":e=document.createTextNode(t);break;case"number":e=document.createTextNode(""+t);break;default:e=t}null===(r=n.parentNode)||void 0===r||r.insertBefore(e,n)}}(t[e]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}function u(e){return(t,n)=>{const r=document.createElement("template");r.innerHTML=`<x-dummy ${l(t[e],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((e=>n.setAttribute(e.name,e.value)))}}function h(e,t,n){return(r,a)=>{const s=[t[0]];n.forEach(((e,n)=>{s.push(...l(r[e],!1)),s.push(t[n+1])})),a.setAttribute(e,s.join(""))}}class d{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;if(n>0){const t=document.createElement("x-placeholder");null===(r=e.parentNode)||void 0===r||r.insertBefore(t,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:c(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(u(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(h(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:(e,t)=>n.forEach((n=>n(e,t)))})}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 Array.from(this.template.cloneNode(!0).content.childNodes)}update(e,t){this.placeholderActions.forEach((({path:n,action:r})=>{r(t,function(e,t){let n=e[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}(e,n))}))}}const p=new WeakMap;function v(){let e=null;return(t,...n)=>{let r=p.get(t);return void 0===r&&(r=new d(t),p.set(t,r)),null===e&&(e=r.clone()),r.update(e,n),e}}const f=e.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);function m(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:f(n.value)}))),e.Turn.active.assertDataflow((()=>({target:t,assertion:e.Observe({pattern:e.QuasiValue.finish(e.QuasiValue.ctor(f,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 g{get node(){return this._node}constructor(t,n){var a,s;this._node=null,this.callbacks=new Map,this.nodeGenerator=void 0===n?t:E(t,n),this.facet=r.activeFacet;const o=this.facet.actor.atExit((()=>this.node.remove()));e.Turn.activeFacet.onStop((()=>{this.node.remove(),o()}));const i=v();e.Turn.active._dataflow((()=>{const e=this.nodeGenerator(i);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")}));const l=e.Turn.active.field(null!==(s=null===(a=this._node)||void 0===a?void 0:a.parentNode)&&void 0!==s?s:null,"parentField");this.parentField=l,e.Turn.active._dataflow((()=>{const e=this.parentField.value;this.node.parentNode!==e&&(null===e?this.node.remove():e.appendChild(this.node))}))}get parent(){return this.parentField.value}set parent(e){this.setParent(e)}setParent(e,t=document){return"string"==typeof e&&(e=t.querySelector(e)),this.parentField.value=e,this}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 b extends g{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");if(this._valueAsNumber=o,"value"in this.node){const t=e=>{var t,n;this.suppressCycleWarning(),this._value.value=null!==(t=null==e?void 0:e.value)&&void 0!==t?t:"",this._valueAsNumber.value=null!==(n=null==e?void 0:e.valueAsNumber)&&void 0!==n?n:NaN};this.on(a,(e=>t(e.target))),t(this.node),e.Turn.active._dataflow((()=>{this.valueAsNumber=this._valueAsNumber.value})),e.Turn.active._dataflow((()=>{this.value=this._value.value}))}}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 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)}export{f as LocationHash,b as ValueWidget,g as Widget,m as boot,v as template,E 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){return(t,n)=>{var r;!function e(t){var r;if(Array.isArray(t))t.forEach(e);else{let e;switch(typeof t){case"string":e=document.createTextNode(t);break;case"number":e=document.createTextNode(""+t);break;case"object":if(null!==t&&"nodeType"in t){e=t;break}default:{let n;try{n=""+t}catch(e){n=t.toString()}e=document.createTextNode(`<ERROR: invalid HtmlFragment: ${n}>`);break}}null===(r=n.parentNode)||void 0===r||r.insertBefore(e,n)}}(t[e]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}function u(e){return(t,n)=>{const r=document.createElement("template");r.innerHTML=`<x-dummy ${l(t[e],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((e=>n.setAttribute(e.name,e.value)))}}function h(e,t,n){return(r,a)=>{const s=[t[0]];n.forEach(((e,n)=>{s.push(...l(r[e],!1)),s.push(t[n+1])})),a.setAttribute(e,s.join(""))}}class d{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;if(n>0){const t=document.createElement("x-placeholder");null===(r=e.parentNode)||void 0===r||r.insertBefore(t,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:c(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(u(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(h(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:(e,t)=>n.forEach((n=>n(e,t)))})}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 Array.from(this.template.cloneNode(!0).content.childNodes)}update(e,t){this.placeholderActions.forEach((({path:n,action:r})=>{r(t,function(e,t){let n=e[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}(e,n))}))}}const p=new WeakMap;function v(){let e=null;return(t,...n)=>{let r=p.get(t);return void 0===r&&(r=new d(t),p.set(t,r)),null===e&&(e=r.clone()),r.update(e,n),e}}const f=e.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);function m(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:f(n.value)}))),e.Turn.active.assertDataflow((()=>({target:t,assertion:e.Observe({pattern:e.QuasiValue.finish(e.QuasiValue.ctor(f,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 g{get node(){return this._node}constructor(t,n){let a;this._node=null,this.callbacks=new Map,a=void 0===n?"function"==typeof t?t:()=>[t]:E(t,n),this.facet=r.activeFacet;const s=this.facet.actor.atExit((()=>this.node.remove()));e.Turn.activeFacet.onStop((()=>{this.node.remove(),s()}));const o=v();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:g)(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:g)(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 b extends g{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 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)}export{f as LocationHash,b as ValueWidget,g as Widget,m as boot,v as template,E as templateGenerator};
 //# sourceMappingURL=syndicate-html2.es6.min.js.map

dist/syndicate-html2.js

@@ -99,5 +99,19 @@ (function (global, factory) {
                             break;
-                        default:
-                            newNode = f;
+                        case 'object':
+                            if (f !== null && 'nodeType' in f) {
+                                newNode = f;
+                                break;
+                            }
+                        /* fall through */
+                        default: {
+                            let info;
+                            try {
+                                info = '' + f;
+                            }
+                            catch (_e) {
+                                info = f.toString();
+                            }
+                            newNode = document.createTextNode(`<ERROR: invalid HtmlFragment: ${info}>`);
                             break;
+                        }
                     }
@@ -257,10 +271,15 @@ (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, node);
         constructor(arg0, data) {
-            var _a, _b;
             this._node = null;
             this.callbacks = new Map();
+            let nodeGenerator;
             if (data === void 0) {
-                this.nodeGenerator = arg0;
+                if (typeof arg0 === 'function') {
+                    nodeGenerator = arg0;
+                }
+                else {
+                    nodeGenerator = () => [arg0];
+                }
             }
             else {
-                this.nodeGenerator = templateGenerator(arg0, data);
+                nodeGenerator = templateGenerator(arg0, data);
             }
@@ -275,3 +294,3 @@ this.facet = __SYNDICATE__.Turn.activeFacet;
             __SYNDICATE____namespace.Turn.active._dataflow(() => {
-                const nodes = this.nodeGenerator(thisTemplate);
+                const nodes = nodeGenerator(thisTemplate);
                 if (nodes.length !== 1) {
@@ -287,18 +306,13 @@ throw new Error(`@syndicate-lang/html2: Expected exactly one node from template`);
             });
-            const parentField = __SYNDICATE____namespace.Turn.active.field((_b = (_a = this._node) === null || _a === void 0 ? void 0 : _a.parentNode) !== null && _b !== void 0 ? _b : null, "parentField");
-            this.parentField = parentField;
-            __SYNDICATE____namespace.Turn.active._dataflow(() => {
-                const p = this.parentField.value;
-                if (this.node.parentNode !== p) {
-                    if (p === null) {
-                        this.node.remove();
-                    }
-                    else {
-                        p.appendChild(this.node);
-                    }
-                }
-            });
         }
+        get _nodeAsParent() {
+            if (this._node && 'querySelector' in this._node) {
+                return this._node;
+            }
+            else {
+                return null;
+            }
+        }
         get parent() {
-            return this.parentField.value;
+            return this.node.parentNode;
         }
@@ -312,5 +326,25 @@ set parent(p) {
             }
-            this.parentField.value = p;
+            if (this.node.parentNode !== p) {
+                if (p === null) {
+                    this.node.remove();
+                }
+                else {
+                    p.appendChild(this.node);
+                }
+            }
             return this;
         }
+        querySelector(selector, ctor) {
+            var _a;
+            const e = (_a = this._nodeAsParent) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+            return e ? new (ctor !== null && ctor !== void 0 ? ctor : Widget)(e) : null;
+        }
+        querySelectorAll(selector, ctor) {
+            var _a;
+            const es = (_a = this._nodeAsParent) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selector);
+            const ws = [];
+            if (es)
+                es.forEach(e => ws.push(new (ctor !== null && ctor !== void 0 ? ctor : Widget)(e)));
+            return ws;
+        }
         on(type, callback) {
@@ -376,10 +410,4 @@ this.addEventListener(type, callback);
             if ('value' in this.node) {
-                const readValues = (n) => {
-                    var _a, _b;
-                    this.suppressCycleWarning();
-                    this._value.value = (_a = n === null || n === void 0 ? void 0 : n.value) !== null && _a !== void 0 ? _a : '';
-                    this._valueAsNumber.value = (_b = n === null || n === void 0 ? void 0 : n.valueAsNumber) !== null && _b !== void 0 ? _b : NaN;
-                };
-                this.on(triggerEvent, e => readValues(e.target));
-                readValues(this.node);
+                this.on(triggerEvent, () => this.readValues());
+                this.readValues();
                 __SYNDICATE____namespace.Turn.active._dataflow(() => { this.valueAsNumber = this._valueAsNumber.value; });
@@ -389,2 +417,9 @@ __SYNDICATE____namespace.Turn.active._dataflow(() => { this.value = this._value.value; });
         }
+        readValues() {
+            var _a, _b;
+            const n = this.node;
+            this.suppressCycleWarning();
+            this._value.value = (_a = n.value) !== null && _a !== void 0 ? _a : '';
+            this._valueAsNumber.value = (_b = n.valueAsNumber) !== null && _b !== void 0 ? _b : NaN;
+        }
         get value() {
@@ -428,5 +463,3 @@ return this._value.value;
                 __SYNDICATE____namespace.Turn.active.assertDataflow(() => ({ target: currentSyndicateTarget, assertion: LocationHash(hashValue.value) }));
-                __SYNDICATE____namespace.Turn.active.assertDataflow(() => ({
-                    target: currentSyndicateTarget,
-                    assertion: __SYNDICATE____namespace.Observe({
+                __SYNDICATE____namespace.Turn.active.assertDataflow(() => ({ target: currentSyndicateTarget, assertion: __SYNDICATE____namespace.Observe({
                         pattern: __SYNDICATE____namespace.QuasiValue.finish((__SYNDICATE____namespace.QuasiValue.ctor(LocationHash, (__SYNDICATE____namespace.QuasiValue.bind((__SYNDICATE____namespace.QuasiValue._)))))),
@@ -443,4 +476,3 @@ observer: __SYNDICATE____namespace.Turn.ref({
                         }),
-                    }),
-                }));
+                    }) }));
             })(ds));
@@ -447,0 +479,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 u(e){return(t,n)=>{var r;!function e(t){var r;if(Array.isArray(t))t.forEach(e);else{let e;switch(typeof t){case"string":e=document.createTextNode(t);break;case"number":e=document.createTextNode(""+t);break;default:e=t}null===(r=n.parentNode)||void 0===r||r.insertBefore(e,n)}}(t[e]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}function c(e){return(t,n)=>{const r=document.createElement("template");r.innerHTML=`<x-dummy ${l(t[e],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((e=>n.setAttribute(e.name,e.value)))}}function d(e,t,n){return(r,a)=>{const s=[t[0]];n.forEach(((e,n)=>{s.push(...l(r[e],!1)),s.push(t[n+1])})),a.setAttribute(e,s.join(""))}}class h{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;if(n>0){const t=document.createElement("x-placeholder");null===(r=e.parentNode)||void 0===r||r.insertBefore(t,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: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(c(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(d(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:(e,t)=>n.forEach((n=>n(e,t)))})}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 Array.from(this.template.cloneNode(!0).content.childNodes)}update(e,t){this.placeholderActions.forEach((({path:n,action:r})=>{r(t,function(e,t){let n=e[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}(e,n))}))}}const p=new WeakMap;function v(){let e=null;return(t,...n)=>{let r=p.get(t);return void 0===r&&(r=new h(t),p.set(t,r)),null===e&&(e=r.clone()),r.update(e,n),e}}const f=r.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);class m{get node(){return this._node}constructor(e,n){var a,s;this._node=null,this.callbacks=new Map,this.nodeGenerator=void 0===n?e:g(e,n),this.facet=t.Turn.activeFacet;const o=this.facet.actor.atExit((()=>this.node.remove()));r.Turn.activeFacet.onStop((()=>{this.node.remove(),o()}));const i=v();r.Turn.active._dataflow((()=>{const e=this.nodeGenerator(i);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")}));const l=r.Turn.active.field(null!==(s=null===(a=this._node)||void 0===a?void 0:a.parentNode)&&void 0!==s?s:null,"parentField");this.parentField=l,r.Turn.active._dataflow((()=>{const e=this.parentField.value;this.node.parentNode!==e&&(null===e?this.node.remove():e.appendChild(this.node))}))}get parent(){return this.parentField.value}set parent(e){this.setParent(e)}setParent(e,t=document){return"string"==typeof e&&(e=t.querySelector(e)),this.parentField.value=e,this}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 g(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=f,e.ValueWidget=class extends m{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");if(this._valueAsNumber=o,"value"in this.node){const e=e=>{var t,n;this.suppressCycleWarning(),this._value.value=null!==(t=null==e?void 0:e.value)&&void 0!==t?t:"",this._valueAsNumber.value=null!==(n=null==e?void 0:e.valueAsNumber)&&void 0!==n?n:NaN};this.on(a,(t=>e(t.target))),e(this.node),r.Turn.active._dataflow((()=>{this.valueAsNumber=this._valueAsNumber.value})),r.Turn.active._dataflow((()=>{this.value=this._value.value}))}}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=m,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:f(n.value)}))),r.Turn.active.assertDataflow((()=>({target:e,assertion:r.Observe({pattern:r.QuasiValue.finish(r.QuasiValue.ctor(f,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=v,e.templateGenerator=g,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),o=new RegExp(`x-${a}-(\\d+)-${a}-x`),s=new RegExp(`x-${a}-(\\d+)-${a}-x`,"g");function i(e){let t=null,n=0;const r=[],a=[];for(;null!==(t=s.exec(e));)r.push(e.substring(n,t.index)),a.push(parseInt(t[1],10)),n=s.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 u(e){return(t,n)=>{var r;!function e(t){var r;if(Array.isArray(t))t.forEach(e);else{let e;switch(typeof t){case"string":e=document.createTextNode(t);break;case"number":e=document.createTextNode(""+t);break;case"object":if(null!==t&&"nodeType"in t){e=t;break}default:{let n;try{n=""+t}catch(e){n=t.toString()}e=document.createTextNode(`<ERROR: invalid HtmlFragment: ${n}>`);break}}null===(r=n.parentNode)||void 0===r||r.insertBefore(e,n)}}(t[e]),null===(r=n.parentNode)||void 0===r||r.removeChild(n)}}function c(e){return(t,n)=>{const r=document.createElement("template");r.innerHTML=`<x-dummy ${l(t[e],!1).join("")}></x-dummy>`,Array.from(r.content.firstElementChild.attributes).forEach((e=>n.setAttribute(e.name,e.value)))}}function d(e,t,n){return(r,a)=>{const o=[t[0]];n.forEach(((e,n)=>{o.push(...l(r[e],!1)),o.push(t[n+1])})),a.setAttribute(e,o.join(""))}}class h{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:o}=i(null!==(n=e.textContent)&&void 0!==n?n:"");a.forEach(((t,n)=>{var r,a;if(n>0){const t=document.createElement("x-placeholder");null===(r=e.parentNode)||void 0===r||r.insertBefore(t,e)}null===(a=e.parentNode)||void 0===a||a.insertBefore(document.createTextNode(t),e)}));const s=e.nextSibling;return null===(r=e.parentNode)||void 0===r||r.removeChild(e),o.forEach(((e,n)=>{const r=t.slice();r[r.length-1]=2*n+1,this.placeholderActions.push({path:r,action:u(e)})})),t[t.length-1]+=a.length+o.length,s}indexElement(e,t){const n=[];for(let t=0;t<e.attributes.length;t++){const r=e.attributes[t],a=r.name,s=a.match(o);if(null!==s){e.removeAttributeNode(r),t--;const a=parseInt(s[1],10);n.push(c(a))}else{const{constantParts:e,placeholders:t}=i(r.value);1!==e.length&&n.push(d(a,e,t))}}n.length&&this.placeholderActions.push({path:t.slice(),action:(e,t)=>n.forEach((n=>n(e,t)))})}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 Array.from(this.template.cloneNode(!0).content.childNodes)}update(e,t){this.placeholderActions.forEach((({path:n,action:r})=>{r(t,function(e,t){let n=e[t[0]];for(let e=1;e<t.length;e++)n=n.childNodes[t[e]];return n}(e,n))}))}}const p=new WeakMap;function f(){let e=null;return(t,...n)=>{let r=p.get(t);return void 0===r&&(r=new h(t),p.set(t,r)),null===e&&(e=r.clone()),r.update(e,n),e}}const v=r.Record.makeConstructor()(Symbol.for("LocationHash"),["hash"]);class m{get node(){return this._node}constructor(e,n){let a;this._node=null,this.callbacks=new Map,a=void 0===n?"function"==typeof e?e:()=>[e]:g(e,n),this.facet=t.Turn.activeFacet;const o=this.facet.actor.atExit((()=>this.node.remove()));r.Turn.activeFacet.onStop((()=>{this.node.remove(),o()}));const s=f();r.Turn.active._dataflow((()=>{const e=a(s);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:m)(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:m)(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 g(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),o=a.map((e=>e[0])),s=a.map((e=>e[1]));return new Function(...o,r)(...s)}e.LocationHash=v,e.ValueWidget=class extends m{constructor(e,t,n){super(e,t);const a="string"==typeof t?t:"string"==typeof n?n:"change",o=r.Turn.active.field("","value");this._value=o;const s=r.Turn.active.field(NaN,"valueAsNumber");this._valueAsNumber=s,"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=m,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||"/"},o=t.Turn.activeFacet,s=()=>o.turn(a);window.addEventListener("hashchange",s),r.Turn.activeFacet.onStop((()=>{window.removeEventListener("hashchange",s)})),a(),r.Turn.active.assertDataflow((()=>({target:e,assertion:v(n.value)}))),r.Turn.active.assertDataflow((()=>({target:e,assertion:r.Observe({pattern:r.QuasiValue.finish(r.QuasiValue.ctor(v,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=f,e.templateGenerator=g,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=syndicate-html2.min.js.map

lib/html.js

@@ -75,5 +75,19 @@ /// SPDX-License-Identifier: GPL-3.0-or-later
                         break;
-                    default:
-                        newNode = f;
+                    case 'object':
+                        if (f !== null && 'nodeType' in f) {
+                            newNode = f;
+                            break;
+                        }
+                    /* fall through */
+                    default: {
+                        let info;
+                        try {
+                            info = '' + f;
+                        }
+                        catch (_e) {
+                            info = f.toString();
+                        }
+                        newNode = document.createTextNode(`<ERROR: invalid HtmlFragment: ${info}>`);
                         break;
+                    }
                 }
@@ -80,0 +94,0 @@ (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, node);

lib/index.d.ts

@@ -16,13 +16,21 @@ import * as __SYNDICATE__ from "@syndicate-lang/core";
 export declare class Widget implements EventTarget {
-    readonly nodeGenerator: NodeGenerator;
     readonly facet: Facet;
     private _node;
-    parentField: Dataflow.Field<ParentNode | null>;
     callbacks: Map<string, Map<EventListenerOrEventListenerObject, Wrapped>>;
     get node(): ChildNode;
+    constructor(node: ChildNode);
     constructor(nodeGenerator: NodeGenerator);
     constructor(template: string | HTMLTemplateElement, data: object);
+    get _nodeAsParent(): ParentNode | null;
     get parent(): ParentNode | null;
     set parent(p: string | ParentNode | null);
     setParent(p: string | ParentNode | null, wrt?: ParentNode): this;
+    querySelector(selector: string): Widget | null;
+    querySelector<T extends Widget>(selector: string, ctor: {
+        new (e: Element): T;
+    }): T | null;
+    querySelectorAll(selector: string): Widget[];
+    querySelectorAll<T extends Widget>(selector: string, ctor: {
+        new (e: Element): T;
+    }): T[];
     on(type: string, callback: EventListenerOrEventListenerObject): this;
@@ -40,2 +48,3 @@ once(type: string, callback: EventListenerOrEventListenerObject): this;
     constructor(template: string | HTMLTemplateElement, data: object, triggerEvent?: 'change' | 'input');
+    readValues(): void;
     get value(): string;
@@ -42,0 +51,0 @@ set value(v: string);

lib/index.js

@@ -16,10 +16,15 @@ import * as __SYNDICATE__ from "@syndicate-lang/core";
     constructor(arg0, data) {
-        var _a, _b;
         this._node = null;
         this.callbacks = new Map();
+        let nodeGenerator;
         if (data === void 0) {
-            this.nodeGenerator = arg0;
+            if (typeof arg0 === 'function') {
+                nodeGenerator = arg0;
+            }
+            else {
+                nodeGenerator = () => [arg0];
+            }
         }
         else {
-            this.nodeGenerator = templateGenerator(arg0, data);
+            nodeGenerator = templateGenerator(arg0, data);
         }
@@ -34,3 +39,3 @@ this.facet = Turn.activeFacet;
         __SYNDICATE__.Turn.active._dataflow(() => {
-            const nodes = this.nodeGenerator(thisTemplate);
+            const nodes = nodeGenerator(thisTemplate);
             if (nodes.length !== 1) {
@@ -46,18 +51,13 @@ throw new Error(`@syndicate-lang/html2: Expected exactly one node from template`);
         });
-        const parentField = __SYNDICATE__.Turn.active.field((_b = (_a = this._node) === null || _a === void 0 ? void 0 : _a.parentNode) !== null && _b !== void 0 ? _b : null, "parentField");
-        this.parentField = parentField;
-        __SYNDICATE__.Turn.active._dataflow(() => {
-            const p = this.parentField.value;
-            if (this.node.parentNode !== p) {
-                if (p === null) {
-                    this.node.remove();
-                }
-                else {
-                    p.appendChild(this.node);
-                }
-            }
-        });
     }
+    get _nodeAsParent() {
+        if (this._node && 'querySelector' in this._node) {
+            return this._node;
+        }
+        else {
+            return null;
+        }
+    }
     get parent() {
-        return this.parentField.value;
+        return this.node.parentNode;
     }
@@ -71,5 +71,25 @@ set parent(p) {
         }
-        this.parentField.value = p;
+        if (this.node.parentNode !== p) {
+            if (p === null) {
+                this.node.remove();
+            }
+            else {
+                p.appendChild(this.node);
+            }
+        }
         return this;
     }
+    querySelector(selector, ctor) {
+        var _a;
+        const e = (_a = this._nodeAsParent) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+        return e ? new (ctor !== null && ctor !== void 0 ? ctor : Widget)(e) : null;
+    }
+    querySelectorAll(selector, ctor) {
+        var _a;
+        const es = (_a = this._nodeAsParent) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selector);
+        const ws = [];
+        if (es)
+            es.forEach(e => ws.push(new (ctor !== null && ctor !== void 0 ? ctor : Widget)(e)));
+        return ws;
+    }
     on(type, callback) {
@@ -135,10 +155,4 @@ this.addEventListener(type, callback);
         if ('value' in this.node) {
-            const readValues = (n) => {
-                var _a, _b;
-                this.suppressCycleWarning();
-                this._value.value = (_a = n === null || n === void 0 ? void 0 : n.value) !== null && _a !== void 0 ? _a : '';
-                this._valueAsNumber.value = (_b = n === null || n === void 0 ? void 0 : n.valueAsNumber) !== null && _b !== void 0 ? _b : NaN;
-            };
-            this.on(triggerEvent, e => readValues(e.target));
-            readValues(this.node);
+            this.on(triggerEvent, () => this.readValues());
+            this.readValues();
             __SYNDICATE__.Turn.active._dataflow(() => { this.valueAsNumber = this._valueAsNumber.value; });
@@ -148,2 +162,9 @@ __SYNDICATE__.Turn.active._dataflow(() => { this.value = this._value.value; });
     }
+    readValues() {
+        var _a, _b;
+        const n = this.node;
+        this.suppressCycleWarning();
+        this._value.value = (_a = n.value) !== null && _a !== void 0 ? _a : '';
+        this._valueAsNumber.value = (_b = n.valueAsNumber) !== null && _b !== void 0 ? _b : NaN;
+    }
     get value() {
@@ -187,5 +208,3 @@ return this._value.value;
             __SYNDICATE__.Turn.active.assertDataflow(() => ({ target: currentSyndicateTarget, assertion: LocationHash(hashValue.value) }));
-            __SYNDICATE__.Turn.active.assertDataflow(() => ({
-                target: currentSyndicateTarget,
-                assertion: __SYNDICATE__.Observe({
+            __SYNDICATE__.Turn.active.assertDataflow(() => ({ target: currentSyndicateTarget, assertion: __SYNDICATE__.Observe({
                     pattern: __SYNDICATE__.QuasiValue.finish((__SYNDICATE__.QuasiValue.ctor(LocationHash, (__SYNDICATE__.QuasiValue.bind((__SYNDICATE__.QuasiValue._)))))),
@@ -202,4 +221,3 @@ observer: __SYNDICATE__.Turn.ref({
                     }),
-                }),
-            }));
+                }) }));
         })(ds));
@@ -206,0 +224,0 @@ });

package.json

 {
   "name": "@syndicate-lang/html2",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "DOM/HTML UI for Syndicate/JS",
@@ -28,9 +28,9 @@ "homepage": "https://github.com/syndicate-lang/syndicate-js/tree/main/packages/html2",
   "dependencies": {
-    "@syndicate-lang/core": "^0.33.0"
+    "@syndicate-lang/core": "^0.34.0"
   },
   "devDependencies": {
-    "@syndicate-lang/ts-plugin": "^0.35.0",
-    "@syndicate-lang/tsc": "^0.35.0"
+    "@syndicate-lang/ts-plugin": "^0.36.0",
+    "@syndicate-lang/tsc": "^0.36.0"
   },
-  "gitHead": "4b5eccad246037496068e827bfa7f8541acaef5a"
+  "gitHead": "e3d419deabc5c96f1ecad6660801c4766cf452fe"
 }

src/html.ts

@@ -73,3 +73,18 @@ /// SPDX-License-Identifier: GPL-3.0-or-later
                     case 'number': newNode = document.createTextNode('' + f); break;
-                    default: newNode = f; break;
+                    case 'object':
+                        if (f !== null && 'nodeType' in f) {
+                            newNode = f;
+                            break;
+                        }
+                        /* fall through */
+                    default: {
+                        let info;
+                        try {
+                            info = '' + f;
+                        } catch (_e) {
+                            info = (f as any).toString();
+                        }
+                        newNode = document.createTextNode(`<ERROR: invalid HtmlFragment: ${info}>`);
+                        break;
+                    }
                 }
@@ -76,0 +91,0 @@ node.parentNode?.insertBefore(newNode, node);

src/index.ts

@@ -23,6 +23,4 @@ /// SPDX-License-Identifier: GPL-3.0-or-later
 export class Widget implements EventTarget {
-    readonly nodeGenerator: NodeGenerator;
     readonly facet: Facet;
     private _node: ChildNode | null = null;
-    parentField: Dataflow.Field<ParentNode | null>;
     callbacks = new Map<string, Map<EventListenerOrEventListenerObject, Wrapped>>();
@@ -34,9 +32,16 @@
 
+    constructor (node: ChildNode);
     constructor (nodeGenerator: NodeGenerator);
     constructor (template: string | HTMLTemplateElement, data: object);
-    constructor (arg0: NodeGenerator | string | HTMLTemplateElement, data?: object) {
+    constructor (arg0: ChildNode | NodeGenerator | string | HTMLTemplateElement, data?: object) {
+        let nodeGenerator: NodeGenerator;
+
         if (data === void 0) {
-            this.nodeGenerator = arg0 as NodeGenerator;
+            if (typeof arg0 === 'function') {
+                nodeGenerator = arg0 as NodeGenerator;
+            } else {
+                nodeGenerator = () => [arg0 as ChildNode];
+            }
         } else {
-            this.nodeGenerator = templateGenerator(arg0 as (string | HTMLTemplateElement), data);
+            nodeGenerator = templateGenerator(arg0 as (string | HTMLTemplateElement), data);
         }
@@ -54,3 +59,3 @@
         dataflow {
-            const nodes = this.nodeGenerator(thisTemplate);
+            const nodes = nodeGenerator(thisTemplate);
             if (nodes.length !== 1) {
@@ -65,15 +70,9 @@ throw new Error(`@syndicate-lang/html2: Expected exactly one node from template`);
         }
+    }
 
-        field parentField: ParentNode | null = this._node?.parentNode ?? null;
-        this.parentField = parentField;
-
-        dataflow {
-            const p = this.parentField.value;
-            if (this.node.parentNode !== p) {
-                if (p === null) {
-                    this.node.remove();
-                } else {
-                    p.appendChild(this.node);
-                }
-            }
+    get _nodeAsParent(): ParentNode | null {
+        if (this._node && 'querySelector' in this._node) {
+            return this._node as unknown as ParentNode;
+        } else {
+            return null;
         }
@@ -83,3 +82,3 @@ }
     get parent(): ParentNode | null {
-        return this.parentField.value;
+        return this.node.parentNode;
     }
@@ -95,6 +94,30 @@
         }
-        this.parentField.value = p;
+
+        if (this.node.parentNode !== p) {
+            if (p === null) {
+                this.node.remove();
+            } else {
+                p.appendChild(this.node);
+            }
+        }
+
         return this;
     }
 
+    querySelector(selector: string): Widget | null;
+    querySelector<T extends Widget>(selector: string, ctor: { new(e: Element): T }): T | null;
+    querySelector<T extends Widget>(selector: string, ctor?: { new(e: Element): T }): Widget | null {
+        const e = this._nodeAsParent?.querySelector(selector);
+        return e ? new (ctor ?? Widget)(e) : null;
+    }
+
+    querySelectorAll(selector: string): Widget[];
+    querySelectorAll<T extends Widget>(selector: string, ctor: { new(e: Element): T }): T[];
+    querySelectorAll<T extends Widget>(selector: string, ctor?: { new(e: Element): T }): Widget[] {
+        const es = this._nodeAsParent?.querySelectorAll(selector);
+        const ws: Widget[] = [];
+        if (es) es.forEach(e => ws.push(new (ctor ?? Widget)(e)));
+        return ws;
+    }
+
     on(type: string, callback: EventListenerOrEventListenerObject): this {
@@ -182,11 +205,5 @@ this.addEventListener(type, callback);
         if ('value' in this.node) {
-            const readValues = (n: any) => {
-                this.suppressCycleWarning();
-                this._value.value = n?.value ?? '';
-                this._valueAsNumber.value = n?.valueAsNumber ?? NaN;
-            };
+            this.on(triggerEvent, () => this.readValues());
+            this.readValues();
 
-            this.on(triggerEvent, e => readValues(e.target));
-            readValues(this.node);
-
             dataflow { this.valueAsNumber = this._valueAsNumber.value; }
@@ -197,2 +214,9 @@ dataflow { this.value = this._value.value; }
 
+    readValues() {
+        const n = this.node as any;
+        this.suppressCycleWarning();
+        this._value.value = n.value ?? '';
+        this._valueAsNumber.value = n.valueAsNumber ?? NaN;
+    }
+
     get value(): string {
@@ -199,0 +223,0 @@ return this._value.value;

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

281474

increased by5.55%

Lines of code

2034

increased by7.51%

Dependency changes

• + Added@preserves/core@0.996.0(transitive)

• + Added@syndicate-lang/core@0.34.9(transitive)

• - Removed@preserves/core@0.995.200(transitive)

• - Removed@syndicate-lang/core@0.33.0(transitive)

• Updated@syndicate-lang/core@^0.34.0