wrec 0.8.3 → 0.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/wrec.min.js +1 -1
- package/package.json +1 -1
package/dist/wrec.min.js
CHANGED
|
@@ -1 +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}$`),REFERENCES_RE=new RegExp(`this.${IDENTIFIER}`,"g"),SKIP=5,defaultForType=t=>t===Number?0:t!==Boolean&&"";function updateAttribute(t,e,r){const s=t.getAttribute(e);"boolean"==typeof r?r?s!==e&&t.setAttribute(e,e):t.removeAttribute(e):s!==r&&t.setAttribute(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;#r=new Map;#s;#o;#i=new Map;propertyToParentPropertyMap=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.constructor.properties||(this.constructor.properties={}),this.constructor["#propertyToExpressionsMap"]||(this.constructor["#propertyToExpressionsMap"]=new Map),this.constructor.formAssociated&&(this.#o=this.attachInternals(),this.#s=new FormData,this.#o.setFormValue(this.#s))}attributeChangedCallback(t,e,r){const s=Wrec.getPropertyName(t),o=this.#n(s,r);this[s]=o,this.#a(s,o)}#c(t,e,r){t.addEventListener(
|
|
1
|
+
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(`this.${IDENTIFIER}`,"g"),SKIP=5,defaultForType=t=>t===Number?0:t!==Boolean&&"";function updateAttribute(t,e,r){const s=t.getAttribute(e);"boolean"==typeof r?r?s!==e&&t.setAttribute(e,e):t.removeAttribute(e):s!==r&&t.setAttribute(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;#r=new Map;#s;#o;#i=new Map;propertyToParentPropertyMap=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.constructor.properties||(this.constructor.properties={}),this.constructor["#propertyToExpressionsMap"]||(this.constructor["#propertyToExpressionsMap"]=new Map),this.constructor.formAssociated&&(this.#o=this.attachInternals(),this.#s=new FormData,this.#o.setFormValue(this.#s))}attributeChangedCallback(t,e,r){const s=Wrec.getPropertyName(t),o=this.#n(s,r);this[s]=o,this.#a(s,o)}#c(t,e,r,s){t.addEventListener(s,t=>{this[e]=t.target.value});let o=this.#i.get(e);o||(o=[],this.#i.set(e,o)),o.push(r?{element:t,attrName:r}:t)}#p(){const t=this.constructor;let{_template:e}=t;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))}connectedCallback(){this.#u(),this.#l(),this.#p(),requestAnimationFrame(()=>{this.#h(this.shadowRoot),this.#m(this.shadowRoot),this.constructor.processed=!0,this.#f()})}#f(){const{properties:t}=this.constructor;for(const[e,{computed:r}]of Object.entries(t))r&&(this[e]=this.#d(r))}#l(){const{observedAttributes:t,properties:e}=this.constructor;for(const[r,s]of Object.entries(e))this.#b(r,s,t)}#b(t,e,r){const s=Wrec.getAttributeName(t);e.required&&!this.hasAttribute(s)&&this.#E(this,t,"is a required attribute");const o=r.includes(t)&&this.hasAttribute(s)?this.#g(t):e.value||defaultForType(e.type),i="#"+t;this[i]=o,e.computed&&this.#y(t,e),Object.defineProperty(this,t,{enumerable:!0,get(){return this[i]},set(r){if(r===this[i])return;this[i]=r;let o=this.constructor["#propertyToComputedMap"];if(o){const e=o.get(t)||[];for(const[t,r]of e)this[t]=this.#d(r)}if(this.hasAttribute(s)){r!==this.#g(t)&&updateAttribute(this,t,r)}this.#R(t);const n=this.propertyToParentPropertyMap.get(t);if(n){this.getRootNode().host.setAttribute(n,r)}this.#a(t,r),e.dispatch&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{propertyName:t}}))}})}static elementName(){return this.name.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}#v(t){const e=t.localName.includes("-");for(const r of t.getAttributeNames()){const s=t.getAttribute(r),o=this.#N(t,s);if(o){const s=this[o];void 0===s&&this.#A(t,r,o),t[o]=s;let[i,n]=r.split(":");"value"===i&&(n?t.setAttribute(i,this[o]):n="change",this.#c(t,o,i,n)),e&&t.propertyToParentPropertyMap.set(Wrec.getPropertyName(i),o)}this.#T(s,t,r)}}#d(expression){return(()=>eval(expression)).call(this)}#C(t){const{localName:e}=t;if("style"===e){for(const e of t.sheet.cssRules)if(e.type===CSSRule.STYLE_RULE)for(const t of e.style)if(t.startsWith("--")){const r=e.style.getPropertyValue(t);this.#T(r,e,t)}}else{const r=t.textContent.trim(),s=this.#N(t,r);"textarea"===e&&s?(this.#c(t,s,null,"change"),t.textContent=this[s]):this.#T(r,t)}}static getAttributeName(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 getPropertyName(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}#m(t){const e=t.querySelectorAll("*");for(const t of e)this.#v(t),t.firstElementChild||this.#C(t)}static get observedAttributes(){return Object.keys(this.properties||{}).map(Wrec.getAttributeName)}#N(t,e){if(!REFERENCE_RE.test(e))return;const r=e.substring(SKIP);return void 0===this[r]&&this.#A(t,null,r),r}#R(t){const e=this.constructor["#propertyToExpressionsMap"].get(t)||[];for(const t of e){const e=this.#d(t),r=this.#r.get(t)||[];for(const t of r)t instanceof Element?this.#w(t,e):updateValue(t.element,t.attrName,e)}requestAnimationFrame(()=>{this.#M(t)})}static register(){const t=this.elementName();customElements.get(t)||customElements.define(t,this)}#y(t,e){const{computed:r,uses:s}=e;let o=this.constructor["#propertyToComputedMap"];function i(e,r){let s=o.get(e);s||(s=[],o.set(e,s)),s.push([t,r])}o||(o=this.constructor["#propertyToComputedMap"]=new Map);const n=r.match(REFERENCES_RE)||[];for(const e of n){const s=e.substring(SKIP);void 0===this[s]&&this.#A(null,t,s),"function"!=typeof this[s]&&i(s,r)}if(s)for(const t of s.split(","))i(t,r)}#T(t,e,r){const s=this.#x(e,r,t);if(!s){const s=t.replaceAll("this..","this.");return void(r?updateValue(e,r,s):e.textContent=s)}this.constructor.processed||s.forEach(e=>{const r=e.substring(SKIP),s=this.constructor["#propertyToExpressionsMap"];let o=s.get(r);o||(o=[],s.set(r,o)),o.push(t)});let o=this.#r.get(t);o||(o=[],this.#r.set(t,o)),o.push(r?{element:e,attrName:r}:e);const i=this.#d(t);r?updateValue(e,r,i):this.#w(e,i)}#a(t,e){this.#s&&(this.#s.set(t,e),this.#o.setFormValue(this.#s))}#E(t,e,r){throw new Error(`component ${this.constructor.elementName()}`+(t?`, element "${t.localName}"`:"")+(e?`, attribute "${e}"`:"")+` ${r}`)}#A(t,e,r){this.#E(t,e,`refers to missing property "${r}"`)}#g(t){return this.#n(t,this.getAttribute(t))}#n(t,e){if(e?.match(REFERENCES_RE))return e;const{type:r}=this.constructor.properties[t];if(r===String)return e;if(r===Number){const r=Number(e);if(!isNaN(r))return r;this.#E(null,t,`must be a number, but was "${e}"`)}if(r===Boolean)return"true"===e||"false"!==e&&(e&&e!==t&&this.#E(null,t,"is a Boolean attribute, so its value must match attribute name or be missing"),e===t);this.#E(null,t,"does not specify its type")}#M(t){const e=this[t],r=this.#i.get(t)||[];for(const t of r)if(t instanceof Element)"textarea"===t.localName?t.value=e:t.textContent=e;else{const{element:r,attrName:s}=t;updateAttribute(r,s,e),r[s]=e}}#w(t,e){const{localName:r}=t,s=typeof e;"string"!==s&&"number"!==s&&this.#E(t,null," computed content is not a string or number"),"textarea"===r?t.value=e:"string"===s&&e.trim().startsWith("<")?(t.innerHTML=e,this.#h(t),this.#m(t)):t.textContent=e}#u(){const t=new Set(Object.keys(this.constructor.properties));for(const e of this.getAttributeNames())"id"!==e&&(e.startsWith("on")||t.has(Wrec.getPropertyName(e))||this.#E(null,e,"is not a supported attribute"))}#x(t,e,r){const s=r.match(REFERENCES_RE);if(s)return s.forEach(r=>{const s=r.substring(SKIP);void 0===this[s]&&this.#A(t,e,s)}),s}#h(root){for(const element of root.querySelectorAll("*")){const attributesToRemove=[];for(const attr of element.attributes){const attrName=attr.name;if(attrName.startsWith("on")){const eventName=attrName.slice(2).toLowerCase(),attrValue=attr.value;let fn;this.#x(element,attrName,attrValue),"function"==typeof this[attrValue]?fn=t=>this[attrValue](t):(this.#x(element,attrName,attrValue),fn=()=>eval(attrValue)),element.addEventListener(eventName,fn),attributesToRemove.push(attrName)}}for(const t of attributesToRemove)element.removeAttribute(t)}}}export default Wrec;export const css=String.raw;export const html=String.raw;
|