fix(react): generate valid Vite + JSX setup for React

nrwl · Jul 25, 2024 · c370e40 · c370e40
1 parent 1774edd
commit c370e40
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 9 deletions.
diff --git a/packages/devkit/src/generators/to-js.spec.ts b/packages/devkit/src/generators/to-js.spec.ts
@@ -0,0 +1,45 @@
+import { createTree } from 'nx/src/generators/testing-utils/create-tree';
+import type { Tree } from 'nx/src/generators/tree';
+
+import { toJS } from './to-js';
+
+describe('toJS', () => {
+  let tree: Tree;
+  beforeEach(() => {
+    tree = createTree();
+  });
+
+  it('should renamed .ts and .tsx file to .js', () => {
+    tree.write('a.ts', '// a');
+    tree.write('b.tsx', '// b');
+
+    toJS(tree);
+
+    expect(tree.exists('a.ts')).toBeFalsy();
+    expect(tree.exists('b.tsx')).toBeFalsy();
+    expect(tree.read('a.js', 'utf-8')).toContain('// a');
+    expect(tree.read('b.js', 'utf-8')).toContain('// b');
+  });
+
+  it('should support different extensions', () => {
+    tree.write('a.ts', '// a');
+
+    toJS(tree, {
+      extension: '.mjs',
+    });
+
+    expect(tree.read('a.mjs', 'utf-8')).toContain('// a');
+  });
+
+  it('should support .jsx rather than .js files (for Vite)', () => {
+    tree.write('a.ts', '// a');
+    tree.write('b.tsx', '// b');
+
+    toJS(tree, {
+      useJsx: true,
+    });
+
+    expect(tree.read('a.js', 'utf-8')).toContain('// a');
+    expect(tree.read('b.jsx', 'utf-8')).toContain('// b');
+  });
+});
diff --git a/packages/devkit/src/generators/to-js.ts b/packages/devkit/src/generators/to-js.ts
@@ -1,12 +1,13 @@
 import type { Tree } from 'nx/src/devkit-exports';
-import type { ScriptTarget, ModuleKind } from 'typescript';
+import type { ModuleKind, ScriptTarget } from 'typescript';
 import { typescriptVersion } from '../utils/versions';
 import { ensurePackage } from '../utils/package-json';
 
 export type ToJSOptions = {
-  target?: ScriptTarget;
+  extension?: '.js' | '.mjs' | '.cjs';
   module?: ModuleKind;
-  extension: '.js' | '.mjs' | '.cjs';
+  target?: ScriptTarget;
+  useJsx?: boolean;
 };
 
 /**
@@ -32,10 +33,15 @@ export function toJS(tree: Tree, options?: ToJSOptions): void {
           module: options?.module ?? ModuleKind.ESNext,
         })
       );
-      tree.rename(
-        c.path,
-        c.path.replace(/\.tsx?$/, options?.extension ?? '.js')
-      );
+      tree.rename(c.path, c.path.replace(/\.ts$/, options?.extension ?? '.js'));
+      if (options?.useJsx) {
+        tree.rename(c.path, c.path.replace(/\.tsx$/, '.jsx'));
+      } else {
+        tree.rename(
+          c.path,
+          c.path.replace(/\.tsx$/, options?.extension ?? '.js')
+        );
+      }
     }
   }
 }
diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
@@ -399,6 +399,19 @@ describe('app', () => {
     });
 
     expect(appTree.read('my-app/vite.config.ts', 'utf-8')).toMatchSnapshot();
+    expect(appTree.read('my-app/index.html', 'utf-8')).toContain('main.tsx');
+  });
+
+  it('should setup vite if bundler is vite (--js)', async () => {
+    await applicationGenerator(appTree, {
+      ...schema,
+      name: 'my-app',
+      bundler: 'vite',
+      js: true,
+    });
+
+    expect(appTree.read('my-app/index.html', 'utf-8')).toContain('main.jsx');
+    expect(appTree.exists('my-app/src/main.jsx')).toBeTruthy();
   });
 
   it('should setup the nx vite dev server builder if bundler is vite', async () => {

diff --git a/packages/react/src/generators/application/files/base-vite/index.html__tmpl__ b/packages/react/src/generators/application/files/base-vite/index.html__tmpl__
@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/<%= js ? 'main.jsx' : 'main.tsx' %>"></script>
   </body>
 </html>
diff --git a/packages/react/src/generators/application/lib/create-application-files.ts b/packages/react/src/generators/application/lib/create-application-files.ts
@@ -42,6 +42,7 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   const templateVariables = {
     ...names(options.name),
     ...options,
+    js: !!options.js, // Ensure this is defined in template
     tmpl: '',
     offsetFromRoot: offsetFromRoot(options.appProjectRoot),
     appTests,
@@ -155,7 +156,9 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   );
 
   if (options.js) {
-    toJS(host);
+    toJS(host, {
+      useJsx: options.bundler === 'vite',
+    });
   }
 
   createTsConfig(