From 388eb4026d70ef4a6c3ab035a1e7f33a8bc44767 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Tue, 19 Apr 2022 23:15:01 +0100 Subject: [PATCH] feat(angular): align config file naming for module federation (#9889) --- packages/angular/migrations.json | 6 ++ .../module-federation-dev-server.impl.ts | 10 ++- .../__snapshots__/application.spec.ts.snap | 8 +- .../convert-to-with-mf.spec.ts.snap | 6 +- .../convert-to-with-mf/convert-to-with-mf.ts | 11 ++- .../write-new-webpack-config.spec.ts.snap | 8 +- .../lib/write-new-webpack-config.ts | 2 +- .../host/__snapshots__/host.spec.ts.snap | 6 +- .../angular/src/generators/host/host.spec.ts | 12 +-- .../remote/__snapshots__/remote.spec.ts.snap | 6 +- .../angular/src/generators/remote/remote.ts | 4 +- .../__snapshots__/setup-mfe.spec.ts.snap | 6 +- ...__ => module-federation.config.js__tmpl__} | 0 .../files/webpack/webpack.config.js__tmpl__ | 2 +- .../webpack/webpack.prod.config.js__tmpl__ | 2 +- .../setup-mfe/lib/add-remote-to-host.ts | 26 +++--- .../generators/setup-mfe/lib/fix-bootstrap.ts | 6 +- .../setup-mfe/lib/generate-config.ts | 2 +- .../setup-mfe/lib/setup-host-if-dynamic.ts | 8 +- .../generators/setup-mfe/setup-mfe.spec.ts | 44 +++++++---- .../add-cypress-mfe-workaround.ts | 4 +- .../update-14-0-0/rename-mf-config.spec.ts | 79 +++++++++++++++++++ .../update-14-0-0/rename-mf-config.ts | 47 +++++++++++ ...get-mfe-projects.ts => get-mf-projects.ts} | 2 +- 24 files changed, 231 insertions(+), 76 deletions(-) rename packages/angular/src/generators/setup-mfe/files/webpack/{mfe.config.js__tmpl__ => module-federation.config.js__tmpl__} (100%) create mode 100644 packages/angular/src/migrations/update-14-0-0/rename-mf-config.spec.ts create mode 100644 packages/angular/src/migrations/update-14-0-0/rename-mf-config.ts rename packages/angular/src/utils/{get-mfe-projects.ts => get-mf-projects.ts} (97%) diff --git a/packages/angular/migrations.json b/packages/angular/migrations.json index bc0af9d3af49f..93d5d2f61b67a 100644 --- a/packages/angular/migrations.json +++ b/packages/angular/migrations.json @@ -106,6 +106,12 @@ "version": "13.9.0-beta.4", "description": "Set buildLibsFromSource property to false to not break existing usage.", "factory": "./src/migrations/update-13-9-0/set-build-libs-from-source" + }, + "rename-module-federation-config": { + "cli": "nx", + "version": "14.0.0-beta.1", + "description": "Rename mfe.config.js to module-federation.config.js for consistent terminology.", + "factory": "./src/migrations/update-14-0-0/rename-mf-config" } }, "packageJsonUpdates": { diff --git a/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts b/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts index 21e54d4ecda36..0041c62c16089 100644 --- a/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts +++ b/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts @@ -15,14 +15,18 @@ export function moduleFederationDevServer( const p = workspaceConfig.projects[context.target.project]; - const mfeConfigPath = join(context.workspaceRoot, p.root, 'mfe.config.js'); + const mfConfigPath = join( + context.workspaceRoot, + p.root, + 'module-federation.config.js' + ); let mfeConfig: { remotes: string[] }; try { - mfeConfig = require(mfeConfigPath); + mfeConfig = require(mfConfigPath); } catch { throw new Error( - `Could not load ${mfeConfigPath}. Was this project generated with "@nrwl/angular:host"?` + `Could not load ${mfConfigPath}. Was this project generated with "@nrwl/angular:host"?` ); } diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap index 32ff7f0716604..7444ec5af6240 100644 --- a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap +++ b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap @@ -2,25 +2,25 @@ exports[`app --mfe should add a remote application and add it to a specified host applications webpack config that contains a remote application already 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`app --mfe should add a remote application and add it to a specified host applications webpack config when no other remote has been added to it 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`app --mfe should generate a Module Federation correctly for a each app 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`app --mfe should generate a Module Federation correctly for a each app 2`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; diff --git a/packages/angular/src/generators/convert-to-with-mf/__snapshots__/convert-to-with-mf.spec.ts.snap b/packages/angular/src/generators/convert-to-with-mf/__snapshots__/convert-to-with-mf.spec.ts.snap index 4cfeeab91adfd..02b2879adf490 100644 --- a/packages/angular/src/generators/convert-to-with-mf/__snapshots__/convert-to-with-mf.spec.ts.snap +++ b/packages/angular/src/generators/convert-to-with-mf/__snapshots__/convert-to-with-mf.spec.ts.snap @@ -2,18 +2,18 @@ exports[`convertToWithMF should migrate a standard previous generated host config correctly 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`convertToWithMF should migrate a standard previous generated remote config correctly 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`convertToWithMF should migrate a standard previous generated remote config using object shared syntax correctly 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; diff --git a/packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts b/packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts index 95776f0113626..46006068e8dd3 100644 --- a/packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts +++ b/packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts @@ -2,7 +2,7 @@ import { joinPathFragments, logger, Tree } from '@nrwl/devkit'; import type { Schema } from './schema'; import { readProjectConfiguration, formatFiles } from '@nrwl/devkit'; -import { getMfeProjects } from '../../utils/get-mfe-projects'; +import { getMFProjects } from '../../utils/get-mf-projects'; import { checkOutputNameMatchesProjectName, checkSharedNpmPackagesMatchExpected, @@ -13,7 +13,7 @@ import { } from './lib'; export default async function convertToWithMF(tree: Tree, schema: Schema) { - const projects = new Set(getMfeProjects(tree, { legacy: true })); + const projects = new Set(getMFProjects(tree, { legacy: true })); if (!projects.has(schema.project)) { throw new Error( @@ -43,13 +43,16 @@ export default async function convertToWithMF(tree: Tree, schema: Schema) { `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, mfeConfig] = writeNewWebpackConfig( + const [updatedWebpackConfig, mfConfig] = writeNewWebpackConfig( webpackAst, isHostRemoteConfig(webpackAst), schema.project ); tree.write(pathToWebpackConfig, updatedWebpackConfig); - tree.write(joinPathFragments(project.root, 'mfe.config.js'), mfeConfig); + tree.write( + joinPathFragments(project.root, 'module-federation.config.js'), + mfConfig + ); await formatFiles(tree); } diff --git a/packages/angular/src/generators/convert-to-with-mf/lib/__snapshots__/write-new-webpack-config.spec.ts.snap b/packages/angular/src/generators/convert-to-with-mf/lib/__snapshots__/write-new-webpack-config.spec.ts.snap index 8603be92c2b17..812a607ab2f19 100644 --- a/packages/angular/src/generators/convert-to-with-mf/lib/__snapshots__/write-new-webpack-config.spec.ts.snap +++ b/packages/angular/src/generators/convert-to-with-mf/lib/__snapshots__/write-new-webpack-config.spec.ts.snap @@ -3,7 +3,7 @@ exports[`writeNewWebpackConfig should convert config that is both remote and host correctly 1`] = ` Array [ "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);", " module.exports = { @@ -19,7 +19,7 @@ Array [ exports[`writeNewWebpackConfig should convert config that is neither remote and host correctly 1`] = ` Array [ "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);", " module.exports = { @@ -31,7 +31,7 @@ Array [ exports[`writeNewWebpackConfig should convert host config correctly 1`] = ` Array [ "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);", " module.exports = { @@ -44,7 +44,7 @@ Array [ exports[`writeNewWebpackConfig should convert remote config correctly 1`] = ` Array [ "const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);", " module.exports = { diff --git a/packages/angular/src/generators/convert-to-with-mf/lib/write-new-webpack-config.ts b/packages/angular/src/generators/convert-to-with-mf/lib/write-new-webpack-config.ts index e19e9b5f85eb2..7dee84dea38fd 100644 --- a/packages/angular/src/generators/convert-to-with-mf/lib/write-new-webpack-config.ts +++ b/packages/angular/src/generators/convert-to-with-mf/lib/write-new-webpack-config.ts @@ -11,7 +11,7 @@ export function writeNewWebpackConfig( projectName: string ) { const webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation'); - const config = require('./mfe.config'); + const config = require('./module-federation.config'); module.exports = withModuleFederation(config);`; let mfeConfig = ''; diff --git a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap b/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap index 37518c2417d66..b2f229141bc00 100644 --- a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap +++ b/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap @@ -2,18 +2,18 @@ exports[`Host App Generator should generate a host app with a remote 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`Host App Generator should generate a host app with a remote 2`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`Host App Generator should generate a host app with no remotes 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; diff --git a/packages/angular/src/generators/host/host.spec.ts b/packages/angular/src/generators/host/host.spec.ts index 56756899795e5..b5bfe47a80e4a 100644 --- a/packages/angular/src/generators/host/host.spec.ts +++ b/packages/angular/src/generators/host/host.spec.ts @@ -56,9 +56,9 @@ describe('Host App Generator', () => { // ASSERT expect(tree.exists('apps/remote1/project.json')).toBeTruthy(); expect(tree.exists('apps/remote2/project.json')).toBeTruthy(); - expect(tree.read('apps/host-app/mfe.config.js', 'utf-8')).toContain( - `'remote1','remote2'` - ); + expect( + tree.read('apps/host-app/module-federation.config.js', 'utf-8') + ).toContain(`'remote1','remote2'`); }); it('should generate a host, integrate existing remotes and generate any remotes that dont exist', async () => { @@ -78,8 +78,8 @@ describe('Host App Generator', () => { expect(tree.exists('apps/remote1/project.json')).toBeTruthy(); expect(tree.exists('apps/remote2/project.json')).toBeTruthy(); expect(tree.exists('apps/remote3/project.json')).toBeTruthy(); - expect(tree.read('apps/host-app/mfe.config.js', 'utf-8')).toContain( - `'remote1','remote2','remote3'` - ); + expect( + tree.read('apps/host-app/module-federation.config.js', 'utf-8') + ).toContain(`'remote1','remote2','remote3'`); }); }); diff --git a/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap b/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap index ec152aa7a02ff..c779f20c52662 100644 --- a/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap +++ b/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap @@ -2,18 +2,18 @@ exports[`MFE Remote App Generator should generate a remote mfe app with a host 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`MFE Remote App Generator should generate a remote mfe app with a host 2`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; exports[`MFE Remote App Generator should generate a remote mfe app with no host 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; diff --git a/packages/angular/src/generators/remote/remote.ts b/packages/angular/src/generators/remote/remote.ts index 11813644264ec..8b202f283159b 100644 --- a/packages/angular/src/generators/remote/remote.ts +++ b/packages/angular/src/generators/remote/remote.ts @@ -2,10 +2,10 @@ import { joinPathFragments, Tree } from '@nrwl/devkit'; import type { Schema } from './schema'; import { getProjects, readProjectConfiguration } from '@nrwl/devkit'; import applicationGenerator from '../application/application'; -import { getMfeProjects } from '../../utils/get-mfe-projects'; +import { getMFProjects } from '../../utils/get-mf-projects'; function findNextAvailablePort(tree: Tree) { - const mfeProjects = getMfeProjects(tree); + const mfeProjects = getMFProjects(tree); const ports = new Set([4200]); for (const mfeProject of mfeProjects) { diff --git a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap index ccdfde0756cd3..dc391aa4c798d 100644 --- a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap +++ b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap @@ -3,7 +3,7 @@ exports[`Init MFE --federationType=dynamic should create a host with the correct configurations 1`] = ` "import { setRemoteDefinitions } from '@nrwl/angular/mfe'; - fetch('/assets/mfe.manifest.json') + fetch('/assets/module-federation.manifest.json') .then((res) => res.json()) .then(definitions => setRemoteDefinitions(definitions)) .then(() => import('./bootstrap').catch(err => console.error(err)))" @@ -83,7 +83,7 @@ export class AppModule { } exports[`Init MFE should create webpack and mfe configs correctly 1`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; @@ -96,7 +96,7 @@ exports[`Init MFE should create webpack and mfe configs correctly 2`] = ` exports[`Init MFE should create webpack and mfe configs correctly 3`] = ` "const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config);" `; diff --git a/packages/angular/src/generators/setup-mfe/files/webpack/mfe.config.js__tmpl__ b/packages/angular/src/generators/setup-mfe/files/webpack/module-federation.config.js__tmpl__ similarity index 100% rename from packages/angular/src/generators/setup-mfe/files/webpack/mfe.config.js__tmpl__ rename to packages/angular/src/generators/setup-mfe/files/webpack/module-federation.config.js__tmpl__ diff --git a/packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__ b/packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__ index d3576ea4abd01..d101992f0152c 100644 --- a/packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__ +++ b/packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__ @@ -1,3 +1,3 @@ const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation(config); \ No newline at end of file diff --git a/packages/angular/src/generators/setup-mfe/files/webpack/webpack.prod.config.js__tmpl__ b/packages/angular/src/generators/setup-mfe/files/webpack/webpack.prod.config.js__tmpl__ index 15b2b43dbc6ae..8caa6cf6d8486 100644 --- a/packages/angular/src/generators/setup-mfe/files/webpack/webpack.prod.config.js__tmpl__ +++ b/packages/angular/src/generators/setup-mfe/files/webpack/webpack.prod.config.js__tmpl__ @@ -1,5 +1,5 @@ const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./mfe.config'); +const config = require('./module-federation.config'); module.exports = withModuleFederation({ ...config, /* diff --git a/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts b/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts index 672f00a77f48b..a5ed340342dd8 100644 --- a/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts +++ b/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts @@ -24,19 +24,19 @@ export function checkIsCommaNeeded(mfeRemoteText: string) { export function addRemoteToHost(tree: Tree, options: Schema) { if (options.mfeType === 'remote' && options.host) { const hostProject = readProjectConfiguration(tree, options.host); - const pathToMfeManifest = joinPathFragments( + const pathToMFManifest = joinPathFragments( hostProject.sourceRoot, - 'assets/mfe.manifest.json' + 'assets/module-federation.manifest.json' ); const hostFederationType = determineHostFederationType( tree, - pathToMfeManifest + pathToMFManifest ); if (hostFederationType === 'static') { addRemoteToStaticHost(tree, options, hostProject); } else if (hostFederationType === 'dynamic') { - addRemoteToDynamicHost(tree, options, pathToMfeManifest); + addRemoteToDynamicHost(tree, options, pathToMFManifest); } const declarationFilePath = joinPathFragments( @@ -66,19 +66,19 @@ function addRemoteToStaticHost( options: Schema, hostProject: ProjectConfiguration ) { - const hostMfeConfigPath = joinPathFragments( + const hostMFConfigPath = joinPathFragments( hostProject.root, - 'mfe.config.js' + 'module-federation.config.js' ); - if (!hostMfeConfigPath || !tree.exists(hostMfeConfigPath)) { + if (!hostMFConfigPath || !tree.exists(hostMFConfigPath)) { throw new Error( - `The selected host application, ${options.host}, does not contain a mfe.config.js or mfe.manifest.json file. Are you sure it has been set up as a host application?` + `The selected host application, ${options.host}, does not contain a module-federation.config.js or module-federation.manifest.json file. Are you sure it has been set up as a host application?` ); } - const hostMFEConfig = tree.read(hostMfeConfigPath, 'utf-8'); - const webpackAst = tsquery.ast(hostMFEConfig); + const hostMFConfig = tree.read(hostMFConfigPath, 'utf-8'); + const webpackAst = tsquery.ast(hostMFConfig); const mfRemotesNode = tsquery( webpackAst, 'Identifier[name=remotes] ~ ArrayLiteralExpression', @@ -88,11 +88,11 @@ function addRemoteToStaticHost( const endOfPropertiesPos = mfRemotesNode.getEnd() - 1; const isCommaNeeded = checkIsCommaNeeded(mfRemotesNode.getText()); - const updatedConfig = `${hostMFEConfig.slice(0, endOfPropertiesPos)}${ + const updatedConfig = `${hostMFConfig.slice(0, endOfPropertiesPos)}${ isCommaNeeded ? ',' : '' - }'${options.appName}',${hostMFEConfig.slice(endOfPropertiesPos)}`; + }'${options.appName}',${hostMFConfig.slice(endOfPropertiesPos)}`; - tree.write(hostMfeConfigPath, updatedConfig); + tree.write(hostMFConfigPath, updatedConfig); } function addRemoteToDynamicHost( diff --git a/packages/angular/src/generators/setup-mfe/lib/fix-bootstrap.ts b/packages/angular/src/generators/setup-mfe/lib/fix-bootstrap.ts index 3877911aba453..e070da64bfe51 100644 --- a/packages/angular/src/generators/setup-mfe/lib/fix-bootstrap.ts +++ b/packages/angular/src/generators/setup-mfe/lib/fix-bootstrap.ts @@ -10,9 +10,9 @@ export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) { const bootstrapImportCode = `import('./bootstrap').catch(err => console.error(err))`; - const fetchMfeManifestCode = `import { setRemoteDefinitions } from '@nrwl/angular/mfe'; + const fetchMFManifestCode = `import { setRemoteDefinitions } from '@nrwl/angular/mfe'; - fetch('/assets/mfe.manifest.json') + fetch('/assets/module-federation.manifest.json') .then((res) => res.json()) .then(definitions => setRemoteDefinitions(definitions)) .then(() => ${bootstrapImportCode})`; @@ -20,7 +20,7 @@ export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) { tree.write( mainFilePath, options.mfeType === 'host' && options.federationType === 'dynamic' - ? fetchMfeManifestCode + ? fetchMFManifestCode : bootstrapImportCode ); } diff --git a/packages/angular/src/generators/setup-mfe/lib/generate-config.ts b/packages/angular/src/generators/setup-mfe/lib/generate-config.ts index 51c457aa90eb9..1571744bc55b0 100644 --- a/packages/angular/src/generators/setup-mfe/lib/generate-config.ts +++ b/packages/angular/src/generators/setup-mfe/lib/generate-config.ts @@ -9,7 +9,7 @@ export function generateWebpackConfig( remotesWithPorts: { remoteName: string; port: number }[] ) { if ( - host.exists(`${appRoot}/mfe.config.js`) || + host.exists(`${appRoot}/module-federation.config.js`) || host.exists(`${appRoot}/webpack.config.js`) || host.exists(`${appRoot}/webpack.prod.config.js`) ) { diff --git a/packages/angular/src/generators/setup-mfe/lib/setup-host-if-dynamic.ts b/packages/angular/src/generators/setup-mfe/lib/setup-host-if-dynamic.ts index 41f4ac066a3e8..28d9b2ffd0952 100644 --- a/packages/angular/src/generators/setup-mfe/lib/setup-host-if-dynamic.ts +++ b/packages/angular/src/generators/setup-mfe/lib/setup-host-if-dynamic.ts @@ -8,12 +8,12 @@ export function setupHostIfDynamic(tree: Tree, options: Schema) { return; } - const pathToMfeManifest = joinPathFragments( + const pathToMFManifest = joinPathFragments( readProjectConfiguration(tree, options.appName).sourceRoot, - 'assets/mfe.manifest.json' + 'assets/module-federation.manifest.json' ); - if (!tree.exists(pathToMfeManifest)) { - tree.write(pathToMfeManifest, '{}'); + if (!tree.exists(pathToMFManifest)) { + tree.write(pathToMFManifest, '{}'); } } diff --git a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts index d015629332758..28e2bdd570e53 100644 --- a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts +++ b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts @@ -1,4 +1,4 @@ -import { ProjectConfiguration, readJson, Tree } from '@nrwl/devkit'; +import { readJson, Tree } from '@nrwl/devkit'; import { readProjectConfiguration } from '@nrwl/devkit'; import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; @@ -32,7 +32,9 @@ describe('Init MFE', () => { }); // ASSERT - expect(tree.exists(`apps/${app}/mfe.config.js`)).toBeTruthy(); + expect( + tree.exists(`apps/${app}/module-federation.config.js`) + ).toBeTruthy(); expect(tree.exists(`apps/${app}/webpack.config.js`)).toBeTruthy(); expect(tree.exists(`apps/${app}/webpack.prod.config.js`)).toBeTruthy(); @@ -42,7 +44,10 @@ describe('Init MFE', () => { ); expect(webpackContents).toMatchSnapshot(); - const mfeConfigContents = tree.read(`apps/${app}/mfe.config.js`, 'utf-8'); + const mfeConfigContents = tree.read( + `apps/${app}/module-federation.config.js`, + 'utf-8' + ); expect(mfeConfigContents).toMatchSnapshot(); } ); @@ -135,7 +140,10 @@ describe('Init MFE', () => { }); // ASSERT - const mfeConfigContents = tree.read(`apps/app1/mfe.config.js`, 'utf-8'); + const mfeConfigContents = tree.read( + `apps/app1/module-federation.config.js`, + 'utf-8' + ); expect(mfeConfigContents).toContain(`'remote1'`); }); @@ -155,7 +163,10 @@ describe('Init MFE', () => { }); // ASSERT - const hostMfeConfig = tree.read('apps/app1/mfe.config.js', 'utf-8'); + const hostMfeConfig = tree.read( + 'apps/app1/module-federation.config.js', + 'utf-8' + ); expect(hostMfeConfig).toMatchSnapshot(); }); @@ -186,7 +197,10 @@ describe('Init MFE', () => { }); // ASSERT - const hostMfeConfig = tree.read('apps/app1/mfe.config.js', 'utf-8'); + const hostMfeConfig = tree.read( + 'apps/app1/module-federation.config.js', + 'utf-8' + ); expect(hostMfeConfig).toMatchSnapshot(); }); @@ -260,11 +274,11 @@ describe('Init MFE', () => { }); // ASSERT - expect(tree.read('apps/app1/mfe.config.js', 'utf-8')).toContain( - 'remotes: []' - ); expect( - tree.exists('apps/app1/src/assets/mfe.manifest.json') + tree.read('apps/app1/module-federation.config.js', 'utf-8') + ).toContain('remotes: []'); + expect( + tree.exists('apps/app1/src/assets/module-federation.manifest.json') ).toBeTruthy(); expect(tree.read('apps/app1/src/main.ts', 'utf-8')).toMatchSnapshot(); }); @@ -289,10 +303,12 @@ describe('Init MFE', () => { }); // ASSERT - expect(tree.read('apps/app1/mfe.config.js', 'utf-8')).toContain( - 'remotes: []' - ); - expect(readJson(tree, 'apps/app1/src/assets/mfe.manifest.json')).toEqual({ + expect( + tree.read('apps/app1/module-federation.config.js', 'utf-8') + ).toContain('remotes: []'); + expect( + readJson(tree, 'apps/app1/src/assets/module-federation.manifest.json') + ).toEqual({ remote1: 'http://localhost:4201', }); expect( diff --git a/packages/angular/src/migrations/update-13-8-1/add-cypress-mfe-workaround.ts b/packages/angular/src/migrations/update-13-8-1/add-cypress-mfe-workaround.ts index 7c6b5ed33b565..fb23ae6e680d7 100644 --- a/packages/angular/src/migrations/update-13-8-1/add-cypress-mfe-workaround.ts +++ b/packages/angular/src/migrations/update-13-8-1/add-cypress-mfe-workaround.ts @@ -4,10 +4,10 @@ import { readProjectConfiguration, formatFiles, } from '@nrwl/devkit'; -import { getMfeProjects } from '../../utils/get-mfe-projects'; +import { getMFProjects } from '../../utils/get-mf-projects'; export default async function (tree: Tree) { - const projects = getMfeProjects(tree); + const projects = getMFProjects(tree); for (const project of projects) { const e2eProjectName = `${project}-e2e`; diff --git a/packages/angular/src/migrations/update-14-0-0/rename-mf-config.spec.ts b/packages/angular/src/migrations/update-14-0-0/rename-mf-config.spec.ts new file mode 100644 index 0000000000000..84248790679e9 --- /dev/null +++ b/packages/angular/src/migrations/update-14-0-0/rename-mf-config.spec.ts @@ -0,0 +1,79 @@ +import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; +import host from '../../generators/host/host'; +import renameMFConfig from './rename-mf-config'; + +describe('Module Federation Config Migration', () => { + it('should rename files in projects that have an mfe.config.js', async () => { + // ARRANGE + const tree = createTreeWithEmptyWorkspace(2); + + await host(tree, { + name: 'host1', + }); + + tree.rename( + 'apps/host1/module-federation.config.js', + 'apps/host1/mfe.config.js' + ); + + const contentsOfMFEConfig = tree.read('apps/host1/mfe.config.js', 'utf-8'); + expect(tree.exists('apps/host1/mfe.config.js')).toBeTruthy(); + + // ACT + renameMFConfig(tree); + + // ASSERT + expect(tree.exists('apps/host1/mfe.config.js')).not.toBeTruthy(); + expect(tree.exists('apps/host1/module-federation.config.js')).toBeTruthy(); + expect( + tree.read('apps/host1/module-federation.config.js', 'utf-8') + ).toEqual(contentsOfMFEConfig); + }); + + it('should fix dynamic hosts', async () => { + // ARRANGE + const tree = createTreeWithEmptyWorkspace(2); + + await host(tree, { + name: 'host1', + dynamic: true, + }); + + tree.rename( + 'apps/host1/module-federation.config.js', + 'apps/host1/mfe.config.js' + ); + + tree.rename( + 'apps/host1/src/assets/module-federation.manifest.json', + 'apps/host1/src/assets/mfe.manifest.json' + ); + + tree.write( + 'apps/host1/src/main.ts', + tree + .read('apps/host1/src/main.ts', 'utf-8') + .replace('module-federation.manifest', 'mfe.manifest') + ); + + const contentsOfMFEConfig = tree.read('apps/host1/mfe.config.js', 'utf-8'); + const contentsOfMFEManifest = tree.read( + 'apps/host1/src/assets/mfe.manifest.json', + 'utf-8' + ); + expect(tree.exists('apps/host1/mfe.config.js')).toBeTruthy(); + + // ACT + renameMFConfig(tree); + + // ASSERT + expect(tree.exists('apps/host1/mfe.config.js')).not.toBeTruthy(); + expect(tree.exists('apps/host1/module-federation.config.js')).toBeTruthy(); + expect( + tree.read('apps/host1/module-federation.config.js', 'utf-8') + ).toEqual(contentsOfMFEConfig); + expect( + tree.read('apps/host1/src/assets/module-federation.config.json', 'utf-8') + ).toEqual(contentsOfMFEManifest); + }); +}); diff --git a/packages/angular/src/migrations/update-14-0-0/rename-mf-config.ts b/packages/angular/src/migrations/update-14-0-0/rename-mf-config.ts new file mode 100644 index 0000000000000..6f392f6867c0f --- /dev/null +++ b/packages/angular/src/migrations/update-14-0-0/rename-mf-config.ts @@ -0,0 +1,47 @@ +import type { Tree } from '@nrwl/devkit'; +import { joinPathFragments, readProjectConfiguration } from '@nrwl/devkit'; +import { getMFProjects } from '../../utils/get-mf-projects'; + +export default function renameMfeConfigToModuleFederation(tree: Tree) { + const mfProjects = getMFProjects(tree); + + for (const project of mfProjects) { + const { root, sourceRoot } = readProjectConfiguration(tree, project); + const pathToOldConfig = joinPathFragments(root, 'mfe.config.js'); + const pathToOldManifest = joinPathFragments( + sourceRoot, + 'assets/', + 'mfe.manifest.json' + ); + const pathToMain = joinPathFragments(sourceRoot, 'main.ts'); + if (tree.exists(pathToOldConfig)) { + tree.rename( + pathToOldConfig, + joinPathFragments(root, 'module-federation.config.js') + ); + } + + if (tree.exists(pathToOldManifest)) { + tree.rename( + pathToOldManifest, + joinPathFragments( + sourceRoot, + 'assets/', + 'module-federation.config.json' + ) + ); + } + + if ( + tree.exists(pathToMain) && + tree.read(pathToMain, 'utf-8').includes('mfe.manifest.json') + ) { + tree.write( + pathToMain, + tree + .read(pathToMain, 'utf-8') + .replace('mfe.manifest', 'module-federation.manifest') + ); + } + } +} diff --git a/packages/angular/src/utils/get-mfe-projects.ts b/packages/angular/src/utils/get-mf-projects.ts similarity index 97% rename from packages/angular/src/utils/get-mfe-projects.ts rename to packages/angular/src/utils/get-mf-projects.ts index 095201f4005f3..6605ff41ffe91 100644 --- a/packages/angular/src/utils/get-mfe-projects.ts +++ b/packages/angular/src/utils/get-mf-projects.ts @@ -2,7 +2,7 @@ import type { Tree } from '@nrwl/devkit'; import { tsquery } from '@phenomnomnominal/tsquery'; import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils'; -export function getMfeProjects( +export function getMFProjects( tree: Tree, { legacy }: { legacy: boolean } = { legacy: false } ) {