Step 2 - Add button to trigger Vite restart for remoteEntry changes; streamline updates without server restarts.

Author: klerick

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

@@ -11,7 +11,7 @@ import {
 } from './custom-loader-utils';
 
 import { Context, DefaultLoad, NextResolve } from './types';
-import { CACHE_FILE, IMPORT_MAP } from './constants';
+import { CACHE_FILE, CLEAR_REMOTE, IMPORT_MAP } from './constants';
 import { join } from 'path';
 import { PREF } from './patch-vite-dev-server';
 import { OutputFileRecord } from '../types';
@@ -37,6 +37,7 @@ let cacheFiles: Map<string, OutputFileRecord> = new Map<
 >();
 const packageNameToImportNameMap = new Map<string, string>();
 
+const remotePackages = new Map<string, string>();
 
 async function getImportMap() {
   if (importMap) return importMap;
@@ -68,6 +69,9 @@ export async function initialize({ port }: { port: MessagePort }) {
         }
         cacheFilesDeferred.resolve(event.data.result);
         break;
+      case CLEAR_REMOTE:
+        remotePackages.clear();
+        break;
     }
   };
 }
@@ -129,14 +133,22 @@ export async function resolve(
     }
   }
 
-  const specifierUrl = new URL(specifier, fakeRootPath);
-
   const cacheFiles = await getCacheFiles();
+
   const dataFromCache = cacheFiles.get(importMapName);
 
+  const specifierUrl = new URL(specifier, fakeRootPath);
   if (dataFromCache && dataFromCache.hash) {
     specifierUrl.searchParams.set('v', dataFromCache.hash);
   }
+  if (!importMapName && resolveUrl) {
+    let tmp = remotePackages.get(specifier);
+    if (!remotePackages.has(specifier)) {
+      tmp = Date.now().toString();
+      remotePackages.set(specifier, tmp);
+    }
+    specifierUrl.searchParams.set('v', tmp);
+  }
 
   return {
     url: specifierUrl.toString(),

libs/nx-angular-mf/src/builders/helpers/transform-html.ts

@@ -99,3 +99,36 @@ export async function indexHtml(
     return serialize(document);
   };
 }
+
+export function addLinkForReload(input: string) {
+  const template = `
+  <div>
+  <a href="#" id="manualReloadDevServerLink">Manual reload dev server</a>
+  <style>
+  #manualReloadDevServerLink {
+    position:absolute;
+    top: 0px;
+    left: 50%;
+  }
+</style>
+  <script type="module">
+  import('/@vite/client').then(r => {
+    document.getElementById('manualReloadDevServerLink').addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation()
+      r.createHotContext('/').send('reload:manual');
+      return false;
+    });
+  })
+
+</script>
+</div>`;
+
+  const linkDiv = parseFragment(template);
+
+  const document = parse(input);
+  const bodyNode = findBody(document);
+  // @ts-ignore
+  bodyNode.childNodes.push(...linkDiv.childNodes);
+  return serialize(document);
+}

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

@@ -13,6 +13,7 @@ import { Plugin } from 'esbuild';
 import { ServeExecutorSchema } from './schema';
 import { BuildExecutorSchema } from '../build/schema';
 import {
+  addLinkForReload,
   deepMergeObject,
   getMapName,
   getPathForRegister,
@@ -27,6 +28,8 @@ import { CACHE_FILE, CLEAR_REMOTE, IMPORT_MAP } from '../custom-loader/constants
 import { OutputFileRecord } from '../types';
 import process from 'node:process';
 import { loadEsmModule } from '../custom-loader/custom-loader-utils';
+// @ts-expect-error need only type
+import { ViteDevServer } from 'vite';
 
 const { port1, port2 } = new MessageChannel();
 
@@ -165,7 +168,7 @@ export async function* runBuilder(
 
   const transforms = {
     indexHtml: async (input: string) => {
-      const mainTransformResult = await mainTransform(input);
+      const mainTransformResult = await mainTransform(addLinkForReload(input));
       return optionsMfe.indexHtmlTransformer(mainTransformResult);
     },
   };
@@ -186,7 +189,7 @@ export async function* runBuilder(
       },
     });
   }
-
+  let serverFromPatch: ViteDevServer;
   const runServer = serveWithVite(
     normalizeOuterOptions,
     '@angular-devkit/build-angular:application',
@@ -196,6 +199,22 @@ export async function* runBuilder(
     extensions
   );
   for await (const output of runServer) {
+    if (targetOptions['ssr'] && !serverFromPatch) {
+      const serverFromPatch = await loadEsmModule<typeof import('vite')>(
+        'vite'
+      ).then((r) => r.default['serverFromPatch']);
+      serverFromPatch.ws.on('reload:manual', async () => {
+        await reloadDevServer(serverFromPatch);
+        serverFromPatch.ws.send({
+          type: 'full-reload',
+          path: '*',
+        });
+        context.logger.info('Page reload sent to client(s).');
+        port1.postMessage({
+          kind: CLEAR_REMOTE,
+        });
+      });
+    }
     yield output;
   }
 }