@nf-beta/angular 0.0.1 → 0.0.2

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"}

package/src/schematics/appbuilder/schematic.js

@@ -0,0 +1,83 @@
+import * as path from 'path';
+export default function remove(options) {
+    return async function (tree /*, context*/) {
+        const workspaceFileName = getWorkspaceFileName(tree);
+        const workspace = JSON.parse(tree.read(workspaceFileName).toString('utf8'));
+        const normalized = normalizeOptions(options, workspace);
+        updateWorkspaceConfig(tree, normalized, workspace, workspaceFileName);
+    };
+}
+function updateWorkspaceConfig(tree, options, workspace, workspaceFileName) {
+    const { projectConfig } = options;
+    if (!projectConfig?.architect?.build || !projectConfig?.architect?.serve) {
+        throw new Error(`The project doesn't have a build or serve target in angular.json!`);
+    }
+    if (projectConfig.architect.esbuild) {
+        projectConfig.architect.esbuild.builder = '@angular/build:application';
+        projectConfig.architect.esbuild.options.browser = projectConfig.architect.esbuild.options.main;
+        delete projectConfig.architect.esbuild.options.main;
+    }
+    if (projectConfig.architect['serve-original']) {
+        const target = projectConfig.architect['serve-original'];
+        if (target.configurations?.production) {
+            target.configurations.production.buildTarget =
+                target.configurations.production.buildTarget.replace(':build:', ':esbuild:');
+        }
+        if (target.configurations?.development) {
+            target.configurations.development.buildTarget =
+                target.configurations.development.buildTarget.replace(':build:', ':esbuild:');
+        }
+    }
+    if (projectConfig.architect.serve) {
+        const target = projectConfig.architect.serve;
+        target.options.target = target.options.target.replace(':esbuild:', ':serve-original:');
+        delete target.options.port;
+    }
+    tree.overwrite(workspaceFileName, JSON.stringify(workspace, null, '\t'));
+}
+function normalizeOptions(options, workspace) {
+    if (!options.project) {
+        options.project = workspace.defaultProject;
+    }
+    const projects = Object.keys(workspace.projects);
+    if (!options.project && projects.length === 0) {
+        throw new Error(`No default project found. Please specifiy a project name!`);
+    }
+    if (!options.project) {
+        console.log('Using first configured project as default project: ' + projects[0]);
+        options.project = projects[0];
+    }
+    const projectName = options.project;
+    const projectConfig = workspace.projects[projectName];
+    if (!projectConfig) {
+        throw new Error(`Project ${projectName} not found in angular.json.`);
+    }
+    const projectRoot = projectConfig.root?.replace(/\\/g, '/');
+    const projectSourceRoot = projectConfig.sourceRoot?.replace(/\\/g, '/');
+    const manifestPath = path
+        .join(projectRoot, 'src/assets/federation.manifest.json')
+        .replace(/\\/g, '/');
+    const main = projectConfig.architect.build.options.main;
+    if (!projectConfig.architect.build.options.polyfills) {
+        projectConfig.architect.build.options.polyfills = [];
+    }
+    const polyfills = projectConfig.architect.build.options.polyfills;
+    return {
+        polyfills,
+        projectName,
+        projectRoot,
+        projectSourceRoot,
+        manifestPath,
+        projectConfig,
+        main,
+    };
+}
+export function getWorkspaceFileName(tree) {
+    if (tree.exists('angular.json')) {
+        return 'angular.json';
+    }
+    if (tree.exists('workspace.json')) {
+        return 'workspace.json';
+    }
+    throw new Error("angular.json or workspace.json expected! Did you call this in your project's root?");
+}

package/src/schematics/init/files/federation.config.js__tmpl__

@@ -0,0 +1,33 @@
+const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
+
+module.exports = withNativeFederation({
+  name: '<%=project%>',
+
+<% if (type === 'remote') { %>
+
+  exposes: {
+    './Component': './<%=appComponentPath%>',
+  },
+<% } %>
+  shared: {
+    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+  },
+
+  skip: [
+    'rxjs/ajax',
+    'rxjs/fetch',
+    'rxjs/testing',
+    'rxjs/webSocket',
+    // Add further packages you don't need at runtime
+  ],
+
+  // Please read our FAQ about sharing libs:
+  // https://shorturl.at/jmzH0
+
+  features: {
+    // New feature for more performance and avoiding
+    // issues with node libs. Comment this out to
+    // get the traditional behavior:
+    ignoreUnusedDeps: true
+  }
+});

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

@@ -0,0 +1,6 @@
+export interface NfSchematicSchema {
+  project: string;
+  port: string;
+  nxBuilders: boolean | undefined;
+  type: 'host' | 'dynamic-host' | 'remote';
+}

package/src/schematics/init/schema.json

@@ -0,0 +1,34 @@
+{
+  "$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)"
+    },
+    "port": {
+      "type": "number",
+      "description": "The port to use for the federated module (remote, micro frontend, etc.)",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      }
+    },
+    "type": {
+      "enum": ["host", "dynamic-host", "remote"],
+      "type": "string",
+      "default": "remote"
+    },
+    "nxBuilders": {
+      "type": "boolean",
+      "description": "Use builders provided by Nx instead of ngx-build-plus? Defaults to true for Nx workspaces and false for CLI workspaces."
+    }
+  }
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/schematics/init/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,IAAI,EAET,KAAK,IAAI,EAEV,MAAM,4BAA4B,CAAC;AAIpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AA+BrD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CA0BlD;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAoG/D;AAUD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,QAiB3C;AA0WD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAUvD"}