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

package/src/generators/component/component.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactNativeComponentGeneratorInternal = exports.reactNativeComponentGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const normalize_options_1 = require("./lib/normalize-options");
+const add_import_1 = require("./lib/add-import");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const path_1 = require("path");
+async function reactNativeComponentGenerator(host, schema) {
+    return reactNativeComponentGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.reactNativeComponentGenerator = reactNativeComponentGenerator;
+async function reactNativeComponentGeneratorInternal(host, schema) {
+    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
+    createComponentFiles(host, options);
+    addExportsToBarrel(host, options);
+    await (0, devkit_1.formatFiles)(host);
+}
+exports.reactNativeComponentGeneratorInternal = reactNativeComponentGeneratorInternal;
+function createComponentFiles(host, options) {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
+        ...options,
+        tmpl: '',
+    });
+    for (const c of host.listChanges()) {
+        let deleteFile = false;
+        if (options.skipTests && /.*spec.tsx/.test(c.path)) {
+            deleteFile = true;
+        }
+        if (deleteFile) {
+            host.delete(c.path);
+        }
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+}
+let tsModule;
+function addExportsToBarrel(host, options) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const workspace = (0, devkit_1.getProjects)(host);
+    const isApp = workspace.get(options.projectName).projectType === 'application';
+    if (options.export && !isApp) {
+        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        if (indexSource !== null) {
+            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+            const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
+            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, add_import_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
+            host.write(indexFilePath, changes);
+        }
+    }
+}
+function getRelativeImportToFile(indexPath, filePath) {
+    const { name, dir } = (0, path_1.parse)(filePath);
+    const relativeDirToTarget = (0, path_1.relative)((0, path_1.dirname)(indexPath), dir);
+    return `./${(0, devkit_1.joinPathFragments)(relativeDirToTarget, name)}`;
+}
+exports.default = reactNativeComponentGenerator;

package/src/generators/component/component.spec.ts

