@nx/react-native 20.2.0-beta.3 → 20.2.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react-native",
-  "version": "20.2.0-beta.3",
+  "version": "20.2.0-beta.4",
   "private": false,
   "description": "The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides: \n\n-Integration with libraries such as Jest, Detox, and Storybook.\n-Scaffolding for creating buildable libraries that can be published to npm.\n-Utilities for automatic workspace refactoring.",
   "keywords": [
@@ -36,12 +36,12 @@
     "node-fetch": "^2.6.7",
     "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.2.0-beta.3",
-    "@nx/jest": "20.2.0-beta.3",
-    "@nx/js": "20.2.0-beta.3",
-    "@nx/eslint": "20.2.0-beta.3",
-    "@nx/react": "20.2.0-beta.3",
-    "@nx/workspace": "20.2.0-beta.3"
+    "@nx/devkit": "20.2.0-beta.4",
+    "@nx/jest": "20.2.0-beta.4",
+    "@nx/js": "20.2.0-beta.4",
+    "@nx/eslint": "20.2.0-beta.4",
+    "@nx/react": "20.2.0-beta.4",
+    "@nx/workspace": "20.2.0-beta.4"
   },
   "executors": "./executors.json",
   "ng-update": {

package/src/generators/application/application.js

@@ -5,7 +5,6 @@ exports.reactNativeApplicationGeneratorInternal = reactNativeApplicationGenerato
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const add_linting_1 = require("../../utils/add-linting");
 const add_jest_1 = require("../../utils/add-jest");
 const chmod_android_gradle_files_1 = require("../../utils/chmod-android-gradle-files");
@@ -18,6 +17,7 @@ const create_application_files_1 = require("./lib/create-application-files");
 const add_e2e_1 = require("./lib/add-e2e");
 const ensure_dependencies_1 = require("../../utils/ensure-dependencies");
 const sync_deps_impl_1 = require("../../executors/sync-deps/sync-deps.impl");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function reactNativeApplicationGenerator(host, schema) {
     return await reactNativeApplicationGeneratorInternal(host, {
         addPlugin: false,
@@ -25,14 +25,15 @@ async function reactNativeApplicationGenerator(host, schema) {
     });
 }
 async function reactNativeApplicationGeneratorInternal(host, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react-native', 'application');
-    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     const tasks = [];
     const jsInitTask = await (0, js_1.initGenerator)(host, {
         ...schema,
         skipFormat: true,
+        addTsPlugin: schema.useTsSolution,
+        formatter: schema.formatter,
     });
     tasks.push(jsInitTask);
+    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     const initTask = await (0, init_1.default)(host, { ...options, skipFormat: true });
     tasks.push(initTask);
     if (!options.skipPackageJson) {
@@ -76,6 +77,15 @@ async function reactNativeApplicationGeneratorInternal(host, schema) {
             ],
         });
     }
+    (0, ts_solution_setup_1.updateTsconfigFiles)(host, options.appProjectRoot, 'tsconfig.app.json', {
+        jsx: 'react-jsx',
+        module: 'esnext',
+        moduleResolution: 'bundler',
+        noUnusedLocals: false,
+        lib: ['dom'],
+    }, options.linter === 'eslint'
+        ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
+        : undefined);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/application/lib/add-project.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addProject = addProject;
 const devkit_1 = require("@nx/devkit");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 function addProject(host, options) {
     const nxJson = (0, devkit_1.readNxJson)(host);
     const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
@@ -14,9 +16,25 @@ function addProject(host, options) {
         targets: hasPlugin ? {} : getTargets(options),
         tags: options.parsedTags,
     };
-    (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
-        ...project,
-    });
+    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
+            name: (0, get_import_path_1.getImportPath)(host, options.name),
+            version: '0.0.1',
+            private: true,
+            nx: {
+                name: options.name,
+                projectType: 'application',
+                sourceRoot: `${options.appProjectRoot}/src`,
+                targets: hasPlugin ? {} : getTargets(options),
+                tags: options.parsedTags?.length ? options.parsedTags : undefined,
+            },
+        });
+    }
+    else {
+        (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
+            ...project,
+        });
+    }
 }
 function getTargets(options) {
     const architect = {};

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

@@ -16,6 +16,9 @@ export interface Schema {
   bundler: 'webpack' | 'vite'; // default is webpack
   install: boolean; // default is true
   skipPackageJson?: boolean; //default is false
+  // Internal options
   addPlugin?: boolean;
   nxCloudToken?: string;
+  useTsSolution?: boolean;
+  formatter?: 'prettier' | 'none';
 }

package/src/generators/application/schema.json

@@ -44,13 +44,15 @@
       "description": "The tool to use for running lint checks.",
       "type": "string",
       "enum": ["eslint", "none"],
-      "default": "eslint"
+      "default": "none",
+      "x-priority": "important"
     },
     "unitTestRunner": {
       "type": "string",
       "enum": ["jest", "none"],
       "description": "Test runner to use for unit tests",
-      "default": "jest"
+      "default": "none",
+      "x-priority": "important"
     },
     "tags": {
       "type": "string",
@@ -71,7 +73,8 @@
       "description": "Adds the specified e2e test runner.",
       "type": "string",
       "enum": ["playwright", "cypress", "detox", "none"],
-      "default": "playwright"
+      "default": "none",
+      "x-priority": "important"
     },
     "install": {
       "type": "boolean",

package/src/generators/component/schema.json

@@ -7,28 +7,31 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g @nx/react-native:component mylib/src/lib/my-component/my-component ",
-      "description": "Generate a component in the `mylib` library"
+      "description": "Generate a component with the exported symbol matching the file name. It results in the component `Foo` at `mylib/src/lib/foo.tsx`",
+      "command": "nx g @nx/react-native:component mylib/src/lib/foo"
     },
     {
-      "command": "nx g @nx/react-native:component mylib/src/lib/my-component/my-component --classComponent",
-      "description": "Generate a class component in the `mylib` library"
+      "description": "Generate a component with the exported symbol different from the file name. It results in the component `Custom` at `mylib/src/lib/foo.tsx`",
+      "command": "nx g @nx/react-native:component mylib/src/lib/foo --name=custom"
+    },
+    {
+      "description": "Generate a class component at `mylib/src/lib/foo.tsx`",
+      "command": "nx g @nx/react-native:component mylib/src/lib/foo --classComponent"
     }
   ],
   "properties": {
     "path": {
       "type": "string",
-      "description": "The path at which to create the component file.",
+      "description": "The file path to the component without the file extension. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What path would you like to use for the component?"
+      "x-prompt": "What is the component file path?"
     },
     "name": {
       "type": "string",
-      "description": "The name of the component.",
-      "x-prompt": "What name would you like to use for the component?"
+      "description": "The component symbol name. Defaults to the last segment of the file path."
     },
     "js": {
       "type": "boolean",

package/src/generators/init/init.js

@@ -5,7 +5,6 @@ exports.reactNativeInitGeneratorInternal = reactNativeInitGeneratorInternal;
 exports.updateDependencies = updateDependencies;
 const devkit_1 = require("@nx/devkit");
 const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const plugin_1 = require("../../../plugins/plugin");
 const versions_1 = require("../../utils/versions");
 const add_git_ignore_entry_1 = require("./lib/add-git-ignore-entry");
@@ -16,7 +15,6 @@ function reactNativeInitGenerator(host, schema) {
     });
 }
 async function reactNativeInitGeneratorInternal(host, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react-native', 'init');
     (0, add_git_ignore_entry_1.addGitIgnoreEntry)(host);
     const nxJson = (0, devkit_1.readNxJson)(host);
     const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&

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

@@ -8,5 +8,6 @@ export interface NormalizedSchema extends Schema {
     parsedTags: string[];
     appMain?: string;
     appSourceRoot?: string;
+    isUsingTsSolutionConfig: boolean;
 }
 export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'library');
     const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
