2 lines
4.5 KiB
JavaScript
2 lines
4.5 KiB
JavaScript
import{createElement}from"react";import{render,unmountComponentAtNode}from"react-dom";import retargetEvents from"react-shadow-dom-retarget-events";function inject(){if(window.HTMLElement&&window.HTMLElement._babelES5Adapter||void 0===window.Reflect||void 0===window.customElements||window.customElements.hasOwnProperty("polyfillWrapFlushCallback"))return;const b=HTMLElement;window.HTMLElement=function(){return Reflect.construct(b,[],this.constructor)},HTMLElement.prototype=b.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,b),HTMLElement._babelES5Adapter=!0}const name="CustomElements";function defineElement(a,b,c){const{onUpdate:d,onUnmount:e,onMount:f}=c;inject();const g=a.attributes||[];class h extends HTMLElement{static get observedAttributes(){return["props-json",...g]}connectedCallback(){this._mountPoint=createMountPoint(this,a),f(this,this._mountPoint)}disconnectedCallback(){this._mountPoint&&e(this,this._mountPoint)}attributeChangedCallback(){this._mountPoint&&d(this,this._mountPoint)}}a.quiet&&window.customElements.get(b)||window.customElements.define(b,h)}function isSupported(){return!!(window.customElements&&window.customElements.define)}function createMountPoint(a,b){const{shadow:c}=b;if(c&&a.attachShadow){const b=document.createElement("span");return a.attachShadow({mode:"open"}).appendChild(b),b}return a}function supportsShadow(){return!!(document&&document.body&&document.body.attachShadow)}var CustomElementsStrategy=Object.freeze({name:"CustomElements",defineElement:defineElement,isSupported:isSupported,supportsShadow:supportsShadow});function each(a,b){for(let c=0,d=a.length;c<d;c++)b(a[c])}const name$1="MutationObserver",observers={};function isSupported$1(){return"MutationObserver"in window}function defineElement$1(a,b,c){if(b=b.toLowerCase(),!isValidName(b)){if(a.quiet)return;throw new Error(`Remount: "${b}" is not a valid custom element elName`)}if(observers[b]){if(a.quiet)return;throw new Error(`Remount: "${b}" is already registered`)}const d=new MutationObserver(a=>{each(a,a=>{each(a.addedNodes,a=>{isElement(a)&&checkForMount(a,b,c)})})});d.observe(document.body,{childList:!0,subtree:!0}),observers[name$1]=d,window.addEventListener("DOMContentLoaded",()=>{const a=document.getElementsByTagName(name$1);each(a,a=>checkForMount(a,name$1,c))})}function checkForMount(a,b,c){a.nodeName.toLowerCase()===b?(c.onMount(a,a),observeForUpdates(a,c),observeForRemoval(a,c)):a.children&&a.children.length&&each(a.children,a=>{isElement(a)&&checkForMount(a,b,c)})}function observeForUpdates(a,b){const{onUpdate:c}=b,d=new MutationObserver(a=>{each(a,a=>{const b=a.target;isElement(b)&&c(b,b)})});d.observe(a,{attributes:!0})}function observeForRemoval(a,b){const{onUnmount:c}=b,d=a.parentNode;if(!d)return;const e=new MutationObserver(b=>{each(b,b=>{each(b.removedNodes,b=>{a!==b||isElement(a)&&(e.disconnect(d),c(a,a))})})});e.observe(d,{childList:!0,subtree:!0})}function isValidName(a){return!!(-1!==a.indexOf("-")&&a.match(/^[a-z][a-z0-9-]*$/))}function supportsShadow$1(){return!1}function isElement(a){return!!a}var MutationObserverStrategy=Object.freeze({name:"MutationObserver",observers:observers,isSupported:isSupported$1,defineElement:defineElement$1,supportsShadow:supportsShadow$1});function mount(a,b,c,d){return update(a,b,c,d)}function update(a,b,c,d){const{component:e}=a,f=createElement(e,c);render(f,b),d&&retargetEvents(d.shadowRoot)}function unmount(a,b){unmountComponentAtNode(b)}var ReactAdapter=Object.freeze({mount:mount,update:update,unmount:unmount});let cachedStrategy;function getStrategy(){if(cachedStrategy)return cachedStrategy;const a=[CustomElementsStrategy,MutationObserverStrategy].find(a=>!!a.isSupported());return a||console.warn("Remount: This browser doesn't support the MutationObserver API or the Custom Elements API. Including polyfills might fix this. Remount elements will not work. https://github.com/rstacruz/remount"),cachedStrategy=a,a}function define(a,b){const c=getStrategy();c&&Object.keys(a).forEach(d=>{const e=Object.assign({},b,toElementSpec(a[d])),f=e.adapter||ReactAdapter;c.defineElement(e,d,{onMount(a,b){const c=getProps(a,e.attributes);e.shadow&&e.retarget?f.mount(e,b,c,a):f.mount(e,b,c,null)},onUpdate(a,b){const c=getProps(a,e.attributes);f.update(e,b,c,null)},onUnmount(a,b){f.unmount(e,b)}})})}function toElementSpec(a){return isElementSpec(a)?a:{component:a}}function isElementSpec(a){return"object"==typeof a&&a.component}function getProps(a,b){const c=a.getAttribute("props-json");if(c)return JSON.parse(c);return(b||[]).reduce((b,c)=>(b[c]=a.getAttribute(c),b),{})}export{getStrategy,define};
|