[TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap #513

jogelin · 2024-03-13T16:57:51Z

Related to #489

Do not process host during `initFederation`

The Host importmap.json is directly included in index.html. No need to process it anymore.
The Host shared libraries are accessible before the Host is bootstrapped.
Host externals are directly read from es-module-shims when processing the remotes

Remote unnecessary global cache for loading the remotes

The processRemoteInfo and the loadRemoteModule are using directly es-module-shims
No DOM modifications.
The es-module-shims is directly used to load modules instead of caching not-updated

Process the remotes in parallel

Runtime initialization with a lot of remotes can be slow. Use Promises.all for processing them in parallel.

With that approach, I can now use the import map override principle natively. All of the modifications were not required but I thought it was interesting to improve the bootstrap at runtime.

I am of course open to the discussion ;)

fix angular-architects#446

…f the `<body>`

…al `sms-module-shims` options into `index.html`

…ms-init-options feat(nf): Add `esmsInitOptions` to Angular builder to inject additional `esms-module-shims` options into `index.html`

…ap-to-head fix(nf): Inject `importmap-shim` to the `<head>` instead of the end of the `<body>`

…se-script-tags fix(nf): Remove orphans `</scripts>` tags during `updateScriptTags`

Fix esbuild Adapter Results

fix(nf): properly handle outputPath object

…pendency

…l-peer-dep-conflict fix(dep): fix peer dependency `browser-sync` not aligned with root dependency

fix(test): fix jest tests

fix(lint): fix linting

…tion-config ci: init Github actions config file

…ule to ensure having latest importMap

jogelin · 2024-03-13T18:32:17Z

libs/native-federation-core/src/lib/core/write-import-map.ts

Do not process host during initFederation

During the build, an importmap.json is already generated.
I just adapted the code to apply the same modifications done by the deleted processHostInfo

jogelin · 2024-03-13T18:33:10Z

libs/native-federation-core/src/lib/core/write-import-map.ts

    };
  }, {});

