@nx/react-native 17.0.5 → 17.0.6

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

@@ -1,7 +1,7 @@
 export interface Schema {
+  unitTestRunner?: 'jest' | 'none';
   skipFormat?: boolean;
+  e2eTestRunner?: 'detox' | 'none';
   skipPackageJson?: boolean; //default is false
-  keepExistingVersions?: boolean; //default is false
-  updatePackageScripts?: boolean;
-  addPlugin?: boolean;
+  js?: boolean;
 }

package/src/generators/init/schema.json

@@ -1,34 +1,39 @@
 {
   "cli": "nx",
   "$id": "NxReactNativeInit",
-  "$schema": "https://json-schema.org/schema",
+  "$schema": "http://json-schema.org/schema",
   "title": "Add Nx React Native Schematics",
   "description": "Add Nx React native schematics.",
   "type": "object",
   "properties": {
+    "unitTestRunner": {
+      "description": "Adds the specified unit test runner.",
+      "type": "string",
+      "enum": ["jest", "none"],
+      "default": "jest"
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
     },
+    "e2eTestRunner": {
+      "description": "Adds the specified E2E test runner.",
+      "type": "string",
+      "enum": ["detox", "none"],
+      "default": "detox"
+    },
+    "js": {
+      "type": "boolean",
+      "default": false,
+      "description": "Use JavaScript instead of TypeScript"
+    },
     "skipPackageJson": {
       "description": "Do not add dependencies to `package.json`.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
-    },
-    "keepExistingVersions": {
-      "type": "boolean",
-      "x-priority": "internal",
-      "description": "Keep existing dependencies versions",
-      "default": false
-    },
-    "updatePackageScripts": {
-      "type": "boolean",
-      "x-priority": "internal",
-      "description": "Update `package.json` scripts with inferred targets",
-      "default": false
     }
   },
   "required": []

package/src/generators/library/files/lib/babel.config.json.template

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [],
+  "env": {
+    "test": {
+      "presets": ["module:metro-react-native-babel-preset"]
+    }
+  }
+}

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
-const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 async function normalizeOptions(host, options) {
     const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
@@ -12,10 +11,6 @@ async function normalizeOptions(host, options) {
         projectNameAndRootFormat: options.projectNameAndRootFormat,
         callingGenerator: '@nx/react-native:library',
     });
-    const nxJson = (0, devkit_1.readNxJson)(host);
-    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
-        nxJson.useInferencePlugins !== false;
-    options.addPlugin ??= addPluginDefault;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];

package/src/generators/library/library.js

