better-react-web-component/index.mjs

Wrapper for React Component to CustomElement

var s={string:0,number:1,boolean:2,event:3,json:4},i={string:20,number:21,boolean:22,event:23,json:24};import l from"react";import{createRoot as h}from"react-dom/client";var a=class extends HTMLElement{connectedCallback(){switch(this.rootElement=this,this.constructor.renderRoot){case"container":this.rootElement=this.rootDiv=document.createElement("div"),this.appendChild(this.rootElement);break;case"shadowRoot":this.rootElement=this.attachShadow({mode:"open"});break;case"shadowRootClosed":this.rootElement=this.attachShadow({mode:"closed"});break}this.renderCustomElement()}renderCustomElement(){var c,m;let o=this.constructor.ReactComponent,n=this.constructor.domModel,r=n.getProperties(this),e=n.getEvents(this),u=l.createElement(o,Object.assign(r,e));((m=this[c="t"])!=null?m:this[c]=h(this.rootElement)).render(u)}disconnectedCallback(){var o;(o=this.t)==null||o.unmount(),this.rootDiv&&this.removeChild(this.rootDiv),this.t=void 0,this.rootDiv=void 0,this.rootElement=void 0}attributeChangedCallback(o,n,r){n!==r&&this.rootElement&&this.renderCustomElement()}};var p=class{constructor(t){this.e=[];this.o=[];let o=Object.keys(t||{});for(let n of o){let r=n.toLowerCase(),e=t[n];if(r.indexOf("on")===0&&(e===s.event||e===i.event)){this.addEvent(r.slice(2),n);continue}if(e===s.string||e===i.string){this.addAttribute(r,n,"string");continue}if(e===s.number||e===i.number){this.addAttribute(r,n,"number");continue}if(e===s.json||e===i.json){this.addAttribute(r,n,"json");continue}(e===s.boolean||e===i.boolean)&&this.addAttribute(r,n,"boolean",!1)}}getProperties(t){let o={};for(let[n,r,e]of this.e)o[r]=e(t);return o}getEvents(t){let o={};return this.o.forEach(([r,e])=>{o[e]=function(u){t.dispatchEvent(new CustomEvent(r,{detail:u.detail,bubbles:!0}))}}),o}get observedAttributes(){return this.e.map(([t])=>t)}addAttribute(t,o,n,r){if(n==="string"){this.e.push([t,o,e=>e&&(e.hasAttribute(t)?e.getAttribute(t):r)]);return}if(n==="number"){this.e.push([t,o,e=>e&&(e.hasAttribute(t)?Number(e.getAttribute(t)):r)]);return}if(n==="json"){this.e.push([t,o,e=>e&&(e.hasAttribute(t)?JSON.parse(e.getAttribute(t)||"null"):r)]);return}if(n==="boolean"){this.e.push([t,o,e=>e==null?void 0:e.hasAttribute(t)]);return}}addEvent(t,o){this.o.push([t,o])}};function b(d,t="element",o){let n=o?d.bind(o):d;n.types=d.types;let e=class e extends a{};e.domModel=new p(n.types||{}),e.ReactComponent=n,e.renderRoot=t,e.observedAttributes=e.domModel.observedAttributes;let r=e;return r}export{b as createCustomElement,s as optional,i as required};
//# sourceMappingURL=index.mjs.map