-  const importMap = { imports };
+  const exposesImports = exposes.reduce((acc, cur) => {


Do not process host during initFederation

Add the exposes when the remotes are loaded independently

jogelin · 2024-03-13T18:37:17Z

libs/native-federation-runtime/src/lib/init-federation.spec.ts

Remote unnecessary global cache for loading the remotes

To ensure every work like before, I covered the initFederation and the processRemoteInfo.

jogelin · 2024-03-13T18:37:43Z

libs/native-federation-runtime/src/lib/init-federation.ts

@@ -18,13 +16,8 @@ export async function initFederation(
      ? await loadManifest(remotesOrManifestUrl)
      : remotesOrManifestUrl;

-  const hostImportMap = await processHostInfo();


Do not process host during initFederation

jogelin · 2024-03-13T18:38:39Z

libs/native-federation-runtime/src/lib/init-federation.ts

  const remotesImportMap = await processRemoteInfos(remotes);
-
-  const importMap = mergeImportMaps(hostImportMap, remotesImportMap);


Remote unnecessary global cache for loading the remotes

No DOM modifications.

jogelin · 2024-03-13T18:40:18Z

libs/native-federation-runtime/src/lib/init-federation.ts


  for (const shared of remoteInfo.shared) {
+    const defaultExternalUrl = getDefaultExternalUrl(currentImportMap, shared);


Do not process host during initFederation

Host externals are directly read from es-module-shims when processing the remotes

jogelin · 2024-03-13T18:41:56Z

libs/native-federation-runtime/src/lib/load-remote-module.ts

Because we are using importShim<Default, Exports> from es-module-shims
I applied the same types to the loadRemoteModule

jogelin · 2024-03-13T18:42:29Z

libs/native-federation-runtime/src/lib/load-remote-module.ts

  const options = normalizeOptions(optionsOrRemoteName, exposedModule);

  await ensureRemoteInitialized(options);

  const remoteName = getRemoteNameByOptions(options);
-  const remote = getRemote(remoteName);


Remote unnecessary global cache for loading the remotes

The es-module-shims is directly used to load modules instead of caching not-updated

jogelin · 2024-03-13T18:43:54Z

libs/native-federation/src/builders/build/builder.ts

  }
+  if (fileName === '/importmap.json') {


Also update the generated importmap.json with the debug information like we do for the remoteEntry.json

jogelin · 2024-03-13T18:44:19Z

libs/native-federation/src/utils/updateIndexHtml.ts

@@ -51,5 +51,14 @@ export function updateScriptTags(
  );
  indexContent = indexContent.replace(/<script src="main.*?><\/script>/, '');
  indexContent = indexContent.replace('</body>', `${htmlFragment}</body>`);
+
+  // add link to importmap.json
+  const scriptTagImportMap =


Do not process host during initFederation

The Host importmap.json is directly included in index.html. No need to process it anymore.

manfredsteyer · 2024-03-15T15:19:06Z

Thanks for this. I'm afraid this won't work. Perhaps we have different ideas in mind.

One aspect of federation is that it negotiates the versions to use. It might decide to go with a higher minor version provided by a remote. Hence, we cannot directly include the host's import map.

Also, we cannot rely on import map overrides, as this is only supported via shims, while the idea of module federation is to eventually provide the option to work without shims.

jogelin · 2024-03-15T15:46:47Z

One aspect of federation is that it negotiates the versions to use. It might decide to go with a higher minor version provided by a remote. Hence, we cannot directly include the host's import map.

I think I missed something sorry.
Could you indicate where in the code the negotiation of versions is done?
Is it related to the externals cache?
Because I kept the principle of using the version of the host or another remote when processing the remote (see the tests).

Also, we cannot rely on import map overrides, as this is only supported via shims, while the idea of module federation is to eventually provide the option to work without shims.

Ok, I understand.
I don't know if you saw my tweet about the single-spa agenda? It seems it is in discussion for single-spa to use es-module-shims instead of SystemJS.
Something really interesting in the post is the part:

We also discussed possible collaboration with Zack Jackson on module federation's new runtime (called MFP) and whether that could help. Also discuss whether a service worker would be necessary or helpful to hook into the browser's loading of modules.

It is an interesting idea to hook files using a service worker and it seems this is what they discussed with Zack Jackson.
I don't want to push for the overrides, the goal is not to use the overrides but to provide a way to change dynamically the URL of a module. If we use a service worker, for example on the manifest, it will not be linked to es-module-shims anymore.

In the current code, one thing to notice is that injecting the exposes in the importmap does not change anything because the exposes are always read from the cache.

That PR can be split in two.
If the injection of the host doesn't fit, the most important part is to keep the list of remotes up to date with the es-module-shims which is still used for now in the loadRemoteModule right?
My question is why do we create a cache that is not up to date when we can directly use es-module-shims as a cache?
Why do we use the importShim with an URL instead of using the key of the exposes?

wszydlak and others added 19 commits February 1, 2024 12:58

fix(nf): properly handle outputPath object

faf5f94

fix angular-architects#446

Write actual contents, not text representation

d36e63c

fix(nf): Inject importmap-shim to the <head> instead of the end o…

2c687f1

…f the `<body>`

feat(nf): Add esmsInitOptions to Angular builder to inject addition…

40849a5

…al `sms-module-shims` options into `index.html`

fix(nf): Remove orphans </scripts> tags after updateScriptTags

7a4b3af

Merge pull request angular-architects#498 from jogelin/add-builder-es…

7edb1f1

…ms-init-options feat(nf): Add `esmsInitOptions` to Angular builder to inject additional `esms-module-shims` options into `index.html`

Merge pull request angular-architects#499 from jogelin/inject-importm…

9897a1f

…ap-to-head fix(nf): Inject `importmap-shim` to the `<head>` instead of the end of the `<body>`

Merge pull request angular-architects#500 from jogelin/fix-orphan-clo…

3ee67ba

…se-script-tags fix(nf): Remove orphans `</scripts>` tags during `updateScriptTags`

Merge pull request angular-architects#481 from FlorianRappl/patch-1

3410927

Fix esbuild Adapter Results

Merge pull request angular-architects#455 from wszydlak/patch-2

775db9d

fix(nf): properly handle outputPath object

fix(dep): fix peer dependency browser-sync not aligned with root de…

4eaa04e

…pendency

fix(test): fix jest tests

f95cee8

fix(lint): fix linting

de0b92f

ci: init Github actions config file

bbaf18c

Merge pull request angular-architects#503 from jogelin/fix-npm-instal…

d6998ba

…l-peer-dep-conflict fix(dep): fix peer dependency `browser-sync` not aligned with root dependency

Merge pull request angular-architects#504 from jogelin/fix-tests

041d478

fix(test): fix jest tests

Merge pull request angular-architects#505 from jogelin/fix-linting

8fc5f7e

fix(lint): fix linting

Merge pull request angular-architects#506 from jogelin/init-github-ac…

1c88a77

…tion-config ci: init Github actions config file

feat(nf): Use es-module-shims during initFederation and loadRemoteMod…

b74451f

…ule to ensure having latest importMap

jogelin commented Mar 13, 2024

View reviewed changes

jogelin mentioned this pull request Mar 14, 2024

Use more importmap default behaviours #489

Open

manfredsteyer force-pushed the main branch from 719b39d to bb87266 Compare March 15, 2024 17:09

jogelin mentioned this pull request Mar 16, 2024

[TBD] feat(nf): Add exposes in the generated importmap #515

Closed

jogelin changed the title ~~feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap~~ [TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap Mar 16, 2024

This was referenced Mar 16, 2024

feat(nf): Process Remote Infos in Parallel #516

Merged

feat(nf): Use es module shims fully instead of global cache not in sync #517

Open

[TBD] feat(nf): Inject host importmap directly into the index.html instead of processing it at runtime #518

Closed

jogelin marked this pull request as draft March 16, 2024 07:18

jogelin closed this Apr 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap #513

[TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap #513

jogelin commented Mar 13, 2024 •

edited

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

jogelin Mar 13, 2024

manfredsteyer commented Mar 15, 2024

jogelin commented Mar 15, 2024

		const remotesImportMap = await processRemoteInfos(remotes);

		const importMap = mergeImportMaps(hostImportMap, remotesImportMap);


		for (const shared of remoteInfo.shared) {
		const defaultExternalUrl = getDefaultExternalUrl(currentImportMap, shared);

[TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap #513

[TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap #513

Conversation

jogelin commented Mar 13, 2024 • edited

Do not process host during initFederation

Remote unnecessary global cache for loading the remotes

Process the remotes in parallel

Choose a reason for hiding this comment

Do not process host during initFederation

Choose a reason for hiding this comment

Do not process host during initFederation

Choose a reason for hiding this comment

Remote unnecessary global cache for loading the remotes

Choose a reason for hiding this comment

Do not process host during initFederation

Choose a reason for hiding this comment

Remote unnecessary global cache for loading the remotes

Choose a reason for hiding this comment

Do not process host during initFederation

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Remote unnecessary global cache for loading the remotes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Do not process host during initFederation

manfredsteyer commented Mar 15, 2024

jogelin commented Mar 15, 2024

jogelin commented Mar 13, 2024 •

edited

Do not process host during `initFederation`

Do not process host during `initFederation`

Do not process host during `initFederation`

Do not process host during `initFederation`

Do not process host during `initFederation`

Do not process host during `initFederation`