@@ -0,0 +1,127 @@
+import { logger, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { createApp, createLib } from '../../utils/testing-generators';
+import { reactNativeComponentGenerator } from './component';
+
+describe('component', () => {
+  let appTree: Tree;
+  let projectName: string;
+
+  beforeEach(async () => {
+    projectName = 'my-lib';
+    appTree = createTreeWithEmptyWorkspace();
+    appTree.write('.gitignore', '');
+    await createApp(appTree, 'my-app');
+    await createLib(appTree, projectName);
+    jest.spyOn(logger, 'warn').mockImplementation(() => {});
+    jest.spyOn(logger, 'debug').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should generate component files', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'hello',
+      project: projectName,
+    });
+
+    expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
+  });
+
+  it('should generate files for an app', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      name: 'hello',
+      project: 'my-app',
+    });
+
+    expect(appTree.exists('my-app/src/app/hello/hello.tsx')).toBeTruthy();
+    expect(appTree.exists('my-app/src/app/hello/hello.spec.tsx')).toBeTruthy();
+  });
+
+  describe('--export', () => {
+    it('should add to index.ts barrel', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'hello',
+        project: projectName,
+        export: true,
+      });
+
+      const indexContent = appTree.read('my-lib/src/index.ts', 'utf-8');
+
+      expect(indexContent).toMatch(/lib\/hello/);
+    });
+
+    it('should not export from an app', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'hello',
+        project: 'my-app',
+        export: true,
+      });
+
+      const indexContent = appTree.read('my-lib/src/index.ts', 'utf-8');
+
+      expect(indexContent).not.toMatch(/lib\/hello/);
+    });
+  });
+
+  describe('--pascalCaseFiles', () => {
+    it('should generate component files with upper case names', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'hello',
+        project: projectName,
+        pascalCaseFiles: true,
+      });
+      expect(appTree.exists('my-lib/src/lib/hello/Hello.tsx')).toBeTruthy();
+      expect(
+        appTree.exists('my-lib/src/lib/hello/Hello.spec.tsx')
+      ).toBeTruthy();
+    });
+  });
+
+  describe('--directory', () => {
+    it('should create component under the directory', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'hello',
+        project: projectName,
+        directory: 'components',
+      });
+
+      expect(appTree.exists('my-lib/src/components/hello/hello.tsx'));
+    });
+
+    it('should create with nested directories', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'helloWorld',
+        project: projectName,
+        directory: 'lib/foo',
+      });
+
+      expect(appTree.exists('my-lib/src/lib/foo/hello-world/hello-world.tsx'));
+    });
+  });
+
+  describe('--flat', () => {
+    it('should create in project directory rather than in its own folder', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'hello',
+        project: projectName,
+        flat: true,
+      });
+
+      expect(appTree.exists('my-lib/src/lib/hello.tsx'));
+    });
+    it('should work with custom directory path', async () => {
+      await reactNativeComponentGenerator(appTree, {
+        name: 'hello',
+        project: projectName,
+        flat: true,
+        directory: 'components',
+      });
+
+      expect(appTree.exists('my-lib/src/components/hello.tsx'));
+    });
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import <%= className %> from './<%= fileName %>';
+
+describe('<%= className %>', () => {
+  it('should render successfully', () => {
+    const { root } = render(< <%= className %> />);
+    expect(root).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,32 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } else { %>
+import React from 'react';
+<% } %>
+import { View, Text } from 'react-native';
+
+/* eslint-disable-next-line */
+export interface <%= className %>Props {
+}
+
+<% if (classComponent) { %>
+export class <%= className %> extends Component<<%= className %>Props> {
+  render() {
+    return (
+      <View>
+        <Text>Welcome to <%= name %>!</Text>
+      </View>
+    );
+  }
+}
+<% } else { %>
+export function <%= className %>(props: <%= className %>Props) {
+  return (
+    <View>
+      <Text>Welcome to <%= name %>!</Text>
+    </View>
+  );
+}
+<% } %>
+
+export default <%= className %>;

package/src/generators/component/lib/add-import.d.ts

@@ -0,0 +1,3 @@
+import type * as ts from 'typescript';
+import { StringChange } from '@nx/devkit';
+export declare function addImport(source: ts.SourceFile, statement: string): StringChange[];

package/src/generators/component/lib/add-import.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addImport = void 0;
+const js_1 = require("@nx/js");
+const devkit_1 = require("@nx/devkit");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function addImport(source, statement) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const allImports = (0, js_1.findNodes)(source, tsModule.SyntaxKind.ImportDeclaration);
+    if (allImports.length > 0) {
+        const lastImport = allImports[allImports.length - 1];
+        return [
+            {
+                type: devkit_1.ChangeType.Insert,
+                index: lastImport.end + 1,
+                text: `\n${statement}\n`,
+            },
+        ];
+    }
+    else {
+        return [
+            {
+                type: devkit_1.ChangeType.Insert,
+                index: 0,
+                text: `\n${statement}\n`,
+            },
+        ];
+    }
+}
+exports.addImport = addImport;

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

@@ -0,0 +1,10 @@
+import { Tree } from '@nx/devkit';
+import { Schema } from '../schema';
+export interface NormalizedSchema extends Schema {
+    projectSourceRoot: string;
+    fileName: string;
+    className: string;
+    filePath: string;
+    projectName: string;
+}
+export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+async function normalizeOptions(host, options) {
+    assertValidOptions(options);
+    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        artifactType: 'component',
+        callingGenerator: '@nx/react-native:component',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.directory,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+        pascalCaseFile: options.pascalCaseFiles,
+    });
+    const project = (0, devkit_1.getProjects)(host).get(projectName);
+    const { className } = (0, devkit_1.names)(name);
+    const { sourceRoot: projectSourceRoot, projectType } = project;
+    if (options.export && projectType === 'application') {
+        devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
+    }
+    options.classComponent = options.classComponent ?? false;
+    return {
+        ...options,
+        directory,
+        className,
+        fileName,
+        filePath,
+        projectSourceRoot,
+        projectName,
+    };
+}
+exports.normalizeOptions = normalizeOptions;
+function assertValidOptions(options) {
+    const slashes = ['/', '\\'];
+    slashes.forEach((s) => {
+        if (options.name.indexOf(s) !== -1) {
+            const [name, ...rest] = options.name.split(s).reverse();
+            let suggestion = rest.map((x) => x.toLowerCase()).join(s);
+            if (options.directory) {
+                suggestion = `${options.directory}${s}${suggestion}`;
+            }
+            throw new Error(`Found "${s}" in the component name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?`);
+        }
+    });
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Same as the @nx/react library schema, except it removes keys: style, routing, globalCss
+ */
+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.
+   */
+  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.
+   */
+  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.
+   */
+  flat?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
+}

package/src/generators/component/schema.json

@@ -0,0 +1,85 @@
+{
+  "cli": "nx",
+  "$id": "NxReactNativeApplication",
+  "$schema": "https://json-schema.org/schema",
+  "title": "Create a React Native Component for Nx",
+  "description": "Create a React native Component for Nx.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g @nx/react-native:component my-component --project=mylib",
+      "description": "Generate a component in the `mylib` library"
+    },
+    {
+      "command": "nx g @nx/react-native:component my-component --project=mylib --classComponent",
+      "description": "Generate a class component in the `mylib` library"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "alias": "p",
+      "$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."
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component?"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not create `spec.ts` test files for the new component.",
+      "default": false
+    },
+    "directory": {
+      "type": "string",
+      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
+      "x-priority": "important"
+    },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "flat": {
+      "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."
+    },
+    "export": {
+      "type": "boolean",
+      "description": "When true, the component is exported from the project `index.ts` (if it exists).",
+      "alias": "e",
+      "default": false,
+      "x-prompt": "Should this component be exported in the project?"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "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."
+    },
+    "classComponent": {
+      "type": "boolean",
+      "alias": "C",
+      "description": "Use class components instead of functional component.",
+      "default": false
+    }
+  },
+  "required": ["name"]
+}

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

