create-vue 3.0.0-alpha.2 → 3.0.0-beta.10

package/index.js

@@ -1,332 +0,0 @@
-#!/usr/bin/env node
-// @ts-check
-
-import fs from 'fs'
-import path from 'path'
-
-import minimist from 'minimist'
-import prompts from 'prompts'
-import { red, green, bold } from 'kolorist'
-
-import renderTemplate from './utils/renderTemplate.js'
-import {
-  postOrderDirectoryTraverse,
-  preOrderDirectoryTraverse
-} from './utils/directoryTraverse.js'
-import generateReadme from './utils/generateReadme.js'
-import getCommand from './utils/getCommand.js'
-
-function isValidPackageName(projectName) {
-  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
-    projectName
-  )
-}
-
-function toValidPackageName(projectName) {
-  return projectName
-    .trim()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/^[._]/, '')
-    .replace(/[^a-z0-9-~]+/g, '-')
-}
-
-function canSafelyOverwrite(dir) {
-  return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0
-}
-
-function emptyDir(dir) {
-  postOrderDirectoryTraverse(
-    dir,
-    (dir) => fs.rmdirSync(dir),
-    (file) => fs.unlinkSync(file)
-  )
-}
-
-async function init() {
-  const cwd = process.cwd()
-  // possible options:
-  // --default
-  // --typescript / --ts
-  // --jsx
-  // --router / --vue-router
-  // --vuex
-  // --with-tests / --tests / --cypress
-  // --force (for force overwriting)
-  const argv = minimist(process.argv.slice(2), {
-    alias: {
-      typescript: ['ts'],
-      'with-tests': ['tests', 'cypress'],
-      router: ['vue-router']
-    },
-    // all arguments are treated as booleans
-    boolean: true
-  })
-
-  // if any of the feature flags is set, we would skip the feature prompts
-  // use `??` instead of `||` once we drop Node.js 12 support
-  const isFeatureFlagsUsed =
-    typeof (
-      argv.default ||
-      argv.ts ||
-      argv.jsx ||
-      argv.router ||
-      argv.vuex ||
-      argv.tests
-    ) === 'boolean'
-
-  let targetDir = argv._[0]
-  const defaultProjectName = !targetDir ? 'vue-project' : targetDir
-
-  const forceOverwrite = argv.force
-
-  let result = {}
-
-  try {
-    // Prompts:
-    // - Project name:
-    //   - whether to overwrite the existing directory or not?
-    //   - enter a valid package name for package.json
-    // - Project language: JavaScript / TypeScript
-    // - Add JSX Support?
-    // - Install Vue Router for SPA development?
-    // - Install Vuex for state management? (TODO)
-    // - Add Cypress for testing?
-    result = await prompts(
-      [
-        {
-          name: 'projectName',
-          type: targetDir ? null : 'text',
-          message: 'Project name:',
-          initial: defaultProjectName,
-          onState: (state) =>
-            (targetDir = String(state.value).trim() || defaultProjectName)
-        },
-        {
-          name: 'shouldOverwrite',
-          type: () =>
-            canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm',
-          message: () => {
-            const dirForPrompt =
-              targetDir === '.'
-                ? 'Current directory'
-                : `Target directory "${targetDir}"`
-
-            return `${dirForPrompt} is not empty. Remove existing files and continue?`
-          }
-        },
-        {
-          name: 'overwriteChecker',
-          type: (prev, values = {}) => {
-            if (values.shouldOverwrite === false) {
-              throw new Error(red('✖') + ' Operation cancelled')
-            }
-            return null
-          }
-        },
-        {
-          name: 'packageName',
-          type: () => (isValidPackageName(targetDir) ? null : 'text'),
-          message: 'Package name:',
-          initial: () => toValidPackageName(targetDir),
-          validate: (dir) =>
-            isValidPackageName(dir) || 'Invalid package.json name'
-        },
-        {
-          name: 'needsTypeScript',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: 'Add TypeScript?',
-          initial: false,
-          active: 'Yes',
-          inactive: 'No'
-        },
-        {
-          name: 'needsJsx',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: 'Add JSX Support?',
-          initial: false,
-          active: 'Yes',
-          inactive: 'No'
-        },
-        {
-          name: 'needsRouter',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: 'Add Vue Router for Single Page Application development?',
-          initial: false,
-          active: 'Yes',
-          inactive: 'No'
-        },
-        {
-          name: 'needsVuex',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: 'Add Vuex for state management?',
-          initial: false,
-          active: 'Yes',
-          inactive: 'No'
-        },
-        {
-          name: 'needsTests',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: 'Add Cypress for testing?',
-          initial: false,
-          active: 'Yes',
-          inactive: 'No'
-        }
-      ],
-      {
-        onCancel: () => {
-          throw new Error(red('✖') + ' Operation cancelled')
-        }
-      }
-    )
-  } catch (cancelled) {
-    console.log(cancelled.message)
-    process.exit(1)
-  }
-
-  // `initial` won't take effect if the prompt type is null
-  // so we still have to assign the default values here
-  const {
-    packageName = toValidPackageName(defaultProjectName),
-    shouldOverwrite,
-    needsJsx = argv.jsx,
-    needsTypeScript = argv.typescript,
-    needsRouter = argv.router,
-    needsVuex = argv.vuex,
-    needsTests = argv.tests
-  } = result
-  const root = path.join(cwd, targetDir)
-
-  if (shouldOverwrite) {
-    emptyDir(root)
-  } else if (!fs.existsSync(root)) {
-    fs.mkdirSync(root)
-  }
-
-  console.log(`\nScaffolding project in ${root}...`)
-
-  const pkg = { name: packageName, version: '0.0.0' }
-  fs.writeFileSync(
-    path.resolve(root, 'package.json'),
-    JSON.stringify(pkg, null, 2)
-  )
-
-  const templateRoot = new URL('./template', import.meta.url).pathname
-  const render = function render(templateName) {
-    const templateDir = path.resolve(templateRoot, templateName)
-    renderTemplate(templateDir, root)
-  }
-
-  // Render base template
-  render('base')
-
-  // Add configs.
-  if (needsJsx) {
-    render('config/jsx')
-  }
-  if (needsRouter) {
-    render('config/router')
-  }
-  if (needsVuex) {
-    render('config/vuex')
-  }
-  if (needsTests) {
-    render('config/cypress')
-  }
-  if (needsTypeScript) {
-    render('config/typescript')
-  }
-
-  // Render code template.
-  // prettier-ignore
-  const codeTemplate =
-    (needsTypeScript ? 'typescript-' : '') +
-    (needsRouter ? 'router' : 'default')
-  render(`code/${codeTemplate}`)
-
-  // Render entry file (main.js/ts).
-  if (needsVuex && needsRouter) {
-    render('entry/vuex-and-router')
-  } else if (needsVuex) {
-    render('entry/vuex')
-  } else if (needsRouter) {
-    render('entry/router')
-  } else {
-    render('entry/default')
-  }
-
-  // Cleanup.
-
-  if (needsTypeScript) {
-    // rename all `.js` files to `.ts`
-    // rename jsconfig.json to tsconfig.json
-    preOrderDirectoryTraverse(
-      root,
-      () => {},
-      (filepath) => {
-        if (filepath.endsWith('.js')) {
-          fs.renameSync(filepath, filepath.replace(/\.js$/, '.ts'))
-        } else if (path.basename(filepath) === 'jsconfig.json') {
-          fs.renameSync(
-            filepath,
-            filepath.replace(/jsconfig\.json$/, 'tsconfig.json')
-          )
-        }
-      }
-    )
-
-    // Rename entry in `index.html`
-    const indexHtmlPath = path.resolve(root, 'index.html')
-    const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf8')
-    fs.writeFileSync(
-      indexHtmlPath,
-      indexHtmlContent.replace('src/main.js', 'src/main.ts')
-    )
-  }
-
-  if (!needsTests) {
-    // All templates assumes the need of tests.
-    // If the user doesn't need it:
-    // rm -rf cypress **/__tests__/
-    preOrderDirectoryTraverse(
-      root,
-      (dirpath) => {
-        const dirname = path.basename(dirpath)
-
-        if (dirname === 'cypress' || dirname === '__tests__') {
-          emptyDir(dirpath)
-          fs.rmdirSync(dirpath)
-        }
-      },
-      () => {}
-    )
-  }
-
-  // Instructions:
-  // Supported package managers: pnpm > yarn > npm
-  const packageManager = /pnpm/.test(process.env.npm_execpath)
-    ? 'pnpm'
-    : /yarn/.test(process.env.npm_execpath)
-    ? 'yarn'
-    : 'npm'
-
-  // README generation
-  fs.writeFileSync(path.resolve(root, 'README.md'), generateReadme({
-    projectName: result.projectName || defaultProjectName,
-    packageManager,
-    needsTypeScript,
-    needsTests
-  }))
-
-  console.log(`\nDone. Now run:\n`)
-  if (root !== cwd) {
-    console.log(`  ${bold(green(`cd ${path.relative(cwd, root)}`))}`)
-  }
-  console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
-  console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`)
-  console.log()
-}
-
-init().catch((e) => {
-  console.error(e)
-})

package/template/code/default/src/main.js

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

package/template/code/router/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

package/template/code/router/src/views/Home.vue

@@ -1,19 +0,0 @@
-<template>
-  <img alt="Vue logo" src="@/assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
-</template>
-
-<script setup>
-import HelloWorld from '@/components/HelloWorld.vue'
-</script>
-
-<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>

package/template/code/typescript-default/src/main.ts

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

package/template/code/typescript-router/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

package/template/code/typescript-router/src/views/Home.vue

@@ -1,19 +0,0 @@
-<template>
-  <img alt="Vue logo" src="@/assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
-</template>
-
-<script setup lang="ts">
-import HelloWorld from '@/components/HelloWorld.vue'
-</script>
-
-<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>

package/template/entry/vuex/src/main.js

@@ -1,9 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import store from './store'
-
-const app = createApp(App)
-
-app.use(store)
-
-app.mount('#app')

package/utils/deepMerge.js

@@ -1,26 +0,0 @@
-const isObject = (val) => val && typeof val === 'object'
-const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
-
-/**
- * Recursively merge the content of the new object to the existing one
- * @param {Object} target the existing object
- * @param {Object} obj the new object
- */
-function deepMerge(target, obj) {
-  for (const key of Object.keys(obj)) {
-    const oldVal = target[key]
-    const newVal = obj[key]
-
-    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
-      target[key] = mergeArrayWithDedupe(oldVal, newVal)
-    } else if (isObject(oldVal) && isObject(newVal)) {
-      target[key] = deepMerge(oldVal, newVal)
-    } else {
-      target[key] = newVal
-    }
-  }
-
-  return target
-}
-
-export default deepMerge

package/utils/directoryTraverse.js

@@ -1,29 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-export function preOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
-  for (const filename of fs.readdirSync(dir)) {
-    const fullpath = path.resolve(dir, filename)
-    if (fs.lstatSync(fullpath).isDirectory()) {
-      dirCallback(fullpath)
-      // in case the dirCallback removes the directory entirely
-      if (fs.existsSync(fullpath)) {
-        preOrderDirectoryTraverse(fullpath, dirCallback, fileCallback)
-      }
-      continue
-    }
-    fileCallback(fullpath)
-  }
-}
-
-export function postOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
-  for (const filename of fs.readdirSync(dir)) {
-    const fullpath = path.resolve(dir, filename)
-    if (fs.lstatSync(fullpath).isDirectory()) {
-      postOrderDirectoryTraverse(fullpath, dirCallback, fileCallback)
-      dirCallback(fullpath)
-      continue
-    }
-    fileCallback(fullpath)
-  }
-}

package/utils/docs/README-TEMPLATE.md

@@ -1,17 +0,0 @@
-# {{projectName}}
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
-
-<!-- SFC-TYPE-SUPPORT -->
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-<!-- NPM-SCRIPTS -->

package/utils/docs/SFC-TYPE-SUPPORT.md

@@ -1,5 +0,0 @@
-## Type Support for `.vue` Imports in TS
-
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
-
-However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.

package/utils/generateReadme.js

@@ -1,69 +0,0 @@
-import fs from 'fs'
-
-import getCommand from './getCommand.js'
-
-const sfcTypeSupportDoc = fs.readFileSync(
-  new URL('./docs/SFC-TYPE-SUPPORT.md', import.meta.url).pathname,
-  'utf8'
-)
-
-export default function generateReadme({
-  projectName,
-  packageManager,
-  needsTypeScript,
-  needsTests
-}) {
-  let template = fs.readFileSync(
-    new URL('./docs/README-TEMPLATE.md', import.meta.url).pathname,
-    'utf8'
-  )
-
-  template = template.replace('{{projectName}}', projectName)
-
-  if (needsTypeScript) {
-    template = template.replace('<!-- SFC-TYPE-SUPPORT -->\n', sfcTypeSupportDoc)
-  } else {
-    template = template.replace('<!-- SFC-TYPE-SUPPORT -->\n\n', '')
-  }
-
-  let npmScriptsDescriptions = 
-`\`\`\`sh
-${getCommand(packageManager, 'install')}
-\`\`\`
-
-### Compile and Hot-Reload for Development
-
-\`\`\`sh
-${getCommand(packageManager, 'dev')}
-\`\`\`
-
-### ${needsTypeScript ? 'Type-Check, ' : ''}Compile and Minify for Production
-
-\`\`\`sh
-${getCommand(packageManager, 'build')}
-\`\`\`
-`
-
-  if (needsTests) {
-    npmScriptsDescriptions +=`
-### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction)
-
-\`\`\`sh
-${getCommand(packageManager, 'test:unit')} # or \`${getCommand(packageManager, 'test:unit:ci')}\` for headless testing
-\`\`\`
-
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
-
-\`\`\`sh
-${getCommand(packageManager, 'test:e2e')} # or \`${getCommand(packageManager, 'test:e2e:ci')}\` for headless testing
-\`\`\`
-`
-  }
-
-  template = template.replace(
-    '<!-- NPM-SCRIPTS -->\n',
-    npmScriptsDescriptions
-  )
-
-  return template
-}

