mf-dynamic-remote-component/public/browser.js

Library for loading in dynamic remote components when utilizing webpack Module Federation

!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).browser={})}(this,(function(e){"use strict";function o({path:e,module:o,scope:t}){return[e,o,t].join("")}function t(e){const t=o(e),n=document.getElementById(t);if(n)return window[e.scope]?Promise.resolve(!0):new Promise((e=>{n.onload=o=>{e(!0)}}));const r=document.createElement("script");return r.src=e.path,r.type="text/javascript",r.async=!0,r.id=t,document.head.appendChild(r),new Promise(((o,t)=>{r.onload=()=>{o(!0)},r.onerror=()=>{console.error(`Dynamic Script Error: ${e.path}`),t(new Error(`Dynamic Script Error: ${e.path}`))}}))}async function n(e,o,t){try{await __webpack_init_sharing__("default");const e=window[o];await e.init(__webpack_share_scopes__.default);const n=await window[o].get(t);return n()}catch(n){throw new Error(`Error loading remote module. \n      Please check the url: ${e}, scope: ${o} and module: ${t} \n      -----------------------------------------------\n      ${n}`)}}e.RemoteComponent=function(e){window.remoteMFStore=window.remoteMFStore||{};const r=o(e),i=window.remoteMFStore[r];return i||(window.remoteMFStore[r]=(e=>new Promise((async(o,r)=>{try{await t(e),o(await n(e.path,e.scope,e.module))}catch(e){console.log(`mf-dynamic-remote-component: error getting remote ${e}`),r(e)}})))(e),window.remoteMFStore[r])},e.getDynamicScript=t,e.loadComponent=n,Object.defineProperty(e,"__esModule",{value:!0})}));