@nx/react 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/src/generators/library/library.js

@@ -2,60 +2,90 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.libraryGenerator = libraryGenerator;
 exports.libraryGeneratorInternal = libraryGeneratorInternal;
-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 path_1 = require("path");
+const add_release_config_1 = require("@nx/js/src/generators/library/utils/add-release-config");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const use_legacy_versioning_1 = require("nx/src/command-line/release/config/use-legacy-versioning");
+const create_ts_config_1 = require("../../utils/create-ts-config");
+const jest_utils_1 = require("../../utils/jest-utils");
 const maybe_js_1 = require("../../utils/maybe-js");
+const versions_1 = require("../../utils/versions");
 const component_1 = require("../component/component");
 const init_1 = require("../init/init");
-const jest_utils_1 = require("../../utils/jest-utils");
-const normalize_options_1 = require("./lib/normalize-options");
-const add_rollup_build_target_1 = require("./lib/add-rollup-build-target");
 const add_linting_1 = require("./lib/add-linting");
-const update_app_routes_1 = require("./lib/update-app-routes");
+const add_rollup_build_target_1 = require("./lib/add-rollup-build-target");
 const create_files_1 = require("./lib/create-files");
-const create_ts_config_1 = require("../../utils/create-ts-config");
+const determine_entry_fields_1 = require("./lib/determine-entry-fields");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
+const normalize_options_1 = require("./lib/normalize-options");
 const set_defaults_1 = require("./lib/set-defaults");
