better-react-web-component/index.js

Wrapper for React Component to CustomElement

"use strict";var y=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var C=(s,t)=>{for(var o in t)a(s,o,{get:t[o],enumerable:!0})},h=(s,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of T(t))!E.call(s,n)&&n!==o&&a(s,n,{get:()=>t[n],enumerable:!(r=g(t,n))||r.enumerable});return s};var x=(s,t,o)=>(o=s!=null?y(R(s)):{},h(t||!s||!s.__esModule?a(o,"default",{value:s,enumerable:!0}):o,s)),w=s=>h(a({},"__esModule",{value:!0}),s);var k={};C(k,{createCustomElement:()=>v,optional:()=>i,required:()=>d});module.exports=w(k);var i={string:0,number:1,boolean:2,event:3,json:4},d={string:20,number:21,boolean:22,event:23,json:24};var b=x(require("react")),f=require("react-dom/client"),p=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 m,l;let o=this.constructor.ReactComponent,r=this.constructor.domModel,n=r.getProperties(this),e=r.getEvents(this),c=b.default.createElement(o,Object.assign(n,e));((l=this[m="t"])!=null?l:this[m]=(0,f.createRoot)(this.rootElement)).render(c)}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,r,n){r!==n&&this.rootElement&&this.renderCustomElement()}};var u=class{constructor(t){this.e=[];this.o=[];let o=Object.keys(t||{});for(let r of o){let n=r.toLowerCase(),e=t[r];if(n.indexOf("on")===0&&(e===i.event||e===d.event)){this.addEvent(n.slice(2),r);continue}if(e===i.string||e===d.string){this.addAttribute(n,r,"string");continue}if(e===i.number||e===d.number){this.addAttribute(n,r,"number");continue}if(e===i.json||e===d.json){this.addAttribute(n,r,"json");continue}(e===i.boolean||e===d.boolean)&&this.addAttribute(n,r,"boolean",!1)}}getProperties(t){let o={};for(let[r,n,e]of this.e)o[n]=e(t);return o}getEvents(t){let o={};return this.o.forEach(([n,e])=>{o[e]=function(c){t.dispatchEvent(new CustomEvent(n,{detail:c.detail,bubbles:!0}))}}),o}get observedAttributes(){return this.e.map(([t])=>t)}addAttribute(t,o,r,n){if(r==="string"){this.e.push([t,o,e=>e&&(e.hasAttribute(t)?e.getAttribute(t):n)]);return}if(r==="number"){this.e.push([t,o,e=>e&&(e.hasAttribute(t)?Number(e.getAttribute(t)):n)]);return}if(r==="json"){this.e.push([t,o,e=>e&&(e.hasAttribute(t)?JSON.parse(e.getAttribute(t)||"null"):n)]);return}if(r==="boolean"){this.e.push([t,o,e=>e==null?void 0:e.hasAttribute(t)]);return}}addEvent(t,o){this.o.push([t,o])}};function v(s,t="element",o){let r=o?s.bind(o):s;r.types=s.types;let e=class e extends p{};e.domModel=new u(r.types||{}),e.ReactComponent=r,e.renderRoot=t,e.observedAttributes=e.domModel.observedAttributes;let n=e;return n}
//# sourceMappingURL=index.js.map