From 43fed3669374bfccc1968a9a065e96a2d1c41267 Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Wed, 7 Feb 2024 14:28:52 -0500 Subject: [PATCH] fix(react): fix js for module federation --- .../react/generators/federate-module.json | 3 +- .../packages/react/generators/host.json | 5 +- .../packages/react/generators/remote.json | 5 +- .../src/react-module-federation.test.ts | 50 +++++++++++++++++-- .../src/generators/application/application.ts | 3 +- .../generators/application/lib/add-project.ts | 7 +-- .../generators/application/lib/add-routing.ts | 13 ++--- .../lib/create-application-files.ts | 8 +-- .../application/lib/update-jest-config.ts | 8 +-- .../federate-module/federate-module.spec.ts | 8 +-- .../generators/federate-module/schema.json | 3 +- packages/react/src/generators/host/host.ts | 5 +- .../host/lib/add-module-federation-files.ts | 17 +++---- .../react/src/generators/host/schema.json | 5 +- .../library/lib/add-rollup-build-target.ts | 4 +- .../library/lib/update-app-routes.ts | 2 +- .../react/src/generators/library/library.ts | 13 +++-- ...module-federation.server.config.ts__tmpl__ | 2 +- ...module-federation.server.config.js__tmpl__ | 2 +- .../module-federation.config.ts__tmpl__ | 2 +- .../module-federation.config.js__tmpl__ | 2 +- .../remote/lib/setup-tspath-for-remote.ts | 5 +- .../remote/lib/update-host-with-remote.ts | 8 +-- .../react/src/generators/remote/remote.ts | 35 ++++++++++--- .../react/src/generators/remote/schema.json | 5 +- .../rules/update-module-federation-project.ts | 5 +- .../library/lib => utils}/maybe-js.ts | 4 +- 27 files changed, 145 insertions(+), 84 deletions(-) rename packages/react/src/{generators/library/lib => utils}/maybe-js.ts (54%) diff --git a/docs/generated/packages/react/generators/federate-module.json b/docs/generated/packages/react/generators/federate-module.json index 0f156209fedc09..b490fdb5911bb0 100644 --- a/docs/generated/packages/react/generators/federate-module.json +++ b/docs/generated/packages/react/generators/federate-module.json @@ -69,7 +69,8 @@ "e2eTestRunner": { "type": "string", "enum": ["cypress", "playwright", "none"], - "description": "Test runner to use for end to end (e2e) tests.", + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", "default": "cypress" }, "host": { diff --git a/docs/generated/packages/react/generators/host.json b/docs/generated/packages/react/generators/host.json index f6541bee84e48e..8d72ba1722b0f7 100644 --- a/docs/generated/packages/react/generators/host.json +++ b/docs/generated/packages/react/generators/host.json @@ -94,7 +94,8 @@ "e2eTestRunner": { "type": "string", "enum": ["cypress", "playwright", "none"], - "description": "Test runner to use for end to end (e2e) tests.", + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", "default": "cypress" }, "tags": { @@ -164,7 +165,7 @@ }, "typescriptConfiguration": { "type": "boolean", - "description": "Whether the module federation configuration and webpack configuration files should use TS.", + "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.", "default": true } }, diff --git a/docs/generated/packages/react/generators/remote.json b/docs/generated/packages/react/generators/remote.json index f9b6de2b9fc0be..b6d4cded8e6632 100644 --- a/docs/generated/packages/react/generators/remote.json +++ b/docs/generated/packages/react/generators/remote.json @@ -100,7 +100,8 @@ "e2eTestRunner": { "type": "string", "enum": ["cypress", "playwright", "none"], - "description": "Test runner to use for end to end (e2e) tests.", + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", "default": "cypress" }, "tags": { @@ -163,7 +164,7 @@ }, "typescriptConfiguration": { "type": "boolean", - "description": "Whether the module federation configuration and webpack configuration files should use TS.", + "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.", "default": true } }, diff --git a/e2e/react-module-federation/src/react-module-federation.test.ts b/e2e/react-module-federation/src/react-module-federation.test.ts index 3696c072bb24f3..f358430c496d15 100644 --- a/e2e/react-module-federation/src/react-module-federation.test.ts +++ b/e2e/react-module-federation/src/react-module-federation.test.ts @@ -65,9 +65,10 @@ describe('React Module Federation', () => { ), }); - updateFile( - `apps/${shell}/webpack.config.${js ? 'js' : 'ts'}`, - stripIndents` + if (js) { + updateFile( + `apps/${shell}/webpack.config.js`, + stripIndents` const { composePlugins, withNx } = require('@nx/webpack'); const { withReact } = require('@nx/react'); const { withModuleFederation } = require('@nx/react/module-federation'); @@ -86,7 +87,31 @@ describe('React Module Federation', () => { // Nx plugins for webpack to build config object from Nx options and context. module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config)); ` - ); + ); + } else { + updateFile( + `apps/${shell}/webpack.config.ts`, + stripIndents` + import { composePlugins, withNx } from '@nx/webpack'; + import { withReact } from '@nx/react'; + import { withModuleFederation } from '@nx/react/module-federation'; + + import baseConfig from './module-federation.config'; + + const config = { + ...baseConfig, + remotes: [ + '${remote1}', + ['${remote2}', 'http://localhost:${defaultRemotePort}/${remote2}/remoteEntry.js'], + ['${remote3}', 'http://localhost:${defaultRemotePort}/${remote3}/remoteEntry.js'], + ], + }; + + // Nx plugins for webpack to build config object from Nx options and context. + export default composePlugins(withNx(), withReact(), withModuleFederation(config)); + ` + ); + } updateFile( `apps/${shell}-e2e/src/integration/app.spec.${js ? 'js' : 'ts'}`, @@ -117,6 +142,23 @@ describe('React Module Federation', () => { ` ); + [shell, remote1, remote2, remote3].forEach((app) => { + ['development', 'production'].forEach(async (configuration) => { + const cliOutput = runCLI(`run ${app}:build:${configuration}`); + expect(cliOutput).toContain('Successfully ran target'); + }); + }); + + const serveResult = await runCommandUntil(`serve ${shell}`, (output) => + output.includes(`http://localhost:${readPort(shell)}`) + ); + + await killProcessAndPorts( + serveResult.pid, + readPort(shell), + defaultRemotePort + ); + if (runE2ETests()) { const e2eResultsSwc = await runCommandUntil( `e2e ${shell}-e2e --no-watch --verbose`, diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts index 094d0b4a7a5f96..4b8892870ef3e7 100644 --- a/packages/react/src/generators/application/application.ts +++ b/packages/react/src/generators/application/application.ts @@ -3,7 +3,7 @@ import { NormalizedSchema, Schema } from './schema'; import { createApplicationFiles } from './lib/create-application-files'; import { updateSpecConfig } from './lib/update-jest-config'; import { normalizeOptions } from './lib/normalize-options'; -import { addProject, maybeJs } from './lib/add-project'; +import { addProject } from './lib/add-project'; import { addJest } from './lib/add-jest'; import { addRouting } from './lib/add-routing'; import { setDefaults } from './lib/set-defaults'; @@ -27,6 +27,7 @@ import { nxRspackVersion, nxVersion, } from '../../utils/versions'; +import { maybeJs } from '../../utils/maybe-js'; import { installCommonDependencies } from './lib/install-common-dependencies'; import { extractTsConfigBase } from '../../utils/create-ts-config'; import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies'; diff --git a/packages/react/src/generators/application/lib/add-project.ts b/packages/react/src/generators/application/lib/add-project.ts index 29920520ea1eda..bda4f2b39da9da 100644 --- a/packages/react/src/generators/application/lib/add-project.ts +++ b/packages/react/src/generators/application/lib/add-project.ts @@ -7,6 +7,7 @@ import { Tree, } from '@nx/devkit'; import { hasWebpackPlugin } from '../../../utils/has-webpack-plugin'; +import { maybeJs } from '../../../utils/maybe-js'; export function addProject(host: Tree, options: NormalizedSchema) { const project: ProjectConfiguration = { @@ -31,12 +32,6 @@ export function addProject(host: Tree, options: NormalizedSchema) { }); } -export function maybeJs(options: NormalizedSchema, path: string): string { - return options.js && (path.endsWith('.ts') || path.endsWith('.tsx')) - ? path.replace(/\.tsx?$/, '.js') - : path; -} - function createBuildTarget(options: NormalizedSchema): TargetConfiguration { return { executor: '@nx/webpack:webpack', diff --git a/packages/react/src/generators/application/lib/add-routing.ts b/packages/react/src/generators/application/lib/add-routing.ts index bbb45ad8dc6999..95eaebe96f1a94 100644 --- a/packages/react/src/generators/application/lib/add-routing.ts +++ b/packages/react/src/generators/application/lib/add-routing.ts @@ -1,6 +1,3 @@ -import { addInitialRoutes } from '../../../utils/ast-utils'; -import { NormalizedSchema } from '../schema'; -import { reactRouterDomVersion } from '../../../utils/versions'; import { joinPathFragments, Tree, @@ -8,6 +5,10 @@ import { addDependenciesToPackageJson, } from '@nx/devkit'; import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'; +import { addInitialRoutes } from '../../../utils/ast-utils'; +import { reactRouterDomVersion } from '../../../utils/versions'; +import { maybeJs } from '../../../utils/maybe-js'; +import { NormalizedSchema } from '../schema'; let tsModule: typeof import('typescript'); @@ -47,9 +48,3 @@ export function addRouting(host: Tree, options: NormalizedSchema) { return () => {}; } - -function maybeJs(options: NormalizedSchema, path: string): string { - return options.js && (path.endsWith('.ts') || path.endsWith('.tsx')) - ? path.replace(/\.tsx?$/, '.js') - : path; -} diff --git a/packages/react/src/generators/application/lib/create-application-files.ts b/packages/react/src/generators/application/lib/create-application-files.ts index 6c1c17c4968f4a..91ddf811212f93 100644 --- a/packages/react/src/generators/application/lib/create-application-files.ts +++ b/packages/react/src/generators/application/lib/create-application-files.ts @@ -7,16 +7,16 @@ import { Tree, writeJson, } from '@nx/devkit'; +import { WithNxOptions } from '@nx/webpack'; import { getRelativePathToRootTsConfig } from '@nx/js'; import { join } from 'path'; import { createTsConfig } from '../../../utils/create-ts-config'; import { getInSourceVitestTestsTemplate } from '../../../utils/get-in-source-vitest-tests-template'; -import { NormalizedSchema } from '../schema'; -import { getAppTests } from './get-app-tests'; -import { maybeJs } from './add-project'; +import { maybeJs } from '../../../utils/maybe-js'; import { WithReactOptions } from '../../../../plugins/with-react'; -import { WithNxOptions } from '@nx/webpack'; import { hasWebpackPlugin } from '../../../utils/has-webpack-plugin'; +import { NormalizedSchema } from '../schema'; +import { getAppTests } from './get-app-tests'; export function createApplicationFiles(host: Tree, options: NormalizedSchema) { let styleSolutionSpecificAppFiles: string; diff --git a/packages/react/src/generators/application/lib/update-jest-config.ts b/packages/react/src/generators/application/lib/update-jest-config.ts index 3af0f138a5ff86..62e279dc87a4a0 100644 --- a/packages/react/src/generators/application/lib/update-jest-config.ts +++ b/packages/react/src/generators/application/lib/update-jest-config.ts @@ -1,3 +1,4 @@ +import { maybeJs } from '../../../utils/maybe-js'; import { updateJestConfigContent } from '../../../utils/jest-utils'; import { NormalizedSchema } from '../schema'; import { Tree, updateJson } from '@nx/devkit'; @@ -26,9 +27,10 @@ export function updateSpecConfig(host: Tree, options: NormalizedSchema) { return; } - const configPath = `${options.appProjectRoot}/jest.config.${ - options.js ? 'js' : 'ts' - }`; + const configPath = maybeJs( + options, + `${options.appProjectRoot}/jest.config.ts` + ); const originalContent = host.read(configPath, 'utf-8'); const content = updateJestConfigContent(originalContent); host.write(configPath, content); diff --git a/packages/react/src/generators/federate-module/federate-module.spec.ts b/packages/react/src/generators/federate-module/federate-module.spec.ts index 7c61a1729ea2df..878719272998e7 100644 --- a/packages/react/src/generators/federate-module/federate-module.spec.ts +++ b/packages/react/src/generators/federate-module/federate-module.spec.ts @@ -44,10 +44,10 @@ describe('federate-module', () => { it('should contain an entry for the new path for module federation', async () => { await federateModuleGenerator(tree, schema); - expect(tree.exists('my-remote/module-federation.config.js')).toBe(true); + expect(tree.exists('my-remote/module-federation.config.ts')).toBe(true); const content = tree.read( - 'my-remote/module-federation.config.js', + 'my-remote/module-federation.config.ts', 'utf-8' ); expect(content).toContain( @@ -89,7 +89,7 @@ describe('federate-module', () => { it('should append the new path to the module federation config', async () => { let content = tree.read( - `${remoteSchema.name}/module-federation.config.js`, + `${remoteSchema.name}/module-federation.config.ts`, 'utf-8' ); @@ -103,7 +103,7 @@ describe('federate-module', () => { }); content = tree.read( - `${remoteSchema.name}/module-federation.config.js`, + `${remoteSchema.name}/module-federation.config.ts`, 'utf-8' ); expect(content).toContain( diff --git a/packages/react/src/generators/federate-module/schema.json b/packages/react/src/generators/federate-module/schema.json index 74025490ee77b2..85c4868390c3b7 100644 --- a/packages/react/src/generators/federate-module/schema.json +++ b/packages/react/src/generators/federate-module/schema.json @@ -69,7 +69,8 @@ "e2eTestRunner": { "type": "string", "enum": ["cypress", "playwright", "none"], - "description": "Test runner to use for end to end (e2e) tests.", + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", "default": "cypress" }, "host": { diff --git a/packages/react/src/generators/host/host.ts b/packages/react/src/generators/host/host.ts index 7b26f7ac27c847..a21e9c558a24be 100644 --- a/packages/react/src/generators/host/host.ts +++ b/packages/react/src/generators/host/host.ts @@ -39,7 +39,10 @@ export async function hostGeneratorInternal( const tasks: GeneratorCallback[] = []; const options: NormalizedSchema = { ...(await normalizeOptions(host, schema, '@nx/react:host')), - typescriptConfiguration: schema.typescriptConfiguration ?? true, + js: schema.js ?? false, + typescriptConfiguration: schema.js + ? false + : schema.typescriptConfiguration ?? true, dynamic: schema.dynamic ?? false, // TODO(colum): remove when MF works with Crystal addPlugin: false, diff --git a/packages/react/src/generators/host/lib/add-module-federation-files.ts b/packages/react/src/generators/host/lib/add-module-federation-files.ts index 489de5313e6c56..9aaf8e35e7d4ff 100644 --- a/packages/react/src/generators/host/lib/add-module-federation-files.ts +++ b/packages/react/src/generators/host/lib/add-module-federation-files.ts @@ -1,4 +1,3 @@ -import { NormalizedSchema } from '../schema'; import { Tree, generateFiles, @@ -6,6 +5,8 @@ import { names, readProjectConfiguration, } from '@nx/devkit'; +import { maybeJs } from '../../../utils/maybe-js'; +import { NormalizedSchema } from '../schema'; export function addModuleFederationFiles( host: Tree, @@ -35,13 +36,10 @@ export function addModuleFederationFiles( // Renaming original entry file so we can use `import(./bootstrap)` in // new entry file. host.rename( + joinPathFragments(options.appProjectRoot, maybeJs(options, 'src/main.tsx')), joinPathFragments( options.appProjectRoot, - `src/main.${options.js ? 'js' : 'tsx'}` - ), - joinPathFragments( - options.appProjectRoot, - `src/bootstrap.${options.js ? 'js' : 'tsx'}` + maybeJs(options, 'src/bootstrap.tsx') ) ); @@ -55,10 +53,9 @@ export function addModuleFederationFiles( templateVariables ); - const pathToModuleFederationFiles = - options.typescriptConfiguration && !options.js - ? 'module-federation-ts' - : 'module-federation'; + const pathToModuleFederationFiles = options.typescriptConfiguration + ? 'module-federation-ts' + : 'module-federation'; // New entry file is created here. generateFiles( host, diff --git a/packages/react/src/generators/host/schema.json b/packages/react/src/generators/host/schema.json index 7fa5d6d169378e..4f5e84a1db9d8b 100644 --- a/packages/react/src/generators/host/schema.json +++ b/packages/react/src/generators/host/schema.json @@ -100,7 +100,8 @@ "e2eTestRunner": { "type": "string", "enum": ["cypress", "playwright", "none"], - "description": "Test runner to use for end to end (e2e) tests.", + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", "default": "cypress" }, "tags": { @@ -170,7 +171,7 @@ }, "typescriptConfiguration": { "type": "boolean", - "description": "Whether the module federation configuration and webpack configuration files should use TS.", + "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.", "default": true } }, diff --git a/packages/react/src/generators/library/lib/add-rollup-build-target.ts b/packages/react/src/generators/library/lib/add-rollup-build-target.ts index 0bd00ed358cfd0..dcb1d7a5ce4715 100644 --- a/packages/react/src/generators/library/lib/add-rollup-build-target.ts +++ b/packages/react/src/generators/library/lib/add-rollup-build-target.ts @@ -9,13 +9,13 @@ import { updateProjectConfiguration, } from '@nx/devkit'; -import { maybeJs } from './maybe-js'; -import { NormalizedSchema } from '../schema'; +import { maybeJs } from '../../../utils/maybe-js'; import { nxVersion, rollupPluginUrlVersion, svgrRollupVersion, } from '../../../utils/versions'; +import { NormalizedSchema } from '../schema'; export async function addRollupBuildTarget( host: Tree, diff --git a/packages/react/src/generators/library/lib/update-app-routes.ts b/packages/react/src/generators/library/lib/update-app-routes.ts index de334545a570a4..7ed70e127eb7cd 100644 --- a/packages/react/src/generators/library/lib/update-app-routes.ts +++ b/packages/react/src/generators/library/lib/update-app-routes.ts @@ -14,7 +14,7 @@ import { findComponentImportPath, } from '../../../utils/ast-utils'; import { addInitialRoutes } from '../../../utils/ast-utils'; -import { maybeJs } from './maybe-js'; +import { maybeJs } from '../../../utils/maybe-js'; import { reactRouterDomVersion } from '../../../utils/versions'; import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'; diff --git a/packages/react/src/generators/library/library.ts b/packages/react/src/generators/library/library.ts index 45d02de5d8bd59..8b50dc1f8b8240 100644 --- a/packages/react/src/generators/library/library.ts +++ b/packages/react/src/generators/library/library.ts @@ -1,3 +1,4 @@ +import { relative } from 'path'; import { addProjectConfiguration, ensurePackage, @@ -9,10 +10,11 @@ import { updateJson, } from '@nx/devkit'; import { getRelativeCwd } from '@nx/devkit/src/generators/artifact-name-and-directory-utils'; - +import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command'; import { addTsConfigPath, initGenerator as jsInitGenerator } from '@nx/js'; import { nxVersion } from '../../utils/versions'; +import { maybeJs } from '../../utils/maybe-js'; import componentGenerator from '../component/component'; import initGenerator from '../init/init'; import { Schema } from './schema'; @@ -25,8 +27,6 @@ import { createFiles } from './lib/create-files'; import { extractTsConfigBase } from '../../utils/create-ts-config'; import { installCommonDependencies } from './lib/install-common-dependencies'; import { setDefaults } from './lib/set-defaults'; -import { relative } from 'path'; -import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command'; export async function libraryGenerator(host: Tree, schema: Schema) { return await libraryGeneratorInternal(host, { @@ -227,10 +227,9 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) { if (!options.skipTsConfig) { addTsConfigPath(host, options.importPath, [ - joinPathFragments( - options.projectRoot, - './src', - 'index.' + (options.js ? 'js' : 'ts') + maybeJs( + options, + joinPathFragments(options.projectRoot, './src/index.ts') ), ]); } diff --git a/packages/react/src/generators/remote/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ b/packages/react/src/generators/remote/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ index 4481a845c9f802..c2359ff0009245 100644 --- a/packages/react/src/generators/remote/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ +++ b/packages/react/src/generators/remote/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ @@ -3,7 +3,7 @@ import {ModuleFederationConfig} from '@nx/webpack'; const config: ModuleFederationConfig = { name: '<%= projectName %>', exposes: { - './Module': '<%= appProjectRoot %>/src/remote-entry.ts', + './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>', }, }; diff --git a/packages/react/src/generators/remote/files/module-federation-ssr/module-federation.server.config.js__tmpl__ b/packages/react/src/generators/remote/files/module-federation-ssr/module-federation.server.config.js__tmpl__ index 07de46836b47db..2859c54edcc18f 100644 --- a/packages/react/src/generators/remote/files/module-federation-ssr/module-federation.server.config.js__tmpl__ +++ b/packages/react/src/generators/remote/files/module-federation-ssr/module-federation.server.config.js__tmpl__ @@ -1,6 +1,6 @@ module.exports = { name: '<%= projectName %>', exposes: { - './Module': '<%= appProjectRoot %>/src/remote-entry.ts', + './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>', }, }; diff --git a/packages/react/src/generators/remote/files/module-federation-ts/module-federation.config.ts__tmpl__ b/packages/react/src/generators/remote/files/module-federation-ts/module-federation.config.ts__tmpl__ index d3f4d6bea1c21d..01c1e928b5167d 100644 --- a/packages/react/src/generators/remote/files/module-federation-ts/module-federation.config.ts__tmpl__ +++ b/packages/react/src/generators/remote/files/module-federation-ts/module-federation.config.ts__tmpl__ @@ -6,7 +6,7 @@ const config: ModuleFederationConfig = { library: { type: 'var', name: '<%= projectName %>'}, <% } %> exposes: { - './Module': './src/remote-entry.ts', + './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>', }, }; diff --git a/packages/react/src/generators/remote/files/module-federation/module-federation.config.js__tmpl__ b/packages/react/src/generators/remote/files/module-federation/module-federation.config.js__tmpl__ index 042baaf403adaf..da1a17ef1c16de 100644 --- a/packages/react/src/generators/remote/files/module-federation/module-federation.config.js__tmpl__ +++ b/packages/react/src/generators/remote/files/module-federation/module-federation.config.js__tmpl__ @@ -4,6 +4,6 @@ module.exports = { library: { type: 'var', name: '<%= projectName %>'}, <% } %> exposes: { - './Module': './src/remote-entry.<%= locals.js ? 'js' : 'ts' %>', + './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>', }, }; 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 index fee2c812032f9f..8c9ef51dbb50cf 100644 --- a/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts +++ b/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts @@ -1,12 +1,13 @@ import type { Tree } from '@nx/devkit'; -import type { Schema } from '../schema'; import { joinPathFragments, readProjectConfiguration } from '@nx/devkit'; import { addTsConfigPath } from '@nx/js'; +import { maybeJs } from '../../../utils/maybe-js'; +import type { Schema } from '../schema'; export function setupTspathForRemote(tree: Tree, options: Schema) { const project = readProjectConfiguration(tree, options.name); - const exportPath = `./src/remote-entry.${options.js ? 'js' : 'ts'}`; + const exportPath = maybeJs(options, './src/remote-entry.ts'); const exportName = 'Module'; diff --git a/packages/react/src/generators/remote/lib/update-host-with-remote.ts b/packages/react/src/generators/remote/lib/update-host-with-remote.ts index 2bfeb2be280090..c526b42119e486 100644 --- a/packages/react/src/generators/remote/lib/update-host-with-remote.ts +++ b/packages/react/src/generators/remote/lib/update-host-with-remote.ts @@ -107,14 +107,14 @@ export function updateHostWithRemote( function findAppComponentPath(host: Tree, sourceRoot: string) { const locations = [ - 'app/app.js', - 'app/App.js', - 'app.js', - 'App.js', 'app/app.tsx', 'app/App.tsx', + 'app/app.js', + 'app/App.js', 'app.tsx', 'App.tsx', + 'app.js', + 'App.js', ]; for (const loc of locations) { if (host.exists(joinPathFragments(sourceRoot, loc))) { diff --git a/packages/react/src/generators/remote/remote.ts b/packages/react/src/generators/remote/remote.ts index c6501016536337..5ab224398ba2bc 100644 --- a/packages/react/src/generators/remote/remote.ts +++ b/packages/react/src/generators/remote/remote.ts @@ -22,6 +22,7 @@ import { setupSsrForRemote } from './lib/setup-ssr-for-remote'; import { setupTspathForRemote } from './lib/setup-tspath-for-remote'; import { addRemoteToDynamicHost } from './lib/add-remote-to-dynamic-host'; import { addMfEnvToTargetDefaultInputs } from '../../utils/add-mf-env-to-inputs'; +import { maybeJs } from '../../utils/maybe-js'; export function addModuleFederationFiles( host: Tree, @@ -40,10 +41,9 @@ export function addModuleFederationFiles( templateVariables ); - const pathToModuleFederationFiles = - options.typescriptConfiguration && !options.js - ? 'module-federation-ts' - : 'module-federation'; + const pathToModuleFederationFiles = options.typescriptConfiguration + ? 'module-federation-ts' + : 'module-federation'; generateFiles( host, @@ -51,6 +51,23 @@ export function addModuleFederationFiles( options.appProjectRoot, templateVariables ); + + if (options.typescriptConfiguration) { + const pathToWebpackConfig = joinPathFragments( + options.appProjectRoot, + 'webpack.config.js' + ); + const pathToWebpackProdConfig = joinPathFragments( + options.appProjectRoot, + 'webpack.config.prod.js' + ); + if (host.exists(pathToWebpackConfig)) { + host.delete(pathToWebpackConfig); + } + if (host.exists(pathToWebpackProdConfig)) { + host.delete(pathToWebpackProdConfig); + } + } } export async function remoteGenerator(host: Tree, schema: Schema) { @@ -64,7 +81,11 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) { const tasks: GeneratorCallback[] = []; const options: NormalizedSchema = { ...(await normalizeOptions(host, schema, '@nx/react:remote')), - typescriptConfiguration: schema.typescriptConfiguration ?? false, + // when js is set to true, we want to use the js configuration + js: schema.js ?? false, + typescriptConfiguration: schema.js + ? false + : schema.typescriptConfiguration ?? true, dynamic: schema.dynamic ?? false, // TODO(colum): remove when MF works with Crystal addPlugin: false, @@ -85,8 +106,8 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) { // Renaming original entry file so we can use `import(./bootstrap)` in // new entry file. host.rename( - join(options.appProjectRoot, `src/main.${options.js ? 'js' : 'tsx'}`), - join(options.appProjectRoot, `src/bootstrap.${options.js ? 'js' : 'tsx'}`) + join(options.appProjectRoot, maybeJs(options, 'src/main.tsx')), + join(options.appProjectRoot, maybeJs(options, 'src/bootstrap.tsx')) ); addModuleFederationFiles(host, options); diff --git a/packages/react/src/generators/remote/schema.json b/packages/react/src/generators/remote/schema.json index 41f1498e2b465b..5e56b6bb2feb47 100644 --- a/packages/react/src/generators/remote/schema.json +++ b/packages/react/src/generators/remote/schema.json @@ -106,7 +106,8 @@ "e2eTestRunner": { "type": "string", "enum": ["cypress", "playwright", "none"], - "description": "Test runner to use for end to end (e2e) tests.", + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", "default": "cypress" }, "tags": { @@ -169,7 +170,7 @@ }, "typescriptConfiguration": { "type": "boolean", - "description": "Whether the module federation configuration and webpack configuration files should use TS.", + "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.", "default": true } }, diff --git a/packages/react/src/rules/update-module-federation-project.ts b/packages/react/src/rules/update-module-federation-project.ts index 7257dd0801c5be..a77662e324b2a2 100644 --- a/packages/react/src/rules/update-module-federation-project.ts +++ b/packages/react/src/rules/update-module-federation-project.ts @@ -7,23 +7,24 @@ import { updateProjectConfiguration, } from '@nx/devkit'; import { nxVersion } from '../utils/versions'; +import { maybeJs } from '../utils/maybe-js'; export function updateModuleFederationProject( host: Tree, options: { + js?: boolean; projectName: string; appProjectRoot: string; devServerPort?: number; typescriptConfiguration?: boolean; dynamic?: boolean; - js?: boolean; } ): GeneratorCallback { const projectConfig = readProjectConfiguration(host, options.projectName); projectConfig.targets.build.options = { ...projectConfig.targets.build.options, - main: `${options.appProjectRoot}/src/main.${options.js ? 'js' : 'ts'}`, + main: maybeJs(options, `${options.appProjectRoot}/src/main.ts`), webpackConfig: `${options.appProjectRoot}/webpack.config.${ options.typescriptConfiguration && !options.js ? 'ts' : 'js' }`, diff --git a/packages/react/src/generators/library/lib/maybe-js.ts b/packages/react/src/utils/maybe-js.ts similarity index 54% rename from packages/react/src/generators/library/lib/maybe-js.ts rename to packages/react/src/utils/maybe-js.ts index 274417777b012a..17daba9548c89a 100644 --- a/packages/react/src/generators/library/lib/maybe-js.ts +++ b/packages/react/src/utils/maybe-js.ts @@ -1,6 +1,4 @@ -import { NormalizedSchema } from '../schema'; - -export function maybeJs(options: NormalizedSchema, path: string): string { +export function maybeJs(options: { js?: boolean }, path: string): string { return options.js && (path.endsWith('.ts') || path.endsWith('.tsx')) ? path.replace(/\.tsx?$/, '.js') : path;