@nx/react 0.0.0-pr-29176-d3c6c29 → 0.0.0-pr-29314-e664f92

package/generators.json

@@ -64,13 +64,15 @@
       "factory": "./src/generators/host/host",
       "schema": "./src/generators/host/schema.json",
       "x-type": "application",
-      "description": "Generate a host react application"
+      "description": "Generate a host react application",
+      "aliases": ["consumer"]
     },
     "remote": {
       "factory": "./src/generators/remote/remote",
       "schema": "./src/generators/remote/schema.json",
       "x-type": "application",
-      "description": "Generate a remote react application"
+      "description": "Generate a remote react application",
+      "aliases": ["producer"]
     },
     "cypress-component-configuration": {
       "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-29176-d3c6c29",
+  "version": "0.0.0-pr-29314-e664f92",
   "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, Vitest, Playwright, 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": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "0.0.0-pr-29176-d3c6c29",
-    "@nx/js": "0.0.0-pr-29176-d3c6c29",
-    "@nx/eslint": "0.0.0-pr-29176-d3c6c29",
-    "@nx/web": "0.0.0-pr-29176-d3c6c29",
-    "@nx/module-federation": "0.0.0-pr-29176-d3c6c29",
+    "@nx/devkit": "0.0.0-pr-29314-e664f92",
+    "@nx/js": "0.0.0-pr-29314-e664f92",
+    "@nx/eslint": "0.0.0-pr-29314-e664f92",
+    "@nx/web": "0.0.0-pr-29314-e664f92",
+    "@nx/module-federation": "0.0.0-pr-29314-e664f92",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/plugins/bundle-rollup.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.js files.
+// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.cjs files.
 /**
- * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.js file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.js file if it does not exist.
+ * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.cjs file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.cjs file if it does not exist.
  */
 function getRollupOptions(options) {
     const extraGlobals = {

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -80,7 +80,9 @@ function addHotReload(config) {
 // We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
 // See https://github.com/nrwl/nx/issues/14383
 function removeSvgLoaderIfPresent(config) {
-    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
+    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' &&
+        typeof rule.test !== 'undefined' &&
+        rule.test.toString().includes('svg'));
     if (svgLoaderIdx === -1)
         return;
     config.module.rules.splice(svgLoaderIdx, 1);

package/src/executors/module-federation-dev-server/schema.json

@@ -28,16 +28,18 @@
           }
         ]
       },
-      "description": "List of remote applications to run in development mode (i.e. using serve target).",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important",
+      "alias": "devProducers"
     },
     "skipRemotes": {
       "type": "array",
       "items": {
         "type": "string"
       },
-      "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 if you have other means for serving the `remote` application(s).\n**NOTE:** Remotes that are not in the workspace will be skipped automatically.",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to not automatically serve, either statically or in development mode. This will not remove the Producers (remotes) from the `module-federation.config` file, and therefore the application may still try to fetch these Producers (remotes).\nThis option is useful if you have other means for serving the Producer (remote) application(s).\n**NOTE:** Producers (remotes) that are not in the workspace will be skipped automatically.",
+      "x-priority": "important",
+      "alias": "skipProducers"
     },
     "buildTarget": {
       "type": "string",
@@ -111,25 +113,27 @@
     },
     "static": {
       "type": "boolean",
-      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for remote applications that are also host applications."
+      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for Producer (remote) applications that are also Consumer (host) applications."
     },
     "isInitialHost": {
       "type": "boolean",
-      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "description": "Whether the Consumer (host) that is running this executor is the first in the project tree to do so.",
       "default": true,
-      "x-priority": "internal"
+      "x-priority": "internal",
+      "alias": "isInitialConsumer"
     },
     "parallel": {
       "type": "number",
-      "description": "Max number of parallel processes for building static remotes"
+      "description": "Max number of parallel processes for building static Producers (remotes)"
     },
     "staticRemotesPort": {
       "type": "number",
-      "description": "The port at which to serve the file-server for the static remotes."
+      "description": "The port at which to serve the file-server for the static Producers (remotes).",
+      "alias": "staticProducersPort"
     },
     "pathToManifestFile": {
       "type": "string",
-      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic Producer (remote) applications relative to the workspace root."
     }
   },
   "examplesFile": "../../../docs/module-federation-dev-server-examples.md"

