@nx/react 18.1.0-beta.0 → 18.1.0-beta.10

package/migrations.json

@@ -53,6 +53,12 @@
       "version": "18.0.0-beta.0",
       "description": "Add NX_MF_DEV_SERVER_STATIC_REMOTES to inputs for task hashing when '@nx/webpack:webpack' is used for Module Federation.",
       "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
+    },
+    "fix-target-defaults-for-webpack": {
+      "cli": "nx",
+      "version": "18.1.1-beta.0",
+      "description": "Ensure targetDefaults inputs for task hashing when '@nx/webpack:webpack' is used are correct for Module Federation.",
+      "factory": "./src/migrations/update-18-1-1/fix-target-defaults-inputs"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "18.1.0-beta.0",
+  "version": "18.1.0-beta.10",
   "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.1.0-beta.0",
-    "@nx/js": "18.1.0-beta.0",
-    "@nx/eslint": "18.1.0-beta.0",
-    "@nx/web": "18.1.0-beta.0",
-    "@nrwl/react": "18.1.0-beta.0"
+    "@nx/devkit": "18.1.0-beta.10",
+    "@nx/js": "18.1.0-beta.10",
+    "@nx/eslint": "18.1.0-beta.10",
+    "@nx/web": "18.1.0-beta.10",
+    "@nrwl/react": "18.1.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

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

@@ -55,7 +55,7 @@ function startStaticRemotesFileServer(staticRemotesConfig, 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'];
@@ -66,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 }
                 : {}),
@@ -167,7 +171,7 @@ async function* moduleFederationDevServer(options, context) {
     }
     const staticRemotesConfig = parseStaticRemotesConfig(remotes.staticRemotes, context);
     await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
-    const devRemoteIters = await startDevRemotes(remotes, context);
+    const devRemoteIters = await startDevRemotes(remotes, context, options);
     const staticRemotesIter = remotes.staticRemotes.length > 0
         ? startStaticRemotesFileServer(staticRemotesConfig, context, options)
         : undefined;
@@ -181,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/executors/module-federation-dev-server/schema.json

@@ -19,7 +19,7 @@
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
+      "description": "List of remote applications to not automatically serve, either statically or in development mode. This will not remove the remotes from the `module-federation.config` file, and therefore the application may still try to fetch these remotes.\nThis option is useful for when the `host` application is using a `remote` that does not live in the same workspace as the `host`.",
       "x-priority": "important"
     },
     "buildTarget": {

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");
@@ -23,6 +24,7 @@ const add_e2e_1 = require("./lib/add-e2e");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const js_1 = require("@nx/js");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -91,6 +93,12 @@ async function applicationGeneratorInternal(host, schema) {
     }
     (0, create_application_files_1.createApplicationFiles)(host, options);
     (0, add_project_1.addProject)(host, options);
+    if (options.style === 'tailwind') {
+        const twTask = await (0, setup_tailwind_1.setupTailwindGenerator)(host, {
+            project: options.projectName,
+        });
+        tasks.push(twTask);
+    }
     if (options.bundler === 'vite') {
         const { createOrEditViteConfig, viteConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.
@@ -131,11 +139,11 @@ 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,
-            uiFramework: 'react',
+            framework: 'react',
         });
         tasks.push(rspackTask);
     }
