feat(cva): update templates

create-vite-app/index.js

@@ -1,11 +1,6 @@
 #!/usr/bin/env node
 const path = require('path')
-const fs = require('fs')
-const { promisify } = require('util')
-const writeFile = promisify(fs.writeFile)
-const copyFile = promisify(fs.copyFile)
-const mkdir = promisify(fs.mkdir)
-const readdir = promisify(fs.readdir)
+const fs = require('fs-extra')
 const argv = require('minimist')(process.argv.slice(2))
 
 async function init() {
@@ -14,31 +9,24 @@ async function init() {
   const root = path.join(cwd, targetDir)
   console.log(`Scaffolding project in ${root}...`)
 
-  try {
-    await mkdir(root)
-  } catch (e) {
-    if (e.code === 'EEXIST') {
-      const files = await readdir(root)
-      if (files.length) {
-        console.error(`Error: target directory is not empty.`)
-        process.exit(1)
-      }
-    } else {
-      throw e
-    }
+  await fs.ensureDir(root)
+  const existing = await fs.readdir(root)
+  if (existing.length) {
+    console.error(`Error: target directory is not empty.`)
+    process.exit(1)
   }
 
   const templateDir = path.join(__dirname, `template-${argv.template || 'vue'}`)
   const write = async (file, content) => {
     const targetPath = path.join(root, file)
     if (content) {
-      await writeFile(targetPath, content)
+      await fs.writeFile(targetPath, content)
     } else {
-      await copyFile(path.join(templateDir, file), targetPath)
+      await fs.copy(path.join(templateDir, file), targetPath)
     }
   }
 
-  const files = await readdir(templateDir)
+  const files = await fs.readdir(templateDir)
   for (const file of files.filter((f) => f !== 'package.json')) {
     await write(file)
   }

create-vite-app/package.json

@@ -24,6 +24,7 @@
   },
   "homepage": "https://github.com/vuejs/vite/tree/master/#readme",
   "dependencies": {
+    "fs-extra": "^9.0.0",
     "minimist": "^1.2.5"
   }
 }

create-vite-app/template-preact/index.css

@@ -0,0 +1,29 @@
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	background: #FAFAFA;
+	font-family: 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+	color: #444;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+  text-align: center;
+  background-color: #673ab8;
+  color: #fff;
+  font-size: 1.5em;
+  padding-top: 100px;
+}
+
+.link {
+  color: #fff;
+}

create-vite-app/template-preact/logo.jsx

@@ -0,0 +1,47 @@
+export const Logo = () => (
+  <svg
+    class="logo"
+    height="180px"
+    viewBox="-256 -256 1800 512"
+    title="Preact"
+    style="
+display: inline-block;
+margin: -0.25em 0px 0px;
+vertical-align: middle;
+"
+  >
+    <path
+      d="M0,-256 221.7025033688164,-128 221.7025033688164,128 0,256 -221.7025033688164,128 -221.7025033688164,-128z"
+      fill="white"
+    ></path>
+    <ellipse
+      cx="0"
+      cy="0"
+      rx="75px"
+      ry="196px"
+      stroke-width="16px"
+      stroke-dasharray="365.2604060943886 81.7395939056114"
+      stroke-dashoffset="1131.9689975248618"
+      fill="none"
+      stroke="#673ab8"
+      transform="rotate(52)"
+    ></ellipse>
+    <ellipse
+      cx="0"
+      cy="0"
+      rx="75px"
+      ry="196px"
+      stroke-width="16px"
+      stroke-dasharray="403.1225208830963 43.87747911690373"
+      stroke-dashoffset="-963.0079812482553"
+      fill="none"
+      stroke="#673ab8"
+      transform="rotate(-52)"
+    ></ellipse>
+    <circle cx="0" cy="0" r="34" fill="#673ab8"></circle>
+    <path
+      fill="white"
+      d="M289.85 25.25L289.85 125L272 125L272-122.63L335.88-122.63Q379.45-122.63 401.59-103.55Q423.73-84.48 423.73-49.13Q423.73-32.85 417.69-19.20Q411.65-5.55 400.27 4.34Q388.90 14.22 372.63 19.74Q356.35 25.25 335.88 25.25L289.85 25.25M289.85 10.90L335.88 10.90Q352.33 10.90 365.27 6.35Q378.23 1.80 387.24-6.25Q396.25-14.30 401.06-25.24Q405.88-36.18 405.88-49.13Q405.88-77.65 388.29-93.05Q370.70-108.45 335.88-108.45L289.85-108.45L289.85 10.90ZM497.58 13.00L497.58 125L479.73 125L479.73-122.63L542.90-122.63Q585.78-122.63 606.95-106.09Q628.13-89.55 628.13-57.53Q628.13-43.35 623.23-31.63Q618.33-19.90 609.14-11.06Q599.95-2.23 587 3.46Q574.05 9.15 557.78 10.90Q561.98 13.52 565.30 17.90L650.53 125L634.95 125Q632.15 125 630.14 123.95Q628.13 122.90 626.20 120.45L546.93 20.00Q543.95 16.15 540.54 14.57Q537.13 13.00 529.95 13.00L497.58 13.00M497.58-0.30L540.63-0.30Q557.08-0.30 570.11-4.24Q583.15-8.18 592.16-15.53Q601.18-22.88 605.90-33.20Q610.63-43.53 610.63-56.48Q610.63-82.90 593.30-95.68Q575.98-108.45 542.90-108.45L497.58-108.45L497.58-0.30ZM843.73-122.63L843.73-107.75L713.35-107.75L713.35-7.65L821.85-7.65L821.85 6.87L713.35 6.87L713.35 110.13L843.73 110.13L843.73 125L695.33 125L695.33-122.63L843.73-122.63ZM1088.55 125L1074.73 125Q1072.28 125 1070.70 123.69Q1069.13 122.38 1068.25 120.28L1039.03 48.35L917.40 48.35L888.35 120.28Q887.65 122.20 885.90 123.60Q884.15 125 881.70 125L868.05 125L969.38-122.63L987.23-122.63L1088.55 125M922.83 35.05L1033.78 35.05L983.20-90.08Q981.98-93.05 980.75-96.81Q979.53-100.58 978.30-104.78Q977.08-100.58 975.85-96.81Q974.63-93.05 973.40-89.90L922.83 35.05ZM1302.40 83.35Q1304.15 83.35 1305.38 84.57L1312.38 92.10Q1304.67 100.33 1295.58 106.89Q1286.47 113.45 1275.71 118.09Q1264.95 122.72 1252.09 125.26Q1239.22 127.80 1223.83 127.80Q1198.10 127.80 1176.66 118.79Q1155.22 109.78 1139.91 93.24Q1124.60 76.70 1116.03 53.25Q1107.45 29.80 1107.45 1.10Q1107.45-27.08 1116.29-50.35Q1125.13-73.63 1141.14-90.34Q1157.15-107.05 1179.46-116.24Q1201.78-125.43 1228.72-125.43Q1242.20-125.43 1253.40-123.41Q1264.60-121.40 1274.31-117.64Q1284.03-113.88 1292.60-108.28Q1301.17-102.68 1309.40-95.33L1303.97-87.45Q1302.58-85.35 1299.60-85.35Q1298.03-85.35 1295.58-87.19Q1293.13-89.03 1289.36-91.74Q1285.60-94.45 1280.26-97.69Q1274.92-100.93 1267.58-103.64Q1260.22-106.35 1250.60-108.19Q1240.97-110.03 1228.72-110.03Q1206.15-110.03 1187.25-102.24Q1168.35-94.45 1154.70-80.01Q1141.05-65.58 1133.44-45.01Q1125.83-24.45 1125.83 1.10Q1125.83 27.35 1133.35 48.00Q1140.88 68.65 1154.17 82.91Q1167.47 97.17 1185.59 104.79Q1203.70 112.40 1224.88 112.40Q1238.17 112.40 1248.59 110.65Q1259 108.90 1267.75 105.40Q1276.50 101.90 1284.03 96.82Q1291.55 91.75 1298.90 84.92Q1299.78 84.22 1300.56 83.79Q1301.35 83.35 1302.40 83.35ZM1530.42-122.63L1530.42-107.40L1443.45-107.40L1443.45 125L1425.60 125L1425.60-107.40L1338.10-107.40L1338.10-122.63L1530.42-122.63Z"
+    ></path>
+  </svg>
+)

