@nx/react-native 17.0.2 → 17.0.4

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

@@ -2,6 +2,7 @@ import { Tree } from '@nx/devkit';
 import { Schema } from '../schema';
 export interface NormalizedSchema extends Schema {
     className: string;
+    fileName: string;
     projectName: string;
     appProjectRoot: string;
     lowerCaseName: string;
@@ -9,5 +10,11 @@ export interface NormalizedSchema extends Schema {
     androidProjectRoot: string;
     parsedTags: string[];
     entryFile: string;
+    rootProject: boolean;
+    e2eProjectName: string;
+    e2eProjectRoot: string;
+    e2eWebServerAddress: string;
+    e2eWebServerTarget: string;
+    e2ePort: number;
 }
 export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -12,19 +12,45 @@ async function normalizeOptions(host, options) {
         callingGenerator: '@nx/react-native:application',
     });
     options.projectNameAndRootFormat = projectNameAndRootFormat;
-    const { className } = (0, devkit_1.names)(options.name);
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPluginDefault;
+    const { className, fileName } = (0, devkit_1.names)(options.name);
     const iosProjectRoot = (0, devkit_1.joinPathFragments)(appProjectRoot, 'ios');
     const androidProjectRoot = (0, devkit_1.joinPathFragments)(appProjectRoot, 'android');
+    const rootProject = appProjectRoot === '.';
+    let e2eWebServerTarget = 'start';
+    if (options.addPlugin) {
+        if (nxJson.plugins) {
+            for (const plugin of nxJson.plugins) {
+                if (options.bundler === 'vite' &&
+                    typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/react-native/plugin' &&
+                    plugin.options.startTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .startTargetName;
+                }
+            }
+        }
+    }
+    let e2ePort = 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        nxJson.targetDefaults?.[e2eWebServerTarget].options?.port) {
+        e2ePort = nxJson.targetDefaults?.[e2eWebServerTarget].options?.port;
+    }
+    const e2eProjectName = rootProject ? 'e2e' : `${fileName}-e2e`;
+    const e2eProjectRoot = rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
     const entryFile = options.js ? 'src/main.js' : 'src/main.tsx';
     return {
         ...options,
-        unitTestRunner: options.unitTestRunner || 'jest',
-        e2eTestRunner: options.e2eTestRunner || 'detox',
         name: projectNames.projectSimpleName,
         className,
+        fileName,
         lowerCaseName: className.toLowerCase(),
         displayName: options.displayName || className,
         projectName: appProjectName,
@@ -33,6 +59,12 @@ async function normalizeOptions(host, options) {
         androidProjectRoot,
         parsedTags,
         entryFile,
+        rootProject,
+        e2eProjectName,
+        e2eProjectRoot,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
     };
 }
 exports.normalizeOptions = normalizeOptions;

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

@@ -18,11 +18,15 @@ describe('Normalize Options', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      unitTestRunner: 'none',
+      bundler: 'vite',
     };
     const options = await normalizeOptions(appTree, schema);
     expect(options).toEqual({
+      addPlugin: true,
       androidProjectRoot: 'my-app/android',
       appProjectRoot: 'my-app',
+      fileName: 'my-app',
       className: 'MyApp',
       displayName: 'MyApp',
       iosProjectRoot: 'my-app/ios',
@@ -34,8 +38,15 @@ describe('Normalize Options', () => {
       linter: Linter.EsLint,
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'jest',
+      unitTestRunner: 'none',
       install: false,
+      bundler: 'vite',
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'my-app-e2e',
+      e2ePort: 4200,
+      e2eWebServerAddress: 'http://localhost:4200',
+      e2eWebServerTarget: 'start',
     });
   });
 
@@ -45,12 +56,17 @@ describe('Normalize Options', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      linter: Linter.None,
+      unitTestRunner: 'none',
+      bundler: 'vite',
     };
     const options = await normalizeOptions(appTree, schema);
     expect(options).toEqual({
+      addPlugin: true,
       androidProjectRoot: 'myApp/android',
       appProjectRoot: 'myApp',
       className: 'MyApp',
+      fileName: 'my-app',
       displayName: 'MyApp',
       iosProjectRoot: 'myApp/ios',
       lowerCaseName: 'myapp',
@@ -60,8 +76,16 @@ describe('Normalize Options', () => {
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'jest',
+      unitTestRunner: 'none',
       install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'myApp-e2e',
+      e2ePort: 4200,
+      e2eWebServerAddress: 'http://localhost:4200',
+      e2eWebServerTarget: 'start',
     });
   });
 
@@ -72,12 +96,17 @@ describe('Normalize Options', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      linter: Linter.None,
+      unitTestRunner: 'none',
+      bundler: 'vite',
     };
     const options = await normalizeOptions(appTree, schema);
     expect(options).toEqual({
+      addPlugin: true,
       androidProjectRoot: 'directory/my-app/android',
       appProjectRoot: 'directory/my-app',
       className: 'MyApp',
+      fileName: 'my-app',
       displayName: 'MyApp',
       iosProjectRoot: 'directory/my-app/ios',
       lowerCaseName: 'myapp',
@@ -88,8 +117,16 @@ describe('Normalize Options', () => {
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'jest',
+      unitTestRunner: 'none',
       install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'directory/my-app-e2e',
+      e2ePort: 4200,
+      e2eWebServerAddress: 'http://localhost:4200',
+      e2eWebServerTarget: 'start',
     });
   });
 