@@ -26,6 +27,7 @@ async function normalizeOptions(host, options) {
         projectRoot,
         parsedTags,
         importPath,
+        isUsingTsSolutionConfig: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
     };
     return normalized;
 }

package/src/generators/library/library.js

@@ -12,6 +12,7 @@ const normalize_options_1 = require("./lib/normalize-options");
 const ensure_dependencies_1 = require("../../utils/ensure-dependencies");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 async function reactNativeLibraryGenerator(host, schema) {
     return await reactNativeLibraryGeneratorInternal(host, {
         addPlugin: false,
@@ -19,17 +20,16 @@ async function reactNativeLibraryGenerator(host, schema) {
     });
 }
 async function reactNativeLibraryGeneratorInternal(host, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react-native', 'library');
-    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)`);
-    }
     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) {
+        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)`);
+    }
     const initTask = await (0, init_1.default)(host, { ...options, skipFormat: true });
     tasks.push(initTask);
     if (!options.skipPackageJson) {
@@ -58,9 +58,20 @@ async function reactNativeLibraryGeneratorInternal(host, schema) {
             (0, devkit_1.joinPathFragments)(options.projectRoot, './src', 'index.' + (options.js ? 'js' : '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);
     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));
+    }
     tasks.push(() => {
         (0, log_show_project_command_1.logShowProjectCommand)(options.name);
     });
@@ -74,7 +85,28 @@ async function addProject(host, options) {
         tags: options.parsedTags,
         targets: {},
     };
-    (0, devkit_1.addProjectConfiguration)(host, options.name, project);
+    if (options.isUsingTsSolutionConfig) {
+        const sourceEntry = !options.buildable
+            ? options.js
+                ? './src/index.js'
+                : './src/index.ts'
+            : undefined;
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.projectRoot, 'package.json'), {
+            name: (0, get_import_path_1.getImportPath)(host, options.name),
+            version: '0.0.1',
+            main: sourceEntry,
+            types: sourceEntry,
+            nx: {
+                name: options.name,
+                sourceRoot: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src'),
+                projectType: 'library',
+                tags: options.parsedTags?.length ? options.parsedTags : undefined,
+            },
+        });
+    }
+    else {
+        (0, devkit_1.addProjectConfiguration)(host, options.name, project);
+    }
     if (!options.publishable && !options.buildable) {
         return () => { };
     }

