mi-element 0.9.6 → 0.9.7

package/dist/bundle.js

@@ -1,6 +1,6 @@
 /*!
  * SPDX-License-Identifier: MIT
- * mi-element v0.9.6
+ * mi-element v0.9.7
  */
 const context = [];
 
@@ -349,7 +349,7 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
     const key = globalRenderCache.set(any);
     return unsafeHtml(key);
   }
-  return unsafeHtml(esc('' + any));
+  return unsafeHtml(esc('' + (any ?? '')));
 }, html = (strings, ...values) => unsafeHtml(String.raw({
   raw: strings
 }, ...values.map(val => Array.isArray(val) ? val.map(escValue).join('') : escValue(val))));

package/dist/bundle.min.js

@@ -1,5 +1,5 @@
 /*!
  * SPDX-License-Identifier: MIT
- * mi-element v0.9.6
+ * mi-element v0.9.7
  */
-const t=[];class e extends EventTarget{#t;#e;constructor(t,e){super();const{equals:s}=e||{};this.#t=t,this.#e=s??((t,e)=>t===e)}get value(){return this.get()}set value(t){this.set(t)}get(){const e=t[t.length-1];return e&&e.add(this),this.#t}set(t){this.#e(this.#t,t)||(this.#t=t,this.dispatchEvent(new CustomEvent("signal")))}}const s=(t,s)=>t instanceof e?t:new e(t,s);function n(e){const s=new Set;t.push(s);try{e()}finally{t.pop()}for(const t of s)t.addEventListener("signal",e);return()=>{for(const t of s)t.removeEventListener("signal",e)}}var r={State:e,Computed:class{#s;#n;constructor(t){this.#s=new e,this.#n=n(()=>this.#s.set(t()))}get(){return this.#s.get()}unsubscribe(){this.#n()}},createSignal:s,effect:n};const o="context-request";class i{constructor(t,e,n){this.host=t,this.context=e,this.state=s(n),this.host.addController?.(this)}hostConnected(){this.host.addEventListener(o,this.onContextRequest)}hostDisconnected(){this.host.removeEventListener(o,this.onContextRequest)}set(t){this.state.set(t)}get(){return this.state.get()}set value(t){this.set(t)}get value(){return this.get()}onContextRequest=t=>{if(t.context!==this.context)return;let e;t.stopPropagation(),t.subscribe&&(e=n(()=>{const s=this.get();e&&t.callback(s,e)})),t.callback(this.get(),e)}}class c extends Event{constructor(t,e,s){super(o,{bubbles:!0,composed:!0}),this.context=t,this.callback=e,this.subscribe=s}}class a{#t;constructor(t,e,s){const{subscribe:n=!1,validate:r=()=>!0}=s||{};this.host=t,this.context=e,this.subscribe=!!n,this.validate=r,this.unsubscribe=void 0,this.host.addController?.(this)}get(){return this.#t}get value(){return this.#t}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new c(this.context,this._callback.bind(this),this.subscribe))}_callback(t,e){e&&(this.subscribe?this.unsubscribe&&(this.unsubscribe!==e&&this.unsubscribe(),this.unsubscribe=e):e()),this.validate(t)&&(this.#t=t,this.host.requestUpdate(t))}}const h=(t="")=>t.replace(/([A-Z])/g,(t,e)=>`-${e.toLowerCase()}`),l=(t="")=>t.toLowerCase().replace(/[-_]\w/g,t=>t[1].toUpperCase()),u=(...t)=>{const e=[];return t.forEach(t=>{t&&("string"==typeof t?e.push(t):"object"==typeof t&&Object.entries(t).forEach(([t,s])=>{s&&e.push(t)}))}),e.join(" ")},d=(t,e)=>{const{unit:s="px"}=e||{},n=[];for(const[e,r]of Object.entries(t??{})){if(null==r)continue;const t=Number.isFinite(r)?s:"";n.push(`${h(e)}:${r}${t}`)}return n.join(";")};let p=null;function f(t){t.adoptedStyleSheets.push(...(null===p&&(p=Array.from(document.styleSheets).map(({cssRules:t})=>{const e=new CSSStyleSheet,s=Array.from(t).map(t=>t.cssText).join(" ");return e.replaceSync(s),e})),p))}class b extends String{}const g=t=>new b(t),m={"&":"\\26 ","<":"\\3c ",">":"\\3e "},v=t=>t instanceof b?t:g((t=>t.replace(/[&<>]/g,t=>m[t]))(""+t)),y=(t,...e)=>String.raw({raw:t},...e.map(v));function w(t,e){const s={};for(const[n,r]of Object.entries(e))s[n]=t.querySelector?.(r);return s}const E=t=>{try{return JSON.parse(t)}catch{return}},S={class:"className",for:"htmlFor"};class C extends HTMLElement{_props={};#r={};#o=new Set;#i=new Set;#c=!1;static get shadowRootInit(){return{mode:"open"}}static template;static get properties(){}static observedAttributes=[];static styles="";static get useGlobalStyles(){return!1}static createSignal=s;constructor(){super();const{createSignal:t,properties:e}=this.constructor;for(const[s,{initial:n}]of Object.entries(e)){const e=Object.getOwnPropertyDescriptor(this.constructor.prototype,s);t&&(this._props[s]=t()),Object.defineProperty(this,s,{get(){return e?.get?e.get.call(this):t?this._props[s].value:this._props[s]},set(n){const r=this[s];e?.set?e.set.call(this,n):t?this._props[s].value=n:this._props[s]=n,r!==this[s]&&this.requestUpdate({[s]:n})}}),this[s]=n}}connectedCallback(){const{shadowRootInit:t,useGlobalStyles:e,template:s}=this.constructor;this.#i.forEach(t=>t.hostConnected?.()),this.renderRoot=t?this.shadowRoot??this.attachShadow(t):this,this.addTemplate(s),e&&f(this.renderRoot),this.render(),this.requestUpdate()}disconnectedCallback(){this.#o.forEach(t=>t()),this.#i.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const n=S[t]??l(t),r=this.constructor?.properties,{type:o}=r?.[n]??{},i=A(s,o);if(t.startsWith("data-")){const e=l(t.substring(5));e&&(this.dataset[e]=i)}this[n]=i}requestUpdate(t){this.#r={...this.#r,...t},!this.#c&&this.renderRoot&&(this.#c=!0,window.requestAnimationFrame(()=>{this.#c=!1;const t=this.#r;this.#r={},this.update(t)}))}addTemplate(t){if(t){if(!(t instanceof HTMLTemplateElement))throw new Error("template is not a HTMLTemplateElement");this.renderRoot.append(t.content.cloneNode(!0))}}render(){}update(t){}on(t,e,s=this){s.addEventListener(t,e),this.#o.add(()=>s.removeEventListener(t,e))}once(t,e,s=this){s.addEventListener(t,e,{once:!0})}dispose(...t){for(const e of t){if("function"!=typeof e)throw new TypeError("listener must be a function");this.#o.add(e)}}addController(t){this.#i.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.#i.delete(t)}refsBySelector(t){return w(this.renderRoot,t)}}const q=(t,e,s)=>{if(customElements.get(t))return;const{usedCssPrefix:n="",cssPrefix:r="",styles:o}=s||{};if(e.properties){const t=[];for(const[s,{attribute:n=!0}]of Object.entries(e.properties))n&&t.push(h(s));Object.defineProperty(e,"observedAttributes",{get:()=>t})}else if(e.observedAttributes){const t=e.observedAttributes.reduce((t,e)=>(t[l(e)]={},t),{});Object.defineProperty(e,"properties",{get:()=>t})}e.styles&&(e.styles=o||(n===r?e.styles:e.styles.replaceAll(`--${n}-`,r))),x(e),window.customElements.define(t,e)},x=t=>{if(!t.template||t.template instanceof HTMLTemplateElement)return;const e=document.createElement("template");e.innerHTML=t.template||"",t.template=e},A=(t,e)=>e===Boolean?null!==t:e===Number?(t=>{const e=Number(t);return isNaN(e)?0:e})(t):e===Array?E(t)??t.split(",").map(t=>t.trim()):e===Object?E(t):t,j=new class{cnt=0;cache=new Map;last=0;get size(){return this.cache.size}_inc(){return this.cnt=268435455&++this.cnt,this.cnt}clear(){this.cnt=0,this.cache.clear()}set(t){const e=Date.now();this.last<e&&this.cache.clear(),this.last=e+5e3;const s="__rc:"+this._inc().toString(36);return this.cache.set(s,t),s}get(t){const e=this.cache.get(t);return this.cache.delete(t),e}};class L extends String{}const R=t=>new L(t),T={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},O=/[&<>"']/g,_=t=>t.replace(O,t=>T[t]),N=t=>t instanceof L?t:R(_(""+t)),P="object",k="function",M=t=>{if(t instanceof L)return t;const e=typeof t;if(e===P||e===k){const e=j.set(t);return R(e)}return R(_(""+t))},D=(t,...e)=>R(String.raw({raw:t},...e.map(t=>Array.isArray(t)?t.map(M).join(""):M(t))));function H(t,e,s={}){const n={};t.innerHTML=e.toString();for(let e=0,r=t.children.length;e<r;e++)F(t.children[e],s,n);return n}const U="ref",$="[ref]";function F(t,e={},s={}){if(t.nodeType===Node.ELEMENT_NODE){const n=[],r=t.attributes;for(let o=0,i=r.length;o<i;o++){const i=r[o],c=i.name,a=c.charCodeAt(0),h=c.slice(1);let l=0;if(63===a)E(i.value)?t.setAttribute(h,""):t.removeAttribute(h),l=1;else if("..."===i.name){const e=j.get(i.value);if(e&&typeof e===P)for(const[s,n]of Object.entries(e))t[s]=n;l=1}else if(46===a)t[h]=j.get(i.value)??i.value,l=1;else if(64===a){const s=i.value,n=j.get(s);n?t.addEventListener(h,n):typeof e[s]===k&&t.addEventListener(h,e[s]),l=1}else i.name===U&&(s[i.value]=t,l=1);l&&n.push(i.name)}for(let e=0,s=n.length;e<s;e++)t.removeAttribute(n[e])}if(customElements.get(t.localName)){const e=t.querySelectorAll($);for(let t of e){const e=t.getAttribute(U);e&&!s[e]&&(s[e]=t)}return s}if(!t.children?.length)return s;for(let n of Array.from(t.children))F(n,e,s);return s}class z extends e{constructor(t,e,s){super(e,s);for(const[e,s]of Object.entries(t))this[e]=t=>this.set(s(t)(this.get()))}}export{a as ContextConsumer,i as ContextProvider,c as ContextRequestEvent,C as MiElement,r as Signal,z as Store,f as addGlobalStyles,u as classNames,A as convertType,y as css,q as define,v as escCss,N as escHtml,D as html,w as refsBySelector,H as render,F as renderAttrs,d as styleMap,g as unsafeCss,R as unsafeHtml};
+const t=[];class e extends EventTarget{#t;#e;constructor(t,e){super();const{equals:s}=e||{};this.#t=t,this.#e=s??((t,e)=>t===e)}get value(){return this.get()}set value(t){this.set(t)}get(){const e=t[t.length-1];return e&&e.add(this),this.#t}set(t){this.#e(this.#t,t)||(this.#t=t,this.dispatchEvent(new CustomEvent("signal")))}}const s=(t,s)=>t instanceof e?t:new e(t,s);function n(e){const s=new Set;t.push(s);try{e()}finally{t.pop()}for(const t of s)t.addEventListener("signal",e);return()=>{for(const t of s)t.removeEventListener("signal",e)}}var r={State:e,Computed:class{#s;#n;constructor(t){this.#s=new e,this.#n=n(()=>this.#s.set(t()))}get(){return this.#s.get()}unsubscribe(){this.#n()}},createSignal:s,effect:n};const o="context-request";class i{constructor(t,e,n){this.host=t,this.context=e,this.state=s(n),this.host.addController?.(this)}hostConnected(){this.host.addEventListener(o,this.onContextRequest)}hostDisconnected(){this.host.removeEventListener(o,this.onContextRequest)}set(t){this.state.set(t)}get(){return this.state.get()}set value(t){this.set(t)}get value(){return this.get()}onContextRequest=t=>{if(t.context!==this.context)return;let e;t.stopPropagation(),t.subscribe&&(e=n(()=>{const s=this.get();e&&t.callback(s,e)})),t.callback(this.get(),e)}}class c extends Event{constructor(t,e,s){super(o,{bubbles:!0,composed:!0}),this.context=t,this.callback=e,this.subscribe=s}}class a{#t;constructor(t,e,s){const{subscribe:n=!1,validate:r=()=>!0}=s||{};this.host=t,this.context=e,this.subscribe=!!n,this.validate=r,this.unsubscribe=void 0,this.host.addController?.(this)}get(){return this.#t}get value(){return this.#t}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new c(this.context,this._callback.bind(this),this.subscribe))}_callback(t,e){e&&(this.subscribe?this.unsubscribe&&(this.unsubscribe!==e&&this.unsubscribe(),this.unsubscribe=e):e()),this.validate(t)&&(this.#t=t,this.host.requestUpdate(t))}}const h=(t="")=>t.replace(/([A-Z])/g,(t,e)=>`-${e.toLowerCase()}`),l=(t="")=>t.toLowerCase().replace(/[-_]\w/g,t=>t[1].toUpperCase()),u=(...t)=>{const e=[];return t.forEach(t=>{t&&("string"==typeof t?e.push(t):"object"==typeof t&&Object.entries(t).forEach(([t,s])=>{s&&e.push(t)}))}),e.join(" ")},d=(t,e)=>{const{unit:s="px"}=e||{},n=[];for(const[e,r]of Object.entries(t??{})){if(null==r)continue;const t=Number.isFinite(r)?s:"";n.push(`${h(e)}:${r}${t}`)}return n.join(";")};let p=null;function f(t){t.adoptedStyleSheets.push(...(null===p&&(p=Array.from(document.styleSheets).map(({cssRules:t})=>{const e=new CSSStyleSheet,s=Array.from(t).map(t=>t.cssText).join(" ");return e.replaceSync(s),e})),p))}class b extends String{}const g=t=>new b(t),m={"&":"\\26 ","<":"\\3c ",">":"\\3e "},v=t=>t instanceof b?t:g((t=>t.replace(/[&<>]/g,t=>m[t]))(""+t)),y=(t,...e)=>String.raw({raw:t},...e.map(v));function w(t,e){const s={};for(const[n,r]of Object.entries(e))s[n]=t.querySelector?.(r);return s}const E=t=>{try{return JSON.parse(t)}catch{return}},S={class:"className",for:"htmlFor"};class C extends HTMLElement{_props={};#r={};#o=new Set;#i=new Set;#c=!1;static get shadowRootInit(){return{mode:"open"}}static template;static get properties(){}static observedAttributes=[];static styles="";static get useGlobalStyles(){return!1}static createSignal=s;constructor(){super();const{createSignal:t,properties:e}=this.constructor;for(const[s,{initial:n}]of Object.entries(e)){const e=Object.getOwnPropertyDescriptor(this.constructor.prototype,s);t&&(this._props[s]=t()),Object.defineProperty(this,s,{get(){return e?.get?e.get.call(this):t?this._props[s].value:this._props[s]},set(n){const r=this[s];e?.set?e.set.call(this,n):t?this._props[s].value=n:this._props[s]=n,r!==this[s]&&this.requestUpdate({[s]:n})}}),this[s]=n}}connectedCallback(){const{shadowRootInit:t,useGlobalStyles:e,template:s}=this.constructor;this.#i.forEach(t=>t.hostConnected?.()),this.renderRoot=t?this.shadowRoot??this.attachShadow(t):this,this.addTemplate(s),e&&f(this.renderRoot),this.render(),this.requestUpdate()}disconnectedCallback(){this.#o.forEach(t=>t()),this.#i.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const n=S[t]??l(t),r=this.constructor?.properties,{type:o}=r?.[n]??{},i=A(s,o);if(t.startsWith("data-")){const e=l(t.substring(5));e&&(this.dataset[e]=i)}this[n]=i}requestUpdate(t){this.#r={...this.#r,...t},!this.#c&&this.renderRoot&&(this.#c=!0,window.requestAnimationFrame(()=>{this.#c=!1;const t=this.#r;this.#r={},this.update(t)}))}addTemplate(t){if(t){if(!(t instanceof HTMLTemplateElement))throw new Error("template is not a HTMLTemplateElement");this.renderRoot.append(t.content.cloneNode(!0))}}render(){}update(t){}on(t,e,s=this){s.addEventListener(t,e),this.#o.add(()=>s.removeEventListener(t,e))}once(t,e,s=this){s.addEventListener(t,e,{once:!0})}dispose(...t){for(const e of t){if("function"!=typeof e)throw new TypeError("listener must be a function");this.#o.add(e)}}addController(t){this.#i.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.#i.delete(t)}refsBySelector(t){return w(this.renderRoot,t)}}const q=(t,e,s)=>{if(customElements.get(t))return;const{usedCssPrefix:n="",cssPrefix:r="",styles:o}=s||{};if(e.properties){const t=[];for(const[s,{attribute:n=!0}]of Object.entries(e.properties))n&&t.push(h(s));Object.defineProperty(e,"observedAttributes",{get:()=>t})}else if(e.observedAttributes){const t=e.observedAttributes.reduce((t,e)=>(t[l(e)]={},t),{});Object.defineProperty(e,"properties",{get:()=>t})}e.styles&&(e.styles=o||(n===r?e.styles:e.styles.replaceAll(`--${n}-`,r))),x(e),window.customElements.define(t,e)},x=t=>{if(!t.template||t.template instanceof HTMLTemplateElement)return;const e=document.createElement("template");e.innerHTML=t.template||"",t.template=e},A=(t,e)=>e===Boolean?null!==t:e===Number?(t=>{const e=Number(t);return isNaN(e)?0:e})(t):e===Array?E(t)??t.split(",").map(t=>t.trim()):e===Object?E(t):t,j=new class{cnt=0;cache=new Map;last=0;get size(){return this.cache.size}_inc(){return this.cnt=268435455&++this.cnt,this.cnt}clear(){this.cnt=0,this.cache.clear()}set(t){const e=Date.now();this.last<e&&this.cache.clear(),this.last=e+5e3;const s="__rc:"+this._inc().toString(36);return this.cache.set(s,t),s}get(t){const e=this.cache.get(t);return this.cache.delete(t),e}};class L extends String{}const R=t=>new L(t),T={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},O=/[&<>"']/g,_=t=>t.replace(O,t=>T[t]),N=t=>t instanceof L?t:R(_(""+t)),P="object",k="function",M=t=>{if(t instanceof L)return t;const e=typeof t;if(e===P||e===k){const e=j.set(t);return R(e)}return R(_(""+(t??"")))},D=(t,...e)=>R(String.raw({raw:t},...e.map(t=>Array.isArray(t)?t.map(M).join(""):M(t))));function H(t,e,s={}){const n={};t.innerHTML=e.toString();for(let e=0,r=t.children.length;e<r;e++)F(t.children[e],s,n);return n}const U="ref",$="[ref]";function F(t,e={},s={}){if(t.nodeType===Node.ELEMENT_NODE){const n=[],r=t.attributes;for(let o=0,i=r.length;o<i;o++){const i=r[o],c=i.name,a=c.charCodeAt(0),h=c.slice(1);let l=0;if(63===a)E(i.value)?t.setAttribute(h,""):t.removeAttribute(h),l=1;else if("..."===i.name){const e=j.get(i.value);if(e&&typeof e===P)for(const[s,n]of Object.entries(e))t[s]=n;l=1}else if(46===a)t[h]=j.get(i.value)??i.value,l=1;else if(64===a){const s=i.value,n=j.get(s);n?t.addEventListener(h,n):typeof e[s]===k&&t.addEventListener(h,e[s]),l=1}else i.name===U&&(s[i.value]=t,l=1);l&&n.push(i.name)}for(let e=0,s=n.length;e<s;e++)t.removeAttribute(n[e])}if(customElements.get(t.localName)){const e=t.querySelectorAll($);for(let t of e){const e=t.getAttribute(U);e&&!s[e]&&(s[e]=t)}return s}if(!t.children?.length)return s;for(let n of Array.from(t.children))F(n,e,s);return s}class z extends e{constructor(t,e,s){super(e,s);for(const[e,s]of Object.entries(t))this[e]=t=>this.set(s(t)(this.get()))}}export{a as ContextConsumer,i as ContextProvider,c as ContextRequestEvent,C as MiElement,r as Signal,z as Store,f as addGlobalStyles,u as classNames,A as convertType,y as css,q as define,v as escCss,N as escHtml,D as html,w as refsBySelector,H as render,F as renderAttrs,d as styleMap,g as unsafeCss,R as unsafeHtml};

package/dist/html.js

@@ -40,7 +40,7 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
     const key = globalRenderCache.set(any);
     return unsafeHtml(key);
   }
-  return unsafeHtml(esc('' + any));
+  return unsafeHtml(esc('' + (any ?? '')));
 }, html = (strings, ...values) => unsafeHtml(String.raw({
   raw: strings
 }, ...values.map(val => Array.isArray(val) ? val.map(escValue).join('') : escValue(val))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "Build lightweight reactive micro web-components",
   "keywords": [],
   "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-element#readme",
@@ -77,28 +77,28 @@
     "types"
   ],
   "dependencies": {
-    "mi-signal": "0.9.0"
+    "mi-signal": "0.9.7"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^9.39.4",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@testing-library/dom": "^10.4.1",
-    "@types/node": "^24.10.4",
-    "@vitest/browser": "^4.0.16",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/coverage-istanbul": "^4.0.16",
-    "eslint": "^9.39.2",
+    "@types/node": "^24.12.2",
+    "@vitest/browser": "^4.1.5",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-istanbul": "^4.1.5",
+    "eslint": "^9.39.4",
     "globals": "^16.5.0",
     "npm-run-all2": "^8.0.4",
-    "playwright": "^1.57.0",
-    "prettier": "^3.7.4",
-    "rimraf": "^6.1.2",
-    "rollup": "^4.54.0",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.3",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.60.2",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16",
-    "mi-html": "0.9.0"
+    "vite": "^7.3.2",
+    "vitest": "^4.1.5",
+    "mi-html": "0.9.7"
   },
   "scripts": {
     "all": "npm-run-all pretty lint test build types",

package/src/html.js

@@ -65,6 +65,10 @@ const escMap = {
 
 const escRe = /[&<>"']/g
 
+/**
+ * @param {string} string
+ * @returns {string}
+ */
 const esc = (string) => string.replace(escRe, (tag) => escMap[tag])
 
 /**
@@ -97,7 +101,7 @@ const escValue = (any) => {
     const key = globalRenderCache.set(any)
     return unsafeHtml(key)
   }
-  return unsafeHtml(esc('' + any))
+  return unsafeHtml(esc('' + (any ?? '')))
 }
 
 /**
@@ -180,7 +184,7 @@ export function renderAttrs(node, handlers = {}, refs = {}) {
         }
         rm = 1
       } else if (attr.name === '...') {
-        // spread attribute
+        // spread properties from object
         const obj = globalRenderCache.get(attr.value)
         if (obj && typeof obj === OBJECT) {
           for (const [k, v] of Object.entries(obj)) {