@nx/react-native 0.0.0-pr-22179-271588f

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

@@ -0,0 +1,420 @@
+import {
+  readJson,
+  readProjectConfiguration,
+  Tree,
+  updateJson,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import libraryGenerator from './library';
+import { Linter } from '@nx/eslint';
+import { Schema } from './schema';
+
+describe('lib', () => {
+  let appTree: Tree;
+
+  const defaultSchema: Schema = {
+    name: 'my-lib',
+    linter: Linter.EsLint,
+    skipFormat: false,
+    skipTsConfig: false,
+    unitTestRunner: 'jest',
+    strict: true,
+    projectNameAndRootFormat: 'as-provided',
+    addPlugin: true,
+  };
+
+  beforeEach(() => {
+    appTree = createTreeWithEmptyWorkspace();
+    appTree.write('.gitignore', '');
+  });
+
+  describe('not nested', () => {
+    it('should update root tsconfig.base.json', async () => {
+      await libraryGenerator(appTree, defaultSchema);
+      const tsconfigJson = readJson(appTree, '/tsconfig.base.json');
+      expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
+        'my-lib/src/index.ts',
+      ]);
+    });
+
+    it('should update root tsconfig.json when no tsconfig.base.json', async () => {
+      appTree.rename('tsconfig.base.json', 'tsconfig.json');
+
+      await libraryGenerator(appTree, defaultSchema);
+
+      const tsconfigJson = readJson(appTree, '/tsconfig.json');
+      expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
+        'my-lib/src/index.ts',
+      ]);
+    });
+
+    it('should update root tsconfig.base.json (no existing path mappings)', async () => {
+      updateJson(appTree, 'tsconfig.base.json', (json) => {
+        json.compilerOptions.paths = undefined;
+        return json;
+      });
+
+      await libraryGenerator(appTree, defaultSchema);
+      const tsconfigJson = readJson(appTree, '/tsconfig.base.json');
+      expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
+        'my-lib/src/index.ts',
+      ]);
+    });
+
+    it('should create a local tsconfig.json', async () => {
+      await libraryGenerator(appTree, defaultSchema);
+
+      const tsconfigJson = readJson(appTree, 'my-lib/tsconfig.json');
+      expect(tsconfigJson.extends).toBe('../tsconfig.base.json');
+      expect(tsconfigJson.references).toEqual([
+        {
+          path: './tsconfig.lib.json',
+        },
+        {
+          path: './tsconfig.spec.json',
+        },
+      ]);
+      expect(
+        tsconfigJson.compilerOptions.forceConsistentCasingInFileNames
+      ).toEqual(true);
+      expect(tsconfigJson.compilerOptions.strict).toEqual(true);
+      expect(tsconfigJson.compilerOptions.noImplicitReturns).toEqual(true);
+      expect(tsconfigJson.compilerOptions.noFallthroughCasesInSwitch).toEqual(
+        true
+      );
+    });
+
+    it('should extend from root tsconfig.json when no tsconfig.base.json', async () => {
+      appTree.rename('tsconfig.base.json', 'tsconfig.json');
+
+      await libraryGenerator(appTree, defaultSchema);
+
+      const tsconfigJson = readJson(appTree, 'my-lib/tsconfig.json');
+      expect(tsconfigJson.extends).toBe('../tsconfig.json');
+    });
+
+    it('should extend the local tsconfig.json with tsconfig.spec.json', async () => {
+      await libraryGenerator(appTree, defaultSchema);
+      const tsconfigJson = readJson(appTree, 'my-lib/tsconfig.spec.json');
+      expect(tsconfigJson.extends).toEqual('./tsconfig.json');
+    });
+
+    it('should extend the local tsconfig.json with tsconfig.lib.json', async () => {
+      await libraryGenerator(appTree, defaultSchema);
+      const tsconfigJson = readJson(appTree, 'my-lib/tsconfig.lib.json');
+      expect(tsconfigJson.extends).toEqual('./tsconfig.json');
+    });
+  });
+
+  describe('nested', () => {
+    it('should update nx.json', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        directory: 'my-dir',
+        tags: 'one',
+      });
+
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+      expect(projectConfiguration).toMatchObject({
+        tags: ['one'],
+      });
+
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        name: 'my-lib2',
+        directory: 'my-dir2',
+        tags: 'one,two',
+      });
+
+      const lib2ProjectConfiguration = readProjectConfiguration(
+        appTree,
+        'my-lib2'
+      );
+      expect(lib2ProjectConfiguration).toMatchObject({
+        tags: ['one', 'two'],
+      });
+    });
+
+    it('should update root tsconfig.base.json', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        directory: 'my-dir',
+      });
+      const tsconfigJson = readJson(appTree, '/tsconfig.base.json');
+      expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
+        'my-dir/src/index.ts',
+      ]);
+      expect(
+        tsconfigJson.compilerOptions.paths['my-dir-my-lib/*']
+      ).toBeUndefined();
+    });
+
+    it('should update root tsconfig.json when no tsconfig.base.json', async () => {
+      appTree.rename('tsconfig.base.json', 'tsconfig.json');
+
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        directory: 'my-dir',
+      });
+
+      const tsconfigJson = readJson(appTree, '/tsconfig.json');
+      expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
+        'my-dir/src/index.ts',
+      ]);
+      expect(
+        tsconfigJson.compilerOptions.paths['my-dir-my-lib/*']
+      ).toBeUndefined();
+    });
+
+    it('should create a local tsconfig.json', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        directory: 'my-dir',
+      });
+
+      const tsconfigJson = readJson(appTree, 'my-dir/tsconfig.json');
+      expect(tsconfigJson.extends).toBe('../tsconfig.base.json');
+      expect(tsconfigJson.references).toEqual([
+        {
+          path: './tsconfig.lib.json',
+        },
+        {
+          path: './tsconfig.spec.json',
+        },
+      ]);
+    });
+
+    it('should extend from root tsconfig.json when no tsconfig.base.json', async () => {
+      appTree.rename('tsconfig.base.json', 'tsconfig.json');
+
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        directory: 'my-dir',
+      });
+
+      const tsconfigJson = readJson(appTree, 'my-dir/tsconfig.json');
+      expect(tsconfigJson.extends).toBe('../tsconfig.json');
+    });
+  });
+
+  describe('--unit-test-runner none', () => {
+    it('should not generate test configuration', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        unitTestRunner: 'none',
+      });
+
+      expect(appTree.exists('my-lib/tsconfig.spec.json')).toBeFalsy();
+      expect(appTree.exists('my-lib/jest.config.ts')).toBeFalsy();
+    });
+
+    it('should generate test configuration', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        unitTestRunner: 'jest',
+      });
+
+      expect(appTree.read('my-lib/tsconfig.spec.json', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "{
+          "extends": "./tsconfig.json",
+          "compilerOptions": {
+            "outDir": "../dist/out-tsc",
+            "module": "commonjs",
+            "types": ["jest", "node"]
+          },
+          "include": [
+            "jest.config.ts",
+            "src/**/*.test.ts",
+            "src/**/*.spec.ts",
+            "src/**/*.test.tsx",
+            "src/**/*.spec.tsx",
+            "src/**/*.test.js",
+            "src/**/*.spec.js",
+            "src/**/*.test.jsx",
+            "src/**/*.spec.jsx",
+            "src/**/*.d.ts"
+          ]
+        }
+        "
+      `);
+      expect(appTree.read('my-lib/jest.config.ts', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "module.exports = {
+          displayName: 'my-lib',
+          preset: 'react-native',
+          resolver: '@nx/jest/plugins/resolver',
+          moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
+          setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
+          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',
+        };
+        "
+      `);
+    });
+  });
+
+  describe('--buildable', () => {
+    it('should have a builder defined', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        buildable: true,
+      });
+
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+
+      expect(projectConfiguration.targets.build).toBeDefined();
+    });
+  });
+
+  describe('--publishable', () => {
+    it('should add build architect', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        publishable: true,
+        importPath: '@proj/my-lib',
+      });
+
+      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+
+      expect(projectConfiguration.targets.build).toMatchObject({
+        executor: '@nx/rollup:rollup',
+        outputs: ['{options.outputPath}'],
+        options: {
+          external: ['react/jsx-runtime', 'react-native', 'react', 'react-dom'],
+          entryFile: 'my-lib/src/index.ts',
+          outputPath: 'dist/my-lib',
+          project: 'my-lib/package.json',
+          tsConfig: 'my-lib/tsconfig.lib.json',
+          rollupConfig: '@nx/react/plugins/bundle-rollup',
+        },
+      });
+    });
+
+    it('should fail if no importPath is provided with publishable', async () => {
+      expect.assertions(1);
+
+      try {
+        await libraryGenerator(appTree, {
+          ...defaultSchema,
+          directory: 'my-dir',
+          publishable: true,
+        });
+      } catch (e) {
+        expect(e.message).toContain(
+          '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)'
+        );
+      }
+    });
+
+    it('should add package.json and .babelrc', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        publishable: true,
+        importPath: '@proj/my-lib',
+      });
+
+      const packageJson = readJson(appTree, 'my-lib/package.json');
+      expect(packageJson.name).toEqual('@proj/my-lib');
+      expect(appTree.exists('my-lib/.babelrc'));
+    });
+  });
+
+  describe('--js', () => {
+    it('should generate JS files', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        js: true,
+      });
+
+      expect(appTree.exists('my-lib/src/index.js')).toBe(true);
+    });
+  });
+
+  describe('--importPath', () => {
+    it('should update the package.json & tsconfig with the given import path', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        publishable: true,
+        directory: 'my-dir',
+        importPath: '@myorg/lib',
+      });
+      const packageJson = readJson(appTree, 'my-dir/package.json');
+      const tsconfigJson = readJson(appTree, '/tsconfig.base.json');
+
+      expect(packageJson.name).toBe('@myorg/lib');
+      expect(
+        tsconfigJson.compilerOptions.paths[packageJson.name]
+      ).toBeDefined();
+    });
+
+    it('should fail if the same importPath has already been used', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        name: 'my-lib1',
+        publishable: true,
+        importPath: '@myorg/lib',
+      });
+
+      try {
+        await libraryGenerator(appTree, {
+          ...defaultSchema,
+          name: 'my-lib2',
+          publishable: true,
+          importPath: '@myorg/lib',
+        });
+      } catch (e) {
+        expect(e.message).toContain(
+          'You already have a library using the import path'
+        );
+      }
+
+      expect.assertions(1);
+    });
+  });
+
+  describe('--no-strict', () => {
+    it('should not add options for strict mode', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        strict: false,
+      });
+      const tsconfigJson = readJson(appTree, 'my-lib/tsconfig.json');
+
+      expect(
+        tsconfigJson.compilerOptions.forceConsistentCasingInFileNames
+      ).not.toBeDefined();
+      expect(tsconfigJson.compilerOptions.strict).not.toBeDefined();
+      expect(tsconfigJson.compilerOptions.noImplicitReturns).not.toBeDefined();
+      expect(
+        tsconfigJson.compilerOptions.noFallthroughCasesInSwitch
+      ).not.toBeDefined();
+    });
+  });
+
+  describe('--skipPackageJson', () => {
+    it('should not add or update dependencies when true', async () => {
+      const packageJsonBefore = readJson(appTree, 'package.json');
+
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        skipPackageJson: true,
+      });
+
+      expect(readJson(appTree, 'package.json')).toEqual(packageJsonBefore);
+    });
+  });
+});

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

