create-vite-extra 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present, Bjorn Lu, Yuxi (Evan) You and Vite contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# create-vite-extra
+
+## Scaffolding Your First Vite Project
+
+> **Compatibility Note:**
+> Vite requires [Node.js](https://nodejs.org/en/) version 14.18+, 16+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+
+With NPM:
+
+```bash
+$ npm create vite-extra@latest
+```
+
+With Yarn:
+
+```bash
+$ yarn create vite-extra
+```
+
+With PNPM:
+
+```bash
+$ pnpm create vite-extra
+```
+
+Then follow the prompts!
+
+You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + SSR + Vue project, run:
+
+```bash
+# npm
+npm create vite-extra@latest my-vue-app -- --template ssr-vue
+
+# yarn
+yarn create vite-extra my-vue-app --template ssr-vue
+
+# pnpm
+pnpm create vite-extra my-vue-app --template ssr-vue
+```
+
+Currently supported template presets include:
+
+- `ssr-vanilla`
+- `ssr-vanilla-ts`
+- `ssr-vue`
+- `ssr-vue-ts`
+- `ssr-react`
+- `ssr-react-ts`
+- `ssr-preact`
+- `ssr-preact-ts`
+- `ssr-svelte`
+- `ssr-svelte-ts`
+- `ssr-transform`
+- `library`
+- `library-ts`
+
+You can use `.` for the project name to scaffold in the current directory.
+
+## Community Templates
+
+create-vite is a tool to quickly start a project from a basic template for popular frameworks. Check out Awesome Vite for [community maintained templates](https://github.com/vitejs/awesome-vite#templates) that include other tools or target different frameworks. You can use a tool like [degit](https://github.com/Rich-Harris/degit) to scaffold your project with one of the templates.
+
+```bash
+npx degit user/project my-project
+cd my-project
+
+npm install
+npm run dev
+```
+
+If the project uses `main` as the default branch, suffix the project repo with `#main`
+
+```bash
+npx degit user/project#main my-project
+```
+
+## Attribution
+
+This project is originally a fork of [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite). Credit goes to all of it's contributors.

package/index.js

@@ -0,0 +1,384 @@
+#!/usr/bin/env node
+
+// @ts-check
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import minimist from 'minimist'
+import prompts from 'prompts'
+import {
+  blue,
+  cyan,
+  green,
+  lightRed,
+  magenta,
+  red,
+  reset,
+  yellow,
+  lightMagenta
+} from 'kolorist'
+
+// 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
+const argv = minimist(process.argv.slice(2), { string: ['_'] })
+const cwd = process.cwd()
+
+const FRAMEWORKS = [
+  {
+    name: 'ssr-vanilla',
+    color: yellow,
+    variants: [
+      {
+        name: 'ssr-vanilla',
+        display: 'JavaScript',
+        color: yellow
+      },
+      {
+        name: 'ssr-vanilla-ts',
+        display: 'TypeScript',
+        color: blue
+      }
+    ]
+  },
+  {
+    name: 'ssr-vue',
+    color: green,
+    variants: [
+      {
+        name: 'ssr-vue',
+        display: 'JavaScript',
+        color: yellow
+      },
+      {
+        name: 'ssr-vue-ts',
+        display: 'TypeScript',
+        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-preact',
+    color: magenta,
+    variants: [
+      {
+        name: 'ssr-preact',
+        display: 'JavaScript',
+        color: yellow
+      },
+      {
+        name: 'ssr-preact-ts',
+        display: 'TypeScript',
+        color: blue
+      }
+    ]
+  },
+  {
+    name: 'ssr-svelte',
+    color: red,
+    variants: [
+      {
+        name: 'ssr-svelte',
+        display: 'JavaScript',
+        color: yellow
+      },
+      {
+        name: 'ssr-svelte-ts',
+        display: 'TypeScript',
+        color: blue
+      }
+    ]
+  },
+
+  {
+    name: 'ssr-transform',
+    color: lightRed
+  },
+  {
+    name: 'library',
+    color: lightMagenta,
+    variants: [
+      {
+        name: 'library',
+        display: 'JavaScript',
+        color: yellow
+      },
+      {
+        name: 'library-ts',
+        display: 'TypeScript',
+        color: blue
+      }
+    ]
+  }
+]
+
+const TEMPLATES = FRAMEWORKS.map(
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
+).reduce((a, b) => a.concat(b), [])
+
+const renameFiles = {
+  _gitignore: '.gitignore'
+}
+
+async function init() {
+  let targetDir = formatTargetDir(argv._[0])
+  let template = argv.template || argv.t
+
+  const defaultTargetDir = 'vite-project'
+  const getProjectName = () =>
+    targetDir === '.' ? path.basename(path.resolve()) : targetDir
+
+  let result = {}
+
+  try {
+    result = await prompts(
+      [
+        {
+          type: targetDir ? null : 'text',
+          name: 'projectName',
+          message: reset('Project name:'),
+          initial: defaultTargetDir,
+          onState: (state) => {
+            targetDir = formatTargetDir(state.value) || defaultTargetDir
+          }
+        },
+        {
+          type: () =>
+            !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm',
+          name: 'overwrite',
+          message: () =>
+            (targetDir === '.'
+              ? 'Current directory'
+              : `Target directory "${targetDir}"`) +
+            ` is not empty. Remove existing files and continue?`
+        },
+        {
+          type: (_, { overwrite } = {}) => {
+            if (overwrite === false) {
+              throw new Error(red('✖') + ' Operation cancelled')
+            }
+            return null
+          },
+          name: 'overwriteChecker'
+        },
+        {
+          type: () => (isValidPackageName(getProjectName()) ? null : 'text'),
+          name: 'packageName',
+          message: reset('Package name:'),
+          initial: () => toValidPackageName(getProjectName()),
+          validate: (dir) =>
+            isValidPackageName(dir) || 'Invalid package.json name'
+        },
+        {
+          type: template && TEMPLATES.includes(template) ? null : 'select',
+          name: 'framework',
+          message:
+            typeof template === 'string' && !TEMPLATES.includes(template)
+              ? reset(
+                  `"${template}" isn't a valid template. Please choose from below: `
+                )
+              : reset('Select a template:'),
+          initial: 0,
+          choices: FRAMEWORKS.map((framework) => {
+            const frameworkColor = framework.color
+            return {
+              title: frameworkColor(framework.name),
+              value: framework
+            }
+          })
+        },
+        {
+          type: (framework) =>
+            framework && framework.variants ? 'select' : null,
+          name: 'variant',
+          message: reset('Select a variant:'),
+          // @ts-ignore
+          choices: (framework) =>
+            framework.variants.map((variant) => {
+              const variantColor = variant.color
+              return {
+                title: variantColor(variant.name),
+                value: variant.name
+              }
+            })
+        }
+      ],
+      {
+        onCancel: () => {
+          throw new Error(red('✖') + ' Operation cancelled')
+        }
+      }
+    )
+  } catch (cancelled) {
+    console.log(cancelled.message)
+    return
+  }
+
+  // user choice associated with prompts
+  const { framework, overwrite, packageName, variant } = result
+
+  const root = path.join(cwd, targetDir)
+
+  if (overwrite) {
+    emptyDir(root)
+  } else if (!fs.existsSync(root)) {
+    fs.mkdirSync(root, { recursive: true })
+  }
+
+  // determine template
+  template = variant || framework.name || template
+
+  console.log(`\nScaffolding project in ${root}...`)
+
+  const templateDir = path.resolve(
+    fileURLToPath(import.meta.url),
+    '..',
+    `template-${template}`
+  )
+
+  const write = (file, content) => {
+    const targetPath = renameFiles[file]
+      ? path.join(root, renameFiles[file])
+      : path.join(root, file)
+    if (content) {
+      fs.writeFileSync(targetPath, content)
+    } else {
+      copy(path.join(templateDir, file), targetPath)
+    }
+  }
+
+  const files = fs.readdirSync(templateDir)
+  for (const file of files.filter((f) => f !== 'package.json')) {
+    write(file)
+  }
+
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
+  )
+
+  pkg.name = packageName || getProjectName()
+
+  write('package.json', JSON.stringify(pkg, null, 2))
+
+  const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
+  const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
+
+  console.log(`\nDone. Now run:\n`)
+  if (root !== cwd) {
+    console.log(`  cd ${path.relative(cwd, root)}`)
+  }
+  switch (pkgManager) {
+    case 'yarn':
+      console.log('  yarn')
+      console.log('  yarn dev')
+      break
+    default:
+      console.log(`  ${pkgManager} install`)
+      console.log(`  ${pkgManager} run dev`)
+      break
+  }
+  console.log()
+}
+
+/**
+ * @param {string | undefined} targetDir
+ */
+function formatTargetDir(targetDir) {
+  return targetDir?.trim().replace(/\/+$/g, '')
+}
+
+function copy(src, dest) {
+  const stat = fs.statSync(src)
+  if (stat.isDirectory()) {
+    copyDir(src, dest)
+  } else {
+    fs.copyFileSync(src, dest)
+  }
+}
+
+/**
+ * @param {string} projectName
+ */
+function isValidPackageName(projectName) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    projectName
+  )
+}
+
+/**
+ * @param {string} projectName
+ */
+function toValidPackageName(projectName) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9-~]+/g, '-')
+}
+
+/**
+ * @param {string} srcDir
+ * @param {string} destDir
+ */
+function copyDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true })
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file)
+    const destFile = path.resolve(destDir, file)
+    copy(srcFile, destFile)
+  }
+}
+
+/**
+ * @param {string} path
+ */
+function isEmpty(path) {
+  const files = fs.readdirSync(path)
+  return files.length === 0 || (files.length === 1 && files[0] === '.git')
+}
+
+/**
+ * @param {string} dir
+ */
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) {
+    return
+  }
+  for (const file of fs.readdirSync(dir)) {
+    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
+  }
+}
+
+/**
+ * @param {string | undefined} userAgent process.env.npm_config_user_agent
+ * @returns object | undefined
+ */
+function pkgFromUserAgent(userAgent) {
+  if (!userAgent) return undefined
+  const pkgSpec = userAgent.split(' ')[0]
+  const pkgSpecArr = pkgSpec.split('/')
+  return {
+    name: pkgSpecArr[0],
+    version: pkgSpecArr[1]
+  }
+}
+
+init().catch((e) => {
+  console.error(e)
+})

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "create-vite-extra",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "author": "Bjorn Lu",
+  "bin": {
+    "create-vite-extra": "index.js"
+  },
+  "files": [
+    "index.js",
+    "template-*",
+    "!template-*/dist",
+    "!template-*/node_modules",
+    "!template-*/pnpm-lock.yaml"
+  ],
+  "main": "index.js",
+  "engines": {
+    "node": "^14.18.0 || >=16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bluwy/create-vite-extra.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bluwy/create-vite-extra/issues"
+  },
+  "homepage": "https://github.com/bluwy/create-vite-extra#readme",
+  "dependencies": {
+    "kolorist": "^1.5.1",
+    "minimist": "^1.2.6",
+    "prompts": "^2.4.2"
+  }
+}

package/template-library/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template-library/index.d.ts

@@ -0,0 +1 @@
+export function setupCounter(element: HTMLButtonElement): void

package/template-library/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/template-library/javascript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

package/template-library/lib/main.js

@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(++counter))
+  setCounter(0)
+}

package/template-library/main.js

@@ -0,0 +1,23 @@
+import './style.css'
+import javascriptLogo from './javascript.svg'
+import { setupCounter } from './lib/main.js'
+
+document.querySelector('#app').innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Vite!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite logo to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector('#counter'))

package/template-library/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "vite-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "files": ["dist", "index.d.ts"],
+  "main": "./dist/counter.umd.cjs",
+  "module": "./dist/counter.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "types": "./index.d.ts",
+    "import": "./dist/counter.js",
+    "require": "./dist/counter.umd.cjs"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^3.0.1"
+  }
+}

package/template-library/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>