create-quasar 1.12.0 → 2.0.0

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

@@ -0,0 +1 @@
+/* app global css */

package/templates/app/quasar-v2/ts-webpack-4/eslint/_eslint.config.js

@@ -0,0 +1,100 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-webpack/eslint'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'<% if (prettier) { %>
+import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
+
+export default [
+  {
+    /**
+     * Ignore the following files.
+     * Please note that pluginQuasar.configs.recommended() already ignores
+     * the "node_modules" folder for you (and all other Quasar project
+     * relevant folders and files).
+     *
+     * ESLint requires "ignores" key to be the only one in this object
+     */
+    // ignores: []
+  },
+
+  ...pluginQuasar.configs.recommended(),
+  js.configs.recommended,
+
+  /**
+   * https://eslint.vuejs.org
+   *
+   * pluginVue.configs.base
+   *   -> Settings and rules to enable correct ESLint parsing.
+   * pluginVue.configs[ 'flat/essential']
+   *   -> base, plus rules to prevent errors or unintended behavior.
+   * pluginVue.configs["flat/strongly-recommended"]
+   *   -> Above, plus rules to considerably improve code readability and/or dev experience.
+   * pluginVue.configs["flat/recommended"]
+   *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
+   */
+  ...pluginVue.configs[ 'flat/essential' ],
+
+  // this rule needs to be above the vueTsEslintConfig to avoid error: 'You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file.'
+ {
+    files: ['**/*.ts', '**/*.vue'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports' }
+      ],
+    }
+  },
+  // https://github.com/vuejs/eslint-config-typescript
+  ...vueTsEslintConfig({
+    // Optional: extend additional configurations from typescript-eslint'.
+    // Supports all the configurations in
+    // https://typescript-eslint.io/users/configs#recommended-configurations
+    extends: [
+       // By default, only the 'recommendedTypeChecked' rules are enabled.
+      'recommendedTypeChecked'
+      // You can also manually enable the stylistic rules.
+      // "stylistic",
+
+      // Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
+      // are also extendable here. But we don't recommend using them directly.
+    ]
+  }),
+
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        ...globals.node, // SSR, Electron, config files
+        process: 'readonly', // process.env.*
+        ga: 'readonly', // Google Analytics
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly', // BEX related
+        browser: 'readonly' // BEX related
+      }
+    },
+
+    // add your custom rules here
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+
+      // allow debugger during development only
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    }
+  },
+
+  {
+    files: [ 'src-pwa/custom-service-worker.ts' ],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker
+      }
+    }
+  }<% if (prettier) { %>,
+
+  prettierSkipFormatting<% } %>
+]

package/templates/app/quasar-v2/ts-webpack-4/i18n/src/boot/i18n.ts

@@ -0,0 +1,33 @@
+import { defineBoot } from '#q-app/wrappers';
+import { createI18n } from 'vue-i18n';
+
+import messages from 'src/i18n';
+
+export type MessageLanguages = keyof typeof messages;
+// Type-define 'en-US' as the master schema for the resource
+export type MessageSchema = typeof messages["en-US"];
+
+// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+declare module 'vue-i18n' {
+  // define the locale messages schema
+  export interface DefineLocaleMessage extends MessageSchema {}
+
+  // define the datetime format schema
+  export interface DefineDateTimeFormat {}
+
+  // define the number format schema
+  export interface DefineNumberFormat {}
+}
+/* eslint-enable @typescript-eslint/no-empty-object-type */
+
+export default defineBoot(({ app }) => {
+  const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
+    locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
+    legacy: false,<% } %>
+    messages,
+  });
+
+  // Set i18n instance on app
+  app.use(i18n);
+});

package/templates/app/quasar-v2/ts-webpack-4/i18n/src/i18n/en-US/index.ts

@@ -0,0 +1,7 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  failed: 'Action failed',
+  success: 'Action was successful'
+};

package/templates/app/quasar-v2/ts-webpack-4/i18n/src/i18n/index.ts

