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

package/src/generators/application/files/app/src/main.tsx.template

@@ -0,0 +1,4 @@
+import { AppRegistry } from 'react-native';
+import App from './app/App';
+
+AppRegistry.registerComponent('<%= className %>', () => App);

package/src/generators/application/files/app/test-setup.ts.template

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

package/src/generators/application/files/app/tsconfig.app.json.template

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": ["<%= offsetFromRoot %>node_modules/@nx/react-native/typings/svg.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "test-setup.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
+}

package/src/generators/application/files/app/tsconfig.json.template

@@ -0,0 +1,19 @@
+{
+  "extends": "<%= rootTsConfigPath %>",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "declaration": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/src/generators/application/lib/add-e2e.d.ts

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function addE2e(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addE2e = void 0;
+const add_e2e_1 = require("@nx/react/src/generators/application/lib/add-e2e");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function addE2e(host, options) {
+    switch (options.e2eTestRunner) {
+        case 'cypress':
+            return (0, add_e2e_1.addE2e)(host, {
+                ...options,
+                e2eTestRunner: 'cypress',
+                style: 'none',
+                styledModule: null,
+                hasStyles: false,
+                unitTestRunner: 'none',
+            });
+        case 'playwright':
+            return (0, add_e2e_1.addE2e)(host, {
+                ...options,
+                e2eTestRunner: 'playwright',
+                style: 'none',
+                styledModule: null,
+                hasStyles: false,
+                unitTestRunner: 'none',
+            });
+        case 'detox':
+            const { detoxApplicationGenerator } = (0, devkit_1.ensurePackage)('@nx/detox', versions_1.nxVersion);
+            return detoxApplicationGenerator(host, {
+                ...options,
+                e2eName: options.e2eProjectName,
+                e2eDirectory: options.e2eProjectRoot,
+                projectNameAndRootFormat: 'as-provided',
+                appProject: options.projectName,
+                appDisplayName: options.displayName,
+                appName: options.name,
+                framework: 'react-native',
+                setParserOptionsProject: options.setParserOptionsProject,
+                skipFormat: true,
+            });
+        case 'none':
+        default:
+            return () => { };
+    }
+}
+exports.addE2e = addE2e;

package/src/generators/application/lib/add-project.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function addProject(host: Tree, options: NormalizedSchema): void;

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addProject = void 0;
+const devkit_1 = require("@nx/devkit");
+function addProject(host, options) {
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/react-native/plugin'
+        : p.plugin === '@nx/react-native/plugin');
+    const project = {
+        root: options.appProjectRoot,
+        sourceRoot: `${options.appProjectRoot}/src`,
+        projectType: 'application',
+        targets: hasPlugin ? {} : getTargets(options),
+        tags: options.parsedTags,
+    };
+    (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
+        ...project,
+    });
+}
+exports.addProject = addProject;
+function getTargets(options) {
+    const architect = {};
+    architect.start = {
+        executor: '@nx/react-native:start',
+        dependsOn: [],
+        options: {
+            port: 8081,
+        },
+    };
+    architect['run-ios'] = {
+        executor: '@nx/react-native:run-ios',
+        dependsOn: [],
+        options: {},
+    };
+    architect['bundle-ios'] = {
+        executor: '@nx/react-native:bundle',
+        dependsOn: [],
+        outputs: ['{options.bundleOutput}'],
+        options: {
+            entryFile: options.entryFile,
+            platform: 'ios',
+            bundleOutput: `dist/${options.appProjectRoot}/ios/main.jsbundle`,
+        },
+    };
+    architect['run-android'] = {
+        executor: '@nx/react-native:run-android',
+        dependsOn: [],
+        options: {},
+    };
+    architect['build-android'] = {
+        executor: '@nx/react-native:build-android',
+        outputs: [
+            `{projectRoot}/android/app/build/outputs/bundle`,
+            `{projectRoot}/android/app/build/outputs/apk`,
+        ],
+        dependsOn: [],
+        options: {},
+    };
+    architect['build-ios'] = {
+        executor: '@nx/react-native:build-ios',
+        outputs: ['{projectRoot}/ios/build/Build'],
+        dependsOn: [],
+        options: {},
+    };
+    architect['pod-install'] = {
+        executor: '@nx/react-native:pod-install',
+        dependsOn: ['sync-deps'],
+        outputs: ['{projectRoot}/ios/Pods', '{projectRoot}/ios/Podfile.lock'],
+        options: {},
+    };
+    architect.upgrade = {
+        executor: '@nx/react-native:upgrade',
+        options: {},
+    };
+    architect['bundle-android'] = {
+        executor: '@nx/react-native:bundle',
+        dependsOn: [],
+        outputs: ['{options.bundleOutput}'],
+        options: {
+            entryFile: options.entryFile,
+            platform: 'android',
+            bundleOutput: `dist/${options.appProjectRoot}/android/main.jsbundle`,
+        },
+    };
+    architect['sync-deps'] = {
+        executor: '@nx/react-native:sync-deps',
+        options: {},
+    };
+    return architect;
+}