package/utils/getCommand.js

@@ -1,7 +0,0 @@
-export default function getCommand(packageManager, scriptName) {
-  if (scriptName === 'install') {
-    return packageManager === 'yarn' ? 'yarn': `${packageManager} install`
-  }
-
-  return packageManager === 'npm' ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`
-}

package/utils/renderTemplate.js

@@ -1,47 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-import deepMerge from './deepMerge.js'
-
-/**
- * Renders a template folder/file to the file system,
- * by recursively copying all files under the `src` directory,
- * with the following exception:
- *   - `_filename` should be renamed to `.filename`
- *   - Fields in `package.json` should be recursively merged
- * @param {string} src source filename to copy
- * @param {string} dest destination filename of the copy operation
- */
-function renderTemplate(src, dest) {
-  const stats = fs.statSync(src)
-
-  if (stats.isDirectory()) {
-    // if it's a directory, render its subdirectories and files recusively
-    fs.mkdirSync(dest, { recursive: true })
-    for (const file of fs.readdirSync(src)) {
-      renderTemplate(path.resolve(src, file), path.resolve(dest, file))
-    }
-    return
-  }
-
-  const filename = path.basename(src)
-
-  if (filename === 'package.json' && fs.existsSync(dest)) {
-    // merge instead of overwriting
-    const pkg = deepMerge(
-      JSON.parse(fs.readFileSync(dest)),
-      JSON.parse(fs.readFileSync(src))
-    )
-    fs.writeFileSync(dest, JSON.stringify(pkg, null, 2) + '\n')
-    return
-  }
-
-  if (filename.startsWith('_')) {
-    // rename `_file` to `.file`
-    dest = path.resolve(path.dirname(dest), filename.replace(/^_/, '.'))
-  }
-
-  fs.copyFileSync(src, dest)
-}
-
-export default renderTemplate