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

package/src/generators/init/schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxReactNgInit",
+  "title": "Init React Plugin",
+  "description": "Initialize a React Plugin.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false
+    },
+    "keepExistingVersions": {
+      "type": "boolean",
+      "x-priority": "internal",
+      "description": "Keep existing dependencies versions",
+      "default": false
+    }
+  },
+  "required": []
+}

package/src/generators/library/files/common/README.md

@@ -0,0 +1,7 @@
+# <%= name %>
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test <%= name %>` to execute the unit tests via [Jest](https://jestjs.io).

package/src/generators/library/files/common/package.json__tmpl__

@@ -0,0 +1,4 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1"
+}

package/src/generators/library/files/common/tsconfig.lib.json__tmpl__

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "types": [
+      "node",
+      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/src/generators/library/files/vite/README.md

@@ -0,0 +1,7 @@
+# <%= name %>
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test <%= name %>` to execute the unit tests via [Vitest](https://vitest.dev/).

package/src/generators/library/files/vite/package.json__tmpl__

@@ -0,0 +1,12 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

package/src/generators/library/files/vite/tsconfig.lib.json__tmpl__

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "types": [
+      "node",
+      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx", "**/*.spec.js", "**/*.test.js", "**/*.spec.jsx", "**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/src/generators/library/lib/add-linting.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from 'nx/src/generators/tree';
+import { NormalizedSchema } from '../schema';
+export declare function addLinting(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/library/lib/add-linting.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLinting = void 0;
+const eslint_1 = require("@nx/eslint");
+const path_1 = require("nx/src/utils/path");
+const devkit_1 = require("@nx/devkit");
+const lint_1 = require("../../../utils/lint");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+async function addLinting(host, options) {
+    if (options.linter === eslint_1.Linter.EsLint) {
+        const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
+            linter: options.linter,
+            project: options.name,
+            tsConfigPaths: [
+                (0, path_1.joinPathFragments)(options.projectRoot, 'tsconfig.lib.json'),
+            ],
+            unitTestRunner: options.unitTestRunner,
+            skipFormat: true,
+            skipPackageJson: options.skipPackageJson,
+            setParserOptionsProject: options.setParserOptionsProject,
+            addPlugin: options.addPlugin,
+        });
+        if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
+            (0, eslint_file_1.addExtendsToLintConfig)(host, options.projectRoot, 'plugin:@nx/react');
+        }
+        let installTask = () => { };
+        if (!options.skipPackageJson) {
+            installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
+        }
+        return (0, devkit_1.runTasksInSerial)(lintTask, installTask);
+    }
+    else {
+        return () => { };
+    }
+}
+exports.addLinting = addLinting;

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

@@ -0,0 +1,4 @@
+import { Tree } from 'nx/src/generators/tree';
+import { GeneratorCallback } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addRollupBuildTarget = void 0;
+const devkit_1 = require("@nx/devkit");
+const maybe_js_1 = require("../../../utils/maybe-js");
+const versions_1 = require("../../../utils/versions");
+async function addRollupBuildTarget(host, options) {
+    const tasks = [];
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
+    tasks.push(await configurationGenerator(host, {
+        ...options,
+        project: options.name,
+        skipFormat: true,
+    }));
+    if (!options.skipPackageJson) {
+        // These are used in `@nx/react/plugins/bundle-rollup`
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, {
+            '@rollup/plugin-url': versions_1.rollupPluginUrlVersion,
+            '@svgr/rollup': versions_1.svgrRollupVersion,
+        }));
+    }
+    const { targets } = (0, devkit_1.readProjectConfiguration)(host, options.name);
+    const external = ['react', 'react-dom'];
+    if (options.style === '@emotion/styled') {
+        external.push('@emotion/react/jsx-runtime');
+    }
+    else {
+        external.push('react/jsx-runtime');
+    }
+    targets.build = {
+        executor: '@nx/rollup:rollup',
+        outputs: ['{options.outputPath}'],
+        options: {
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot),
+            tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
+            project: `${options.projectRoot}/package.json`,
+            entryFile: (0, maybe_js_1.maybeJs)(options, `${options.projectRoot}/src/index.ts`),
+            external,
+            rollupConfig: `@nx/react/plugins/bundle-rollup`,
+            compiler: options.compiler ?? 'babel',
+            assets: [
+                {
+                    glob: `${options.projectRoot}/README.md`,
+                    input: '.',
+                    output: '.',
+                },
+            ],
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(host, options.name, {
+        root: options.projectRoot,
+        sourceRoot: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src'),
+        projectType: 'library',
+        tags: options.parsedTags,
+        targets,
+    });
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.addRollupBuildTarget = addRollupBuildTarget;

package/src/generators/library/lib/create-files.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function createFiles(host: Tree, options: NormalizedSchema): void;

package/src/generators/library/lib/create-files.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const create_ts_config_1 = require("../../../utils/create-ts-config");
+function createFiles(host, options) {
+    const relativePathToRootTsConfig = (0, js_1.getRelativePathToRootTsConfig)(host, options.projectRoot);
+    const substitutions = {
+        ...options,
+        ...(0, devkit_1.names)(options.name),
+        tmpl: '',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.projectRoot),
+        fileName: options.fileName,
+    };
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, '../files/common'), options.projectRoot, substitutions);
+    if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
+        (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, '../files/vite'), options.projectRoot, substitutions);
+    }
+    if (options.compiler === 'babel') {
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.projectRoot, '.babelrc'), {
+            presets: [
+                [
+                    '@nx/react/babel',
+                    {
+                        runtime: 'automatic',
+                        useBuiltIns: 'usage',
+                        importSource: options.style === '@emotion/styled'
+                            ? '@emotion/react'
+                            : undefined,
+                    },
+                ],
+            ],
+            plugins: [
+                options.style === 'styled-components'
+                    ? ['styled-components', { pure: true, ssr: true }]
+                    : undefined,
+                options.style === 'styled-jsx' ? 'styled-jsx/babel' : undefined,
+                options.style === '@emotion/styled'
+                    ? '@emotion/babel-plugin'
+                    : undefined,
+            ].filter(Boolean),
+        });
+    }
+    if (!options.publishable && !options.buildable) {
+        host.delete(`${options.projectRoot}/package.json`);
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+    (0, create_ts_config_1.createTsConfig)(host, options.projectRoot, 'lib', options, relativePathToRootTsConfig);
+}
+exports.createFiles = createFiles;

package/src/generators/library/lib/install-common-dependencies.d.ts

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function installCommonDependencies(host: Tree, options: NormalizedSchema): GeneratorCallback;

package/src/generators/library/lib/install-common-dependencies.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installCommonDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
+const versions_1 = require("../../../utils/versions");
+function installCommonDependencies(host, options) {
+    const tasks = [];
+    const dependencies = {};
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+    };
+    if (options.bundler !== 'vite') {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
+    // Vite requires style preprocessors to be installed manually.
+    // `@nx/webpack` installs them automatically for now.
+    // TODO(jack): Once we clean up webpack we can remove this check
+    if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
+        switch (options.style) {
+            case 'scss':
+                devDependencies['sass'] = versions_1.sassVersion;
+                break;
+            case 'less':
+                devDependencies['less'] = versions_1.lessVersion;
+                break;
+        }
+    }
+    if (options.unitTestRunner && options.unitTestRunner !== 'none') {
+        devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+    }
+    const baseInstallTask = (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
+    tasks.push(baseInstallTask);
+    if (options.compiler === 'swc') {
+        tasks.push((0, add_swc_dependencies_1.addSwcDependencies)(host));
+    }
+    else if (options.compiler === 'babel') {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, {
+            '@babel/preset-react': versions_1.babelPresetReactVersion,
+            '@babel/core': versions_1.babelCoreVersion,
+        }));
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.installCommonDependencies = installCommonDependencies;

package/src/generators/library/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const assertion_1 = require("../../../utils/assertion");
+async function normalizeOptions(host, options) {
+    const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+        name: options.name,
+        projectType: 'library',
+        directory: options.directory,
+        importPath: options.importPath,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        callingGenerator: '@nx/react:library',
+    });
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
+    const fileName = options.simpleName
+        ? projectNames.projectSimpleName
+        : projectNames.projectFileName;
+    const parsedTags = options.tags
+        ? options.tags.split(',').map((s) => s.trim())
+        : [];
+    let bundler = options.bundler ?? 'none';
+    if (bundler === 'none') {
+        if (options.publishable) {
+            devkit_1.logger.warn(`Publishable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.`);
+            bundler = 'rollup';
+        }
+        if (options.buildable) {
+            devkit_1.logger.warn(`Buildable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.`);
+            bundler = 'rollup';
+        }
+    }
+    const normalized = {
+        ...options,
+        compiler: options.compiler ?? 'babel',
+        bundler,
+        fileName,
+        routePath: `/${projectNames.projectSimpleName}`,
+        name: projectName,
+        projectRoot,
+        parsedTags,
+        importPath,
+    };
+    // Libraries with a bundler or is publishable must also be buildable.
+    normalized.buildable = Boolean(normalized.bundler !== 'none' || options.buildable || options.publishable);
+    normalized.inSourceTests === normalized.minimal || normalized.inSourceTests;
+    if (options.appProject) {
+        const appProjectConfig = (0, devkit_1.getProjects)(host).get(options.appProject);
+        if (appProjectConfig.projectType !== 'application') {
+            throw new Error(`appProject expected type of "application" but got "${appProjectConfig.projectType}"`);
+        }
+        normalized.appMain =
+            appProjectConfig.targets.build?.options?.main ??
+                findMainEntry(host, appProjectConfig.root);
+        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+        // TODO(jack): We should use appEntryFile instead of appProject so users can directly set it rather than us inferring it.
+        if (!normalized.appMain) {
+            throw new Error(`Could not locate project main for ${options.appProject}`);
+        }
+    }
+    (0, assertion_1.assertValidStyle)(normalized.style);
+    return normalized;
+}
+exports.normalizeOptions = normalizeOptions;
+function findMainEntry(tree, projectRoot) {
+    const mainFiles = [
+        // These are the main files we generate with.
+        'src/main.ts',
+        'src/main.tsx',
+        'src/main.js',
+        'src/main.jsx',
+        // Other options just in case
+        'src/index.ts',
+        'src/index.tsx',
+        'src/index.js',
+        'src/index.jsx',
+        'main.ts',
+        'main.tsx',
+        'main.js',
+        'main.jsx',
+        'index.ts',
+        'index.tsx',
+        'index.js',
+        'index.jsx',
+    ];
+    const mainEntry = mainFiles.find((file) => tree.exists((0, devkit_1.joinPathFragments)(projectRoot, file)));
+    return mainEntry ? (0, devkit_1.joinPathFragments)(projectRoot, mainEntry) : undefined;
+}

package/src/generators/library/lib/set-defaults.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function setDefaults(host: Tree, options: NormalizedSchema): void;

package/src/generators/library/lib/set-defaults.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDefaults = void 0;
+const devkit_1 = require("@nx/devkit");
+function setDefaults(host, options) {
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    nxJson.generators = nxJson.generators || {};
+    nxJson.generators['@nx/react'] = nxJson.generators['@nx/react'] || {};
+    const prev = { ...nxJson.generators['@nx/react'] };
+    const libDefaults = {
+        ...prev.library,
+        unitTestRunner: prev.library?.unitTestRunner ?? options.unitTestRunner,
+    };
+    nxJson.generators = {
+        ...nxJson.generators,
+        '@nx/react': {
+            ...prev,
+            library: libDefaults,
+        },
+    };
+    (0, devkit_1.updateNxJson)(host, nxJson);
+}
+exports.setDefaults = setDefaults;

package/src/generators/library/lib/update-app-routes.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function updateAppRoutes(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;

package/src/generators/library/lib/update-app-routes.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateAppRoutes = void 0;
+const devkit_1 = require("@nx/devkit");
+const ast_utils_1 = require("../../../utils/ast-utils");
+const ast_utils_2 = require("../../../utils/ast-utils");
+const maybe_js_1 = require("../../../utils/maybe-js");
+const versions_1 = require("../../../utils/versions");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function updateAppRoutes(host, options) {
+    if (!options.appMain || !options.appSourceRoot) {
+        return () => { };
+    }
+    const { content, source } = readComponent(host, options.appMain);
+    const componentImportPath = (0, ast_utils_1.findComponentImportPath)('App', source);
+    if (!componentImportPath) {
+        throw new Error(`Could not find App component in ${options.appMain} (Hint: you can omit --appProject, or make sure App exists)`);
+    }
+    const appComponentPath = (0, devkit_1.joinPathFragments)(options.appSourceRoot, (0, maybe_js_1.maybeJs)(options, `${componentImportPath}.tsx`));
+    const routerTask = (0, devkit_1.addDependenciesToPackageJson)(host, {
+        'react-router-dom': versions_1.reactRouterDomVersion,
+    }, {});
+    // addBrowserRouterToMain
+    const isRouterPresent = content.match(/react-router-dom/);
+    if (!isRouterPresent) {
+        const changes = (0, devkit_1.applyChangesToString)(content, (0, ast_utils_1.addBrowserRouter)(options.appMain, source));
+        host.write(options.appMain, changes);
+    }
+    // addInitialAppRoutes
+    {
+        const { content: componentContent, source: componentSource } = readComponent(host, appComponentPath);
+        const isComponentRouterPresent = componentContent.match(/react-router-dom/);
+        if (!isComponentRouterPresent) {
+            const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_2.addInitialRoutes)(appComponentPath, componentSource));
+            host.write(appComponentPath, changes);
+        }
+    }
+    // addNewAppRoute
+    {
+        const { content: componentContent, source: componentSource } = readComponent(host, appComponentPath);
+        const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_1.addRoute)(appComponentPath, componentSource, {
+            routePath: options.routePath,
+            componentName: (0, devkit_1.names)(options.name).className,
+            moduleName: options.importPath,
+        }));
+        host.write(appComponentPath, changes);
+    }
+    return routerTask;
+}
+exports.updateAppRoutes = updateAppRoutes;
+function readComponent(host, path) {
+    if (!host.exists(path)) {
+        throw new Error(`Cannot find ${path}`);
+    }
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const content = host.read(path, 'utf-8');
+    const source = tsModule.createSourceFile(path, content, tsModule.ScriptTarget.Latest, true);
+    return { content, source };
+}

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

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