@nf-beta/angular 0.0.1 → 0.0.3

package/src/builders/build/federation-build-notifier.js

@@ -0,0 +1,186 @@
+import { BuildNotificationType } from '@nf-beta/runtime';
+import { logger } from '@nf-beta/core/build';
+/**
+ * Manages Server-Sent Events for federation hot reload in local development
+ * Only active when running in development mode with dev server
+ */
+export class FederationBuildNotifier {
+    connections = [];
+    cleanupInterval = null;
+    isActive = false;
+    endpoint;
+    /**
+     * Initializes the SSE reloader for local development
+     */
+    initialize(endpoint) {
+        if (this.isActive) {
+            return;
+        }
+        this.endpoint = endpoint;
+        this.isActive = true;
+        this.startCleanup();
+        logger.info(`[Federation SSE] Local reloader initialized with endpoint ${this.endpoint}`);
+    }
+    /**
+     * Creates SSE middleware for federation events
+     */
+    createEventMiddleware(removeBaseHref) {
+        if (!this.isActive) {
+            return (_req, _res, next) => next();
+        }
+        return (req, res, next) => {
+            const url = removeBaseHref(req);
+            if (url !== this.endpoint) {
+                return next();
+            }
+            this._setupSSEConnection(req, res);
+        };
+    }
+    /**
+     * Sets up a new SSE connection
+     */
+    _setupSSEConnection(req, res) {
+        res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'Cache-Control',
+        });
+        // Send initial connection event
+        this._sendEvent(res, {
+            type: 'connected',
+            timestamp: Date.now(),
+        });
+        // Store connection
+        const connection = { response: res, request: req };
+        this.connections.push(connection);
+        // Handle disconnection
+        req.on('close', () => this._removeConnection(connection));
+        req.on('error', () => this._removeConnection(connection));
+        logger.info(`[Federation SSE] Client connected. Active connections: ${this.connections.length}`);
+    }
+    /**
+     * Removes a connection from the pool
+     */
+    _removeConnection(connection) {
+        const index = this.connections.indexOf(connection);
+        if (index !== -1) {
+            this.connections.splice(index, 1);
+            logger.info(`[Federation SSE] Client disconnected. Active connections: ${this.connections.length}`);
+        }
+    }
+    /**
+     * Broadcasts an event to all connected clients
+     * Only works in local development mode
+     */
+    _broadcastEvent(event) {
+        if (!this.isActive || this.connections.length === 0) {
+            return;
+        }
+        const deadConnections = [];
+        this.connections.forEach(connection => {
+            try {
+                this._sendEvent(connection.response, event);
+            }
+            catch {
+                deadConnections.push(connection);
+            }
+        });
+        // Remove dead connections
+        deadConnections.forEach(connection => this._removeConnection(connection));
+        if (this.connections.length > 0) {
+            logger.info(`[Federation SSE] Event '${event.type}' broadcast to ${this.connections.length} clients`);
+        }
+    }
+    /**
+     * Sends an event to a specific response stream
+     */
+    _sendEvent(res, event) {
+        const data = JSON.stringify(event);
+        res.write(`data: ${data}\n\n`);
+    }
+    /**
+     * Starts periodic cleanup of dead connections
+     */
+    startCleanup() {
+        if (this.cleanupInterval) {
+            return;
+        }
+        this.cleanupInterval = setInterval(() => {
+            const aliveBefore = this.connections.length;
+            this.connections = this.connections.filter(connection => !connection.response.destroyed &&
+                !connection.request.destroyed &&
+                connection.response.writable);
+            if (this.connections.length !== aliveBefore) {
+                logger.info(`[Federation SSE] Cleaned up ${aliveBefore - this.connections.length} dead connections`);
+            }
+        }, 30000); // Clean every 30 seconds
+    }
+    /**
+     * Notifies about successful federation rebuild
+     */
+    broadcastBuildCompletion() {
+        this._broadcastEvent({
+            type: BuildNotificationType.COMPLETED,
+            timestamp: Date.now(),
+        });
+    }
+    /**
+     * Notifies about cancellation of a federation rebuild
+     */
+    broadcastBuildCancellation() {
+        this._broadcastEvent({
+            type: BuildNotificationType.CANCELLED,
+            timestamp: Date.now(),
+        });
+    }
+    /**
+     * Notifies about failed federation rebuild
+     */
+    broadcastBuildError(error) {
+        this._broadcastEvent({
+            type: BuildNotificationType.ERROR,
+            timestamp: Date.now(),
+            error: error instanceof Error ? error.message : 'Unknown error',
+        });
+    }
+    /**
+     * Stops cleanup and closes all connections
+     * Should be called when development server stops
+     */
+    stopEventServer() {
+        if (!this.isActive) {
+            return;
+        }
+        if (this.cleanupInterval) {
+            clearInterval(this.cleanupInterval);
+            this.cleanupInterval = null;
+        }
+        this.connections.forEach(connection => {
+            try {
+                connection.response.end();
+            }
+            catch {
+                // Connection might already be closed
+            }
+        });
+        this.connections = [];
+        this.isActive = false;
+        logger.info('[Federation SSE] Local reloader disposed');
+    }
+    /**
+     * Returns the number of active connections
+     */
+    get activeConnections() {
+        return this.connections.length;
+    }
+    /**
+     * Returns whether the reloader is active
+     */
+    get isRunning() {
+        return this.isActive;
+    }
+}
+// Singleton instance for local development
+export const federationBuildNotifier = new FederationBuildNotifier();

