create-quasar 2.1.1 → 2.2.1

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/layouts/MyLayout.vue

@@ -11,7 +11,7 @@
         />
 
         <q-toolbar-title>
-          quasar-ui-<%= name %> v{{ version }}
+          quasar-ui-<%= scope.name %> v{{ version }}
         </q-toolbar-title>
 
         <div>Quasar v{{ $q.version }}</div>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/pages/Test1.vue

@@ -1,10 +1,10 @@
 <template>
   <q-page padding>
-    <% if (features.component) { %>
-    <<%= componentName %> />
+    <% if (scope.features.component) { %>
+    <<%= scope.componentName %> />
     <% } %>
-    <% if (features.directive) { %>
-    <div v-<%= directiveName %> class="directive-target">
+    <% if (scope.features.directive) { %>
+    <div v-<%= scope.directiveName %> class="directive-target">
       x
     </div>
     <% } %>

package/templates/ui-kit/quasar-v2/BASE/ui/src/index.sass

@@ -1,7 +1,7 @@
 @import 'quasar/src/css/variables.sass'
-<% if (features.component) { %>
+<% if (scope.features.component) { %>
 @import './components/Component.sass'
 <% } %>
-<% if (features.directive) { %>
+<% if (scope.features.directive) { %>
 @import './directives/Directive.sass'
 <% } %>

package/templates/ui-kit/quasar-v2/BASE/ui/src/vue-plugin.js

@@ -1,16 +1,16 @@
-<% if (features.component) { %>import Component from './components/Component'<% } %>
-<% if (features.directive) { %>import Directive from './directives/Directive'<% } %>
+<% if (scope.features.component) { %>import Component from './components/Component'<% } %>
+<% if (scope.features.directive) { %>import Directive from './directives/Directive'<% } %>
 
 const version = __UI_VERSION__
 
 function install (app) {
-<% if (features.component) { %>  app.component(Component.name, Component)<% } %>
-<% if (features.directive) { %>  app.directive(Directive.name, Directive)<% } %>
+<% if (scope.features.component) { %>  app.component(Component.name, Component)<% } %>
+<% if (scope.features.directive) { %>  app.directive(Directive.name, Directive)<% } %>
 }
 
 export {
   version,
-<% if (features.component) { %>  Component,<% } %>
-<% if (features.directive) { %>  Directive,<% } %>
+<% if (scope.features.component) { %>  Component,<% } %>
+<% if (scope.features.directive) { %>  Directive,<% } %>
   install
 }

package/templates/ui-kit/quasar-v2/BASE/ui/umd-test.html

@@ -46,13 +46,13 @@
       const app = Vue.createApp({
         setup () {
           return {
-            version: <%= umdExportName %>.version
+            version: <%= scope.umdExportName %>.version
           }
         }
       })
 
       app.use(Quasar)
-      app.use(<%= umdExportName %>)
+      app.use(<%= scope.umdExportName %>)
       app.mount('#q-app')
     </script>
   </body>

package/templates/ui-kit/quasar-v2/ae/app-extension/README.md

@@ -1,13 +1,13 @@
-# Quasar App Extension <%= name %>
+# Quasar App Extension <%= scope.name %>
 
 > Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
 
-[![npm](https://img.shields.io/npm/v/quasar-app-extension-<%= name %>.svg?label=quasar-app-extension-<%= name %>)](https://www.npmjs.com/package/quasar-app-extension-<%= name %>)
-[![npm](https://img.shields.io/npm/dt/quasar-app-extension-<%= name %>.svg)](https://www.npmjs.com/package/quasar-app-extension-<%= name %>)
+[![npm](https://img.shields.io/npm/v/quasar-app-extension-<%= scope.name %>.svg?label=quasar-app-extension-<%= scope.name %>)](https://www.npmjs.com/package/quasar-app-extension-<%= scope.name %>)
+[![npm](https://img.shields.io/npm/dt/quasar-app-extension-<%= scope.name %>.svg)](https://www.npmjs.com/package/quasar-app-extension-<%= scope.name %>)
 
 # Install
 ```bash
-quasar ext add <%= name %>
+quasar ext add <%= scope.name %>
 ```
 Quasar CLI will retrieve it from NPM and install the extension.
 
@@ -17,7 +17,7 @@ Quasar CLI will retrieve it from NPM and install the extension.
 
 # Uninstall
 ```bash
-quasar ext remove <%= name %>
+quasar ext remove <%= scope.name %>
 ```
 
 # Info
@@ -30,4 +30,4 @@ quasar ext remove <%= name %>
 If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
 
 # License
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

package/templates/ui-kit/quasar-v2/ae/app-extension/_package.json

@@ -1,12 +1,12 @@
 {
-  "name": "quasar-app-extension-<%= name %>",
+  "name": "quasar-app-extension-<%= scope.name %>",
   "version": "0.0.1",
-  "description": "<%= aeDescription %>",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "description": "<%= scope.aeDescription %>",
+  "author": "<%= scope.author %>",
+  "license": "<%= scope.license %>",
   "type": "module",
   "dependencies": {
-    "quasar-ui-<%= name %>": "latest"
+    "quasar-ui-<%= scope.name %>": "latest"
   },
   "engines": {
     "node": ">= 8.9.0",

package/templates/ui-kit/quasar-v2/ae/app-extension/src/boot/register.js

@@ -1,5 +1,5 @@
 import { boot } from 'quasar/wrappers'
-import VuePlugin from 'quasar-ui-<%= name %>'
+import VuePlugin from 'quasar-ui-<%= scope.name %>'
 
 export default boot(({ app }) => {
   app.use(VuePlugin)

package/templates/ui-kit/quasar-v2/ae/app-extension/src/index.js

@@ -7,7 +7,7 @@
 
 function extendConf (conf, api) {
   // register our boot file
-  conf.boot.push('~quasar-app-extension-<%= name %>/src/boot/register.js')
+  conf.boot.push('~quasar-app-extension-<%= scope.name %>/src/boot/register.js')
 
   if (api.hasWebpack) {
     // make sure app extension files & ui package gets transpiled
@@ -15,11 +15,11 @@ function extendConf (conf, api) {
       conf.build.webpackTranspileDependencies // q/app-webpack >= v4
       || conf.build.transpileDependencies // q/app-webpack v3
     )
-    transpileTarget.push(/quasar-app-extension-<%= name %>[\\/]src/)
+    transpileTarget.push(/quasar-app-extension-<%= scope.name %>[\\/]src/)
   }
 
   // make sure the stylesheet goes through webpack to avoid SSR issues
-  conf.css.push('~quasar-ui-<%= name %>/src/index.sass')
+  conf.css.push('~quasar-ui-<%= scope.name %>/src/index.sass')
 }
 
 export default function (api) {
@@ -35,12 +35,12 @@ export default function (api) {
     api.compatibleWith('@quasar/app-webpack', '^3.10.0 || ^4.0.0')
   }
 
-<% if (features.component) { %>
+<% if (scope.features.component) { %>
   // Uncomment the line below if you provide a JSON API for your component
-  // api.registerDescribeApi('<%= componentName %>', '~quasar-ui-<%= name %>/src/components/<%= componentName %>.json')
-<% } %><% if (features.directive) { %>
+  // api.registerDescribeApi('<%= scope.componentName %>', '~quasar-ui-<%= scope.name %>/src/components/<%= scope.componentName %>.json')
+<% } %><% if (scope.features.directive) { %>
   // Uncomment the line below if you provide a JSON API for your directive
-  // api.registerDescribeApi('<%= directiveName %>', '~quasar-ui-<%= name %>/src/directives/<%= directiveName %>.json')
+  // api.registerDescribeApi('<%= scope.directiveName %>', '~quasar-ui-<%= scope.name %>/src/directives/<%= scope.directiveName %>.json')
 <% } %>
 
   // We extend /quasar.conf.js

package/templates/ui-kit/quasar-v2/ui-component/ui/src/components/Component.js

@@ -2,12 +2,12 @@ import { h } from 'vue'
 import { QBadge } from 'quasar'
 
 export default {
-  name: '<%= componentName %>',
+  name: '<%= scope.componentName %>',
 
   setup () {
     return () => h(QBadge, {
-      class: '<%= componentName %>',
-      label: '<%= componentName %>'
+      class: '<%= scope.componentName %>',
+      label: '<%= scope.componentName %>'
     })
   }
 }

package/templates/ui-kit/quasar-v2/ui-component/ui/src/components/Component.sass

@@ -1,2 +1,2 @@
-.<%= componentName %>
+.<%= scope.componentName %>
   font-weight: bold

package/templates/ui-kit/quasar-v2/ui-directive/ui/src/directives/Directive.js

@@ -1,5 +1,5 @@
 export default {
-  name: '<%= directiveName %>',
+  name: '<%= scope.directiveName %>',
 
   mounted (_el) {
     //

package/templates/ui-kit/quasar-v2/ui-directive/ui/src/directives/Directive.sass

@@ -1,2 +1,2 @@
-.<%= directiveName %>
+.<%= scope.directiveName %>
   font-size: 14px

package/utils/index.js

@@ -3,7 +3,6 @@ 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,
@@ -11,10 +10,10 @@ import {
   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 = [
@@ -103,11 +102,8 @@ function renderTemplate(relativePath, scope) {
 
     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

package/utils/template.js

@@ -0,0 +1,280 @@
+/**
+ * Heavily inspired by Eta v4.5.1
+ */
+
+const fnAccumulator = '__qstr__'
+const defaultParseOptions = {
+  varName: 'scope',
+  exec: '', // never '-' | '_'
+  interpolate: '=', // never '-' | '_'
+  raw: '~', // never '-' | '_'
+  header: '',
+  tagStart: '<%',
+  tagEnd: '%>'
+}
+
+const newlineRE = /\n/
+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
+
+function throwParseError(message, str, index) {
+  const whitespace = str.slice(0, index).split(newlineRE)
+
+  const lineNo = whitespace.length
+  const colNo = whitespace[lineNo - 1].length + 1
+
+  message +=
+    ' at line ' +
+    lineNo +
+    ' col ' +
+    colNo +
+    ':\n\n' +
+    '  ' +
+    str.split(newlineRE)[lineNo - 1] +
+    '\n' +
+    '  ' +
+    Array(colNo).join(' ') +
+    '^'
+
+  throw new Error(message)
+}
+
+function escapeRegExp(str) {
+  // From MDN
+  return str.replace(escapeRegexpRE, '\\$&') // $& 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
+
+  if (!rightTrim && !leftTrim) return str
+
+  if (leftTrim === 'slurp' && rightTrim === 'slurp') {
+    return str.trim()
+  }
+
+  if (leftTrim === '_' || leftTrim === 'slurp') {
+    // full slurp
+    str = str.trimStart()
+  } else if (leftTrim === '-' || leftTrim === 'nl') {
+    // nl trim
+    str = str.replace(newlineTrimRE, '')
+  }
+
+  if (rightTrim === '_' || rightTrim === 'slurp') {
+    // full slurp
+    str = str.trimEnd()
+  } else if (rightTrim === '-' || rightTrim === 'nl') {
+    // nl trim
+    str = str.replace(newlineTrimRE, '')
+  }
+
+  return str
+}
+
+// opts: { exec, interpolate, raw, tagStart, tagEnd }
+function getAST(str, opts) {
+  let ast = []
+  let trimLeftOfNextStr = false
+  let lastIndex = 0
+
+  templateLitReg.lastIndex = 0
+  singleQuoteReg.lastIndex = 0
+  doubleQuoteReg.lastIndex = 0
+
+  function pushString(strng, shouldTrimRightOfString) {
+    if (strng) {
+      // if string is truthy it must be of type 'string'
+
+      strng = trimWS(
+        strng,
+        trimLeftOfNextStr, // this will only be false on the first str, the next ones will be null or undefined
+        shouldTrimRightOfString
+      )
+
+      if (strng) {
+        // 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')
+
+        ast.push(strng)
+      }
+    }
+  }
+
+  const prefixes = [opts.exec, opts.interpolate, opts.raw].reduce(
+    (accumulator, prefix) => {
+      if (accumulator && prefix) {
+        return accumulator + '|' + escapeRegExp(prefix)
+      } else if (prefix) {
+        // accumulator is falsy
+        return escapeRegExp(prefix)
+      } else {
+        // prefix and accumulator are both falsy
+        return accumulator
+      }
+    },
+    ''
+  )
+
+  const parseOpenReg = new RegExp(
+    escapeRegExp(opts.tagStart) + '(-|_)?\\s*(' + prefixes + ')?\\s*',
+    'g'
+  )
+
+  const parseCloseReg = new RegExp(
+    '\'|"|`|\\/\\*|(\\s*(-|_)?' + escapeRegExp(opts.tagEnd) + ')',
+    'g'
+  )
+
+  let m
+
+  while ((m = parseOpenReg.exec(str))) {
+    const precedingString = str.slice(lastIndex, m.index)
+
+    lastIndex = m[0].length + m.index
+
+    const wsLeft = m[1]
+    const prefix = m[2] || '' // by default either ~, =, or empty
+
+    pushString(precedingString, wsLeft)
+
+    parseCloseReg.lastIndex = lastIndex
+    let closeTag
+    let currentObj = false
+
+    while ((closeTag = parseCloseReg.exec(str))) {
+      if (closeTag[1]) {
+        const content = str.slice(lastIndex, closeTag.index)
+
+        parseOpenReg.lastIndex = lastIndex = parseCloseReg.lastIndex
+
+        trimLeftOfNextStr = closeTag[2]
+
+        const currentType =
+          prefix === opts.exec
+            ? 'e'
+            : prefix === opts.raw
+              ? 'r'
+              : prefix === opts.interpolate
+                ? 'i'
+                : ''
+
+        currentObj = { t: currentType, val: content }
+        break
+      } else {
+        const char = closeTag[0]
+        if (char === '/*') {
+          const commentCloseInd = str.indexOf('*/', parseCloseReg.lastIndex)
+
+          if (commentCloseInd === -1) {
+            throwParseError('unclosed comment', str, closeTag.index)
+          }
+          parseCloseReg.lastIndex = commentCloseInd
+        } else if (char === "'") {
+          singleQuoteReg.lastIndex = closeTag.index
+
+          const singleQuoteMatch = singleQuoteReg.exec(str)
+          if (singleQuoteMatch) {
+            parseCloseReg.lastIndex = singleQuoteReg.lastIndex
+          } else {
+            throwParseError('unclosed string', str, closeTag.index)
+          }
+        } else if (char === '"') {
+          doubleQuoteReg.lastIndex = closeTag.index
+          const doubleQuoteMatch = doubleQuoteReg.exec(str)
+
+          if (doubleQuoteMatch) {
+            parseCloseReg.lastIndex = doubleQuoteReg.lastIndex
+          } else {
+            throwParseError('unclosed string', str, closeTag.index)
+          }
+        } else if (char === '`') {
+          templateLitReg.lastIndex = closeTag.index
+          const templateLitMatch = templateLitReg.exec(str)
+          if (templateLitMatch) {
+            parseCloseReg.lastIndex = templateLitReg.lastIndex
+          } else {
+            throwParseError('unclosed string', str, closeTag.index)
+          }
+        }
+      }
+    }
+    if (currentObj) {
+      ast.push(currentObj)
+    } else {
+      throwParseError('unclosed tag', str, m.index)
+    }
+  }
+
+  pushString(str.slice(lastIndex, str.length), false)
+  return ast
+}
+
+// opts: { varName, header }
+function compileBody(ast, opts) {
+  let i = 0
+  const astLength = ast.length
+  let returnStr = `${opts.header}\nlet ${fnAccumulator} = '';\n`
+
+  for (; i < astLength; i++) {
+    const currentBlock = ast[i]
+
+    if (typeof currentBlock === 'string') {
+      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'
+    }
+  }
+
+  return returnStr + `\nreturn ${fnAccumulator};`
+}
+
+export function compileTemplateToFile(str, rawOpts = {}) {
+  const opts = { ...defaultParseOptions, ...rawOpts }
+  const ast = getAST(str, opts)
+  const body = compileBody(ast, opts)
+  return `export default ${opts.varName} => {\n${body}\n}`
+}
+
+export function compileTemplateToFn(str, rawOpts = {}) {
+  const opts = { ...defaultParseOptions, ...rawOpts }
+  const ast = getAST(str, opts)
+  const body = compileBody(ast, opts)
+  return new Function(opts.varName, body)
+}
+
+export function renderTemplate(str, scope, rawOpts) {
+  let opts = rawOpts
+  if (opts?.varName === false) {
+    opts.varName = defaultParseOptions.varName
+    const keys = Object.keys(scope)
+    if (keys.length !== 0) {
+      opts.header = `const { ${keys.join(', ')} } = ${defaultParseOptions.varName}`
+    }
+  }
+
+  const templateFn = compileTemplateToFn(str, opts)
+  return templateFn(scope)
+}

package/templates/app/quasar-v2/js-vite-2/axios/src/boot/axios.js

@@ -1,24 +0,0 @@
-import { defineBoot } from '#q-app/wrappers'
-import axios from 'axios'
-
-// Be careful when using SSR for cross-request state pollution
-// due to creating a Singleton instance here;
-// If any client changes this (global) instance, it might be a
-// good idea to move this instance creation inside of the
-// "export default () => {}" function below (which runs individually
-// for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' })
-
-export default defineBoot(({ app }) => {
-  // for use inside Vue files (Options API) through this.$axios and this.$api
-
-  app.config.globalProperties.$axios = axios
-  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
-  //       so you won't necessarily have to import axios in each vue file
-
-  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
-})
-
-export { api }

package/templates/app/quasar-v2/js-vite-2/sass/src/css/app.sass

@@ -1 +0,0 @@
-// app global css in Sass form

package/templates/app/quasar-v2/js-vite-2/sass/src/css/quasar.variables.sass

@@ -1,25 +0,0 @@
-// Quasar Sass (& SCSS) Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
-
-// Check documentation for full list of Quasar variables
-
-// Your own variables (that are declared here) and Quasar's own
-// ones will be available out of the box in your .vue/.scss/.sass files
-
-// It's highly recommended to change the default colors
-// to match your app's branding.
-// Tip: Use the "Theme Builder" on Quasar's documentation website.
-
-$primary   : #1976D2
-$secondary : #26A69A
-$accent    : #9C27B0
-
-$dark      : #1D1D1D
-$dark-page : #121212
-
-$positive  : #21BA45
-$negative  : #C10015
-$info      : #31CCEC
-$warning   : #F2C037

package/templates/app/quasar-v2/js-vite-2/scss/src/css/app.scss

@@ -1 +0,0 @@
-// app global css in SCSS form

package/templates/app/quasar-v2/js-webpack-4/axios/src/boot/axios.js

@@ -1,24 +0,0 @@
-import { defineBoot } from '#q-app/wrappers'
-import axios from 'axios'
-
-// Be careful when using SSR for cross-request state pollution
-// due to creating a Singleton instance here;
-// If any client changes this (global) instance, it might be a
-// good idea to move this instance creation inside of the
-// "export default () => {}" function below (which runs individually
-// for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' })
-
-export default defineBoot(({ app }) => {
-  // for use inside Vue files (Options API) through this.$axios and this.$api
-
-  app.config.globalProperties.$axios = axios
-  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
-  //       so you won't necessarily have to import axios in each vue file
-
-  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
-})
-
-export { api }

package/templates/app/quasar-v2/js-webpack-4/sass/src/css/app.sass

@@ -1 +0,0 @@
-// app global css in Sass form

package/templates/app/quasar-v2/js-webpack-4/sass/src/css/quasar.variables.sass

@@ -1,25 +0,0 @@
-// Quasar Sass (& SCSS) Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
-
-// Check documentation for full list of Quasar variables
-
-// Your own variables (that are declared here) and Quasar's own
-// ones will be available out of the box in your .vue/.scss/.sass files
-
-// It's highly recommended to change the default colors
-// to match your app's branding.
-// Tip: Use the "Theme Builder" on Quasar's documentation website.
-
-$primary   : #1976D2
-$secondary : #26A69A
-$accent    : #9C27B0
-
-$dark      : #1D1D1D
-$dark-page : #121212
-
-$positive  : #21BA45
-$negative  : #C10015
-$info      : #31CCEC
-$warning   : #F2C037

package/templates/app/quasar-v2/js-webpack-4/scss/src/css/app.scss

@@ -1 +0,0 @@
-// app global css in SCSS form