@nx/angular 23.0.0-pr.35413.460eeef → 23.0.0-rc.0

package/dist/src/generators/convert-to-with-mf/convert-to-with-mf.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToWithMF = convertToWithMF;
+const devkit_1 = require("@nx/devkit");
+const assert_supported_angular_version_1 = require("../../utils/assert-supported-angular-version");
+const get_mf_projects_1 = require("../../utils/get-mf-projects");
+const versions_1 = require("../../utils/versions");
+const lib_1 = require("./lib");
+async function convertToWithMF(tree, schema) {
+    (0, assert_supported_angular_version_1.assertSupportedAngularVersion)(tree);
+    const projects = new Set((0, get_mf_projects_1.getMFProjects)(tree, { legacy: true }));
+    if (!projects.has(schema.project)) {
+        throw new Error(`Could not find project "${schema.project}" with a Micro Frontend configuration in your workspace. Please check the name of the project you're wishing to convert exists.`);
+    }
+    const project = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
+    const pathToWebpackConfig = (0, lib_1.getWebpackConfigPath)(project, schema.project);
+    const webpackAst = (0, lib_1.parseASTOfWebpackConfig)(tree, pathToWebpackConfig);
+    if (!(0, lib_1.checkOutputNameMatchesProjectName)(webpackAst, schema.project)) {
+        throw new Error(`Cannot automatically migrate "${schema.project}" to "withModuleFederation" micro frontend webpack config. 
+      "uniqueName" in webpack config (${pathToWebpackConfig}) does not match project name.`);
+    }
+    if (!(0, lib_1.checkSharedNpmPackagesMatchExpected)(webpackAst)) {
+        throw new Error(`Cannot automatically migrate "${schema.project}" to "withModuleFederation" micro frontend webpack config. 
+        There are npm packages being shared with a custom configuration in webpack config (${pathToWebpackConfig}).`);
+    }
+    devkit_1.logger.warn(`This Micro Frontend configuration conversion will overwrite "${schema.project}"'s current webpack config. If you have anything custom that is not related to Micro Frontends, it will be lost. You should be able to see the changes in your version control system.`);
+    const [updatedWebpackConfig, mfConfig] = (0, lib_1.writeNewWebpackConfig)(webpackAst, (0, lib_1.isHostRemoteConfig)(webpackAst), schema.project);
+    tree.write(pathToWebpackConfig, updatedWebpackConfig);
+    tree.write((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js'), mfConfig);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/module-federation': versions_1.nxVersion });
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return installTask;
+}
+exports.default = convertToWithMF;

package/dist/src/generators/convert-to-with-mf/convert-to-with-mf.test-data.d.ts