package/src/builders/build/schema.d.ts

@@ -0,0 +1,21 @@
+import type { JsonObject } from '@angular-devkit/core';
+import type { BuildNotificationOptions } from '@nf-beta/runtime';
+import type { ESMSInitOptions } from 'es-module-shims';
+
+export interface NfBuilderSchema extends JsonObject {
+  target: string;
+  dev: boolean;
+  port: number;
+  open: boolean;
+  rebuildDelay: number;
+  buildNotifications?: BuildNotificationOptions;
+  shell: string;
+  watch: boolean;
+  skipHtmlTransform: boolean;
+  esmsInitOptions: ESMSInitOptions;
+  baseHref?: string;
+  outputPath?: string;
+  ssr: boolean;
+  devServer?: boolean;
+  cacheExternalArtifacts?: boolean;
+} // eslint-disable-line

package/src/builders/build/schema.json

@@ -0,0 +1,84 @@
+{
+  "version": 2,
+  "outputCapture": "direct-nodejs",
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "native federation browser builder",
+  "description": "builder for native federation browser apps",
+  "type": "object",
+  "properties": {
+    "target": {
+      "type": "string",
+      "description": "target configured for the esbuild builder"
+    },
+    "dev": {
+      "type": "boolean",
+      "description": "Set this to true to start the builder in dev mode",
+      "default": false
+    },
+    "watch": {
+      "type": "boolean",
+      "default": false
+    },
+    "port": {
+      "type": "number",
+      "default": 0
+    },
+    "open": {
+      "type": "boolean",
+      "default": true,
+      "description": "Open browser?",
+      "alias": "o"
+    },
+    "rebuildDelay": {
+      "type": "number",
+      "default": 2000,
+      "description": "The delay for rebuilding federation artefacts. This allows to have more resources for refreshing your micro frontend in the browser."
+    },
+    "shell": {
+      "type": "string",
+      "description": "Experimental",
+      "default": ""
+    },
+    "skipHtmlTransform": {
+      "type": "boolean",
+      "default": false
+    },
+    "baseHref": {
+      "type": "string"
+    },
+    "outputPath": {
+      "type": "string"
+    },
+    "esmsInitOptions": {
+      "type": "object",
+      "description": "Options for esms-module-shims https://github.com/guybedford/es-module-shims?tab=readme-ov-file#init-options",
+      "default": {
+        "shimMode": true
+      }
+    },
+    "ssr": {
+      "type": "boolean",
+      "description": "uses federation for ssr in ApplicationBuilder too",
+      "default": false
+    },
+    "devServer": {
+      "type": "boolean",
+      "description": "can be used to disable the dev server when dev=true"
+    },
+    "buildNotifications": {
+      "type": "object",
+      "properties": {
+        "enable": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable build completion notifications for local development. It will send events to notify when the federation build is complete."
+        },
+        "endpoint": {
+          "type": "string",
+          "default": "/@angular-architects/native-federation:build-notifications",
+          "description": "You can override the default endpoint to send build completion events to."
+        }
+      }
+    }
+  }
+}

package/src/config.d.ts

@@ -0,0 +1,3 @@
+export { findRootTsConfigJson, withNativeFederation, share, shareAll, DEFAULT_SKIP_LIST, } from '@nf-beta/core/build';
+export { shareAngularLocales } from './utils/angular-locales.js';
+//# sourceMappingURL=config.d.ts.map

package/src/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,KAAK,EACL,QAAQ,EACR,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/src/config.js

@@ -0,0 +1,2 @@
+export { findRootTsConfigJson, withNativeFederation, share, shareAll, DEFAULT_SKIP_LIST, } from '@nf-beta/core/build';
+export { shareAngularLocales } from './utils/angular-locales.js';

package/src/generators/native-federation/files/src/index.ts__template__

@@ -0,0 +1 @@
+const variable = "<%= projectName %>";

package/src/generators/native-federation/generator.d.ts

@@ -0,0 +1,4 @@
+import { type Tree } from '@nx/devkit';
+import type { NativeFederationGeneratorSchema } from './schema.js';
+export default function (tree: Tree, options: NativeFederationGeneratorSchema): Promise<void>;
+//# sourceMappingURL=generator.d.ts.map