@@ -0,0 +1,25 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+
+/**
+ * Same as the @nx/react library schema, except it removes keys: style, component, routing, appProject
+ */
+export interface Schema {
+  name: string;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  skipTsConfig: boolean;
+  skipFormat: boolean;
+  tags?: string;
+  pascalCaseFiles?: boolean;
+  unitTestRunner: 'jest' | 'none';
+  linter: Linter;
+  publishable?: boolean;
+  buildable?: boolean;
+  importPath?: string;
+  js?: boolean;
+  strict?: boolean;
+  setParserOptionsProject?: boolean;
+  skipPackageJson?: boolean; //default is false
+  addPlugin?: boolean;
+}

package/src/generators/library/schema.json

@@ -0,0 +1,107 @@
+{
+  "cli": "nx",
+  "$id": "NxReactNativeLibrary",
+  "$schema": "https://json-schema.org/schema",
+  "title": "Create a React Native Library for Nx",
+  "description": "Create a React Native Library for Nx.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g @nx/react-native:lib mylib --directory=myapp",
+      "description": "Generate `libs/myapp/mylib`"
+    }
+  ],
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Library name.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the library?",
+      "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$"
+    },
+    "directory": {
+      "type": "string",
+      "description": "A directory where the lib is placed.",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the library (used for linting).",
+      "alias": "t"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipTsConfig": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not update `tsconfig.json` for development experience.",
+      "x-priority": "internal"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. `App.tsx`).",
+      "alias": "P",
+      "default": false
+    },
+    "publishable": {
+      "type": "boolean",
+      "description": "Create a publishable library."
+    },
+    "buildable": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a buildable library."
+    },
+    "importPath": {
+      "type": "string",
+      "description": "The library name used to import it, like `@myorg/my-awesome-lib`."
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Whether to enable tsconfig strict mode or not.",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["name"]
+}

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

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

