@nx/react 18.0.3 → 18.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "18.0.3",
+  "version": "18.0.5",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -36,11 +36,11 @@
     "chalk": "^4.1.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "18.0.3",
-    "@nx/js": "18.0.3",
-    "@nx/eslint": "18.0.3",
-    "@nx/web": "18.0.3",
-    "@nrwl/react": "18.0.3"
+    "@nx/devkit": "18.0.5",
+    "@nx/js": "18.0.5",
+    "@nx/eslint": "18.0.5",
+    "@nx/web": "18.0.5",
+    "@nrwl/react": "18.0.5"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -8,6 +8,16 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     parallel?: number;
     staticRemotesPort?: number;
 };
+type StaticRemoteConfig = {
+    basePath: string;
+    outputPath: string;
+    urlSegment: string;
+};
+type StaticRemotesConfig = {
+    remotes: string[];
+    config: Record<string, StaticRemoteConfig> | undefined;
+};
+export declare function parseStaticRemotesConfig(staticRemotes: string[] | undefined, context: ExecutorContext): StaticRemotesConfig;
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;
     baseUrl?: string;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseStaticRemotesConfig = void 0;
 const devkit_1 = require("@nx/devkit");
 const dev_server_impl_1 = require("@nx/webpack/src/executors/dev-server/dev-server.impl");
 const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
@@ -16,26 +17,24 @@ function getBuildOptions(buildTarget, context) {
         ...buildOptions,
     };
 }
