@nx/react-native 17.0.5 → 17.0.6

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

@@ -18,15 +18,11 @@ 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',
@@ -38,15 +34,8 @@ describe('Normalize Options', () => {
       linter: Linter.EsLint,
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'none',
+      unitTestRunner: 'jest',
       install: false,
-      bundler: 'vite',
-      rootProject: false,
-      e2eProjectName: 'my-app-e2e',
-      e2eProjectRoot: 'my-app-e2e',
-      e2ePort: 4200,
-      e2eWebServerAddress: 'http://localhost:4200',
-      e2eWebServerTarget: 'start',
     });
   });
 
@@ -56,17 +45,12 @@ 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',
@@ -76,16 +60,8 @@ describe('Normalize Options', () => {
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'none',
+      unitTestRunner: 'jest',
       install: false,
-      bundler: 'vite',
-      linter: Linter.None,
-      rootProject: false,
-      e2eProjectName: 'my-app-e2e',
-      e2eProjectRoot: 'myApp-e2e',
-      e2ePort: 4200,
-      e2eWebServerAddress: 'http://localhost:4200',
-      e2eWebServerTarget: 'start',
     });
   });
 
@@ -96,17 +72,12 @@ 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',
@@ -117,16 +88,8 @@ describe('Normalize Options', () => {
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'none',
+      unitTestRunner: 'jest',
       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',
     });
   });
 
@@ -136,36 +99,23 @@ 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: 'my-app',
+      name: 'directory/my-app',
       parsedTags: [],
-      projectName: 'my-app',
+      projectName: 'directory/my-app',
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'none',
+      unitTestRunner: 'jest',
       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',
     });
   });
 
@@ -176,17 +126,12 @@ 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',
@@ -196,16 +141,8 @@ describe('Normalize Options', () => {
       projectNameAndRootFormat: 'as-provided',
       entryFile: 'src/main.tsx',
       e2eTestRunner: 'none',
-      unitTestRunner: 'none',
+      unitTestRunner: 'jest',
       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,15 +9,13 @@ export interface Schema {
   directory?: string;
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   tags?: string;
-  unitTestRunner: 'jest' | 'none'; // default is jest
+  unitTestRunner?: 'jest' | 'none';
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   js?: boolean;
-  linter: Linter;
+  linter?: Linter;
   setParserOptionsProject?: boolean;
-  e2eTestRunner: 'cypress' | 'playwright' | 'detox' | 'none'; // default is cypress
-  bundler: 'webpack' | 'vite'; // default is webpack
+  e2eTestRunner?: 'detox' | 'none';
   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": "https://json-schema.org/schema",
+  "$schema": "http://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", "none"],
+      "enum": ["eslint"],
       "default": "eslint"
     },
     "unitTestRunner": {
@@ -75,28 +75,20 @@
     "e2eTestRunner": {
       "description": "Adds the specified e2e test runner.",
       "type": "string",
-      "enum": ["cypress", "playwright", "detox", "none"],
-      "default": "cypress"
+      "enum": ["detox", "none"],
+      "default": "detox"
     },
     "install": {
       "type": "boolean",
       "description": "Runs `pod install` for native modules before building iOS app.",
-      "x-prompt": "Run 'pod install' for native modules?",
-      "default": true
+      "default": true,
+      "x-priority": "internal"
     },
     "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 v19.
+   * @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 v19.
+   * @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 v19.
+   * @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

@@ -1,7 +1,7 @@
 {
   "cli": "nx",
   "$id": "NxReactNativeApplication",
-  "$schema": "https://json-schema.org/schema",
+  "$schema": "http://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 v19."
+      "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",
@@ -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 v19."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "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 v19."
+      "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",

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

@@ -1,8 +1,11 @@
 import { Tree } from '@nx/devkit';
-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
- */
+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;
 export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
 export default componentStoryGenerator;

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

@@ -1,15 +1,76 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentStoryGenerator = void 0;
+exports.componentStoryGenerator = exports.findPropsAndGenerateFile = exports.createComponentStoriesFile = void 0;
 const devkit_1 = require("@nx/devkit");
-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
- */
+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;
 async function componentStoryGenerator(host, schema) {
-    devkit_1.logger.warn(`Please run 'nx run @nx/react:component-story ${schema.project}' instead.`);
-    return (0, react_1.componentStoryGenerator)(host, schema);
+    createComponentStoriesFile(host, schema);
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
 }
 exports.componentStoryGenerator = componentStoryGenerator;
 exports.default = componentStoryGenerator;