@@ -0,0 +1,5 @@
+export declare const STANDARD_HOST_MFE_CONFIG = "const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');\nconst mf = require('@angular-architects/module-federation/webpack');\nconst path = require('path');\nconst share = mf.share;\n\n/**\n * We use the NX_TSCONFIG_PATH environment variable when using the @nx/angular:webpack-browser\n * builder as it will generate a temporary tsconfig file which contains any required remappings of\n * shared libraries.\n * A remapping will occur when a library is buildable, as webpack needs to know the location of the\n * built files for the buildable library.\n * This NX_TSCONFIG_PATH environment variable is set by the @nx/angular:webpack-browser and it contains\n * the location of the generated temporary tsconfig file.\n */\nconst tsConfigPath =\n  process.env.NX_TSCONFIG_PATH ??\n  path.join(__dirname, '../../tsconfig.base.json');\n\nconst workspaceRootPath = path.join(__dirname, '../../');\nconst sharedMappings = new mf.SharedMappings();\nsharedMappings.register(\n  tsConfigPath,\n  [\n    /* mapped paths to share */\n  ],\n  workspaceRootPath\n);\n\nmodule.exports = {\n  output: {\n    uniqueName: 'host1',\n    publicPath: 'auto',\n  },\n  optimization: {\n    runtimeChunk: false,\n  },\n  experiments: {\n    outputModule: true,\n  },\n  resolve: {\n    alias: {\n      ...sharedMappings.getAliases(),\n    },\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      remotes: {\n        remote1: 'http://localhost:4201/remoteEntry.mjs',\n      },\n      shared: share({\n        '@angular/core': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common/http': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/router': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        rxjs: {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        ...sharedMappings.getDescriptors(),\n      }),\n      library: {\n        type: 'module',\n      },\n    }),\n    sharedMappings.getPlugin(),\n  ],\n};\n";
+export declare const STANDARD_REMOTE_MFE_CONFIG = "const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');\nconst mf = require('@angular-architects/module-federation/webpack');\nconst path = require('path');\nconst share = mf.share;\n\n/**\n * We use the NX_TSCONFIG_PATH environment variable when using the @nx/angular:webpack-browser\n * builder as it will generate a temporary tsconfig file which contains any required remappings of\n * shared libraries.\n * A remapping will occur when a library is buildable, as webpack needs to know the location of the\n * built files for the buildable library.\n * This NX_TSCONFIG_PATH environment variable is set by the @nx/angular:webpack-browser and it contains\n * the location of the generated temporary tsconfig file.\n */\nconst tsConfigPath =\n  process.env.NX_TSCONFIG_PATH ??\n  path.join(__dirname, '../../tsconfig.base.json');\n\nconst workspaceRootPath = path.join(__dirname, '../../');\nconst sharedMappings = new mf.SharedMappings();\nsharedMappings.register(\n  tsConfigPath,\n  [\n    /* mapped paths to share */\n  ],\n  workspaceRootPath\n);\n\nmodule.exports = {\n  output: {\n    uniqueName: 'remote1',\n    publicPath: 'auto',\n  },\n  optimization: {\n    runtimeChunk: false,\n  },\n  experiments: {\n    outputModule: true,\n  },\n  resolve: {\n    alias: {\n      ...sharedMappings.getAliases(),\n    },\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'remote1',\n      filename: 'remoteEntry.js',\n      exposes: {\n        './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts',\n      },\n      shared: share({\n        '@angular/core': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common/http': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/router': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        rxjs: {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        ...sharedMappings.getDescriptors(),\n      }),\n      library: {\n        type: 'module',\n      },\n    }),\n    sharedMappings.getPlugin(),\n  ],\n};\n";
+export declare const OLD_OBJECT_SHARED_SYNTAX = "const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');\nconst mf = require('@angular-architects/module-federation/webpack');\nconst path = require('path');\nconst share = mf.share;\n\n/**\n * We use the NX_TSCONFIG_PATH environment variable when using the @nx/angular:webpack-browser\n * builder as it will generate a temporary tsconfig file which contains any required remappings of\n * shared libraries.\n * A remapping will occur when a library is buildable, as webpack needs to know the location of the\n * built files for the buildable library.\n * This NX_TSCONFIG_PATH environment variable is set by the @nx/angular:webpack-browser and it contains\n * the location of the generated temporary tsconfig file.\n */\nconst tsConfigPath =\n  process.env.NX_TSCONFIG_PATH ??\n  path.join(__dirname, '../../tsconfig.base.json');\n\nconst workspaceRootPath = path.join(__dirname, '../../');\nconst sharedMappings = new mf.SharedMappings();\nsharedMappings.register(\n  tsConfigPath,\n  [\n    /* mapped paths to share */\n  ],\n  workspaceRootPath\n);\n\nmodule.exports = {\n  output: {\n    uniqueName: 'remote1',\n    publicPath: 'auto',\n  },\n  optimization: {\n    runtimeChunk: false,\n  },\n  experiments: {\n    outputModule: true,\n  },\n  resolve: {\n    alias: {\n      ...sharedMappings.getAliases(),\n    },\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'remote1',\n      filename: 'remoteEntry.js',\n      exposes: {\n        './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts',\n      },\n      shared: {\n        '@angular/core': {\n          singleton: true,\n          strictVersion: true,\n        },\n        '@angular/common': {\n          singleton: true,\n          strictVersion: true,\n        },\n        '@angular/common/http': {\n          singleton: true,\n          strictVersion: true,\n        },\n        '@angular/router': {\n          singleton: true,\n          strictVersion: true,\n        },\n        rxjs: {\n          singleton: true,\n          strictVersion: true,\n        },\n        ...sharedMappings.getDescriptors(),\n      },\n      library: {\n        type: 'module',\n      },\n    }),\n    sharedMappings.getPlugin(),\n  ],\n};";
+export declare const ERROR_NAME_DOESNT_MATCH = "const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');\nconst mf = require('@angular-architects/module-federation/webpack');\nconst path = require('path');\nconst share = mf.share;\n\n/**\n * We use the NX_TSCONFIG_PATH environment variable when using the @nx/angular:webpack-browser\n * builder as it will generate a temporary tsconfig file which contains any required remappings of\n * shared libraries.\n * A remapping will occur when a library is buildable, as webpack needs to know the location of the\n * built files for the buildable library.\n * This NX_TSCONFIG_PATH environment variable is set by the @nx/angular:webpack-browser and it contains\n * the location of the generated temporary tsconfig file.\n */\nconst tsConfigPath =\n  process.env.NX_TSCONFIG_PATH ??\n  path.join(__dirname, '../../tsconfig.base.json');\n\nconst workspaceRootPath = path.join(__dirname, '../../');\nconst sharedMappings = new mf.SharedMappings();\nsharedMappings.register(\n  tsConfigPath,\n  [\n    /* mapped paths to share */\n  ],\n  workspaceRootPath\n);\n\nmodule.exports = {\n  output: {\n    uniqueName: 'somethingelse',\n    publicPath: 'auto',\n  },\n  optimization: {\n    runtimeChunk: false,\n  },\n  experiments: {\n    outputModule: true,\n  },\n  resolve: {\n    alias: {\n      ...sharedMappings.getAliases(),\n    },\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'remote1',\n      filename: 'remoteEntry.js',\n      exposes: {\n        './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts',\n      },\n      shared: share({\n        '@angular/core': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common/http': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/router': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        rxjs: {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        ...sharedMappings.getDescriptors(),\n      }),\n      library: {\n        type: 'module',\n      },\n    }),\n    sharedMappings.getPlugin(),\n  ],\n};\n";
+export declare const ERROR_SHARED_PACKAGES_DOESNT_MATCH = "const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');\nconst mf = require('@angular-architects/module-federation/webpack');\nconst path = require('path');\nconst share = mf.share;\n\n/**\n * We use the NX_TSCONFIG_PATH environment variable when using the @nx/angular:webpack-browser\n * builder as it will generate a temporary tsconfig file which contains any required remappings of\n * shared libraries.\n * A remapping will occur when a library is buildable, as webpack needs to know the location of the\n * built files for the buildable library.\n * This NX_TSCONFIG_PATH environment variable is set by the @nx/angular:webpack-browser and it contains\n * the location of the generated temporary tsconfig file.\n */\nconst tsConfigPath =\n  process.env.NX_TSCONFIG_PATH ??\n  path.join(__dirname, '../../tsconfig.base.json');\n\nconst workspaceRootPath = path.join(__dirname, '../../');\nconst sharedMappings = new mf.SharedMappings();\nsharedMappings.register(\n  tsConfigPath,\n  [\n    /* mapped paths to share */\n  ],\n  workspaceRootPath\n);\n\nmodule.exports = {\n  output: {\n    uniqueName: 'host1',\n    publicPath: 'auto',\n  },\n  optimization: {\n    runtimeChunk: false,\n  },\n  experiments: {\n    outputModule: true,\n  },\n  resolve: {\n    alias: {\n      ...sharedMappings.getAliases(),\n    },\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      remotes: {\n        remote1: 'http://localhost:4201/remoteEntry.mjs',\n      },\n      shared: share({\n        '@angular/core': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: '13.0.0',\n          includeSecondaries: true,\n        },\n        '@angular/common': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/common/http': {\n          singleton: true,\n          strictVersion: false,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        '@angular/router': {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        rxjs: {\n          singleton: true,\n          strictVersion: true,\n          requiredVersion: 'auto',\n          includeSecondaries: true,\n        },\n        ...sharedMappings.getDescriptors(),\n      }),\n      library: {\n        type: 'module',\n      },\n    }),\n    sharedMappings.getPlugin(),\n  ],\n};\n";

