create-vite-extra 2.2.0 → 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,7 +53,7 @@ pnpm create vite-extra my-vue-app --template ssr-vue
 deno run -A npm:create-vite-extra --template deno-vue
 
 # Bun
-bunx create-vite-extra my-vue-app --template ssr-vue
+bun create vite-extra my-vue-app --template ssr-vue
 ```
 
 Currently supported template presets include:

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,16 +72,16 @@ const FRAMEWORKS = [
           {
             name: 'ssr-vue',
             display: 'JavaScript',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-vue-ts',
             display: 'TypeScript',
-            color: blue
-          }
-        ]
-      }
-    ]
+            color: blue,
+          },
+        ],
+      },
+    ],
   },
   {
     name: 'ssr-react',
@@ -93,24 +95,24 @@ const FRAMEWORKS = [
           {
             name: 'ssr-react-streaming',
             display: 'JavaScript',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-react-streaming-ts',
             display: 'TypeScript',
-            color: blue
+            color: blue,
           },
           {
             name: 'ssr-react-swc-streaming',
             display: 'JavaScript + SWC',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-react-swc-streaming-ts',
             display: 'TypeScript + SWC',
-            color: blue
-          }
-        ]
+            color: blue,
+          },
+        ],
       },
       {
         name: 'ssr-react',
@@ -120,26 +122,26 @@ const FRAMEWORKS = [
           {
             name: 'ssr-react',
             display: 'JavaScript',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-react-ts',
             display: 'TypeScript',
-            color: blue
+            color: blue,
           },
           {
             name: 'ssr-react-swc',
             display: 'JavaScript + SWC',
-            color: yellow
+            color: yellow,
           },
           {
             name: 'ssr-react-swc-ts',
             display: 'TypeScript + SWC',
-            color: blue
-          }
-        ]
-      }
-    ]
+            color: blue,
+          },
+        ],
+      },
+    ],
   },
   {
     name: 'ssr-preact',
@@ -148,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',
@@ -164,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',
@@ -196,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',
@@ -212,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',
@@ -228,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',
@@ -254,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',
@@ -286,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() {
@@ -363,7 +365,7 @@ async function init() {
           initial: defaultTargetDir,
           onState: (state) => {
             targetDir = formatTargetDir(state.value) || defaultTargetDir
-          }
+          },
         },
         {
           type: () =>
@@ -373,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
@@ -383,7 +385,7 @@ async function init() {
             }
             return null
           },
-          name: 'overwriteChecker'
+          name: 'overwriteChecker',
         },
         {
           type: () => (isValidPackageName(getProjectName()) ? null : 'text'),
@@ -391,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:
@@ -400,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,
@@ -408,9 +410,9 @@ async function init() {
             const frameworkColor = framework.color
             return {
               title: frameworkColor(framework.display || framework.name),
-              value: framework
+              value: framework,
             }
-          })
+          }),
         },
         // Variant 1
         {
@@ -424,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
         {
@@ -440,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)
@@ -480,7 +482,7 @@ async function init() {
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
     '..',
-    `template-${template}`
+    `template-${template}`,
   )
 
   const write = (file, content) => {
@@ -513,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()
@@ -566,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,
   )
 }
 
@@ -625,7 +627,7 @@ function pkgFromUserAgent(userAgent) {
   const pkgSpecArr = pkgSpec.split('/')
   return {
     name: pkgSpecArr[0],
-    version: pkgSpecArr[1]
+    version: pkgSpecArr[1],
   }
 }
 
@@ -636,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')
+    },
+  )
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vite-extra",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "license": "MIT",
   "author": "Bjorn Lu",
@@ -28,11 +28,15 @@
   },
   "homepage": "https://github.com/bluwy/create-vite-extra#readme",
   "dependencies": {
-    "kolorist": "^1.8.0",
     "minimist": "^1.2.8",
+    "picocolors": "^1.1.0",
     "prompts": "^2.4.2"
   },
+  "devDependencies": {
+    "prettier": "^3.3.3"
+  },
   "scripts": {
+    "format": "prettier --write .",
     "update-deps": "pnpm update -r --latest && node update-deno-deps.js"
   }
 }

package/template-deno-lit/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["denoland.vscode-deno"]
+}

package/template-deno-lit/README.md

@@ -2,7 +2,7 @@
 
 ## Running
 
-You need to have Deno v1.28.0 or later intalled to run this repo.
+You need to have Deno v2.0.0 or later intalled to run this repo.
 
 Start a dev server:
 
@@ -17,14 +17,3 @@ Build production assets:
 ```
 $ deno task build
 ```
-
-## Notes
-
-- You need to use `.mjs` or `.mts` extension for the `vite.config.[ext]` file.
-
-## Papercuts
-
-Currently there's a "papercut" for Deno users:
-
-- peer dependencies need to be referenced in `vite.config.js` - in this example
-  it is `lit` package that needs to be referenced

package/template-deno-lit/deno.json

@@ -2,5 +2,13 @@
   "tasks": {
     "dev": "deno run -A --node-modules-dir npm:vite",
     "build": "deno run -A --node-modules-dir npm:vite build"
+  },
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+  },
+  "imports": {
+    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0",
+    "lit": "npm:lit@^2.7.5",
+    "vite": "npm:vite@^5.4.8"
   }
 }

package/template-deno-lit/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

package/template-deno-lit/src/my-element.js

@@ -18,7 +18,7 @@ export class MyElement extends LitElement {
       /**
        * The number of times the button has been clicked.
        */
-      count: { type: Number }
+      count: { type: Number },
     }
   }
 
@@ -32,7 +32,7 @@ export class MyElement extends LitElement {
     return html`
       <img src="/vite-deno.svg" alt="Vite with Deno" />
       <div>
-        <a href="https://vitejs.dev" target="_blank">
+        <a href="https://vite.dev" target="_blank">
           <img src="/vite.svg" class="logo" alt="Vite logo" />
         </a>
         <a href="https://lit.dev" target="_blank">
@@ -127,4 +127,4 @@ export class MyElement extends LitElement {
   }
 }
 
-window.customElements.define('my-element', MyElement)
+globalThis.customElements.define('my-element', MyElement)

package/template-deno-lit/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import deno from '@deno/vite-plugin'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [deno()],
+  build: {
+    lib: {
+      entry: 'src/my-element.js',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: /^lit/,
+    },
+  },
+})