create-vite-extra 2.1.1 → 2.3.0

package/README.md

@@ -32,7 +32,7 @@ $ deno run -A npm:create-vite-extra
 With Bun:
 
 ```bash
-$ bunx create-vite-extra
+$ bun create vite-extra
 ```
 
 Then follow the prompts!
@@ -53,44 +53,48 @@ pnpm create vite-extra my-vue-app --template ssr-vue
 deno run -A npm:create-vite-extra --template deno-vue
 
 # Bun
-bunx create-vite my-vue-app --template ssr-vue
+bun create vite-extra my-vue-app --template ssr-vue
 ```
 
 Currently supported template presets include:
 
-| Template               | Try online                                                                                                         |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `ssr-vanilla`          | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vanilla)          |
-| `ssr-vanilla-ts`       | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vanilla-ts)       |
-| `ssr-vue`              | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue)              |
-| `ssr-vue-ts`           | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-ts)           |
-| `ssr-vue-streaming`    | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-streaming)    |
-| `ssr-vue-streaming-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-streaming-ts) |
-| `ssr-react`            | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react)            |
-| `ssr-react-ts`         | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-ts)         |
-| `ssr-react-swc`        |                                                                                                                    |
-| `ssr-react-swc-ts`     |                                                                                                                    |
-| `ssr-preact`           | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-preact)           |
-| `ssr-preact-ts`        | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-preact-ts)        |
-| `ssr-svelte`           | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-svelte)           |
-| `ssr-svelte-ts`        | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-svelte-ts)        |
-| `deno-vanilla`         |                                                                                                                    |
-| `deno-vanilla-ts`      |                                                                                                                    |
-| `deno-vue`             |                                                                                                                    |
-| `deno-vue-ts`          |                                                                                                                    |
-| `deno-react`           |                                                                                                                    |
-| `deno-react-ts`        |                                                                                                                    |
-| `deno-react-swc`       |                                                                                                                    |
-| `deno-react-swc-ts`    |                                                                                                                    |
-| `deno-preact`          |                                                                                                                    |
-| `deno-preact-ts`       |                                                                                                                    |
-| `deno-lit`             |                                                                                                                    |
-| `deno-lit-ts`          |                                                                                                                    |
-| `deno-svelte`          |                                                                                                                    |
-| `deno-svelte-ts`       |                                                                                                                    |
-| `library`              | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-library)              |
-| `library-ts`           | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-library-ts)           |
-| `ssr-transform`        | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-transform)        |
+| Template                     | Try online                                                                                                           |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `ssr-vanilla`                | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vanilla)            |
+| `ssr-vanilla-ts`             | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vanilla-ts)         |
+| `ssr-vue`                    | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue)                |
+| `ssr-vue-ts`                 | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-ts)             |
+| `ssr-vue-streaming`          | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-streaming)      |
+| `ssr-vue-streaming-ts`       | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-streaming-ts)   |
+| `ssr-react`                  | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react)              |
+| `ssr-react-ts`               | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-ts)           |
+| `ssr-react-streaming`        | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-streaming)    |
+| `ssr-react-streaming-ts`     | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-streaming-ts) |
+| `ssr-react-swc`              |                                                                                                                      |
+| `ssr-react-swc-ts`           |                                                                                                                      |
+| `ssr-react-swc-streaming`    |                                                                                                                      |
+| `ssr-react-swc-streaming-ts` |                                                                                                                      |
+| `ssr-preact`                 | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-preact)             |
+| `ssr-preact-ts`              | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-preact-ts)          |
+| `ssr-svelte`                 | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-svelte)             |
+| `ssr-svelte-ts`              | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-svelte-ts)          |
+| `deno-vanilla`               |                                                                                                                      |
+| `deno-vanilla-ts`            |                                                                                                                      |
+| `deno-vue`                   |                                                                                                                      |
+| `deno-vue-ts`                |                                                                                                                      |
+| `deno-react`                 |                                                                                                                      |
+| `deno-react-ts`              |                                                                                                                      |
+| `deno-react-swc`             |                                                                                                                      |
+| `deno-react-swc-ts`          |                                                                                                                      |
+| `deno-preact`                |                                                                                                                      |
+| `deno-preact-ts`             |                                                                                                                      |
+| `deno-lit`                   |                                                                                                                      |
+| `deno-lit-ts`                |                                                                                                                      |
+| `deno-svelte`                |                                                                                                                      |
+| `deno-svelte-ts`             |                                                                                                                      |
+| `library`                    | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-library)                |
+| `library-ts`                 | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-library-ts)             |
+| `ssr-transform`              | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-transform)          |
 
 You can use `.` for the project name to scaffold in the current directory.
 

package/index.js

@@ -6,18 +6,20 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import minimist from 'minimist'
 import prompts from 'prompts'
-import {
+import colors from 'picocolors'
+
+const {
   blue,
   cyan,
   green,
-  lightRed,
-  lightBlue,
+  redBright,
+  blueBright,
   magenta,
   red,
   reset,
   yellow,
-  lightMagenta
-} from 'kolorist'
+  magentaBright,
+} = colors
 
 // Avoids autoconversion to number of the project name by defining that the args
 // non associated with an option ( _ ) needs to be parsed as a string. See #4606
