@nx/react 20.2.0 → 20.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.2.0",
+  "version": "20.2.2",
   "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": "20.2.0",
-    "@nx/js": "20.2.0",
-    "@nx/eslint": "20.2.0",
-    "@nx/web": "20.2.0",
-    "@nx/module-federation": "20.2.0",
+    "@nx/devkit": "20.2.2",
+    "@nx/js": "20.2.2",
+    "@nx/eslint": "20.2.2",
+    "@nx/web": "20.2.2",
+    "@nx/module-federation": "20.2.2",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

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/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/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"]