@@ -0,0 +1,8 @@
+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
+ */
+export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
+export default componentStoryGenerator;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStoryGenerator = 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
+ */
+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);
+}
+exports.componentStoryGenerator = componentStoryGenerator;
+exports.default = componentStoryGenerator;

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

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

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

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactNativeComponentStory",
+  "title": "React native component story",
+  "description": "Generate storybook story for a react-native component.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "aliases": ["name", "projectName"],
+      "description": "The project where to add the components.",
+      "examples": ["shared-ui-component"],
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "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-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

@@ -0,0 +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 reactNativeInitGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function updateDependencies(host: Tree, schema: Schema): GeneratorCallback;
+export default reactNativeInitGenerator;

package/src/generators/init/init.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDependencies = exports.reactNativeInitGeneratorInternal = exports.reactNativeInitGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const update_package_scripts_1 = require("@nx/devkit/src/utils/update-package-scripts");
+const plugin_1 = require("../../../plugins/plugin");
+const versions_1 = require("../../utils/versions");
+const add_git_ignore_entry_1 = require("./lib/add-git-ignore-entry");
+function reactNativeInitGenerator(host, schema) {
+    return reactNativeInitGeneratorInternal(host, {
+        addPlugin: false,
+        ...schema,
+    });
+}
+exports.reactNativeInitGenerator = reactNativeInitGenerator;
+async function reactNativeInitGeneratorInternal(host, schema) {
+    (0, add_git_ignore_entry_1.addGitIgnoreEntry)(host);
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    schema.addPlugin ??= addPluginDefault;
+    if (schema.addPlugin) {
+        addPlugin(host);
+    }
+    const tasks = [];
+    if (!schema.skipPackageJson) {
+        tasks.push(moveDependency(host));
+        tasks.push(updateDependencies(host, schema));
+    }
+    if (schema.updatePackageScripts) {
+        await (0, update_package_scripts_1.updatePackageScripts)(host, plugin_1.createNodes);
+    }
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.reactNativeInitGeneratorInternal = reactNativeInitGeneratorInternal;
+function updateDependencies(host, schema) {
+    return (0, devkit_1.addDependenciesToPackageJson)(host, {
+        react: versions_1.reactVersion,
+        'react-dom': versions_1.reactDomVersion,
+        'react-native': versions_1.reactNativeVersion,
+    }, {
+        '@nx/react-native': versions_1.nxVersion,
+    }, undefined, schema.keepExistingVersions);
+}
+exports.updateDependencies = updateDependencies;
+function moveDependency(host) {
+    return (0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react-native'], []);
+}
+function addPlugin(host) {
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    nxJson.plugins ??= [];
+    for (const plugin of nxJson.plugins) {
+        if (typeof plugin === 'string'
+            ? plugin === '@nx/react-native/plugin'
+            : plugin.plugin === '@nx/react-native/plugin') {
+            return;
+        }
+    }
+    nxJson.plugins.push({
+        plugin: '@nx/react-native/plugin',
+        options: {
+            startTargetName: 'start',
+            podInstallTargetName: 'pod-install',
+            bundleTargetName: 'bundle',
+            runIosTargetName: 'run-ios',
+            runAndroidTargetName: 'run-android',
+            buildIosTargetName: 'build-ios',
+            buildAndroidTargetName: 'build-android',
+            syncDepsTargetName: 'sync-deps',
+            upgradeTargetname: 'upgrade',
+        },
+    });
+    (0, devkit_1.updateNxJson)(host, nxJson);
+}
+exports.default = reactNativeInitGenerator;

package/src/generators/init/init.spec.ts

@@ -0,0 +1,38 @@
+import { Tree, readJson } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { reactNativeInitGenerator } from './init';
+
+describe('init', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+    tree.write('.gitignore', '');
+  });
+
+  it('should add react native dependencies', async () => {
+    await reactNativeInitGenerator(tree, {
+      addPlugin: true,
+    });
+    const packageJson = readJson(tree, 'package.json');
+    expect(packageJson.dependencies['react']).toBeDefined();
+    expect(packageJson.dependencies['react-native']).toBeDefined();
+  });
+
+  it('should add .gitignore entries for React native files and directories', async () => {
+    tree.write(
+      '/.gitignore',
+      `
+/node_modules
+`
+    );
+    await reactNativeInitGenerator(tree, {
+      addPlugin: true,
+    });
+
+    const content = tree.read('/.gitignore').toString();
+
+    expect(content).toMatch(/# React Native/);
+    expect(content).toMatch(/# Nested node_modules/);
+  });
+});

package/src/generators/init/lib/add-git-ignore-entry.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addGitIgnoreEntry(host: Tree): void;