@nx/expo 20.2.1 → 20.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/expo",
-  "version": "20.2.1",
+  "version": "20.3.0-beta.0",
   "private": false,
   "description": "The Expo Plugin for Nx contains executors and generators for managing and developing an expo application within your workspace. For example, you can directly build for different target platforms as well as generate projects and publish your code.",
   "keywords": [
@@ -28,13 +28,13 @@
   "main": "./index",
   "types": "index.d.ts",
   "dependencies": {
-    "@nx/devkit": "20.2.1",
-    "@nx/eslint": "20.2.1",
-    "@nx/jest": "20.2.1",
-    "@nx/js": "20.2.1",
-    "@nx/react": "20.2.1",
-    "@nx/web": "20.2.1",
-    "@nx/webpack": "20.2.1",
+    "@nx/devkit": "20.3.0-beta.0",
+    "@nx/eslint": "20.3.0-beta.0",
+    "@nx/jest": "20.3.0-beta.0",
+    "@nx/js": "20.3.0-beta.0",
+    "@nx/react": "20.3.0-beta.0",
+    "@nx/web": "20.3.0-beta.0",
+    "@nx/webpack": "20.3.0-beta.0",
     "enhanced-resolve": "^5.8.3",
     "metro-config": "~0.80.4",
     "metro-resolver": "~0.80.4",

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

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

package/src/generators/component/component.js

@@ -15,35 +15,27 @@ async function expoComponentGenerator(host, schema) {
     }
 }
 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}`));
     }
 }
 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 = ts.createSourceFile(indexFilePath, indexSource, ts.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 = ts.createSourceFile(indexFilePath, indexSource, ts.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__.spec.tsx.template → js/__fileName__.spec.__ext__}

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
-
 import <%= className %> from './<%= fileName %>';
 
 describe('<%= className %>', () => {

package/src/generators/component/files/{__fileName__.tsx.template → 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,10 @@
+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,9 +1,12 @@
 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;
+    fileExtension: string;
+    fileExtensionType: FileExtensionType;
     className: string;
     filePath: string;
     projectName: string;

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

@@ -4,13 +4,15 @@ 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, fileName, filePath, directory, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName: name, fileName, fileExtension, fileExtensionType, filePath, directory, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
         name: options.name,
         path: options.path,
-        fileExtension: 'tsx',
+        allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+        fileExtension: options.js ? 'js' : 'tsx',
+        js: options.js,
     });
-    const project = (0, devkit_1.getProjects)(host).get(projectName);
     const { className } = (0, devkit_1.names)(name);
+    const project = (0, devkit_1.getProjects)(host).get(projectName);
     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.`);
@@ -22,6 +24,8 @@ async function normalizeOptions(host, options) {
         directory,
         className,
         fileName,
+        fileExtension,
+        fileExtensionType,
         filePath,
         projectSourceRoot,
         projectName,

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

@@ -4,9 +4,13 @@
 export interface Schema {
   path: string;
   name?: string;
-  skipFormat: boolean; // default is false
-  skipTests: boolean; // default is false
-  export: boolean; // default is false
-  classComponent: boolean; // default is false
-  js: boolean; // default is false
+  skipFormat?: boolean;
+  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

@@ -7,11 +7,15 @@
   "examples": [
     {
       "description": "Generate a component with the exported symbol matching the file name. It results in the component `Foo` at `mylib/src/foo.tsx`",
-      "command": "nx g @nx/expo:component mylib/src/foo"
+      "command": "nx g @nx/expo:component mylib/src/foo.tsx"
     },
     {
       "description": "Generate a component with the exported symbol different from the file name. It results in the component `Custom` at `mylib/src/foo.tsx`",
-      "command": "nx g @nx/expo:component mylib/src/foo --name=custom"
+      "command": "nx g @nx/expo:component mylib/src/foo.tsx --name=custom"
+    },
+    {
+      "description": "Generate a component without the providing the file extension. It results in the component `Foo` at `mylib/src/foo.tsx`",
+      "command": "nx g @nx/expo:component mylib/src/foo"
     },
     {
       "description": "Generate a class component at `mylib/src/foo.tsx`",
@@ -21,7 +25,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
@@ -35,7 +39,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."
     },
     "skipFormat": {
       "description": "Skip formatting files.",

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

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