From a9a551db60d16f44589a266acf1827cb1701f92a Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Thu, 28 Sep 2023 10:57:12 -0400 Subject: [PATCH] feat(react): add remote to tspaths for typing (#19276) --- .../host/__snapshots__/host.spec.ts.snap | 5 ---- .../angular/src/generators/host/host.spec.ts | 1 - .../src/generators/remote/remote.spec.ts | 10 +++++++ .../setup-mf/lib/add-remote-to-host.ts | 26 +++++++++---------- .../src/generators/setup-mf/lib/index.ts | 1 + .../setup-mf/lib/setup-tspath-for-remote.ts | 18 +++++++++++++ .../src/generators/setup-mf/setup-mf.ts | 2 ++ .../src/remotes.d.ts__tmpl__ | 4 --- .../src/remotes.d.ts__tmpl__ | 4 --- .../react/src/generators/host/host.spec.ts | 4 --- .../remote/lib/setup-tspath-for-remote.ts | 16 ++++++++++++ .../src/generators/remote/remote.spec.ts | 6 +++++ .../react/src/generators/remote/remote.ts | 2 ++ 13 files changed, 68 insertions(+), 31 deletions(-) create mode 100644 packages/angular/src/generators/setup-mf/lib/setup-tspath-for-remote.ts delete mode 100644 packages/react/src/generators/host/files/module-federation-ts/src/remotes.d.ts__tmpl__ delete mode 100644 packages/react/src/generators/host/files/module-federation/src/remotes.d.ts__tmpl__ create mode 100644 packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts 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 a3562d04943c1..8d0e67c7e35a7 100644 --- a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap +++ b/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap @@ -418,11 +418,6 @@ bootstrapApplication(AppComponent, appConfig).catch((err) => `; exports[`Host App Generator should generate a host with remotes using standalone components 2`] = ` -"declare module 'remote1/Routes'; -" -`; - -exports[`Host App Generator should generate a host with remotes using standalone components 3`] = ` "import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; import { NxWelcomeComponent } from './nx-welcome.component'; diff --git a/packages/angular/src/generators/host/host.spec.ts b/packages/angular/src/generators/host/host.spec.ts index a6340adc552a8..70d7de742b036 100644 --- a/packages/angular/src/generators/host/host.spec.ts +++ b/packages/angular/src/generators/host/host.spec.ts @@ -131,7 +131,6 @@ describe('Host App Generator', () => { // ASSERT expect(tree.exists(`host/src/app/app.module.ts`)).toBeFalsy(); expect(tree.read(`host/src/bootstrap.ts`, 'utf-8')).toMatchSnapshot(); - expect(tree.read(`host/src/remotes.d.ts`, 'utf-8')).toMatchSnapshot(); expect( tree.read(`host/src/app/app.component.ts`, 'utf-8') ).toMatchSnapshot(); diff --git a/packages/angular/src/generators/remote/remote.spec.ts b/packages/angular/src/generators/remote/remote.spec.ts index 863124c4719ae..2c981d46d8c30 100644 --- a/packages/angular/src/generators/remote/remote.spec.ts +++ b/packages/angular/src/generators/remote/remote.spec.ts @@ -1,6 +1,7 @@ import { E2eTestRunner } from '../../utils/test-runners'; import { getProjects, + readJson, readNxJson, readProjectConfiguration, stripIndents, @@ -11,6 +12,7 @@ import { generateTestHostApplication, generateTestRemoteApplication, } from '../utils/testing'; +import { getRootTsConfigPathInTree } from '@nx/js'; describe('MF Remote App Generator', () => { it('should generate a remote mf app with no host', async () => { @@ -25,6 +27,10 @@ describe('MF Remote App Generator', () => { // ASSERT expect(tree.read('test/webpack.config.js', 'utf-8')).toMatchSnapshot(); + const tsconfigJson = readJson(tree, getRootTsConfigPathInTree(tree)); + expect(tsconfigJson.compilerOptions.paths['test/Module']).toEqual([ + 'test/src/app/remote-entry/entry.module.ts', + ]); }); it('should generate a remote mf app with a host', async () => { @@ -138,6 +144,10 @@ describe('MF Remote App Generator', () => { expect( tree.read(`test/src/app/remote-entry/entry.routes.ts`, 'utf-8') ).toMatchSnapshot(); + const tsconfigJson = readJson(tree, getRootTsConfigPathInTree(tree)); + expect(tsconfigJson.compilerOptions.paths['test/Routes']).toEqual([ + 'test/src/app/remote-entry/entry.routes.ts', + ]); }); it('should not generate an e2e project when e2eTestRunner is none', async () => { diff --git a/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts b/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts index 2b126dc6aee43..8e2ff44059644 100644 --- a/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts +++ b/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts @@ -41,19 +41,19 @@ export function addRemoteToHost(tree: Tree, options: Schema) { addRemoteToDynamicHost(tree, options, pathToMFManifest); } - const declarationFilePath = joinPathFragments( - hostProject.sourceRoot, - 'remotes.d.ts' - ); - - const declarationFileContent = - (tree.exists(declarationFilePath) - ? tree.read(declarationFilePath, 'utf-8') - : '') + - `\ndeclare module '${options.appName}/${ - options.standalone ? `Routes` : `Module` - }';`; - tree.write(declarationFilePath, declarationFileContent); + // const declarationFilePath = joinPathFragments( + // hostProject.sourceRoot, + // 'remotes.d.ts' + // ); + // + // const declarationFileContent = + // (tree.exists(declarationFilePath) + // ? tree.read(declarationFilePath, 'utf-8') + // : '') + + // `\ndeclare module '${options.appName}/${ + // options.standalone ? `Routes` : `Module` + // }';`; + // tree.write(declarationFilePath, declarationFileContent); addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType); } diff --git a/packages/angular/src/generators/setup-mf/lib/index.ts b/packages/angular/src/generators/setup-mf/lib/index.ts index e9e3af1955f50..a05cc639b7252 100644 --- a/packages/angular/src/generators/setup-mf/lib/index.ts +++ b/packages/angular/src/generators/setup-mf/lib/index.ts @@ -11,3 +11,4 @@ export * from './setup-host-if-dynamic'; export * from './setup-serve-target'; export * from './update-host-app-routes'; export * from './remove-dead-code-from-remote'; +export * from './setup-tspath-for-remote'; diff --git a/packages/angular/src/generators/setup-mf/lib/setup-tspath-for-remote.ts b/packages/angular/src/generators/setup-mf/lib/setup-tspath-for-remote.ts new file mode 100644 index 0000000000000..67ac6f80727a9 --- /dev/null +++ b/packages/angular/src/generators/setup-mf/lib/setup-tspath-for-remote.ts @@ -0,0 +1,18 @@ +import type { Tree } from '@nx/devkit'; +import type { Schema } from '../schema'; +import { joinPathFragments, readProjectConfiguration } from '@nx/devkit'; +import { addTsConfigPath } from '@nx/js'; + +export function setupTspathForRemote(tree: Tree, options: Schema) { + const project = readProjectConfiguration(tree, options.appName); + + const exportPath = options.standalone + ? `./src/app/remote-entry/entry.routes.ts` + : `./src/app/remote-entry/entry.module.ts`; + + const exportName = options.standalone ? 'Routes' : 'Module'; + + addTsConfigPath(tree, `${options.appName}/${exportName}`, [ + joinPathFragments(project.root, exportPath), + ]); +} diff --git a/packages/angular/src/generators/setup-mf/setup-mf.ts b/packages/angular/src/generators/setup-mf/setup-mf.ts index aba7153aa270d..c2628d6126ca3 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.ts @@ -17,6 +17,7 @@ import { normalizeOptions, removeDeadCodeFromRemote, setupHostIfDynamic, + setupTspathForRemote, setupServeTarget, updateHostAppRoutes, updateTsConfigTarget, @@ -41,6 +42,7 @@ export async function setupMf(tree: Tree, rawOptions: Schema) { addRemoteToHost(tree, options); addRemoteEntry(tree, options, projectConfig.root); removeDeadCodeFromRemote(tree, options); + setupTspathForRemote(tree, options); installTask = addDependenciesToPackageJson( tree, {}, diff --git a/packages/react/src/generators/host/files/module-federation-ts/src/remotes.d.ts__tmpl__ b/packages/react/src/generators/host/files/module-federation-ts/src/remotes.d.ts__tmpl__ deleted file mode 100644 index 1a6f4583c7541..0000000000000 --- a/packages/react/src/generators/host/files/module-federation-ts/src/remotes.d.ts__tmpl__ +++ /dev/null @@ -1,4 +0,0 @@ - // Declare your remote Modules here - // Example declare module 'about/Module'; - - <% remotes.forEach(function(r) { %>declare module '<%= r.fileName %>/Module';<% }); %> \ No newline at end of file diff --git a/packages/react/src/generators/host/files/module-federation/src/remotes.d.ts__tmpl__ b/packages/react/src/generators/host/files/module-federation/src/remotes.d.ts__tmpl__ deleted file mode 100644 index 1a6f4583c7541..0000000000000 --- a/packages/react/src/generators/host/files/module-federation/src/remotes.d.ts__tmpl__ +++ /dev/null @@ -1,4 +0,0 @@ - // Declare your remote Modules here - // Example declare module 'about/Module'; - - <% remotes.forEach(function(r) { %>declare module '<%= r.fileName %>/Module';<% }); %> \ No newline at end of file diff --git a/packages/react/src/generators/host/host.spec.ts b/packages/react/src/generators/host/host.spec.ts index bc78b795e9cf0..e1298de59e703 100644 --- a/packages/react/src/generators/host/host.spec.ts +++ b/packages/react/src/generators/host/host.spec.ts @@ -28,7 +28,6 @@ describe('hostGenerator', () => { expect(tree.exists('test/module-federation.config.js')).toBeTruthy(); expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy(); expect(tree.exists('test/src/main.ts')).toBeTruthy(); - expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy(); expect(tree.read('test/webpack.config.js', 'utf-8')).toMatchSnapshot(); expect( tree.read('test/module-federation.config.js', 'utf-8') @@ -52,7 +51,6 @@ describe('hostGenerator', () => { expect(tree.exists('test/module-federation.config.ts')).toBeTruthy(); expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy(); expect(tree.exists('test/src/main.ts')).toBeTruthy(); - expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy(); expect(tree.read('test/webpack.config.ts', 'utf-8')).toMatchSnapshot(); expect( tree.read('test/module-federation.config.ts', 'utf-8') @@ -95,7 +93,6 @@ describe('hostGenerator', () => { expect(tree.exists('test/src/main.server.tsx')).toBeTruthy(); expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy(); expect(tree.exists('test/src/main.ts')).toBeTruthy(); - expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy(); expect(readJson(tree, 'test/tsconfig.server.json')).toEqual({ compilerOptions: { @@ -136,7 +133,6 @@ describe('hostGenerator', () => { expect(tree.exists('test/src/main.server.tsx')).toBeTruthy(); expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy(); expect(tree.exists('test/src/main.ts')).toBeTruthy(); - expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy(); expect(readJson(tree, 'test/tsconfig.server.json')).toEqual({ compilerOptions: { diff --git a/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts b/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts new file mode 100644 index 0000000000000..1f17568a55ba2 --- /dev/null +++ b/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts @@ -0,0 +1,16 @@ +import type { Tree } from '@nx/devkit'; +import type { Schema } from '../schema'; +import { joinPathFragments, readProjectConfiguration } from '@nx/devkit'; +import { addTsConfigPath } from '@nx/js'; + +export function setupTspathForRemote(tree: Tree, options: Schema) { + const project = readProjectConfiguration(tree, options.name); + + const exportPath = `./src/remote-entry.ts`; + + const exportName = 'Module'; + + addTsConfigPath(tree, `${options.name}/${exportName}`, [ + joinPathFragments(project.root, exportPath), + ]); +} diff --git a/packages/react/src/generators/remote/remote.spec.ts b/packages/react/src/generators/remote/remote.spec.ts index 5b1783d357a59..b4f5755f36b2d 100644 --- a/packages/react/src/generators/remote/remote.spec.ts +++ b/packages/react/src/generators/remote/remote.spec.ts @@ -2,6 +2,7 @@ import { readJson, readNxJson } from '@nx/devkit'; import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; import { Linter } from '@nx/linter'; import remote from './remote'; +import { getRootTsConfigPath, getRootTsConfigPathInTree } from '@nx/js'; describe('remote generator', () => { it('should create the remote with the correct config files', async () => { @@ -27,6 +28,11 @@ describe('remote generator', () => { expect( tree.read('test/module-federation.config.js', 'utf-8') ).toMatchSnapshot(); + + const tsconfigJson = readJson(tree, getRootTsConfigPathInTree(tree)); + expect(tsconfigJson.compilerOptions.paths['test/Module']).toEqual([ + 'test/src/remote-entry.ts', + ]); }); it('should create the remote with the correct config files when --typescriptConfiguration=true', async () => { diff --git a/packages/react/src/generators/remote/remote.ts b/packages/react/src/generators/remote/remote.ts index a51570464afef..f3cd4c30dc64b 100644 --- a/packages/react/src/generators/remote/remote.ts +++ b/packages/react/src/generators/remote/remote.ts @@ -19,6 +19,7 @@ import { updateModuleFederationProject } from '../../rules/update-module-federat import { Schema } from './schema'; import setupSsrGenerator from '../setup-ssr/setup-ssr'; import { setupSsrForRemote } from './lib/setup-ssr-for-remote'; +import { setupTspathForRemote } from './lib/setup-tspath-for-remote'; export function addModuleFederationFiles( host: Tree, @@ -94,6 +95,7 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) { addModuleFederationFiles(host, options); updateModuleFederationProject(host, options); + setupTspathForRemote(host, options); if (options.ssr) { const setupSsrTask = await setupSsrGenerator(host, {