@nx/react-native 17.0.0-beta.5 → 17.0.0-beta.8

package/generators.json

@@ -24,7 +24,7 @@
       "description": "Create a React Native library."
     },
     "component": {
-      "factory": "./src/generators/component/component#reactNativeComponentGenerator",
+      "factory": "./src/generators/component/component#reactNativeComponentGeneratorInternal",
       "schema": "./src/generators/component/schema.json",
       "description": "Create a React Native component.",
       "aliases": ["c"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react-native",
-  "version": "17.0.0-beta.5",
+  "version": "17.0.0-beta.8",
   "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,14 +36,14 @@
     "node-fetch": "^2.6.7",
     "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
-    "@nx/detox": "17.0.0-beta.5",
-    "@nx/devkit": "17.0.0-beta.5",
-    "@nx/jest": "17.0.0-beta.5",
-    "@nx/js": "17.0.0-beta.5",
-    "@nx/linter": "17.0.0-beta.5",
-    "@nx/react": "17.0.0-beta.5",
-    "@nx/workspace": "17.0.0-beta.5",
-    "@nrwl/react-native": "17.0.0-beta.5"
+    "@nx/detox": "17.0.0-beta.8",
+    "@nx/devkit": "17.0.0-beta.8",
+    "@nx/jest": "17.0.0-beta.8",
+    "@nx/js": "17.0.0-beta.8",
+    "@nx/eslint": "17.0.0-beta.8",
+    "@nx/react": "17.0.0-beta.8",
+    "@nx/workspace": "17.0.0-beta.8",
+    "@nrwl/react-native": "17.0.0-beta.8"
   },
   "peerDependencies": {
     "react-native": ">= 0.72.0 < 0.73.0"

package/src/generators/application/application.spec.ts

@@ -5,7 +5,7 @@ import {
   readProjectConfiguration,
 } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { reactNativeApplicationGenerator } from './application';
 
 describe('app', () => {

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

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addDetox = void 0;
 const detox_1 = require("@nx/detox");
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 async function addDetox(host, options) {
     if (options?.e2eTestRunner !== 'detox') {
         return () => { };
     }
     return (0, detox_1.detoxApplicationGenerator)(host, {
         ...options,
-        linter: linter_1.Linter.EsLint,
+        linter: eslint_1.Linter.EsLint,
         e2eName: `${options.projectName}-e2e`,
         e2eDirectory: `${options.appProjectRoot}-e2e`,
         projectNameAndRootFormat: 'as-provided',

package/src/generators/application/lib/nomalize-options.spec.ts

@@ -1,6 +1,6 @@
 import { Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { Schema } from '../schema';
 import { normalizeOptions } from './normalize-options';
 

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/linter';
+import type { Linter } from '@nx/eslint';
 
 export interface Schema {
   name: string;

package/src/generators/component/component.d.ts

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

package/src/generators/component/component.js

@@ -1,21 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactNativeComponentGenerator = void 0;
+exports.reactNativeComponentGeneratorInternal = exports.reactNativeComponentGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const normalize_options_1 = require("./lib/normalize-options");
 const add_import_1 = require("./lib/add-import");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
 async function reactNativeComponentGenerator(host, schema) {
+    return reactNativeComponentGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.reactNativeComponentGenerator = reactNativeComponentGenerator;
+async function reactNativeComponentGeneratorInternal(host, schema) {
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     createComponentFiles(host, options);
     addExportsToBarrel(host, options);
     await (0, devkit_1.formatFiles)(host);
 }
-exports.reactNativeComponentGenerator = reactNativeComponentGenerator;
+exports.reactNativeComponentGeneratorInternal = reactNativeComponentGeneratorInternal;
 function createComponentFiles(host, options) {
-    const componentDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), componentDir, {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
         ...options,
         tmpl: '',
     });
@@ -44,9 +50,15 @@ function addExportsToBarrel(host, options) {
         const indexSource = host.read(indexFilePath, 'utf-8');
         if (indexSource !== null) {
             const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, add_import_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
+            const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
+            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, add_import_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
             host.write(indexFilePath, changes);
         }
     }
 }
+function getRelativeImportToFile(indexPath, filePath) {
+    const { name, dir } = (0, path_1.parse)(filePath);
+    const relativeDirToTarget = (0, path_1.relative)((0, path_1.dirname)(indexPath), dir);
+    return `./${(0, devkit_1.joinPathFragments)(relativeDirToTarget, name)}`;
+}
 exports.default = reactNativeComponentGenerator;

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

@@ -4,5 +4,6 @@ export interface NormalizedSchema extends Schema {
     projectSourceRoot: string;
     fileName: string;
     className: string;
+    filePath: string;
 }
 export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -2,17 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
 const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 async function normalizeOptions(host, options) {
     assertValidOptions(options);
-    const { className, fileName } = (0, devkit_1.names)(options.name);
-    const componentFileName = options.pascalCaseFiles ? className : fileName;
-    const project = (0, devkit_1.getProjects)(host).get(options.project);
-    if (!project) {
-        devkit_1.logger.error(`Cannot find the ${options.project} project. Please double check the project name.`);
-        throw new Error();
-    }
+    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        artifactType: 'component',
+        callingGenerator: '@nx/react-native:component',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.directory,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+        pascalCaseFile: options.pascalCaseFiles,
+    });
+    const project = (0, devkit_1.getProjects)(host).get(projectName);
+    const { className } = (0, devkit_1.names)(name);
     const { sourceRoot: projectSourceRoot, projectType } = project;
-    const directory = await getDirectory(host, options);
     if (options.export && projectType === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
@@ -21,26 +28,12 @@ async function normalizeOptions(host, options) {
         ...options,
         directory,
         className,
-        fileName: componentFileName,
+        fileName,
+        filePath,
         projectSourceRoot,
     };
 }
 exports.normalizeOptions = normalizeOptions;
-async function getDirectory(host, options) {
-    const fileName = (0, devkit_1.names)(options.name).fileName;
-    const workspace = (0, devkit_1.getProjects)(host);
-    let baseDir;
-    if (options.directory) {
-        baseDir = options.directory;
-    }
-    else {
-        baseDir =
-            workspace.get(options.project).projectType === 'application'
-                ? 'app'
-                : 'lib';
-    }
-    return options.flat ? baseDir : (0, devkit_1.joinPathFragments)(baseDir, fileName);
-}
 function assertValidOptions(options) {
     const slashes = ['/', '\\'];
     slashes.forEach((s) => {

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

@@ -3,12 +3,22 @@
  */
 export interface Schema {
   name: string;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   */
   project: string;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   js?: boolean;
+  /**
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   flat?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
 }

package/src/generators/component/schema.json

@@ -23,7 +23,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-prompt": "What is the name of the project for this component?"
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
     },
     "name": {
       "type": "string",
@@ -46,13 +46,19 @@
     },
     "directory": {
       "type": "string",
-      "description": "Create the component under this directory (can be nested).",
+      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
       "x-priority": "important"
     },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
     "flat": {
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "export": {
       "type": "boolean",
@@ -65,7 +71,8 @@
       "type": "boolean",
       "description": "Use pascal case component file name (e.g. `App.tsx`).",
       "alias": "P",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "classComponent": {
       "type": "boolean",
@@ -74,5 +81,5 @@
       "default": false
     }
   },
-  "required": ["name", "project"]
+  "required": ["name"]
 }

package/src/generators/component-story/component-story.spec.ts

@@ -1,7 +1,7 @@
 import { getProjects, Tree, updateProjectConfiguration } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import componentStoryGenerator from './component-story';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 
 import { formatFile } from '../../utils/format-file';
 import libraryGenerator from '../library/library';
@@ -75,9 +75,9 @@ describe('react-native:component-story', () => {
         appTree.write(
           'test-ui-lib/src/lib/test-ui-libplain.jsx',
           `import React from 'react';
-  
+
           import './test.scss';
-          
+
           export const Test = () => {
             return (
               <div>
@@ -85,8 +85,8 @@ describe('react-native:component-story', () => {
               </div>
             );
           };
-          
-          export default Test;        
+
+          export default Test;
           `
         );
 
@@ -117,7 +117,7 @@ describe('react-native:component-story', () => {
           `import React from 'react';
 
           import { View, Text } from 'react-native';
-          
+
           export function Test() {
             return (
               <View>
@@ -125,8 +125,8 @@ describe('react-native:component-story', () => {
               </View>
             );
           }
-          
-          export default Test;   
+
+          export default Test;
           `
         );
         await componentStoryGenerator(appTree, {
@@ -178,14 +178,14 @@ describe('react-native:component-story', () => {
           `import React from 'react';
 
           export type ButtonStyle = 'default' | 'primary' | 'warning';
-          
+
           export interface TestProps {
             name: string;
             displayAge: boolean;
             someAction: (e: unknown) => void;
             style: ButtonStyle;
           }
-          
+
           export const Test = (props: TestProps) => {
             return (
               <div>
@@ -194,8 +194,8 @@ describe('react-native:component-story', () => {
               </div>
             );
           };
-          
-          export default Test;        
+
+          export default Test;
           `
         );
 
@@ -337,12 +337,12 @@ describe('react-native:component-story', () => {
           appTree.write(
             cmpPath,
             `import React from 'react';
-            
+
             export interface TestProps {
               name: string;
               displayAge: boolean;
             }
-            
+
             ${config.src}
             `
           );

package/src/generators/library/library.spec.ts

@@ -6,7 +6,7 @@ import {
 } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import libraryGenerator from './library';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { Schema } from './schema';
 
 describe('lib', () => {
@@ -34,7 +34,7 @@ describe('lib', () => {
       expect(projectConfiguration.root).toEqual('my-lib');
       expect(projectConfiguration.targets.build).toBeUndefined();
       expect(projectConfiguration.targets.lint).toEqual({
-        executor: '@nx/linter:eslint',
+        executor: '@nx/eslint:lint',
         outputs: ['{options.outputFile}'],
         options: {
           lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx}'],
@@ -155,7 +155,7 @@ describe('lib', () => {
 
       expect(projectConfiguration.root).toEqual('my-dir');
       expect(projectConfiguration.targets.lint).toEqual({
-        executor: '@nx/linter:eslint',
+        executor: '@nx/eslint:lint',
         outputs: ['{options.outputFile}'],
         options: {
           lintFilePatterns: ['my-dir/**/*.{ts,tsx,js,jsx}'],
@@ -225,7 +225,7 @@ describe('lib', () => {
       const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
       expect(projectConfiguration.targets.test).toBeUndefined();
       expect(projectConfiguration.targets.lint).toMatchObject({
-        executor: '@nx/linter:eslint',
+        executor: '@nx/eslint:lint',
         options: {
           lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx}'],
         },

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/linter';
+import type { Linter } from '@nx/eslint';
 
 /**
  * Same as the @nx/react library schema, except it removes keys: style, component, routing, appProject

package/src/generators/stories/stories-app.spec.ts

@@ -2,7 +2,7 @@ import { Tree } from '@nx/devkit';
 import storiesGenerator from './stories';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import applicationGenerator from '../application/application';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { reactNativeComponentGenerator } from '../component/component';
 
 describe('react:stories for applications', () => {

package/src/generators/stories/stories-lib.spec.ts

@@ -2,7 +2,7 @@ import { Tree } from '@nx/devkit';
 import storiesGenerator from './stories';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import applicationGenerator from '../application/application';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import libraryGenerator from '../library/library';
 import reactNativeComponentGenerator from '../component/component';
 

package/src/generators/storybook-configuration/configuration.spec.ts

@@ -1,6 +1,6 @@
 import { Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { logger } from '@nx/devkit';
 
 import libraryGenerator from '../library/library';

package/src/generators/storybook-configuration/schema.d.ts

@@ -1,4 +1,4 @@
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 
 export interface StorybookConfigureSchema {
   name: string;

package/src/generators/upgrade-native/schema.d.ts

@@ -1,4 +1,4 @@
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 
 export interface UpgradeNativeConfigureSchema {
   name: string;

package/src/utils/add-linting.d.ts

@@ -1,4 +1,4 @@
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { GeneratorCallback, Tree } from '@nx/devkit';
 interface NormalizedSchema {
     linter?: Linter;

package/src/utils/add-linting.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = void 0;
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 const devkit_1 = require("@nx/devkit");
 const lint_1 = require("@nx/react/src/utils/lint");
-const eslint_file_1 = require("@nx/linter/src/generators/utils/eslint-file");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 async function addLinting(host, options) {
-    if (options.linter === linter_1.Linter.None) {
+    if (options.linter === eslint_1.Linter.None) {
         return () => { };
     }
     const tasks = [];
-    const lintTask = await (0, linter_1.lintProjectGenerator)(host, {
+    const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
         linter: options.linter,
         project: options.projectName,
         tsConfigPaths: options.tsConfigPaths,

package/src/utils/add-linting.spec.ts

@@ -1,6 +1,6 @@
 import { readProjectConfiguration, Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 import { libraryGenerator } from '@nx/js';
 import { addLinting } from './add-linting';
 
@@ -25,7 +25,7 @@ describe('Add Linting', () => {
     const project = readProjectConfiguration(tree, 'my-lib');
 
     expect(project.targets.lint).toBeDefined();
-    expect(project.targets.lint.executor).toEqual('@nx/linter:eslint');
+    expect(project.targets.lint.executor).toEqual('@nx/eslint:lint');
   });
 
   it('should not add lint target when "none" is passed', async () => {

package/src/utils/testing-generators.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLib = exports.createApp = void 0;
 const devkit_1 = require("@nx/devkit");
 const application_1 = require("../generators/application/application");
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 async function createApp(tree, appName) {
     await (0, application_1.default)(tree, {
-        linter: linter_1.Linter.EsLint,
+        linter: eslint_1.Linter.EsLint,
         skipFormat: true,
         style: 'css',
         unitTestRunner: 'none',