@nx/react-native 20.2.1 → 20.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react-native",
-  "version": "20.2.1",
+  "version": "20.2.2",
   "private": false,
   "description": "The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides: \n\n-Integration with libraries such as Jest, Detox, and Storybook.\n-Scaffolding for creating buildable libraries that can be published to npm.\n-Utilities for automatic workspace refactoring.",
   "keywords": [
@@ -36,12 +36,12 @@
     "node-fetch": "^2.6.7",
     "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.2.1",
-    "@nx/jest": "20.2.1",
-    "@nx/js": "20.2.1",
-    "@nx/eslint": "20.2.1",
-    "@nx/react": "20.2.1",
-    "@nx/workspace": "20.2.1"
+    "@nx/devkit": "20.2.2",
+    "@nx/jest": "20.2.2",
+    "@nx/js": "20.2.2",
+    "@nx/eslint": "20.2.2",
+    "@nx/react": "20.2.2",
+    "@nx/workspace": "20.2.2"
   },
   "executors": "./executors.json",
   "ng-update": {

package/src/generators/application/files/app/.babelrc.js.template

@@ -3,7 +3,7 @@ module.exports = function (api) {
 
   if (
     process.env.NX_TASK_TARGET_TARGET === 'build' ||
-    process.env.NX_TASK_TARGET_TARGET.includes('storybook')
+    process.env.NX_TASK_TARGET_TARGET?.includes('storybook')
   ) {
     return {
       presets: [

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

@@ -5,6 +5,16 @@
     "types": ["node"]
   },
   "files": ["<%= offsetFromRoot %>node_modules/@nx/react-native/typings/svg.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "src/test-setup.ts"],
+  "exclude": [
+    "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/test-setup.ts"
+  ],
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
 }

package/src/generators/component/component.js

@@ -13,21 +13,12 @@ async function reactNativeComponentGenerator(host, schema) {
     await (0, devkit_1.formatFiles)(host);
 }
 function createComponentFiles(host, options) {
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, 'files', options.fileExtensionType), options.directory, {
         ...options,
-        tmpl: '',
+        ext: options.fileExtension,
     });
-    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);
+    if (options.skipTests) {
+        host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${options.fileExtension}`));
     }
 }
 let tsModule;
@@ -38,14 +29,15 @@ function addExportsToBarrel(host, options) {
     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);
+        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+        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 = (0, devkit_1.applyChangesToString)(indexSource, (0, add_import_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
+        host.write(indexFilePath, changes);
     }
 }
 function getRelativeImportToFile(indexPath, filePath) {

package/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 %>;

package/src/generators/component/files/{__fileName__.tsx__tmpl__ → 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,7 +19,7 @@ export class <%= className %> extends Component<<%= className %>Props> {
     );
   }
 }
-<% } else { %>
+<%_ } else { _%>
 export function <%= className %>(props: <%= className %>Props) {
   return (
     <View>
@@ -27,6 +27,6 @@ export function <%= className %>(props: <%= className %>Props) {
     </View>
   );
 }
-<% } %>
+<%_ } _%>
 
 export default <%= className %>;

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

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

@@ -1,11 +1,14 @@
 import { Tree } from '@nx/devkit';
+import { type FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 import { Schema } from '../schema';
-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;
 }
 export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -4,12 +4,13 @@ exports.normalizeOptions = normalizeOptions;
 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) {
-    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.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 = (0, devkit_1.getProjects)(host).get(projectName);
     const { className } = (0, devkit_1.names)(name);
     const { sourceRoot: projectSourceRoot, projectType } = project;
@@ -24,20 +25,9 @@ async function normalizeOptions(host, options) {
         className,
         fileName,
         filePath,
+        fileExtension,
+        fileExtensionType,
         projectSourceRoot,
         projectName,
     };
 }
-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 --path option (e.g. \`nx g c ${suggestion}/${name} \`)?`);
-        }
-    });
-}

package/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;
 }

package/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",

package/src/generators/library/files/lib/tsconfig.lib.json.template

@@ -4,6 +4,16 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": ["node"]
   },
-  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "src/test-setup.ts"],
+  "exclude": [
+    "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/test-setup.ts"
+  ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

package/src/generators/web-configuration/files/base-vite/.babelrc.js.template

@@ -3,7 +3,7 @@ module.exports = function (api) {
 
   if (
     process.env.NX_TASK_TARGET_TARGET === 'build' ||
-    process.env.NX_TASK_TARGET_TARGET.includes('storybook')
+    process.env.NX_TASK_TARGET_TARGET?.includes('storybook')
   ) {
     return {
       presets: [

package/src/generators/web-configuration/files/base-webpack/.babelrc.js.template

@@ -3,7 +3,7 @@ module.exports = function (api) {
 
   if (
     process.env.NX_TASK_TARGET_TARGET === 'build' ||
-    process.env.NX_TASK_TARGET_TARGET.includes('storybook')
+    process.env.NX_TASK_TARGET_TARGET?.includes('storybook')
   ) {
     return {
       presets: [