create-quasar 2.1.0 → 2.2.0

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/eslint.config.base.js

@@ -1,19 +0,0 @@
-import eslintJs from '@eslint/js'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  {
-    name: 'eslint/recommended',
-
-    ...eslintJs.configs.recommended
-  },
-
-  {
-    name: 'custom',
-
-    rules: {
-      'no-empty': 'off',
-      'no-unused-vars': [ 'error', { ignoreRestSiblings: true, argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' } ]
-    }
-  }
-)

package/eslint.config.js

@@ -1,47 +0,0 @@
-import baseConfig from './eslint.config.base.js'
-import globals from 'globals'
-import tseslint from 'typescript-eslint'
-// import quasar from 'eslint-config-quasar'
-
-export default tseslint.config(
-  ...baseConfig,
-
-  // TODO: enable these configs
-  // ...quasar.configs.base,
-  // ...quasar.configs.node,
-
-  {
-    name: 'custom/ignores',
-
-    ignores: [ 'test-project' ]
-  },
-
-  {
-    name: 'custom',
-
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-
-      globals: {
-        ...globals.node
-      }
-    }
-  },
-
-  {
-    name: 'custom/scripts',
-
-    files: [ './scripts/**/*.ts' ],
-
-    extends: [
-      ...tseslint.configs.recommended
-    ],
-
-    languageOptions: {
-      parserOptions: {
-        sourceType: 'module',
-      }
-    }
-  }
-)

package/templates/app/index.js

@@ -1,8 +0,0 @@
-export async function script ({ scope, utils }) {
-  await utils.prompts(scope, [
-    utils.commonPrompts.scriptType
-  ])
-
-  const { script } = await import(`./quasar-v2/index.js`)
-  await script({ scope, utils })
-}

package/templates/app/quasar-v2/index.js

@@ -1,56 +0,0 @@
-export async function script ({ scope, utils }) {
-  await utils.prompts(scope, [
-    {
-      type: 'select',
-      name: 'engine',
-      message: 'Pick Quasar App CLI variant:',
-      initial: 0,
-      choices: [
-        { title: 'Quasar App CLI with Vite', value: 'vite-2', description: 'recommended' },
-        { title: 'Quasar App CLI with Webpack', value: 'webpack-4' }
-      ]
-    },
-    {
-      type: 'text',
-      name: 'name',
-      message: 'Package name:',
-      initial: () => utils.inferPackageName(scope.projectFolderName),
-      validate: (val) =>
-        utils.isValidPackageName(val) || 'Invalid package.json name'
-    },
-
-    utils.commonPrompts.productName,
-    utils.commonPrompts.description,
-  ])
-
-  await utils.injectAuthor(scope)
-
-  await utils.prompts(scope, [
-    {
-      type: 'select',
-      name: 'sfcStyle',
-      message: 'Pick a Vue component style:',
-      initial: 0,
-      choices: [
-        { title: 'Composition API with <script setup>', value: 'composition-setup', description: 'recommended' },
-        { title: 'Composition API', value: 'composition', description: 'recommended' },
-        { title: 'Options API', value: 'options' }
-      ]
-    },
-
-    {
-      type: 'select',
-      name: 'css',
-      message: 'Pick your CSS preprocessor:',
-      initial: 0,
-      choices: [
-        { title: 'Sass with SCSS syntax', value: 'scss' },
-        { title: 'Sass with indented syntax', value: 'sass' },
-        { title: 'None (the others will still be available)', value: 'css' }
-      ]
-    }
-  ])
-
-  const { script } = await import(`./${ scope.scriptType }-${ scope.engine }/index.js`)
-  await script({ scope, utils })
-}

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/scss/src/css/app.scss

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

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

@@ -1,25 +0,0 @@
-// Quasar SCSS (& Sass) 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/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/scss/src/css/app.scss

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

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

@@ -1,25 +0,0 @@
-// Quasar SCSS (& Sass) 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/ts-vite-2/axios/src/boot/axios.ts

@@ -1,31 +0,0 @@
-import { defineBoot } from '#q-app/wrappers';
-import axios, { type AxiosInstance } from 'axios';
-
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $axios: AxiosInstance;
-    $api: AxiosInstance;
-  }
-}
-
-// 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/ts-vite-2/scss/src/css/app.scss

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

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

@@ -1,25 +0,0 @@
-// Quasar SCSS (& Sass) 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/ts-webpack-4/axios/src/boot/axios.ts

@@ -1,31 +0,0 @@
-import { defineBoot } from '#q-app/wrappers';
-import axios, { type AxiosInstance } from 'axios';
-
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $axios: AxiosInstance;
-    $api: AxiosInstance;
-  }
-}
-
-// 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/ts-webpack-4/scss/src/css/app.scss

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

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

@@ -1,25 +0,0 @@
-// Quasar SCSS (& Sass) 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-extension/index.js

@@ -1,15 +0,0 @@
-export async function script ({ scope, utils }) {
-  /**
-   * Temporarily disable scriptType prompt (TS not ready yet)
-   */
-
-  // await utils.prompts(scope, [
-  //   utils.commonPrompts.scriptType
-  // ])
-
-  // const { script } = await import(`./ae-${ scope.scriptType }/index.js`)
-  // await script({ scope, utils })
-
-  const { script } = await import('./ae-js/index.js')
-  await script({ scope, utils })
-}