feat: initial batch of templates

Author: yyx990803

docs/guide/build.md

@@ -6,7 +6,7 @@ When it is time to deploy your app for production, simply run the `vite build` c
 
 The production bundle assumes a baseline support for [Native ES modules dynamic imports](https://caniuse.com/es6-module-dynamic-import). By default, all code is minimally transpiled with target `es2020` (only for terser minification compatibility). You can specify the target range via the [`build.target` config option](/config/#build-target), where the lowest target available is `es2015`.
 
-Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)), however this is not a built-in feature.
+Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)). This is not a built-in feature, but there is plan to provide an official plugin that automatically emits a separate legacy bundle.
 
 ## Public Base Path
 

packages/create-app/CHANGELOG.md

@@ -27,6 +27,7 @@ npm init @vitejs/app my-vue-app --template vue
 
 Currently supported template presets include:
 
+- `vanilla`
 - `vue`
 - `vue-ts`
 - `react`

packages/create-app/README.md

@@ -6,15 +6,30 @@ 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() {
+  let targetDir = argv._[0]
+  if (!targetDir) {
+    /**
+     * @type {{ name: string }}
+     */
+    const { name } = await prompt({
+      type: 'input',
+      name: 'name',
+      message: `Project name:`,
+      initial: 'vite-project'
+    })
+    targetDir = name
+  }
+
+  const root = path.join(cwd, targetDir)
+  console.log(`Scaffolding project in ${root}...`)
+
   if (!fs.existsSync(root)) {
     fs.mkdirSync(root, { recursive: true })
   } else {
@@ -26,6 +41,7 @@ async function init() {
       const { yes } = await prompt({
         type: 'confirm',
         name: 'yes',
+        initial: 'Y',
         message:
           `Target directory ${targetDir} is not empty.\n` +
           `Remove existing files and continue?`
@@ -38,10 +54,22 @@ async function init() {
     }
   }
 
-  const templateDir = path.join(
-    __dirname,
-    `template-${argv.t || argv.template || 'vue'}`
-  )
+  // determine template
+  let template = argv.t || argv.template
+  if (!template) {
+    /**
+     * @type {{ t: string }}
+     */
+    const { t } = await prompt({
+      type: 'select',
+      name: 't',
+      message: `Select a template:`,
+      choices: ['vanilla', 'vue', 'vue-ts', 'react', 'react-ts']
+    })
+    template = t
+  }
+
+  const templateDir = path.join(__dirname, `template-${template}`)
 
   const write = (file, content) => {
     const targetPath = renameFiles[file]

packages/create-app/index.js

@@ -11,19 +11,32 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         <p>Hello Vite + React!</p>
         <p>
-          <button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
+          <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>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
       </header>
     </div>
   )

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

@@ -11,19 +11,32 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         <p>Hello Vite + React!</p>
         <p>
-          <button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
         </p>
         <p>
           Edit <code>App.jsx</code> and save to test HMR updates.
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
       </header>
     </div>
   )

packages/create-app/template-react/src/App.jsx

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <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>

packages/create-app/template-vanilla/index.html

@@ -0,0 +1,6 @@
+import './style.css'
+
+document.querySelector('#app').innerHTML = `
+  <h1>Hello Vite!</h1>
+  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
+`

packages/create-app/template-vanilla/main.js

@@ -0,0 +1,11 @@
+{
+  "name": "vite-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^2.0.0-beta.1"
+  }
+}

packages/create-app/template-vanilla/package.json

@@ -0,0 +1,8 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}

packages/create-app/template-vanilla/style.css

@@ -1,5 +1,11 @@
 <template>
   <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
   <p>
     Recommended setup:
     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
@@ -46,3 +52,9 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>

packages/create-app/template-vue-ts/src/components/HelloWorld.vue

@@ -1,5 +1,11 @@
 <template>
   <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
   <button @click="state.count++">count is: {{ state.count }}</button>
   <p>
     Edit
@@ -16,3 +22,9 @@ defineProps({
 
 const state = reactive({ count: 0 })
 </script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>