wrec 0.10.4 → 0.10.5
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;export function createElement(t,e,s){const o=document.createElement(t);if(e)for(const[t,s]of Object.entries(e))o.setAttribute(t,s);return s&&(o.innerHTML=s),o}const defaultForType=t=>t===Number?0:t!==Boolean&&"";function isPrimitive(t){const e=typeof t;return"string"===e||"number"===e||"boolean"===e}function updateAttribute(t,e,s){if(!isPrimitive(s))return;const o=t.getAttribute(e);"boolean"==typeof s?s?o!==e&&t.setAttribute(e,e):t.removeAttribute(e):o!==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;#o=new Map;#r;#i=null;#n=new Map;propToParentPropMap=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.#r=new FormData,this.#i.setFormValue(this.#r))}attributeChangedCallback(t,e,s){const o=Wrec.getPropName(t),r=this.#a(o,String(s));this[o]=r,this.#p(o,String(r))}#c(t,e,s,o){t.addEventListener(o,t=>{const s=t.target;this[e]=s.value});let r=this.#n.get(e);r||(r=[],this.#n.set(e,r)),r.push(s?{element:t,attrName:s}:t)}#h(){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))}connectedCallback(){this.#
|
|
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;export function createElement(t,e,s){const o=document.createElement(t);if(e)for(const[t,s]of Object.entries(e))o.setAttribute(t,s);return s&&(o.innerHTML=s),o}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===Number?0:t!==Boolean&&"";function isPrimitive(t){const e=typeof t;return"string"===e||"number"===e||"boolean"===e}function updateAttribute(t,e,s){if(!isPrimitive(s))return;const o=t.getAttribute(e);"boolean"==typeof s?s?o!==e&&t.setAttribute(e,e):t.removeAttribute(e):o!==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;#o=new Map;#r;#i=null;#n=new Map;propToParentPropMap=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.#r=new FormData,this.#i.setFormValue(this.#r))}attributeChangedCallback(t,e,s){const o=Wrec.getPropName(t),r=this.#a(o,String(s));this[o]=r,this.#p(o,String(r))}#c(t,e,s,o){t.addEventListener(o,t=>{const s=t.target;this[e]=s.value});let r=this.#n.get(e);r||(r=[],this.#n.set(e,r)),r.push(s?{element:t,attrName:s}:t)}#h(){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))}connectedCallback(){this.#u(),this.#l(),this.#h(),requestAnimationFrame(()=>{this.shadowRoot&&(this.#m(this.shadowRoot),this.#f(this.shadowRoot),this.#s.processed=!0),this.#d()})}#d(){const t=this.#s,{properties:e}=t;for(const[t,{computed:s}]of Object.entries(e))s&&(this[t]=this.#b(s))}#l(){const t=this.#s,{observedAttributes:e,properties:s}=t;for(const[t,o]of Object.entries(s))this.#E(t,o,e)}#E(t,e,s){const o=Wrec.getAttrName(t);e.required&&!this.hasAttribute(o)&&this.#g(this,t,"is a required attribute");const{type:r,value:i}=e,n=r===Boolean?i||this.hasAttribute(o):s.includes(o)&&this.hasAttribute(o)?this.#v(t,o):i||defaultForType(r),a="#"+t;this[a]=n,e.computed&&this.#R(t,e),Object.defineProperty(this,t,{enumerable:!0,get(){return this[a]},set(s){r===Number&&"string"==typeof s&&(s=stringToNumber(s)),s.constructor!==r&&this.#g(null,t,`was set to a ${s.constructor.name}, but must be a ${r.name}`);const i=this[a];if(s===i)return;this[a]=s;const n=this.#s.propToComputedMap.get(t)||[];for(const[t,e]of n)this[t]=this.#b(e);if(isPrimitive(s)&&this.hasAttribute(o)){s!==(r===Boolean?this.hasAttribute(o):this.#v(t,o))&&updateAttribute(this,t,s)}this.#A(t);const p=this.propToParentPropMap.get(t);if(p){this.getRootNode().host[p]=s}isPrimitive(s)&&this.#p(t,s),this.propertyChangedCallback&&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()}#C(t){const e=t instanceof Wrec;for(const s of t.getAttributeNames()){const o=t.getAttribute(s),r=this.#T(t,o);if(r){const o=this[r];void 0===o&&this.#N(t,s,r),t[r]=o;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.#g(t,s,e)}t.setAttribute(i,this[r])}else n="change";this.#c(t,r,i,n)}e&&t.propToParentPropMap.set(Wrec.getPropName(i),r)}this.#M(o,t,s)}}#b(expr){return(()=>eval(expr)).call(this)}#w(t){const{localName:e}=t;if("style"===e){const{sheet:e}=t,s=e?.cssRules??[],o=Array.from(s);for(const t of o)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.#M(e,t,s)}}}else{let s=t.textContent?.trim()??"";s||t.childNodes.forEach(t=>{t.nodeType===Node.COMMENT_NODE&&(s+=t?.textContent?.trim()??"")});const o=this.#T(t,s);"textarea"===e&&o?(this.#c(t,o,null,"change"),t.textContent=this[o]):this.#M(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}#f(t){const e=Array.from(t.querySelectorAll("*"));for(const t of e)this.#C(t),t.firstElementChild||this.#w(t)}static get observedAttributes(){return Object.keys(this.properties||{}).map(Wrec.getAttrName)}#T(t,e){if(!e||!REFERENCE_RE.test(e))return;const s=e.substring(SKIP);return void 0===this[s]&&this.#N(t,"",s),s}#A(t){const e=this.#s.propToExprsMap.get(t)||[];for(const t of e){const e=this.#b(t),s=this.#o.get(t)||[];for(const t of s)t instanceof HTMLElement?this.#y(t,e):updateValue(t.element,t.attrName,e)}requestAnimationFrame(()=>{this.#x(t)})}static register(){const t=this.elementName();customElements.get(t)||customElements.define(t,this)}#R(t,e){const{computed:s,uses:o}=e,r=this.#s.propToComputedMap;function i(e,s){let o=r.get(e);o||(o=[],r.set(e,o)),o.push([t,s])}const n=s.match(REFERENCES_RE)||[];for(const e of n){const o=e.substring(SKIP);void 0===this[o]&&this.#N(null,t,o),"function"!=typeof this[o]&&i(o,s)}if(o)for(const t of o.split(","))i(t,s)}#M(t,e,s=void 0){if(!t)return;const o=this.#P(e,s,t);if(!o){const o=t.replaceAll("this..","this.");return void(s?updateValue(e,s,o):"textContent"in e&&(e.textContent=o))}const r=this.#s;r.processed||o.forEach(e=>{const s=e.substring(SKIP);if("function"==typeof this[s])return;const o=r.propToExprsMap;let i=o.get(s);i||(i=[],o.set(s,i)),i.includes(t)||i.push(t)});let i=this.#o.get(t);i||(i=[],this.#o.set(t,i)),i.push(s?{element:e,attrName:s}:e);const n=this.#b(t);s?updateValue(e,s,n):this.#y(e,n)}#p(t,e){this.#r&&(this.#r.set(t,e),this.#i?.setFormValue(this.#r))}#g(t,e,s){const o=this.#s,r=t instanceof HTMLElement?t.localName:"CSS rule";throw new Error(`component ${o.elementName()}`+(t?`, element "${r}"`:"")+(e?`, attribute "${e}"`:"")+` ${s}`)}#N(t,e,s){this.#g(t,e,`refers to missing property "${s}"`)}#v(t,e){return this.#a(t,this.getAttribute(e))}#a(t,e){if(e?.match(REFERENCES_RE))return e;const s=this.#s,{type:o}=s.properties[t];return o===String?e:o===Number?stringToNumber(e):o===Boolean?"true"===e||"false"!==e&&"null"!==e&&(e&&e!==t&&this.#g(null,t,"is a Boolean attribute, so its value must match attribute name or be missing"),e===t):void this.#g(null,t,"does not specify its type")}#x(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:o}=t;updateAttribute(s,o,e),s[o]=e}}#y(t,e){const s=t instanceof HTMLElement,o=s?t.localName:"",r=typeof e;"string"!==r&&"number"!==r&&this.#g(t,void 0," computed content is not a string or number"),"textarea"===o?t.value=e:s&&"string"===r&&e.trim().startsWith("<")?(t.innerHTML=e,this.#m(t),this.#f(t)):s&&(t.textContent=e)}#u(){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.#g(null,t,"is not a supported attribute"))}#P(t,e,s){const o=s.match(REFERENCES_RE);if(o)return o.forEach(s=>{const o=s.substring(SKIP);void 0===this[o]&&this.#N(t,e,o)}),o}#m(t){const e=Array.from(t.querySelectorAll("*"));for(const t of e){const e=[];for(const s of Array.from(t.attributes)){const o=s.name;if(o.startsWith("on")){const r=o.slice(2).toLowerCase(),i=s.value;let n;this.#P(t,o,i),"function"==typeof this[i]?n=t=>this[i](t):(this.#P(t,o,i),n=()=>this.#b(i)),t.addEventListener(r,n),e.push(o)}}for(const s of e)t.removeAttribute(s)}}}export default Wrec;export const css=String.raw;export const html=String.raw;
|