@@ -0,0 +1,5 @@
+import enUS from './en-US';
+
+export default {
+  'en-US': enUS
+};

package/templates/app/quasar-v2/ts-webpack-4/index.js

@@ -0,0 +1,36 @@
+export async function script ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'Linting (ESLint)', value: 'eslint', description: 'recommended', selected: true },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
+      ],
+      format: utils.convertArrayToObject
+    },
+    {
+      type: (_, { preset }) => (preset.eslint ? 'confirm' : null),
+      name: 'prettier',
+      initial: true,
+      message: 'Add Prettier for code formatting?'
+    }
+  ])
+
+  // ensure it's defined since if not selecting ESLint,
+  // user won't be asked about it hence it won't be defined
+  scope.prettier = scope.prettier || false
+
+  utils.createTargetDir(scope)
+  utils.renderTemplate('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
+
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.eslint) utils.renderTemplate('eslint', scope)
+  if (scope.prettier) utils.renderTemplate('prettier', scope)
+  if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
+}

package/templates/app/quasar-v2/ts-webpack-4/pinia/src/stores/example-store.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

package/templates/app/quasar-v2/ts-webpack-4/pinia/src/stores/index.ts

@@ -0,0 +1,32 @@
+import { defineStore } from '#q-app/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface PiniaCustomProperties {
+    // add your custom properties here, if any
+  }
+}
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default defineStore((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

package/templates/app/quasar-v2/ts-webpack-4/prettier/_.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

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

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

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

@@ -0,0 +1,25 @@
+// 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/ts-webpack-4/scss/src/css/app.scss

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

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

@@ -0,0 +1,25 @@
+// 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/ae-ts/BASE/app-extension/_package.json

@@ -27,16 +27,16 @@
     "build": "<%= packageManager?.name ?? 'pnpm' %> run build:code && <%= packageManager?.name ?? 'pnpm' %> run build:templates"<% } else { %>"build": "mkdist ./ --ext=js --declaration --pattern='**' --pattern='!shims-vue.d.ts'"<% } %>
   },
   "devDependencies": {
-    "@quasar/app-vite": "^2.0.0",
-    "@quasar/app-webpack": "^4.0.0",
+    "@quasar/app-vite": "^2.1.0",
+    "@quasar/app-webpack": "^4.1.0",
     "mkdist": "^1.5.4",
     "quasar": "^2.16.7",
     "vue": "^3.4.36",
     "vue-tsc": "^2.0.29"
   },
   "peerDependencies": {
-    "@quasar/app-vite": "^2.0.0",
-    "@quasar/app-webpack": "^4.0.0",
+    "@quasar/app-vite": "^2.1.0",
+    "@quasar/app-webpack": "^4.1.0",
     "quasar": "^2.16.0",
     "vue": "^3.4.0"
   },

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/_package.json