create-vite-app/template-preact/main.jsx

@@ -1,7 +1,24 @@
 import { render } from 'preact'
+import { Logo } from './logo'
+import './index.css'
 
-function MyComponent(props) {
-  return <div>{props.msg}</div>
+function App(props) {
+  return (
+    <>
+      <Logo />
+      <p>Hello Vite + Preact!</p>
+      <p>
+        <a
+          class="link"
+          href="https://preactjs.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn Preact
+        </a>
+      </p>
+    </>
+  )
 }
 
-render(<MyComponent msg="Hello Preact!" />, document.getElementById('app'))
+render(<App />, document.getElementById('app'))

create-vite-app/template-react/App.css

@@ -0,0 +1,38 @@
+.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);
+  }
+}

create-vite-app/template-react/App.jsx

@@ -0,0 +1,27 @@
+import { React } from 'es-react'
+import logo from './logo.svg'
+import './App.css'
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>Hello Vite + React!</p>
+        <p>
+          Edit <code>App.jsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  )
+}
+
+export default App

create-vite-app/template-react/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;
+}

create-vite-app/template-react/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./main.jsx"></script>
+</body>
+</html>

create-vite-app/template-react/main.jsx

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

create-vite-app/template-react/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "vite-react-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --jsx react",
+    "build": "vite build --jsx react"
+  },
+  "dependencies": {
+    "es-react": "^16.12.0"
+  },
+  "devDependencies": {
+    "vite": "^0.14.0"
+  }
+}

create-vite-app/template-vue/App.vue

@@ -1,24 +1,28 @@
 <template>
-  <h1>Hello Vite + Vue 3!</h1>
-  <p>Edit ./App.vue to test hot module replacement (HMR).</p>
-  <p>
-    <span>Count is: {{ count }}</span>
-    <button @click="count++">increment</button>
-  </p>
+  <div id="app">
+    <img alt="Vue logo" src="./logo.png">
+    <HelloWorld msg="Hello Vue 3.0 + Vite"/>
+  </div>
 </template>
 
 <script>
+import HelloWorld from './components/HelloWorld.vue'
+
 export default {
-  data: () => ({ count: 0 })
+  name: 'App',
+  components: {
+    HelloWorld
+  }
 }
 </script>
 
-<style scoped>
-h1 {
-  color: #4fc08d;
-}
-
-h1, p {
-  font-family: Arial, Helvetica, sans-serif;
+<style>
+#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;
 }
 </style>

create-vite-app/template-vue/components/HelloWorld.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <button @click="count++">count is: {{ count }}</button>
+    <p>Edit <code>src/HelloWorld.vue</code> to test hot module replacement.</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

create-vite-app/template-vue/index.html

@@ -6,11 +6,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module">
-    import { createApp } from 'vue'
-    import App from './App.vue'
-
-    createApp(App).mount('#app')
-  </script>
+  <script type="module" src="./main.js"></script>
 </body>
 </html>

create-vite-app/template-vue/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')