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

package/src/generators/host/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';
 
@@ -6,14 +5,12 @@ export interface Schema {
   classComponent?: boolean;
   compiler?: 'babel' | 'swc';
   devServerPort?: number;
-  directory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  directory: string;
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
   globalCss?: boolean;
   js?: boolean;
   linter: Linter | LinterType;
-  name: string;
-  pascalCaseFiles?: boolean;
+  name?: string;
   remotes?: string[];
   setParserOptionsProject?: boolean;
   skipFormat?: boolean;

package/src/generators/host/schema.json

@@ -2,32 +2,26 @@
   "$schema": "https://json-schema.org/schema",
   "$id": "GeneratorReactHost",
   "cli": "nx",
-  "title": "Generate Module Federation Setup for React Host App",
-  "description": "Create Module Federation configuration files for given React Host Application.",
+  "title": "Generate Module Federation Setup for React Consumer (Host) App",
+  "description": "Create Module Federation configuration files for given React Consumer (Host) Application.",
   "type": "object",
   "properties": {
-    "name": {
+    "directory": {
+      "description": "The directory of the new application.",
       "type": "string",
-      "description": "The name of the host application to generate the Module Federation configuration",
+      "alias": "dir",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use as the host application?",
-      "pattern": "^[a-zA-Z][^:]*$",
-      "x-priority": "important"
+      "x-prompt": "Which directory do you want to create the application in?"
     },
-    "directory": {
-      "description": "The directory of the new application.",
+    "name": {
       "type": "string",
-      "alias": "dir",
+      "description": "The name of the Consumer (host) application to generate the Module Federation configuration",
+      "pattern": "^[a-zA-Z][^:]*$",
       "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",
@@ -80,7 +74,7 @@
     },
     "dynamic": {
       "type": "boolean",
-      "description": "Should the host application use dynamic federation?",
+      "description": "Should the Consumer (host) application use dynamic federation?",
       "default": false
     },
     "skipFormat": {
@@ -113,12 +107,6 @@
       "description": "Add tags to the application (used for linting).",
       "alias": "t"
     },
-    "pascalCaseFiles": {
-      "type": "boolean",
-      "description": "Use pascal case component file name (e.g. App.tsx).",
-      "alias": "P",
-      "default": false
-    },
     "classComponent": {
       "type": "boolean",
       "description": "Use class components instead of functional component.",
@@ -153,18 +141,19 @@
     },
     "remotes": {
       "type": "array",
-      "description": "A list of remote application names that the host application should consume.",
+      "description": "A list of Producer (remote) application names that the Consumer (host) application should consume.",
       "default": [],
-      "x-priority": "important"
+      "x-priority": "important",
+      "alias": "producers"
     },
     "devServerPort": {
       "type": "number",
-      "description": "The port for the dev server of the remote app.",
+      "description": "The port for the dev server of the Producer (remote) app.",
       "default": 4200,
       "x-priority": "important"
     },
     "ssr": {
-      "description": "Whether to configure SSR for the host application",
+      "description": "Whether to configure SSR for the Consumer (host) application",
       "type": "boolean",
       "default": false
     },
@@ -193,6 +182,6 @@
       "x-priority": "important"
     }
   },
-  "required": ["name"],
+  "required": ["directory"],
   "additionalProperties": false
 }

package/src/generators/init/init.d.ts

@@ -1,4 +1,4 @@
 import { type GeneratorCallback, type Tree } from '@nx/devkit';
 import { InitSchema } from './schema';
-export declare function reactInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export declare function reactInitGenerator(tree: Tree, schema: InitSchema): Promise<GeneratorCallback>;
 export default reactInitGenerator;

package/src/generators/init/init.js

@@ -3,19 +3,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactInitGenerator = reactInitGenerator;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
-async function reactInitGenerator(host, schema) {
+const version_utils_1 = require("../../utils/version-utils");
+const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
+const router_plugin_1 = require("../../plugins/router-plugin");
+async function reactInitGenerator(tree, schema) {
     const tasks = [];
     if (!schema.skipPackageJson) {
-        tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []));
-        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {
-            react: versions_1.reactVersion,
-            'react-dom': versions_1.reactDomVersion,
+        tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(tree, ['@nx/react'], []));
+        const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(tree);
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {
+            react: reactDeps.react,
+            'react-dom': reactDeps['react-dom'],
         }, {
             '@nx/react': versions_1.nxVersion,
         }, undefined, schema.keepExistingVersions));
     }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    schema.addPlugin ??=