+const update_app_routes_1 = require("./lib/update-app-routes");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
-        projectNameAndRootFormat: 'derived',
+        useProjectJson: true,
         ...schema,
     });
 }
 async function libraryGeneratorInternal(host, schema) {
     const tasks = [];
+    const jsInitTask = await (0, js_1.initGenerator)(host, {
+        ...schema,
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
-    if (options.publishable === true && !schema.importPath) {
+    if (options.publishable === true &&
+        !options.isUsingTsSolutionConfig &&
+        !schema.importPath) {
         throw new Error(`For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)`);
     }
     if (!options.component) {
         options.style = 'none';
     }
-    const jsInitTask = await (0, js_1.initGenerator)(host, {
-        ...schema,
-        skipFormat: true,
-    });
-    tasks.push(jsInitTask);
     const initTask = await (0, init_1.default)(host, {
         ...options,
         skipFormat: true,
     });
     tasks.push(initTask);
-    (0, devkit_1.addProjectConfiguration)(host, options.name, {
-        root: options.projectRoot,
-        sourceRoot: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src'),
-        projectType: 'library',
-        tags: options.parsedTags,
-        targets: {},
-    });
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        ...(0, determine_entry_fields_1.determineEntryFields)(options),
+        files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
+    };
+    if (!options.useProjectJson) {
+        if (options.name !== options.importPath) {
+            packageJson.nx = { name: options.name };
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
+    }
+    else {
+        (0, devkit_1.addProjectConfiguration)(host, options.name, {
+            root: options.projectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src'),
+            projectType: 'library',
+            tags: options.parsedTags,
+            targets: {},
+        });
+    }
+    if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, packageJson);
+    }
+    (0, create_files_1.createFiles)(host, options);
+    if (options.isUsingTsSolutionConfig) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
+    }
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);
-    (0, create_files_1.createFiles)(host, options);
     // Set up build target
     if (options.buildable && options.bundler === 'vite') {
         const { viteConfigurationGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
@@ -125,6 +155,7 @@ async function libraryGeneratorInternal(host, schema) {
             skipFormat: true,
             testEnvironment: 'jsdom',
             addPlugin: options.addPlugin,
+            compiler: options.compiler,
         });
         tasks.push(vitestTask);
         createOrEditViteConfig(host, {
@@ -147,47 +178,61 @@ async function libraryGeneratorInternal(host, schema) {
     }
     if (options.component) {
         const relativeCwd = (0, artifact_name_and_directory_utils_1.getRelativeCwd)();
-        const name = (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/lib', options.fileName);
+        const path = (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/lib', options.fileName);
         const componentTask = await (0, component_1.default)(host, {
-            nameAndDirectoryFormat: 'as-provided',
-            name: relativeCwd ? (0, path_1.relative)(relativeCwd, name) : name,
-            project: options.name,
-            flat: true,
+            path: relativeCwd ? (0, path_1.relative)(relativeCwd, path) : path,
             style: options.style,
             skipTests: options.unitTestRunner === 'none' ||
                 (options.unitTestRunner === 'vitest' && options.inSourceTests == true),
             export: true,
             routing: options.routing,
             js: options.js,
-            pascalCaseFiles: options.pascalCaseFiles,
             inSourceTests: options.inSourceTests,
             skipFormat: true,
             globalCss: options.globalCss,
         });
         tasks.push(componentTask);
     }
-    if (options.publishable || options.buildable) {
-        (0, devkit_1.updateJson)(host, `${options.projectRoot}/package.json`, (json) => {
-            json.name = options.importPath;
-            return json;
-        });
+    if (options.publishable) {
+        const projectConfiguration = (0, devkit_1.readProjectConfiguration)(host, options.name);
+        if (options.isUsingTsSolutionConfig) {
+            await (0, add_release_config_1.addReleaseConfigForTsSolution)(host, options.name, projectConfiguration);
+        }
+        else {
+            const nxJson = (0, devkit_1.readNxJson)(host);
+            await (0, add_release_config_1.addReleaseConfigForNonTsSolution)((0, use_legacy_versioning_1.shouldUseLegacyVersioning)(nxJson.release), host, options.name, projectConfiguration);
+        }
+        (0, devkit_1.updateProjectConfiguration)(host, options.name, projectConfiguration);
+        tasks.push(await (0, add_release_config_1.releaseTasks)(host));
     }
     if (!options.skipPackageJson) {
-        const installReactTask = (0, install_common_dependencies_1.installCommonDependencies)(host, options);
+        const installReactTask = await (0, install_common_dependencies_1.installCommonDependencies)(host, options);
         tasks.push(installReactTask);
     }
     const routeTask = (0, update_app_routes_1.updateAppRoutes)(host, options);
     tasks.push(routeTask);
     (0, set_defaults_1.setDefaults)(host, options);
     (0, create_ts_config_1.extractTsConfigBase)(host);
-    if (!options.skipTsConfig) {
+    if (!options.skipTsConfig && !options.isUsingTsSolutionConfig) {
         (0, js_1.addTsConfigPath)(host, options.importPath, [
             (0, maybe_js_1.maybeJs)(options, (0, devkit_1.joinPathFragments)(options.projectRoot, './src/index.ts')),
         ]);
     }
+    (0, ts_solution_setup_1.updateTsconfigFiles)(host, options.projectRoot, 'tsconfig.lib.json', {
+        jsx: 'react-jsx',
+        module: 'esnext',
+        moduleResolution: 'bundler',
+    }, options.linter === 'eslint'
+        ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
+        : undefined);
+    (0, sort_fields_1.sortPackageJsonFields)(host, options.projectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
+    // Always run install to link packages.
+    if (options.isUsingTsSolutionConfig) {
+        tasks.push(() => (0, devkit_1.installPackagesTask)(host, true));
+    }
     tasks.push(() => {
         (0, log_show_project_command_1.logShowProjectCommand)(options.name);
     });

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

@@ -1,4 +1,3 @@
-import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
@@ -8,15 +7,13 @@ export interface Schema {
   bundler?: 'none' | 'rollup' | 'vite';
   compiler?: 'babel' | 'swc';
   component?: boolean;
-  directory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  directory: string;
   globalCss?: boolean;
   importPath?: string;
   inSourceTests?: boolean;
   js?: boolean;
   linter: Linter | LinterType;
-  name: string;
-  pascalCaseFiles?: boolean;
+  name?: string;
   publishable?: boolean;
   routing?: boolean;
   setParserOptionsProject?: boolean;
@@ -30,6 +27,7 @@ export interface Schema {
   minimal?: boolean;
   simpleName?: boolean;
   addPlugin?: boolean;
+  useProjectJson?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {
@@ -39,7 +37,9 @@ export interface NormalizedSchema extends Schema {
   projectRoot: string;
   routePath: string;
   parsedTags: string[];
+  importPath: string;
   appMain?: string;
   appSourceRoot?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';
+  isUsingTsSolutionConfig?: boolean;
 }

package/src/generators/library/schema.json

@@ -7,37 +7,30 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g lib mylib --directory=myapp",
-      "description": "Generate `libs/myapp/mylib`"
+      "command": "nx g @nx/react:lib libs/mylib",
+      "description": "Generate a library under `libs/mylib`"
     },
     {
-      "command": "nx g lib mylib --appProject=myapp",
-      "description": "Generate a library with routes and add them to `myapp`"
+      "command": "nx g @nx/react:lib mylib --appProject=myapp",
+      "description": "Generate a library under mylib with routes and add them to `myapp`"
     }
   ],
   "properties": {
-    "name": {
+    "directory": {
       "type": "string",
-      "description": "Library name",
+      "description": "A directory where the lib is placed.",
+      "alias": "dir",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use for the library?",
-      "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
-      "x-priority": "important"
+      "x-prompt": "Which directory do you want to create the library in?"
     },
-    "directory": {
+    "name": {
       "type": "string",
-      "description": "A directory where the lib is placed.",
-      "alias": "dir",
+      "description": "Library name",
       "x-priority": "important"
     },
-    "projectNameAndRootFormat": {
-      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -47,7 +40,10 @@
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
         "items": [
-          { "value": "css", "label": "CSS" },
+          {
+            "value": "css",
+            "label": "CSS"
+          },
           {
             "value": "scss",
             "label": "SASS(.scss)       [ https://sass-lang.com          ]"
@@ -56,6 +52,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 ]"
@@ -75,17 +75,29 @@
         ]
       }
     },
+    "bundler": {
+      "type": "string",
+      "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
+      "enum": ["none", "vite", "rollup"],
+      "default": "none",
+      "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup.",
+      "x-priority": "important"
+    },
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
       "enum": ["eslint", "none"],
-      "default": "eslint"
+      "default": "none",
+      "x-prompt": "Which linter would you like to use?",
+      "x-priority": "important"
     },
     "unitTestRunner": {
       "type": "string",
-      "enum": ["jest", "vitest", "none"],
+      "enum": ["vitest", "jest", "none"],
+      "default": "none",
       "description": "Test runner to use for unit tests.",
-      "x-prompt": "What unit test runner should be used?"
+      "x-prompt": "What unit test runner should be used?",
+      "x-priority": "important"
     },
     "inSourceTests": {
       "type": "boolean",
@@ -109,12 +121,6 @@
       "description": "Do not update `tsconfig.json` for development experience.",
       "x-priority": "internal"
     },
-    "pascalCaseFiles": {
-      "type": "boolean",
-      "description": "Use pascal case component file name (e.g. `App.tsx`).",
-      "alias": "P",
-      "default": false
-    },
     "routing": {
       "type": "boolean",
       "description": "Generate library with routes."
@@ -163,14 +169,6 @@
       "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
       "default": false
     },
-    "bundler": {
-      "type": "string",
-      "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
-      "enum": ["none", "vite", "rollup"],
-      "default": "none",
-      "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup.",
-      "x-priority": "important"
-    },
     "compiler": {
       "type": "string",
       "enum": ["babel", "swc"],
@@ -192,7 +190,11 @@
       "description": "Don't include the directory in the name of the module of the library.",
       "type": "boolean",
       "default": false
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
-  "required": ["name"]
+  "required": ["directory"]
 }

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.d.ts

@@ -1,5 +1,4 @@
 import { Schema } from './schema';
 import { Tree } from '@nx/devkit';
 export declare function reduxGenerator(host: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
-export declare function reduxGeneratorInternal(host: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default reduxGenerator;