@@ -99,23 +136,36 @@ describe('Normalize Options', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      linter: Linter.None,
+      unitTestRunner: 'none',
+      bundler: 'vite',
     };
     const options = await normalizeOptions(appTree, schema);
     expect(options).toEqual({
+      addPlugin: true,
       androidProjectRoot: 'directory/my-app/android',
       appProjectRoot: 'directory/my-app',
       className: 'DirectoryMyApp',
+      fileName: 'directory/my-app',
       displayName: 'DirectoryMyApp',
       iosProjectRoot: 'directory/my-app/ios',
       lowerCaseName: 'directorymyapp',
-      name: 'directory/my-app',
+      name: 'my-app',
       parsedTags: [],
-      projectName: 'directory/my-app',
+      projectName: 'my-app',
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'jest',
+      unitTestRunner: 'none',
       install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'directory/my-app-e2e',
+      e2eProjectRoot: 'directory/my-app-e2e',
+      e2ePort: 4200,
+      e2eWebServerAddress: 'http://localhost:4200',
+      e2eWebServerTarget: 'start',
     });
   });
 
@@ -126,12 +176,17 @@ describe('Normalize Options', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      linter: Linter.None,
+      unitTestRunner: 'none',
+      bundler: 'vite',
     };
     const options = await normalizeOptions(appTree, schema);
     expect(options).toEqual({
+      addPlugin: true,
       androidProjectRoot: 'my-app/android',
       appProjectRoot: 'my-app',
       className: 'MyApp',
+      fileName: 'my-app',
       displayName: 'My App',
       iosProjectRoot: 'my-app/ios',
       lowerCaseName: 'myapp',
@@ -141,8 +196,16 @@ describe('Normalize Options', () => {
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'jest',
+      unitTestRunner: 'none',
       install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'my-app-e2e',
+      e2ePort: 4200,
+      e2eWebServerAddress: 'http://localhost:4200',
+      e2eWebServerTarget: 'start',
     });
   });
 });

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

@@ -9,13 +9,15 @@ export interface Schema {
   directory?: string;
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   tags?: string;
-  unitTestRunner?: 'jest' | 'none';
+  unitTestRunner: 'jest' | 'none'; // default is jest
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   js?: boolean;
-  linter?: Linter;
+  linter: Linter;
   setParserOptionsProject?: boolean;
-  e2eTestRunner?: 'detox' | 'none';
+  e2eTestRunner: 'cypress' | 'playwright' | 'detox' | 'none'; // default is cypress
+  bundler: 'webpack' | 'vite'; // default is webpack
   install: boolean; // default is true
   skipPackageJson?: boolean; //default is false
+  addPlugin?: boolean;
 }

package/src/generators/application/schema.json

@@ -1,7 +1,7 @@
 {
   "cli": "nx",
   "$id": "NxReactNativeApplication",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Create a React Application for Nx",
   "description": "Create a React Application for Nx.",
   "examples": [
@@ -48,7 +48,7 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": ["eslint"],
+      "enum": ["eslint", "none"],
       "default": "eslint"
     },
     "unitTestRunner": {
@@ -75,20 +75,28 @@
     "e2eTestRunner": {
       "description": "Adds the specified e2e test runner.",
       "type": "string",
-      "enum": ["detox", "none"],
-      "default": "detox"
+      "enum": ["cypress", "playwright", "detox", "none"],
+      "default": "cypress"
     },
     "install": {
       "type": "boolean",
       "description": "Runs `pod install` for native modules before building iOS app.",
-      "default": true,
-      "x-priority": "internal"
+      "x-prompt": "Run 'pod install' for native modules?",
+      "default": true
     },
     "skipPackageJson": {
       "description": "Do not add dependencies to `package.json`.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "webpack",
+      "x-priority": "important"
     }
   },
   "required": []

package/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -26,7 +26,7 @@ export function <%= className %>(props: <%= className %>Props) {
       <Text>Welcome to <%= name %>!</Text>
     </View>
   );
-};
+}
 <% } %>
 
 export default <%= className %>;

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

@@ -4,20 +4,20 @@
 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.
+   * @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 v19.
    */
   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.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   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.
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   flat?: boolean;
   nameAndDirectoryFormat?: 'as-provided' | 'derived';

package/src/generators/component/schema.json

