@appshell/react 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.2](https://github.com/navaris/appshell/compare/@appshell/react@0.2.1...@appshell/react@0.2.2) (2024-01-04)
+
+
+### Bug Fixes
+
+* capture direct dependencies passed to FederatedComponent for re-render ([3621879](https://github.com/navaris/appshell/commit/36218793a5cb47f74bd8d1ce93deffdb1b85cd1c))
+
+
+
+
+
+## [0.2.1](https://github.com/navaris/appshell/compare/@appshell/react@0.2.0...@appshell/react@0.2.1) (2023-08-29)
+
+
+### Bug Fixes
+
+* appshell loader override check ([aedda4a](https://github.com/navaris/appshell/commit/aedda4abf81560297dce03df09fba68e8785242f))
+
+
+
+
+
 # [0.2.0](https://github.com/navaris/appshell/compare/@appshell/react@0.2.0-alpha.0...@appshell/react@0.2.0) (2023-08-28)
 
 **Note:** Version bump only for package @appshell/react

package/dist/main.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.react);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{o.S={};var e={},t={};o.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];o.o(o.S,r)||(o.S[r]={}),o.S[r];var c=[];return e[r]=c.length?Promise.all(c).then((()=>e[r]=1)):1}}})();var n={};return(()=>{o.r(n),o.d(n,{FederatedComponent:()=>v,GlobalConfigProvider:()=>u,ManifestProvider:()=>i,MetadataProvider:()=>E,ReactHost:()=>g,jsonResource:()=>j,useGlobalConfig:()=>m,useManifest:()=>$,useMetadata:()=>S});const e=new Set,t=new Set,r=new Map;var a=o(156),c=o.n(a);const s=(0,a.createContext)({remotes:{},modules:{},environment:{}}),i=({manifest:e,children:t})=>c().createElement(s.Provider,{value:e},t),l=(s.Consumer,s),d=(0,a.createContext)({index:{}}),u=({config:e,children:t})=>c().createElement(d.Provider,{value:e},t),f=(d.Consumer,d),m=()=>c().useContext(f),p=({remote:e,reason:t})=>c().createElement("div",{style:{border:"3px solid red"}},c().createElement("h5",null,`Error loading federated component '${e}.'`),c().createElement("span",{style:{fontSize:"1rem"}},t)),h=({remote:n,fallback:s,...l})=>{const d=m(),[u,f]=(0,a.useState)();return(0,a.useEffect)((()=>{let a=!1;const s=(n=>async a=>{let c;const s=n.index[a];if(!s)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const i=await(async e=>{if(r.has(e))return r.get(e);r.set(e,void 0);const t=await fetch(e);if(t.ok)return t.json();const o=await t.text();throw new Error(`Failed to get manifest from ${e}. ${o}`)})(s);if(i){r.set(s,i);const l=i.remotes[a],d=i.environment[l.scope]||{},u=n.overrides?.environment[l.scope]||{};if(window[`__appshell_env__${l.scope}`]={...d,...u},t.has(l.remoteEntryUrl)||await(async t=>{const r=document.createElement("script");return new Promise(((o,n)=>{e.has(t)?o(!1):(e.add(t),r.src=t,r.type="text/javascript",r.async=!0,r.onload=()=>{console.debug(`Remote entry fetched from '${t}'.`),o(!0)},r.onerror=()=>{const e=`Failed to fetch remote entry from '${t}'.`;console.error(e),n(e)},document.head.appendChild(r))})).finally((()=>{document.head.contains(r)&&document.head.removeChild(r)}))})(l.remoteEntryUrl))return t.add(l.remoteEntryUrl),c=await(async(e,t,r="default")=>{console.debug(`loading federated component: { scope: ${e}, module: ${t}, shareScope: ${r} }`),await o.I(r);const n=window[e];if(!n)throw new Error(`Failed to find module container ${e}`);await n.init(o.S[r]);const a=await n.get(t);if(!a)throw new Error(`Invalid factory produced by container for module ${t}.`);const c=a();return console.debug(`federated component loaded: { scope: ${e}, module: ${t}, shareScope: ${r} }`),c.default})(l.scope,l.module,l.shareScope),[c,i]}return[null,null]}catch(e){throw new Error(`Failed to load component '${a}'. ${e?.toString()}`)}})(d);return a||async function(){try{a=!0,f(void 0);const[e,t]=await s(n);if(!e)return;a=!1,f(c().createElement(i,{manifest:t},c().createElement(e,l)))}catch(e){f(c().createElement(p,{remote:n,reason:`${e}`}))}}(),()=>{a=!1}}),[n,d]),console.debug(`rendering FederatedComponent[${n}], loading=${!u}`),c().createElement(c().Fragment,null,u||s)};h.defaultProps={fallback:void 0};const v=h;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},y.apply(this,arguments)}const w=({configUrl:e,remote:t,fallback:r,...o})=>{const[n,s]=c().useState();return(0,a.useEffect)((()=>{n||(async()=>{const t=await fetch(e);if(t.ok){const e=await t.json();s(e)}else s({index:{}})})()}),[n,e]),n?c().createElement(u,{config:n},c().createElement(v,y({remote:t,fallback:r},o))):null};w.defaultProps={fallback:void 0};const g=w,b=(0,a.createContext)({}),E=({metata:e,children:t})=>c().createElement(b.Provider,{value:e},t),x=(b.Consumer,b),$=()=>c().useContext(l),S=()=>c().useContext(x),j=e=>{let t,r="pending";const o=fetch(e,{headers:{"Content-Type":"application/json",Accept:"application/json"}}).then((e=>{if(e.ok)return e.json().then((e=>{r="success",t=e}));r="error",t=new Error(`${e.status} ${e.statusText} ${e.url}`)}));return{read(){if("pending"===r)throw o;if("error"===r)throw t;if("success"===r)return t}}}})(),n})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.react);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{o.S={};var e={},t={};o.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];o.o(o.S,r)||(o.S[r]={}),o.S[r];var c=[];return e[r]=c.length?Promise.all(c).then((()=>e[r]=1)):1}}})();var n={};return(()=>{o.r(n),o.d(n,{FederatedComponent:()=>h,GlobalConfigProvider:()=>u,ManifestProvider:()=>i,MetadataProvider:()=>E,ReactHost:()=>b,jsonResource:()=>S,useGlobalConfig:()=>m,useManifest:()=>$,useMetadata:()=>j});const e=new Set,t=new Set,r=new Map;var a=o(156),c=o.n(a);const s=(0,a.createContext)({remotes:{},modules:{},environment:{}}),i=({manifest:e,children:t})=>c().createElement(s.Provider,{value:e},t),l=(s.Consumer,s),d=(0,a.createContext)({index:{}}),u=({config:e,children:t})=>c().createElement(d.Provider,{value:e},t),f=(d.Consumer,d),m=()=>c().useContext(f),p=({remote:e,reason:t})=>c().createElement("div",{style:{border:"3px solid red"}},c().createElement("h5",null,`Error loading federated component '${e}.'`),c().createElement("span",{style:{fontSize:"1rem"}},t)),v=({remote:n,fallback:s,...l})=>{const d=m(),[u,f]=(0,a.useState)();return(0,a.useEffect)((()=>{let a=!1;const s=(n=>async a=>{let c;const s=n.index[a];if(!s)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const i=await(async e=>{if(r.has(e))return r.get(e);r.set(e,void 0);const t=await fetch(e);if(t.ok)return t.json();const o=await t.text();throw new Error(`Failed to get manifest from ${e}. ${o}`)})(s);if(i){r.set(s,i);const l=i.remotes[a],d=i.environment[l.scope]||{},u=n.overrides?.environment&&n.overrides?.environment[l.scope]||{};if(window[`__appshell_env__${l.scope}`]={...d,...u},t.has(l.remoteEntryUrl)||await(async t=>{const r=document.createElement("script");return new Promise(((o,n)=>{e.has(t)?o(!1):(e.add(t),r.src=t,r.type="text/javascript",r.async=!0,r.onload=()=>{console.debug(`Remote entry fetched from '${t}'.`),o(!0)},r.onerror=()=>{const e=`Failed to fetch remote entry from '${t}'.`;console.error(e),n(e)},document.head.appendChild(r))})).finally((()=>{document.head.contains(r)&&document.head.removeChild(r)}))})(l.remoteEntryUrl))return t.add(l.remoteEntryUrl),c=await(async(e,t,r="default")=>{console.debug(`loading federated component: { scope: ${e}, module: ${t}, shareScope: ${r} }`),await o.I(r);const n=window[e];if(!n)throw new Error(`Failed to find module container ${e}`);await n.init(o.S[r]);const a=await n.get(t);if(!a)throw new Error(`Invalid factory produced by container for module ${t}.`);const c=a();return console.debug(`federated component loaded: { scope: ${e}, module: ${t}, shareScope: ${r} }`),c.default})(l.scope,l.module,l.shareScope),[c,i]}return[null,null]}catch(e){throw new Error(`Failed to load component '${a}'. ${e?.toString()}`)}})(d);return a||async function(){try{a=!0,f(void 0);const[e,t]=await s(n);if(!e)return;a=!1,f(c().createElement(i,{manifest:t},c().createElement(e,l)))}catch(e){f(c().createElement(p,{remote:n,reason:`${e}`}))}}(),()=>{a=!1}}),[n,d,...Object.values(l)]),console.debug(`rendering FederatedComponent[${n}], loading=${!u}`),c().createElement(c().Fragment,null,u||s)};v.defaultProps={fallback:void 0};const h=v;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},y.apply(this,arguments)}const w=({configUrl:e,remote:t,fallback:r,...o})=>{const[n,s]=c().useState();return(0,a.useEffect)((()=>{n||(async()=>{const t=await fetch(e);if(t.ok){const e=await t.json();s(e)}else s({index:{}})})()}),[n,e]),n?c().createElement(u,{config:n},c().createElement(h,y({remote:t,fallback:r},o))):null};w.defaultProps={fallback:void 0};const b=w,g=(0,a.createContext)({}),E=({metata:e,children:t})=>c().createElement(g.Provider,{value:e},t),x=(g.Consumer,g),$=()=>c().useContext(l),j=()=>c().useContext(x),S=e=>{let t,r="pending";const o=fetch(e,{headers:{"Content-Type":"application/json",Accept:"application/json"}}).then((e=>{if(e.ok)return e.json().then((e=>{r="success",t=e}));r="error",t=new Error(`${e.status} ${e.statusText} ${e.url}`)}));return{read(){if("pending"===r)throw o;if("error"===r)throw t;if("success"===r)return t}}}})(),n})()));

