feat(nf): prepare to be called via ssr

Author: manfredsteyer

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

@@ -33,7 +33,11 @@ import {
 import { RebuildHubs } from '../../utils/rebuild-events';
 import { updateIndexHtml } from '../../utils/updateIndexHtml';
 import { appendFileSync, existsSync, mkdirSync } from 'fs';
-import { EsBuildResult, MemResults } from '../../utils/mem-resuts';
+import {
+  EsBuildResult,
+  MemResults,
+  NgCliAssetResult,
+} from '../../utils/mem-resuts';
 import { JsonObject } from '@angular-devkit/core';
 
 function log(...args) {
@@ -42,10 +46,10 @@ function log(...args) {
   console.log(args);
 }
 
-export async function runBuilder(
+export async function* runBuilder(
   nfOptions: NfBuilderSchema,
   context: BuilderContext
-): Promise<BuilderOutput> {
+): AsyncIterable<BuilderOutput> {
   const target = targetFromTargetString(nfOptions.target);
   const _options = (await context.getTargetOptions(
     target
@@ -57,15 +61,18 @@ export async function runBuilder(
     builder
   )) as JsonObject & Schema;
 
+  const runServer = !!nfOptions.port;
+  const write = !runServer;
+  const watch = !!runServer || nfOptions.watch;
+
+  options.watch = watch;
   const rebuildEvents = new RebuildHubs();
 
   const adapter = createAngularBuildAdapter(options, context, rebuildEvents);
   setBuildAdapter(adapter);
 
   setLogLevel(options.verbose ? 'verbose' : 'info');
 
-  options.watch = !!nfOptions.dev;
-
   const fedOptions: FederationOptions = {
     workspaceRoot: context.workspaceRoot,
     outputPath: options.outputPath,
@@ -97,12 +104,12 @@ export async function runBuilder(
   // );
 
   const memResults = new MemResults();
-  const write = !nfOptions.dev;
+
   let first = true;
   let lastResult: { success: boolean } | undefined;
 
   if (!existsSync(options.outputPath)) {
-    mkdirSync(options.outputPath);
+    mkdirSync(options.outputPath, { recursive: true });
   }
 
   if (!write) {
@@ -116,6 +123,7 @@ export async function runBuilder(
     write,
   })) {
     lastResult = output;
+    yield output;
 
     if (!output.success) {
       setError('Compilation Error');
@@ -125,23 +133,14 @@ export async function runBuilder(
       setError(null);
     }
 
-    if (!write) {
+    if (!write && output.outputFiles) {
       memResults.add(output.outputFiles.map((file) => new EsBuildResult(file)));
+    }
 
-      // TODO!
-      // '{\n' +
-      // '  "success": true,\n' +
-      // '  "assetFiles": [\n' +
-      // '    {\n' +
-      // '      "source": "C:\\\\temp\\\\native\\\\src\\\\favicon.ico",\n' +
-      // '      "destination": "favicon.ico"\n' +
-      // '    },\n' +
-      // '    {\n' +
-      // '      "source": "C:\\\\temp\\\\native\\\\src\\\\assets\\\\shutterstock_1835092750.jpg",\n' +
-      // '      "destination": "assets\\\\shutterstock_1835092750.jpg"\n' +
-      // '    }\n' +
-      // '  ]\n' +
-      // '}'
+    if (!write && output.assetFiles) {
+      memResults.add(
+        output.assetFiles.map((file) => new NgCliAssetResult(file))
+      );
     }
 
     if (write) {
@@ -152,17 +151,23 @@ export async function runBuilder(
       await buildForFederation(config, fedOptions, externals);
     }
 
-    if (first && nfOptions.dev) {
+    if (first && runServer) {
       startServer(nfOptions, options.outputPath, memResults);
-    } else if (!first && nfOptions.dev) {
+    }
+
+    if (!first && runServer) {
       reloadBrowser();
+    }
 
+    if (!first && watch) {
       setTimeout(async () => {
         logger.info('Rebuilding federation artefacts ...');
         await Promise.all([rebuildEvents.rebuild.emit()]);
         logger.info('Done!');
 
-        setTimeout(() => reloadShell(nfOptions.shell), 0);
+        if (runServer) {
+          setTimeout(() => reloadShell(nfOptions.shell), 0);
+        }
       }, nfOptions.rebuildDelay);
     }
 
@@ -171,7 +176,7 @@ export async function runBuilder(
 
   // updateIndexHtml(fedOptions);
   // const output = await lastValueFrom(builderRun.output as any);
-  return lastResult || { success: false };
+  yield lastResult || { success: false };
 }
 
 export default createBuilder(runBuilder) as any;

libs/native-federation/src/builders/build/schema.d.ts

@@ -7,4 +7,5 @@ export interface NfBuilderSchema extends JsonObject {
   open: boolean;
   rebuildDelay: number;
   shell: string;
+  watch: boolean;
 } // eslint-disable-line

libs/native-federation/src/builders/build/schema.json

@@ -15,9 +15,13 @@
       "description": "Set this to true to start the builder in dev mode",
       "default": false
     },
+    "watch": {
+      "type": "boolean",
+      "default": false
+    },
     "port": {
       "type": "number",
-      "default": 4200
+      "default": 0
     },
     "open": {
       "type": "boolean",

libs/native-federation/src/utils/dev-server.ts

@@ -102,10 +102,14 @@ function modifyIndexHtml(content: string, fileNames: string[]): string {
   return index;
 }
 
-function getBody(result: BuildResult, memResults: MemResults): string {
+function getBody(
+  result: BuildResult,
+  memResults: MemResults
+): Uint8Array | Buffer | string {
   const body = result.get();
   if (result.fileName === 'index.html') {
-    return modifyIndexHtml(body, memResults.getFileNames());
+    const content = new TextDecoder().decode(body);
+    return modifyIndexHtml(content, memResults.getFileNames());
   } else {
     return body;
   }

libs/native-federation/src/utils/mem-resuts.ts

@@ -1,9 +1,10 @@
 import { OutputFile } from 'esbuild';
 import { basename } from 'path';
+import * as fs from 'fs';
 
 export interface BuildResult {
   fileName: string;
-  get(): string;
+  get(): Uint8Array | Buffer;
 }
 
 export class EsBuildResult implements BuildResult {
@@ -13,8 +14,29 @@ export class EsBuildResult implements BuildResult {
     this.fileName = outputFile.path;
   }
 
-  get(): string {
-    return this.outputFile.text;
+  get(): Uint8Array {
+    return this.outputFile.contents;
+  }
+}
+
+export interface NgCliAssetFile {
+  source: string;
+  destination: string;
+}
+
+export class NgCliAssetResult implements BuildResult {
+  public get fileName(): string {
+    return this.file.source;
+  }
+
+  private file: NgCliAssetFile;
+
+  constructor(private assetFile: NgCliAssetFile) {
+    this.file = assetFile;
+  }
+
+  get(): Buffer {
+    return fs.readFileSync(this.file.source);
   }
 }
 

update-local.bat

@@ -3,10 +3,10 @@ call npm unpublish @softarc/native-federation-runtime@2.0.0 --registry http://lo
 call npm unpublish @softarc/native-federation-esbuild@2.0.0 --registry http://localhost:4873
 call npm unpublish @angular-architects/native-federation@16.3.0 --registry http://localhost:4873
 
-call nx build native-federation
-call nx build native-federation-core
-call nx build native-federation-runtime
-call nx build native-federation-esbuild
+call npx nx build native-federation
+call npx nx build native-federation-core
+call npx nx build native-federation-runtime
+call npx nx build native-federation-esbuild
 
 call node post-build.js