Step 2 - Trigger update process for test-shared-library changes

Author: klerick

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

@@ -1,2 +1,3 @@
 export const IMPORT_MAP = 'IMPORT_MAP';
 export const CACHE_FILE = 'CACHE_FILE';
+export const CLEAR_REMOTE = 'CLEAR_REMOTE';

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

@@ -131,6 +131,13 @@ export async function resolve(
 
   const specifierUrl = new URL(specifier, fakeRootPath);
 
+  const cacheFiles = await getCacheFiles();
+  const dataFromCache = cacheFiles.get(importMapName);
+
+  if (dataFromCache && dataFromCache.hash) {
+    specifierUrl.searchParams.set('v', dataFromCache.hash);
+  }
+
   return {
     url: specifierUrl.toString(),
     shortCircuit: true,

libs/nx-angular-mf/src/builders/helpers/utils.ts

@@ -1,11 +1,15 @@
 import { getSystemPath, normalize } from '@angular-devkit/core';
-import { workspaceRoot, readJsonFile } from '@nx/devkit';
+import { workspaceRoot, readJsonFile, normalizePath } from '@nx/devkit';
 import { join, sep } from 'path';
 import { ConfigMf, DataForImportMap } from '../types';
 import { getMapName } from './dependencies';
 import { existsSync } from 'fs';
 import { pathToFileURL } from 'node:url';
 import { PREF } from '../custom-loader/patch-vite-dev-server';
+// @ts-expect-error need only type
+import { ViteDevServer } from 'vite';
+// @ts-expect-error need only type
+import type { ɵdestroyAngularServerApp as destroyAngularServerApp } from '@angular/ssr';
 
 export const workspaceRootPath = getSystemPath(normalize(workspaceRoot));
 
@@ -87,3 +91,26 @@ export function getPathForRegister(
     fileName: `.${sep}${fileName}`,
   };
 }
+
+export async function reloadDevServer(server: ViteDevServer) {
+  (
+    server.moduleGraph.getModulesByFile(
+      normalizePath(join(server.config.root, '/main.js'))
+    ) || []
+  ).forEach((m) => server.moduleGraph.invalidateModule(m));
+
+  const { ɵdestroyAngularServerApp } = (await server.ssrLoadModule(
+    '/main.server.mjs'
+  )) as {
+    ɵdestroyAngularServerApp: typeof destroyAngularServerApp;
+  };
+
+  ɵdestroyAngularServerApp();
+
+  (
+    server.moduleGraph.getModulesByFile(
+      normalizePath(join(server.config.root, '/main.server.mjs'))
+    ) || []
+  ).forEach((m) => server.moduleGraph.invalidateModule(m));
+  await server.ssrLoadModule('/main.server.mjs');
+}

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

@@ -19,12 +19,14 @@ import {
   indexHtml,
   loadModule,
   patchBuilderContext,
-  prepareConfig
+  prepareConfig, reloadDevServer
 } from '../helpers';
 import { entryPointForExtendDependencies, importMapConfigPlugin } from '../es-plugin';
 import { register } from 'node:module';
-import { CACHE_FILE, IMPORT_MAP } from '../custom-loader/constants';
+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';
 
 const { port1, port2 } = new MessageChannel();
 
@@ -54,12 +56,17 @@ function getBuilderAction(
         yield result;
         continue;
       }
-
+      let needUpdate = false;
       for (const [key, file] of Object.entries(result.files)) {
         if (key.endsWith('.js.map')) continue;
         const name = key.split('.').at(0);
         const shareObject = mapShareObject.get(name);
         if (file.origin === 'memory' && shareObject) {
+          const prevVersion = fileFromEsBuild.get(name);
+          if (!needUpdate) {
+            needUpdate = prevVersion && prevVersion.hash !== file.hash;
+          }
+
           fileFromEsBuild.set(name, {
             contents: file.contents,
             size: file.contents.byteLength,
@@ -69,12 +76,25 @@ function getBuilderAction(
           });
         }
       }
+      if (needUpdate) {
+        process.nextTick(handleUpdate);
+      }
       port1.postMessage({ kind: CACHE_FILE, result: fileFromEsBuild });
       yield result;
     }
   };
 }
 
+async function handleUpdate() {
+  const server = await loadEsmModule<typeof import('vite')>('vite').then(
+    (r) => r.default['serverFromPatch']
+  );
+  port1.postMessage({
+    kind: CLEAR_REMOTE,
+  });
+  await reloadDevServer(server);
+}
+
 export async function* runBuilder(
   options: ServeExecutorSchema,
   context: BuilderContext