feat(misc)!: remove deprecated js option from component generators

astro-docs/src/content/docs/technologies/typescript/Guides/js-and-ts.mdoc

@@ -8,11 +8,11 @@ filter: 'type:Guides'
 
 Nx is a general-purpose monorepo platform and CLI. It works with JavaScript, TypeScript, Java, C#, Go, etc.. The core plugins Nx comes with do work best with JavaScript or TypeScript.
 
-TypeScript is a great choice for many teams, but not for everyone. If you want to use Nx with JavaScript, simply pass `--js` to all generate commands, as follows:
+TypeScript is a great choice for many teams, but not for everyone. If you want to use Nx with JavaScript, application and library generators support a `--js` flag. For component generators, include the file extension directly in the `path` argument:
 
 ```shell
 nx g @nx/react:app apps/myapp --js
-nx g @nx/react:component apps/myapp/src/lib/mycmp --js
+nx g @nx/react:component apps/myapp/src/lib/mycmp.jsx
 ```
 
 You can build/test/lint/serve your applications and libraries the same way whether you use JavaScript and TypeScript. You can also mix and match them.

packages/expo/src/generators/component/component.spec.ts

@@ -22,7 +22,6 @@ describe('component', () => {
       skipTests: false,
       export: false,
       classComponent: false,
-      js: false,
       skipFormat: true,
     };
 
@@ -68,6 +67,17 @@ describe('component', () => {
     expect(appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
   });
 
+  it('should generate jsx when path has .jsx extension', async () => {
+    await expoComponentGenerator(appTree, {
+      ...defaultSchema,
+      path: 'my-lib/src/lib/hello/hello.jsx',
+    });
+
+    expect(appTree.exists('my-lib/src/lib/hello/hello.jsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.spec.jsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeFalsy();
+  });
+
   it('should generate files for an app', async () => {
     await expoComponentGenerator(appTree, {
       ...defaultSchema,

packages/expo/src/generators/component/lib/normalize-options.ts

@@ -6,7 +6,7 @@ import {
 import { Schema } from '../schema';
 import { getProjectType } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
-export interface NormalizedSchema extends Omit<Schema, 'js'> {
+export interface NormalizedSchema extends Schema {
   directory: string;
   projectSourceRoot: string;
   fileName: string;
@@ -34,8 +34,7 @@ export async function normalizeOptions(
     name: options.name,
     path: options.path,
     allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-    fileExtension: options.js ? 'js' : 'tsx',
-    js: options.js,
+    fileExtension: 'tsx',
   });
 
   const { className } = names(name);

packages/expo/src/generators/component/schema.d.ts

@@ -8,9 +8,4 @@ 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/expo/src/generators/component/schema.json

@@ -36,11 +36,6 @@
       "type": "string",
       "description": "The component symbol name. Defaults to the last segment of the file path."
     },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "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.",
       "type": "boolean",

packages/expo/src/generators/library/library.spec.ts

@@ -447,6 +447,8 @@ describe('lib', () => {
       });
 
       expect(appTree.exists('my-lib/src/index.js')).toBe(true);
+      expect(appTree.exists('my-lib/src/lib/my-lib.js')).toBe(true);
+      expect(appTree.exists('my-lib/src/lib/my-lib.tsx')).toBe(false);
     });
   });
 

packages/expo/src/generators/library/library.ts

@@ -102,14 +102,13 @@ export async function expoLibraryGeneratorInternal(
   const path = joinPathFragments(
     options.projectRoot,
     'src/lib',
-    options.fileName
+    options.js ? `${options.fileName}.js` : options.fileName
   );
   const componentTask = await expoComponentGenerator(host, {
     path: relativeCwd ? relative(relativeCwd, path) : path,
     skipTests: options.unitTestRunner === 'none',
     export: true,
     skipFormat: true,
-    js: options.js,
   });
   tasks.push(() => componentTask);
 

packages/next/src/generators/page/page.ts

@@ -81,17 +81,18 @@ async function normalizeOptions(host: Tree, options: Schema) {
   }
 
   const fileName = options.fileName || (isAppRouter ? 'page' : 'index');
+  const { js, ...rest } = options;
   const { project: projectName, filePath } =
     await determineArtifactNameAndDirectoryOptions(host, {
       name: pageSymbolName,
       path: joinPathFragments(
         options.path,
-        `${fileName}.${options.js ? 'jsx' : 'tsx'}`
+        `${fileName}.${js ? 'jsx' : 'tsx'}`
       ),
     });
 
   return {
-    ...options,
+    ...rest,
     path: filePath,
     projectName,
   };

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

@@ -42,6 +42,16 @@ describe('component', () => {
     expect(appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
   });
 
+  it('should generate jsx when path has .jsx extension', async () => {
+    await reactNativeComponentGenerator(appTree, {
+      path: `${projectName}/src/lib/hello/hello.jsx`,
+    });
+
+    expect(appTree.exists('my-lib/src/lib/hello/hello.jsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.spec.jsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeFalsy();
+  });
+
   it('should generate files for an app', async () => {
     await reactNativeComponentGenerator(appTree, {
       name: 'hello',

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

@@ -6,7 +6,7 @@ import {
 import { Schema } from '../schema';
 import { getProjectType } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
-export interface NormalizedSchema extends Omit<Schema, 'js'> {
+export interface NormalizedSchema extends Schema {
   directory: string;
   projectSourceRoot: string;
   fileName: string;
@@ -34,8 +34,7 @@ export async function normalizeOptions(
     path: options.path,
     name: options.name,
     allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-    fileExtension: options.js ? 'js' : 'tsx',
-    js: options.js,
+    fileExtension: 'tsx',
   });
 
   const project = getProjects(host).get(projectName);

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

@@ -8,9 +8,4 @@ export interface Schema {
   export?: boolean;
   classComponent?: boolean;
   skipFormat?: 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

@@ -37,11 +37,6 @@
       "type": "string",
       "description": "The component symbol name. Defaults to the last segment of the file path."
     },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "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",
       "description": "When true, does not create `spec.ts` test files for the new component.",

packages/react-native/src/generators/library/library.spec.ts

@@ -377,6 +377,8 @@ describe('lib', () => {
       });
 
       expect(appTree.exists('my-lib/src/index.js')).toBe(true);
+      expect(appTree.exists('my-lib/src/lib/my-lib.js')).toBe(true);
+      expect(appTree.exists('my-lib/src/lib/my-lib.tsx')).toBe(false);
     });
   });
 

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

@@ -121,14 +121,13 @@ export async function reactNativeLibraryGeneratorInternal(
   const path = joinPathFragments(
     options.projectRoot,
     'src/lib',
-    options.fileName
+    options.js ? `${options.fileName}.js` : options.fileName
   );
   const componentTask = await componentGenerator(host, {
     path: relativeCwd ? relative(relativeCwd, path) : path,
     skipTests: options.unitTestRunner === 'none',
     export: true,
     skipFormat: true,
-    js: options.js,
   });
   tasks.push(() => componentTask);
 

packages/react/src/generators/component/component.spec.ts

@@ -80,6 +80,18 @@ describe('component', () => {
     );
   });
 
+  it('should generate jsx when path has .jsx extension', async () => {
+    await componentGenerator(appTree, {
+      name: 'hello',
+      style: 'css',
+      path: `${projectName}/src/lib/hello/hello.jsx`,
+    });
+
+    expect(appTree.exists('my-lib/src/lib/hello/hello.jsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.spec.jsx')).toBeTruthy();
+    expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeFalsy();
+  });
+
   it('should generate files with global CSS', async () => {
     await componentGenerator(appTree, {
       name: 'hello',

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

@@ -23,8 +23,7 @@ export async function normalizeOptions(
     path: options.path,
     name: options.name,
     allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-    fileExtension: options.js ? 'js' : 'tsx',
-    js: options.js,
+    fileExtension: 'tsx',
   });
 
   const project = readProjectConfiguration(tree, projectName);

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

@@ -14,14 +14,9 @@ export interface Schema {
   skipFormat?: boolean;
   // Used by Next.js to determine how React should generate the page
   isNextPage?: 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;
 }
 
-export interface NormalizedSchema extends Omit<Schema, 'js'> {
+export interface NormalizedSchema extends Schema {
   directory: string;
   projectRoot: string;
   projectSourceRoot: string;

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

@@ -45,11 +45,6 @@
         ]
       }
     },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "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",
       "description": "When true, does not create `spec.ts` test files for the new component.",

packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts

@@ -392,15 +392,13 @@ describe('React:CypressComponentTestConfiguration', () => {
     });
     await componentGenerator(tree, {
       name: 'some-cmp',
-      path: 'some-lib/src/lib/some-cmp',
+      path: 'some-lib/src/lib/some-cmp.js',
       style: 'scss',
-      js: true,
     });
     await componentGenerator(tree, {
       name: 'another-cmp',
-      path: 'some-lib/src/lib/another-cmp/another-cmp',
+      path: 'some-lib/src/lib/another-cmp/another-cmp.js',
       style: 'scss',
-      js: true,
     });
 
     useVite7ForCypressCT(tree);

packages/react/src/generators/library/library.spec.ts

@@ -695,6 +695,8 @@ module.exports = withNx(
       });
 
       expect(tree.exists('/my-lib/src/index.js')).toBe(true);
+      expect(tree.exists('/my-lib/src/lib/my-lib.js')).toBe(true);
+      expect(tree.exists('/my-lib/src/lib/my-lib.tsx')).toBe(false);
     });
   });
 

packages/react/src/generators/library/library.ts

@@ -246,7 +246,7 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) {
     const path = joinPathFragments(
       options.projectRoot,
       'src/lib',
-      options.fileName
+      options.js ? `${options.fileName}.js` : options.fileName
     );
     const componentTask = await componentGenerator(host, {
       path: relativeCwd ? relative(relativeCwd, path) : path,
@@ -256,7 +256,6 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) {
         (options.unitTestRunner === 'vitest' && options.inSourceTests == true),
       export: true,
       routing: options.routing,
-      js: options.js,
       name: options.name,
       inSourceTests: options.inSourceTests,
       skipFormat: true,