@appshell/loader 0.2.0-alpha.0 → 0.2.0-alpha.1

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.2.0-alpha.1](https://github.com/navaris/appshell/compare/@appshell/loader@0.2.0-alpha.0...@appshell/loader@0.2.0-alpha.1) (2023-08-28)
+
+
+### Features
+
+* environment variable override for federated components ([#27](https://github.com/navaris/appshell/issues/27)) ([d32de0b](https://github.com/navaris/appshell/commit/d32de0b0d1cbb1792715e1b363c80ed4600df155))
+
+
+
+
+
 # [0.2.0-alpha.0](https://github.com/navaris/appshell/compare/@appshell/loader@0.1.0...@appshell/loader@0.2.0-alpha.0) (2023-08-23)
 
 

package/__tests__/remoteLoader.spec.ts

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 import { AppshellManifest } from '@appshell/config';
-import { AppshellRegister } from '@appshell/config/src/types';
+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';
@@ -24,13 +24,24 @@ describe('remoteLoader', () => {
       },
     },
     modules: {},
-    environment: {},
+    environment: {
+      TestModule: {
+        ENV_VAR_A: 'Original value for A',
+      },
+    },
   };
-  const register: AppshellRegister = {
+  const config: AppshellGlobalConfig = {
     index: {
       'TestModule/TestComponent': 'http://test.com/appshell.manifest.json',
     },
     metadata: {},
+    overrides: {
+      environment: {
+        TestModule: {
+          ENV_VAR_A: 'New value for A',
+        },
+      },
+    },
   };
 
   beforeEach(() => {
@@ -46,7 +57,7 @@ describe('remoteLoader', () => {
       .spyOn(loadFederatedComponent, 'default')
       .mockResolvedValue(Promise.resolve(ExpectedComponent));
 
-    const loadRemote = remoteLoader(register);
+    const loadRemote = remoteLoader(config);
     const [ActualComponent, actualManifest] = await loadRemote('TestModule/TestComponent');
 
     expect(ActualComponent).toEqual(ExpectedComponent);
@@ -62,7 +73,7 @@ describe('remoteLoader', () => {
       .spyOn(loadFederatedComponent, 'default')
       .mockResolvedValue(Promise.resolve(ExpectedComponent));
 
-    const loadRemote = remoteLoader(register);
+    const loadRemote = remoteLoader(config);
 
     await loadRemote('TestModule/TestComponent');
     await loadRemote('TestModule/TestComponent');
@@ -71,11 +82,26 @@ describe('remoteLoader', () => {
     expect(fetchDynamicScriptSpy).toHaveBeenCalledTimes(1);
   });
 
+  it('should apply overridden environment values', async () => {
+    const ExpectedComponent = () => 'test component';
+    jest.spyOn(fetchDynamicScript, 'default').mockReturnValueOnce(Promise.resolve(true));
+    jest
+      .spyOn(loadFederatedComponent, 'default')
+      .mockResolvedValue(Promise.resolve(ExpectedComponent));
+
+    const loadRemote = remoteLoader(config);
+
+    await loadRemote('TestModule/TestComponent');
+
+    // eslint-disable-next-line no-underscore-dangle
+    expect(window.__appshell_env__TestModule).toMatchObject({ ENV_VAR_A: 'New value for A' });
+  });
+
   it('should throw if remote key is not found in the registry', async () => {
     const ExpectedComponent = () => 'test component';
     jest.spyOn(loadFederatedComponent, 'default').mockResolvedValue(ExpectedComponent);
 
-    const loadRemote = remoteLoader(register);
+    const loadRemote = remoteLoader(config);
 
     await expect(loadRemote('TestModule/DoesNotExist')).rejects.toThrow(
       /Remote resource not found in registry/i,
@@ -86,7 +112,7 @@ describe('remoteLoader', () => {
     jest.spyOn(fetchDynamicScript, 'default').mockReturnValueOnce(Promise.resolve(true));
     jest.spyOn(loadFederatedComponent, 'default').mockRejectedValue(new Error('failed'));
 
-    const loadRemote = remoteLoader(register);
+    const loadRemote = remoteLoader(config);
 
     await expect(loadRemote('TestModule/TestComponent')).rejects.toThrow(
       /Failed to load component/i,

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 c=o.index[a];if(!c)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const o=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(o){n.set(c,o);const i=o.remotes[a];if(window[`__appshell_env__${i.scope}`]=o.environment[i.scope]||{},r.has(i.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)}))})(i.remoteEntryUrl))return r.add(i.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})(i.scope,i.module,i.shareScope),[d,o]}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 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[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})()));

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,wBAmCE"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"remoteLoader.d.ts","sourceRoot":"","sources":["../../../../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,wBAsCI"}
+{"version":3,"file":"remoteLoader.d.ts","sourceRoot":"","sources":["../../../../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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appshell/loader",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.1",
   "description": "Utility for loading federated components",
   "main": "dist/main.js",
   "types": "dist/loader/src/index.d.ts",
@@ -25,5 +25,5 @@
     "appshell"
   ],
   "license": "MIT",
-  "gitHead": "a4216a032817193034b208f93ac7109458ef2c06"
+  "gitHead": "f87947d0d8b10f74461f1b772d79f36f5bdce9e1"
 }

package/src/remoteLoader.ts

@@ -40,7 +40,12 @@ export default (config: AppshellGlobalConfig) =>
 
         const remote = manifest.remotes[key];
 
-        window[`__appshell_env__${remote.scope}`] = manifest.environment[remote.scope] || {};
+        const environment = manifest.environment[remote.scope] || {};
+        const overrides = config.overrides?.environment[remote.scope] || {};
+        window[`__appshell_env__${remote.scope}`] = {
+          ...environment,
+          ...overrides,
+        };
 
         const loaded =
           fetchedScriptCache.has(remote.remoteEntryUrl) ||