package/src/generators/library/schema.json

@@ -32,13 +32,16 @@
       "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", "none"],
       "description": "Test runner to use for unit tests.",
-      "default": "jest"
+      "default": "none",
+      "x-priority": "important"
     },
     "tags": {
       "type": "string",

package/src/generators/web-configuration/web-configuration.js

@@ -40,6 +40,11 @@ async function webConfigurationGenerator(tree, options) {
                 : null,
         });
     }
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@types/react-dom': versions_1.typesReactDomVersion,
+        }));
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
@@ -59,6 +64,7 @@ async function addBundlerConfiguration(tree, normalizedSchema) {
             project: normalizedSchema.project,
             newProject: true,
             includeVitest: false,
+            projectType: 'application',
             compiler: 'babel',
             skipFormat: true,
         });

package/src/utils/versions.d.ts

@@ -9,6 +9,7 @@ export declare const reactVersion = "18.2.0";
 export declare const reactDomVersion = "18.2.0";
 export declare const reactTestRendererVersion = "18.2.0";
 export declare const typesReactVersion = "~18.2.45";
+export declare const typesReactDomVersion = "18.3.0";
 export declare const testingLibraryReactNativeVersion = "~12.5.0";
 export declare const testingLibraryJestNativeVersion = "~5.4.3";
 export declare const jestReactNativeVersion = "18.0.0";

package/src/utils/versions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.babelRuntimeVersion = exports.reactNativeSvgVersion = exports.reactNativeSvgTransformerVersion = exports.jestReactNativeVersion = exports.testingLibraryJestNativeVersion = exports.testingLibraryReactNativeVersion = exports.typesReactVersion = exports.reactTestRendererVersion = exports.reactDomVersion = exports.reactVersion = exports.reactNativeWebVersion = exports.reactNativeMetroConfigVersion = exports.reactNativeBabelPresetVersion = exports.reactNativeCommunityCliPlatformAndroidVersion = exports.typesNodeVersion = exports.reactNativeVersion = exports.nxVersion = void 0;
+exports.babelRuntimeVersion = exports.reactNativeSvgVersion = exports.reactNativeSvgTransformerVersion = exports.jestReactNativeVersion = exports.testingLibraryJestNativeVersion = exports.testingLibraryReactNativeVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.reactTestRendererVersion = exports.reactDomVersion = exports.reactVersion = exports.reactNativeWebVersion = exports.reactNativeMetroConfigVersion = exports.reactNativeBabelPresetVersion = exports.reactNativeCommunityCliPlatformAndroidVersion = exports.typesNodeVersion = exports.reactNativeVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.reactNativeVersion = '0.74.1';
 exports.typesNodeVersion = '18.16.9';
@@ -12,6 +12,7 @@ exports.reactVersion = '18.2.0';
 exports.reactDomVersion = '18.2.0';
 exports.reactTestRendererVersion = '18.2.0';
 exports.typesReactVersion = '~18.2.45';
+exports.typesReactDomVersion = '18.3.0';
 exports.testingLibraryReactNativeVersion = '~12.5.0';
 exports.testingLibraryJestNativeVersion = '~5.4.3';
 exports.jestReactNativeVersion = '18.0.0';