package/src/generators/stories/schema.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactNativeStorybookStories",
+  "title": "Generate React Native Storybook stories",
+  "description": "Generate stories/specs for all components declared in a React Native project.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "aliases": ["name", "projectName"],
+      "description": "Project for which to generate stories.",
+      "$default": {
+        "$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
+    },
+    "ignorePaths": {
+      "type": "array",
+      "description": "Paths to ignore when looking for components.",
+      "items": {
+        "type": "string",
+        "description": "Path to ignore."
+      },
+      "default": [
+        "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
+      ],
+      "examples": [
+        "apps/my-app/src/not-stories/**",
+        "**/**/src/**/not-stories/**",
+        "libs/my-lib/**/*.something.ts",
+        "**/**/src/**/*.other.*",
+        "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+      ]
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project"]
+}

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

@@ -0,0 +1,8 @@
+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 default storiesGenerator;

package/src/generators/stories/stories.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storiesGenerator = void 0;
+const react_1 = require("@nx/react");
+/**
+ * @deprecated This would be a direct pass through to @nx/react:stories generator.
+ * TODO (@xiongemi): remove this generator for v19
+ */
+async function storiesGenerator(host, schema) {
+    return (0, react_1.storiesGenerator)(host, schema);
+}
+exports.storiesGenerator = storiesGenerator;
+exports.default = storiesGenerator;

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

@@ -0,0 +1,9 @@
+import { Tree } from '@nx/devkit';
+import { StorybookConfigureSchema } from './schema';
+export declare function storybookConfigurationGenerator(tree: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+/**
+ * This would be a direct pass through to @nx/react:storybook-configuration generator.
+ * @TODO (@xiongemi): remove this generator for v19
+ */
+export declare function storybookConfigurationGeneratorInternal(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export default storybookConfigurationGenerator;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storybookConfigurationGeneratorInternal = exports.storybookConfigurationGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const react_1 = require("@nx/react");
+function storybookConfigurationGenerator(tree, schema) {
+    return storybookConfigurationGeneratorInternal(tree, {
+        addPlugin: false,
+        ...schema,
+    });
+}
+exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
+/**
+ * This would be a direct pass through to @nx/react:storybook-configuration generator.
+ * @TODO (@xiongemi): remove this generator for v19
+ */
+async function storybookConfigurationGeneratorInternal(host, schema) {
+    devkit_1.logger.warn(`Please run 'nx run @nx/react:storybook-configuration ${schema.project}' instead.`);
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    schema.addPlugin ??= addPluginDefault;
+    return (0, react_1.storybookConfigurationGenerator)(host, schema);
+}
+exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
+exports.default = storybookConfigurationGenerator;