feat(react): add swc as compiler option for react vite (#17224)

docs/generated/packages/react/generators/library.json

@@ -171,7 +171,7 @@
         "type": "string",
         "enum": ["babel", "swc"],
         "default": "babel",
-        "description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
+        "description": "Which compiler to use."
       },
       "skipPackageJson": {
         "description": "Do not add dependencies to `package.json`.",

docs/generated/packages/vite/generators/configuration.json

@@ -32,6 +32,12 @@
         "default": "none",
         "x-prompt": "What UI framework plugin should Vite use?"
       },
+      "compiler": {
+        "type": "string",
+        "description": "Compiler to use for Vite when UI Framework is React.",
+        "enum": ["babel", "swc"],
+        "default": "babel"
+      },
       "newProject": {
         "type": "boolean",
         "description": "Is this a new project?",

docs/generated/packages/vite/generators/init.json

@@ -15,6 +15,12 @@
         "default": "react",
         "x-prompt": "What UI framework plugin should Vite use?"
       },
+      "compiler": {
+        "type": "string",
+        "description": "Compiler to use for Vite when UI Framework is React.",
+        "enum": ["babel", "swc"],
+        "default": "babel"
+      },
       "includeLib": {
         "type": "boolean",
         "description": "Add dependencies needed to build libraries.",

e2e/react-extensions/src/react-vite.test.ts

@@ -19,11 +19,32 @@ describe('Build React applications and libraries with Vite', () => {
     cleanupProject();
   });
 
-  it('should test and lint app with bundler=vite', async () => {
+  it('should test and lint app with bundler=vite and compiler=babel', async () => {
     const viteApp = uniq('viteapp');
 
     runCLI(
-      `generate @nx/react:app ${viteApp} --bundler=vite --unitTestRunner=vitest --no-interactive`
+      `generate @nx/react:app ${viteApp} --bundler=vite --compiler=babel --unitTestRunner=vitest --no-interactive`
+    );
+
+    const appTestResults = await runCLIAsync(`test ${viteApp}`);
+    expect(appTestResults.combinedOutput).toContain(
+      'Successfully ran target test'
+    );
+
+    const appLintResults = await runCLIAsync(`lint ${viteApp}`);
+    expect(appLintResults.combinedOutput).toContain(
+      'Successfully ran target lint'
+    );
+
+    await runCLIAsync(`build ${viteApp}`);
+    checkFilesExist(`dist/apps/${viteApp}/index.html`);
+  }, 300_000);
+
+  it('should test and lint app with bundler=vite and compiler=swc', async () => {
+    const viteApp = uniq('viteapp');
+
+    runCLI(
+      `generate @nx/react:app ${viteApp} --bundler=vite --compiler=swc --unitTestRunner=vitest --no-interactive`
     );
 
     const appTestResults = await runCLIAsync(`test ${viteApp}`);

packages/react/src/generators/application/application.ts

@@ -131,6 +131,7 @@ export async function applicationGenerator(
       newProject: true,
       includeVitest: options.unitTestRunner === 'vitest',
       inSourceTests: options.inSourceTests,
+      compiler: options.compiler,
       skipFormat: true,
     });
     tasks.push(viteTask);

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

@@ -73,6 +73,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
       includeLib: true,
       inSourceTests: options.inSourceTests,
       includeVitest: options.unitTestRunner === 'vitest',
+      compiler: options.compiler,
       skipFormat: true,
     });
     tasks.push(viteTask);

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

@@ -174,7 +174,7 @@
       "type": "string",
       "enum": ["babel", "swc"],
       "default": "babel",
-      "description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
+      "description": "Which compiler to use."
     },
     "skipPackageJson": {
       "description": "Do not add dependencies to `package.json`.",

packages/vite/src/generators/configuration/configuration.ts

@@ -152,6 +152,7 @@ export async function viteConfigurationGenerator(
   const initTask = await initGenerator(tree, {
     uiFramework: schema.uiFramework,
     includeLib: schema.includeLib,
+    compiler: schema.compiler,
   });
   tasks.push(initTask);
 

packages/vite/src/generators/configuration/schema.d.ts

@@ -1,5 +1,6 @@
 export interface ViteConfigurationGeneratorSchema {
   uiFramework: 'react' | 'none';
+  compiler?: 'babel' | 'swc';
   project: string;
   newProject?: boolean;
   includeVitest?: boolean;

packages/vite/src/generators/configuration/schema.json

@@ -32,6 +32,12 @@
       "default": "none",
       "x-prompt": "What UI framework plugin should Vite use?"
     },
+    "compiler": {
+      "type": "string",
+      "description": "Compiler to use for Vite when UI Framework is React.",
+      "enum": ["babel", "swc"],
+      "default": "babel"
+    },
     "newProject": {
       "type": "boolean",
       "description": "Is this a new project?",

packages/vite/src/generators/init/init.ts

@@ -17,6 +17,7 @@ import {
   vitePluginDtsVersion,
   vitePluginEslintVersion,
   vitePluginReactVersion,
+  vitePluginReactSwcVersion,
   vitestUiVersion,
   vitestVersion,
   viteTsConfigPathsVersion,
@@ -41,7 +42,11 @@ function checkDependenciesInstalled(host: Tree, schema: InitGeneratorSchema) {
   devDependencies['jsdom'] = jsdomVersion;
 
   if (schema.uiFramework === 'react') {
-    devDependencies['@vitejs/plugin-react'] = vitePluginReactVersion;
+    if (schema.compiler === 'swc') {
+      devDependencies['@vitejs/plugin-react-swc'] = vitePluginReactSwcVersion;
+    } else {
+      devDependencies['@vitejs/plugin-react'] = vitePluginReactVersion;
+    }
   }
 
   if (schema.includeLib) {

packages/vite/src/generators/init/schema.d.ts

@@ -1,4 +1,5 @@
 export interface InitGeneratorSchema {
   uiFramework: 'react' | 'none';
+  compiler?: 'babel' | 'swc';
   includeLib?: boolean;
 }

packages/vite/src/generators/init/schema.json

@@ -12,6 +12,12 @@
       "default": "react",
       "x-prompt": "What UI framework plugin should Vite use?"
     },
+    "compiler": {
+      "type": "string",
+      "description": "Compiler to use for Vite when UI Framework is React.",
+      "enum": ["babel", "swc"],
+      "default": "babel"
+    },
     "includeLib": {
       "type": "boolean",
       "description": "Add dependencies needed to build libraries.",

packages/vite/src/utils/generator-utils.ts

@@ -556,7 +556,9 @@ export function createOrEditViteConfig(
 
   const reactPluginImportLine =
     options.uiFramework === 'react'
-      ? `import react from '@vitejs/plugin-react';`
+      ? options.compiler === 'swc'
+        ? `import react from '@vitejs/plugin-react-swc';`
+        : `import react from '@vitejs/plugin-react';`
       : '';
 
   const reactPlugin = options.uiFramework === 'react' ? `react(),` : '';

packages/vite/src/utils/versions.ts

@@ -4,6 +4,7 @@ export const vitePluginEslintVersion = '^1.8.1';
 export const vitestVersion = '^0.31.0';
 export const vitestUiVersion = '^0.31.0';
 export const vitePluginReactVersion = '^3.0.0';
+export const vitePluginReactSwcVersion = '^3.3.1';
 export const vitePluginVueVersion = '^3.2.0';
 export const vitePluginVueJsxVersion = '^2.1.1';
 export const viteTsConfigPathsVersion = '^4.0.2';