feat(react-native): update react-native generators

docs/generated/packages/react-native/generators/component.json

@@ -11,11 +11,15 @@
     "examples": [
       {
         "description": "Generate a component with the exported symbol matching the file name. It results in the component `Foo` at `mylib/src/lib/foo.tsx`",
-        "command": "nx g @nx/react-native:component mylib/src/lib/foo"
+        "command": "nx g @nx/react-native:component mylib/src/lib/foo.tsx"
       },
       {
         "description": "Generate a component with the exported symbol different from the file name. It results in the component `Custom` at `mylib/src/lib/foo.tsx`",
-        "command": "nx g @nx/react-native:component mylib/src/lib/foo --name=custom"
+        "command": "nx g @nx/react-native:component mylib/src/lib/foo.tsx --name=custom"
+      },
+      {
+        "description": "Generate a component without providing the file extension. It results in the component `Foo` at `mylib/src/lib/foo.tsx`",
+        "command": "nx g @nx/react-native:component mylib/src/lib/foo"
       },
       {
         "description": "Generate a class component at `mylib/src/lib/foo.tsx`",
@@ -25,7 +29,7 @@
     "properties": {
       "path": {
         "type": "string",
-        "description": "The file path to the component without the file extension. Relative to the current working directory.",
+        "description": "The file path to the component. Relative to the current working directory.",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What is the component file path?"
       },
@@ -36,7 +40,7 @@
       "js": {
         "type": "boolean",
         "description": "Generate JavaScript files rather than TypeScript files.",
-        "default": false
+        "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
       },
       "skipTests": {
         "type": "boolean",

packages/react-native/src/generators/component/component.ts

@@ -5,7 +5,6 @@ import {
   generateFiles,
   getProjects,
   joinPathFragments,
-  toJS,
   Tree,
 } from '@nx/devkit';
 import { NormalizedSchema, normalizeOptions } from './lib/normalize-options';
@@ -26,25 +25,23 @@ export async function reactNativeComponentGenerator(
 }
 
 function createComponentFiles(host: Tree, options: NormalizedSchema) {
-  generateFiles(host, 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;
+  generateFiles(
+    host,
+    join(__dirname, 'files', options.fileExtensionType),
+    options.directory,
+    {
+      ...options,
+      ext: options.fileExtension,
     }
+  );
 
-    if (deleteFile) {
-      host.delete(c.path);
-    }
-  }
-
-  if (options.js) {
-    toJS(host);
+  if (options.skipTests) {
+    host.delete(
+      join(
+        options.directory,
+        `${options.fileName}.spec.${options.fileExtension}`
+      )
+    );
   }
 }
 
@@ -61,27 +58,30 @@ function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(
       options.projectSourceRoot,
-      options.js ? 'index.js' : 'index.ts'
+      options.fileExtensionType === '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 = applyChangesToString(
-        indexSource,
-        addImport(indexSourceFile, `export * from '${relativePathFromIndex}';`)
-      );
-      host.write(indexFilePath, changes);
+    if (!host.exists(indexFilePath)) {
+      return;
     }
+
+    const indexSource = host.read(indexFilePath, 'utf-8');
+    const indexSourceFile = tsModule.createSourceFile(
+      indexFilePath,
+      indexSource,
+      tsModule.ScriptTarget.Latest,
+      true
+    );
+
+    const relativePathFromIndex = getRelativeImportToFile(
+      indexFilePath,
+      options.filePath
+    );
+    const changes = applyChangesToString(
+      indexSource,
+      addImport(indexSourceFile, `export * from '${relativePathFromIndex}';`)
+    );
+    host.write(indexFilePath, changes);
   }
 }
 

packages/react-native/src/generators/component/files/js/__fileName__.__ext__

@@ -0,0 +1,28 @@
+<%_ if (classComponent) { _%>
+import { Component } from 'react';
+<%_ } else { _%>
+import React from 'react';
+<%_ } _%>
+import { View, Text } from 'react-native';
+
+<%_ if (classComponent) { _%>
+export class <%= className %> extends Component {
+  render() {
+    return (
+      <View>
+        <Text>Welcome to <%= name %>!</Text>
+      </View>
+    );
+  }
+}
+<%_ } else { _%>
+export function <%= className %>(props) {
+  return (
+    <View>
+      <Text>Welcome to <%= name %>!</Text>
+    </View>
+  );
+}
+<%_ } _%>
+
+export default <%= className %>;

packages/react-native/src/generators/component/files/__fileName__.tsx__tmpl__ → packages/react-native/src/generators/component/files/ts/__fileName__.__ext__

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

packages/react-native/src/generators/component/files/ts/__fileName__.spec.__ext__

@@ -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();
+  });
+});

