@appshell/loader 0.0.1-alpha.0 → 0.0.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.0.1 (2023-06-15)
+
+**Note:** Version bump only for package @appshell/loader
+
+
+
+
+
+## [0.0.1-alpha.1](https://github.com/navaris/appshell/compare/@appshell/loader@0.0.1-alpha.0...@appshell/loader@0.0.1-alpha.1) (2023-06-15)
+
+
+### Bug Fixes
+
+* hot module replacement support, example updates ([a67d230](https://github.com/navaris/appshell/commit/a67d2303b40f5911373225cc0b4ccf9b67c33d11))
+
+
+
+
+
 ## 0.0.1-alpha.0 (2023-03-19)
 
 **Note:** Version bump only for package @appshell/loader

package/__tests__/fetchDynamicScript.spec.ts

@@ -8,14 +8,19 @@ const mockHead = (event: string) => {
     return element;
   });
   const removeChildSpy = jest.spyOn(document.head, 'removeChild').mockReturnThis();
+  const containsSpy = jest.spyOn(document.head, 'contains').mockReturnValue(true);
 
-  return [appendChildSpy, removeChildSpy];
+  return [appendChildSpy, removeChildSpy, containsSpy];
 };
 
 describe('fetchDynamicScript', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('should successfully resolve when valid script url is provided', async () => {
     mockHead('load');
-    const url = 'http://test.com/somescript.js';
+    const url = 'http://test.com/1/somescript.js';
     const success = await fetchDynamicScript(url);
 
     expect(success).toBe(true);
@@ -23,14 +28,17 @@ describe('fetchDynamicScript', () => {
 
   it('should reject when fetching the script results in an error', async () => {
     mockHead('error');
-    const url = 'http://test.com/somescript.js';
+    const url = 'http://test.com/2/somescript.js';
 
     await expect(fetchDynamicScript(url)).rejects.toMatch(/Failed to fetch remote entry/i);
   });
 
   it('should cleanup script tags when finished', async () => {
-    const [, removeChildSpy] = mockHead('load');
+    const [appendChildSpy, removeChildSpy] = mockHead('load');
+    const url = 'http://test.com/3/somescript.js';
+    await fetchDynamicScript(url);
 
+    expect(appendChildSpy).toHaveBeenCalled();
     expect(removeChildSpy).toHaveBeenCalled();
   });
 });

package/__tests__/loadFederatedComponent.spec.ts

@@ -80,16 +80,6 @@ describe('loadFederatedComponent', () => {
     expect(Component).toBe(TestComponent);
   });
 
-  it('should load the federated component from the share scope', async () => {
-    const scope = 'TestModule2';
-    const module = './TestComponent';
-    const shareScope = 'test_scope';
-
-    const Component = await loadFederatedComponent<ComponentType>(scope, module, shareScope);
-
-    expect(Component).toBe(TestComponent);
-  });
-
   it('should throw if the share scope does not exist', async () => {
     const scope = 'TestModule';
     const module = './TestComponent';

package/__tests__/remoteLoader.spec.ts

@@ -1,5 +1,6 @@
 /** @jest-environment jsdom */
 import { AppshellManifest } from '@appshell/config';
+import * as fetchDynamicScript from '../src/fetchDynamicScript';
 import * as loadFederatedComponent from '../src/loadFederatedComponent';
 import remoteLoader from '../src/remoteLoader';
 
@@ -22,7 +23,10 @@ describe('remoteLoader', () => {
 
   it('should return the federated component if it is found in the manifest', async () => {
     const ExpectedComponent = () => 'test component';
-    jest.spyOn(loadFederatedComponent, 'default').mockResolvedValue(ExpectedComponent);
+    jest.spyOn(fetchDynamicScript, 'default').mockReturnValueOnce(Promise.resolve(true));
+    jest
+      .spyOn(loadFederatedComponent, 'default')
+      .mockResolvedValue(Promise.resolve(ExpectedComponent));
 
     const loadRemote = remoteLoader(manifest);
     const ActualComponent = await loadRemote('TestModule/TestComponent');
@@ -30,6 +34,24 @@ describe('remoteLoader', () => {
     expect(ActualComponent).toEqual(ExpectedComponent);
   });
 
+  it('should not fetch remote entry more than once', async () => {
+    const ExpectedComponent = () => 'test component';
+    const fetchDynamicScriptSpy = jest
+      .spyOn(fetchDynamicScript, 'default')
+      .mockReturnValueOnce(Promise.resolve(true));
+    jest
+      .spyOn(loadFederatedComponent, 'default')
+      .mockResolvedValue(Promise.resolve(ExpectedComponent));
+
+    const loadRemote = remoteLoader(manifest);
+
+    await loadRemote('TestModule/TestComponent');
+    await loadRemote('TestModule/TestComponent');
+    await loadRemote('TestModule/TestComponent');
+
+    expect(fetchDynamicScriptSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('should throw if remote key is not found in the manifest', async () => {
     const ExpectedComponent = () => 'test component';
     jest.spyOn(loadFederatedComponent, 'default').mockResolvedValue(ExpectedComponent);

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:()=>r});const t=new Set,r=o=>async r=>{let n;const a=o.remotes[r];if(!a)throw new Error(`Remote resource not found in manifest. Expected: ${r}`);try{return await(async e=>{const o=document.createElement("script");return new Promise(((r,n)=>{o.src=e,o.type="text/javascript",o.async=!0,o.onload=()=>{t.add(e),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((()=>{t.delete(e),document.head.removeChild(o)}))})(a.url),n=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[r]})(a.scope,a.module,a.shareScope),n}catch(e){throw new Error(`Failed to load component '${r}'. ${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 d=[];return o[r]=d.length?Promise.all(d).then((()=>o[r]=1)):1}}})();var o={};e.r(o),e.d(o,{default:()=>n});const t=new Set,r=new Set,n=o=>async n=>{let a;const d=o.remotes[n];if(!d)throw new Error(`Remote resource not found in manifest. Expected: ${n}`);try{return r.has(d.url)||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)}))})(d.url)?(r.add(d.url),a=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})(d.scope,d.module,d.shareScope),a):null}catch(e){throw new Error(`Failed to load component '${n}'. ${e?.toString()}`)}};return o})()));

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

@@ -1 +1 @@
-{"version":3,"file":"fetchDynamicScript.d.ts","sourceRoot":"","sources":["../../../../src/fetchDynamicScript.ts"],"names":[],"mappings":"8BAE2B,MAAM;AAAjC,wBA8BE"}
+{"version":3,"file":"fetchDynamicScript.d.ts","sourceRoot":"","sources":["../../../../src/fetchDynamicScript.ts"],"names":[],"mappings":"8BAE2B,MAAM;AAAjC,wBAoCE"}

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

@@ -1,4 +1,4 @@
 import { type AppshellManifest } from '@appshell/config';
-declare const _default: (manifest: AppshellManifest) => <TComponent>(key: string) => Promise<TComponent>;
+declare const _default: (manifest: AppshellManifest) => <TComponent>(key: string) => Promise<TComponent | null>;
 export default _default;
 //# sourceMappingURL=remoteLoader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"remoteLoader.d.ts","sourceRoot":"","sources":["../../../../src/remoteLoader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;mCAI/B,gBAAgB,uBAChB,MAAM;AADhC,wBAqBI"}
+{"version":3,"file":"remoteLoader.d.ts","sourceRoot":"","sources":["../../../../src/remoteLoader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;mCAM/B,gBAAgB,uBAChB,MAAM;AADhC,wBAyBI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appshell/loader",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1",
   "description": "Utility for loading federated components",
   "main": "dist/main.js",
   "types": "dist/loader/src/index.d.ts",
@@ -20,5 +20,5 @@
   ],
   "author": "Robert Hamilton <rh@navaris.com>",
   "license": "MIT",
-  "gitHead": "305b39fb81e7c267918dda7d16336e37b2b36643"
+  "gitHead": "b6692924e02579e28ed6399965cc6603dd1acb37"
 }

package/src/fetchDynamicScript.ts

@@ -4,30 +4,36 @@ export default async (url: string) => {
   const element = document.createElement('script');
 
   const cleanup = (): void => {
-    urlCache.delete(url);
-    document.head.removeChild(element);
+    if (document.head.contains(element)) {
+      document.head.removeChild(element);
+    }
   };
 
   return new Promise<boolean>((resolve, reject) => {
-    element.src = url;
-    element.type = 'text/javascript';
-    element.async = true;
-
-    element.onload = () => {
+    if (urlCache.has(url)) {
+      resolve(false);
+    } else {
       urlCache.add(url);
-      // eslint-disable-next-line no-console
-      console.debug(`Remote entry fetched from '${url}'.`);
 
-      resolve(true);
-    };
+      element.src = url;
+      element.type = 'text/javascript';
+      element.async = true;
+
+      element.onload = () => {
+        // eslint-disable-next-line no-console
+        console.debug(`Remote entry fetched from '${url}'.`);
+
+        resolve(true);
+      };
 
-    element.onerror = () => {
-      const message = `Failed to fetch remote entry from '${url}'.`;
-      // eslint-disable-next-line no-console
-      console.error(message);
-      reject(message);
-    };
+      element.onerror = () => {
+        const message = `Failed to fetch remote entry from '${url}'.`;
+        // eslint-disable-next-line no-console
+        console.error(message);
+        reject(message);
+      };
 
-    document.head.appendChild(element);
+      document.head.appendChild(element);
+    }
   }).finally(cleanup);
 };

package/src/loadFederatedComponent.ts

@@ -42,7 +42,7 @@ export default async <TComponent>(scope: string, module: string, shareScope = 'd
     `federated component loaded: { scope: ${scope}, module: ${module}, shareScope: ${shareScope} }`,
   );
 
-  const Component = Module[shareScope as ShareScopes];
+  const Component = Module.default;
 
   return Component;
 };

package/src/remoteLoader.ts

@@ -2,6 +2,8 @@ import { type AppshellManifest } from '@appshell/config';
 import fetchDynamicScript from './fetchDynamicScript';
 import loadFederatedComponent from './loadFederatedComponent';
 
+const fetchedScriptCache = new Set<string>();
+
 export default (manifest: AppshellManifest) =>
   async <TComponent>(key: string) => {
     let Component: TComponent;
@@ -11,14 +13,18 @@ export default (manifest: AppshellManifest) =>
     }
 
     try {
-      await fetchDynamicScript(remote.url);
-      Component = await loadFederatedComponent<TComponent>(
-        remote.scope,
-        remote.module,
-        remote.shareScope,
-      );
+      const loaded = fetchedScriptCache.has(remote.url) || (await fetchDynamicScript(remote.url));
+      if (loaded) {
+        fetchedScriptCache.add(remote.url);
+        Component = await loadFederatedComponent<TComponent>(
+          remote.scope,
+          remote.module,
+          remote.shareScope,
+        );
 
-      return Component;
+        return Component;
+      }
+      return null;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       throw new Error(`Failed to load component '${key}'. ${err?.toString()}`);