feat(create-vite): add react-swc templates (#11280)

Author: bluwy

docs/guide/index.md

@@ -77,7 +77,7 @@ yarn create vite my-vue-app --template vue
 pnpm create vite my-vue-app --template vue
 ```
 
-See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`.
+See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `react-swc`, `react-swc-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`.
 
 ## Community Templates
 

packages/create-vite/README.md

@@ -49,6 +49,8 @@ Currently supported template presets include:
 - `vue-ts`
 - `react`
 - `react-ts`
+- `react-swc`
+- `react-swc-ts`
 - `preact`
 - `preact-ts`
 - `lit`

packages/create-vite/src/index.ts

@@ -100,6 +100,16 @@ const FRAMEWORKS: Framework[] = [
         display: 'TypeScript',
         color: blue,
       },
+      {
+        name: 'react-swc',
+        display: 'JavaScript + SWC',
+        color: yellow,
+      },
+      {
+        name: 'react-ts-swc',
+        display: 'TypeScript + SWC',
+        color: blue,
+      },
     ],
   },
   {
@@ -292,7 +302,12 @@ async function init() {
   }
 
   // determine template
-  const template: string = variant || framework?.name || argTemplate
+  let template: string = variant || framework?.name || argTemplate
+  let isReactSwc = false
+  if (template.endsWith('-swc')) {
+    isReactSwc = true
+    template = template.slice(0, -4)
+  }
 
   const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
   const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
@@ -357,6 +372,10 @@ async function init() {
 
   write('package.json', JSON.stringify(pkg, null, 2))
 
+  if (isReactSwc) {
+    setupReactSwc(root, template.endsWith('-ts'))
+  }
+
   console.log(`\nDone. Now run:\n`)
   if (root !== cwd) {
     console.log(`  cd ${path.relative(cwd, root)}`)
@@ -438,6 +457,26 @@ function pkgFromUserAgent(userAgent: string | undefined) {
   }
 }
 
+function setupReactSwc(root: string, isTs: boolean) {
+  editFile(path.resolve(root, 'package.json'), (content) => {
+    return content.replace(
+      /"@vitejs\/plugin-react": ".+?"/,
+      `"@vitejs/plugin-react-swc": "^3.0.0"`,
+    )
+  })
+  editFile(
+    path.resolve(root, `vite.config.${isTs ? 'ts' : 'js'}`),
+    (content) => {
+      return content.replace('@vitejs/plugin-react', '@vitejs/plugin-react-swc')
+    },
+  )
+}
+
+function editFile(file: string, callback: (content: string) => string) {
+  const content = fs.readFileSync(file, 'utf-8')
+  fs.writeFileSync(file, callback(content), 'utf-8')
+}
+
 init().catch((e) => {
   console.error(e)
 })