wrec 0.11.2 → 0.11.3

package/dist/wrec.min.js

@@ -1 +1 @@
-const CSS_PROPERTY_RE=/([a-zA-Z-]+)\s*:\s*([^;}]+)/g,FIRST_CHAR="a-zA-Z_$",OTHER_CHAR=FIRST_CHAR+"0-9",IDENTIFIER=`[${FIRST_CHAR}][${OTHER_CHAR}]*`,HTML_COMMENT_TEXT_RE=/<!--\s*(.*?)\s*-->/,HTML_ELEMENT_TEXT_RE=/<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g,REF_RE=new RegExp(`^this\\.${IDENTIFIER}$`),REFS_RE=new RegExp(`this\\.${IDENTIFIER}(\\.${IDENTIFIER})*`,"g"),REFS_TEST_RE=new RegExp(`this\\.${IDENTIFIER}(\\.${IDENTIFIER})*`),SKIP=5;export function createElement(t,e,s){const r=document.createElement(t);if(e)for(const[t,s]of Object.entries(e))r.setAttribute(t,s);return s&&(r.innerHTML=s),r}const getPropName=t=>t.substring(SKIP).split(".")[0];function interpolate(t,e){let s=t[0];return e.forEach((e,r)=>{s+=e+t[r+1]}),s}const removeHtmlComments=t=>t.replace(/<!--[\s\S]*?-->/g,"");function replace(t,e,s,r){return t.slice(0,e)+r+t.slice(e+s)}function stringToNumber(t){const e=Number(t);if(isNaN(e))throw new Error(`Cannot convert "${t}" to a number.`);return e}const defaultForType=t=>t===String?"":t===Number?0:t!==Boolean&&(t===Array?[]:t===Object?{}:void 0);function isPrimitive(t){const e=typeof t;return"string"===e||"number"===e||"boolean"===e}function updateAttribute(t,e,s){if(!isPrimitive(s))return;const r=t.getAttribute(e);"boolean"==typeof s?s?r!==e&&t.setAttribute(e,e):t.removeAttribute(e):r!==s&&t.setAttribute(e,String(s))}function updateValue(t,e,s){t instanceof CSSRule?t.style.setProperty(e,s):updateAttribute(t,e,s)}class Wrec extends HTMLElement{static#t=new Map;static#e=new Map;static css="";static html="";static formAssociated=!1;static processed=!1;static properties={};static propToComputedMap=null;static propToExprsMap=null;static template=null;#s=this.constructor;#r=new Map;#o;#i=null;#n=new Map;propToParentPropMap=new Map;#a=null;#p=new Map;constructor(){super(),this.attachShadow({mode:"open"});const t=this.#s;t.properties||(t.properties={}),t.propToComputedMap||(t.propToComputedMap=new Map),t.propToExprsMap||(t.propToExprsMap=new Map),t.formAssociated&&(this.#i=this.attachInternals(),this.#o=new FormData,this.#i.setFormValue(this.#o))}attributeChangedCallback(t,e,s){const r=Wrec.getPropName(t),o=this.#c(r,String(s));this[r]=o,this.#l(r,String(o)),this.propertyChangedCallback(r,e,s)}#h(t,e,s,r){t.addEventListener(r,t=>{const s=t.target,{value:r}=s,{type:o}=this.#s.properties[e];this[e]=o===Number?stringToNumber(r):r});let o=this.#n.get(e);o||(o=[],this.#n.set(e,o)),o.push(s?{element:t,attrName:s}:t)}#u(){const t=this.#s;let e=t.template;if(!e){e=t.template=document.createElement("template");let s=t.css?`<style>${t.css}</style>`:"";s+=t.html,e.innerHTML=s}this.shadowRoot?.replaceChildren(e.content.cloneNode(!0))}changed(t,e,s){const r=this.#p.get(t);r&&(this[r]=s)}connectedCallback(){this.#m(),this.#f(),this.#u(),requestAnimationFrame(()=>{this.shadowRoot&&(this.#d(this.shadowRoot),this.#E(this.shadowRoot),this.#s.processed=!0),this.#g()})}#g(){const t=this.#s,{properties:e}=t;for(const[t,{computed:s}]of Object.entries(e))s&&(this[t]=this.#b(s))}#f(){const t=this.#s,{observedAttributes:e,properties:s}=t;for(const[t,r]of Object.entries(s))this.#T(t,r,e)}#T(t,e,s){const r=Wrec.getAttrName(t);e.required&&!this.hasAttribute(r)&&this.#R(this,t,"is a required attribute");const{type:o,value:i}=e,n=o===Boolean?i||this.hasAttribute(r):s.includes(r)&&this.hasAttribute(r)?this.#v(t,r):i||defaultForType(o),a="#"+t;this[a]=n,e.computed&&this.#y(t,e),Object.defineProperty(this,t,{enumerable:!0,get(){return this[a]},set(s){this.#M(t,o,s),o===Number&&"string"==typeof s&&(s=stringToNumber(s)),s.constructor!==o&&this.#R(null,t,`was set to a ${s.constructor.name}, but must be a ${o.name}`);const i=this[a];if(s===i)return;this[a]=s;const{stateProp:n}=this.#s.properties[t];n&&this.#a.set(n,s);const p=this.#s.propToComputedMap.get(t)||[];for(const[t,e]of p)this[t]=this.#b(e);if(isPrimitive(s)&&this.hasAttribute(r)){s!==(o===Boolean?this.hasAttribute(r):this.#v(t,r))&&updateAttribute(this,t,s)}this.#C(t);const c=this.propToParentPropMap.get(t);if(c){this.getRootNode().host[c]=s}isPrimitive(s)&&this.#l(t,s),this.propertyChangedCallback(t,i,s),e.dispatch&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{propName:t}}))}})}static elementName(){return this.name.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}#A(t){const e=t instanceof Wrec;for(const s of t.getAttributeNames()){const r=t.getAttribute(s),o=this.#x(t,r);if(o){const r=this[o];void 0===r&&this.#N(t,s,o),t[o]=r;let[i,n]=s.split(":");if("value"===i){if(n){if(void 0===t["on"+n]){const e="refers to an unsupported event name";this.#R(t,s,e)}t.setAttribute(i,this[o])}else n="change";this.#h(t,o,i,n)}e&&t.propToParentPropMap.set(Wrec.getPropName(i),o)}this.#w(r,t,s)}}#b(expr){return(()=>eval(expr)).call(this)}#P(t){const{localName:e}=t;if("style"===e){const{sheet:e}=t,s=e?.cssRules??[],r=Array.from(s);for(const t of r)if(t.constructor===CSSStyleRule){const e=Array.from(t.style);for(const s of e)if(s.startsWith("--")){const e=t.style.getPropertyValue(s);this.#w(e,t,s)}}}else{let s="";if("textarea"===e){const e=t.textContent?.match(HTML_COMMENT_TEXT_RE);e&&(s=e[1])}else{const e=Array.from(t.childNodes).find(t=>t.nodeType===Node.COMMENT_NODE);e&&(s=e.textContent?.trim()??"")}if(s){const r=this.#x(t,s);"textarea"===e&&r?(this.#h(t,r,null,"change"),t.textContent=this[r]):this.#w(s,t)}}}static getAttrName(t){let e=Wrec.#t.get(t);return e||(e=t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),Wrec.#t.set(t,e)),e}static getPropName(t){let e=Wrec.#e.get(t);return e||(e=t.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()),Wrec.#e.set(t,e)),e}#E(t){const e=Array.from(t.querySelectorAll("*"));for(const t of e)this.#A(t),t.firstElementChild||this.#P(t)}static get observedAttributes(){return Object.keys(this.properties||{}).map(Wrec.getAttrName)}propertyChangedCallback(t,e,s){}#x(t,e){if(!e||!REF_RE.test(e))return;const s=getPropName(e);return void 0===this[s]&&this.#N(t,"",s),s}#C(t){const e=this.#s.propToExprsMap.get(t)||[];for(const t of e){const e=this.#b(t),s=this.#r.get(t)||[];for(const t of s)t instanceof HTMLElement?this.#S(t,e):updateValue(t.element,t.attrName,e)}requestAnimationFrame(()=>{this.#I(t)})}static register(){const t=this.elementName();customElements.get(t)||customElements.define(t,this)}#y(t,e){const{computed:s,uses:r}=e,o=this.#s.propToComputedMap;function i(e,s){let r=o.get(e);r||(r=[],o.set(e,r)),r.push([t,s])}const n=s.match(REFS_RE)||[];for(const e of n){const r=e.substring(SKIP);void 0===this[r]&&this.#N(null,t,r),"function"!=typeof this[r]&&i(r,s)}if(r)for(const t of r.split(","))i(t,s)}#w(t,e,s=void 0){if(!t)return;const r=this.#_(e,s,t);if(!r){const r=t.replaceAll("this..","this.");return void(s?updateValue(e,s,r):"textContent"in e&&(e.textContent=r))}const o=this.#s;o.processed||r.forEach(e=>{const s=getPropName(e);if("function"==typeof this[s])return;const r=o.propToExprsMap;let i=r.get(s);i||(i=[],r.set(s,i)),i.includes(t)||i.push(t)});let i=this.#r.get(t);i||(i=[],this.#r.set(t,i)),i.push(s?{element:e,attrName:s}:e);const n=this.#b(t);s?updateValue(e,s,n):this.#S(e,n)}#l(t,e){this.#o&&(this.#o.set(t,e),this.#i?.setFormValue(this.#o))}#R(t,e,s){const r=this.#s,o=t instanceof HTMLElement?t.localName:"CSS rule";throw new Error(`component ${r.elementName()}`+(t?`, element "${o}"`:"")+(e?`, attribute "${e}"`:"")+` ${s}`)}#N(t,e,s){this.#R(t,e,`refers to missing property "${s}"`)}#v(t,e){return this.#c(t,this.getAttribute(e))}#c(t,e){if(e?.match(REFS_RE))return e;const s=this.#s,{type:r}=s.properties[t];return r===String?e:r===Number?stringToNumber(e):r===Boolean?"true"===e||"false"!==e&&"null"!==e&&(e&&e!==t&&this.#R(null,t,"is a Boolean attribute, so its value must match attribute name or be missing"),e===t):void this.#R(null,t,"does not specify its type")}#I(t){const e=this[t],s=this.#n.get(t)||[];for(const t of s)if(t instanceof HTMLElement)"textarea"===t.localName?t.value=e:t.textContent=e;else{const{element:s,attrName:r}=t;updateAttribute(s,r,e),s[r]=e}}#S(t,e){const s=t instanceof HTMLElement,r=s?t.localName:"",o=typeof e;"string"!==o&&"number"!==o&&this.#R(t,void 0," computed content is not a string or number"),"textarea"===r?t.value=e:s&&"string"===o&&e.trim().startsWith("<")?(t.innerHTML=e,this.#d(t),this.#E(t)):s&&(t.textContent=e)}useState(t,e){this.#a=t;for(const[s,r]of Object.entries(e)){this.#p.set(s,r);const e=t.get(s);void 0!==e&&(this[r]=e);this.#s.properties[r].stateProp=s}t.addListener(this,Object.keys(e))}#m(){const t=this.#s,e=new Set(Object.keys(t.properties));for(const t of this.getAttributeNames())"id"!==t&&(t.startsWith("on")||e.has(Wrec.getPropName(t))||this.#R(null,t,"is not a supported attribute"))}#_(t,e,s){const r=s.match(REFS_RE);if(r)return r.forEach(s=>{const r=getPropName(s);void 0===this[r]&&this.#N(t,e,r)}),r}#M(t,e,s){if(s instanceof e)return;let r=typeof s;"object"===r&&(r=s.constructor.name),r!==e.name.toLowerCase()&&this.#R(null,t,`was set to a ${r}, but must be a ${e.name}`)}#d(t){const e=Array.from(t.querySelectorAll("*"));for(const t of e){const e=[];for(const s of Array.from(t.attributes)){const r=s.name;if(r.startsWith("on")){const o=r.slice(2).toLowerCase(),i=s.value;let n;this.#_(t,r,i),"function"==typeof this[i]?n=t=>this[i](t):(this.#_(t,r,i),n=()=>this.#b(i)),t.addEventListener(o,n),e.push(r)}}for(const s of e)t.removeAttribute(s)}}}export default Wrec;export function css(t,...e){let s=interpolate(t,e);for(;;){const t=CSS_PROPERTY_RE.exec(s);if(!t)break;const e=t[2];if(REFS_TEST_RE.test(e)){const r=t[1];if(!r.startsWith("--")){const o=`--${r}: ${e};\n        ${r}: var(--${r});`;s=replace(s,t.index,t[0].length,o)}}}return s}export function html(t,...e){let s=interpolate(t,e);for(;;){const t=HTML_ELEMENT_TEXT_RE.exec(s);if(!t)break;const e=removeHtmlComments(t[2]);if(REFS_TEST_RE.test(e)){const r=`\x3c!-- ${e.trim()} --\x3e`;s=replace(s,t.index+t[0].indexOf(">")+1,e.length,r)}}return s}export class State{#$=[];#F;constructor(){const t={set:(t,e,s)=>{const r=t[e];return t[e]=s,this.#L(e,r,s),!0}};this.#F=new Proxy({},t)}addListener(t,e=[]){const s=new Set(e);this.#$.push({listener:t,propertySet:s})}#L(t,e,s){for(const{listener:r,propertySet:o}of this.#$)o&&!o.has(t)||r.changed(t,e,s)}get(t){return this.#F[t]}removeListener(t){this.#$=this.#$.filter(e=>e.listener!==t)}set(t,e){e!==this.#F[t]&&(this.#F[t]=e)}}
+class WrecError extends Error{}const CSS_PROPERTY_RE=/([a-zA-Z-]+)\s*:\s*([^;}]+)/g,FIRST_CHAR="a-zA-Z_$",OTHER_CHAR="a-zA-Z_$0-9",IDENTIFIER=`[a-zA-Z_$][${OTHER_CHAR}]*`,HTML_COMMENT_TEXT_RE=/<!--\s*(.*?)\s*-->/,HTML_ELEMENT_TEXT_RE=/<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g,REF_RE=new RegExp(`^this\\.${IDENTIFIER}$`),REFS_RE=new RegExp(`this\\.${IDENTIFIER}(\\.${IDENTIFIER})*`,"g"),REFS_TEST_RE=new RegExp(`this\\.${IDENTIFIER}(\\.${IDENTIFIER})*`),SKIP=5;export function createElement(t,e,s){const r=document.createElement(t);if(e)for(const[t,s]of Object.entries(e))r.setAttribute(t,s);return s&&(r.innerHTML=s),r}const getPropName=t=>t.substring(5).split(".")[0];function interpolate(t,e){let s=t[0];return e.forEach((e,r)=>{s+=e+t[r+1]}),s}const removeHtmlComments=t=>t.replace(/<!--[\s\S]*?-->/g,"");function replace(t,e,s,r){return t.slice(0,e)+r+t.slice(e+s)}function stringToNumber(t){const e=Number(t);if(isNaN(e))throw new WrecError(`Cannot convert "${t}" to a number.`);return e}const defaultForType=t=>t===String?"":t===Number?0:t!==Boolean&&(t===Array?[]:t===Object?{}:void 0);function isPrimitive(t){const e=typeof t;return"string"===e||"number"===e||"boolean"===e}function updateAttribute(t,e,s){if(!isPrimitive(s))return;const r=t.getAttribute(e);"boolean"==typeof s?s?r!==e&&t.setAttribute(e,e):t.removeAttribute(e):r!==s&&t.setAttribute(e,String(s))}function updateValue(t,e,s){t instanceof CSSRule?t.style.setProperty(e,s):updateAttribute(t,e,s)}class Wrec extends HTMLElement{static#t=new Map;static#e=new Map;static css="";static html="";static formAssociated=!1;static processed=!1;static properties={};static propToComputedMap=null;static propToExprsMap=null;static template=null;#s=this.constructor;#r=new Map;#o;#i=null;#n=new Map;#a=new Map;#c=null;#p=new Map;constructor(){super(),this.attachShadow({mode:"open"});const t=this.#s;t.properties||(t.properties={}),t.propToComputedMap||(t.propToComputedMap=new Map),t.propToExprsMap||(t.propToExprsMap=new Map),t.formAssociated&&(this.#i=this.attachInternals(),this.#o=new FormData,this.#i.setFormValue(this.#o))}attributeChangedCallback(t,e,s){const r=Wrec.getPropName(t),o=this.#l(r,String(s));this[r]=o,this.#h(r,String(o)),this.propertyChangedCallback(r,e,s)}#u(t,e,s,r){t.addEventListener(r,t=>{const s=t.target,{value:r}=s,{type:o}=this.#s.properties[e];this[e]=o===Number?stringToNumber(r):r});let o=this.#n.get(e);o||(o=[],this.#n.set(e,o)),o.push(s?{element:t,attrName:s}:t)}#m(){const t=this.#s;let e=t.template;if(!e){e=t.template=document.createElement("template");let s=t.css?`<style>${t.css}</style>`:"";s+=t.html,e.innerHTML=s}this.shadowRoot?.replaceChildren(e.content.cloneNode(!0))}changed(t,e,s){const r=this.#p.get(t);r&&(this[r]=s)}connectedCallback(){this.#f(),this.#d(),this.#m(),requestAnimationFrame(()=>{this.shadowRoot&&(this.#E(this.shadowRoot),this.#g(this.shadowRoot),this.#s.processed=!0),this.#T()})}#T(){const t=this.#s,{properties:e}=t;for(const[t,{computed:s}]of Object.entries(e))s&&(this[t]=this.#b(s))}#d(){const t=this.#s,{observedAttributes:e,properties:s}=t;for(const[t,r]of Object.entries(s))this.#R(t,r,e)}#R(t,e,s){const r=Wrec.getAttrName(t);e.required&&!this.hasAttribute(r)&&this.#y(this,t,"is a required attribute");const{type:o,value:i}=e,n=o===Boolean?i||this.hasAttribute(r):s.includes(r)&&this.hasAttribute(r)?this.#v(t,r):i||defaultForType(o),a="#"+t;this[a]=n,e.computed&&this.#M(t,e),Object.defineProperty(this,t,{enumerable:!0,get(){return this[a]},set(s){this.#C(t,o,s),o===Number&&"string"==typeof s&&(s=stringToNumber(s)),s.constructor!==o&&this.#y(null,t,`was set to a ${s.constructor.name}, but must be a ${o.name}`);const i=this[a];if(s===i)return;this[a]=s;const{stateProp:n}=this.#s.properties[t];n&&this.#c.set(n,s);const c=this.#s.propToComputedMap.get(t)||[];for(const[t,e]of c)this[t]=this.#b(e);if(isPrimitive(s)&&this.hasAttribute(r)){s!==(o===Boolean?this.hasAttribute(r):this.#v(t,r))&&updateAttribute(this,t,s)}this.#A(t);const p=this.#a.get(t);if(p){this.getRootNode().host[p]=s}isPrimitive(s)&&this.#h(t,s),this.propertyChangedCallback(t,i,s),e.dispatch&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{propName:t}}))}})}disconnectedCallback(){this.#r.clear(),this.#a.clear(),this.#p.clear()}static elementName(){return this.name.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}#x(t){const e=t instanceof Wrec;for(const s of t.getAttributeNames()){const r=t.getAttribute(s),o=this.#N(t,r);if(o){const r=this[o];void 0===r&&this.#w(t,s,o),t[o]=r;let[i,n]=s.split(":");if("value"===i){if(n){if(void 0===t["on"+n]){const e="refers to an unsupported event name";this.#y(t,s,e)}t.setAttribute(i,this[o])}else n="change";this.#u(t,o,i,n)}e&&t.#a.set(Wrec.getPropName(i),o)}this.#P(r,t,s)}}#b(t){return new Function("return "+t).call(this)}#S(t){const{localName:e}=t;if("style"===e){const{sheet:e}=t,s=e?.cssRules??[],r=Array.from(s);for(const t of r)if(t.constructor===CSSStyleRule){const e=Array.from(t.style);for(const s of e)if(s.startsWith("--")){const e=t.style.getPropertyValue(s);this.#P(e,t,s)}}}else{let s="";if("textarea"===e){const e=t.textContent?.match(HTML_COMMENT_TEXT_RE);e&&(s=e[1])}else{const e=Array.from(t.childNodes).find(t=>t.nodeType===Node.COMMENT_NODE);e&&(s=e.textContent?.trim()??"")}if(s){const r=this.#N(t,s);"textarea"===e&&r?(this.#u(t,r,null,"change"),t.textContent=this[r]):this.#P(s,t)}}}static getAttrName(t){let e=Wrec.#t.get(t);return e||(e=t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),Wrec.#t.set(t,e)),e}static getPropName(t){let e=Wrec.#e.get(t);return e||(e=t.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()),Wrec.#e.set(t,e)),e}#g(t){const e=Array.from(t.querySelectorAll("*"));for(const t of e)this.#x(t),t.firstElementChild||this.#S(t)}static get observedAttributes(){return Object.keys(this.properties||{}).map(Wrec.getAttrName)}propertyChangedCallback(t,e,s){}#N(t,e){if(!e||!REF_RE.test(e))return;const s=getPropName(e);return void 0===this[s]&&this.#w(t,"",s),s}#A(t){const e=this.#s.propToExprsMap.get(t)||[];for(const t of e){const e=this.#b(t),s=this.#r.get(t)??[];for(const t of s)console.log("wrec.ts #react: ref =",t),t instanceof HTMLElement?this.#_(t,e):t instanceof CSSStyleRule||updateValue(t.element,t.attrName,e)}requestAnimationFrame(()=>{this.#I(t)})}static register(){const t=this.elementName();customElements.get(t)||customElements.define(t,this)}#M(t,e){const{computed:s,uses:r}=e,o=this.#s.propToComputedMap;function i(e,s){let r=o.get(e);r||(r=[],o.set(e,r)),r.push([t,s])}const n=s.match(REFS_RE)||[];for(const e of n){const r=e.substring(5);void 0===this[r]&&this.#w(null,t,r),"function"!=typeof this[r]&&i(r,s)}if(r)for(const t of r.split(","))i(t,s)}#P(t,e,s=void 0){if(!t)return;const r=this.#$(e,s,t);if(!r){const r=t.replaceAll("this..","this.");return void(s?updateValue(e,s,r):"textContent"in e&&(e.textContent=r))}const o=this.#s;o.processed||r.forEach(e=>{const s=getPropName(e);if("function"==typeof this[s])return;const r=o.propToExprsMap;let i=r.get(s);i||(i=[],r.set(s,i)),i.includes(t)||i.push(t)});let i=this.#r.get(t);i||(i=[],this.#r.set(t,i)),i.push(s?{element:e,attrName:s}:e);const n=this.#b(t);s?updateValue(e,s,n):this.#_(e,n)}#h(t,e){this.#o&&(this.#o.set(t,e),this.#i?.setFormValue(this.#o))}#y(t,e,s){const r=this.#s,o=t instanceof HTMLElement?t.localName:"CSS rule";throw new WrecError(`component ${r.elementName()}`+(t?`, element "${o}"`:"")+(e?`, attribute "${e}"`:"")+` ${s}`)}#w(t,e,s){this.#y(t,e,`refers to missing property "${s}"`)}#v(t,e){return this.#l(t,this.getAttribute(e))}#l(t,e){if(e?.match(REFS_RE))return e;const s=this.#s,{type:r}=s.properties[t];return r===String?e:r===Number?stringToNumber(e):r===Boolean?"true"===e||"false"!==e&&"null"!==e&&(e&&e!==t&&this.#y(null,t,"is a Boolean attribute, so its value must match attribute name or be missing"),e===t):void this.#y(null,t,"does not specify its type")}#I(t){const e=this[t],s=this.#n.get(t)||[];for(const t of s)if(t instanceof HTMLElement)"textarea"===t.localName?t.value=e:t.textContent=e;else if(t instanceof CSSStyleRule);else{const{element:s,attrName:r}=t;if(s instanceof HTMLElement){s[Wrec.getPropName(r)]=e}else s instanceof CSSStyleRule&&s.style.setProperty(r,e)}}#_(t,e){const s=t instanceof HTMLElement,r=s?t.localName:"",o=typeof e;"string"!==o&&"number"!==o&&this.#y(t,void 0," computed content is not a string or number"),"textarea"===r?t.value=e:s&&"string"===o&&e.trim().startsWith("<")?(t.innerHTML=e,this.#E(t),this.#g(t)):s&&(t.textContent=e)}useState(t,e){this.#c=t;for(const[s,r]of Object.entries(e)){this.#p.set(s,r);const e=t.get(s);void 0!==e&&(this[r]=e);this.#s.properties[r].stateProp=s}t.addListener(this,Object.keys(e))}#f(){const t=this.#s,e=new Set(Object.keys(t.properties));for(const t of this.getAttributeNames())"id"!==t&&(t.startsWith("on")||e.has(Wrec.getPropName(t))||this.#y(null,t,"is not a supported attribute"))}#$(t,e,s){const r=s.match(REFS_RE);if(r)return r.forEach(s=>{const r=getPropName(s);void 0===this[r]&&this.#w(t,e,r)}),r}#C(t,e,s){if(s instanceof e)return;let r=typeof s;"object"===r&&(r=s.constructor.name),r!==e.name.toLowerCase()&&this.#y(null,t,`was set to a ${r}, but must be a ${e.name}`)}#E(t){const e=Array.from(t.querySelectorAll("*"));for(const t of e){const e=[];for(const s of Array.from(t.attributes)){const r=s.name;if(r.startsWith("on")){const o=r.slice(2).toLowerCase(),i=s.value;let n;this.#$(t,r,i),"function"==typeof this[i]?n=t=>this[i](t):(this.#$(t,r,i),n=()=>this.#b(i)),t.addEventListener(o,n),e.push(r)}}for(const s of e)t.removeAttribute(s)}}}export default Wrec;export function css(t,...e){let s=interpolate(t,e);for(;;){const t=CSS_PROPERTY_RE.exec(s);if(!t)break;const e=t[2];if(REFS_TEST_RE.test(e)){const r=t[1];if(!r.startsWith("--")){const o=`--${r}: ${e};\n        ${r}: var(--${r});`;s=replace(s,t.index,t[0].length,o)}}}return s}export function html(t,...e){let s=interpolate(t,e);for(;;){const t=HTML_ELEMENT_TEXT_RE.exec(s);if(!t)break;const e=removeHtmlComments(t[2]);if(REFS_TEST_RE.test(e)){const r=`\x3c!-- ${e.trim()} --\x3e`;s=replace(s,t.index+t[0].indexOf(">")+1,e.length,r)}}return s}export class State{#F=[];#L;constructor(){const t={set:(t,e,s)=>{const r=t[e];return t[e]=s,this.#W(e,r,s),!0}};this.#L=new Proxy({},t)}addListener(t,e=[]){const s=new Set(e);this.#F.push({listener:t,propertySet:s})}#W(t,e,s){for(const{listener:r,propertySet:o}of this.#F)o&&!o.has(t)||r.changed(t,e,s)}get(t){return this.#L[t]}removeListener(t){this.#F=this.#F.filter(e=>e.listener!==t)}set(t,e){e!==this.#L[t]&&(this.#L[t]=e)}}

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a small library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "license": "MIT",
   "repository": {
     "type": "git",