Step 3 - Integrate all tasks into the build system; apply changes across the board.

Author: klerick

apps/host-application/project.json

@@ -45,13 +45,13 @@
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "5mb",
+              "maximumError": "5mb"
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "4kb",
-              "maximumError": "8kb"
+              "maximumWarning": "1mb",
+              "maximumError": "8mb"
             }
           ],
           "outputHashing": "all"

libs/nx-angular-mf/src/builders/build/index.ts

@@ -1,8 +1,10 @@
 import { BuilderContext, createBuilder } from '@angular-devkit/architect';
 import { buildApplication } from '@angular-devkit/build-angular';
+import { Plugin } from 'esbuild';
 
 import { BuildExecutorSchema } from './schema';
-import { getMapName, prepareConfig } from '../helpers';
+import { getMapName, indexHtml, loadModule, prepareConfig } from '../helpers';
+import { entryPointForExtendDependencies, importMapConfigPlugin, serverSSRPlugin, moveCustomLoaderPlugin } from '../es-plugin';
 
 
 export async function* runBuilder(
@@ -30,10 +32,26 @@ export async function* runBuilder(
     (i) => i.packageName
   );
 
+  const esPluginPromise = optionsMfe.esPlugins.map((item) =>
+    loadModule<Plugin>(item, options.tsConfig, context.logger)
+  );
+
+  const esPlugins = await Promise.all(esPluginPromise);
+  const mainTransform = await indexHtml(optionsMfe);
+
+  const resultEsBuild = [
+    ...esPlugins,
+    entryPointForExtendDependencies(optionsMfe),
+    importMapConfigPlugin(optionsMfe),
+    serverSSRPlugin(optionsMfe.deployUrl),
+    moveCustomLoaderPlugin(),
+  ];
+
   const extensions = {
-    codePlugins: [],
-    indexHtmlTransformer: (input) => {
-      return input;
+    codePlugins: resultEsBuild,
+    indexHtmlTransformer: async (input) => {
+      const mainTransformResult = await mainTransform(input);
+      return optionsMfe.indexHtmlTransformer(mainTransformResult);
     },
   };
 

libs/nx-angular-mf/src/builders/custom-loader/custom-loader.ts

@@ -5,7 +5,7 @@ import {
   DeferredPromise,
   resolveModulePath,
 } from './custom-loader-utils';
-import { getResultImportMap } from '../helpers';
+import { getResultImportMap, IMPORT_MAP_CONFIG_NAME } from '../helpers/init-import-map-utils';
 import { pathToFileURL } from 'url';
 // @ts-expect-error should be esm
 import type { ImportMap } from '@jspm/import-map';
@@ -21,12 +21,12 @@ const fakeRootPath = pathToFileURL(
 ).toString();
 
 async function initImportMap(deployHost: string) {
-  const deployUrl = new URL('importmap.json', deployHost);
+  const deployUrl = new URL(IMPORT_MAP_CONFIG_NAME, deployHost);
   const importMapConfig = await fetch(deployUrl)
     .then((r) => r.json())
     .catch((err) => {
       const newError = new Error(
-        `Fetch "importmap.json" from "${deployHost}" failed`,
+        `Fetch "${IMPORT_MAP_CONFIG_NAME}" from "${deployHost}" failed`,
         { cause: err }
       );
       throw newError;

libs/nx-angular-mf/src/builders/es-plugin/index.ts

@@ -1,2 +1,4 @@
 export * from './entry-point-for-extend-dependencies'
 export * from './import-map-config'
+export * from './server-ssr-plugin'
+export * from './move-custom-loader-plugin'

libs/nx-angular-mf/src/builders/es-plugin/move-custom-loader-plugin.ts

@@ -14,18 +14,14 @@ export function moveCustomLoaderPlugin(): Plugin {
         ...build.initialOptions.entryPoints,
         [customLoaderName]: customLoaderName,
       };
-      build.initialOptions.external = [
-        ...build.initialOptions.external,
-        './server.mjs',
-      ];
       build.onResolve(
         { filter: new RegExp('^' + customLoaderName) },
         ({ kind, path }) => {
-          console.log(kind, path);
           if (kind === 'import-statement') {
             return {
               path: join(pathToCustomLoaderFolder, 'custom-loader.js'),
             };
+
           }
           return {
             path: path,