package/src/executors/module-federation-ssr-dev-server/schema.json

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation SSR Dev Server",
-  "description": "Serve a SSR host application along with its known remotes.",
+  "description": "Serve a SSR Consumer (host) application along with its known Producers (remotes).",
   "cli": "nx",
   "type": "object",
   "properties": {
@@ -27,16 +27,18 @@
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to run in development mode (i.e. using serve target).",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important",
+      "alias": "devProducers"
     },
     "skipRemotes": {
       "type": "array",
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to not automatically serve, either statically or in development mode.",
+      "x-priority": "important",
+      "alias": "skipProducers"
     },
     "host": {
       "type": "string",
@@ -45,11 +47,12 @@
     },
     "staticRemotesPort": {
       "type": "number",
-      "description": "The port at which to serve the file-server for the static remotes."
+      "description": "The port at which to serve the file-server for the static Producers (remotes).",
+      "alias": "staticProducersPort"
     },
     "pathToManifestFile": {
       "type": "string",
-      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic Producer (remote) applications relative to the workspace root."
     },
     "ssl": {
       "type": "boolean",
@@ -66,9 +69,10 @@
     },
     "isInitialHost": {
       "type": "boolean",
-      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "description": "Whether the Consumer (host) that is running this executor is the first in the project tree to do so.",
       "default": true,
-      "x-priority": "internal"
+      "x-priority": "internal",
+      "alias": "isInitialConsumer"
     }
   },
   "required": ["browserTarget", "serverTarget"]

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

@@ -58,7 +58,7 @@ async function buildHost(nxBin, buildTarget, context) {
             }
             if (stdoutString.includes('Successfully ran target build')) {
                 staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built host`);
+                devkit_1.logger.info(`NX Built Consumer (host)`);
                 res();
             }
         });
@@ -67,7 +67,7 @@ async function buildHost(nxBin, buildTarget, context) {
             staticProcess.stdout.removeAllListeners('data');
             staticProcess.stderr.removeAllListeners('data');
             if (code !== 0) {
-                rej(`Host failed to build. See above for details.`);
+                rej(`Consumer (host) failed to build. See above for details.`);
             }
             else {
                 res();
@@ -132,8 +132,8 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
         process.on('SIGTERM', () => proxyServer.close());
         process.on('exit', () => proxyServer.close());
     }
-    devkit_1.logger.info(`NX Static remotes proxies started successfully`);
-    devkit_1.logger.info(`NX Starting static host proxy...`);
+    devkit_1.logger.info(`NX Static Producers (remotes) proxies started successfully`);
+    devkit_1.logger.info(`NX Starting static Consumer (host) proxy...`);
     const expressProxy = express();
     expressProxy.use(createProxyMiddleware({
         target: mappedLocationOfHost,
@@ -155,7 +155,7 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
         .listen(hostServeOptions.port);
     process.on('SIGTERM', () => proxyServer.close());
     process.on('exit', () => proxyServer.close());
-    devkit_1.logger.info('NX Static host proxy started successfully');
+    devkit_1.logger.info('NX Static Consumer (host) proxy started successfully');
 }
 async function* moduleFederationStaticServer(schema, context) {
     // Force Node to resolve to look for the nx binary that is inside node_modules

package/src/executors/module-federation-static-server/schema.json

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation Static Dev Server",
-  "description": "Serve a host application statically along with it's remotes.",
+  "description": "Serve a Consumer (host) application statically along with its Producers (remotes).",
   "cli": "nx",
   "type": "object",
   "properties": {

package/src/generators/application/schema.json

@@ -51,15 +51,15 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com                    ]"
           },
           {
             "value": "less",
-            "label": "LESS              [ https://lesscss.org                       ]"
+            "label": "LESS              [ https://lesscss.org                      ]"
           },
           {
             "value": "tailwind",
-            "label": "tailwind [ https://tailwindcss.com/            ]"
+            "label": "tailwind          [ https://tailwindcss.com/                 ]"
           },
           {
             "value": "styled-components",

package/src/generators/component/component.js

@@ -32,31 +32,17 @@ function createComponentFiles(host, options) {
         ...options,
         componentTests,
         inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests),
-        tmpl: '',
+        isTs: options.fileExtensionType === 'ts',
+        ext: options.fileExtension,
     });
-    for (const c of host.listChanges()) {
-        let deleteFile = false;
-        if ((options.skipTests || options.inSourceTests) &&
-            /.*spec.tsx/.test(c.path)) {
-            deleteFile = true;
-        }
-        if ((options.styledModule || !options.hasStyles) &&
-            c.path.endsWith(`.${options.style}`)) {
-            deleteFile = true;
-        }
-        if (options.globalCss && c.path.endsWith(`.module.${options.style}`)) {
-            deleteFile = true;
-        }
-        if (!options.globalCss &&
-            c.path.endsWith(`${options.fileName}.${options.style}`)) {
-            deleteFile = true;
-        }
-        if (deleteFile) {
-            host.delete(c.path);
-        }
+    if (options.skipTests || options.inSourceTests) {
+        host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${options.fileExtension}`));
+    }
+    if (options.styledModule || !options.hasStyles || !options.globalCss) {
+        host.delete((0, path_1.join)(options.directory, `${options.fileName}.${options.style}`));
     }
-    if (options.js) {
-        (0, devkit_1.toJS)(host);
+    if (options.styledModule || !options.hasStyles || options.globalCss) {
+        host.delete((0, path_1.join)(options.directory, `${options.fileName}.module.${options.style}`));
     }
 }
 let tsModule;