@@ -20,7 +20,7 @@
     "<%= pkgName %>": <% if (!packageManager || ['pnpm', 'bun'].includes(packageManager.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
   },
   "devDependencies": {
-    "@quasar/app-vite": "^2.0.0",
+    "@quasar/app-vite": "^2.1.0",
     "autoprefixer": "^10.4.20"
   },
   "engines": {

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-webpack/_package.json

@@ -20,7 +20,7 @@
     "<%= pkgName %>": <% if (!packageManager || ['pnpm', 'bun'].includes(packageManager?.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
   },
   "devDependencies": {
-    "@quasar/app-webpack": "^4.0.0",
+    "@quasar/app-webpack": "^4.1.0",
     "ts-loader": "^9.5.1"
   },
   "browserslist": [

package/templates/ui-kit/index.js

@@ -97,7 +97,7 @@ export async function script ({ scope, utils }) {
     }
   ])
 
-  const { script } = await import(`./quasar-v1/index.js`)
+  const { script } = await import(`./quasar-v2/index.js`)
   await script({ scope, utils })
 
   // we don't want to install

package/templates/ui-kit/quasar-v2/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  overrides: [
+    {
+      files: './*/**/*.js',
+
+      globals: {
+        __UI_VERSION__: 'readonly'
+      },
+    },
+  ],
+
+  // Due to conditional use of mixed ESM/CJS in certain files, they can't be properly parsed and checked
+  ignorePatterns: [
+    'ae-install/app-extension/src/install.js',
+    'ae-prompts/app-extension/src/prompts.js',
+    'ae-uninstall/app-extension/src/uninstall.js',
+    'ae/app-extension/src/index.js'
+  ]
+}

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/README.md

@@ -1,7 +1,7 @@
 <img src="https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>">
 <% if (features.ae) { %><img src="https://img.shields.io/npm/v/quasar-app-extension-<%= name %>.svg?label=quasar-app-extension-<%= name %>"><% } %>
 
-Compatible with Quasar UI v1 and Vue 2.
+Compatible with Quasar UI v2 and Vue 3.
 
 # Structure
 * [/ui](ui) - standalone npm package

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
 [![npm](https://img.shields.io/npm/dt/quasar-ui-<%= name %>.svg)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
 
-**Compatible with Quasar UI v1 and Vue 2**.
+**Compatible with Quasar UI v2 and Vue 3**.
 
 <% if (features.component) { %>
 # Component <%= componentName %>

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/_package.json

@@ -22,20 +22,33 @@
     "cssnano": "^4.1.10",
     "postcss": "^8.1.9",
     "rtlcss": "^2.6.1",
-    "sass": "1.32.0",
-    "quasar": "^1.0.0",
+    "sass": "^1.33.0",
+    "quasar": "^2.16.0",
+    "@quasar/extras": "^1.16.4",
+    "core-js": "^3.0.0",
+    "@quasar/app-webpack": "^3.13.0",
     "open": "^7.3.0",
     "fs-extra": "^8.1.0",
     "chalk": "^4.1.0",
     "rimraf": "^3.0.0",
-    "rollup": "^2.33.3",
-    "@rollup/plugin-buble": "^0.20.0",
+    "rollup": "^2.45.0",
+    "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "uglify-es": "^3.3.9",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^2.4.2",
+    "uglify-js": "^3.13.3",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
     "zlib": "^1.0.5"
   },
   "browserslist": [
-    "last 1 version, not dead, ie >= 11"
+    "last 4 Chrome versions",
+    "last 4 Firefox versions",
+    "last 2 Edge versions",
+    "last 4 Safari versions",
+    "last 4 Android versions",
+    "last 4 ChromeAndroid versions",
+    "last 4 FirefoxAndroid versions",
+    "last 4 iOS versions"
   ]
 }

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/build/script.clean.js

@@ -3,4 +3,4 @@ var
   path = require('path')
 
 rimraf.sync(path.resolve(__dirname, '../dist/*'))
-console.log(' 💥 Cleaned build artifacts.\n')
+console.log(` 💥 Cleaned build artifacts.\n`)

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/build/script.javascript.js

@@ -2,15 +2,24 @@ const path = require('path')
 const fs = require('fs')
 const fse = require('fs-extra')
 const rollup = require('rollup')
-const uglify = require('uglify-es')
+const uglify = require('uglify-js')
 const buble = require('@rollup/plugin-buble')
 const json = require('@rollup/plugin-json')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const replace = require('@rollup/plugin-replace')
+
+const { version } = require('../package.json')
 
 const buildConf = require('./config')
 const buildUtils = require('./utils')
 
 const rollupPlugins = [
+  replace({
+    preventAssignment: false,
+    values: {
+      __UI_VERSION__: `'${ version }'`
+    }
+  }),
   nodeResolve({
     extensions: ['.js'],
     preferBuiltins: false
@@ -25,7 +34,7 @@ const builds = [
   {
     rollup: {
       input: {
-        input: pathResolve('entry/index.esm.js')
+        input: pathResolve('../src/index.esm.js')
       },
       output: {
         file: pathResolve('../dist/index.esm.js'),
@@ -40,7 +49,7 @@ const builds = [
   {
     rollup: {
       input: {
-        input: pathResolve('entry/index.common.js')
+        input: pathResolve('../src/index.common.js')
       },
       output: {
         file: pathResolve('../dist/index.common.js'),
@@ -55,7 +64,7 @@ const builds = [
   {
     rollup: {
       input: {
-        input: pathResolve('entry/index.umd.js')
+        input: pathResolve('../src/index.umd.js')
       },
       output: {
         name: '<%= umdExportName %>',

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/dev/_package.json

@@ -11,13 +11,6 @@
     "dev:android": "quasar dev -m android",
     "dev:electron": "quasar dev -m electron"
   },
-  "dependencies": {
-    "@quasar/extras": "^1.16.4",
-    "core-js": "^3.0.0"
-  },
-  "devDependencies": {
-    "@quasar/app": "^2.0.0"
-  },
   "browserslist": [
     "last 10 Chrome versions",
     "last 10 Firefox versions",

package/templates/ui-kit/{quasar-v1/BASE/ui/dev/quasar.conf.js → quasar-v2/BASE/ui/dev/quasar.config.js}

@@ -2,6 +2,7 @@
 // https://quasar.dev/quasar-cli/quasar-conf-js
 
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = function (ctx) {
   return {
@@ -47,14 +48,26 @@ module.exports = function (ctx) {
 
       chainWebpack (chain) {
         chain.resolve.alias.merge({
-          ui: path.resolve(__dirname, '../src/index.js')
+          ui: path.resolve(__dirname, `../src/index.esm.js`)
         })
+
+        chain.plugin('define-ui')
+          .use(webpack.DefinePlugin, [{
+            __UI_VERSION__: `'${require('../package.json').version}'`
+          }])
       }
     },
 
     devServer: {
       // port: 8080,
       open: true // opens browser window automatically
+    },
+
+    ssr: {
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
     }
   }
 }

package/templates/{app/quasar-v1/js/BASE → ui-kit/quasar-v2/BASE/ui/dev}/src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="q-app">
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <script>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/boot/register.js

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers'
+import VuePlugin from 'ui' // "ui" is aliased in quasar.conf.js
+
+export default boot(({ app }) => {
+  app.use(VuePlugin)
+})

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/dev/src/layouts/MyLayout.vue

@@ -30,7 +30,7 @@ import { version } from 'ui' // "ui" is aliased in quasar.conf.js
 export default {
   name: 'MyLayout',
 
-  data () {
+  setup () {
     return {
       version
     }

package/templates/{app/quasar-v1/js/BASE → ui-kit/quasar-v2/BASE/ui/dev}/src/pages/Error404.vue

@@ -23,7 +23,9 @@
 </template>
 
 <script>
-export default {
-  name: 'ErrorNotFound'
-}
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Error404'
+})
 </script>

package/templates/ui-kit/{quasar-v1 → quasar-v2}/BASE/ui/dev/src/pages/Index.vue

@@ -25,8 +25,10 @@
 import pages from '../router/pages'
 
 export default {
-  created () {
-    this.pages = pages
+  setup () {
+    return {
+      pages
+    }
   }
 }
 </script>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/router/index.js

@@ -0,0 +1,48 @@
+import { route } from 'quasar/wrappers'
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
+
+import routes from './routes'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default route(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
+  })
+
+  // we get each page from server first!
+  if (process.env.MODE === 'ssr' && process.env.CLIENT) {
+    console.log('!!!!')
+    console.log('On route change we deliberately load page from server -- in order to test hydration errors')
+    console.log('!!!!')
+
+    let reload = false
+    Router.beforeEach((to, _, next) => {
+      if (reload) {
+        window.location.href = to.fullPath
+        return
+      }
+      reload = true
+      next()
+    })
+  }
+
+  return Router
+})