From 72016bb32430ca1d828ebf7b094b50b5eb364c67 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Wed, 13 Apr 2022 13:37:49 +0100 Subject: [PATCH] cleanup(angular): remove deprecated mfe apis from app --- docs/generated/packages/angular.json | 30 ------ e2e/angular-extensions/src/tailwind.test.ts | 2 +- .../__snapshots__/application.spec.ts.snap | 24 ----- .../application/application.spec.ts | 93 ------------------- .../src/generators/application/application.ts | 5 - .../src/generators/application/lib/add-mf.ts | 20 ---- .../src/generators/application/lib/index.ts | 1 - .../src/generators/application/schema.d.ts | 4 - .../src/generators/application/schema.json | 30 ------ .../angular/src/generators/host/host.spec.ts | 7 +- packages/angular/src/generators/host/host.ts | 17 +++- .../src/generators/remote/remote.spec.ts | 10 +- .../angular/src/generators/remote/remote.ts | 23 ++++- .../setup-mf/lib/add-cypress-workaround.ts | 6 +- 14 files changed, 44 insertions(+), 228 deletions(-) delete mode 100644 packages/angular/src/generators/application/lib/add-mf.ts diff --git a/docs/generated/packages/angular.json b/docs/generated/packages/angular.json index f54aee23005800..4bf76608d30e87 100644 --- a/docs/generated/packages/angular.json +++ b/docs/generated/packages/angular.json @@ -204,40 +204,10 @@ "description": "Split the project configuration into `/project.json` rather than including it inside `workspace.json`.", "type": "boolean" }, - "mf": { - "description": "Generate a Module Federation configuration for the application", - "type": "boolean", - "default": false, - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, - "mfType": { - "type": "string", - "enum": ["host", "remote"], - "description": "Type of application to generate the Module Federation configuration for.", - "default": "remote", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, - "federationType": { - "type": "string", - "enum": ["static", "dynamic"], - "description": "Use either Static or Dynamic Module Federation pattern for the application.", - "default": "static", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, "port": { "type": "number", "description": "The port at which the remote application should be served." }, - "remotes": { - "type": "array", - "description": "A list of remote application names that the host application should consume.", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, - "host": { - "type": "string", - "description": "The name of the host application that the remote application will be consumed by.", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, "setParserOptionsProject": { "type": "boolean", "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", diff --git a/e2e/angular-extensions/src/tailwind.test.ts b/e2e/angular-extensions/src/tailwind.test.ts index 503e3214802317..c92b01935c282e 100644 --- a/e2e/angular-extensions/src/tailwind.test.ts +++ b/e2e/angular-extensions/src/tailwind.test.ts @@ -13,7 +13,7 @@ import { } from '@nrwl/e2e/utils'; // TODO(Colum or Leosvel): Investigate and fix these tests -describe.skip('Tailwind support', () => { +describe('Tailwind support', () => { let project: string; const defaultButtonBgColor = 'bg-blue-700'; 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 77f6d07ea58f05..413f1ed5e5dd19 100644 --- a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap +++ b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap @@ -1,29 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`app --mf 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('./module-federation.config'); -module.exports = withModuleFederation(config);" -`; - -exports[`app --mf 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('./module-federation.config'); -module.exports = withModuleFederation(config);" -`; - -exports[`app --mf should generate a Module Federation correctly for a each app 1`] = ` -"const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./module-federation.config'); -module.exports = withModuleFederation(config);" -`; - -exports[`app --mf should generate a Module Federation correctly for a each app 2`] = ` -"const { withModuleFederation } = require('@nrwl/angular/module-federation'); -const config = require('./module-federation.config'); -module.exports = withModuleFederation(config);" -`; - exports[`app at the root should accept numbers in the path 1`] = `"src/9-websites/my-app"`; exports[`app nested should update workspace.json 1`] = ` diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts index a98e239936a904..bb1fe4a85eea70 100644 --- a/packages/angular/src/generators/application/application.spec.ts +++ b/packages/angular/src/generators/application/application.spec.ts @@ -928,99 +928,6 @@ describe('app', () => { }); }); - describe('--mf', () => { - test.each(['host', 'remote'])( - 'should generate a Module Federation correctly for a each app', - async (type: 'host' | 'remote') => { - await generateApp(appTree, 'my-app', { mf: true, mfType: type }); - - expect(appTree.exists(`apps/my-app/webpack.config.js`)).toBeTruthy(); - expect( - appTree.exists(`apps/my-app/webpack.prod.config.js`) - ).toBeTruthy(); - expect( - appTree.read(`apps/my-app/webpack.config.js`, 'utf-8') - ).toMatchSnapshot(); - } - ); - - test.each(['host', 'remote'])( - 'should update the builder to use webpack-browser', - async (type: 'host' | 'remote') => { - await generateApp(appTree, 'my-app', { mf: true, mfType: type }); - - const projectConfig = readProjectConfiguration(appTree, 'my-app'); - - expect(projectConfig.targets.build.executor).toEqual( - '@nrwl/angular:webpack-browser' - ); - } - ); - - it('should add a remote application and add it to a specified host applications webpack config when no other remote has been added to it', async () => { - // ARRANGE - await generateApp(appTree, 'app1', { - mf: true, - mfType: 'host', - }); - - // ACT - await generateApp(appTree, 'remote1', { - mf: true, - mfType: 'remote', - host: 'app1', - }); - - // ASSERT - const hostWebpackConfig = appTree.read( - 'apps/app1/webpack.config.js', - 'utf-8' - ); - expect(hostWebpackConfig).toMatchSnapshot(); - }); - - it('should add a remote application and add it to a specified host applications webpack config that contains a remote application already', async () => { - // ARRANGE - await generateApp(appTree, 'app1', { - mf: true, - mfType: 'host', - }); - - await generateApp(appTree, 'remote1', { - mf: true, - mfType: 'remote', - host: 'app1', - port: 4201, - }); - - // ACT - await generateApp(appTree, 'remote2', { - mf: true, - mfType: 'remote', - host: 'app1', - port: 4202, - }); - - // ASSERT - const hostWebpackConfig = appTree.read( - 'apps/app1/webpack.config.js', - 'utf-8' - ); - expect(hostWebpackConfig).toMatchSnapshot(); - }); - - it('should add a port to a non-mf app', async () => { - // ACT - await generateApp(appTree, 'app1', { - port: 4205, - }); - - // ASSERT - const projectConfig = readProjectConfiguration(appTree, 'app1'); - expect(projectConfig.targets.serve.options.port).toBe(4205); - }); - }); - describe('--add-tailwind', () => { it('should not add a tailwind.config.js and relevant packages when "--add-tailwind" is not specified', async () => { // ACT diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts index 3f338fc6245f17..1581c8740316d0 100644 --- a/packages/angular/src/generators/application/application.ts +++ b/packages/angular/src/generators/application/application.ts @@ -12,7 +12,6 @@ import { setupTailwindGenerator } from '../setup-tailwind/setup-tailwind'; import { addE2e, addLinting, - addMf, addProxyConfig, addRouterRootConfiguration, addUnitTestRunner, @@ -129,10 +128,6 @@ export async function applicationGenerator( }); } - if (options.mf) { - await addMf(host, options); - } - if (!options.skipFormat) { await formatFiles(host); } diff --git a/packages/angular/src/generators/application/lib/add-mf.ts b/packages/angular/src/generators/application/lib/add-mf.ts deleted file mode 100644 index 638bd53bec72b2..00000000000000 --- a/packages/angular/src/generators/application/lib/add-mf.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { Tree } from '@nrwl/devkit'; -import type { NormalizedSchema } from './normalized-schema'; - -import { setupMf } from '../../setup-mf/setup-mf'; - -export async function addMf(host: Tree, options: NormalizedSchema) { - await setupMf(host, { - appName: options.name, - mfType: options.mfType, - port: options.port, - remotes: options.remotes, - host: options.host, - routing: options.routing, - skipFormat: true, - skipPackageJson: options.skipPackageJson, - e2eProjectName: options.e2eProjectName, - federationType: options.federationType, - prefix: options.prefix, - }); -} diff --git a/packages/angular/src/generators/application/lib/index.ts b/packages/angular/src/generators/application/lib/index.ts index c3e57c96349aca..4250e0ab135e28 100644 --- a/packages/angular/src/generators/application/lib/index.ts +++ b/packages/angular/src/generators/application/lib/index.ts @@ -1,6 +1,5 @@ export * from './add-e2e'; export * from './add-linting'; -export * from './add-mf'; export * from './add-protractor'; export * from './add-proxy-config'; export * from './add-unit-test-runner'; diff --git a/packages/angular/src/generators/application/schema.d.ts b/packages/angular/src/generators/application/schema.d.ts index ecfda84f84ccd4..747409cfec9cde 100644 --- a/packages/angular/src/generators/application/schema.d.ts +++ b/packages/angular/src/generators/application/schema.d.ts @@ -23,11 +23,7 @@ export interface Schema { backendProject?: string; strict?: boolean; standaloneConfig?: boolean; - mf?: boolean; - mfType?: 'host' | 'remote'; - remotes?: string[]; port?: number; - host?: string; setParserOptionsProject?: boolean; skipPackageJson?: boolean; skipPostInstall?: boolean; diff --git a/packages/angular/src/generators/application/schema.json b/packages/angular/src/generators/application/schema.json index 3b1c2531022a3b..52d0f7f1cb394e 100644 --- a/packages/angular/src/generators/application/schema.json +++ b/packages/angular/src/generators/application/schema.json @@ -133,40 +133,10 @@ "description": "Split the project configuration into `/project.json` rather than including it inside `workspace.json`.", "type": "boolean" }, - "mf": { - "description": "Generate a Module Federation configuration for the application", - "type": "boolean", - "default": false, - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, - "mfType": { - "type": "string", - "enum": ["host", "remote"], - "description": "Type of application to generate the Module Federation configuration for.", - "default": "remote", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, - "federationType": { - "type": "string", - "enum": ["static", "dynamic"], - "description": "Use either Static or Dynamic Module Federation pattern for the application.", - "default": "static", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, "port": { "type": "number", "description": "The port at which the remote application should be served." }, - "remotes": { - "type": "array", - "description": "A list of remote application names that the host application should consume.", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, - "host": { - "type": "string", - "description": "The name of the host application that the remote application will be consumed by.", - "x-deprecated": "Use the `host` or `remote` generators instead. Support for generating Module Federation applications using the application generator will be removed in an upcoming version." - }, "setParserOptionsProject": { "type": "boolean", "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", diff --git a/packages/angular/src/generators/host/host.spec.ts b/packages/angular/src/generators/host/host.spec.ts index 2b1675fd7bd07b..cab2de6781af22 100644 --- a/packages/angular/src/generators/host/host.spec.ts +++ b/packages/angular/src/generators/host/host.spec.ts @@ -1,6 +1,5 @@ import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; import host from './host'; -import applicationGenerator from '../application/application'; import remote from '../remote/remote'; describe('Host App Generator', () => { @@ -21,12 +20,8 @@ describe('Host App Generator', () => { // ARRANGE const tree = createTreeWithEmptyWorkspace(); - await applicationGenerator(tree, { + await remote(tree, { name: 'remote', - mf: true, - mfType: 'remote', - routing: true, - port: 4201, }); // ACT diff --git a/packages/angular/src/generators/host/host.ts b/packages/angular/src/generators/host/host.ts index cc9017255d971f..8075c64aa8fb4f 100644 --- a/packages/angular/src/generators/host/host.ts +++ b/packages/angular/src/generators/host/host.ts @@ -12,6 +12,7 @@ import remoteGenerator from '../remote/remote'; import { normalizeProjectName } from '../utils/project'; import * as ts from 'typescript'; import { addRoute } from '../../utils/nx-devkit/ast-utils'; +import setupMf from '../setup-mf/setup-mf'; export default async function host(tree: Tree, options: Schema) { const projects = getProjects(tree); @@ -29,17 +30,29 @@ export default async function host(tree: Tree, options: Schema) { }); } + const appName = normalizeProjectName(options.name, options.directory); + const installTask = await applicationGenerator(tree, { ...options, - mf: true, + port: 4200, + skipFormat: true, + }); + + await setupMf(tree, { + appName, mfType: 'host', routing: true, - remotes: remotesToIntegrate ?? [], port: 4200, + remotes: remotesToIntegrate ?? [], federationType: options.dynamic ? 'dynamic' : 'static', + skipPackageJson: options.skipPackageJson, skipFormat: true, }); + if (!options.skipFormat) { + await formatFiles(tree); + } + for (const remote of remotesToGenerate) { await remoteGenerator(tree, { ...options, diff --git a/packages/angular/src/generators/remote/remote.spec.ts b/packages/angular/src/generators/remote/remote.spec.ts index 5a90ca66e66345..e980d1d21e64ee 100644 --- a/packages/angular/src/generators/remote/remote.spec.ts +++ b/packages/angular/src/generators/remote/remote.spec.ts @@ -3,8 +3,9 @@ import { readWorkspaceConfiguration, } from '@nrwl/devkit'; import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; -import applicationGenerator from '../application/application'; + import remote from './remote'; +import host from '../host/host'; describe('MF Remote App Generator', () => { it('should generate a remote mf app with no host', async () => { @@ -25,18 +26,14 @@ describe('MF Remote App Generator', () => { // ARRANGE const tree = createTreeWithEmptyWorkspace(); - await applicationGenerator(tree, { + await host(tree, { name: 'host', - mf: true, - mfType: 'host', - routing: true, }); // ACT await remote(tree, { name: 'test', host: 'host', - port: 4201, }); // ASSERT @@ -53,7 +50,6 @@ describe('MF Remote App Generator', () => { await remote(tree, { name: 'test', host: 'host', - port: 4201, }); } catch (error) { // ASSERT diff --git a/packages/angular/src/generators/remote/remote.ts b/packages/angular/src/generators/remote/remote.ts index afaf0d24520337..eb7359a5dd62e5 100644 --- a/packages/angular/src/generators/remote/remote.ts +++ b/packages/angular/src/generators/remote/remote.ts @@ -1,4 +1,5 @@ import { + formatFiles, getProjects, joinPathFragments, readProjectConfiguration, @@ -8,6 +9,7 @@ import type { Schema } from './schema'; import applicationGenerator from '../application/application'; import { getMFProjects } from '../../utils/get-mf-projects'; import { normalizeProjectName } from '../utils/project'; +import setupMf from '../setup-mf/setup-mf'; function findNextAvailablePort(tree: Tree) { const mfProjects = getMFProjects(tree); @@ -32,18 +34,33 @@ export default async function remote(tree: Tree, options: Schema) { ); } + const appName = normalizeProjectName(options.name, options.directory); + const port = options.port ?? findNextAvailablePort(tree); + const installTask = await applicationGenerator(tree, { ...options, - mf: true, + routing: true, + skipFormat: true, + port, + skipDefaultProject: true, + }); + + await setupMf(tree, { + appName, mfType: 'remote', routing: true, host: options.host, - port: options.port ?? findNextAvailablePort(tree), - skipDefaultProject: true, + port, + skipPackageJson: options.skipPackageJson, + skipFormat: true, }); removeDeadCode(tree, options); + if (!options.skipFormat) { + await formatFiles(tree); + } + return installTask; } diff --git a/packages/angular/src/generators/setup-mf/lib/add-cypress-workaround.ts b/packages/angular/src/generators/setup-mf/lib/add-cypress-workaround.ts index 08fe60ffa3b54e..b5b1f608b5dffd 100644 --- a/packages/angular/src/generators/setup-mf/lib/add-cypress-workaround.ts +++ b/packages/angular/src/generators/setup-mf/lib/add-cypress-workaround.ts @@ -18,8 +18,10 @@ export function addCypressOnErrorWorkaround(tree: Tree, schema: Schema) { try { e2eProject = readProjectConfiguration(tree, e2eProjectName); } catch { - logger.warn(`Could not find an associated e2e project for ${schema.appName} with name ${e2eProjectName}. - If the app does have an associated Cypress e2e project, you can pass the name of it to the generator using --e2eProjectName.`); + logger.warn(`Could not find an associated e2e project for ${schema.appName} with name ${e2eProjectName}. + If there is an associated e2e project for this application, and it uses Cypress, you will need to add a workaround to allow Cypress to test correctly. + You can find how to implement that workaround here: https://docs.cypress.io/api/events/catalog-of-events#Uncaught-Exceptions + `); return; }