package/dist/src/generators/convert-to-with-mf/lib/check-name-matches.d.ts

@@ -0,0 +1,2 @@
+import type { SourceFile } from 'typescript';
+export declare function checkOutputNameMatchesProjectName(sourceFile: SourceFile, projectName: string): boolean;

package/dist/src/generators/convert-to-with-mf/lib/check-name-matches.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkOutputNameMatchesProjectName = checkOutputNameMatchesProjectName;
+const internal_1 = require("@nx/js/internal");
+function checkOutputNameMatchesProjectName(sourceFile, projectName) {
+    (0, internal_1.ensureTypescript)();
+    const { query } = require('@phenomnomnominal/tsquery');
+    const OUTPUT_SELECTOR = 'PropertyAssignment:has(Identifier[name=output]) > ObjectLiteralExpression:has(PropertyAssignment:has(Identifier[name=uniqueName]))';
+    const UNIQUENAME_SELECTOR = 'ObjectLiteralExpression > PropertyAssignment:has(Identifier[name=uniqueName]) > StringLiteral';
+    const outputNodes = query(sourceFile, OUTPUT_SELECTOR);
+    if (outputNodes.length === 0) {
+        // If the output isnt set in the config, then we can still set the project name correctly
+        return true;
+    }
+    const uniqueNameNodes = query(outputNodes[0], UNIQUENAME_SELECTOR);
+    if (uniqueNameNodes.length === 0) {
+        // If the uniqeName isnt set in the config, then we can still set the project name correctly
+        return true;
+    }
+    const uniqueName = uniqueNameNodes[0].getText().replace(/'/g, '');
+    return uniqueName === projectName;
+}

package/dist/src/generators/convert-to-with-mf/lib/check-shared-npm-packages.d.ts

@@ -0,0 +1,2 @@
+import type { SourceFile } from 'typescript';
+export declare function checkSharedNpmPackagesMatchExpected(sourceFile: SourceFile): boolean;

package/dist/src/generators/convert-to-with-mf/lib/check-shared-npm-packages.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkSharedNpmPackagesMatchExpected = checkSharedNpmPackagesMatchExpected;
+const internal_1 = require("@nx/js/internal");
+function checkSharedNpmPackagesMatchExpected(sourceFile) {
+    (0, internal_1.ensureTypescript)();
+    const { query } = require('@phenomnomnominal/tsquery');
+    const SHARE_HELPER_SELECTOR = 'PropertyAssignment:has(Identifier[name=shared]) > CallExpression:has(Identifier[name=share])';
+    const SHARED_PACKAGE_CONFIG_SELECTOR = 'ObjectLiteralExpression > PropertyAssignment > ObjectLiteralExpression';
+    const shareHelperNodes = query(sourceFile, SHARE_HELPER_SELECTOR);
+    let sharedPackageConfigNodes;
+    let settingsToMatch = [];
+    if (shareHelperNodes.length === 0) {
+        // if we arent sharing using share helper, check for standard object sharing syntax
+        const SHARED_OBJECT_SELECTOR = 'PropertyAssignment:has(Identifier[name=shared]) > ObjectLiteralExpression';
+        const sharedObjectNodes = query(sourceFile, SHARED_OBJECT_SELECTOR);
+        if (sharedObjectNodes.length === 0) {
+            // nothing is being shared, we're safe to continue
+            return true;
+        }
+        sharedPackageConfigNodes = query(sourceFile, `${SHARED_OBJECT_SELECTOR} ${SHARED_PACKAGE_CONFIG_SELECTOR}`);
+        settingsToMatch = [`singleton: true`, `strictVersion: true`];
+    }
+    else {
+        sharedPackageConfigNodes = query(sourceFile, `${SHARE_HELPER_SELECTOR} ${SHARED_PACKAGE_CONFIG_SELECTOR}`);
+        settingsToMatch = [
+            `singleton: true`,
+            `strictVersion: true`,
+            `requiredVersion: 'auto'`,
+        ];
+    }
+    if (sharedPackageConfigNodes.length === 0) {
+        // we arent sharing configs with the share helper, so we can safely continue
+        return true;
+    }
+    let packagesMatch = true;
+    for (const configNode of sharedPackageConfigNodes) {
+        const configText = configNode.getText();
+        packagesMatch = settingsToMatch.every((setting) => configText.includes(setting));
+        if (!packagesMatch) {
+            break;
+        }
+    }
+    return packagesMatch;
+}

package/dist/src/generators/convert-to-with-mf/lib/get-webpack-config-path.d.ts

@@ -0,0 +1,2 @@
+import type { ProjectConfiguration } from '@nx/devkit';
+export declare function getWebpackConfigPath(project: ProjectConfiguration, projectName: string): string;

package/dist/src/generators/convert-to-with-mf/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './check-name-matches';
+export * from './check-shared-npm-packages';
+export * from './get-webpack-config-path';
+export * from './is-host-remote-config';
+export * from './parse-ast-webpack-config';
+export * from './write-new-webpack-config';

package/dist/src/generators/convert-to-with-mf/lib/is-host-remote-config.d.ts

@@ -0,0 +1,5 @@
+import type { SourceFile } from 'typescript';
+export type IsHostRemoteConfigResult = 'host' | 'remote' | 'both' | false;
+export declare function isHostRemoteConfig(sourceFile: SourceFile): IsHostRemoteConfigResult;
+export declare function getRemotesFromHost(sourceFile: SourceFile): any[];
+export declare function getExposedModulesFromRemote(sourceFile: SourceFile): any;

package/dist/src/generators/convert-to-with-mf/lib/is-host-remote-config.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isHostRemoteConfig = isHostRemoteConfig;
+exports.getRemotesFromHost = getRemotesFromHost;
+exports.getExposedModulesFromRemote = getExposedModulesFromRemote;
+const internal_1 = require("@nx/js/internal");
+const REMOTES_EXPRESSION_SELECTOR = 'PropertyAssignment:has(Identifier[name=remotes]) > ObjectLiteralExpression';
+const EXPOSES_EXPRESSION_SELECTOR = 'PropertyAssignment:has(Identifier[name=exposes]) > ObjectLiteralExpression';
+const PROPERTY_SELECTOR = 'ObjectLiteralExpression > PropertyAssignment';
+function isHostRemoteConfig(sourceFile) {
+    let isHost = false;
+    let isRemote = false;
+    (0, internal_1.ensureTypescript)();
+    const { query } = require('@phenomnomnominal/tsquery');
+    const remotesNodes = query(sourceFile, REMOTES_EXPRESSION_SELECTOR);
+    if (remotesNodes.length > 0) {
+        isHost = true;
+    }
+    const exposesNodes = query(sourceFile, EXPOSES_EXPRESSION_SELECTOR);
+    if (exposesNodes.length > 0) {
+        isRemote = true;
+    }
+    let result = isHost && isRemote ? 'both' : isHost ? 'host' : isRemote ? 'remote' : false;
+    return result;
+}
+function getRemotesFromHost(sourceFile) {
+    (0, internal_1.ensureTypescript)();
+    const { query } = require('@phenomnomnominal/tsquery');
+    const remotesObjectNodes = query(sourceFile, REMOTES_EXPRESSION_SELECTOR);
+    if (remotesObjectNodes.length === 0) {
+        return [];
+    }
+    const remotesNodes = query(remotesObjectNodes[0], PROPERTY_SELECTOR);
+    if (remotesNodes.length === 0) {
+        return [];
+    }
+    const remotes = [];
+    for (const remoteNode of remotesNodes) {
+        const remoteText = remoteNode.getText();
+        const remoteParts = remoteText
+            .split(':')
+            .map((part) => part.trim().replace(/'/g, ''));
+        const remoteName = remoteParts.shift();
+        const remoteLocation = remoteParts.join(':').replace(/\/[^\/]+$/, '');
+        remotes.push([remoteName, remoteLocation]);
+    }
+    return remotes;
+}
+function getExposedModulesFromRemote(sourceFile) {
+    (0, internal_1.ensureTypescript)();
+    const { query } = require('@phenomnomnominal/tsquery');
+    const exposesObjectNodes = query(sourceFile, EXPOSES_EXPRESSION_SELECTOR);
+    if (exposesObjectNodes.length === 0) {
+        return {};
+    }
+    return exposesObjectNodes[0].getText();
+}

package/dist/src/generators/convert-to-with-mf/lib/parse-ast-webpack-config.d.ts

@@ -0,0 +1,2 @@
+import type { Tree } from '@nx/devkit';
+export declare function parseASTOfWebpackConfig(tree: Tree, pathToWebpackConfig: string): any;

package/dist/src/generators/convert-to-with-mf/lib/parse-ast-webpack-config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseASTOfWebpackConfig = parseASTOfWebpackConfig;
+const internal_1 = require("@nx/js/internal");
+function parseASTOfWebpackConfig(tree, pathToWebpackConfig) {
+    if (!tree.exists(pathToWebpackConfig)) {
+        throw new Error(`Cannot migrate webpack config at \`${pathToWebpackConfig}\` as it does not exist. Please ensure this file exists and that the path to the file is correct.`);
+    }
+    (0, internal_1.ensureTypescript)();
+    const { tsquery } = require('@phenomnomnominal/tsquery');
+    const source = tree.read(pathToWebpackConfig, 'utf-8');
+    return tsquery.ast(source);
+}

package/dist/src/generators/convert-to-with-mf/lib/write-new-webpack-config.d.ts

@@ -0,0 +1,3 @@
+import type { SourceFile } from 'typescript';
+import { IsHostRemoteConfigResult } from './is-host-remote-config';
+export declare function writeNewWebpackConfig(ast: SourceFile, mfType: IsHostRemoteConfigResult, projectName: string): string[];

package/dist/src/generators/convert-to-with-mf/lib/write-new-webpack-config.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeNewWebpackConfig = writeNewWebpackConfig;
+const is_host_remote_config_1 = require("./is-host-remote-config");
+function writeNewWebpackConfig(ast, mfType, projectName) {
+    const webpackConfig = `const { withModuleFederation } = require('@nx/module-federation/angular');
+const config = require('./module-federation.config');
+module.exports = withModuleFederation(config);
+`;
+    let mfeConfig = '';
+    if (!mfType) {
+        mfeConfig = `
+        module.exports = {
+          name: '${projectName}',
+        };`;
+    }
+    else if (mfType === 'host') {
+        const remotes = hostRemotesToString(ast);
+        mfeConfig = `
+        module.exports = {
+          name: '${projectName}',
+          remotes: ${remotes},
+        };`;
+    }
+    else if (mfType === 'remote') {
+        const exposedModules = (0, is_host_remote_config_1.getExposedModulesFromRemote)(ast);
+        mfeConfig = `
+        module.exports = {
+          name: '${projectName}',
+          exposes: ${exposedModules},
+        };`;
+    }
+    else if (mfType === 'both') {
+        const remotes = hostRemotesToString(ast);
+        const exposedModules = (0, is_host_remote_config_1.getExposedModulesFromRemote)(ast);
+        mfeConfig = `
+    module.exports = {
+      name: '${projectName}',
+      remotes: ${remotes},
+      exposes: ${exposedModules},
+    };`;
+    }
+    return [webpackConfig, mfeConfig];
+}
+function hostRemotesToString(ast) {
+    const remotes = (0, is_host_remote_config_1.getRemotesFromHost)(ast)
+        .reduce((acc, remotePair) => `['${remotePair[0]}', '${remotePair[1]}'], ${acc}`, '')
+        .trim();
+    return `[${remotes.endsWith(',') ? remotes.slice(0, -1) : remotes}]`;
+}

package/dist/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -0,0 +1,8 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { CypressComponentConfigSchema } from './schema';
+/**
+ * This is for cypress built in component testing, if you want to test with
+ * storybook + cypress then use the componentCypressGenerator instead.
+ */
+export declare function cypressComponentConfiguration(tree: Tree, options: CypressComponentConfigSchema): Promise<GeneratorCallback>;
+export default cypressComponentConfiguration;

package/dist/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cypressComponentConfiguration = cypressComponentConfiguration;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const assert_supported_angular_version_1 = require("../../utils/assert-supported-angular-version");
+const zoneless_1 = require("../../utils/zoneless");
+const versions_1 = require("../../utils/versions");
+const component_test_1 = require("../component-test/component-test");
+const component_info_1 = require("../utils/storybook-ast/component-info");
+const entry_point_1 = require("../utils/storybook-ast/entry-point");
+const module_info_1 = require("../utils/storybook-ast/module-info");
+const update_app_editor_tsconfig_excluded_files_1 = require("../utils/update-app-editor-tsconfig-excluded-files");
+const semver_1 = require("semver");
+const webpackExecutors = new Set([
+    '@nx/angular:webpack-browser',
+    '@nrwl/angular:webpack-browser',
+    '@angular-devkit/build-angular:browser',
+]);
+const esbuildExecutors = new Set([
+    '@angular/build:application',
+    '@angular-devkit/build-angular:application',
+    '@nx/angular:application',
+    '@angular-devkit/build-angular:browser-esbuild',
+    '@nx/angular:browser-esbuild',
+]);
+/**
+ * This is for cypress built in component testing, if you want to test with
+ * storybook + cypress then use the componentCypressGenerator instead.
+ */
+async function cypressComponentConfiguration(tree, options) {
+    (0, assert_supported_angular_version_1.assertSupportedAngularVersion)(tree);
+    const { componentConfigurationGenerator: baseCyCTConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    let isZoneless;
+    if (projectConfig.projectType === 'application') {
+        // For applications, check the polyfills in the build target
+        isZoneless = (0, zoneless_1.isZonelessApp)(projectConfig);
+    }
+    else {
+        // For libraries, check if zone.js is installed in the workspace
+        isZoneless = (0, devkit_1.getDependencyVersionFromPackageJson)(tree, 'zone.js') === null;
+    }
+    if (isZoneless) {
+        const { getInstalledCypressVersion, } = require('@nx/cypress/internal');
+        const installedCypressVersion = getInstalledCypressVersion(tree);
+        // Zoneless support was introduced in Cypress 15.8.0
+        // If Cypress is not yet installed, we'll install the latest version, which will have zoneless support
+        if (installedCypressVersion && (0, semver_1.lt)(installedCypressVersion, '15.8.0')) {
+            throw new Error(`Cypress Component Testing doesn't support Zoneless Angular projects for your installed Cypress version (${installedCypressVersion}). ` +
+                `The project "${options.project}" is configured without Zone.js. ` +
+                `Please upgrade Cypress to version 15.8.0 or higher.`);
+        }
+    }
+    const tasks = [];
+    tasks.push(await baseCyCTConfig(tree, {
+        project: options.project,
+        skipFormat: true,
+        addPlugin: false,
+        addExplicitTargets: true,
+        skipPackageJson: options.skipPackageJson,
+    }));
+    await configureCypressCT(tree, options);
+    tasks.push(await addFiles(tree, projectConfig, options, isZoneless));
+    if (projectConfig.projectType === 'application') {
+        (0, update_app_editor_tsconfig_excluded_files_1.updateAppEditorTsConfigExcludedFiles)(tree, projectConfig);
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+async function addFiles(tree, projectConfig, options, isZoneless) {
+    const componentFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
+    const { addMountDefinition } = (require('@nx/cypress/internal'));
+    const updatedCmpContents = await addMountDefinition(tree.read(componentFile, 'utf-8'));
+    tree.write(componentFile, `import { mount } from '${isZoneless ? 'cypress/angular-zoneless' : 'cypress/angular'}';\n${updatedCmpContents}`);
+    if (!options.generateTests) {
+        return () => { };
+    }
+    const entryPoints = (0, entry_point_1.getProjectEntryPoints)(tree, options.project);
+    const componentInfo = [];
+    for (const entryPoint of entryPoints) {
+        const moduleFilePaths = (0, module_info_1.getModuleFilePaths)(tree, entryPoint);
+        componentInfo.push(...(0, component_info_1.getComponentsInfo)(tree, entryPoint, moduleFilePaths, options.project), ...(0, component_info_1.getStandaloneComponentsInfo)(tree, entryPoint));
+    }
+    let ctTask;
+    for (const info of componentInfo) {
+        if (info === undefined) {
+            continue;
+        }
+        const componentDirFromProjectRoot = (0, path_1.relative)(projectConfig.root, (0, devkit_1.joinPathFragments)(info.moduleFolderPath, info.path));
+        const task = await (0, component_test_1.componentTestGenerator)(tree, {
+            project: options.project,
+            componentName: info.name,
+            componentDir: componentDirFromProjectRoot,
+            componentFileName: info.componentFileName,
+            skipFormat: true,
+            skipPackageJson: options.skipPackageJson,
+        });
+        // the ct generator only installs one dependency, which will only be installed
+        // if !skipPackageJson and not already installed, so only the first run can
+        // result in a generator callback that would actually install the dependency
+        if (!ctTask) {
+            ctTask = task;
+        }
+    }
+    return ctTask ?? (() => { });
+}
+async function configureCypressCT(tree, options) {
+    let found = { target: options.buildTarget, config: undefined };
+    if (!options.buildTarget) {
+        const { findBuildConfig } = (require('@nx/cypress/internal'));
+        found = await findBuildConfig(tree, {
+            project: options.project,
+            buildTarget: options.buildTarget,
+            validExecutorNames: webpackExecutors,
+        });
+        if (!found?.config) {
+            // Check if the project uses an esbuild-based executor
+            const esbuildTarget = await findBuildConfig(tree, {
+                project: options.project,
+                validExecutorNames: esbuildExecutors,
+                skipGetOptions: true,
+            });
+            if (esbuildTarget?.target) {
+                const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, esbuildTarget.target.split(':')[0]);
+                const targetName = esbuildTarget.target.split(':')[1];
+                const executor = projectConfig.targets?.[targetName]?.executor;
+                throw new Error(`Cypress Component Testing for Angular requires a webpack-based build target, ` +
+                    `but the project "${options.project}" uses an esbuild-based executor (${executor}).\n\n` +
+                    `Cypress only supports webpack as the bundler for Angular component testing.`);
+            }
+            throw new Error('Unable to find a valid build configuration. Try passing in a target for an Angular app (e.g. --build-target=<project>:<target>[:<configuration>]).');
+        }
+    }
+    const ctConfigOptions = {};
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (projectConfig.targets?.['component-test']?.executor ===
+        '@nx/cypress:cypress') {
+        projectConfig.targets['component-test'].options = {
+            ...projectConfig.targets['component-test'].options,
+            skipServe: true,
+            devServerTarget: found.target,
+        };
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    }
+    else {
+        ctConfigOptions.buildTarget = found.target;
+    }
+    const { addDefaultCTConfig, getProjectCypressConfigPath } = require('@nx/cypress/internal');
+    const cypressConfigPath = getProjectCypressConfigPath(tree, projectConfig.root);
+    const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigPath, 'utf-8'), ctConfigOptions, '@nx/angular/plugins/component-testing');
+    tree.write(cypressConfigPath, updatedCyConfig);
+}
+exports.default = cypressComponentConfiguration;

package/dist/src/generators/directive/directive.d.ts

@@ -0,0 +1,4 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from './schema';
+export declare function directiveGenerator(tree: Tree, schema: Schema): Promise<void>;
+export default directiveGenerator;

package/dist/src/generators/directive/directive.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.directiveGenerator = directiveGenerator;
+const devkit_1 = require("@nx/devkit");
+const assert_supported_angular_version_1 = require("../../utils/assert-supported-angular-version");
+const utils_1 = require("../utils");
+const version_utils_1 = require("../utils/version-utils");
+const lib_1 = require("./lib");
+async function directiveGenerator(tree, schema) {
+    (0, assert_supported_angular_version_1.assertSupportedAngularVersion)(tree);
+    const options = await (0, lib_1.normalizeOptions)(tree, schema);
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), options.directory, {
+        selector: options.selector,
+        symbolName: options.symbolName,
+        fileName: options.fileName,
+        standalone: options.standalone,
+        tpl: '',
+    });
+    if (options.skipTests) {
+        const pathToSpecFile = (0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.ts`);
+        tree.delete(pathToSpecFile);
+    }
+    if (!options.skipImport && !options.standalone) {
+        const modulePath = (0, utils_1.findModule)(tree, options.directory, options.module);
+        (0, utils_1.addToNgModule)(tree, options.directory, modulePath, options.name, options.symbolName, options.fileName, 'declarations', true, options.export);
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+exports.default = directiveGenerator;

package/dist/src/generators/directive/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './normalize-options';

package/dist/src/generators/directive/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(tree: Tree, options: Schema): Promise<NormalizedSchema>;

package/dist/src/generators/directive/lib/normalize-options.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = normalizeOptions;
+const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
+const selector_1 = require("../../utils/selector");
+const validations_1 = require("../../utils/validations");
+const version_utils_1 = require("../../utils/version-utils");
+async function normalizeOptions(tree, options) {
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if (angularMajorVersion < 20) {
+        options.type ??= 'directive';
+    }
+    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, internal_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        name: options.name,
+        path: options.path,
+        suffix: options.type,
+        allowedFileExtensions: ['ts'],
+        fileExtension: 'ts',
+    });
+    const { className } = (0, devkit_1.names)(name);
+    const suffixClassName = options.type ? (0, devkit_1.names)(options.type).className : '';
+    const symbolName = `${className}${suffixClassName}`;
+    (0, validations_1.validateClassName)(symbolName);
+    const { prefix } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    const selector = options.selector ??
+        (0, selector_1.buildSelector)(name, options.prefix, prefix, 'propertyName');
+    (0, selector_1.validateHtmlSelector)(selector);
+    return {
+        ...options,
+        projectName,
+        name,
+        directory,
+        fileName,
+        filePath,
+        symbolName,
+        selector,
+        standalone: options.standalone ?? true,
+    };
+}

package/dist/src/generators/federate-module/federate-module.d.ts

@@ -0,0 +1,4 @@
+import { type Tree } from '@nx/devkit';
+import type { Schema } from './schema';
+export declare function federateModuleGenerator(tree: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export default federateModuleGenerator;

package/dist/src/generators/federate-module/federate-module.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.federateModuleGenerator = federateModuleGenerator;
+const devkit_1 = require("@nx/devkit");
+const assert_supported_angular_version_1 = require("../../utils/assert-supported-angular-version");
+const test_runners_1 = require("../../utils/test-runners");
+const version_utils_1 = require("../utils/version-utils");
+const lib_1 = require("./lib");
+async function federateModuleGenerator(tree, schema) {
+    (0, assert_supported_angular_version_1.assertSupportedAngularVersion)(tree);
+    if (!tree.exists(schema.path)) {
+        throw new Error((0, devkit_1.stripIndents) `The "path" provided  does not exist. Please verify the path is correct and pointing to a file that exists in the workspace.
+    
+    Path: ${schema.path}`);
+    }
+    schema.standalone = schema.standalone ?? true;
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    // federate-module uses webpack/rspack bundlers, so vitest-angular is not available
+    schema.unitTestRunner ??=
+        angularMajorVersion >= 21
+            ? test_runners_1.UnitTestRunner.VitestAnalog
+            : test_runners_1.UnitTestRunner.Jest;
+    const { tasks, projectRoot, remoteName } = await (0, lib_1.addRemote)(tree, schema);
+    (0, lib_1.addFileToRemoteTsconfig)(tree, remoteName, schema.path);
+    (0, lib_1.addPathToExposes)(tree, {
+        projectPath: projectRoot,
+        modulePath: schema.path,
+        moduleName: schema.name,
+    });
+    (0, lib_1.addPathToTsConfig)(tree, {
+        remoteName,
+        moduleName: schema.name,
+        pathToFile: schema.path,
+    });
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    devkit_1.logger.info(`✅️ Updated module federation config.
+    Now you can use the module from your remote app like this:
+
+    Static import:
+    import { MyComponent } from '${remoteName}/${schema.name}';
+    
+    Dynamic import:
+    import('${remoteName}/${schema.name}').then((m) => m.MyComponent);
+  `);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.default = federateModuleGenerator;

package/dist/src/generators/federate-module/lib/add-file-to-remote-tsconfig.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function addFileToRemoteTsconfig(tree: Tree, remoteName: string, pathToExpose: string): void;

package/dist/src/generators/federate-module/lib/add-path-to-exposes.d.ts

@@ -0,0 +1,8 @@
+import { type Tree } from '@nx/devkit';
+type AddPathToExposesOptions = {
+    projectPath: string;
+    moduleName: string;
+    modulePath: string;
+};
+export declare function addPathToExposes(tree: Tree, { projectPath, moduleName, modulePath }: AddPathToExposesOptions): void;
+export {};