feat: create-app

docs/guide/index.md

@@ -34,9 +34,6 @@ Supported template presets include:
 - `vue-ts`
 - `react`
 - `react-ts`
-- `preact`
-- `preact-ts`
-- `reason-react`
 
 See [@vitejs/create-app](https://github.com/vitejs/vite/tree/main/packages/create-app) for more details on each template.
 

packages/create-app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present, 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.

packages/create-app/README.md

@@ -0,0 +1,33 @@
+# @vite/create-app
+
+## Scaffolding Your First Vite Project
+
+> **Comaptibility Note:**
+> Vite requires [Node.js](https://nodejs.org/en/) version >=12.0.0.
+
+With NPM:
+
+```bash
+$ npm init @vitejs/app
+```
+
+With Yarn:
+
+```bash
+$ yarn create @vitejs/app
+```
+
+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 + Vue project, run:
+
+```bash
+npm init @vitejs/app my-vue-app --template vue
+```
+
+Currently supported template presets include:
+
+- `vue`
+- `vue-ts`
+- `react`
+- `react-ts`

packages/create-app/index.js

@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+
+// @ts-check
+const fs = require('fs')
+const path = require('path')
+const argv = require('minimist')(process.argv.slice(2))
+const { prompt } = require('enquirer')
+
+const targetDir = argv._[0] || '.'
+const cwd = process.cwd()
+const root = path.join(cwd, targetDir)
+const renameFiles = {
+  _gitignore: '.gitignore'
+}
+console.log(`Scaffolding project in ${root}...`)
+
+async function init() {
+  if (!fs.existsSync(root)) {
+    fs.mkdirSync(root, { recursive: true })
+  } else {
+    const existing = fs.readdirSync(root)
+    if (existing.length) {
+      /**
+       * @type {{ yes: boolean }}
+       */
+      const { yes } = await prompt({
+        type: 'confirm',
+        name: 'yes',
+        message:
+          `Target directory ${targetDir} is not empty.\n` +
+          `Remove existing files and continue?`
+      })
+      if (yes) {
+        emptyDir(root)
+      } else {
+        return
+      }
+    }
+  }
+
+  const templateDir = path.join(
+    __dirname,
+    `template-${argv.t || argv.template || 'vue'}`
+  )
+
+  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 = require(path.join(templateDir, `package.json`))
+  pkg.name = path.basename(root)
+  write('package.json', JSON.stringify(pkg, null, 2))
+
+  console.log(`\nDone. Now run:\n`)
+  if (root !== cwd) {
+    console.log(`  cd ${path.relative(cwd, root)}`)
+  }
+  console.log(`  npm install (or \`yarn\`)`)
+  console.log(`  npm run dev (or \`yarn dev\`)`)
+  console.log()
+}
+
+function copy(src, dest) {
+  const stat = fs.statSync(src)
+  if (stat.isDirectory()) {
+    copyDir(src, dest)
+  } else {
+    fs.copyFileSync(src, dest)
+  }
+}
+
+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)
+  }
+}
+
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) {
+    return
+  }
+  for (const file of fs.readdirSync(dir)) {
+    const abs = path.resolve(dir, file)
+    // baseline is Node 12 so can't use rmSync :(
+    if (fs.lstatSync(abs).isDirectory()) {
+      emptyDir(abs)
+      fs.rmdirSync(abs)
+    } else {
+      fs.unlinkSync(abs)
+    }
+  }
+}
+
+init().catch((e) => {
+  console.error(e)
+})

packages/create-app/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@vitejs/create-app",
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "Evan You",
+  "bin": {
+    "create-vite-app": "index.js",
+    "cva": "index.js"
+  },
+  "files": [
+    "index.js"
+  ],
+  "main": "index.js",
+  "scripts": {
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . --lerna-package create-app",
+    "release": "node ../../scripts/release.js --skipBuild"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitejs/vite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vitejs/vite/issues"
+  },
+  "homepage": "https://github.com/vitejs/vite/tree/main/packages/create-app#readme",
+  "dependencies": {
+    "enquirer": "^2.3.6",
+    "minimist": "^1.2.5"
+  }
+}

packages/create-app/template-react-ts/_gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

packages/create-app/template-react-ts/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

packages/create-app/template-react-ts/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vite-react-typescript-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react-refresh": "^1.1.0",
+    "typescript": "^4.1.2",
+    "vite": "^2.0.0-beta.1"
+  }
+}

packages/create-app/template-react-ts/src/App.css

@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}

packages/create-app/template-react-ts/src/App.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import logo from './logo.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>Hello Vite + React!</p>
+        <p>
+          <button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
+        </p>
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  )
+}
+
+export default App

packages/create-app/template-react-ts/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

packages/create-app/template-react-ts/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

packages/create-app/template-react-ts/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

packages/create-app/template-react-ts/vite.config.ts

@@ -0,0 +1,6 @@
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [reactRefresh()]
+})

packages/create-app/template-react/_gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local