wrec 0.12.2 → 0.12.4

package/dist/wrec.min.js

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

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.12.2",
+  "version": "0.12.4",
   "license": "MIT",
   "repository": {
     "type": "git",