package/src/generators/native-federation/generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/generators/native-federation/generator.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAqCnE,yBAA+B,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,+BAA+B,iBAelF"}

package/src/generators/native-federation/generator.js

@@ -0,0 +1,43 @@
+import { addProjectConfiguration, formatFiles, generateFiles, getWorkspaceLayout, names, offsetFromRoot, } from '@nx/devkit';
+import * as path from 'path';
+function normalizeOptions(tree, options) {
+    const name = names(options.name).fileName;
+    const projectDirectory = options.directory
+        ? `${names(options.directory).fileName}/${name}`
+        : name;
+    const projectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
+    const projectRoot = `${getWorkspaceLayout(tree).libsDir}/${projectDirectory}`;
+    const parsedTags = options.tags ? options.tags.split(',').map(s => s.trim()) : [];
+    return {
+        ...options,
+        projectName,
+        projectRoot,
+        projectDirectory,
+        parsedTags,
+    };
+}
+function addFiles(tree, options) {
+    const templateOptions = {
+        ...options,
+        ...names(options.name),
+        offsetFromRoot: offsetFromRoot(options.projectRoot),
+        template: '',
+    };
+    generateFiles(tree, path.join(__dirname, 'files'), options.projectRoot, templateOptions);
+}
+export default async function (tree, options) {
+    const normalizedOptions = normalizeOptions(tree, options);
+    addProjectConfiguration(tree, normalizedOptions.projectName, {
+        root: normalizedOptions.projectRoot,
+        projectType: 'library',
+        sourceRoot: `${normalizedOptions.projectRoot}/src`,
+        targets: {
+            build: {
+                executor: '@angular-architects/native-federation:build',
+            },
+        },
+        tags: normalizedOptions.parsedTags,
+    });
+    addFiles(tree, normalizedOptions);
+    await formatFiles(tree);
+}

package/src/generators/native-federation/schema.d.ts

@@ -0,0 +1,5 @@
+export interface NativeFederationGeneratorSchema {
+  name: string;
+  tags?: string;
+  directory?: string;
+}

package/src/generators/native-federation/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NativeFederation",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use?"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the project (used for linting)",
+      "alias": "t"
+    },
+    "directory": {
+      "type": "string",
+      "description": "A directory where the project is placed",
+      "alias": "d"
+    }
+  },
+  "required": ["name"]
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@nf-beta/runtime';
+//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/src/index.js

@@ -0,0 +1 @@
+export * from '@nf-beta/runtime';

package/src/patch-angular-build.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=patch-angular-build.d.ts.map

package/src/patch-angular-build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patch-angular-build.d.ts","sourceRoot":"","sources":["../../src/patch-angular-build.ts"],"names":[],"mappings":""}

package/src/patch-angular-build.js

@@ -0,0 +1,5 @@
+// import { patchAngularBuild } from './utils/patch-angular-build';
+// const workspaceRoot = process.cwd();
+// patchAngularBuild(workspaceRoot);
+console.log('Please remove the postbuild task calling patch-angular-build. This is not needed since Native Federation 18.1 anymore!');
+export {};

package/src/plugin/dev-externals-mixin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+export declare const devExternalsMixin: Partial<Plugin>;
+//# sourceMappingURL=dev-externals-mixin.d.ts.map

package/src/plugin/dev-externals-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-externals-mixin.d.ts","sourceRoot":"","sources":["../../../src/plugin/dev-externals-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAA8B,MAAM,MAAM,CAAC;AAM/D,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CA0B7C,CAAC"}

package/src/plugin/dev-externals-mixin.js

@@ -0,0 +1,29 @@
+import { federationBuilder } from '@nf-beta/core/build';
+import { filterExternals } from './externals-skip-list.js';
+// see: https://github.com/vitejs/vite/issues/6393#issuecomment-1006819717
+export const devExternalsMixin = {
+    enforce: 'pre',
+    config(config) {
+        config.optimizeDeps = {
+            ...(config.optimizeDeps ?? {}),
+            exclude: [
+                ...(config.optimizeDeps?.exclude ?? []),
+                ...filterExternals(federationBuilder.externals),
+            ],
+        };
+    },
+    configResolved(resolvedConfig) {
+        const VALID_ID_PREFIX = `/@id/`;
+        const reg = new RegExp(`${VALID_ID_PREFIX}(${federationBuilder.externals.join('|')})`, 'g');
+        resolvedConfig.plugins.push({
+            name: 'vite-plugin-ignore-static-import-replace-idprefix',
+            transform: (code) => reg.test(code) ? code.replace(reg, (_m, s1) => s1) : code,
+        });
+    },
+    resolveId(id) {
+        if (filterExternals(federationBuilder.externals).includes(id)) {
+            return { id, external: true };
+        }
+        return null;
+    },
+};

