create-quasar 2.1.0 → 2.2.0

package/utils/index.js

@@ -3,23 +3,37 @@ import { fileURLToPath } from 'node:url'
 import { sep, dirname, normalize, join, resolve, extname } from 'node:path'
 import { execSync as exec } from 'node:child_process'
 import { sync as spawnSync } from 'cross-spawn'
-
-import { emptyDirSync, ensureDirSync, ensureFileSync, copySync } from 'fs-extra/esm'
+import {
+  emptyDirSync,
+  ensureDirSync,
+  ensureFileSync,
+  copySync
+} from 'fs-extra/esm'
 import promptUser from 'prompts'
-import compileTemplate from 'lodash/template.js'
 import { globSync } from 'tinyglobby'
 import { yellow, green } from 'kolorist'
 
+import { renderTemplate as renderTemplateFn } from './template.js'
 import logger from './logger.js'
 
-const TEMPLATING_FILE_EXTENSIONS = [ '', '.json', '.js', '.cjs', '.ts', '.vue', '.md', '.html', '.sass' ]
+const TEMPLATING_FILE_EXTENSIONS = [
+  '',
+  '.json',
+  '.js',
+  '.cjs',
+  '.ts',
+  '.vue',
+  '.md',
+  '.html',
+  '.sass'
+]
 
 /**
  * @param {Record<string, any>} scope
  * @param {promptUser.PromptObject[]} questions
  * @param {promptUser.Options} opts
  */