@@ -193,8 +201,8 @@ async function applicationGeneratorInternal(host, schema) {
         devkit_1.logger.warn(`${chalk.bold('styled-jsx')} is not supported by ${chalk.bold('Rspack')}. We've added ${chalk.bold('babel-loader')} to your project, but using babel will slow down your build.`);
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { 'babel-loader': versions_1.babelLoaderVersion }));
         host.write((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'), (0, devkit_1.stripIndents) `
-        const { composePlugins, withNx, withWeb } = require('@nx/rspack');
-        module.exports = composePlugins(withNx(), withWeb(), (config) => {
+        const { composePlugins, withNx, withReact } = require('@nx/rspack');
+        module.exports = composePlugins(withNx(), withReact(), (config) => {
           config.module.rules.push({
             test: /\\.[jt]sx$/i,
             use: [

package/src/generators/application/files/base-vite/index.html__tmpl__

@@ -7,7 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style %>" /><% } %>
+    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style === 'tailwind' ? 'css' : style %>" /><% } %>
   </head>
   <body>
     <div id="root"></div>

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/files/style-tailwind/src/app/__fileName__.tsx__tmpl__

@@ -0,0 +1,33 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+
+<% if (classComponent) { %>
+export class App extends Component {
+  render() {
+<% } else { %>
+export function App() {
+<% } %>
+  return (
+  <div>
+    <% if (!minimal) { %>
+    <NxWelcome title="<%= projectName %>"/>
+     <% } else { %>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+     <% } %>
+  </div>);
+<% if (classComponent) { %>
+  }
+}
+<% } else { %>
+}
+<% } %>
+
+export default App;
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/application/files/style-tailwind/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

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') {
@@ -17,6 +17,9 @@ function createApplicationFiles(host, options) {
     else if (options.style === 'styled-jsx') {
         styleSolutionSpecificAppFiles = '../files/style-styled-jsx';
     }
+    else if (options.style === 'tailwind') {
+        styleSolutionSpecificAppFiles = '../files/style-tailwind';
+    }
     else if (options.style === 'none') {
         styleSolutionSpecificAppFiles = '../files/style-none';
     }
@@ -128,11 +131,13 @@ 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
             ? []
-            : [`./src/styles.${options.style}`],
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
     };
 }

package/src/generators/application/lib/normalize-options.js

@@ -26,7 +26,10 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         rootProject: options.rootProject,
         callingGenerator,
     });
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
@@ -35,7 +38,7 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         ? options.tags.split(',').map((s) => s.trim())
         : [];
     const fileName = options.pascalCaseFiles ? 'App' : 'app';
-    const styledModule = /^(css|scss|less|none)$/.test(options.style)
+    const styledModule = /^(css|scss|less|tailwind|none)$/.test(options.style)
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);

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/application/schema.json

@@ -62,6 +62,10 @@
             "value": "less",
             "label": "LESS              [ https://lesscss.org                       ]"
           },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
+          },
           {
             "value": "styled-components",
             "label": "styled-components [ https://styled-components.com            ]"

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -19,7 +19,10 @@ exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
  */
 async function cypressComponentConfigGeneratorInternal(tree, options) {
     const { componentConfigurationGenerator: baseCyCtConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await baseCyCtConfig(tree, {
         project: options.project,

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

@@ -49,6 +49,10 @@
             "value": "less",
             "label": "LESS              [ https://lesscss.org                       ]"
           },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
+          },
           {
             "value": "styled-components",
             "label": "styled-components [ https://styled-components.com            ]"
@@ -100,7 +104,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 +175,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/normalize-options.js

@@ -13,7 +13,10 @@ async function normalizeOptions(host, options) {
         projectNameAndRootFormat: options.projectNameAndRootFormat,
         callingGenerator: '@nx/react:library',
     });
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     const fileName = options.simpleName
         ? projectNames.projectSimpleName
         : projectNames.projectFileName;

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

@@ -55,6 +55,10 @@
             "value": "less",
             "label": "LESS              [ https://lesscss.org                       ]"
           },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
+          },
           {
             "value": "styled-components",
             "label": "styled-components [ https://styled-components.com            ]"
@@ -106,7 +110,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 +174,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/storybook-configuration/configuration.js

@@ -28,7 +28,10 @@ function storybookConfigurationGenerator(host, schema) {
 }
 exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
 async function storybookConfigurationGeneratorInternal(host, schema) {
-    schema.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    schema.addPlugin ??= addPluginDefault;
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
     let uiFramework = '@storybook/react-vite';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);

package/src/migrations/update-18-1-1/fix-target-defaults-inputs.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-1-1/fix-target-defaults-inputs.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+async function default_1(tree) {
+    if (!hasModuleFederationProject(tree)) {
+        return;
+    }
+    ensureTargetDefaultsContainProductionInputs(tree);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;
+function ensureTargetDefaultsContainProductionInputs(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const webpackExecutor = '@nx/webpack:webpack';
+    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    nxJson.targetDefaults[webpackExecutor] ??= {};
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [
+        'production',
+        '^production',
+        { env: mfEnvVar },
+    ];
+    if (!nxJson.targetDefaults[webpackExecutor].inputs.includes('production')) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push('production');
+    }
+    if (!nxJson.targetDefaults[webpackExecutor].inputs.includes('^production')) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push('^production');
+    }
+    let mfEnvVarExists = false;
+    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+        if (typeof input === 'object' && input['env'] === mfEnvVar) {
+            mfEnvVarExists = true;
+            break;
+        }
+    }
+    if (!mfEnvVarExists) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+function hasModuleFederationProject(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const project of projects.values()) {
+        const targets = project.targets || {};
+        for (const [_, target] of Object.entries(targets)) {
+            if (target.executor === '@nx/webpack:webpack' &&
+                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

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/add-mf-env-to-inputs.js

@@ -8,7 +8,10 @@ function addMfEnvToTargetDefaultInputs(tree) {
     const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
     nxJson.targetDefaults ??= {};
     nxJson.targetDefaults[webpackExecutor] ??= {};
-    nxJson.targetDefaults[webpackExecutor].inputs ??= [];
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [
+        'production',
+        '^production',
+    ];
     let mfEnvVarExists = false;
     for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
         if (typeof input === 'object' && input['env'] === mfEnvVar) {

package/src/utils/assertion.js

@@ -5,6 +5,7 @@ const VALID_STYLES = [
     'css',
     'scss',
     'less',
+    'tailwind',
     'styled-components',
     '@emotion/styled',
     'styled-jsx',

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

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

package/typings/style.d.ts

@@ -2,6 +2,7 @@ export type SupportedStyles =
   | 'css'
   | 'scss'
   | 'less'
+  | 'tailwind'
   | 'styled-components'
   | '@emotion/styled'
   | 'styled-jsx'

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;