mfe-react/example/host/dist/932.js

React Micro-Frontend Component Wrapper

(self.webpackChunk_mfe_react_host=self.webpackChunk_mfe_react_host||[]).push([[932],{932:(e,t,n)=>{"use strict";n.r(t);var r=n(768),o=n.n(r),a=n(262),l=n.n(a),i=n(5),c=n.n(i),u=n(502);function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}let d={shadowDOM:!1,errorHandler:null,fallback:null,log:!1};const p=function(e,t,n){t=Object.assign({},d,t);const r=n?"[MFE "+n+"] ":"",o=function(e){t.log&&("object"==typeof e?window.console.info(r,e):window.console.info(`${r}${e}`))};o("Running MFEComponent");let a=!1,l=null,i=null,p=null;class m extends c().Component{constructor(e){super(e),this.state={hasError:!1,errorMessage:null}}shouldComponentUpdate(e,t){o("shouldComponentUpdate");let{children:n,...r}=e;if(o(r),this.state.hasError)return o("error, BoundaryError should update"),!0;if(!a)return o("module is not yet resolved, BoundaryError should update"),!0;if(l)return o("module is a React component, BoundaryError should update"),!0;if(o("module is not a React component"),p.update){o("It has an update() method, calling it"),r.domElement=p.domElement;try{p.update(r)}catch(e){return this.state.hasError=!0,this.state.errorMessage=e.toString(),!0}return!1}return!0}componentDidCatch(e,t){}static getDerivedStateFromError(e,t,n){return{hasError:!0,errorMessage:`${e?e.toString():e}`}}render(){if(o("BoundaryErrorWrapper is rendering"),this.state.hasError){o("BoundaryError error!"),o(this.state.errorMessage);let e=t.errorHandler;return e?"string"==typeof e?e:c().createElement(e,s({},this.props,{errorMessage:this.state.errorMessage})):c().createElement("div",null,"MFE Component Error: ",this.state.errorMessage)}return c().createElement(c().Fragment,null,this.props.children)}}let f=e.then((e=>{if(o("Promise resolved"),a=!0,l=(e=>e&&e.default&&"function"==typeof e.default&&!e.default.mount)(e),o(`isModuleReactComponent=${l}`),l)return e;o("Module is not a react component"),l=!1;let t=!1;return p=e.default,i=e=>{o("Component render");let n=c().createRef(),[r,a]=c().useState(null);return c().useEffect((()=>{if(o("Non-React Component has rendered in useEffect"),o(e),t&&p.unmount&&(p.unmount(),t=!1),!t){t=!0;try{p.bootstrap&&p.bootstrap(),o("Calling mount"),p.domElement=n.current,p.mount({domElement:p.domElement,...e})}catch(e){a(e.toString())}}return function(){o("Cleanup in useEffect - unmounting"),t&&p.unmount&&(o("Unmounting app"),p.unmount(),t=!1)}}),[]),r?c().createElement("div",null,"MFE Component Error: ",r):c().createElement("div",{ref:n})},{default:i}}));return i=c().lazy((()=>f)),e=>(o("Rendering Component"),t.shadowDOM?c().createElement(m,e,c().createElement(u.Z,null,c().createElement(c().Suspense,{fallback:t.fallback||""},c().createElement(i,e)))):c().createElement(m,e,c().createElement(c().Suspense,{fallback:t.fallback||""},c().createElement(i,e))))},m=()=>o().createElement("div",null,"Loading..."),f=e=>o().createElement("div",{style:{margin:"15px",width:"400px",display:"inline-block",float:"left",minHeight:"200px",border:"1px solid #666"}},o().createElement("div",{style:{borderBottom:"1px solid #ccc",padding:"8px",backgroundColor:"#c0d3db"}},e.title),o().createElement("div",{style:{padding:"10px"}},e.children)),h=p(n.e(48).then(n.t.bind(n,48,23)),null,"Button"),y=p(n.e(982).then(n.t.bind(n,982,23)),{errorHandler:e=>o().createElement("div",null,"Trapped Error: ",e.errorMessage)},"ComponentError"),E=p(n.e(982).then(n.t.bind(n,982,23)),{errorHandler:e=>o().createElement("div",null,"Count: ",e.count)},"ComponentError2"),b=p(n.e(907).then(n.t.bind(n,907,23)).then((5e3,e=>new Promise((t=>{setTimeout((()=>t(e)),5e3)})))),{fallback:o().createElement(m,null)},"DelayedComponent");const w=p(n.e(443).then(n.t.bind(n,443,23)),null,"PlainJavascriptComponent"),g=p(n.e(206).then(n.t.bind(n,206,23)),null,"PlainJavascriptError"),S=p(n.e(831).then(n.t.bind(n,831,23)),null,"VueComponent"),v=p(n.e(659).then(n.t.bind(n,659,23)),null,"DestructiveStyleComponent"),C=p(n.e(198).then(n.t.bind(n,198,23)),{shadowDOM:!0},"ShadowStyleComponent"),O=p(n.e(434).then(n.t.bind(n,434,23)),null,"ReactVersionComponent"),R=p(n.e(420).then(n.t.bind(n,420,23)),null,"SolidComponent"),_=()=>{const[e,t]=o().useState(0),n=()=>{t(e+1)};return o().createElement("div",null,o().createElement("h1",null,"Micro-Frontend Example with mfe-react"),o().createElement("p",null,"Host react version: ",o().version),o().createElement("p",null,"Counter stored as state in the host app: ",o().createElement("b",null,e)," ",o().createElement("button",{onClick:n},"Increment")," "),o().createElement(f,{title:"MFE React Version"},o().createElement(O,null)),o().createElement(f,{title:"Simulating a slow-loading component..."},o().createElement(b,null)),o().createElement(f,{title:"Offer a button to increment host counter above, which gets passed to other components."},o().createElement(h,{msg:"Increment Counter",onclick:n})),o().createElement(f,{title:"Throw an error that is caught with a custom error handler component."},o().createElement(y,{count:e})),o().createElement(f,{title:"Display a static fallback component when a dynamic MFE fails to load"},o().createElement(E,{count:e})),o().createElement(f,{title:"A Plain Javascript component that exposes mount() and update()."},o().createElement(w,{count:e})),o().createElement(f,{title:"A Plain Javascript component that has a trapped error."},o().createElement(g,null)),o().createElement(f,{title:"A Vue3 SFC (Single-File-Component)"},o().createElement(S,{count:e,increment:n})),o().createElement(f,{title:"SolidJS Component"},o().createElement("p",null,"A component built using the SolidJS Framework"),o().createElement(R,{count:e,increment:n})),o().createElement(f,{title:"An MFE that contains a global style rule that affects the host."},o().createElement(v,null)),o().createElement(f,{title:"Guard against style bleed-out using ShadowDOM."},o().createElement(C,{count:e})))};l().render(o().createElement(_,null),document.getElementById("root"))},12:(e,t,n)=>{"use strict";var r=n(586);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,l){if(l!==r){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},980:(e,t,n)=>{e.exports=n(12)()},586:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},553:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(5)),o=l(n(312)),a=l(n(980));function l(e){return e&&e.__esModule?e:{default:e}}function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?s(e):t}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}function m(e,t){return m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},m(e,t)}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var h="undefined"!=typeof window&&window.ShadowRoot&&window.ShadowRoot.prototype.hasOwnProperty("adoptedStyleSheets")&&window.CSSStyleSheet&&window.CSSStyleSheet.prototype.hasOwnProperty("replace"),y="undefined"!=typeof window&&window.Element&&window.Element.prototype.hasOwnProperty("attachShadow"),E=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(i,e);var t,n,a,l=(t=i,function(){var e,n=p(t);if(d()){var r=p(this).constructor;e=Reflect.construct(n,arguments,r)}else e=n.apply(this,arguments);return u(this,e)});function i(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),f(s(t=l.call(this,e)),"state",{initialized:!1}),t.placeholder=r.default.createRef(),t}return n=i,(a=[{key:"componentDidMount",value:function(){var e=this.props,t=e.delegatesFocus,n=e.mode,r=e.stylesheets;this.shadowRoot=this.placeholder.current.parentNode.attachShadow({delegatesFocus:t,mode:n}),r&&(this.shadowRoot.adoptedStyleSheets=r),this.setState({initialized:!0})}},{key:"render",value:function(){return this.state.initialized?o.default.createPortal(this.props.children,this.shadowRoot):this.props.declarative?r.default.createElement("template",{ref:this.placeholder,shadowroot:this.props.mode},this.props.children):r.default.createElement("span",{ref:this.placeholder})}}])&&c(n.prototype,a),i}(r.default.PureComponent);t.default=E,f(E,"constructableStylesheetsSupported",h),f(E,"constructibleStylesheetsSupported",h),f(E,"defaultProps",{declarative:!1,delegatesFocus:!1,mode:"open"}),f(E,"displayName","ReactShadowRoot"),f(E,"propTypes",{declarative:a.default.bool,delegatesFocus:a.default.bool,mode:a.default.oneOf(["open","closed"]),stylesheets:a.default.arrayOf("undefined"!=typeof window?a.default.instanceOf(window.CSSStyleSheet):a.default.any)}),f(E,"shadowRootSupported",y)},502:(e,t,n)=>{"use strict";var r;t.Z=void 0;var o=((r=n(553))&&r.__esModule?r:{default:r}).default;t.Z=o}}]);