-async function prompts (scope, questions, opts) {
+async function prompts(scope, questions, opts) {
   const options = opts || {
     onCancel: () => {
       logger.fatal('Scaffolding cancelled')
@@ -30,7 +44,7 @@ async function prompts (scope, questions, opts) {
   Object.assign(scope, answers)
 }
 
-function createTargetDir (scope) {
+function createTargetDir(scope) {
   console.log()
   logger.log('Generating files...')
   console.log()
@@ -39,10 +53,10 @@ function createTargetDir (scope) {
   fn(scope.projectFolder)
 }
 
-function convertArrayToObject (arr) {
+function convertArrayToObject(arr) {
   const acc = {}
   arr.forEach(key => {
-    acc[ key ] = true
+    acc[key] = true
   })
   return acc
 }
@@ -53,37 +67,30 @@ const runningPackageManager = (() => {
     return
   }
 
-  const [ name, version ] = userAgent.split(' ')[ 0 ].split('/')
+  const [name, version] = userAgent.split(' ')[0].split('/')
   return { name, version }
 })()
 
-function getCallerPath () {
+function getCallerPath() {
   const _prepareStackTrace = Error.prepareStackTrace
   Error.prepareStackTrace = (_, stack) => stack
   const stack = new Error().stack.slice(1)
   Error.prepareStackTrace = _prepareStackTrace
-  const filename = stack[ 1 ].getFileName()
+  const filename = stack[1].getFileName()
   return dirname(
-    filename.startsWith('file://')
-      ? fileURLToPath(filename)
-      : filename
+    filename.startsWith('file://') ? fileURLToPath(filename) : filename
   )
 }
 
-function renderTemplate (relativePath, scope) {
+function renderTemplate(relativePath, scope) {
   const templateDir = join(getCallerPath(), relativePath)
-  const files = globSync([ '**/*' ], { cwd: templateDir })
+  const files = globSync(['**/*'], { cwd: templateDir })
 
   for (const rawPath of files) {
-    const targetRelativePath = rawPath.split('/').map(name => {
-      // dotfiles are ignored when published to npm, therefore in templates
-      // we need to prefix them with an underscore (e.g. "_.gitignore")
-      // Also, some tools like ESLint expect valid config files, therefore
-      // we also prefix files like "package.json" too. (e.g. "_package.json")
-      return name.startsWith('_')
-        ? name.slice(1)
-        : name
-    }).join('/')
+    const targetRelativePath = rawPath
+      .split('/')
+      .map(name => (name.startsWith('_') ? name.slice(1) : name))
+      .join('/')
 
     const targetPath = resolve(scope.projectFolder, targetRelativePath)
     const sourcePath = resolve(templateDir, rawPath)
@@ -91,13 +98,12 @@ function renderTemplate (relativePath, scope) {
 
     ensureFileSync(targetPath)
 
-    console.log(` ${ green('-') } ${ targetRelativePath }`)
+    console.log(` ${green('-')} ${targetRelativePath}`)
 
     if (TEMPLATING_FILE_EXTENSIONS.includes(extension)) {
       const rawContent = readFileSync(sourcePath, 'utf-8')
-      const template = compileTemplate(rawContent, { interpolate: /<%=([\s\S]+?)%>/g })
 
-      let newContent = template(scope)
+      let newContent = renderTemplateFn(rawContent, scope)
       if (extension === '.json') {
         try {
           // try to format the JSON
@@ -108,20 +114,19 @@ function renderTemplate (relativePath, scope) {
       }
 
       writeFileSync(targetPath, newContent, 'utf-8')
-    }
-    else {
+    } else {
       copySync(sourcePath, targetPath)
     }
   }
 }
 
-function isValidPackageName (projectName) {
+function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
     projectName
   )
 }
 
-function inferPackageName (projectFolder) {
+function inferPackageName(projectFolder) {
   return projectFolder
     .trim()
     .toLowerCase()
@@ -130,22 +135,21 @@ function inferPackageName (projectFolder) {
     .replace(/[^a-z0-9-~]+/g, '-')
 }
 
-function escapeString (val) {
+function escapeString(val) {
   return JSON.stringify(val).slice(1, -1)
 }
 
-function getGitUser () {
+function getGitUser() {
   let name
   let email
 
   try {
     name = exec('git config --get user.name')
     email = exec('git config --get user.email')
-  }
-  catch (_) {}
+  } catch {}
 
   name = name && JSON.stringify(name.toString().trim()).slice(1, -1)
-  email = email && (' <' + email.toString().trim() + '>')
+  email = email && ' <' + email.toString().trim() + '>'
 
   return (name || '') + (email || '')
 }
@@ -155,20 +159,28 @@ function getGitUser () {
  *
  * @param {Object} scope Data from questionnaire.
  */
-function printFinalMessage (scope) {
+function printFinalMessage(scope) {
   const verPrefix = scope.quasarVersion ? scope.quasarVersion + '.' : ''
   const message = `
  To get started:
- ${ yellow(`
-   cd ${ scope.projectFolderName }${ scope.skipDepsInstall !== true && scope.packageManager === false ? `
+ ${yellow(`
+   cd ${scope.projectFolderName}${
+     scope.skipDepsInstall !== true && scope.packageManager === false
+       ? `
    yarn #or: npm install
-   yarn lint --fix # or: npm run lint -- --fix` : '' }${ scope.skipDepsInstall !== true ? `
-   quasar dev # or: yarn quasar dev # or: npx quasar dev` : '' }
- `) }
- Documentation can be found at: https://${ verPrefix }quasar.dev
+   yarn lint --fix # or: npm run lint -- --fix`
+       : ''
+   }${
+     scope.skipDepsInstall !== true
+       ? `
+   quasar dev # or: yarn quasar dev # or: npx quasar dev`
+       : ''
+   }
+ `)}
+ Documentation can be found at: https://${verPrefix}quasar.dev
 
  Quasar is relying on donations to evolve. We'd be very grateful if you can
- read our manifest on "Why donations are important": https://${ verPrefix }quasar.dev/why-donate
+ read our manifest on "Why donations are important": https://${verPrefix}quasar.dev/why-donate
  Donation campaign: https://donate.quasar.dev
  Any amount is very welcome.
  If invoices are required, please first contact Razvan Stoenescu.
@@ -182,81 +194,77 @@ function printFinalMessage (scope) {
   console.log(message)
 }
 
-function runCommand (cmd, args, options) {
+function runCommand(cmd, args, options) {
   console.log()
 
-  const runner = spawnSync(
-    cmd,
-    args,
-    { cwd: process.cwd(), stdio: 'inherit', ...options }
-  )
+  const runner = spawnSync(cmd, args, {
+    cwd: process.cwd(),
+    stdio: 'inherit',
+    ...options
+  })
 
   console.log()
 
   if (runner.status) {
-    console.log(` ${ cmd } FAILED...`)
+    console.log(` ${cmd} FAILED...`)
     console.log()
-    throw new Error(`${ cmd } FAILED`)
+    throw new Error(`${cmd} FAILED`)
   }
 }
 
-function installDeps (scope) {
-  const args = [ 'install' ]
+function installDeps(scope) {
+  const args = ['install']
   // Related to scripts/create-test-project.ts
   if (process.env.CREATE_TEST_PROJECT_OVERRIDE === 'true') {
     // If we don't use this flag, then the test project will become part of the monorepo and fail to install properly
     args.push('--ignore-workspace')
   }
 
-  return runCommand(
-    scope.packageManager,
-    args,
-    { cwd: scope.projectFolder }
-  )
+  return runCommand(scope.packageManager, args, { cwd: scope.projectFolder })
 }
 
-function lintFolder (scope) {
+function lintFolder(scope) {
   return runCommand(
     scope.packageManager,
     scope.packageManager === 'npm'
-      ? [ 'run', 'lint', '--', '--fix' ]
-      : [ 'run', 'lint', '--fix' ],
+      ? ['run', 'lint', '--', '--fix']
+      : ['run', 'lint', '--fix'],
     { cwd: scope.projectFolder }
   )
 }
 
-function formatFolder (scope) {
-  return runCommand(
-    scope.packageManager,
-    [ 'run', 'format' ],
-    { cwd: scope.projectFolder }
-  )
+function formatFolder(scope) {
+  return runCommand(scope.packageManager, ['run', 'format'], {
+    cwd: scope.projectFolder
+  })
 }
 
-function hasGit () {
+function hasGit() {
   try {
     exec('git --version')
     return true
-  }
-  catch (_) {}
+  } catch {}
 }
 
-function folderHasGit (cwd) {
+function folderHasGit(cwd) {
   try {
     exec('git status', { stdio: 'ignore', cwd })
     return true
-  }
-  catch (_) {}
+  } catch {}
 }
 
-function initializeGit (projectFolder) {
+function initializeGit(projectFolder) {
   if (hasGit() !== true) {
-    logger.log('Git is not installed on the system, so skipping Git repo initialization.')
+    logger.log(
+      'Git is not installed on the system, so skipping Git repo initialization.'
+    )
     return
   }
 
   if (folderHasGit(projectFolder) === true) {
-    logger.log('A parent of the project folder is already a Git repository, so skipping Git initialization.')
+    logger.log(
+      'A parent of the project folder is already a Git repository, so skipping Git initialization.'
+    )
     return
   }
 
@@ -267,16 +275,20 @@ function initializeGit (projectFolder) {
 
     // Provide useful feedback to the user if they have GPG signing enabled to avoid feeling that the process is hanging
     try {
-      const needsSigning = exec('git config --get commit.gpgsign', { cwd: projectFolder }).toString().trim()
+      const needsSigning = exec('git config --get commit.gpgsign', {
+        cwd: projectFolder
+      })
+        .toString()
+        .trim()
       if (needsSigning === 'true') {
         logger.log('Creating initial commit (waiting for GPG signing)...')
       }
-    }
-    catch (_) {}
+    } catch {}
 
-    exec('git commit -m "Initialize the project 🚀" --no-verify', { cwd: projectFolder })
-  }
-  catch (_) {
+    exec('git commit -m "Initialize the project 🚀" --no-verify', {
+      cwd: projectFolder
+    })
+  } catch {
     logger.warn('Could not initialize Git repository. Please do this manually.')
     return
   }
@@ -292,14 +304,16 @@ const quasarConfigFilenameList = [
   'quasar.conf.js' // legacy
 ]
 
-function ensureOutsideProject () {
+function ensureOutsideProject() {
   let dir = process.cwd()
 
-  while (dir.length && dir[ dir.length - 1 ] !== sep) {
+  while (dir.length && dir[dir.length - 1] !== sep) {
     for (const name of quasarConfigFilenameList) {
       const filename = join(dir, name)
       if (existsSync(filename)) {
-        logger.fatal('Error. This command must NOT be executed inside of a Quasar project folder.')
+        logger.fatal(
+          'Error. This command must NOT be executed inside of a Quasar project folder.'
+        )
       }
     }
 
@@ -324,10 +338,10 @@ const commonPrompts = {
   productName: {
     type: 'text',
     name: 'productName',
-    message: 'Project product name: (must start with letter if building mobile apps)',
+    message:
+      'Project product name: (must start with letter if building mobile apps)',
     initial: 'Quasar App',
-    validate: val =>
-      (val && val.length > 0) || 'Invalid product name'
+    validate: val => (val && val.length > 0) || 'Invalid product name'
   },
 
   description: {
@@ -336,8 +350,7 @@ const commonPrompts = {
     message: 'Project description:',
     initial: 'A Quasar Project',
     format: escapeString,
-    validate: val =>
-      val.length > 0 || 'Invalid project description'
+    validate: val => val.length > 0 || 'Invalid project description'
   },
 
   license: {
@@ -348,7 +361,7 @@ const commonPrompts = {
   }
 }
 
-export async function injectAuthor (scope) {
+export async function injectAuthor(scope) {
   const author = getGitUser()
 
   if (author) {

package/utils/logger.js

@@ -1,9 +1,13 @@
 import {
-  bgGreen, green,
+  bgGreen,
+  green,
   inverse,
-  bgRed, red,
-  bgYellow, yellow,
-  black, white,
+  bgRed,
+  red,
+  bgYellow,
+  yellow,
+  black,
+  white,
   underline
 } from 'kolorist'
 
@@ -13,10 +17,10 @@ import readline from 'node:readline'
  * Pills
  */
 
-const successPill = msg => bgGreen(black(` ${ msg } `))
-const infoPill = msg => inverse(` ${ msg } `)
-const errorPill = msg => bgRed(white(` ${ msg } `))
-const warningPill = msg => bgYellow(black(` ${ msg } `))
+const successPill = msg => bgGreen(black(` ${msg} `))
+const infoPill = msg => inverse(` ${msg} `)
+const errorPill = msg => bgRed(white(` ${msg} `))
+const warningPill = msg => bgYellow(black(` ${msg} `))
 
 /**
  * Main approach
@@ -27,7 +31,7 @@ const banner = 'Quasar ' + dot
 const greenBanner = green(banner)
 const redBanner = red(banner)
 const yellowBanner = yellow(banner)
-const tipBanner = `${ green('App') } ${ dot } ${ successPill('TIP') } ${ dot } 🚀 `
+const tipBanner = `${green('App')} ${dot} ${successPill('TIP')} ${dot} 🚀 `
 
 const clearConsole = process.stdout.isTTY
   ? () => {
@@ -39,36 +43,31 @@ const clearConsole = process.stdout.isTTY
     }
   : () => {}
 
-function tip (msg) {
-  console.log(msg ? ` ${ tipBanner } ${ msg }` : '')
+function tip(msg) {
+  console.log(msg ? ` ${tipBanner} ${msg}` : '')
 }
 
-function log (msg) {
-  console.log(msg ? ` ${ greenBanner } ${ msg }` : '')
+function log(msg) {
+  console.log(msg ? ` ${greenBanner} ${msg}` : '')
 }
 
-function warn (msg, pill) {
+function warn(msg, pill) {
   if (msg !== void 0) {
-    const pillBanner = pill !== void 0
-      ? bgYellow(black('', pill, '')) + ' '
-      : ''
+    const pillBanner =
+      pill !== void 0 ? bgYellow(black('', pill, '')) + ' ' : ''
 
-    console.warn(` ${ yellowBanner } ⚠️  ${ pillBanner }${ msg }`)
-  }
-  else {
+    console.warn(` ${yellowBanner} ⚠️  ${pillBanner}${msg}`)
+  } else {
     console.warn()
   }
 }
 
-function fatal (msg, pill) {
+function fatal(msg, pill) {
   if (msg !== void 0) {
-    const pillBanner = pill !== void 0
-      ? errorPill(pill) + ' '
-      : ''
+    const pillBanner = pill !== void 0 ? errorPill(pill) + ' ' : ''
 
-    console.error(`\n ${ redBanner } ⚠️  ${ pillBanner }${ msg }\n`)
-  }
-  else {
+    console.error(`\n ${redBanner} ⚠️  ${pillBanner}${msg}\n`)
+  } else {
     console.error()
   }
 
@@ -79,50 +78,53 @@ function fatal (msg, pill) {
  * Extended approach - Status & pills
  */
 
-function success (msg, title = 'SUCCESS') {
-  console.log(` ${ greenBanner } ${ successPill(title) } ${ green(dot + ' ' + msg) }`)
+function success(msg, title = 'SUCCESS') {
+  console.log(` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`)
 }
-function getSuccess (msg, title) {
-  return ` ${ greenBanner } ${ successPill(title) } ${ green(dot + ' ' + msg) }`
+function getSuccess(msg, title) {
+  return ` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`
 }
 
-function info (msg, title = 'INFO') {
-  console.log(` ${ greenBanner } ${ infoPill(title) } ${ green(dot) } ${ msg }`)
+function info(msg, title = 'INFO') {
+  console.log(` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`)
 }
-function getInfo (msg, title) {
-  return ` ${ greenBanner } ${ infoPill(title) } ${ green(dot) } ${ msg }`
+function getInfo(msg, title) {
+  return ` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`
 }
 
-function error (msg, title = 'ERROR') {
-  console.log(` ${ redBanner } ${ errorPill(title) } ${ red(dot + ' ' + msg) }`)
+function error(msg, title = 'ERROR') {
+  console.log(` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`)
 }
-function getError (msg, title = 'ERROR') {
-  return ` ${ redBanner } ${ errorPill(title) } ${ red(dot + ' ' + msg) }`
+function getError(msg, title = 'ERROR') {
+  return ` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`
 }
 
-function warning (msg, title = 'WARNING') {
-  console.log(` ${ yellowBanner } ${ warningPill(title) } ${ yellow(dot + ' ' + msg) }`)
+function warning(msg, title = 'WARNING') {
+  console.log(
+    ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
+  )
 }
-function getWarning (msg, title = 'WARNING') {
-  return ` ${ yellowBanner } ${ warningPill(title) } ${ yellow(dot + ' ' + msg) }`
+function getWarning(msg, title = 'WARNING') {
+  return ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
 }
 
 /**
  * Progress related
  */
 
-function progress (msg, token) {
-  const parseMsg = token !== void 0
-    ? text => text.replace('___', underline(green(token)))
-    : text => text
+function progress(msg, token) {
+  const parseMsg =
+    token !== void 0
+      ? text => text.replace('___', underline(green(token)))
+      : text => text
 
   info(parseMsg(msg), 'WAIT')
 
   const startTime = Date.now()
 
-  return msg => {
-    const diffTime = +new Date() - startTime
-    success(`${ parseMsg(msg) } ${ dot } ${ diffTime }ms`, 'DONE')
+  return progressMessage => {
+    const diffTime = Number(new Date()) - startTime
+    success(`${parseMsg(progressMessage)} ${dot} ${diffTime}ms`, 'DONE')
     log()
   }
 }