vanjs-reactive-element/dist/van-reactive-element.cjs

A reactive custom element base class for VanJS with any reactivity system

'use strict';var y={toAttribute:e=>e,fromAttribute:e=>e},w={toAttribute:e=>e?"":null,fromAttribute:e=>e!==null},T={toAttribute:e=>e===null?null:String(e),fromAttribute:e=>e===null?null:Number(e)},V={toAttribute:e=>e===null?null:String(e),fromAttribute:e=>e===null?null:String(e)},C={toAttribute:e=>e==null?null:JSON.stringify(e),fromAttribute:e=>{if(e==null)return null;if(typeof e=="object")return e;try{return JSON.parse(e)}catch(c){return console.error(`Error parsing attribute value as JSON: ${e}`,c),e}}},D=C,m={String:V,Number:T,Boolean:w,Object:C,Array:D},g=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z][a-z])/g,"$1-$2").toLowerCase();var O=([e,...c])=>e.reduce((d,f,h)=>d+f+(c[h]||""),""),A=(...e)=>O(e);var P=e=>{let{rxScope:c=a=>(a==null||a(),()=>{}),van:d}=e,{defineProperty:f,entries:h,fromEntries:E,getPrototypeOf:x}=Object,b=a=>a&&typeof a=="object"&&"val"in a;class S extends HTMLElement{renderRoot=null;t=new Set;n=false;e=false;r=null;static properties={};o=new Map;i=new Map;static get shadowRootOptions(){return {mode:"open"}}static get styles(){return null}constructor(){super(),this.registerDisposer(c(()=>{this.s();}));}static get observedAttributes(){let r=[],{properties:t}=this;if(!t)return r;for(let[n,o]of h(t)){if(!o||o.attribute===false)continue;let u=typeof o.attribute=="string"?o.attribute:g(n);r.push(u);}return r}attributeChangedCallback(r,t,n){if(t===n)return;let o=this.o.get(r);if(!o||this.r===o)return;let i=this.constructor.properties[o];if(!i)return;let p=(i.converter||i.type&&m[i.type.name]||y).fromAttribute(n);this[o]=p;}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.t??=new Set,this.a(),this.e||this.registerDisposer(c(()=>{this.renderRoot&&this.render&&d.add(this.renderRoot,this.render()),this.e=true,requestAnimationFrame(()=>{var r;this.isConnected&&this.e&&((r=this.onMount)==null||r.call(this));});}));}disconnectedCallback(){var r;if(!this.isConnected){this.t.forEach(t=>{try{t();}catch{}}),this.t.clear(),this.e=false;try{(r=this.onCleanup)==null||r.call(this);}catch{}}}createRenderRoot(){return this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions)}onCleanup(){}onMount(){}registerDisposer(r){return typeof r=="function"&&this.t.add(r),r}hasShadowDOM(){return this.renderRoot!==this&&this.renderRoot instanceof ShadowRoot}setProperties(r){return Object.assign(this,r)}setProperty(r,t){return this[r]=t}query(r){var t;return ((t=this.renderRoot)==null?void 0:t.querySelector(r))??null}queryAll(r){var t;return ((t=this.renderRoot)==null?void 0:t.querySelectorAll(r))??document.createDocumentFragment().querySelectorAll("*")}dispatchCustomEvent(r,t={}){let n=new CustomEvent(r,{bubbles:false,composed:this.hasShadowDOM(),cancelable:false,...t});return this.dispatchEvent(n)}static define(r){let t=this,n=r||(t==null?void 0:t.name);if(!n)return t;n=`${r??g(n)}`;try{if(customElements.get(n))return t;customElements.define(n,t);}catch{}return t}s(){if(this.n)return;let r=this.constructor,{properties:t}=r;if(t){for(let n in t){let o=t[n]||{},u=o.default;if(o.attribute===false){let i=b(u)?u:d.state(u);f(x(this),n,{get(){return i},set(l){b(l)?i=l:i.val=l;},configurable:true,enumerable:true});}else {let i=typeof o.attribute=="string"?o.attribute:g(n);this.o.set(i,n),this.i.set(n,i);let l=d.state(u);if(f(this,n,{get(){return l},set(p){if(l.rawVal!==p&&(l.val=p,o.reflect)){let s=this.i.get(n);if(s){this.r=n;let R=(o.converter||o.type&&m[o.type.name]||y).toAttribute(p);R===null?this.removeAttribute(s):this.setAttribute(s,R),this.r=null;}}},configurable:true,enumerable:true}),i&&this.hasAttribute(i)){let p=this.getAttribute(i),s=o.converter||o.type&&m[o.type.name]||y;this[n]=s.fromAttribute(p);}}}this.n=true;}}a(){if(!this.renderRoot)return;let t=this.constructor.styles;if(t){if(this.renderRoot instanceof ShadowRoot&&t instanceof CSSStyleSheet){let n=this.renderRoot.adoptedStyleSheets||[];n.includes(t)||(this.renderRoot.adoptedStyleSheets=[...n,t]);return}if(!this.renderRoot.querySelector("style[vre\\:style]")&&typeof t=="string"){let n=document.createElement("style");n.setAttribute("vre:style",""),n.textContent=t,this.renderRoot.prepend(n);}}}}return {VanReactiveElement:S,css:A,define:(a,r,t)=>{let{attributes:n={},properties:o={},shadowRootOptions:u,styles:i}=r;class l extends S{static properties={...n,...E(h(o).map(([s,v])=>[s,{default:v,attribute:false}]))};static get shadowRootOptions(){return u||super.shadowRootOptions}static get styles(){return i||super.styles}constructor(){super(),this.registerDisposer(c(()=>{this.render=t(this,{noShadowDOM:()=>{if(!this.renderRoot)return this.createRenderRoot=()=>this},onCleanup:s=>{this.onCleanup=s;},onMount:s=>{this.onMount=s;}});}));}}return l.define(a)}}},M=P;module.exports=M;