create-quasar 2.2.2 → 4.0.0

package/{utils → lib}/template.js

@@ -14,12 +14,14 @@ const defaultParseOptions = {
 }
 
 const newlineRE = /\n/
+const multipleNewlineRE = /\r\n|\n|\r/g
 const newlineTrimRE = /^(?:\r\n|\n|\r)/
 const escapeRegexpRE = /[.*+\-?^${}()|[\]\\]/g
 const templateLitReg =
   /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})*}|(?!\${)[^\\`])*`/g
 const singleQuoteReg = /'(?:\\[\s\w"'\\`]|[^\n\r'\\])*?'/g
 const doubleQuoteReg = /"(?:\\[\s\w"'\\`]|[^\n\r"\\])*?"/g
+const strEscapeRE = /\\|'/g
 
 function throwParseError(message, str, index) {
   const whitespace = str.slice(0, index).split(newlineRE)
@@ -36,8 +38,7 @@ function throwParseError(message, str, index) {
     '  ' +
     str.split(newlineRE)[lineNo - 1] +
     '\n' +
-    '  ' +
-    Array(colNo).join(' ') +
+    ' '.repeat(colNo + 1) +
     '^'
 
   throw new Error(message)
@@ -45,14 +46,14 @@ function throwParseError(message, str, index) {
 
 function escapeRegExp(str) {
   // From MDN
-  return str.replace(escapeRegexpRE, '\\$&') // $& means the whole matched string
+  return str.replace(escapeRegexpRE, String.raw`\$&`) // $& means the whole matched string
 }
 
 function trimWS(str, wsLeft, wsRight) {
   // Slightly confusing,
   // but _}} will trim the left side of the following string
-  let leftTrim = wsLeft || wsLeft === false ? wsLeft : 'nl'
-  let rightTrim = wsRight || wsRight === false ? wsRight : false
+  const leftTrim = wsLeft || wsLeft === false ? wsLeft : 'nl'
+  const rightTrim = wsRight || wsRight === false ? wsRight : false
 
   if (!rightTrim && !leftTrim) return str
 
@@ -81,7 +82,7 @@ function trimWS(str, wsLeft, wsRight) {
 
 // opts: { exec, interpolate, raw, tagStart, tagEnd }
 function getAST(str, opts) {
-  let ast = []
+  const ast = []
   let trimLeftOfNextStr = false
   let lastIndex = 0
 
@@ -103,7 +104,9 @@ function getAST(str, opts) {
         // replace \ with \\, ' with \'
         // we're going to convert all CRLF to LF so it doesn't take more than one replace
 
-        strng = strng.replace(/\\|'/g, '\\$&').replace(/\r\n|\n|\r/g, '\\n')
+        strng = strng
+          .replaceAll(strEscapeRE, String.raw`\$&`)
+          .replaceAll(multipleNewlineRE, String.raw`\n`)
 
         ast.push(strng)
       }
@@ -117,16 +120,18 @@ function getAST(str, opts) {
       } else if (prefix) {
         // accumulator is falsy
         return escapeRegExp(prefix)
-      } else {
-        // prefix and accumulator are both falsy
-        return accumulator
       }
+      // prefix and accumulator are both falsy
+      return accumulator
     },
     ''
   )
 
   const parseOpenReg = new RegExp(
-    escapeRegExp(opts.tagStart) + '(-|_)?\\s*(' + prefixes + ')?\\s*',
+    escapeRegExp(opts.tagStart) +
+      String.raw`(-|_)?\s*(` +
+      prefixes +
+      String.raw`)?\s*`,
     'g'
   )
 
@@ -135,8 +140,14 @@ function getAST(str, opts) {
     'g'
   )
 
-  let m
+  const parseRawCloseReg = opts.raw
+    ? new RegExp(
+        String.raw`(\s*(-|_)?` + escapeRegExp(opts.raw + opts.tagEnd) + ')',
+        'g'
+      )
+    : parseCloseReg
 
+  let m
   while ((m = parseOpenReg.exec(str))) {
     const precedingString = str.slice(lastIndex, m.index)
 
@@ -147,15 +158,17 @@ function getAST(str, opts) {
 
     pushString(precedingString, wsLeft)
 
-    parseCloseReg.lastIndex = lastIndex
+    const endReg = prefix === opts.raw ? parseRawCloseReg : parseCloseReg
+    endReg.lastIndex = lastIndex
+
     let closeTag
     let currentObj = false
 
-    while ((closeTag = parseCloseReg.exec(str))) {
+    while ((closeTag = endReg.exec(str))) {
       if (closeTag[1]) {
         const content = str.slice(lastIndex, closeTag.index)
 
-        parseOpenReg.lastIndex = lastIndex = parseCloseReg.lastIndex
+        parseOpenReg.lastIndex = lastIndex = endReg.lastIndex
 
         trimLeftOfNextStr = closeTag[2]
 
@@ -173,18 +186,18 @@ function getAST(str, opts) {
       } else {
         const char = closeTag[0]
         if (char === '/*') {
-          const commentCloseInd = str.indexOf('*/', parseCloseReg.lastIndex)
+          const commentCloseInd = str.indexOf('*/', endReg.lastIndex)
 
           if (commentCloseInd === -1) {
             throwParseError('unclosed comment', str, closeTag.index)
           }
-          parseCloseReg.lastIndex = commentCloseInd
+          endReg.lastIndex = commentCloseInd
         } else if (char === "'") {
           singleQuoteReg.lastIndex = closeTag.index
 
           const singleQuoteMatch = singleQuoteReg.exec(str)
           if (singleQuoteMatch) {
-            parseCloseReg.lastIndex = singleQuoteReg.lastIndex
+            endReg.lastIndex = singleQuoteReg.lastIndex
           } else {
             throwParseError('unclosed string', str, closeTag.index)
           }
@@ -193,7 +206,7 @@ function getAST(str, opts) {
           const doubleQuoteMatch = doubleQuoteReg.exec(str)
 
           if (doubleQuoteMatch) {
-            parseCloseReg.lastIndex = doubleQuoteReg.lastIndex
+            endReg.lastIndex = doubleQuoteReg.lastIndex
           } else {
             throwParseError('unclosed string', str, closeTag.index)
           }
@@ -201,7 +214,7 @@ function getAST(str, opts) {
           templateLitReg.lastIndex = closeTag.index
           const templateLitMatch = templateLitReg.exec(str)
           if (templateLitMatch) {
-            parseCloseReg.lastIndex = templateLitReg.lastIndex
+            endReg.lastIndex = templateLitReg.lastIndex
           } else {
             throwParseError('unclosed string', str, closeTag.index)
           }
@@ -215,40 +228,47 @@ function getAST(str, opts) {
     }
   }
 
-  pushString(str.slice(lastIndex, str.length), false)
+  pushString(str.slice(lastIndex), false)
   return ast
 }
 
+const rawContentRE = /[$`\\"]/g
+function parseRawContent(content) {
+  return '"' + content.replaceAll(rawContentRE, String.raw`\$&`) + '"'
+}
+
 // opts: { varName, header }
 function compileBody(ast, opts) {
   let i = 0
   const astLength = ast.length
-  let returnStr = `${opts.header}\nlet ${fnAccumulator} = '';\n`
+  let returnStr = `${opts.header}\nlet ${fnAccumulator} = ''\n`
 
   for (; i < astLength; i++) {
     const currentBlock = ast[i]
 
     if (typeof currentBlock === 'string') {
-      returnStr += `${fnAccumulator}+='${currentBlock}';\n`
+      returnStr += `${fnAccumulator}+='${currentBlock}'\n`
       continue
     }
 
-    const type = currentBlock.t // "r", "e", or "i"
-    let content = currentBlock.val || ''
-
-    if (type === 'r') {
-      // raw
-      returnStr += `${fnAccumulator}+=${content};\n`
-    } else if (type === 'i') {
-      // interpolate
-      returnStr += `${fnAccumulator}+=${content};\n`
-    } else if (type === 'e') {
-      // execute
-      returnStr += content + '\n'
+    const content = currentBlock.val ?? ''
+    if (content !== '') {
+      const type = currentBlock.t // "r", "e", or "i"
+
+      if (type === 'e') {
+        // execute
+        returnStr += content + '\n'
+      } else if (type === 'r') {
+        // raw
+        returnStr += `${fnAccumulator}+=${parseRawContent(content)}\n`
+      } else if (type === 'i') {
+        // interpolate
+        returnStr += `${fnAccumulator}+=${content}\n`
+      }
     }
   }
 
-  return returnStr + `\nreturn ${fnAccumulator};`
+  return `${returnStr}\nreturn ${fnAccumulator}`
 }
 
 export function compileTemplateToFile(str, rawOpts = {}) {
@@ -262,19 +282,32 @@ export function compileTemplateToFn(str, rawOpts = {}) {
   const opts = { ...defaultParseOptions, ...rawOpts }
   const ast = getAST(str, opts)
   const body = compileBody(ast, opts)
+
+  // oxlint-disable-next-line no-new-func
   return new Function(opts.varName, body)
 }
 
-export function renderTemplate(str, scope, rawOpts) {
-  let opts = rawOpts
-  if (opts?.varName === false) {
-    opts.varName = defaultParseOptions.varName
+function getRenderTemplateOpts(rawOpts, scope) {
+  if (rawOpts?.varName === false) {
     const keys = Object.keys(scope)
-    if (keys.length !== 0) {
-      opts.header = `const { ${keys.join(', ')} } = ${defaultParseOptions.varName}`
+    return {
+      ...rawOpts,
+      varName: defaultParseOptions.varName,
+      header:
+        keys.length !== 0
+          ? `const { ${keys.join(', ')} } = ${defaultParseOptions.varName}`
+          : ''
     }
   }
 
-  const templateFn = compileTemplateToFn(str, opts)
+  return rawOpts
+}
+
+export function renderTemplate(str, scope, rawOpts) {
+  const templateFn = compileTemplateToFn(
+    str,
+    getRenderTemplateOpts(rawOpts, scope)
+  )
+
   return templateFn(scope)
 }

package/lib/utils.js

@@ -0,0 +1,418 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { styleText } from 'node:util'
+import { fileURLToPath } from 'node:url'
+import { dirname, extname, join, resolve } from 'node:path'
+import { execSync as exec } from 'node:child_process'
+import { sync as spawnSync } from 'cross-spawn'
+import {
+  copySync,
+  emptyDirSync,
+  ensureDirSync,
+  ensureFileSync
+} from 'fs-extra/esm'
+import { globSync } from 'tinyglobby'
+import {
+  box,
+  cancel,
+  confirm,
+  group,
+  groupMultiselect,
+  intro,
+  isCancel,
+  log,
+  multiselect,
+  note,
+  outro,
+  select,
+  taskLog,
+  text
+} from '@clack/prompts'
+
+import { renderTemplate as renderTemplateFn } from './template.js'
+
+const prompts = {
+  text,
+  confirm,
+  select,
+  multiselect,
+  groupMultiselect,
+  group,
+
+  intro,
+  outro,
+  taskLog,
+  log,
+  note: (msg, title) => {
+    /**
+     * Bug in @clack/prompts note formatting,
+     * so we need to reset the color for each line
+     */
+    const formattedMsg = msg
+      .split('\n')
+      .map(line => styleText('reset', line))
+      .join('\n')
+
+    note(formattedMsg, title)
+  },
+  box
+}
+
+const TEMPLATING_FILE_EXTENSIONS = [
+  '',
+  '.json',
+  '.js',
+  '.cjs',
+  '.ts',
+  '.vue',
+  '.md',
+  '.html',
+  '.sass'
+]
+
+function cancelScaffolding({
+  message = 'Scaffolding cancelled',
+  exit = true
+} = {}) {
+  cancel(message)
+  if (exit !== false) process.exit(exit === true ? 1 : exit)
+}
+
+function exitOnCancel(val) {
+  if (isCancel(val)) cancelScaffolding()
+  return val
+}
+
+async function promptUser(
+  scope,
+  questions,
+  onCancel = () => cancelScaffolding()
+) {
+  for (const key in questions) {
+    // if it came pre-filled
+    if (scope[key] !== void 0) continue
+
+    scope[key] = await questions[key]()
+    if (isCancel(scope[key])) {
+      onCancel()
+      return
+    }
+  }
+}
+
+function createTargetDir(scope) {
+  const fn = scope.overwrite ? emptyDirSync : ensureDirSync
+  fn(scope.projectFolder)
+}
+
+function convertArrayToObject(arr) {
+  const acc = {}
+  arr.forEach(key => {
+    acc[key] = true
+  })
+  return acc
+}
+
+function getCallerPath() {
+  const _prepareStackTrace = Error.prepareStackTrace
+  Error.prepareStackTrace = (_, stack) => stack
+  const stack = new Error('err').stack.slice(1)
+  Error.prepareStackTrace = _prepareStackTrace
+  const filename = stack[1].getFileName()
+  return dirname(
+    filename.startsWith('file://') ? fileURLToPath(filename) : filename
+  )
+}
+
+function renderTemplate(relativePath, scope) {
+  const templateDir = join(getCallerPath(), relativePath)
+  const files = globSync(['**/*'], { cwd: templateDir })
+
+  for (const rawPath of files) {
+    const targetRelativePath = rawPath
+      .split('/')
+      .map(name => (name.startsWith('_') ? name.slice(1) : name))
+      .join('/')
+
+    const targetPath = resolve(scope.projectFolder, targetRelativePath)
+    const sourcePath = resolve(templateDir, rawPath)
+    const extension = extname(targetRelativePath)
+
+    ensureFileSync(targetPath)
+
+    if (TEMPLATING_FILE_EXTENSIONS.includes(extension)) {
+      const rawContent = readFileSync(sourcePath, 'utf8')
+
+      let newContent = renderTemplateFn(rawContent, scope)
+      if (extension === '.json') {
+        try {
+          // try to format the JSON
+          newContent = JSON.stringify(JSON.parse(newContent), null, 2)
+        } catch {
+          // noop, the JSON might be containing comments, leave it unformatted
+        }
+      }
+
+      writeFileSync(targetPath, newContent, 'utf8')
+    } else {
+      copySync(sourcePath, targetPath)
+    }
+  }
+}
+
+function waitForKey() {
+  const { stdin } = process
+
+  // Are we in a real terminal?
+  // If not (e.g., CI pipeline), resolve immediately so the script doesn't hang forever.
+  if (!stdin.isTTY) return Promise.resolve()
+
+  process.stdout.write('Press any key to continue...')
+
+  const { promise, resolve: resolvePromise } = Promise.withResolvers()
+
+  // Enable raw mode to bypass the 'Enter' key requirement
+  stdin.setRawMode(true)
+  stdin.resume()
+  stdin.setEncoding('utf8')
+
+  const handleKey = key => {
+    stdin.off('data', handleKey)
+    stdin.setRawMode(false)
+    stdin.pause()
+
+    // Explicitly handle Ctrl+C
+    if (key === '\u0003') {
+      console.log('\nProcess cancelled by user (Ctrl+C)\n')
+      process.exit(1)
+    }
+
+    resolvePromise()
+  }
+
+  stdin.on('data', handleKey)
+  return promise
+}
+
+function enterAlternateScreen(message) {
+  // if we're not in a real terminal
+  if (!process.stdin.isTTY) {
+    if (message) console.log(`>>> ${message}\n`)
+    return
+  }
+
+  // Enter Alternate Screen Buffer (hides current terminal history)
+  process.stdout.write('\u001B[?1049h')
+  // Move cursor to top left
+  process.stdout.write('\u001B[H')
+
+  if (message) console.log(`>>> ${message}\n`)
+}
+
+function exitAlternateScreen() {
+  // if we're not in a real terminal
+  if (!process.stdin.isTTY) return
+
+  process.stdout.write('\u001B[?1049l')
+}
+
+async function runCommand({
+  cmd,
+  args,
+  cwd,
+  message,
+  successMessage,
+  errorMessage
+}) {
+  const logTask = taskLog({ title: message })
+  enterAlternateScreen(`Running command: ${cmd} ${args.join(' ')}`)
+
+  const runner = spawnSync(cmd, args, {
+    cwd,
+    args,
+    stdio: 'inherit',
+    // Force colors so the captured error formatting isn't lost
+    env: { ...process.env, FORCE_COLOR: '1' }
+  })
+
+  if (runner.error || runner.status) {
+    const msg = `⚠️  ⚠️  ⚠️  ${errorMessage} ⚠️  ⚠️  ⚠️ `
+
+    console.log()
+    console.error(msg)
+    console.log()
+
+    await waitForKey()
+    exitAlternateScreen()
+    logTask.error(msg)
+
+    return true
+  }
+
+  exitAlternateScreen()
+  logTask.success(successMessage)
+
+  return false
+}
+
+async function installDeps(scope) {
+  const hadError = await runCommand({
+    cmd: scope.install,
+    args: ['install'],
+    cwd: scope.projectFolder,
+    message: `Installing dependencies using ${scope.install.toUpperCase()}...`,
+    successMessage: 'Dependencies installed successfully!',
+    errorMessage:
+      'Could not auto install dependencies. Probably a temporary npm registry issue?'
+  })
+
+  if (hadError) {
+    scope.install = false
+    return false
+  }
+
+  return true
+}
+
+// returns a Promise!
+// depends on install
+function lintFolder(scope) {
+  return runCommand({
+    cmd: scope.install,
+    args: ['run', 'lint'],
+    cwd: scope.projectFolder,
+    message: 'Linting & Formatting the project folder...',
+    successMessage: 'Project linted & formatted successfully!',
+    errorMessage: 'Could not auto lint & format the project folder.'
+  })
+}
+
+function hasGit() {
+  try {
+    exec('git --version')
+    return true
+  } catch {}
+}
+
+function folderHasGit(cwd) {
+  try {
+    exec('git status', { stdio: 'ignore', cwd })
+    return true
+  } catch {}
+}
+
+function initializeGit(projectFolder) {
+  if (hasGit() !== true) {
+    log.info(
+      'Git is not installed on the system, so skipping Git repo initialization.'
+    )
+    return
+  }
+
+  if (folderHasGit(projectFolder)) {
+    log.info(
+      'A parent of the project folder is already a Git repository, so skipping Git initialization.'
+    )
+    return
+  }
+
+  const logTask = taskLog({
+    title: 'Initializing Git repository...'
+  })
+
+  try {
+    exec('git init', { cwd: projectFolder })
+    exec('git add -A', { cwd: 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()
+      if (needsSigning === 'true') {
+        logTask.message('Creating initial commit (waiting for GPG signing)...')
+      }
+    } catch {}
+
+    exec('git commit -m "Initialize the project 🚀" --no-verify', {
+      cwd: projectFolder
+    })
+  } catch {
+    logTask.error(
+      'Could not initialize Git repository. Please do this manually.'
+    )
+    return
+  }
+
+  logTask.success('Initialized Git repository 🚀')
+}
+
+async function getGitUser() {
+  let name
+  let email
+
+  const { execSync } = await import('node:child_process')
+
+  try {
+    name = execSync('git config --get user.name')
+    email = execSync('git config --get user.email')
+  } catch {}
+
+  if (!name && !email) return // user will be prompted
+
+  return (
+    (name ? JSON.stringify(name.toString().trim()).slice(1, -1) : '') +
+    (email ? ' <' + email.toString().trim() + '>' : '')
+  )
+}
+
+const definitions = {
+  projectFolder: {
+    default: 'quasar-project'
+  },
+
+  name: {
+    default: projectFolderName =>
+      projectFolderName
+        .trim()
+        .toLowerCase()
+        .replaceAll(/\s+/g, '-')
+        .replace(/^[._]/, '')
+        .replaceAll(/[^a-z0-9-~]+/g, '-'),
+
+    isValid: name =>
+      /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name)
+  },
+
+  product: {
+    default: 'Quasar App'
+  },
+
+  template: {
+    default: 'app'
+  },
+
+  engine: {
+    default: 'vite-3'
+  }
+}
+
+export default {
+  cancelScaffolding,
+  exitOnCancel,
+
+  promptUser,
+  prompts,
+  definitions,
+  convertArrayToObject,
+
+  createTargetDir,
+  renderTemplate,
+
+  installDeps,
+  lintFolder,
+  initializeGit,
+  getGitUser
+}