@@ -67,16 +53,17 @@ function addExportsToBarrel(host, options) {
     const workspace = (0, devkit_1.getProjects)(host);
     const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
-        const indexFilePath = options.projectSourceRoot
-            ? (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts')
-            : (0, devkit_1.joinPathFragments)(options.projectRoot, 'src', options.js ? 'index.js' : 'index.ts');
-        const indexSource = host.read(indexFilePath, 'utf-8');
-        if (indexSource !== null) {
-            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-            const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
-            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
-            host.write(indexFilePath, changes);
+        const indexFilePath = (0, devkit_1.joinPathFragments)(...(options.projectSourceRoot
+            ? [options.projectSourceRoot]
+            : [options.projectRoot, 'src']), options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+        if (!host.exists(indexFilePath)) {
+            return;
         }
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+        const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
+        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
+        host.write(indexFilePath, changes);
     }
 }
 function getRelativeImportToFile(indexPath, filePath) {

package/src/generators/component/files/{__fileName__.tsx__tmpl__ → __fileName__.__ext__}

@@ -29,8 +29,8 @@ const Styled<%= className %> = styled.div`
 <%_ } _%>
 <%_ if(!isNextPage) { _%>
   <%_ if (classComponent) { _%>
-export class <%= className %> extends Component<{}> {
-  override render() {
+export class <%= className %> extends Component<% if (isTs) { %><{}><% } %> {
+  <% if (isTs) { %>override<% } %> render() {
     return (
       <<%= wrapper %><%- extras %>>
         <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>

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

@@ -6,11 +6,12 @@ const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/a
 const assertion_1 = require("../../../utils/assertion");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
-    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
         path: options.path,
         name: options.name,
-        fileExtension: 'tsx',
-        fileName: options.fileName,
+        allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+        fileExtension: options.js ? 'js' : 'tsx',
+        js: options.js,
     });
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { className } = (0, devkit_1.names)(name);
@@ -37,6 +38,8 @@ async function normalizeOptions(tree, options) {
         fileName,
         filePath,
         projectRoot,
-        projectSourceRoot: projectSourceRoot,
+        projectSourceRoot,
+        fileExtension,
+        fileExtensionType,
     };
 }

package/src/generators/component/schema.d.ts

@@ -1,3 +1,4 @@
+import type { FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -8,22 +9,27 @@ export interface Schema {
   export?: boolean;
   classComponent?: boolean;
   routing?: boolean;
-  js?: boolean;
   globalCss?: boolean;
-  fileName?: string;
   inSourceTests?: boolean;
   skipFormat?: boolean;
   // Used by Next.js to determine how React should generate the page
   isNextPage?: boolean;
+
+  /**
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
+   */
+  js?: boolean;
 }
 
-export interface NormalizedSchema extends Schema {
+export interface NormalizedSchema extends Omit<Schema, 'js'> {
   directory: string;
   projectRoot: string;
   projectSourceRoot: string;
   projectName: string;
   fileName: string;
   filePath: string;
+  fileExtension: string;
+  fileExtensionType: FileExtensionType;
   className: string;
   styledModule: null | string;
   hasStyles: boolean;

package/src/generators/component/schema.json

@@ -8,7 +8,7 @@
   "properties": {
     "path": {
       "type": "string",
-      "description": "The file path to the component without the file extension. Relative to the current working directory.",
+      "description": "The file path to the component. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
@@ -63,7 +63,7 @@
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     },
     "skipTests": {
       "type": "boolean",
@@ -93,10 +93,6 @@
       "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
       "default": false
     },
-    "fileName": {
-      "type": "string",
-      "description": "Create a component with this file name."
-    },
     "inSourceTests": {
       "type": "boolean",
       "default": false,

package/src/generators/component-story/component-story.js

@@ -13,8 +13,7 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const proj = (0, devkit_1.getProjects)(host).get(project);
-    const sourceRoot = proj.sourceRoot;
-    const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
+    const componentFilePath = (0, devkit_1.joinPathFragments)(proj.sourceRoot ?? proj.root, componentPath);
     const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
     const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
     const componentFileName = componentFilePath

package/src/generators/federate-module/schema.json

@@ -3,11 +3,15 @@
   "cli": "nx",
   "$id": "NxReactFederateModule",
   "title": "Federate Module",
-  "description": "Create a federated module, which can be loaded by a remote host.",
+  "description": "Create a federated module, which can be loaded by a Consumer (host) via a Producer (remote).",
   "examples": [
     {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app --remoteDirectory=apps/my-remote-app",
-      "description": "Create a federated module from my-remote-app, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=myRemote --remoteDirectory=apps/myRemote",
+      "description": "Create a federated module from myRemote, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+    },
+    {
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --producer=myProducer --producerDirectory=apps/myProducer",
+      "description": "Create a federated module from myProducer, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
     }
   ],
   "type": "object",
@@ -30,12 +34,14 @@
     },
     "remote": {
       "type": "string",
-      "description": "The name of the remote.",
-      "x-prompt": "What is/should the remote be named?"
+      "description": "The name of the Producer (remote).",
+      "x-prompt": "What is/should the Producer (remote) be named?",
+      "alias": "producer"
     },
     "remoteDirectory": {
-      "description": "The directory of the new remote application if one needs to be created.",
-      "type": "string"
+      "description": "The directory of the new Producer (remote) application if one needs to be created.",
+      "type": "string",
+      "alias": "producerDirectory"
     },
     "style": {
       "description": "The file extension to be used for style files.",
@@ -70,7 +76,7 @@
     },
     "host": {
       "type": "string",
-      "description": "The host / shell application for this remote."
+      "description": "The Consumer (host) application for this Producer (remote)."
     },
     "bundler": {
       "description": "The bundler to use.",

package/src/generators/hook/files/{__fileName__.ts__tmpl__ → __fileName__.__ext__}

@@ -1,12 +1,14 @@
 import { useState, useCallback } from 'react'
 
+<%_ if (isTs) { _%>
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface <%= hookTypeName %> {
   count: number;
   increment: () => void;
 }
+<%_ } _%>
 
-export function <%= hookName %>(): <%= hookTypeName %> {
+export function <%= hookName %>()<% if (isTs) { %>: <%= hookTypeName %><% } %> {
   const [count, setCount] = useState(0)
   const increment = useCallback(() => setCount((x) => x + 1), [])
   return { count, increment }

package/src/generators/hook/hook.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hookGenerator = hookGenerator;
 // TODO(jack): Remove inline renderHook function when RTL releases with its own version
 const devkit_1 = require("@nx/devkit");
-const ast_utils_1 = require("../../utils/ast-utils");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
-const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const ast_utils_1 = require("../../utils/ast-utils");
 async function hookGenerator(host, schema) {
     const options = await normalizeOptions(host, schema);
     createFiles(host, options);
@@ -14,21 +14,15 @@ async function hookGenerator(host, schema) {
     return await (0, devkit_1.formatFiles)(host);
 }
 function createFiles(host, options) {
+    const specExt = options.fileExtensionType === 'ts' ? 'tsx' : 'js';
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
         ...options,
-        tmpl: '',
+        ext: options.fileExtension,
+        specExt,
+        isTs: options.fileExtensionType === 'ts',
     });
-    for (const c of host.listChanges()) {
-        let deleteFile = false;
-        if (options.skipTests && /.*spec.ts/.test(c.path)) {
-            deleteFile = true;
-        }
-        if (deleteFile) {
-            host.delete(c.path);
-        }
-    }
-    if (options.js) {
-        (0, devkit_1.toJS)(host);
+    if (options.skipTests) {
+        host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${specExt}`));
     }
 }
 let tsModule;