@@ -32,14 +34,14 @@ const FRAMEWORKS = [
       {
         name: 'ssr-vanilla',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'ssr-vanilla-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'ssr-vue',
@@ -53,14 +55,14 @@ const FRAMEWORKS = [
           {
             name: 'ssr-vue-streaming',
             display: 'JavaScript',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-vue-streaming-ts',
             display: 'TypeScript',
-            color: blue
-          }
-        ]
+            color: blue,
+          },
+        ],
       },
       {
         name: 'ssr-vue',
@@ -70,42 +72,76 @@ const FRAMEWORKS = [
           {
             name: 'ssr-vue',
             display: 'JavaScript',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-vue-ts',
             display: 'TypeScript',
-            color: blue
-          }
-        ]
-      }
-    ]
+            color: blue,
+          },
+        ],
+      },
+    ],
   },
   {
     name: 'ssr-react',
     color: cyan,
     variants: [
       {
-        name: 'ssr-react',
-        display: 'JavaScript',
-        color: yellow
-      },
-      {
-        name: 'ssr-react-ts',
-        display: 'TypeScript',
-        color: blue
+        name: 'ssr-react-streaming',
+        display: 'Streaming',
+        color: cyan,
+        variants: [
+          {
+            name: 'ssr-react-streaming',
+            display: 'JavaScript',
+            color: yellow,
+          },
+          {
+            name: 'ssr-react-streaming-ts',
+            display: 'TypeScript',
+            color: blue,
+          },
+          {
+            name: 'ssr-react-swc-streaming',
+            display: 'JavaScript + SWC',
+            color: yellow,
+          },
+          {
+            name: 'ssr-react-swc-streaming-ts',
+            display: 'TypeScript + SWC',
+            color: blue,
+          },
+        ],
       },
       {
-        name: 'ssr-react-swc',
-        display: 'JavaScript + SWC',
-        color: yellow
+        name: 'ssr-react',
+        display: 'Non-streaming',
+        color: cyan,
+        variants: [
+          {
+            name: 'ssr-react',
+            display: 'JavaScript',
+            color: yellow,
+          },
+          {
+            name: 'ssr-react-ts',
+            display: 'TypeScript',
+            color: blue,
+          },
+          {
+            name: 'ssr-react-swc',
+            display: 'JavaScript + SWC',
+            color: yellow,
+          },
+          {
+            name: 'ssr-react-swc-ts',
+            display: 'TypeScript + SWC',
+            color: blue,
+          },
+        ],
       },
-      {
-        name: 'ssr-react-swc-ts',
-        display: 'TypeScript + SWC',
-        color: blue
-      }
-    ]
+    ],
   },
   {
     name: 'ssr-preact',
@@ -114,14 +150,14 @@ const FRAMEWORKS = [
       {
         name: 'ssr-preact',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'ssr-preact-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'ssr-svelte',
@@ -130,30 +166,30 @@ const FRAMEWORKS = [
       {
         name: 'ssr-svelte',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'ssr-svelte-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'ssr-solid',
-    color: lightBlue,
+    color: blueBright,
     variants: [
       {
         name: 'ssr-solid',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'ssr-solid-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-vanilla',
@@ -162,14 +198,14 @@ const FRAMEWORKS = [
       {
         name: 'deno-vanilla',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-vanilla-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-vue',
@@ -178,14 +214,14 @@ const FRAMEWORKS = [
       {
         name: 'deno-vue',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-vue-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-react',
@@ -194,24 +230,24 @@ const FRAMEWORKS = [
       {
         name: 'deno-react',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-react-ts',
         display: 'TypeScript',
-        color: blue
+        color: blue,
       },
       {
         name: 'deno-react-swc',
         display: 'JavaScript + SWC',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-react-swc-ts',
         display: 'TypeScript + SWC',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-preact',
@@ -220,30 +256,30 @@ const FRAMEWORKS = [
       {
         name: 'deno-preact',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-preact-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-lit',
-    color: lightRed,
+    color: redBright,
     variants: [
       {
         name: 'deno-lit',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-lit-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-svelte',
@@ -252,59 +288,59 @@ const FRAMEWORKS = [
       {
         name: 'deno-svelte',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-svelte-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'deno-solid',
-    color: lightBlue,
+    color: blueBright,
     variants: [
       {
         name: 'deno-solid',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'deno-solid-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'library',
-    color: lightMagenta,
+    color: magentaBright,
     variants: [
       {
         name: 'library',
         display: 'JavaScript',
-        color: yellow
+        color: yellow,
       },
       {
         name: 'library-ts',
         display: 'TypeScript',
-        color: blue
-      }
-    ]
+        color: blue,
+      },
+    ],
   },
   {
     name: 'ssr-transform',
-    color: lightRed
-  }
+    color: redBright,
+  },
 ]
 
 const TEMPLATES = FRAMEWORKS.map(
-  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name],
 ).reduce((a, b) => a.concat(b), [])
 
 const renameFiles = {
-  _gitignore: '.gitignore'
+  _gitignore: '.gitignore',
 }
 
 async function init() {
@@ -329,7 +365,7 @@ async function init() {
           initial: defaultTargetDir,
           onState: (state) => {
             targetDir = formatTargetDir(state.value) || defaultTargetDir
-          }
+          },
         },
         {
           type: () =>
@@ -339,7 +375,7 @@ async function init() {
             (targetDir === '.'
               ? 'Current directory'
               : `Target directory "${targetDir}"`) +
-            ` is not empty. Remove existing files and continue?`
+            ` is not empty. Remove existing files and continue?`,
         },
         {
           // @ts-ignore
@@ -349,7 +385,7 @@ async function init() {
             }
             return null
           },
-          name: 'overwriteChecker'
+          name: 'overwriteChecker',
         },
         {
           type: () => (isValidPackageName(getProjectName()) ? null : 'text'),
@@ -357,7 +393,7 @@ async function init() {
           message: reset('Package name:'),
           initial: () => toValidPackageName(getProjectName()),
           validate: (dir) =>
-            isValidPackageName(dir) || 'Invalid package.json name'
+            isValidPackageName(dir) || 'Invalid package.json name',
         },
         {
           type:
@@ -366,7 +402,7 @@ async function init() {
           message:
             typeof argTemplate === 'string' && !TEMPLATES.includes(argTemplate)
               ? reset(
-                  `"${argTemplate}" isn't a valid template. Please choose from below: `
+                  `"${argTemplate}" isn't a valid template. Please choose from below: `,
                 )
               : reset('Select a template:'),
           initial: 0,
@@ -374,9 +410,9 @@ async function init() {
             const frameworkColor = framework.color
             return {
               title: frameworkColor(framework.display || framework.name),
-              value: framework
+              value: framework,
             }
-          })
+          }),
         },
         // Variant 1
         {
@@ -390,9 +426,9 @@ async function init() {
               const variantColor = variant.color
               return {
                 title: variantColor(variant.display || variant.name),
-                value: variant.variants ? variant : variant.name
+                value: variant.variants ? variant : variant.name,
               }
-            })
+            }),
         },
         // Variant 2
         {
@@ -406,16 +442,16 @@ async function init() {
               const variantColor = variant.color
               return {
                 title: variantColor(variant.display || variant.name),
-                value: variant.name
+                value: variant.name,
               }
-            })
-        }
+            }),
+        },
       ],
       {
         onCancel: () => {
           throw new Error(red('✖') + ' Operation cancelled')
-        }
-      }
+        },
+      },
     )
   } catch (cancelled) {
     console.log(cancelled.message)
@@ -446,7 +482,7 @@ async function init() {
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
     '..',
-    `template-${template}`
+    `template-${template}`,
   )
 
   const write = (file, content) => {
@@ -479,7 +515,7 @@ async function init() {
     console.log()
   } else {
     const pkg = JSON.parse(
-      fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
+      fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8'),
     )
 
     pkg.name = packageName || getProjectName()
@@ -532,7 +568,7 @@ function copy(src, dest) {
  */
 function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
-    projectName
+    projectName,
   )
 }
 
@@ -591,7 +627,7 @@ function pkgFromUserAgent(userAgent) {
   const pkgSpecArr = pkgSpec.split('/')
   return {
     name: pkgSpecArr[0],
-    version: pkgSpecArr[1]
+    version: pkgSpecArr[1],
   }
 }
 
@@ -602,34 +638,25 @@ function pkgFromUserAgent(userAgent) {
 function setupReactSwc(root, { isTs, isDeno }) {
   if (isDeno) {
     editFile(path.resolve(root, 'deno.json'), (content) => {
-      return content.replace(/deno run -A/g, 'deno run -A --unstable')
+      return content.replace(
+        /"@vitejs\/plugin-react": ".+?"/,
+        `"@vitejs/plugin-react-swc": "npm:@vitejs/plugin-react-swc@^3.7.1"`,
+      )
     })
-    editFile(
-      path.resolve(root, `vite.config.m${isTs ? 'ts' : 'js'}`),
-      (content) => {
-        return content.replace(
-          /@vitejs\/plugin-react@.+?'/,
-          "@vitejs/plugin-react-swc@^3.5.0'"
-        )
-      }
-    )
   } else {
     editFile(path.resolve(root, 'package.json'), (content) => {
       return content.replace(
         /"@vitejs\/plugin-react": ".+?"/,
-        `"@vitejs/plugin-react-swc": "^3.5.0"`
+        `"@vitejs/plugin-react-swc": "^3.7.1"`,
       )
     })
-    editFile(
-      path.resolve(root, `vite.config.${isTs ? 'ts' : 'js'}`),
-      (content) => {
-        return content.replace(
-          '@vitejs/plugin-react',
-          '@vitejs/plugin-react-swc'
-        )
-      }
-    )
   }
+  editFile(
+    path.resolve(root, `vite.config.${isTs ? 'ts' : 'js'}`),
+    (content) => {
+      return content.replace('@vitejs/plugin-react', '@vitejs/plugin-react-swc')
+    },
+  )
 }
 
 /**