package/dist/types/config/src/mappers/appshell.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appshell.config.d.ts","sourceRoot":"","sources":["../../../../../../config/src/mappers/appshell.config.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,gBAAgB,EAEhB,gBAAgB,EAChB,SAAS,EACV,MAAM,UAAU,CAAC;AA6DlB,eAAO,MAAM,kBAAkB,wDACnB,gBAAgB,QACpB,SAAS,gCAQhB,CAAC"}
+{"version":3,"file":"appshell.config.d.ts","sourceRoot":"","sources":["../../../../../../config/src/mappers/appshell.config.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,gBAAgB,EAEhB,gBAAgB,EAChB,SAAS,EACV,MAAM,UAAU,CAAC;AAiElB,eAAO,MAAM,kBAAkB,wDACnB,gBAAgB,QACpB,SAAS,gCAQhB,CAAC"}

package/dist/types/config/src/register.d.ts

@@ -1,4 +1,4 @@
 import { AppshellManifest } from './types';
-declare const _default: (manifest: AppshellManifest, registryPathOrUrl: string) => Promise<void>;
+declare const _default: (manifest: AppshellManifest, registryPathOrUrl: string, allowOverrides?: boolean) => Promise<void>;
 export default _default;
 //# sourceMappingURL=register.d.ts.map

package/dist/types/config/src/register.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../../../config/src/register.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwB,gBAAgB,EAAmB,MAAM,SAAS,CAAC;mCAclD,gBAAgB,qBAAqB,MAAM;AAA3E,wBAuCE"}
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../../../config/src/register.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwB,gBAAgB,EAAmB,MAAM,SAAS,CAAC;mCAetE,gBAAgB,qBACP,MAAM;AAF3B,wBA2CE"}

package/dist/types/loader/src/remoteLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remoteLoader.d.ts","sourceRoot":"","sources":["../../../../../loader/src/remoteLoader.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;iCAwBzC,oBAAoB,uBAClB,MAAM;AADhC,wBA2CI"}
+{"version":3,"file":"remoteLoader.d.ts","sourceRoot":"","sources":["../../../../../loader/src/remoteLoader.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;iCAwBzC,oBAAoB,uBAClB,MAAM;AADhC,wBA4CI"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appshell/react",
-  "version": "0.2.0",
-  "description": "React utilities for loading federated components",
+  "version": "0.2.2",
+  "description": "React utilities for building micro-frontends with Appshell and Module Federation",
   "main": "dist/main.js",
   "types": "dist/types/react/src/index.d.ts",
   "repository": "https://github.com/navaris/appshell.git",
@@ -28,5 +28,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "4669b87311cdb9d3dc7f1e5418669e568a9f8ef1"
+  "gitHead": "e6a546f851057c9443348684401d42fabd7bd236"
 }

package/src/components/FederatedComponent.tsx

@@ -58,7 +58,7 @@ const FederatedComponent = <TProps extends ExtendedProps>({
       active = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [remote, config]);
+  }, [remote, config, ...Object.values(rest)]);
 
   // eslint-disable-next-line no-console
   console.debug(`rendering FederatedComponent[${remote}], loading=${!element}`);