-function startStaticRemotesFileServer(remotes, context, options) {
+function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
     let shouldMoveToCommonLocation = false;
     let commonOutputDirectory;
-    for (const app of remotes.staticRemotes) {
-        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
-        const directoryOfOutputPath = (0, path_1.dirname)(outputPath);
+    for (const app of staticRemotesConfig.remotes) {
+        const remoteBasePath = staticRemotesConfig.config[app].basePath;
         if (!commonOutputDirectory) {
-            commonOutputDirectory = directoryOfOutputPath;
+            commonOutputDirectory = remoteBasePath;
         }
-        else if (commonOutputDirectory !== directoryOfOutputPath ||
-            !outputPath.endsWith(app)) {
+        else if (commonOutputDirectory !== remoteBasePath) {
             shouldMoveToCommonLocation = true;
+            break;
         }
     }
     if (shouldMoveToCommonLocation) {
         commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
-        for (const app of remotes.staticRemotes) {
-            const outputPath = context.projectGraph.nodes[app].data.targets['build'].options
-                .outputPath;
-            (0, fs_1.cpSync)(outputPath, (0, path_1.join)(commonOutputDirectory, app), {
+        for (const app of staticRemotesConfig.remotes) {
+            const remoteConfig = staticRemotesConfig.config[app];
+            (0, fs_1.cpSync)(remoteConfig.outputPath, (0, path_1.join)(commonOutputDirectory, remoteConfig.urlSegment), {
                 force: true,
                 recursive: true,
             });
@@ -56,7 +55,7 @@ function startStaticRemotesFileServer(remotes, context, options) {
     }, context);
     return staticRemotesIter;
 }
-async function startDevRemotes(remotes, context) {
+async function startDevRemotes(remotes, context, options) {
     const devRemoteIters = [];
     for (const app of remotes.devRemotes) {
         const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve'];
@@ -67,6 +66,10 @@ async function startDevRemotes(remotes, context) {
             configuration: context.configurationName,
         }, {
             watch: true,
+            ...(options.host ? { host: options.host } : {}),
+            ...(options.ssl ? { ssl: options.ssl } : {}),
+            ...(options.sslCert ? { sslCert: options.sslCert } : {}),
+            ...(options.sslKey ? { sslKey: options.sslKey } : {}),
             ...(isUsingModuleFederationDevServerExecutor
                 ? { isInitialHost: false }
                 : {}),
@@ -74,21 +77,21 @@ async function startDevRemotes(remotes, context) {
     }
     return devRemoteIters;
 }
-async function buildStaticRemotes(remotes, nxBin, context, options) {
-    if (!remotes.staticRemotes.length) {
+async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options) {
+    if (!staticRemotesConfig.remotes.length) {
         return;
     }
-    devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
+    devkit_1.logger.info(`NX Building ${staticRemotesConfig.remotes.length} static remotes...`);
     const mappedLocationOfRemotes = {};
-    for (const app of remotes.staticRemotes) {
-        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${app}`;
+    for (const app of staticRemotesConfig.remotes) {
+        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${staticRemotesConfig.config[app].urlSegment}`;
     }
     process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
     await new Promise((res) => {
         const staticProcess = (0, child_process_1.fork)(nxBin, [
             'run-many',
             `--target=build`,
-            `--projects=${remotes.staticRemotes.join(',')}`,
+            `--projects=${staticRemotesConfig.remotes.join(',')}`,
             ...(context.configurationName
                 ? [`--configuration=${context.configurationName}`]
                 : []),
@@ -102,7 +105,7 @@ async function buildStaticRemotes(remotes, nxBin, context, options) {
             const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
             if (stdoutString.includes('Successfully ran target build')) {
                 staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
+                devkit_1.logger.info(`NX Built ${staticRemotesConfig.remotes.length} static remotes`);
                 res();
             }
         });
@@ -116,6 +119,20 @@ async function buildStaticRemotes(remotes, nxBin, context, options) {
         process.on('exit', () => staticProcess.kill('SIGTERM'));
     });
 }
+function parseStaticRemotesConfig(staticRemotes, context) {
+    if (!staticRemotes?.length) {
+        return { remotes: [], config: undefined };
+    }
+    const config = {};
+    for (const app of staticRemotes) {
+        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
+        const basePath = (0, path_1.dirname)(outputPath);
+        const urlSegment = (0, path_1.basename)(outputPath);
+        config[app] = { basePath, outputPath, urlSegment };
+    }
+    return { remotes: staticRemotes, config };
+}
+exports.parseStaticRemotesConfig = parseStaticRemotesConfig;
 async function* moduleFederationDevServer(options, context) {
     const initialStaticRemotesPorts = options.staticRemotesPort;
     options.staticRemotesPort ??= options.port + 1;
@@ -152,10 +169,11 @@ async function* moduleFederationDevServer(options, context) {
             }
         }, options.staticRemotesPort);
     }
-    await buildStaticRemotes(remotes, nxBin, context, options);
-    const devRemoteIters = await startDevRemotes(remotes, context);
+    const staticRemotesConfig = parseStaticRemotesConfig(remotes.staticRemotes, context);
+    await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
+    const devRemoteIters = await startDevRemotes(remotes, context, options);
     const staticRemotesIter = remotes.staticRemotes.length > 0
-        ? startStaticRemotesFileServer(remotes, context, options)
+        ? startStaticRemotesFileServer(staticRemotesConfig, context, options)
         : undefined;
     return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
@@ -167,19 +185,23 @@ async function* moduleFederationDevServer(options, context) {
             return;
         }
         try {
+            const host = options.host ?? 'localhost';
+            const baseUrl = `http${options.ssl ? 's' : ''}://${host}:${options.port}`;
             const portsToWaitFor = staticRemotesIter
                 ? [options.staticRemotesPort, ...remotes.remotePorts]
                 : [...remotes.remotePorts];
             await Promise.all(portsToWaitFor.map((port) => (0, wait_for_port_open_1.waitForPortOpen)(port, {
                 retries: 480,
                 retryDelay: 2500,
-                host: 'localhost',
+                host: host,
             })));
-            devkit_1.logger.info(`NX All remotes started, server ready at http://localhost:${options.port}`);
-            next({ success: true, baseUrl: `http://localhost:${options.port}` });
+            devkit_1.logger.info(`NX All remotes started, server ready at ${baseUrl}`);
+            next({ success: true, baseUrl: baseUrl });
         }
-        catch {
-            throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
+        catch (err) {
+            throw new Error(`Failed to start remotes. Check above for any errors.`, {
+                cause: err,
+            });
         }
         finally {
             done();

package/src/generators/application/application.js

@@ -14,6 +14,7 @@ const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
 const eslint_1 = require("@nx/eslint");
 const versions_1 = require("../../utils/versions");
+const maybe_js_1 = require("../../utils/maybe-js");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
@@ -131,7 +132,7 @@ async function applicationGeneratorInternal(host, schema) {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
         const rspackTask = await configurationGenerator(host, {
             project: options.projectName,
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, add_project_1.maybeJs)(options, `src/main.tsx`)),
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
             tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             target: 'web',
             newProject: true,

package/src/generators/application/files/nx-welcome/src/app/nx-welcome.tsx

@@ -735,7 +735,7 @@ export function NxWelcome({ title }: { title: string }) {
                   You can activate distributed tasks executions and caching by
                   running:
                 </p>
-                <pre>nx connect-to-nx-cloud</pre>
+                <pre>nx connect</pre>
                 <a
                   href="https://nx.app/?utm_source=nx-project"
                   target="_blank"

package/src/generators/application/lib/add-e2e.js

@@ -34,7 +34,7 @@ async function addE2e(tree, options) {
                 bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
                 skipFormat: true,
                 devServerTarget: `${options.projectName}:serve`,
-                baseUrl: 'http://localhost:4200',
+                baseUrl: `http://localhost:${options.devServerPort ?? 4200}`,
                 jsx: true,
                 rootProject: options.rootProject,
                 webServerCommands: hasNxBuildPlugin
@@ -66,7 +66,7 @@ async function addE2e(tree, options) {
                 linter: options.linter,
                 setParserOptionsProject: options.setParserOptionsProject,
                 webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-                webServerAddress: 'http://localhost:4200',
+                webServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
                 rootProject: options.rootProject,
                 addPlugin: options.addPlugin,
             });

package/src/generators/application/lib/add-project.d.ts

@@ -1,4 +1,3 @@
 import { NormalizedSchema } from '../schema';
 import { Tree } from '@nx/devkit';
 export declare function addProject(host: Tree, options: NormalizedSchema): void;
-export declare function maybeJs(options: NormalizedSchema, path: string): string;

package/src/generators/application/lib/add-project.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maybeJs = exports.addProject = void 0;
+exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
+const maybe_js_1 = require("../../../utils/maybe-js");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -24,12 +25,6 @@ function addProject(host, options) {
     });
 }
 exports.addProject = addProject;
-function maybeJs(options, path) {
-    return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
-        : path;
-}
-exports.maybeJs = maybeJs;
 function createBuildTarget(options) {
     return {
         executor: '@nx/webpack:webpack',
@@ -42,7 +37,7 @@ function createBuildTarget(options) {
                 : options.projectName),
             index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
             baseHref: '/',
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/main.tsx`)),
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
             tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             assets: [
                 (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
@@ -66,8 +61,8 @@ function createBuildTarget(options) {
             production: {
                 fileReplacements: [
                     {
-                        replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/environments/environment.ts`)),
-                        with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/environments/environment.prod.ts`)),
+                        replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/environments/environment.ts`)),
+                        with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/environments/environment.prod.ts`)),
                     },
                 ],
                 optimization: true,

package/src/generators/application/lib/add-routing.d.ts

@@ -1,3 +1,3 @@
-import { NormalizedSchema } from '../schema';
 import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
 export declare function addRouting(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;

package/src/generators/application/lib/add-routing.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addRouting = void 0;
-const ast_utils_1 = require("../../../utils/ast-utils");
-const versions_1 = require("../../../utils/versions");
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const ast_utils_1 = require("../../../utils/ast-utils");
+const versions_1 = require("../../../utils/versions");
+const maybe_js_1 = require("../../../utils/maybe-js");
 let tsModule;
 function addRouting(host, options) {
     if (!options.routing) {
@@ -13,7 +14,7 @@ function addRouting(host, options) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const appPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/app/${options.fileName}.tsx`));
+    const appPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/app/${options.fileName}.tsx`));
     const appFileContent = host.read(appPath, 'utf-8');
     const appSource = tsModule.createSourceFile(appPath, appFileContent, tsModule.ScriptTarget.Latest, true);
     const changes = (0, devkit_1.applyChangesToString)(appFileContent, (0, ast_utils_1.addInitialRoutes)(appPath, appSource));
@@ -24,8 +25,3 @@ function addRouting(host, options) {
     return () => { };
 }
 exports.addRouting = addRouting;
-function maybeJs(options, path) {
-    return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
-        : path;
-}

package/src/generators/application/lib/create-application-files.js

@@ -6,9 +6,9 @@ const js_1 = require("@nx/js");
 const path_1 = require("path");
 const create_ts_config_1 = require("../../../utils/create-ts-config");
 const get_in_source_vitest_tests_template_1 = require("../../../utils/get-in-source-vitest-tests-template");
-const get_app_tests_1 = require("./get-app-tests");
-const add_project_1 = require("./add-project");
+const maybe_js_1 = require("../../../utils/maybe-js");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
+const get_app_tests_1 = require("./get-app-tests");
 function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -128,7 +128,7 @@ function createNxWebpackPluginOptions(options) {
             : options.projectName),
         index: './src/index.html',
         baseHref: '/',
-        main: (0, add_project_1.maybeJs)(options, `./src/main.tsx`),
+        main: (0, maybe_js_1.maybeJs)(options, `./src/main.tsx`),
         tsConfig: './tsconfig.app.json',
         assets: ['./src/favicon.ico', './src/assets'],
         styles: options.styledModule || !options.hasStyles

package/src/generators/application/lib/update-jest-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSpecConfig = void 0;
+const maybe_js_1 = require("../../../utils/maybe-js");
 const jest_utils_1 = require("../../../utils/jest-utils");
 const devkit_1 = require("@nx/devkit");
 function updateSpecConfig(host, options) {
@@ -21,7 +22,7 @@ function updateSpecConfig(host, options) {
     if (options.unitTestRunner !== 'jest') {
         return;
     }
-    const configPath = `${options.appProjectRoot}/jest.config.${options.js ? 'js' : 'ts'}`;
+    const configPath = (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/jest.config.ts`);
     const originalContent = host.read(configPath, 'utf-8');
     const content = (0, jest_utils_1.updateJestConfigContent)(originalContent);
     host.write(configPath, content);

package/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": {

package/src/generators/host/files/common/src/app/__fileName__.js__tmpl__

@@ -0,0 +1,33 @@
+import * as React from 'react';
+<% if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+import { Link, Route, Routes } from 'react-router-dom';
+
+<% if (remotes.length > 0) { %>
+<% remotes.forEach(function(r) { %>
+ const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
+ <% }); %>
+<% } %>
+export function App() {
+  return (
+    <React.Suspense fallback={null}>
+     <ul>
+       <li><Link to="/">Home</Link></li>
+       <% remotes.forEach(function(r) { %>
+         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
+       <% }); %>
+     </ul>
+     <Routes>
+       <% if (!minimal) { %>
+       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
+       <% } %>
+       <% remotes.forEach(function(r) { %>
+         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
+       <% }); %>
+     </Routes>
+    </React.Suspense>
+  );
+}
+
+export default App;

package/src/generators/host/host.js

@@ -23,7 +23,10 @@ async function hostGeneratorInternal(host, schema) {
     const tasks = [];
     const options = {
         ...(await (0, normalize_options_1.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,
@@ -55,6 +58,7 @@ async function hostGeneratorInternal(host, schema) {
                 skipFormat: true,
                 projectNameAndRootFormat: options.projectNameAndRootFormat,
                 typescriptConfiguration: options.typescriptConfiguration,
+                js: options.js,
                 dynamic: options.dynamic,
                 host: options.name,
             });

package/src/generators/host/lib/add-module-federation-files.d.ts

@@ -1,5 +1,5 @@
-import { NormalizedSchema } from '../schema';
 import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
 export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema, defaultRemoteManifest: {
     name: string;
     port: number;

package/src/generators/host/lib/add-module-federation-files.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addModuleFederationFiles = void 0;
 const devkit_1 = require("@nx/devkit");
+const maybe_js_1 = require("../../../utils/maybe-js");
 function addModuleFederationFiles(host, options, defaultRemoteManifest) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
@@ -20,8 +21,8 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
     // new entry file.
-    host.rename((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/main.tsx'), (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/bootstrap.tsx'));
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/common`), options.appProjectRoot, templateVariables);
+    host.rename((0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
     const pathToModuleFederationFiles = options.typescriptConfiguration
         ? 'module-federation-ts'
         : 'module-federation';

package/src/generators/host/lib/update-module-federation-e2e-project.js

@@ -5,11 +5,13 @@ const devkit_1 = require("@nx/devkit");
 function updateModuleFederationE2eProject(host, options) {
     try {
         let projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.e2eProjectName);
-        projectConfig.targets.e2e.options = {
-            ...projectConfig.targets.e2e.options,
-            baseUrl: `http://localhost:${options.devServerPort}`,
-        };
-        (0, devkit_1.updateProjectConfiguration)(host, options.e2eProjectName, projectConfig);
+        if (projectConfig.targets.e2e.executor !== '@nx/playwright:playwright') {
+            projectConfig.targets.e2e.options = {
+                ...projectConfig.targets.e2e.options,
+                baseUrl: `http://localhost:${options.devServerPort}`,
+            };
+            (0, devkit_1.updateProjectConfiguration)(host, options.e2eProjectName, projectConfig);
+        }
     }
     catch {
         // nothing

package/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
     }
   },

package/src/generators/library/lib/add-rollup-build-target.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addRollupBuildTarget = void 0;
 const devkit_1 = require("@nx/devkit");
-const maybe_js_1 = require("./maybe-js");
+const maybe_js_1 = require("../../../utils/maybe-js");
 const versions_1 = require("../../../utils/versions");
 async function addRollupBuildTarget(host, options) {
     const tasks = [];

package/src/generators/library/lib/update-app-routes.js

@@ -4,7 +4,7 @@ exports.updateAppRoutes = void 0;
 const devkit_1 = require("@nx/devkit");
 const ast_utils_1 = require("../../../utils/ast-utils");
 const ast_utils_2 = require("../../../utils/ast-utils");
-const maybe_js_1 = require("./maybe-js");
+const maybe_js_1 = require("../../../utils/maybe-js");
 const versions_1 = require("../../../utils/versions");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 let tsModule;

package/src/generators/library/library.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.libraryGeneratorInternal = exports.libraryGenerator = void 0;
+const path_1 = require("path");
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
+const maybe_js_1 = require("../../utils/maybe-js");
 const component_1 = require("../component/component");
 const init_1 = require("../init/init");
 const jest_utils_1 = require("../../utils/jest-utils");
@@ -16,8 +19,6 @@ const create_files_1 = require("./lib/create-files");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const set_defaults_1 = require("./lib/set-defaults");
-const path_1 = require("path");
-const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
@@ -177,7 +178,7 @@ async function libraryGeneratorInternal(host, schema) {
     (0, create_ts_config_1.extractTsConfigBase)(host);
     if (!options.skipTsConfig) {
         (0, js_1.addTsConfigPath)(host, options.importPath, [
-            (0, devkit_1.joinPathFragments)(options.projectRoot, './src', 'index.' + (options.js ? 'js' : 'ts')),
+            (0, maybe_js_1.maybeJs)(options, (0, devkit_1.joinPathFragments)(options.projectRoot, './src/index.ts')),
         ]);
     }
     if (!options.skipFormat) {

package/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.ts',
+     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
    },
 };

package/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' %>',
    },
 };

package/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' %>',
     },
 };
 

package/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' %>',
     },
 };
 

package/src/generators/remote/lib/setup-tspath-for-remote.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupTspathForRemote = void 0;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
+const maybe_js_1 = require("../../../utils/maybe-js");
 function setupTspathForRemote(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.name);
-    const exportPath = `./src/remote-entry.ts`;
+    const exportPath = (0, maybe_js_1.maybeJs)(options, './src/remote-entry.ts');
     const exportName = 'Module';
     (0, js_1.addTsConfigPath)(tree, `${options.name}/${exportName}`, [
         (0, devkit_1.joinPathFragments)(project.root, exportPath),

package/src/generators/remote/lib/update-host-with-remote.js

@@ -46,7 +46,16 @@ function updateHostWithRemote(host, hostName, remoteName) {
 }
 exports.updateHostWithRemote = updateHostWithRemote;
 function findAppComponentPath(host, sourceRoot) {
-    const locations = ['app/app.tsx', 'app/App.tsx', 'app.tsx', 'App.tsx'];
+    const locations = [
+        '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((0, devkit_1.joinPathFragments)(sourceRoot, loc))) {
             return (0, devkit_1.joinPathFragments)(sourceRoot, loc);

package/src/generators/remote/remote.js

@@ -12,12 +12,14 @@ const setup_ssr_for_remote_1 = require("./lib/setup-ssr-for-remote");
 const setup_tspath_for_remote_1 = require("./lib/setup-tspath-for-remote");
 const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host");
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
+const maybe_js_1 = require("../../utils/maybe-js");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
         ...options,
         tmpl: '',
     };
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
     const pathToModuleFederationFiles = options.typescriptConfiguration
         ? 'module-federation-ts'
         : 'module-federation';
@@ -45,7 +47,11 @@ async function remoteGeneratorInternal(host, schema) {
     const tasks = [];
     const options = {
         ...(await (0, normalize_options_1.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,
@@ -63,7 +69,7 @@ async function remoteGeneratorInternal(host, schema) {
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
     // new entry file.
-    host.rename((0, path_1.join)(options.appProjectRoot, 'src/main.tsx'), (0, path_1.join)(options.appProjectRoot, 'src/bootstrap.tsx'));
+    host.rename((0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
     addModuleFederationFiles(host, options);
     (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
     (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);

package/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
     }
   },

package/src/rules/update-module-federation-project.d.ts

@@ -1,5 +1,6 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 export declare function updateModuleFederationProject(host: Tree, options: {
+    js?: boolean;
     projectName: string;
     appProjectRoot: string;
     devServerPort?: number;

package/src/rules/update-module-federation-project.js

@@ -3,20 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateModuleFederationProject = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../utils/versions");
+const maybe_js_1 = require("../utils/maybe-js");
 function updateModuleFederationProject(host, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
     projectConfig.targets.build.options = {
         ...projectConfig.targets.build.options,
-        main: `${options.appProjectRoot}/src/main.ts`,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration ? 'ts' : 'js'}`,
+        main: (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/src/main.ts`),
+        webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
     };
     projectConfig.targets.build.configurations.production = {
         ...projectConfig.targets.build.configurations.production,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration ? 'ts' : 'js'}`,
+        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
     };
     // If host should be configured to use dynamic federation
     if (options.dynamic) {
-        const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
         if (host.exists(pathToProdWebpackConfig)) {
             host.delete(pathToProdWebpackConfig);
         }

package/src/utils/maybe-js.d.ts

@@ -0,0 +1,3 @@
+export declare function maybeJs(options: {
+    js?: boolean;
+}, path: string): string;

package/src/generators/library/lib/maybe-js.d.ts

@@ -1,2 +0,0 @@
-import { NormalizedSchema } from '../schema';
-export declare function maybeJs(options: NormalizedSchema, path: string): string;