@@ -1,7 +1,7 @@
 {
   "cli": "nx",
   "$id": "NxReactNativeApplication",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Create a React Native Component for Nx",
   "description": "Create a React native Component for Nx.",
   "type": "object",
@@ -23,7 +23,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "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."
+      "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 v19."
     },
     "name": {
       "type": "string",
@@ -58,7 +58,7 @@
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "export": {
       "type": "boolean",
@@ -72,7 +72,7 @@
       "description": "Use pascal case component file name (e.g. `App.tsx`).",
       "alias": "P",
       "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "classComponent": {
       "type": "boolean",

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

@@ -1,11 +1,8 @@
 import { Tree } from '@nx/devkit';
-import type * as ts from 'typescript';
-export interface CreateComponentStoriesFileSchema {
-    project: string;
-    componentPath: string;
-    skipFormat?: boolean;
-}
-export declare function createComponentStoriesFile(host: Tree, { project, componentPath }: CreateComponentStoriesFileSchema): void;
-export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, isPlainJs: boolean, fileExt: string, fromNodeArray?: boolean): void;
+import { CreateComponentStoriesFileSchema } from './schema';
+/**
+ * @deprecated This would be a direct pass through to @nx/react:component-story generator.
+ * TODO (@xiongemi): remove this generator for v19
+ */
 export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
 export default componentStoryGenerator;

package/src/generators/component-story/component-story.js

@@ -1,76 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentStoryGenerator = exports.findPropsAndGenerateFile = exports.createComponentStoriesFile = void 0;
+exports.componentStoryGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const ast_utils_1 = require("@nx/react/src/utils/ast-utils");
-const component_props_1 = require("@nx/react/src/utils/component-props");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-let tsModule;
-function createComponentStoriesFile(host, { project, componentPath }) {
-    if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
-    }
-    const proj = (0, devkit_1.getProjects)(host).get(project);
-    const sourceRoot = proj.sourceRoot;
-    const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
-    const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
-    const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
-    let fileExt = 'tsx';
-    if (componentFilePath.endsWith('.jsx')) {
-        fileExt = 'jsx';
-    }
-    else if (componentFilePath.endsWith('.js')) {
-        fileExt = 'js';
-    }
-    const componentFileName = componentFilePath
-        .slice(componentFilePath.lastIndexOf('/') + 1)
-        .replace('.tsx', '')
-        .replace('.jsx', '')
-        .replace('.js', '');
-    const name = componentFileName;
-    const contents = host.read(componentFilePath, 'utf-8');
-    if (contents === null) {
-        throw new Error(`Failed to read ${componentFilePath}`);
-    }
-    const sourceFile = tsModule.createSourceFile(componentFilePath, contents, tsModule.ScriptTarget.Latest, true);
-    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
-    if (!cmpDeclaration) {
-        const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
-        if (componentNodes?.length) {
-            componentNodes.forEach((declaration) => {
-                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, isPlainJs, fileExt, componentNodes.length > 1);
-            });
-        }
-        else {
-            throw new Error(`Could not find any React Native component in file ${componentFilePath}`);
-        }
-    }
-    else {
-        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, isPlainJs, fileExt);
-    }
-}
-exports.createComponentStoriesFile = createComponentStoriesFile;
-function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, isPlainJs, fileExt, fromNodeArray) {
-    const { propsTypeName, props, argTypes } = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmpDeclaration);
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), (0, devkit_1.normalizePath)(componentDirectory), {
-        componentFileName: fromNodeArray
-            ? `${name}--${cmpDeclaration.name.text}`
-            : name,
-        componentImportFileName: name,
-        propsTypeName,
-        props,
-        argTypes,
-        componentName: cmpDeclaration.name.text,
-        isPlainJs,
-        fileExt,
-    });
-}
-exports.findPropsAndGenerateFile = findPropsAndGenerateFile;
+const react_1 = require("@nx/react");
+/**
+ * @deprecated This would be a direct pass through to @nx/react:component-story generator.
+ * TODO (@xiongemi): remove this generator for v19
+ */
 async function componentStoryGenerator(host, schema) {
-    createComponentStoriesFile(host, schema);
-    if (!schema.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
-    }
+    devkit_1.logger.warn(`Please run 'nx run @nx/react:component-story ${schema.project}' instead.`);
+    return (0, react_1.componentStoryGenerator)(host, schema);
 }
 exports.componentStoryGenerator = componentStoryGenerator;
 exports.default = componentStoryGenerator;

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

@@ -1,5 +1,6 @@
 export interface CreateComponentStoriesFileSchema {
   project: string;
   componentPath: string;
+  interactionTests?: boolean;
   skipFormat?: boolean;
 }

package/src/generators/component-story/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactNativeComponentStory",
   "title": "React native component story",
@@ -15,19 +15,27 @@
         "$source": "projectName",
         "index": 0
       },
-      "x-prompt": "What's the name of the project where the component lives?"
+      "x-prompt": "What's name of the project where the component lives?",
+      "x-priority": "important"
     },
     "componentPath": {
       "type": "string",
       "description": "Relative path to the component file from the library root.",
       "examples": ["lib/components"],
-      "x-prompt": "What's path of the component relative to the project's lib root?"
+      "x-prompt": "What's path of the component relative to the project's lib root?",
+      "x-priority": "important"
     },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "default": true,
+      "x-priority": "important"
     }
   },
   "required": ["project", "componentPath"]

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

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