package/src/plugin/externals-skip-list.d.ts

@@ -0,0 +1,3 @@
+export declare const externalsSkipList: Set<string>;
+export declare function filterExternals(deps: string[]): string[];
+//# sourceMappingURL=externals-skip-list.d.ts.map

package/src/plugin/externals-skip-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"externals-skip-list.d.ts","sourceRoot":"","sources":["../../../src/plugin/externals-skip-list.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,aAAqB,CAAC;AAEpD,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAExD"}

package/src/plugin/externals-skip-list.js

@@ -0,0 +1,4 @@
+export const externalsSkipList = new Set(['tslib']);
+export function filterExternals(deps) {
+    return deps.filter((d) => !externalsSkipList.has(d));
+}

package/src/plugin/index.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from 'vite';
+import { type BuildHelperParams } from '@nf-beta/core/build';
+export declare const federation: (params: BuildHelperParams) => Plugin;
+//# sourceMappingURL=index.d.ts.map

package/src/plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugin/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAoD,MAAM,MAAM,CAAC;AAIrF,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,qBAAqB,CAAC;AAKhF,eAAO,MAAM,UAAU,GAAI,QAAQ,iBAAiB,KAAG,MAoCtD,CAAC"}

package/src/plugin/index.js

@@ -0,0 +1,75 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { lookup } from 'mrmime';
+import { devExternalsMixin } from './dev-externals-mixin.js';
+import { filterExternals } from './externals-skip-list.js';
+import { federationBuilder } from '@nf-beta/core/build';
+export const federation = (params) => {
+    return {
+        ...devExternalsMixin,
+        name: '@module-federation/vite', // required, will show up in warnings and errors
+        async config(config, env) {
+            await federationBuilder.init(params);
+            if (typeof devExternalsMixin.config === 'function') {
+                devExternalsMixin.config.call(this, config, env);
+            }
+        },
+        options(o) {
+            o['external'] = filterExternals(federationBuilder.externals);
+        },
+        async closeBundle() {
+            await federationBuilder.build();
+        },
+        async configureServer(server) {
+            const fedInfoRef = {
+                federationInfo: federationBuilder.federationInfo,
+            };
+            await configureDevServer(server, params, fedInfoRef);
+        },
+        transformIndexHtml(html) {
+            const fragment = '<script src="polyfills.js" type="module-shim">';
+            const updated = `
+<script type="esms-options">
+{
+"shimMode": true
+}
+</script>
+<script src="polyfills.js" type="module">
+`;
+            html = html.replace(/type="module"/g, 'type="module-shim"');
+            return html.replace(fragment, updated);
+        },
+    };
+};
+const configureDevServer = async (server, params, fedInfo) => {
+    await federationBuilder.build();
+    const op = params.options;
+    const dist = path.join(op.workspaceRoot, op.outputPath);
+    server.middlewares.use(serveFromDist(dist, fedInfo));
+};
+const serveFromDist = (dist, fedInfoRef) => {
+    const fedFiles = new Set([
+        ...fedInfoRef.federationInfo.shared.map(s => path.join('/', s.outFileName)),
+        ...fedInfoRef.federationInfo.exposes.map(e => path.join('/', e.outFileName)),
+        '/remoteEntry.json',
+    ]);
+    return (req, res, next) => {
+        if (!req.url || req.url.endsWith('/index.html') || !fedFiles.has(req.url)) {
+            next();
+            return;
+        }
+        const file = path.join(dist, req.url);
+        if (fs.existsSync(file) && fs.lstatSync(file).isFile()) {
+            res.setHeader('Access-Control-Allow-Origin', '*');
+            const type = lookup(req.url) || '';
+            res.setHeader('Content-Type', type);
+            const content = fs.readFileSync(file, 'utf-8');
+            //   const modified = enhanceFile(file, content);
+            const modified = content;
+            res.write(modified);
+            res.end();
+            return;
+        }
+        next();
+    };
+};

package/src/schematics/appbuilder/schema.d.ts

@@ -0,0 +1,3 @@
+export interface MfSchematicSchema {
+  project: string;
+}

package/src/schematics/appbuilder/schema.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "mf",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project to add module federation",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Project name (press enter for default project)"
+    }
+  }
+}

package/src/schematics/appbuilder/schematic.d.ts

@@ -0,0 +1,5 @@
+import type { Rule, Tree } from '@angular-devkit/schematics';
+import type { MfSchematicSchema } from './schema.js';
+export default function remove(options: MfSchematicSchema): Rule;
+export declare function getWorkspaceFileName(tree: Tree): string;
+//# sourceMappingURL=schematic.d.ts.map

package/src/schematics/appbuilder/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/schematics/appbuilder/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAcrD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAS/D;AA0FD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAUvD"}