packages/react-native/src/generators/component/lib/normalize-options.ts

@@ -1,13 +1,18 @@
 import { getProjects, logger, names, Tree } from '@nx/devkit';
+import {
+  determineArtifactNameAndDirectoryOptions,
+  type FileExtensionType,
+} from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 import { Schema } from '../schema';
-import { determineArtifactNameAndDirectoryOptions } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 
-export interface NormalizedSchema extends Schema {
+export interface NormalizedSchema extends Omit<Schema, 'js'> {
   directory: string;
   projectSourceRoot: string;
   fileName: string;
   className: string;
   filePath: string;
+  fileExtension: string;
+  fileExtensionType: FileExtensionType;
   projectName: string;
 }
 
@@ -20,15 +25,17 @@ export async function normalizeOptions(
     directory,
     fileName,
     filePath,
+    fileExtension,
+    fileExtensionType,
     project: projectName,
   } = await determineArtifactNameAndDirectoryOptions(host, {
     path: options.path,
     name: options.name,
-    fileExtension: 'tsx',
+    allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+    fileExtension: options.js ? 'js' : 'tsx',
+    js: options.js,
   });
 
-  assertValidOptions({ name, directory });
-
   const project = getProjects(host).get(projectName);
 
   const { className } = names(name);
@@ -50,23 +57,9 @@ export async function normalizeOptions(
     className,
     fileName,
     filePath,
+    fileExtension,
+    fileExtensionType,
     projectSourceRoot,
     projectName,
   };
 }
-
-function assertValidOptions(options: { name: string; directory: string }) {
-  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 --path option (e.g. \`nx g c ${suggestion}/${name} \`)?`
-      );
-    }
-  });
-}

packages/react-native/src/generators/component/schema.d.ts

@@ -7,5 +7,9 @@ export interface Schema {
   skipTests?: boolean;
   export?: boolean;
   classComponent?: boolean;
+
+  /**
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
+   */
   js?: boolean;
 }

packages/react-native/src/generators/component/schema.json

@@ -8,11 +8,15 @@
   "examples": [
     {
       "description": "Generate a component with the exported symbol matching the file name. It results in the component `Foo` at `mylib/src/lib/foo.tsx`",
-      "command": "nx g @nx/react-native:component mylib/src/lib/foo"
+      "command": "nx g @nx/react-native:component mylib/src/lib/foo.tsx"
     },
     {
       "description": "Generate a component with the exported symbol different from the file name. It results in the component `Custom` at `mylib/src/lib/foo.tsx`",
-      "command": "nx g @nx/react-native:component mylib/src/lib/foo --name=custom"
+      "command": "nx g @nx/react-native:component mylib/src/lib/foo.tsx --name=custom"
+    },
+    {
+      "description": "Generate a component without providing the file extension. It results in the component `Foo` at `mylib/src/lib/foo.tsx`",
+      "command": "nx g @nx/react-native:component mylib/src/lib/foo"
     },
     {
       "description": "Generate a class component at `mylib/src/lib/foo.tsx`",
@@ -22,7 +26,7 @@
   "properties": {
     "path": {
       "type": "string",
-      "description": "The file path to the component without the file extension. Relative to the current working directory.",
+      "description": "The file path to the component. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
@@ -36,7 +40,7 @@
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     },
     "skipTests": {
       "type": "boolean",