package/src/generators/application/lib/create-application-files.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function createApplicationFiles(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/create-application-files.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createApplicationFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const path_1 = require("path");
+function createApplicationFiles(host, options) {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app'), options.appProjectRoot, {
+        ...options,
+        entryFileIos: 'src/main',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+        rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(host, options.appProjectRoot),
+    });
+    if (options.unitTestRunner === 'none') {
+        host.delete((0, path_1.join)(options.appProjectRoot, `/src/app/App.spec.tsx`));
+    }
+    if (options.e2eTestRunner === 'none') {
+        host.delete((0, path_1.join)(options.androidProjectRoot, `/app/src/androidTest/java/com/${options.lowerCaseName}/DetoxTest.java`));
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+}
+exports.createApplicationFiles = createApplicationFiles;

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

@@ -0,0 +1,17 @@
+import { Tree } from '@nx/devkit';
+import { Schema } from '../schema';
+export interface NormalizedSchema extends Schema {
+    className: string;
+    fileName: string;
+    projectName: string;
+    appProjectRoot: string;
+    lowerCaseName: string;
+    iosProjectRoot: string;
+    androidProjectRoot: string;
+    parsedTags: string[];
+    entryFile: string;
+    rootProject: boolean;
+    e2eProjectName: string;
+    e2eProjectRoot: string;
+}
+export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -0,0 +1,47 @@
+"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: appProjectName, names: projectNames, projectRoot: appProjectRoot, projectNameAndRootFormat, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+        name: options.name,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        callingGenerator: '@nx/react-native:application',
+    });
+    options.projectNameAndRootFormat = projectNameAndRootFormat;
+    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 === '.';
+    const e2eProjectName = rootProject ? 'e2e' : `${fileName}-e2e`;
+    const e2eProjectRoot = rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const parsedTags = options.tags
+        ? options.tags.split(',').map((s) => s.trim())
+        : [];
+    const entryFile = options.js ? 'src/main.js' : 'src/main.tsx';
+    return {
+        ...options,
+        name: projectNames.projectSimpleName,
+        className,
+        fileName,
+        lowerCaseName: className.toLowerCase(),
+        displayName: options.displayName || className,
+        projectName: appProjectName,
+        appProjectRoot,
+        iosProjectRoot,
+        androidProjectRoot,
+        parsedTags,
+        entryFile,
+        rootProject,
+        e2eProjectName,
+        e2eProjectRoot,
+    };
+}
+exports.normalizeOptions = normalizeOptions;

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

