wrec 0.1.9 → 0.2.0

package/README.md

@@ -1,12 +1,12 @@
 # Web Reactive Component (wrec)
 
+<img alt="shipwreck" src="shipwreck.png" style="width: 256px">
+
 Wrec is a small, zero dependency library that
 greatly simplifies building web components.
+It was inspired by [Lit](https://lit.dev).
 
-<img alt="shipwreck" src="shipwreck.png" style="width: 256px">
-
-Wrec was inspired by [Lit](https://lit.dev).
-It has fewer features than Lit.
+Wrec has fewer features than Lit.
 In exchange, Wrec:
 
 - is much smaller than Lit (about 1/4 of the size)

package/dist/wrec.min.js

@@ -1 +1 @@
-const FIRST_CHAR="a-zA-Z_$",OTHER_CHAR=FIRST_CHAR+"0-9",IDENTIFIER=`[${FIRST_CHAR}][${OTHER_CHAR}]*`,REFERENCE_RE=new RegExp("this."+IDENTIFIER,"g"),SKIP=5;class Wrec extends HTMLElement{static#t=new Map;static#e=document.createElement("template");#s=new Map;#r;#o;#n=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.constructor.formAssociated&&(this.#o=this.attachInternals(),this.#r=new FormData,this.#o.setFormValue(this.#r))}attributeChangedCallback(t,e,s){const r=this.#i(t,s);this[t]=r,this.#a(t,r)}#c(t,e,s){t.addEventListener("input",t=>{this[e]=t.target.value});let r=this.#n.get(e);r||(r=[],this.#n.set(e,r)),r.push(s?{element:t,attrName:s}:t)}buildDOM(){let t=this.constructor.prototype.css?`<style>${this.css()}</style>`:"";t+=this.html(),Wrec.#e.innerHTML=t,this.shadowRoot.replaceChildren(Wrec.#e.content.cloneNode(!0))}connectedCallback(){this.#l(),this.buildDOM(),requestAnimationFrame(()=>{this.#p(this.shadowRoot),this.#h(this.shadowRoot),this.constructor.processed=!0})}#l(){const t=this.constructor.properties,{observedAttributes:e}=this.constructor;for(const[s,r]of Object.entries(t))this.#u(s,r,e)}#u(t,e,s){const r=s.includes(t)&&this.hasAttribute(t)?this.#m(t):e.value;this["_"+t]=r,Object.defineProperty(this,t,{enumerable:!0,get(){return this["_"+t]},set(e){if(e===this["_"+t])return;this["_"+t]=e;if(this.constructor.properties[t].reflect&&this.hasAttribute(t)){e!==this.#m(t)&&this.#d(this,t,e)}this.#f(t);const s=this.propertyToParentPropertyMap,r=s?s.get(t):null;if(r){this.getRootNode().host.setAttribute(r,e)}this.#a(t,e)}})}#b(t){const e=t.localName.includes("-");for(const s of t.getAttributeNames()){const r=t.getAttribute(s);if(REFERENCE_RE.test(r)){const o=r.substring(SKIP),n=this[o];if(t.setAttribute(s,n),t[s]=n,this.#c(t,o,s),e){let e=t.propertyToParentPropertyMap;e||(e=new Map,t.propertyToParentPropertyMap=e),e.set(s,o)}}this.#E(r,t,s)}}static#g(expression,context){return function(){return eval(expression)}.call(context)}#R(t){const{localName:e}=t;if("style"===e)return;const s=t.textContent.trim();if("textarea"===e&&REFERENCE_RE.test(s)){const e=s.substring(SKIP);t.textContent=this[e],this.#c(t,e)}else this.#E(s,t)}#m(t){return this.#i(t,this.getAttribute(t))}#i(t,e){const s=this.constructor.properties[t].type;return s===Number?Number(e):s===Boolean?Boolean(e):e}#h(t){const e=t.querySelectorAll("*");for(const t of e)this.#b(t),t.firstElementChild||this.#R(t)}static get observedAttributes(){return Object.keys(this.properties||{})}#f(t){const e=Wrec.#t.get(t)||[];for(const t of e){const e=Wrec.#g(t,this),s=this.#s.get(t)||[];for(const t of s)if(t instanceof Element)this.#A(t,e);else{const{element:s,attrName:r}=t;this.#d(s,r,e)}}this.#y(t)}static register(){const t=Wrec.#v(this.name);customElements.get(t)||customElements.define(t,this)}#E(t,e,s){const r=t.match(REFERENCE_RE);if(!r)return;this.constructor.processed||r.forEach(e=>{const s=e.substring(SKIP);let r=Wrec.#t.get(s);r||(r=[],Wrec.#t.set(s,r)),r.push(t)});let o=this.#s.get(t);o||(o=[],this.#s.set(t,o)),o.push(s?{element:e,attrName:s}:e);const n=Wrec.#g(t,this);s?this.#d(e,s,n):this.#A(e,n)}static#v=t=>t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();#a(t,e){this.#r&&(this.#r.set(t,e),this.#o.setFormValue(this.#r))}#d(t,e,s){const r=t.getAttribute(e);"boolean"==typeof s?s?r!==e&&t.setAttribute(e,e):t.removeAttribute(e):r!==s&&t.setAttribute(e,s)}#y(t){const e=this[t],s=this.#n.get(t)||[];for(const t of s)if(t instanceof Element)"textarea"===t.localName?t.value=e:t.textContent=e;else{const{element:s,attrName:r}=t;this.#d(s,r,e),s[r]=e}}#A(t,e){const{localName:s}=t;"textarea"===s?t.value=e:"string"==typeof e&&e.trim().startsWith("<")?(t.innerHTML=e,this.#p(t),this.#h(t)):t.textContent=e}#p(root){const elements=root.querySelectorAll("*");for(const element of elements)for(const attr of element.attributes){const{name:name}=attr;if(name.startsWith("on")){const eventName=name.slice(2).toLowerCase(),{value:value}=attr,fn="function"==typeof this[value]?t=>this[value](t):()=>eval(value);element.addEventListener(eventName,fn),element.removeAttribute(name)}}}}export default Wrec;
+const FIRST_CHAR="a-zA-Z_$",OTHER_CHAR=FIRST_CHAR+"0-9",IDENTIFIER=`[${FIRST_CHAR}][${OTHER_CHAR}]*`,REFERENCE_RE=new RegExp("this."+IDENTIFIER),REFERENCES_RE=new RegExp(REFERENCE_RE.source,"g"),SKIP=5;class Wrec extends HTMLElement{static#t=new Map;static#e=document.createElement("template");#s=new Map;#r;#o;#n=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.constructor.formAssociated&&(this.#o=this.attachInternals(),this.#r=new FormData,this.#o.setFormValue(this.#r))}attributeChangedCallback(t,e,s){const r=this.#i(t,s);this[t]=r,this.#a(t,r)}#c(t,e,s){if(!REFERENCE_RE.test(t.getAttribute(s)))return;t.addEventListener("input",t=>{this[e]=t.target.value});let r=this.#n.get(e);r||(r=[],this.#n.set(e,r)),r.push(s?{element:t,attrName:s}:t)}buildDOM(){let t=this.constructor.prototype.css?`<style>${this.css()}</style>`:"";t+=this.html(),Wrec.#e.innerHTML=t,this.shadowRoot.replaceChildren(Wrec.#e.content.cloneNode(!0))}connectedCallback(){this.#l(),this.buildDOM(),requestAnimationFrame(()=>{this.#p(this.shadowRoot),this.#u(this.shadowRoot),this.constructor.processed=!0})}#l(){const t=this.constructor.properties,{observedAttributes:e}=this.constructor;for(const[s,r]of Object.entries(t))this.#h(s,r,e)}#h(t,e,s){const r=s.includes(t)&&this.hasAttribute(t)?this.#m(t):e.value;this["_"+t]=r,Object.defineProperty(this,t,{enumerable:!0,get(){return this["_"+t]},set(e){if(e===this["_"+t])return;this["_"+t]=e;if(this.constructor.properties[t].reflect&&this.hasAttribute(t)){e!==this.#m(t)&&this.#E(this,t,e)}this.#d(t);const s=this.propertyToParentPropertyMap,r=s?s.get(t):null;if(r){this.getRootNode().host.setAttribute(r,e)}this.#a(t,e)}})}#f(t){const e=t.localName.includes("-");for(const s of t.getAttributeNames()){const r=t.getAttribute(s);if(REFERENCES_RE.test(r)){const o=r.substring(SKIP),n=this[o];if(t.setAttribute(s,n),t[s]=n,this.#c(t,o,s),e){let e=t.propertyToParentPropertyMap;e||(e=new Map,t.propertyToParentPropertyMap=e),e.set(s,o)}}this.#b(r,t,s)}}static#R(expression,context){return function(){return eval(expression)}.call(context)}#g(t){const{localName:e}=t;if("style"===e)return;const s=t.textContent.trim();if("textarea"===e&&REFERENCE_RE.test(s)){const e=s.substring(SKIP);t.textContent=this[e],this.#c(t,e)}else this.#b(s,t)}#m(t){return this.#i(t,this.getAttribute(t))}#i(t,e){const s=this.constructor.properties[t].type;return s===Number?Number(e):s===Boolean?Boolean(e):e}#u(t){const e=t.querySelectorAll("*");for(const t of e)this.#f(t),t.firstElementChild||this.#g(t)}static get observedAttributes(){return Object.keys(this.properties||{})}#d(t){const e=Wrec.#t.get(t)||[];for(const t of e){const e=Wrec.#R(t,this),s=this.#s.get(t)||[];for(const t of s)if(t instanceof Element)this.#A(t,e);else{const{element:s,attrName:r}=t;this.#E(s,r,e)}}this.#y(t)}static register(){const t=Wrec.#v(this.name);customElements.get(t)||customElements.define(t,this)}#b(t,e,s){const r=t.match(REFERENCES_RE);if(!r)return;this.constructor.processed||r.forEach(e=>{const s=e.substring(SKIP);let r=Wrec.#t.get(s);r||(r=[],Wrec.#t.set(s,r)),r.push(t)});let o=this.#s.get(t);o||(o=[],this.#s.set(t,o)),o.push(s?{element:e,attrName:s}:e);const n=Wrec.#R(t,this);s?this.#E(e,s,n):this.#A(e,n)}static#v=t=>t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();#a(t,e){this.#r&&(this.#r.set(t,e),this.#o.setFormValue(this.#r))}#E(t,e,s){const r=t.getAttribute(e);"boolean"==typeof s?s?r!==e&&t.setAttribute(e,e):t.removeAttribute(e):r!==s&&t.setAttribute(e,s)}#y(t){const e=this[t],s=this.#n.get(t)||[];for(const t of s)if(t instanceof Element)"textarea"===t.localName?t.value=e:t.textContent=e;else{const{element:s,attrName:r}=t;this.#E(s,r,e),s[r]=e}}#A(t,e){const{localName:s}=t;"textarea"===s?t.value=e:"string"==typeof e&&e.trim().startsWith("<")?(t.innerHTML=e,this.#p(t),this.#u(t)):t.textContent=e}#p(root){const elements=root.querySelectorAll("*");for(const element of elements)for(const attr of element.attributes){const{name:name}=attr;if(name.startsWith("on")){const eventName=name.slice(2).toLowerCase(),{value:value}=attr,fn="function"==typeof this[value]?t=>this[value](t):()=>eval(value);element.addEventListener(eventName,fn),element.removeAttribute(name)}}}}export default Wrec;

package/package.json

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