reactement
Version:
Sometimes it's useful to let the DOM render our components when needed. Custom Elements are great at this. They provide various methods that can inform you when an element is "connected" or "disconnected" from the DOM.
1 lines • 6.5 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(()=>(()=>{"use strict";var e={470:(e,t,r)=>{var n;r.r(t),r.d(t,{ErrorTypes:()=>n,getAsyncComponent:()=>u,getAttributeObject:()=>a,getAttributeProps:()=>l,getDocument:()=>c,getElementAttributes:()=>f,getElementTag:()=>d,getPropKey:()=>p,isPromise:()=>o,parseJson:()=>i,selfClosingTags:()=>s}),function(e){e.Promise="Error: Promises cannot be used for SSR",e.Missing="Error: Cannot find component in provided function",e.Json="Error: Invalid JSON string passed to component"}(n||(n={}));const o=e=>e&&"function"==typeof e.then,s=["area","base","br","col","hr","img","input","link","meta","source","embed","param","track","wbr"];function i(e){const{tagName:t}=this,{formatProps:r}=this.__options;let o={};try{o=JSON.parse(e)}catch{console.error(n.Json,`: <${t.toLowerCase()}>`)}return r&&(o=r(o)),o}function c(e){const t=`<!DOCTYPE html>\n<html><body>${e}</body></html>`;let r;try{r=(new DOMParser).parseFromString(t,"text/html")}catch{}if(r)return r.body}function a(e){const t={};if(!e?.length)return t;for(let r=e.length-1;r>=0;r--){const n=e[r];t[n.name]=n.value}return t}function l(e,t){const r=a(e);let n={};for(const e of Object.keys(r))-1!==t?.indexOf(e)&&(n[p(e)]=r[e]);return n}function p(e){const t=e.trim().replace(/[\s_]/g,"-");return t.charAt(0).toLowerCase()+t.slice(1).replace(/-([a-z])/g,(({1:e})=>e.toUpperCase()))}function u(e,t){return e.then((e=>function(e,t){let r;return"function"==typeof e?e:("object"==typeof e&&(r=e[(n=t,(n=n.toLowerCase()).replace(/(^\w|-\w)/g,(e=>e.replace(/-/,"").toUpperCase())))]||void 0),r);var n}(e,t)))}function d(e){let t=e.toLowerCase();return t.indexOf("-")<0&&(t="component-"+t),t}function f(){const{attributes:e=[]}=this.__options;return this.hasAttributes()?l(this.attributes,e):{}}},710:function(e,t,r){var n=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r};Object.defineProperty(t,"__esModule",{value:!0}),t.parseHtml=void 0;const o=r(689),s=r(470);function i(e){var t;if(3===e.nodeType)return(null===(t=e.textContent)||void 0===t?void 0:t.trim())||"";if(1!==e.nodeType)return null;const r=String(e.nodeName).toLowerCase(),c=Array.from(e.childNodes),a=()=>c.map((e=>i.call(this,e))),l=(0,s.getAttributeObject)(e.attributes),{slot:p}=l,u=n(l,["slot"]),d=Object.assign(Object.assign({},u),{key:Math.random()});return"script"===r?null:"body"===r?(0,o.createElement)(o.Fragment,{key:"body"},a()):s.selfClosingTags.includes(r)?(0,o.createElement)(r,d):p?(this.__slots[(0,s.getPropKey)(p)]=function(e){return e.every((e=>"string"==typeof e))?e.join(" "):(0,o.createElement)(o.Fragment,{},e)}(a()),null):(0,o.createElement)(r,d,a())}t.parseHtml=function(){const e=(0,s.getDocument)(this.innerHTML);if(!e)return;const t=i.call(this,e);return()=>t}},689:e=>{e.exports=require("react")},405:e=>{e.exports=require("react-dom")}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{var e=n;Object.defineProperty(e,"__esModule",{value:!0}),e.define=void 0;const t=r(689),o=r(405),s=r(470),i=r(710);function c(){const e=s.getElementAttributes.call(this),r=this.getAttribute("props"),n=this.querySelector('[type="application/json"]'),o=s.parseJson.call(this,r||(null==n?void 0:n.innerHTML)||"{}");null==n||n.remove();let c=this.__children;this.__mounted||this.hasAttribute("server")||(c=(0,t.createElement)(i.parseHtml.call(this),{})),this.__properties=Object.assign(Object.assign(Object.assign({},this.__slots),o),e),this.__children=c||[],this.removeAttribute("server"),this.innerHTML="";const a=this.__component(),l=e=>p.call(this,e);(0,s.isPromise)(a)?(0,s.getAsyncComponent)(a,this.tagName).then(l):l(a)}function a(e,r,n){if(!this.__mounted)return;n=null==n?void 0:n;let i=this.__properties;"props"===e?i=Object.assign(Object.assign({},i),s.parseJson.call(this,n)):i[(0,s.getPropKey)(e)]=n,this.__properties=i,(0,o.render)((0,t.createElement)(this.__instance,Object.assign(Object.assign({},i),{parent:this,children:this.__children})),this)}function l(){(0,o.render)(null,this)}function p(e){const{tagName:r}=this,{wrapComponent:n}=this.__options;if(!e)return void console.error(s.ErrorTypes.Missing,`: <${r.toLowerCase()}>`);n&&(e=n(e)),this.__instance=e,this.__mounted=!0;const i=Object.assign(Object.assign({},this.__properties),{parent:this,children:this.__children});(0,o.render)((0,t.createElement)(e,i),this)}e.define=function(e,r,n={}){const{wrapComponent:o}=n,i="undefined"==typeof window,p=(0,s.getElementTag)(e);if(!i)return void customElements.define(p,function(e,t={}){var r;const{attributes:n=[]}=t;if("undefined"!=typeof Reflect&&Reflect.construct){const r=function(){const n=Reflect.construct(HTMLElement,[],r);return n.__mounted=!1,n.__component=e,n.__properties={},n.__slots={},n.__children=void 0,n.__options=t,n};return r.observedAttributes=["props",...n],r.prototype=Object.create(HTMLElement.prototype),r.prototype.constructor=r,r.prototype.connectedCallback=c,r.prototype.attributeChangedCallback=a,r.prototype.disconnectedCallback=l,r}return r=class extends HTMLElement{constructor(){super(...arguments),this.__mounted=!1,this.__component=e,this.__properties={},this.__slots={},this.__children=void 0,this.__options=t}connectedCallback(){c.call(this)}attributeChangedCallback(...e){a.call(this,...e)}disconnectedCallback(){l.call(this)}},r.observedAttributes=["props",...n],r}(r,n));const u=r();if((0,s.isPromise)(u))throw new Error(`${s.ErrorTypes.Promise} : <${e}>`);let d=u;return o&&(d=o(u)),e=>(0,t.createElement)(p,{server:!0},[(0,t.createElement)("script",{type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(e)}}),(0,t.createElement)(d,e)])}})(),n})()));