@@ -8,11 +8,8 @@ const add_linting_1 = require("../../utils/add-linting");
 const add_jest_1 = require("../../utils/add-jest");
 const versions_1 = require("../../utils/versions");
 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");
 async function reactNativeLibraryGenerator(host, schema) {
     return await reactNativeLibraryGeneratorInternal(host, {
-        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -24,16 +21,12 @@ async function reactNativeLibraryGeneratorInternal(host, schema) {
         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,
+    const initTask = await (0, init_1.default)(host, {
+        ...options,
         skipFormat: true,
+        e2eTestRunner: 'none',
     });
-    tasks.push(jsInitTask);
-    const initTask = await (0, init_1.default)(host, { ...options, skipFormat: true });
     tasks.push(initTask);
-    if (!options.skipPackageJson) {
-        tasks.push((0, ensure_dependencies_1.ensureDependencies)(host));
-    }
     const addProjectTask = await addProject(host, options);
     if (addProjectTask) {
         tasks.push(addProjectTask);
@@ -47,7 +40,7 @@ async function reactNativeLibraryGeneratorInternal(host, schema) {
         ],
     });
     tasks.push(lintTask);
-    const jestTask = await (0, add_jest_1.addJest)(host, options.unitTestRunner, options.name, options.projectRoot, options.js, options.skipPackageJson, options.addPlugin);
+    const jestTask = await (0, add_jest_1.addJest)(host, options.unitTestRunner, options.name, options.projectRoot, options.js, options.skipPackageJson);
     tasks.push(jestTask);
     if (options.publishable || options.buildable) {
         updateLibPackageNpmScope(host, options);
@@ -60,52 +53,49 @@ async function reactNativeLibraryGeneratorInternal(host, schema) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
-    tasks.push(() => {
-        (0, log_show_project_command_1.logShowProjectCommand)(options.name);
-    });
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.reactNativeLibraryGeneratorInternal = reactNativeLibraryGeneratorInternal;
 async function addProject(host, options) {
-    const project = {
+    const targets = {};
+    let task;
+    if (options.publishable || options.buildable) {
+        const { rollupInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
+        const external = [
+            'react/jsx-runtime',
+            'react-native',
+            'react',
+            'react-dom',
+        ];
+        targets.build = {
+            executor: '@nx/rollup:rollup',
+            outputs: ['{options.outputPath}'],
+            options: {
+                outputPath: `dist/${options.projectRoot}`,
+                tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
+                project: `${options.projectRoot}/package.json`,
+                entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),
+                external,
+                rollupConfig: `@nx/react/plugins/bundle-rollup`,
+                assets: [
+                    {
+                        glob: `${options.projectRoot}/README.md`,
+                        input: '.',
+                        output: '.',
+                    },
+                ],
+            },
+        };
+        task = await rollupInitGenerator(host, { ...options, skipFormat: true });
+    }
+    (0, devkit_1.addProjectConfiguration)(host, options.name, {
         root: options.projectRoot,
         sourceRoot: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src'),
         projectType: 'library',
         tags: options.parsedTags,
-        targets: {},
-    };
-    (0, devkit_1.addProjectConfiguration)(host, options.name, project);
-    if (!options.publishable && !options.buildable) {
-        return () => { };
-    }
-    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
-    const rollupConfigTask = await configurationGenerator(host, {
-        ...options,
-        project: options.name,
-        skipFormat: true,
+        targets,
     });
-    const external = ['react/jsx-runtime', 'react-native', 'react', 'react-dom'];
-    project.targets.build = {
-        executor: '@nx/rollup:rollup',
-        outputs: ['{options.outputPath}'],
-        options: {
-            outputPath: `dist/${options.projectRoot}`,
-            tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
-            project: `${options.projectRoot}/package.json`,
-            entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),
-            external,
-            rollupConfig: `@nx/react/plugins/bundle-rollup`,
-            assets: [
-                {
-                    glob: `${options.projectRoot}/README.md`,
-                    input: '.',
-                    output: '.',
-                },
-            ],
-        },
-    };
-    (0, devkit_1.updateProjectConfiguration)(host, options.name, project);
-    return rollupConfigTask;
+    return task;
 }
 function updateTsConfig(tree, options) {
     (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.projectRoot, 'tsconfig.json'), (json) => {

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

@@ -20,7 +20,6 @@ describe('lib', () => {
     unitTestRunner: 'jest',
     strict: true,
     projectNameAndRootFormat: 'as-provided',
-    addPlugin: true,
   };
 
   beforeEach(() => {
@@ -29,6 +28,21 @@ describe('lib', () => {
   });
 
   describe('not nested', () => {
+    it('should update project.json', async () => {
+      await libraryGenerator(appTree, { ...defaultSchema, tags: 'one,two' });
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+      expect(projectConfiguration.root).toEqual('my-lib');
+      expect(projectConfiguration.targets.build).toBeUndefined();
+      expect(projectConfiguration.targets.lint).toEqual({
+        executor: '@nx/eslint:lint',
+        outputs: ['{options.outputFile}'],
+        options: {
+          lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx}'],
+        },
+      });
+      expect(projectConfiguration.tags).toEqual(['one', 'two']);
+    });
+
     it('should update root tsconfig.base.json', async () => {
       await libraryGenerator(appTree, defaultSchema);
       const tsconfigJson = readJson(appTree, '/tsconfig.base.json');
@@ -135,6 +149,23 @@ describe('lib', () => {
       });
     });
 
+    it('should update project.json', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        directory: 'my-dir',
+      });
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+
+      expect(projectConfiguration.root).toEqual('my-dir');
+      expect(projectConfiguration.targets.lint).toEqual({
+        executor: '@nx/eslint:lint',
+        outputs: ['{options.outputFile}'],
+        options: {
+          lintFilePatterns: ['my-dir/**/*.{ts,tsx,js,jsx}'],
+        },
+      });
+    });
+
     it('should update root tsconfig.base.json', async () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
@@ -206,6 +237,15 @@ describe('lib', () => {
 
       expect(appTree.exists('my-lib/tsconfig.spec.json')).toBeFalsy();
       expect(appTree.exists('my-lib/jest.config.ts')).toBeFalsy();
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+      expect(projectConfiguration.targets.test).toBeUndefined();
+      expect(projectConfiguration.targets.lint).toMatchObject({
+        executor: '@nx/eslint:lint',
+        options: {
+          lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx}'],
+        },
+        outputs: ['{options.outputFile}'],
+      });
     });
 
     it('should generate test configuration', async () => {
@@ -249,21 +289,29 @@ describe('lib', () => {
           moduleNameMapper: {
             '\\\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
           },
-          transform: {
-            '^.+.(js|ts|tsx)$': [
-              'babel-jest',
-              {
-                configFile: __dirname + '/.babelrc.js',
-              },
-            ],
-            '^.+.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
-              'react-native/jest/assetFileTransformer.js'
-            ),
-          },
           coverageDirectory: '../coverage/my-lib',
         };
         "
       `);
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+      expect(projectConfiguration.targets.test).toMatchInlineSnapshot(`
+        {
+          "configurations": {
+            "ci": {
+              "ci": true,
+              "codeCoverage": true,
+            },
+          },
+          "executor": "@nx/jest:jest",
+          "options": {
+            "jestConfig": "my-lib/jest.config.ts",
+            "passWithNoTests": true,
+          },
+          "outputs": [
+            "{workspaceRoot}/coverage/{projectRoot}",
+          ],
+        }
+      `);
     });
   });
 

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

@@ -21,5 +21,4 @@ export interface Schema {
   strict?: boolean;
   setParserOptionsProject?: boolean;
   skipPackageJson?: boolean; //default is false
-  addPlugin?: boolean;
 }

package/src/generators/library/schema.json

@@ -1,7 +1,7 @@
 {
   "cli": "nx",
   "$id": "NxReactNativeLibrary",
-  "$schema": "https://json-schema.org/schema",
+  "$schema": "http://json-schema.org/schema",
   "title": "Create a React Native Library for Nx",
   "description": "Create a React Native Library for Nx.",
   "type": "object",
@@ -36,7 +36,7 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": ["eslint", "none"],
+      "enum": ["eslint"],
       "default": "eslint"
     },
     "unitTestRunner": {

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

@@ -1,7 +1,5 @@
 export interface StorybookStoriesSchema {
   project: string;
-  interactionTests?: boolean;
-  js?: boolean;
   ignorePaths?: string[];
   skipFormat?: boolean;
 }

package/src/generators/stories/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://json-schema.org/schema",
+  "$schema": "http://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactNativeStorybookStories",
   "title": "Generate React Native Storybook stories",
@@ -14,20 +14,7 @@
         "$source": "projectName",
         "index": 0
       },
-      "x-prompt": "For which project do you want to generate stories?",
-      "x-priority": "important"
-    },
-    "interactionTests": {
-      "type": "boolean",
-      "description": "Set up Storybook interaction tests.",
-      "x-prompt": "Do you want to set up Storybook interaction tests?",
-      "x-priority": "important",
-      "default": true
-    },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-prompt": "For which project do you want to generate stories?"
     },
     "ignorePaths": {
       "type": "array",

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

@@ -0,0 +1,128 @@
+import { Tree } from '@nx/devkit';
+import storiesGenerator from './stories';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import applicationGenerator from '../application/application';
+import { Linter } from '@nx/eslint';
+import { reactNativeComponentGenerator } from '../component/component';
+
+describe('react:stories for applications', () => {
+  let appTree: Tree;
+
+  beforeEach(async () => {
+    appTree = await createTestUIApp('test-ui-app');
+  });
+
+  it('should create the stories', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'another-cmp',
+      project: 'test-ui-app',
+    });
+    await storiesGenerator(appTree, {
+      project: 'test-ui-app',
+    });
+
+    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
+    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
+    expect(
+      appTree.exists('test-ui-app/src/app/another-cmp/another-cmp.stories.tsx')
+    ).toBeTruthy();
+  });
+
+  it('should ignore paths', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'another-cmp',
+      project: 'test-ui-app',
+    });
+    await storiesGenerator(appTree, {
+      project: 'test-ui-app',
+      ignorePaths: ['test-ui-app/src/app/**'],
+    });
+
+    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
+    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeFalsy();
+    expect(
+      appTree.exists('test-ui-app/src/app/another-cmp/another-cmp.stories.tsx')
+    ).toBeFalsy();
+  });
+
+  it('should ignore paths with a direct path to a component', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'another-new-cmp',
+      project: 'test-ui-app',
+    });
+
+    await storiesGenerator(appTree, {
+      project: 'test-ui-app',
+      ignorePaths: ['test-ui-app/src/app/another-new-cmp/another-new-cmp.tsx'],
+    });
+
+    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
+    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
+    expect(
+      appTree.exists(
+        'test-ui-app/src/app/another-new-cmp/another-new-cmp.stories.tsx'
+      )
+    ).toBeFalsy();
+  });
+
+  it('should ignore a path that has a nested component, but still generate nested component stories', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'another-new-cmp',
+      project: 'test-ui-app',
+    });
+    await reactNativeComponentGenerator(appTree, {
+      name: 'comp-a',
+      directory: 'app/another-new-cmp',
+      project: 'test-ui-app',
+    });
+    await storiesGenerator(appTree, {
+      project: 'test-ui-app',
+      ignorePaths: ['test-ui-app/src/app/another-new-cmp/another-new-cmp.tsx'],
+    });
+
+    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
+    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
+    expect(
+      appTree.exists(
+        'test-ui-app/src/app/another-new-cmp/comp-a/comp-a.stories.tsx'
+      )
+    ).toBeTruthy();
+    expect(
+      appTree.exists(
+        'test-ui-app/src/app/another-new-cmp/another-new-cmp.stories.tsx'
+      )
+    ).toBeFalsy();
+  });
+
+  it('should ignore files that do not contain components', async () => {
+    // create another component
+    appTree.write(
+      'test-ui-app/src/app/some-utils.js',
+      `export const add = (a: number, b: number) => a + b;`
+    );
+
+    await storiesGenerator(appTree, {
+      project: 'test-ui-app',
+    });
+
+    // should just create the story and not error, even though there's a js file
+    // not containing any react component
+    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
+  });
+});
+
+export async function createTestUIApp(libName: string): Promise<Tree> {
+  let appTree = createTreeWithEmptyWorkspace();
+  appTree.write('.gitignore', '');
+
+  await applicationGenerator(appTree, {
+    linter: Linter.EsLint,
+    skipFormat: false,
+    style: 'css',
+    unitTestRunner: 'none',
+    name: libName,
+    install: false,
+    projectNameAndRootFormat: 'as-provided',
+  });
+  return appTree;
+}

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

@@ -0,0 +1,105 @@
+import { Tree } from '@nx/devkit';
+import storiesGenerator from './stories';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import applicationGenerator from '../application/application';
+import { Linter } from '@nx/eslint';
+import libraryGenerator from '../library/library';
+import reactNativeComponentGenerator from '../component/component';
+
+describe('react-native:stories for libraries', () => {
+  let appTree: Tree;
+
+  beforeEach(async () => {
+    appTree = await createTestUILib('test-ui-lib');
+  });
+
+  it('should create the stories', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'test-ui-lib',
+      project: 'test-ui-lib',
+    });
+    await reactNativeComponentGenerator(appTree, {
+      name: 'another-cmp',
+      project: 'test-ui-lib',
+    });
+    await storiesGenerator(appTree, {
+      project: 'test-ui-lib',
+    });
+
+    expect(
+      appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
+    ).toBeTruthy();
+    expect(
+      appTree.exists('test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx')
+    ).toBeTruthy();
+  });
+
+  it('should ignore paths', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'test-ui-lib',
+      project: 'test-ui-lib',
+    });
+    await reactNativeComponentGenerator(appTree, {
+      name: 'another-cmp',
+      project: 'test-ui-lib',
+    });
+    await storiesGenerator(appTree, {
+      project: 'test-ui-lib',
+      ignorePaths: ['test-ui-lib/src/lib/another-cmp/**'],
+    });
+
+    expect(
+      appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
+    ).toBeTruthy();
+    expect(
+      appTree.exists('test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx')
+    ).toBeFalsy();
+  });
+
+  it('should ignore files that do not contain components', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'test-ui-lib',
+      project: 'test-ui-lib',
+    });
+    // create another component
+    appTree.write(
+      'test-ui-lib/src/lib/some-command-line-utils.ts',
+      `export const add = (a: number, b: number) => a + b;`
+    );
+
+    await storiesGenerator(appTree, {
+      project: 'test-ui-lib',
+    });
+
+    // should just create the story and not error, even though there's a js file
+    // not containing any react component
+    expect(
+      appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
+    ).toBeTruthy();
+  });
+});
+
+export async function createTestUILib(libName: string): Promise<Tree> {
+  let appTree = createTreeWithEmptyWorkspace();
+  appTree.write('.gitignore', '');
+
+  await libraryGenerator(appTree, {
+    linter: Linter.EsLint,
+    skipFormat: true,
+    skipTsConfig: false,
+    unitTestRunner: 'none',
+    name: libName,
+    projectNameAndRootFormat: 'as-provided',
+  });
+
+  await applicationGenerator(appTree, {
+    e2eTestRunner: 'none',
+    linter: Linter.EsLint,
+    skipFormat: false,
+    unitTestRunner: 'none',
+    name: `${libName}-e2e`,
+    install: false,
+    projectNameAndRootFormat: 'as-provided',
+  });
+  return appTree;
+}

package/src/generators/stories/stories.d.ts

@@ -1,8 +1,5 @@
 import { Tree } from '@nx/devkit';
 import { StorybookStoriesSchema } from './schema';
-/**
- * @deprecated This would be a direct pass through to @nx/react:stories generator.
- * TODO (@xiongemi): remove this generator for v19
- */
-export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function createAllStories(tree: Tree, projectName: string, ignorePaths?: string[]): Promise<void>;
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
 export default storiesGenerator;