@@ -0,0 +1,196 @@
+import { Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Linter } from '@nx/eslint';
+import { Schema } from '../schema';
+import { normalizeOptions } from './normalize-options';
+
+describe('Normalize Options', () => {
+  let appTree: Tree;
+
+  beforeEach(() => {
+    appTree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should normalize options with name in kebab case', async () => {
+    const schema: Schema = {
+      name: 'my-app',
+      linter: Linter.EsLint,
+      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',
+      lowerCaseName: 'myapp',
+      name: 'my-app',
+      parsedTags: [],
+      projectName: 'my-app',
+      projectNameAndRootFormat: 'as-provided',
+      linter: Linter.EsLint,
+      entryFile: 'src/main.tsx',
+      e2eTestRunner: 'none',
+      unitTestRunner: 'none',
+      install: false,
+      bundler: 'vite',
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'my-app-e2e',
+    });
+  });
+
+  it('should normalize options with name in camel case', async () => {
+    const schema: Schema = {
+      name: 'myApp',
+      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',
+      name: 'myApp',
+      parsedTags: [],
+      projectName: 'myApp',
+      projectNameAndRootFormat: 'as-provided',
+      entryFile: 'src/main.tsx',
+      e2eTestRunner: 'none',
+      unitTestRunner: 'none',
+      install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'myApp-e2e',
+    });
+  });
+
+  it('should normalize options with directory', async () => {
+    const schema: Schema = {
+      name: 'my-app',
+      directory: 'directory/my-app',
+      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',
+      name: 'my-app',
+      directory: 'directory/my-app',
+      parsedTags: [],
+      projectName: 'my-app',
+      projectNameAndRootFormat: 'as-provided',
+      entryFile: 'src/main.tsx',
+      e2eTestRunner: 'none',
+      unitTestRunner: 'none',
+      install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'directory/my-app-e2e',
+    });
+  });
+
+  it('should normalize options that has directory in its name', async () => {
+    const schema: Schema = {
+      name: 'directory/my-app',
+      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',
+      parsedTags: [],
+      projectName: 'my-app',
+      projectNameAndRootFormat: 'as-provided',
+      entryFile: 'src/main.tsx',
+      e2eTestRunner: 'none',
+      unitTestRunner: 'none',
+      install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'directory/my-app-e2e',
+      e2eProjectRoot: 'directory/my-app-e2e',
+    });
+  });
+
+  it('should normalize options with display name', async () => {
+    const schema: Schema = {
+      name: 'my-app',
+      displayName: 'My App',
+      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',
+      name: 'my-app',
+      parsedTags: [],
+      projectName: 'my-app',
+      projectNameAndRootFormat: 'as-provided',
+      entryFile: 'src/main.tsx',
+      e2eTestRunner: 'none',
+      unitTestRunner: 'none',
+      install: false,
+      bundler: 'vite',
+      linter: Linter.None,
+      rootProject: false,
+      e2eProjectName: 'my-app-e2e',
+      e2eProjectRoot: 'my-app-e2e',
+    });
+  });
+});

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

@@ -0,0 +1,23 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+
+export interface Schema {
+  name: string;
+  displayName?: string;
+  style?: string;
+  skipFormat?: boolean;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  tags?: string;
+  unitTestRunner: 'jest' | 'none'; // default is jest
+  pascalCaseFiles?: boolean;
+  classComponent?: boolean;
+  js?: boolean;
+  linter: Linter;
+  setParserOptionsProject?: boolean;
+  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

@@ -0,0 +1,103 @@
+{
+  "cli": "nx",
+  "$id": "NxReactNativeApplication",
+  "$schema": "https://json-schema.org/schema",
+  "title": "Create a React Application for Nx",
+  "description": "Create a React Application for Nx.",
+  "examples": [
+    {
+      "command": "nx g @nx/react-native:app myapp --directory=nested",
+      "description": "Generate `apps/nested/myapp`"
+    },
+    {
+      "command": "nx g @nx/react-native:app myapp --classComponent",
+      "description": "Use class components instead of functional components"
+    }
+  ],
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the application.",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the application?",
+      "pattern": "^[a-zA-Z][^:]*$"
+    },
+    "displayName": {
+      "description": "The display name to show in the application. Defaults to name.",
+      "type": "string"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string"
+    },
+    "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"]
+    },
+    "skipFormat": {
+      "description": "Skip formatting files",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "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 application (used for linting).",
+      "alias": "t"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files",
+      "default": false
+    },
+    "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
+    },
+    "e2eTestRunner": {
+      "description": "Adds the specified e2e test runner.",
+      "type": "string",
+      "enum": ["cypress", "playwright", "detox", "none"],
+      "default": "cypress"
+    },
+    "install": {
+      "type": "boolean",
+      "description": "Runs `pod install` for native modules before building iOS app.",
+      "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/component.d.ts

@@ -0,0 +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;