@@ -39,20 +33,23 @@ function addExportsToBarrel(host, options) {
     const workspace = (0, devkit_1.getProjects)(host);
     const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
-        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
-        const indexSource = host.read(indexFilePath, 'utf-8');
-        if (indexSource !== null) {
-            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
-            host.write(indexFilePath, changes);
+        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+        if (!host.exists(indexFilePath)) {
+            return;
         }
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
+        host.write(indexFilePath, changes);
     }
 }
 async function normalizeOptions(host, options) {
-    const { artifactName, directory, fileName: hookFilename, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName, directory, fileName: hookFilename, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
         path: options.path,
         name: options.name,
-        fileExtension: 'tsx',
+        allowedFileExtensions: ['js', 'ts'],
+        fileExtension: options.js ? 'js' : 'ts',
+        js: options.js,
     });
     const { className } = (0, devkit_1.names)(hookFilename);
     // if name is provided, use it as is for the hook name, otherwise prepend
@@ -74,6 +71,8 @@ async function normalizeOptions(host, options) {
         hookName,
         hookTypeName,
         fileName: hookFilename,
+        fileExtension,
+        fileExtensionType,
         projectSourceRoot,
         projectName,
     };

package/src/generators/hook/schema.d.ts

@@ -3,5 +3,9 @@ export interface Schema {
   name?: string;
   skipTests?: boolean;
   export?: boolean;
+
+  /**
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
+   */
   js?: boolean;
 }

package/src/generators/hook/schema.json

