@nx/react 0.0.0-pr-22179-271588f

package/src/generators/library/library.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.libraryGeneratorInternal = exports.libraryGenerator = void 0;
+const path_1 = require("path");
+const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
+const maybe_js_1 = require("../../utils/maybe-js");
+const component_1 = require("../component/component");
+const init_1 = require("../init/init");
+const jest_utils_1 = require("../../utils/jest-utils");
+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 create_files_1 = require("./lib/create-files");
+const create_ts_config_1 = require("../../utils/create-ts-config");
+const install_common_dependencies_1 = require("./lib/install-common-dependencies");
+const set_defaults_1 = require("./lib/set-defaults");
+async function libraryGenerator(host, schema) {
+    return await libraryGeneratorInternal(host, {
+        addPlugin: false,
+        projectNameAndRootFormat: 'derived',
+        ...schema,
+    });
+}
+exports.libraryGenerator = libraryGenerator;
+async function libraryGeneratorInternal(host, schema) {
+    const tasks = [];
+    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
+    if (options.publishable === true && !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 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);
+        const viteTask = await viteConfigurationGenerator(host, {
+            uiFramework: 'react',
+            project: options.name,
+            newProject: true,
+            includeLib: true,
+            inSourceTests: options.inSourceTests,
+            includeVitest: options.unitTestRunner === 'vitest',
+            compiler: options.compiler,
+            skipFormat: true,
+            testEnvironment: 'jsdom',
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(viteTask);
+        createOrEditViteConfig(host, {
+            project: options.name,
+            includeLib: true,
+            includeVitest: options.unitTestRunner === 'vitest',
+            inSourceTests: options.inSourceTests,
+            rollupOptionsExternal: [
+                "'react'",
+                "'react-dom'",
+                "'react/jsx-runtime'",
+            ],
+            imports: [
+                options.compiler === 'swc'
+                    ? `import react from '@vitejs/plugin-react-swc'`
+                    : `import react from '@vitejs/plugin-react'`,
+            ],
+            plugins: ['react()'],
+        }, false);
+    }
+    else if (options.buildable && options.bundler === 'rollup') {
+        const rollupTask = await (0, add_rollup_build_target_1.addRollupBuildTarget)(host, options);
+        tasks.push(rollupTask);
+    }
+    // Set up test target
+    if (options.unitTestRunner === 'jest') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
+        const jestTask = await configurationGenerator(host, {
+            ...options,
+            project: options.name,
+            setupFile: 'none',
+            supportTsx: true,
+            skipSerializers: true,
+            compiler: options.compiler,
+            skipFormat: true,
+        });
+        tasks.push(jestTask);
+        const jestConfigPath = (0, devkit_1.joinPathFragments)(options.projectRoot, options.js ? 'jest.config.js' : 'jest.config.ts');
+        if (options.compiler === 'babel' && host.exists(jestConfigPath)) {
+            const updatedContent = (0, jest_utils_1.updateJestConfigContent)(host.read(jestConfigPath, 'utf-8'));
+            host.write(jestConfigPath, updatedContent);
+        }
+    }
+    else if (options.unitTestRunner === 'vitest' &&
+        options.bundler !== 'vite' // tests are already configured if bundler is vite
+    ) {
+        const { vitestGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const vitestTask = await vitestGenerator(host, {
+            uiFramework: 'react',
+            project: options.name,
+            coverageProvider: 'v8',
+            inSourceTests: options.inSourceTests,
+            skipFormat: true,
+            testEnvironment: 'jsdom',
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(vitestTask);
+        createOrEditViteConfig(host, {
+            project: options.name,
+            includeLib: true,
+            includeVitest: true,
+            inSourceTests: options.inSourceTests,
+            rollupOptionsExternal: [
+                "'react'",
+                "'react-dom'",
+                "'react/jsx-runtime'",
+            ],
+            imports: [`import react from '@vitejs/plugin-react'`],
+            plugins: ['react()'],
+        }, true);
+    }
+    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 componentTask = await (0, component_1.default)(host, {
+            nameAndDirectoryFormat: 'as-provided',
+            name: relativeCwd ? (0, path_1.relative)(relativeCwd, name) : name,
+            project: options.name,
+            flat: true,
+            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.skipPackageJson) {
+        const installReactTask = (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) {
+        (0, js_1.addTsConfigPath)(host, options.importPath, [
+            (0, maybe_js_1.maybeJs)(options, (0, devkit_1.joinPathFragments)(options.projectRoot, './src/index.ts')),
+        ]);
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    tasks.push(() => {
+        (0, log_show_project_command_1.logShowProjectCommand)(options.name);
+    });
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.libraryGeneratorInternal = libraryGeneratorInternal;
+exports.default = libraryGenerator;

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

@@ -0,0 +1,45 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+import type { SupportedStyles } from '../../../typings/style';
+
+export interface Schema {
+  appProject?: string;
+  buildable?: boolean;
+  bundler?: 'none' | 'rollup' | 'vite';
+  compiler?: 'babel' | 'swc';
+  component?: boolean;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  globalCss?: boolean;
+  importPath?: string;
+  inSourceTests?: boolean;
+  js?: boolean;
+  linter: Linter;
+  name: string;
+  pascalCaseFiles?: boolean;
+  publishable?: boolean;
+  routing?: boolean;
+  setParserOptionsProject?: boolean;
+  skipFormat?: boolean;
+  skipPackageJson?: boolean;
+  skipTsConfig?: boolean;
+  strict?: boolean;
+  style: SupportedStyles;
+  tags?: string;
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
+  minimal?: boolean;
+  simpleName?: boolean;
+  addPlugin?: boolean;
+}
+
+export interface NormalizedSchema extends Schema {
+  js: boolean;
+  name: string;
+  fileName: string;
+  projectRoot: string;
+  routePath: string;
+  parsedTags: string[];
+  appMain?: string;
+  appSourceRoot?: string;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
+}

package/src/generators/library/schema.json

@@ -0,0 +1,198 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactLibrary",
+  "title": "Create a React Library",
+  "description": "Create a React Library for an Nx workspace.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g lib mylib --directory=myapp",
+      "description": "Generate `libs/myapp/mylib`"
+    },
+    {
+      "command": "nx g lib mylib --appProject=myapp",
+      "description": "Generate a library with routes and add them to `myapp`"
+    }
+  ],
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Library name",
+      "$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"
+    },
+    "directory": {
+      "type": "string",
+      "description": "A directory where the lib is placed.",
+      "alias": "dir",
+      "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",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          { "value": "css", "label": "CSS" },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ https://sass-lang.com          ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ https://lesscss.org            ]"
+          },
+          {
+            "value": "styled-components",
+            "label": "styled-components [ https://styled-components.com ]"
+          },
+          {
+            "value": "@emotion/styled",
+            "label": "emotion           [ https://emotion.sh            ]"
+          },
+          {
+            "value": "styled-jsx",
+            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "vitest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "x-prompt": "What unit test runner should be used?"
+    },
+    "inSourceTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files."
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the library (used for linting).",
+      "alias": "t"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipTsConfig": {
+      "type": "boolean",
+      "default": false,
+      "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."
+    },
+    "appProject": {
+      "type": "string",
+      "description": "The application project to add the library route to.",
+      "alias": "a"
+    },
+    "publishable": {
+      "type": "boolean",
+      "description": "Create a publishable library."
+    },
+    "buildable": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a buildable library that uses rollup to bundle.",
+      "x-deprecated": "Use the `bundler` option for greater control (none, vite, rollup)."
+    },
+    "importPath": {
+      "type": "string",
+      "description": "The library name used to import it, like `@myorg/my-awesome-lib`."
+    },
+    "component": {
+      "type": "boolean",
+      "description": "Generate a default component.",
+      "default": true
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Whether to enable tsconfig strict mode or not.",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "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"],
+      "default": "babel",
+      "description": "Which compiler to use."
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "minimal": {
+      "description": "Create a React library with a minimal setup, no separate test files.",
+      "type": "boolean",
+      "default": false
+    },
+    "simpleName": {
+      "description": "Don't include the directory in the name of the module of the library.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": ["name"]
+}

package/src/generators/redux/files/__fileName__.slice.spec.ts__tmpl__

@@ -0,0 +1,56 @@
+import { fetch<%= className %>, <%= propertyName %>Adapter, <%= propertyName %>Reducer } from './<%= fileName %>.slice';
+
+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/files/__fileName__.slice.ts__tmpl__

@@ -0,0 +1,129 @@
+import {
+  createAsyncThunk,
+  createEntityAdapter,
+  createSelector,
+  createSlice,
+  EntityState,
+  PayloadAction
+} from '@reduxjs/toolkit';
+
+export const <%= constantName %>_FEATURE_KEY = '<%= propertyName %>';
+
+/*
+ * Update these interfaces according to your requirements.
+ */
+export interface <%= className %>Entity {
+  id: number;
+}
+
+export interface <%= className %>State extends EntityState<<%= className %>Entity> {
+  loadingStatus: 'not loaded' | 'loading' | 'loaded' | 'error';
+  error?: string | null;
+}
+
+export const <%= propertyName %>Adapter = createEntityAdapter<<%= className %>Entity>();
+
+/**
+ * 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<<%= className %>Entity[]>(
+  '<%= 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: <%= 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: <%= className %>State) => {
+        state.loadingStatus = 'loading';
+      })
+      .addCase(fetch<%= className %>.fulfilled, (state: <%= className %>State, action: PayloadAction<<%= className %>Entity[]>) => {
+        <%= propertyName %>Adapter.setAll(state, action.payload);
+        state.loadingStatus = 'loaded';
+      })
+      .addCase(fetch<%= className %>.rejected, (state: <%= className %>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: {[<%= constantName %>_FEATURE_KEY]: <%= className %>State }): <%= className %>State => 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/redux.d.ts

@@ -0,0 +1,5 @@
+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;