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

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

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