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

package/README.md

@@ -3,3 +3,9 @@
 [![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/vuejs/create-vue)
 
 An easy way to start a Vue project
+
+## Usage
+
+```sh
+npm init vue@next
+```

package/index.js

@@ -9,17 +9,12 @@ import prompts from 'prompts'
 import { red, green, bold } from 'kolorist'
 
 import renderTemplate from './utils/renderTemplate.js'
-import {
-  postOrderDirectoryTraverse,
-  preOrderDirectoryTraverse
-} from './utils/directoryTraverse.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
-  )
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
 }
 
 function toValidPackageName(projectName) {
@@ -66,14 +61,8 @@ async function init() {
   // 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'
+    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) ===
+    'boolean'
 
   let targetDir = argv._[0]
   const defaultProjectName = !targetDir ? 'vue-project' : targetDir
@@ -99,18 +88,14 @@ async function init() {
           type: targetDir ? null : 'text',
           message: 'Project name:',
           initial: defaultProjectName,
-          onState: (state) =>
-            (targetDir = String(state.value).trim() || defaultProjectName)
+          onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName)
         },
         {
           name: 'shouldOverwrite',
-          type: () =>
-            canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm',
+          type: () => (canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm'),
           message: () => {
             const dirForPrompt =
-              targetDir === '.'
-                ? 'Current directory'
-                : `Target directory "${targetDir}"`
+              targetDir === '.' ? 'Current directory' : `Target directory "${targetDir}"`
 
             return `${dirForPrompt} is not empty. Remove existing files and continue?`
           }
@@ -129,8 +114,7 @@ async function init() {
           type: () => (isValidPackageName(targetDir) ? null : 'text'),
           message: 'Package name:',
           initial: () => toValidPackageName(targetDir),
-          validate: (dir) =>
-            isValidPackageName(dir) || 'Invalid package.json name'
+          validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name'
         },
         {
           name: 'needsTypeScript',
@@ -206,12 +190,13 @@ async function init() {
   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)
-  )
+  fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(pkg, null, 2))
 
-  const templateRoot = new URL('./template', import.meta.url).pathname
+  // todo:
+  // work around the esbuild issue that `import.meta.url` cannot be correctly transpiled
+  // when bundling for node and the format is cjs
+  // const templateRoot = new URL('./template', import.meta.url).pathname
+  const templateRoot = path.resolve(__dirname, 'template')
   const render = function render(templateName) {
     const templateDir = path.resolve(templateRoot, templateName)
     renderTemplate(templateDir, root)
@@ -267,10 +252,7 @@ async function init() {
         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')
-          )
+          fs.renameSync(filepath, filepath.replace(/jsconfig\.json$/, 'tsconfig.json'))
         }
       }
     )
@@ -278,10 +260,7 @@ async function init() {
     // 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')
-    )
+    fs.writeFileSync(indexHtmlPath, indexHtmlContent.replace('src/main.js', 'src/main.ts'))
   }
 
   if (!needsTests) {
@@ -304,6 +283,8 @@ async function init() {
 
   // Instructions:
   // Supported package managers: pnpm > yarn > npm
+  // Note: until <https://github.com/pnpm/pnpm/issues/3505> is resolved,
+  // it is not possible to tell if the command is called by `pnpm init`.
   const packageManager = /pnpm/.test(process.env.npm_execpath)
     ? 'pnpm'
     : /yarn/.test(process.env.npm_execpath)
@@ -311,12 +292,15 @@ async function init() {
     : 'npm'
 
   // README generation
-  fs.writeFileSync(path.resolve(root, 'README.md'), generateReadme({
-    projectName: result.projectName || defaultProjectName,
-    packageManager,
-    needsTypeScript,
-    needsTests
-  }))
+  fs.writeFileSync(
+    path.resolve(root, 'README.md'),
+    generateReadme({
+      projectName: result.projectName || defaultProjectName,
+      packageManager,
+      needsTypeScript,
+      needsTests
+    })
+  )
 
   console.log(`\nDone. Now run:\n`)
   if (root !== cwd) {