+        process.env.NX_ADD_PLUGINS !== 'false' &&
+            nxJson.useInferencePlugins !== false;
+    if (schema.addPlugin) {
+        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/react/router-plugin', router_plugin_1.createNodesV2, {
+            buildTargetName: ['build', 'react-router:build', 'react-router-build'],
+            devTargetName: ['dev', 'react-router:dev', 'react-router-dev'],
+            startTargetName: ['start', 'react-router-serve', 'react-router-start'],
+            watchDepsTargetName: [
+                'watch-deps',
+                'react-router:watch-deps',
+                'react-router-watch-deps',
+            ],
+            buildDepsTargetName: [
+                'build-deps',
+                'react-router:build-deps',
+                'react-router-build-deps',
+            ],
+        }, schema.updatePackageScripts);
+    }
     if (!schema.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
+        await (0, devkit_1.formatFiles)(tree);
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }

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

@@ -2,4 +2,6 @@ export interface InitSchema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   keepExistingVersions?: boolean;
+  updatePackageScripts?: boolean;
+  addPlugin?: boolean;
 }

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

@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]

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

@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]

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

@@ -8,7 +8,7 @@ const lint_1 = require("../../../utils/lint");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 async function addLinting(host, options) {
-    if (options.linter === eslint_1.Linter.EsLint) {
+    if (options.linter === 'eslint') {
         const tasks = [];
         const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
             linter: options.linter,

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

@@ -1,4 +1,6 @@
 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>;
+export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema & {
+    format?: Array<'esm' | 'cjs'>;
+}, external?: Set<String>): Promise<GeneratorCallback>;

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

@@ -4,7 +4,7 @@ exports.addRollupBuildTarget = addRollupBuildTarget;
 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) {
+async function addRollupBuildTarget(host, options, external = new Set(['react', 'react-dom'])) {
     const tasks = [];
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
     tasks.push(await configurationGenerator(host, {
@@ -19,12 +19,11 @@ async function addRollupBuildTarget(host, options) {
             '@svgr/rollup': versions_1.svgrRollupVersion,
         }));
     }
-    const external = ['react', 'react-dom'];
     if (options.style === '@emotion/styled') {
-        external.push('@emotion/react/jsx-runtime');
+        external.add('@emotion/react/jsx-runtime');
     }
     else {
-        external.push('react/jsx-runtime');
+        external.add('react/jsx-runtime');
     }
     const nxJson = (0, devkit_1.readNxJson)(host);
     const hasRollupPlugin = !!nxJson.plugins?.some((p) => typeof p === 'string'
@@ -32,33 +31,36 @@ async function addRollupBuildTarget(host, options) {
         : p.plugin === '@nx/rollup/plugin');
     if (hasRollupPlugin) {
         // New behavior, using rollup config file and inferred target.
-        host.write((0, devkit_1.joinPathFragments)(options.projectRoot, 'rollup.config.js'), (0, devkit_1.stripIndents) `
-      const { withNx } = require('@nx/rollup/with-nx');
-      const url = require('@rollup/plugin-url');
-      const svg = require('@svgr/rollup');
-      
-      module.exports = withNx({
-        main: '${(0, maybe_js_1.maybeJs)(options, './src/index.ts')}',
-        outputPath: '${(0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
-        tsConfig: './tsconfig.lib.json',
-        compiler: '${options.compiler ?? 'babel'}',
-        external: ${JSON.stringify(external)},
-        format: ['esm'],
-        assets:[{ input: '.', output: '.', glob: 'README.md'}],
-      }, {
-        // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
-        plugins: [
-          svg({
-            svgo: false,
-            titleProp: true,
-            ref: true,
-          }),
-          url({
-            limit: 10000, // 10kB
-          }),
-        ],
-      });
-    `);
+        host.write((0, devkit_1.joinPathFragments)(options.projectRoot, 'rollup.config.cjs'), `const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+
+module.exports = withNx(
+  {
+    main: '${(0, maybe_js_1.maybeJs)(options, './src/index.ts')}',
+    outputPath: '${options.isUsingTsSolutionConfig
+            ? './dist'
+            : (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
+    tsConfig: './tsconfig.lib.json',
+    compiler: '${options.compiler ?? 'babel'}',
+    external: ${JSON.stringify(Array.from(external))},
+    format: ${JSON.stringify(options.format ?? ['esm'])},
+    assets:[{ input: '.', output: '.', glob: 'README.md'}],
+  }, {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    plugins: [
+      svg({
+        svgo: false,
+        titleProp: true,
+        ref: true,
+      }),
+      url({
+        limit: 10000, // 10kB
+      }),
+    ],
+  }
+);
+`);
     }
     else {
         // Legacy behavior, there is a target in project.json using rollup executor.
@@ -71,7 +73,7 @@ async function addRollupBuildTarget(host, options) {
                 tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
                 project: `${options.projectRoot}/package.json`,
                 entryFile: (0, maybe_js_1.maybeJs)(options, `${options.projectRoot}/src/index.ts`),
-                external,
+                external: Array.from(external),
                 rollupConfig: `@nx/react/plugins/bundle-rollup`,
                 compiler: options.compiler ?? 'babel',
                 assets: [

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

@@ -1,3 +1,3 @@
-import type { Tree } from '@nx/devkit';
+import { 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

@@ -42,8 +42,29 @@ function createFiles(host, options) {
             ].filter(Boolean),
         });
     }
-    if (!options.publishable && !options.buildable) {
-        host.delete(`${options.projectRoot}/package.json`);
+    if ((options.publishable || options.buildable) &&
+        !options.isUsingTsSolutionConfig &&
+        options.useProjectJson) {
+        if (options.bundler === 'vite') {
+            (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
+                name: options.importPath,
+                version: '0.0.1',
+                main: './index.js',
+                types: './index.d.ts',
+                exports: {
+                    '.': {
+                        import: './index.mjs',
+                        require: './index.js',
+                    },
+                },
+            });
+        }
+        else {
+            (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
+                name: options.importPath,
+                version: '0.0.1',
+            });
+        }
     }
     if (options.js) {
         (0, devkit_1.toJS)(host);

package/src/generators/library/lib/determine-entry-fields.d.ts

@@ -0,0 +1,3 @@
+import type { PackageJson } from 'nx/src/utils/package-json';
+import type { NormalizedSchema } from '../schema';
+export declare function determineEntryFields(options: NormalizedSchema): Pick<PackageJson, 'main' | 'types' | 'exports'>;

package/src/generators/library/lib/determine-entry-fields.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineEntryFields = determineEntryFields;
+function determineEntryFields(options) {
+    if (options.bundler !== 'none') {
+        return {};
+    }
+    return {
+        main: options.js ? './src/index.js' : './src/index.ts',
+        types: options.js ? './src/index.js' : './src/index.ts',
+        exports: {
+            '.': options.js
+                ? './src/index.js'
+                : {
+                    types: './src/index.ts',
+                    import: './src/index.ts',
+                    default: './src/index.ts',
+                },
+            './package.json': './package.json',
+        },
+    };
+}

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

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

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

@@ -3,14 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installCommonDependencies = installCommonDependencies;
 const devkit_1 = require("@nx/devkit");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
+const version_utils_1 = require("../../../utils/version-utils");
 const versions_1 = require("../../../utils/versions");
-function installCommonDependencies(host, options) {
+async function installCommonDependencies(host, options) {
     const tasks = [];
+    const reactVersions = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
     const dependencies = {};
     const devDependencies = {
         '@types/node': versions_1.typesNodeVersion,
-        '@types/react': versions_1.typesReactVersion,
-        '@types/react-dom': versions_1.typesReactDomVersion,
+        '@types/react': reactVersions['@types/react'],
+        '@types/react-dom': reactVersions['@types/react-dom'],
     };
     if (options.bundler !== 'vite') {
         dependencies['tslib'] = versions_1.tsLibVersion;

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

@@ -4,14 +4,15 @@ exports.normalizeOptions = normalizeOptions;
 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");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'library');
     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' &&
@@ -40,29 +41,33 @@ async function normalizeOptions(host, options) {
         bundler,
         fileName,
         routePath: `/${projectNames.projectSimpleName}`,
-        name: projectName,
+        name: isUsingTsSolutionConfig && !options.name ? importPath : projectName,
         projectRoot,
         parsedTags,
         importPath,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     // 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}"`);
+        const appProjectType = (0, ts_solution_setup_1.getProjectType)(host, appProjectConfig.root, appProjectConfig.projectType);
+        if (appProjectType !== 'application') {
+            throw new Error(`appProject expected type of "application" but got "${appProjectType}"`);
         }
+        const appSourceRoot = (0, ts_solution_setup_1.getProjectSourceRoot)(host, appProjectConfig.sourceRoot, appProjectConfig.root);
         normalized.appMain =
             appProjectConfig.targets.build?.options?.main ??
                 findMainEntry(host, appProjectConfig.root);
-        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appSourceRoot);
         // 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);
+    normalized.isUsingTsSolutionConfig = isUsingTsSolutionConfig;
     return normalized;
 }
 function findMainEntry(tree, projectRoot) {