@appshell/loader 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/navaris/appshell/compare/@appshell/loader@0.2.1...@appshell/loader@0.3.0) (2024-01-25)
+
+
+### Features
+
+* AppshellComponent impl ([2b82621](https://github.com/navaris/appshell/commit/2b82621c13302f790a8e1c457f9a82f39903fc1f))
+
+
+
+
+
 ## [0.2.1](https://github.com/navaris/appshell/compare/@appshell/loader@0.2.0...@appshell/loader@0.2.1) (2023-08-29)
 
 

package/README.md

@@ -11,7 +11,7 @@
 
 # @appshell/loader
 
-Dynamically load federated components for micro-frontends built with Appshell and Webpack Module federation.
+Dynamically load Appshell components for micro-frontends built with Appshell and Webpack Module federation.
 
 Working examples can be found [here](https://github.com/navaris/appshell/tree/main/examples).
 
@@ -35,7 +35,7 @@ or
 pnpm add -D @appshell/loader
 ```
 
-The default export from this package is the loader function. It is given the global appshell configuration, and returns an async function that can be called to dynamically load federated components.
+The default export from this package is the loader function. It is given the global appshell configuration, and returns an async function that can be called to dynamically load Appshell components.
 
 ```ts
 import componentLoader from '@appshell/loader';

package/__tests__/{loadFederatedComponent.spec.ts → loadAppshellComponent.spec.ts}

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 /* eslint-disable no-underscore-dangle */
-import loadFederatedComponent from '../src/loadFederatedComponent';
+import loadAppshellComponent from '../src/loadAppshellComponent';
 import { ModuleContainer, ShareScope } from '../src/types';
 
 type ComponentType = () => string;
@@ -49,7 +49,7 @@ const containers: Record<string, Record<string, ModuleContainer<ComponentType>>>
   },
 };
 
-describe('loadFederatedComponent', () => {
+describe('loadAppshellComponent', () => {
   beforeEach(() => {
     window.__webpack_init_sharing__ = jest.fn(async (shareScope: string) => {
       // eslint-disable-next-line @typescript-eslint/dot-notation
@@ -70,12 +70,12 @@ describe('loadFederatedComponent', () => {
     window.__webpack_share_scopes__ = {};
   });
 
-  it('should load the federated component from the default scope', async () => {
+  it('should load the Appshell component from the default scope', async () => {
     const scope = 'TestModule';
     const module = './TestComponent';
     const shareScope = undefined;
 
-    const Component = await loadFederatedComponent<ComponentType>(scope, module, shareScope);
+    const Component = await loadAppshellComponent<ComponentType>(scope, module, shareScope);
 
     expect(Component).toBe(TestComponent);
   });
@@ -85,7 +85,7 @@ describe('loadFederatedComponent', () => {
     const module = './TestComponent';
     const shareScope = 'does_not_exist';
 
-    await expect(loadFederatedComponent<ComponentType>(scope, module, shareScope)).rejects.toThrow(
+    await expect(loadAppshellComponent<ComponentType>(scope, module, shareScope)).rejects.toThrow(
       /Failed to find module container/i,
     );
   });
@@ -95,7 +95,7 @@ describe('loadFederatedComponent', () => {
     const module = './TestComponent';
     const shareScope = 'no_factory';
 
-    await expect(loadFederatedComponent<ComponentType>(scope, module, shareScope)).rejects.toThrow(
+    await expect(loadAppshellComponent<ComponentType>(scope, module, shareScope)).rejects.toThrow(
       /Invalid factory produced/i,
     );
   });

package/__tests__/remoteLoader.spec.ts

@@ -3,13 +3,13 @@ import { AppshellManifest } from '@appshell/config';
 import { AppshellGlobalConfig } from '@appshell/config/src/types';
 import fetch, { enableFetchMocks } from 'jest-fetch-mock';
 import * as fetchDynamicScript from '../src/fetchDynamicScript';
-import * as loadFederatedComponent from '../src/loadFederatedComponent';
+import * as loadAppshellComponent from '../src/loadAppshellComponent';
 import remoteLoader from '../src/remoteLoader';
 
 enableFetchMocks();
 
 jest.mock('../src/fetchDynamicScript');
-jest.mock('../src/loadFederatedComponent');
+jest.mock('../src/loadAppshellComponent');
 
 describe('remoteLoader', () => {
   const manifest: AppshellManifest = {
@@ -50,11 +50,11 @@ describe('remoteLoader', () => {
     );
   });
 
-  it('should return the federated component if it is found in the registry', async () => {
+  it('should return the Appshell component if it is found in the registry', async () => {
     const ExpectedComponent = () => 'test component';
     jest.spyOn(fetchDynamicScript, 'default').mockReturnValueOnce(Promise.resolve(true));
     jest
-      .spyOn(loadFederatedComponent, 'default')
+      .spyOn(loadAppshellComponent, 'default')
       .mockResolvedValue(Promise.resolve(ExpectedComponent));
 
     const loadRemote = remoteLoader(config);
@@ -70,7 +70,7 @@ describe('remoteLoader', () => {
       .spyOn(fetchDynamicScript, 'default')
       .mockReturnValueOnce(Promise.resolve(true));
     jest
-      .spyOn(loadFederatedComponent, 'default')
+      .spyOn(loadAppshellComponent, 'default')
       .mockResolvedValue(Promise.resolve(ExpectedComponent));
 
     const loadRemote = remoteLoader(config);
@@ -86,7 +86,7 @@ describe('remoteLoader', () => {
     const ExpectedComponent = () => 'test component';
     jest.spyOn(fetchDynamicScript, 'default').mockReturnValueOnce(Promise.resolve(true));
     jest
-      .spyOn(loadFederatedComponent, 'default')
+      .spyOn(loadAppshellComponent, 'default')
       .mockResolvedValue(Promise.resolve(ExpectedComponent));
 
     const loadRemote = remoteLoader(config);
@@ -99,7 +99,7 @@ describe('remoteLoader', () => {
 
   it('should throw if remote key is not found in the registry', async () => {
     const ExpectedComponent = () => 'test component';
-    jest.spyOn(loadFederatedComponent, 'default').mockResolvedValue(ExpectedComponent);
+    jest.spyOn(loadAppshellComponent, 'default').mockResolvedValue(ExpectedComponent);
 
     const loadRemote = remoteLoader(config);
 
@@ -108,9 +108,9 @@ describe('remoteLoader', () => {
     );
   });
 
-  it('should throw if load federated component fails', async () => {
+  it('should throw if load Appshell component fails', async () => {
     jest.spyOn(fetchDynamicScript, 'default').mockReturnValueOnce(Promise.resolve(true));
-    jest.spyOn(loadFederatedComponent, 'default').mockRejectedValue(new Error('failed'));
+    jest.spyOn(loadAppshellComponent, 'default').mockRejectedValue(new Error('failed'));
 
     const loadRemote = remoteLoader(config);
 

package/dist/main.js

@@ -1 +1 @@
-!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var t=o();for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(self,(()=>(()=>{"use strict";var e={d:(o,t)=>{for(var r in t)e.o(t,r)&&!e.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:t[r]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};(()=>{e.S={};var o={},t={};e.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),o[r])return o[r];e.o(e.S,r)||(e.S[r]={}),e.S[r];var d=[];return o[r]=d.length?Promise.all(d).then((()=>o[r]=1)):1}}})();var o={};e.r(o),e.d(o,{default:()=>a});const t=new Set,r=new Set,n=new Map,a=o=>async a=>{let d;const i=o.index[a];if(!i)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const c=await(async e=>{if(n.has(e))return n.get(e);n.set(e,void 0);const o=await fetch(e);if(o.ok)return o.json();const t=await o.text();throw new Error(`Failed to get manifest from ${e}. ${t}`)})(i);if(c){n.set(i,c);const s=c.remotes[a],l=c.environment[s.scope]||{},f=o.overrides?.environment&&o.overrides?.environment[s.scope]||{};if(window[`__appshell_env__${s.scope}`]={...l,...f},r.has(s.remoteEntryUrl)||await(async e=>{const o=document.createElement("script");return new Promise(((r,n)=>{t.has(e)?r(!1):(t.add(e),o.src=e,o.type="text/javascript",o.async=!0,o.onload=()=>{console.debug(`Remote entry fetched from '${e}'.`),r(!0)},o.onerror=()=>{const o=`Failed to fetch remote entry from '${e}'.`;console.error(o),n(o)},document.head.appendChild(o))})).finally((()=>{document.head.contains(o)&&document.head.removeChild(o)}))})(s.remoteEntryUrl))return r.add(s.remoteEntryUrl),d=await(async(o,t,r="default")=>{console.debug(`loading federated component: { scope: ${o}, module: ${t}, shareScope: ${r} }`),await e.I(r);const n=window[o];if(!n)throw new Error(`Failed to find module container ${o}`);await n.init(e.S[r]);const a=await n.get(t);if(!a)throw new Error(`Invalid factory produced by container for module ${t}.`);const d=a();return console.debug(`federated component loaded: { scope: ${o}, module: ${t}, shareScope: ${r} }`),d.default})(s.scope,s.module,s.shareScope),[d,c]}return[null,null]}catch(e){throw new Error(`Failed to load component '${a}'. ${e?.toString()}`)}};return o})()));
+!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var t=o();for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(self,(()=>(()=>{"use strict";var e={d:(o,t)=>{for(var r in t)e.o(t,r)&&!e.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:t[r]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};(()=>{e.S={};var o={},t={};e.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),o[r])return o[r];e.o(e.S,r)||(e.S[r]={}),e.S[r];var i=[];return o[r]=i.length?Promise.all(i).then((()=>o[r]=1)):1}}})();var o={};e.r(o),e.d(o,{default:()=>a});const t=new Set,r=new Set,n=new Map,a=o=>async a=>{let i;const c=o.index[a];if(!c)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const d=await(async e=>{if(n.has(e))return n.get(e);n.set(e,void 0);const o=await fetch(e);if(o.ok)return o.json();const t=await o.text();throw new Error(`Failed to get manifest from ${e}. ${t}`)})(c);if(d){n.set(c,d);const s=d.remotes[a],l=d.environment[s.scope]||{},f=o.overrides?.environment&&o.overrides?.environment[s.scope]||{};if(window[`__appshell_env__${s.scope}`]={...l,...f},r.has(s.remoteEntryUrl)||await(async e=>{const o=document.createElement("script");return new Promise(((r,n)=>{t.has(e)?r(!1):(t.add(e),o.src=e,o.type="text/javascript",o.async=!0,o.onload=()=>{console.debug(`Remote entry fetched from '${e}'.`),r(!0)},o.onerror=()=>{const o=`Failed to fetch remote entry from '${e}'.`;console.error(o),n(o)},document.head.appendChild(o))})).finally((()=>{document.head.contains(o)&&document.head.removeChild(o)}))})(s.remoteEntryUrl))return r.add(s.remoteEntryUrl),i=await(async(o,t,r="default")=>{console.debug(`loading Appshell component: { scope: ${o}, module: ${t}, shareScope: ${r} }`),await e.I(r);const n=window[o];if(!n)throw new Error(`Failed to find module container ${o}`);await n.init(e.S[r]);const a=await n.get(t);if(!a)throw new Error(`Invalid factory produced by container for module ${t}.`);const i=a();return console.debug(`Appshell component loaded: { scope: ${o}, module: ${t}, shareScope: ${r} }`),i.default})(s.scope,s.module,s.shareScope),[i,d]}return[null,null]}catch(e){throw new Error(`Failed to load component '${a}'. ${e?.toString()}`)}};return o})()));

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/{loadFederatedComponent.d.ts → loadAppshellComponent.d.ts}

@@ -11,4 +11,4 @@ declare global {
 }
 declare const _default: <TComponent>(scope: string, module: string, shareScope?: string) => Promise<TComponent>;
 export default _default;
-//# sourceMappingURL=loadFederatedComponent.d.ts.map
+//# sourceMappingURL=loadAppshellComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadAppshellComponent.d.ts","sourceRoot":"","sources":["../../../../src/loadAppshellComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,SAAS,wBAAwB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7D,MAAM,wBAAwB,EAAE;QAAE,OAAO,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,UAAU,MAAM;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACtD;CACF;4CAIwC,MAAM,UAAU,MAAM;AAA/D,wBAgCE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appshell/loader",
-  "version": "0.2.1",
-  "description": "Utility for loading federated components",
+  "version": "0.3.0",
+  "description": "Utility for loading Appshell components",
   "main": "dist/main.js",
   "types": "dist/loader/src/index.d.ts",
   "repository": "https://github.com/navaris/appshell.git",
@@ -25,5 +25,5 @@
     "appshell"
   ],
   "license": "MIT",
-  "gitHead": "06e1095792287e9fbe3841f25251829fdf9f047b"
+  "gitHead": "554727a36140e4b8f609159795e1011801824108"
 }

package/src/{loadFederatedComponent.ts → loadAppshellComponent.ts}

@@ -16,7 +16,7 @@ type ShareScopes = keyof typeof __webpack_share_scopes__;
 export default async <TComponent>(scope: string, module: string, shareScope = 'default') => {
   // eslint-disable-next-line no-console
   console.debug(
-    `loading federated component: { scope: ${scope}, module: ${module}, shareScope: ${shareScope} }`,
+    `loading Appshell component: { scope: ${scope}, module: ${module}, shareScope: ${shareScope} }`,
   );
 
   // Initializes the share scope. This fills it with known provided modules from this build and all remotes
@@ -39,7 +39,7 @@ export default async <TComponent>(scope: string, module: string, shareScope = 'd
 
   // eslint-disable-next-line no-console
   console.debug(
-    `federated component loaded: { scope: ${scope}, module: ${module}, shareScope: ${shareScope} }`,
+    `Appshell component loaded: { scope: ${scope}, module: ${module}, shareScope: ${shareScope} }`,
   );
 
   const Component = Module.default;

package/src/remoteLoader.ts

@@ -2,7 +2,7 @@
 import { type AppshellManifest } from '@appshell/config';
 import { AppshellGlobalConfig } from 'packages/config/src/types';
 import fetchDynamicScript from './fetchDynamicScript';
-import loadFederatedComponent from './loadFederatedComponent';
+import loadAppshellComponent from './loadAppshellComponent';
 
 const fetchedScriptCache = new Set<string>();
 const fetchedManifestCache = new Map<string, AppshellManifest | undefined>();
@@ -53,7 +53,7 @@ export default (config: AppshellGlobalConfig) =>
           (await fetchDynamicScript(remote.remoteEntryUrl));
         if (loaded) {
           fetchedScriptCache.add(remote.remoteEntryUrl);
-          Component = await loadFederatedComponent<TComponent>(
+          Component = await loadAppshellComponent<TComponent>(
             remote.scope,
             remote.module,
             remote.shareScope,

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

@@ -1 +0,0 @@
-{"version":3,"file":"loadFederatedComponent.d.ts","sourceRoot":"","sources":["../../../../src/loadFederatedComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,SAAS,wBAAwB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7D,MAAM,wBAAwB,EAAE;QAAE,OAAO,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,UAAU,MAAM;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACtD;CACF;4CAIwC,MAAM,UAAU,MAAM;AAA/D,wBAgCE"}