@@ -8,17 +8,21 @@
   "examples": [
     {
       "description": "Generate a hook with the exported symbol matching the file name. It results in the hook `useFoo` at `mylib/src/lib/foo.ts`",
-      "command": "nx g @nx/react:hook mylib/src/lib/foo"
+      "command": "nx g @nx/react:hook mylib/src/lib/foo.ts"
     },
     {
       "description": "Generate a hook with the exported symbol different from the file name. It results in the hook `useCustom` at `mylib/src/lib/foo.ts`",
-      "command": "nx g @nx/react:hook mylib/src/lib/foo --name=useCustom"
+      "command": "nx g @nx/react:hook mylib/src/lib/foo.ts --name=useCustom"
+    },
+    {
+      "description": "Generate a hook without providing the file extension. It results in the hook `useFoo` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo"
     }
   ],
   "properties": {
     "path": {
       "type": "string",
-      "description": "The file path to the hook without the file extension. Relative to the current working directory.",
+      "description": "The file path to the hook. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
@@ -33,7 +37,7 @@
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     },
     "skipTests": {
       "type": "boolean",

package/src/generators/host/schema.json

@@ -2,8 +2,8 @@
   "$schema": "https://json-schema.org/schema",
   "$id": "GeneratorReactHost",
   "cli": "nx",
-  "title": "Generate Module Federation Setup for React Host App",
-  "description": "Create Module Federation configuration files for given React Host Application.",
+  "title": "Generate Module Federation Setup for React Consumer (Host) App",
+  "description": "Create Module Federation configuration files for given React Consumer (Host) Application.",
   "type": "object",
   "properties": {
     "directory": {
@@ -18,7 +18,7 @@
     },
     "name": {
       "type": "string",
-      "description": "The name of the host application to generate the Module Federation configuration",
+      "description": "The name of the Consumer (host) application to generate the Module Federation configuration",
       "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
@@ -74,7 +74,7 @@
     },
     "dynamic": {
       "type": "boolean",
-      "description": "Should the host application use dynamic federation?",
+      "description": "Should the Consumer (host) application use dynamic federation?",
       "default": false
     },
     "skipFormat": {
@@ -141,18 +141,19 @@
     },
     "remotes": {
       "type": "array",
-      "description": "A list of remote application names that the host application should consume.",
+      "description": "A list of Producer (remote) application names that the Consumer (host) application should consume.",
       "default": [],
-      "x-priority": "important"
+      "x-priority": "important",
+      "alias": "producers"
     },
     "devServerPort": {
       "type": "number",
-      "description": "The port for the dev server of the remote app.",
+      "description": "The port for the dev server of the Producer (remote) app.",
       "default": 4200,
       "x-priority": "important"
     },
     "ssr": {
-      "description": "Whether to configure SSR for the host application",
+      "description": "Whether to configure SSR for the Consumer (host) application",
       "type": "boolean",
       "default": false
     },

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

@@ -32,33 +32,36 @@ async function addRollupBuildTarget(host, options) {
         : p.plugin === '@nx/rollup/plugin');
     if (hasRollupPlugin) {
         // New behavior, using rollup config file and inferred target.
-        host.write((0, devkit_1.joinPathFragments)(options.projectRoot, 'rollup.config.js'), (0, devkit_1.stripIndents) `
-      const { withNx } = require('@nx/rollup/with-nx');
-      const url = require('@rollup/plugin-url');
-      const svg = require('@svgr/rollup');
-      
-      module.exports = withNx({
-        main: '${(0, maybe_js_1.maybeJs)(options, './src/index.ts')}',
-        outputPath: '${(0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
-        tsConfig: './tsconfig.lib.json',
-        compiler: '${options.compiler ?? 'babel'}',
-        external: ${JSON.stringify(external)},
-        format: ['esm'],
-        assets:[{ input: '.', output: '.', glob: 'README.md'}],
-      }, {
-        // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
-        plugins: [
-          svg({
-            svgo: false,
-            titleProp: true,
-            ref: true,
-          }),
-          url({
-            limit: 10000, // 10kB
-          }),
-        ],
-      });
-    `);
+        host.write((0, devkit_1.joinPathFragments)(options.projectRoot, 'rollup.config.cjs'), `const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+
+module.exports = withNx(
+  {
+    main: '${(0, maybe_js_1.maybeJs)(options, './src/index.ts')}',
+    outputPath: '${options.isUsingTsSolutionConfig
+            ? './dist'
+            : (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
+    tsConfig: './tsconfig.lib.json',
+    compiler: '${options.compiler ?? 'babel'}',
+    external: ${JSON.stringify(external)},
+    format: ['esm'],
+    assets:[{ input: '.', output: '.', glob: 'README.md'}],
+  }, {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    plugins: [
+      svg({
+        svgo: false,
+        titleProp: true,
+        ref: true,
+      }),
+      url({
+        limit: 10000, // 10kB
+      }),
+    ],
+  }
+);
+`);
     }
     else {
         // Legacy behavior, there is a target in project.json using rollup executor.

package/src/generators/library/library.js

@@ -55,6 +55,7 @@ async function libraryGeneratorInternal(host, schema) {
             : undefined;
         (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
             name: options.importPath,
+            version: '0.0.1',
             main: sourceEntry,
             types: sourceEntry,
             nx: {
@@ -63,6 +64,7 @@ async function libraryGeneratorInternal(host, schema) {
                 sourceRoot: `${options.projectRoot}/src`,
                 tags: options.parsedTags?.length ? options.parsedTags : undefined,
             },
+            files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
         });
     }
     else {

package/src/generators/redux/files/js/__fileName__.__ext__

@@ -0,0 +1,114 @@
+import {
+  createAsyncThunk,
+  createEntityAdapter,
+  createSelector,
+  createSlice,
+} from '@reduxjs/toolkit';
+
+export const <%= constantName %>_FEATURE_KEY = '<%= propertyName %>';
+export const <%= propertyName %>Adapter = createEntityAdapter();
+
+/**
+ * Export an effect using createAsyncThunk from
+ * the Redux Toolkit: https://redux-toolkit.js.org/api/createAsyncThunk
+ *
+ * e.g.
+ * ```
+ * import React, { useEffect } from 'react';
+ * import { useDispatch } from 'react-redux';
+ *
+ * // ...
+ *
+ * const dispatch = useDispatch();
+ * useEffect(() => {
+ *   dispatch(fetch<%= className %>())
+ * }, [dispatch]);
+ * ```
+ */
+export const fetch<%= className %> = createAsyncThunk(
+  '<%= propertyName %>/fetchStatus',
+  async (_, thunkAPI) => {
+    /**
+     * Replace this with your custom fetch call.
+     * For example, `return myApi.get<%= className %>s()`;
+     * Right now we just return an empty array.
+     */
+    return Promise.resolve([]);
+  }
+);
+
+export const initial<%= className %>State = <%= propertyName %>Adapter.getInitialState({
+  loadingStatus: 'not loaded',
+  error: null
+});
+
+export const <%= propertyName %>Slice = createSlice({
+  name: <%= constantName %>_FEATURE_KEY,
+  initialState: initial<%= className %>State,
+  reducers: {
+    add: <%= propertyName %>Adapter.addOne,
+    remove: <%= propertyName %>Adapter.removeOne
+    // ...
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(fetch<%= className %>.pending, (state) => {
+        state.loadingStatus = 'loading';
+      })
+      .addCase(fetch<%= className %>.fulfilled, (state, action) => {
+        <%= propertyName %>Adapter.setAll(state, action.payload);
+        state.loadingStatus = 'loaded';
+      })
+      .addCase(fetch<%= className %>.rejected, (state, action) => {
+        state.loadingStatus = 'error';
+        state.error = action.error.message;
+      });
+  }
+});
+
+/*
+ * Export reducer for store configuration.
+ */
+export const <%= propertyName %>Reducer = <%= propertyName %>Slice.reducer;
+
+/*
+ * Export action creators to be dispatched. For use with the `useDispatch` hook.
+ *
+ * e.g.
+ * ```
+ * import React, { useEffect } from 'react';
+ * import { useDispatch } from 'react-redux';
+ *
+ * // ...
+ *
+ * const dispatch = useDispatch();
+ * useEffect(() => {
+ *   dispatch(<%= propertyName %>Actions.add({ id: 1 }))
+ * }, [dispatch]);
+ * ```
+ *
+ * See: https://react-redux.js.org/next/api/hooks#usedispatch
+ */
+export const <%= propertyName %>Actions = <%= propertyName %>Slice.actions;
+
+/*
+ * Export selectors to query state. For use with the `useSelector` hook.
+ *
+ * e.g.
+ * ```
+ * import { useSelector } from 'react-redux';
+ *
+ * // ...
+ *
+ * const entities = useSelector(selectAll<%= className %>);
+ * ```
+ *
+ * See: https://react-redux.js.org/next/api/hooks#useselector
+ */
+const { selectAll, selectEntities } = <%= propertyName %>Adapter.getSelectors();
+
+export const get<%= className %>State = (rootState) => rootState[<%= constantName %>_FEATURE_KEY];
+
+export const selectAll<%= className %> = createSelector(get<%= className %>State, selectAll);
+
+export const select<%= className %>Entities = createSelector(get<%= className %>State, selectEntities);

package/src/generators/redux/files/{__fileName__.slice.spec.ts__tmpl__ → js/__fileName__.spec.__ext__}

@@ -1,4 +1,4 @@
-import { fetch<%= className %>, <%= propertyName %>Adapter, <%= propertyName %>Reducer } from './<%= fileName %>.slice';
+import { fetch<%= className %>, <%= propertyName %>Adapter, <%= propertyName %>Reducer } from './<%= fileName %>';
 
 describe('<%= propertyName %> reducer', () => {
   it('should handle initial state', () => {

package/src/generators/redux/files/ts/__fileName__.spec.__ext__

@@ -0,0 +1,56 @@
+import { fetch<%= className %>, <%= propertyName %>Adapter, <%= propertyName %>Reducer } from './<%= fileName %>';
+
+describe('<%= propertyName %> reducer', () => {
+  it('should handle initial state', () => {
+    const expected = <%= propertyName %>Adapter.getInitialState({
+      loadingStatus: 'not loaded',
+      error: null
+    });
+
+    expect(<%= propertyName %>Reducer(undefined, { type: '' })).toEqual(expected);
+  });
+
+  it('should handle fetch<%= className %>', () => {
+    let state = <%= propertyName %>Reducer(
+      undefined,
+      fetch<%= className %>.pending('')
+    );
+
+    expect(state).toEqual(
+      expect.objectContaining({
+        loadingStatus: 'loading',
+        error: null,
+        entities: {},
+        ids: []
+      })
+    );
+
+    state = <%= propertyName %>Reducer(
+      state,
+      fetch<%= className %>.fulfilled([{ id: 1 }], '')
+    );
+
+    expect(state).toEqual(
+      expect.objectContaining({
+        loadingStatus: 'loaded',
+        error: null,
+        entities: { 1: { id: 1 } },
+        ids: [1]
+      })
+    );
+
+    state = <%= propertyName %>Reducer(
+      state,
+      fetch<%= className %>.rejected(new Error('Uh oh'), '')
+    );
+
+    expect(state).toEqual(
+      expect.objectContaining({
+        loadingStatus: 'error',
+        error: 'Uh oh',
+        entities: { 1: { id: 1 } },
+        ids: [1]
+      })
+    );
+  });
+});

package/src/generators/redux/redux.js

@@ -20,13 +20,10 @@ async function reduxGenerator(host, schema) {
     return installTask;
 }
 function generateReduxFiles(host, options) {
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.projectDirectory, {
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, 'files', options.fileExtensionType), options.projectDirectory, {
         ...options,
-        tmpl: '',
+        ext: options.fileExtension,
     });
-    if (options.js) {
-        (0, devkit_1.toJS)(host);
-    }
 }
 function addReduxPackageDependencies(host) {
     return (0, devkit_1.addDependenciesToPackageJson)(host, {
@@ -38,16 +35,17 @@ function addExportsToBarrel(host, options) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const indexFilePath = path.join(options.projectSourcePath, options.js ? 'index.js' : 'index.ts');
-    const indexSource = host.read(indexFilePath, 'utf-8');
-    if (indexSource !== null) {
-        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-        const statePath = options.path
-            ? `./lib/${options.path}/${options.fileName}`
-            : `./lib/${options.fileName}`;
-        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${statePath}.slice';`));
-        host.write(indexFilePath, changes);
+    const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourcePath, options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+    if (!host.exists(indexFilePath)) {
+        return;
     }
+    const indexSource = host.read(indexFilePath, 'utf-8');
+    const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+    const statePath = options.path
+        ? `./lib/${options.path}/${options.fileName}`
+        : `./lib/${options.fileName}`;
+    const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${statePath}.slice';`));
+    host.write(indexFilePath, changes);
 }
 function addStoreConfiguration(host, options) {
     if (!options.appProjectSourcePath) {
@@ -77,10 +75,13 @@ function updateReducerConfiguration(host, options) {
     host.write(options.appMainFilePath, changes);
 }
 async function normalizeOptions(host, options) {
-    const { artifactName: name, directory, fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName: name, directory, fileName, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
         path: options.path,
         name: options.name,
-        fileExtension: 'tsx',
+        suffix: 'slice',
+        allowedFileExtensions: ['js', 'ts'],
+        fileExtension: options.js ? 'js' : 'ts',
+        js: options.js,
     });
     let appProjectSourcePath;
     let appMainFilePath;
@@ -117,6 +118,8 @@ async function normalizeOptions(host, options) {
         ...options,
         ...extraNames,
         fileName,
+        fileExtension,
+        fileExtensionType,
         constantName: (0, devkit_1.names)(name).constantName.toUpperCase(),
         projectDirectory: directory,
         projectType,

package/src/generators/redux/schema.d.ts

@@ -1,11 +1,17 @@
+import type { FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface Schema {
   path: string;
   name?: string;
   appProject?: string;
-  js?: string;
+
+  /**
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
+   */
+  js?: boolean;
 }
 
-interface NormalizedSchema extends Schema {
+interface NormalizedSchema extends Omit<Schema, 'js'> {
   projectType: string;
   projectDirectory: string;
   projectSourcePath: string;
@@ -16,4 +22,6 @@ interface NormalizedSchema extends Schema {
   constantName: string;
   propertyName: string;
   fileName: string;
+  fileExtension: string;
+  fileExtensionType: FileExtensionType;
 }

package/src/generators/redux/schema.json

@@ -8,17 +8,21 @@
   "examples": [
     {
       "description": "Generate a Redux state slice with the exported symbol matching the file name. It results in the slice `fooSlice` at `mylib/src/lib/foo.slice.ts`",
-      "command": "nx g @nx/react:redux mylib/src/lib/foo"
+      "command": "nx g @nx/react:redux mylib/src/lib/foo.slice.ts"
     },
     {
       "description": "Generate a Redux state slice with the exported symbol different from the file name. It results in the slice `customSlice` at `mylib/src/lib/foo.slice.ts`",
-      "command": "nx g @nx/react:redux mylib/src/lib/foo --name=custom"
+      "command": "nx g @nx/react:redux mylib/src/lib/foo.slice.ts --name=custom"
+    },
+    {
+      "description": "Generate a Redux state slice without providing the \"slice\" suffix and the file extension. It results in the slice `fooSlice` at `mylib/src/lib/foo.slice.ts`",
+      "command": "nx g @nx/react:redux mylib/src/lib/foo"
     }
   ],
   "properties": {
     "path": {
       "type": "string",
-      "description": "The file path to the Redux state slice without the file extension. Relative to the current working directory.",
+      "description": "The file path to the Redux state slice. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
@@ -38,7 +42,7 @@
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     }
   },
   "required": ["path"]

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

@@ -24,7 +24,7 @@ function updateHostWithRemote(host, hostName, remoteName) {
     }
     else {
         // TODO(jack): Point to the nx.dev guide when ready.
-        devkit_1.logger.warn(`Could not find configuration at ${moduleFederationConfigPath}. Did you generate this project with "@nx/react:host"?`);
+        devkit_1.logger.warn(`Could not find configuration at ${moduleFederationConfigPath}. Did you generate this project with "@nx/react:host" or "@nx/react:consumer"?`);
     }
     if (host.exists(appComponentPath)) {
         let sourceCode = host.read(appComponentPath).toString();
@@ -32,7 +32,7 @@ function updateHostWithRemote(host, hostName, remoteName) {
         host.write(appComponentPath, (0, devkit_1.applyChangesToString)(sourceCode, (0, ast_utils_1.addRemoteRoute)(source, (0, devkit_1.names)(remoteName))));
     }
     else {
-        devkit_1.logger.warn(`Could not find app component at ${appComponentPath}. Did you generate this project with "@nx/react:host"?`);
+        devkit_1.logger.warn(`Could not find app component at ${appComponentPath}. Did you generate this project with "@nx/react:host" or "@nx/react:consumer"?`);
     }
 }
 function findAppComponentPath(host, sourceRoot) {

package/src/generators/remote/schema.json

@@ -2,8 +2,8 @@
   "$schema": "https://json-schema.org/schema",
   "$id": "GeneratorReactRemote",
   "cli": "nx",
-  "title": "Generate Module Federation Setup for React Remote App",
-  "description": "Create Module Federation configuration files for given React Remote Application.",
+  "title": "Generate Module Federation Setup for React Producer (Remote) App",
+  "description": "Create Module Federation configuration files for given React Producer (Remote) Application.",
   "type": "object",
   "properties": {
     "directory": {
@@ -18,13 +18,13 @@
     },
     "name": {
       "type": "string",
-      "description": "The name of the remote application to generate the Module Federation configuration",
+      "description": "The name of the Producer (remote) application to generate the Module Federation configuration",
       "pattern": "^[a-zA-Z_$][a-zA-Z_$0-9]*$",
       "x-priority": "important"
     },
     "dynamic": {
       "type": "boolean",
-      "description": "Should the host application use dynamic federation?",
+      "description": "Should the Consumer (host) application use dynamic federation?",
       "default": false,
       "x-priority": "internal"
     },
@@ -147,16 +147,17 @@
     },
     "host": {
       "type": "string",
-      "description": "The host / shell application for this remote.",
-      "x-priority": "important"
+      "description": "The Consumer (host) application for this Producer (remote).",
+      "x-priority": "important",
+      "alias": "consumer"
     },
     "devServerPort": {
       "type": "number",
-      "description": "The port for the dev server of the remote app.",
+      "description": "The port for the dev server of the Producer (remote) app.",
       "x-priority": "important"
     },
     "ssr": {
-      "description": "Whether to configure SSR for the host application",
+      "description": "Whether to configure SSR for the Consumer (host) application",
       "type": "boolean",
       "default": false
     },

package/src/generators/stories/stories.js

@@ -29,7 +29,10 @@ async function projectRootPath(tree, config) {
         // libs/test-lib/src/lib
         projectDir = 'lib';
     }
-    return (0, devkit_1.joinPathFragments)(config.sourceRoot, projectDir);
+    else {
+        projectDir = '.';
+    }
+    return (0, devkit_1.joinPathFragments)(config.sourceRoot ?? config.root, projectDir);
 }
 function containsComponentDeclaration(tree, componentPath) {
     if (!tsModule) {
@@ -70,7 +73,7 @@ async function createAllStories(tree, projectName, interactionTests, js, project
         }
     });
     await Promise.all(componentPaths.map(async (componentPath) => {
-        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
+        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot ?? root, '/'), '');
         if (!containsComponentDeclaration(tree, componentPath)) {
             return;
         }

package/src/generators/storybook-configuration/configuration.js

@@ -32,8 +32,8 @@ async function storybookConfigurationGeneratorInternal(host, schema) {
     let uiFramework = '@storybook/react-vite';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
     if (findWebpackConfig(host, projectConfig.root) ||
-        projectConfig.targets['build']?.executor === '@nx/rollup:rollup' ||
-        projectConfig.targets['build']?.executor === '@nx/expo:build') {
+        projectConfig.targets?.['build']?.executor === '@nx/rollup:rollup' ||
+        projectConfig.targets?.['build']?.executor === '@nx/expo:build') {
         uiFramework = '@storybook/react-webpack5';
     }
     if (uiFramework === '@storybook/react-vite') {