create-quasar 2.2.2 → 4.0.0

package/templates/ae/ts/BASE/playground/src/pages/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <q-toolbar-title> Quasar App Extension Playground </q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list dense>
+        <q-item-label header> Playground Navigation </q-item-label>
+        <q-separator class="q-mb-md" />
+        <DrawerLink v-for="link in linksList" :key="link.name" v-bind="link" />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { routes } from "vue-router/auto-routes";
+
+import DrawerLink, { type DrawerLinkProps } from "@/components/DrawerLink.vue";
+
+const linksList: DrawerLinkProps[] =
+  routes
+    .find(r => r.path === "/")
+    ?.children?.map(c => ({
+      name: c.path || "Index",
+      path: `/${c.path}`
+    })) || [];
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>

package/templates/ae/ts/BASE/playground/src/router/_typed-router.d.ts

@@ -0,0 +1,131 @@
+/* eslint-disable */
+/* prettier-ignore */
+// oxfmt-ignore
+// @ts-nocheck
+// noinspection ES6UnusedImports
+// Generated by vue-router. !! DO NOT MODIFY THIS FILE !!
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
+import type {
+  _ExtractParamParserType,
+} from 'vue-router/experimental'
+
+declare module 'vue-router' {
+  interface TypesConfig {
+    ParamParsers:
+      | never
+    RouteNamedMap: import('vue-router/auto-routes').RouteNamedMap
+  }
+}
+
+declare module 'vue-router/auto-routes' {
+  /**
+   * Route name map generated by vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<
+      '/',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      | '//(index)'
+      | '//test1'
+      | '//test2'
+    >,
+    '//(index)': RouteRecordInfo<
+      '//(index)',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '//test1': RouteRecordInfo<
+      '//test1',
+      '/test1',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '//test2': RouteRecordInfo<
+      '//test2',
+      '/test2',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/[...path]': RouteRecordInfo<
+      '/[...path]',
+      '/:path(.*)',
+      { path: ParamValue<true> },
+      { path: ParamValue<false> },
+      | never
+    >,
+  }
+
+  /**
+   * Route file to route info map by vue-router.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
+   *
+   * Each key is a file path relative to the project root with 2 properties:
+   * - routes: union of route names of the possible routes when in this page (passed to useRoute<...>())
+   * - views: names of nested views (can be passed to <RouterView name="...">)
+   *
+   * @internal
+   */
+  export interface _RouteFileInfoMap {
+    'src/pages/index.vue': {
+      routes:
+        | '/'
+        | '//(index)'
+        | '//test1'
+        | '//test2'
+      views:
+        | 'default'
+    }
+    'src/pages/index/(index).vue': {
+      routes:
+        | '//(index)'
+      views:
+        | never
+    }
+    'src/pages/index/test1.vue': {
+      routes:
+        | '//test1'
+      views:
+        | never
+    }
+    'src/pages/index/test2.vue': {
+      routes:
+        | '//test2'
+      views:
+        | never
+    }
+    'src/pages/[...path].vue': {
+      routes:
+        | '/[...path]'
+      views:
+        | never
+    }
+  }
+
+  /**
+   * Get a union of possible route names in a certain route component file.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
+   *
+   * @internal
+   */
+  export type _RouteNamesForFilePath<FilePath extends string> =
+    _RouteFileInfoMap extends Record<FilePath, infer Info>
+      ? Info['routes']
+      : keyof RouteNamedMap
+}
+
+export {}

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-webpack → ae/ts/BASE/playground}/src/router/index.ts

@@ -1,11 +1,11 @@
-import { defineRouter } from '#q-app/wrappers';
+import { defineRouter } from "#q-app";
+import { routes, handleHotUpdate } from "vue-router/auto-routes";
 import {
   createMemoryHistory,
   createRouter,
   createWebHashHistory,
-  createWebHistory,
-} from 'vue-router';
-import routes from './routes';
+  createWebHistory
+} from "vue-router";
 
 /*
  * If not building with SSR mode, you can
@@ -16,10 +16,10 @@ import routes from './routes';
  * with the Router instance.
  */
 
-export default defineRouter(function (/* { store, ssrContext } */) {
-  const createHistory = process.env.SERVER
+export default defineRouter(() => {
+  const createHistory = import.meta.env.QUASAR_SERVER
     ? createMemoryHistory
-    : process.env.VUE_ROUTER_MODE === 'history'
+    : import.meta.env.QUASAR_VUE_ROUTER_MODE === "history"
       ? createWebHistory
       : createWebHashHistory;
 
@@ -30,8 +30,13 @@ export default defineRouter(function (/* { store, ssrContext } */) {
     // 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.VUE_ROUTER_BASE),
+    history: createHistory(import.meta.env.QUASAR_VUE_ROUTER_BASE)
   });
 
+  // enable HMR for it
+  if (import.meta.hot) {
+    handleHotUpdate(Router);
+  }
+
   return Router;
 });

package/templates/ae/ts/install/ae/src/install.ts

@@ -0,0 +1,9 @@
+/**
+ * Quasar App Extension install script
+ * https://quasar.dev/app-extensions/development-guide/install-api
+ */
+
+import { defineInstallScript } from "#q-app";
+
+// can be async
+export default defineInstallScript((/* api */) => {});

package/templates/ae/ts/oxlint/_oxfmt.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "oxfmt";
+
+export default defineConfig({
+  $schema: "./node_modules/oxfmt/configuration_schema.json",
+
+  ignorePatterns: [
+    "**/node_modules/",
+    "/ae/src/templates/",
+    "/playground/dist/",
+    "/playground/quasar.config.*.temporary.compiled*",
+    "/playground/.quasar/",
+    "/playground/src-cordova/",
+    "/playground/src-capacitor/",
+    "/playground/src/router/typed-router.d.ts"
+  ],
+
+  printWidth: 80,
+  arrowParens: "avoid",
+  bracketSpacing: true,
+  bracketSameLine: false,
+  htmlWhitespaceSensitivity: "strict",
+  semi: true,
+  singleQuote: false,
+  quoteProps: "as-needed",
+  trailingComma: "none",
+  useTabs: false,
+  vueIndentScriptAndStyle: false
+});

package/templates/ae/ts/oxlint/_oxlint.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from "oxlint";
+
+export default defineConfig({
+  $schema: "./node_modules/oxlint/configuration_schema.json",
+
+  ignorePatterns: [
+    "**/node_modules/",
+    "/ae/src/templates/",
+    "/playground/dist/",
+    "/playground/quasar.config.*.temporary.compiled*",
+    "/playground/.quasar/",
+    "/playground/src-cordova/",
+    "/playground/src-capacitor/",
+    "/playground/src/router/typed-router.d.ts"
+  ],
+
+  options: {
+    typeAware: true,
+    typeCheck: true,
+    maxWarnings: 10
+  },
+
+  plugins: ["typescript", "vue", "import", "eslint", "promise", "unicorn"],
+
+  categories: {
+    correctness: "error"
+    // style: 'error',
+    // pedantic: 'warn',
+    // suspicious: 'error',
+    // perf: 'error',
+    // restriction: 'error'
+  },
+
+  rules: {},
+
+  env: {
+    builtin: true
+  }
+});

package/templates/ae/ts/prompts/ae/src/prompts.ts

@@ -0,0 +1,38 @@
+/**
+ * Quasar App Extension prompts script
+ * https://quasar.dev/app-extensions/development-guide/prompts-api
+ */
+
+import { definePromptsScript } from "#q-app";
+import { intro, outro, text, select, group, cancel } from "@clack/prompts";
+
+export default definePromptsScript(async (/* api */) => {
+  intro("Serious questions ahead!")
+
+  const answers = await group(
+    {
+      name: () => text({ message: "What is your name?" }),
+      color: ({ results }) =>
+        select({
+          message: `What is your favorite color, ${results.name}?`,
+          options: [
+            { value: "red", label: "Red" },
+            { value: "green", label: "Green" },
+            { value: "blue", label: "Blue" }
+          ]
+        })
+    },
+    {
+      // On Cancel callback that wraps the group
+      // So if the user cancels one of the prompts in the group this function will be called
+      onCancel: (/* { results } */) => {
+        cancel("Operation cancelled.");
+        process.exit(0);
+      }
+    }
+  )
+
+  outro("Thanks for answering the questions!");
+
+  return answers;
+});

package/templates/ae/ts/uninstall/ae/src/uninstall.ts

@@ -0,0 +1,9 @@
+/**
+ * Quasar App Extension uninstall script
+ * https://quasar.dev/app-extensions/development-guide/uninstall-api
+ */
+
+import { defineUninstallScript } from "#q-app";
+
+// can be async
+export default defineUninstallScript((/* api */) => {});

package/templates/app/create-quasar-script.js

@@ -1,8 +1,52 @@
 export async function createQuasarScript({ scope, utils }) {
-  await utils.prompts(scope, [utils.commonPrompts.scriptType])
+  await utils.promptUser(scope, {
+    engine: () =>
+      utils.prompts.select({
+        message: 'Pick Quasar App CLI variant:',
+        initialValue: utils.definitions.engine.default,
+        options: [
+          {
+            label: '@quasar/app-vite v3 rc (recommended)',
+            value: 'vite-3'
+          },
+          {
+            label: '@quasar/app-vite v2',
+            value: 'vite-2',
+            hint: 'deprecated'
+          }
+        ]
+      }),
+
+    name: () => {
+      const defaultName = utils.definitions.name.default(
+        scope.projectFolderName
+      )
+
+      return utils.prompts.text({
+        message: 'Package name:',
+        placeholder: defaultName,
+        defaultValue: defaultName,
+        validate: val => {
+          if (!utils.definitions.name.isValid(val)) {
+            return 'Invalid package.json name'
+          }
+        }
+      })
+    },
+
+    product: () =>
+      utils.prompts.text({
+        message:
+          'Project product name: (must start with letter if building mobile apps)',
+        placeholder: utils.definitions.product.default,
+        defaultValue: utils.definitions.product.default
+      })
+  })
 
   const { createQuasarScript: create } = await import(
-    `./quasar-v2/create-quasar-script.js`
+    `./${scope.engine}/create-quasar-script.js`
   )
   await create({ scope, utils })
+
+  scope.meta.runDevCmd = 'quasar dev'
 }

package/templates/app/vite-2/create-quasar-script.js

@@ -0,0 +1,59 @@
+export async function createQuasarScript({ scope, utils }) {
+  await utils.promptUser(scope, {
+    preset: () =>
+      utils.prompts.multiselect({
+        message: 'Check the features needed for your project:',
+        initialValues: ['sass', 'linting'],
+        options: [
+          {
+            label: 'Typescript support',
+            value: 'typescript'
+          },
+          {
+            label: 'Sass CSS preprocessor',
+            value: 'sass'
+          },
+          {
+            label:
+              'Linting & Formatting (ESLint + vite-plugin-checker + vue-tsc + Prettier)',
+            value: 'linting',
+            hint: 'recommended'
+          },
+          {
+            label: 'State Management (Pinia)',
+            value: 'pinia',
+            hint: 'https://pinia.vuejs.org'
+          },
+          {
+            label: 'Internationalization (vue-i18n)',
+            value: 'i18n',
+            hint: 'https://vue-i18n.intlify.dev'
+          }
+        ]
+      })
+  })
+
+  scope.preset = utils.convertArrayToObject(scope.preset)
+  if (scope.preset.linting) scope.linter = 'eslint'
+
+  const log = utils.prompts.taskLog({
+    title: 'Scaffolding Quasar App...'
+  })
+
+  const dir = scope.preset.typescript ? 'ts' : 'js'
+  utils.createTargetDir(scope)
+  utils.renderTemplate(`${dir}/BASE`, scope)
+
+  const css = scope.preset.sass ? 'sass' : 'css'
+  utils.renderTemplate(`${dir}/${css}`, scope)
+
+  if (scope.preset.i18n) utils.renderTemplate(`${dir}/i18n`, scope)
+  if (scope.linter === 'eslint') {
+    utils.renderTemplate(`${dir}/eslint`, scope)
+  }
+  if (scope.preset.pinia) {
+    utils.renderTemplate(`${dir}/pinia`, scope)
+  }
+
+  log.success('Quasar App scaffolded successfully!')
+}

package/templates/app/vite-2/js/BASE/README.md

@@ -0,0 +1,37 @@
+# <%= scope.product %> (<%= scope.name %>)
+
+## Install the dependencies
+```bash
+yarn
+# or
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+```bash
+quasar dev
+```
+<% if (scope.preset.linter) { %>
+
+### Format & Lint the files
+
+```bash
+pnpm run lint
+# or: yarn/npm/bun run lint
+```
+
+...or just check formatting & linting:
+
+```bash
+pnpm run lint:check
+# or: yarn/npm/bun run lint:check
+```
+<% } %>
+
+### Build the app for production
+```bash
+quasar build
+```
+
+### Customize the configuration
+See [Configuring quasar.config.js](https://legacy-app.quasar.dev/quasar-cli-vite-v2/quasar-config-js).

package/templates/app/{quasar-v2/ts-webpack-4 → vite-2/js}/BASE/_.gitignore

@@ -2,6 +2,9 @@
 .thumbs.db
 node_modules
 
+# .env files
+.env*
+
 # Quasar core related directories
 .quasar
 /dist
@@ -21,13 +24,3 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# Editor directories and files
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-
-# local .env files
-.env.local*

package/templates/app/{quasar-v2/ts-vite-2 → vite-2/js}/BASE/_.vscode/extensions.json

@@ -1,7 +1,9 @@
 {
   "recommendations": [
-    <% if (scope.preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
-    <% if (scope.prettier) { %>"esbenp.prettier-vscode",<% } %>
+    <% if (scope.linter === 'eslint') { %>
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    <% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

package/templates/app/vite-2/js/BASE/_.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  <% if (scope.linter === 'eslint') { %>
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  <% } %>
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true
+}

package/templates/app/{quasar-v2/js-vite-2 → vite-2/js}/BASE/_package.json

@@ -1,49 +1,56 @@
 {
   "name": "<%= scope.name %>",
   "version": "0.0.1",
-  "description": "<%= scope.description %>",
-  "productName": "<%= scope.productName %>",
+  "description": "A Quasar Project",
+  "productName": "<%= scope.product %>",
+  <% if (scope.author) { %>
   "author": "<%= scope.author %>",
+  <% } %>
   "type": "module",
   "private": true,
   "scripts": {
-    <% if (scope.preset.eslint) { %>"lint": "eslint -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",<% } %>
-    <% if (scope.prettier) { %>"format": "prettier --write \"**/*.{js,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
-    "test": "echo \"No test specified\" && exit 0",
+    <% if (scope.linter === 'eslint') { %>
+    "lint": "prettier --write \"**/*.{js,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,html,md,json}\" --ignore-path .gitignore && eslint --fix -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",
+    "lint:check": "prettier \"**/*.{js,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,html,md,json}\" --ignore-path .gitignore && eslint -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",
+    <% } %>
     "dev": "quasar dev",
     "build": "quasar build",
-    "postinstall": "quasar prepare"
+    "postinstall": "quasar prepare --silent"
   },
   "dependencies": {
     <% if (scope.preset.i18n) { %>"vue-i18n": "^11.3.0",<% } %>
     <% if (scope.preset.pinia) { %>"pinia": "^3.0.1",<% } %>
-    "@quasar/extras": "^1.16.4",
+    "@quasar/extras": "^2.0.0",
     "quasar": "^2.16.0",
     "vue": "^3.5.22",
     "vue-router": "^5.0.3"
   },
   "devDependencies": {
     <% if (scope.preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^11.0.0",<% } %>
-    <% if (scope.preset.eslint) { %>
+    <% if (scope.linter === 'eslint') { %>
     "@eslint/js": "^9.39.4",
     "eslint": "^9.39.4",
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^17.4.0",
     "vite-plugin-checker": "^0.12.0",
     "vue-eslint-parser": "^10.4.0",
-    <% } %>
-    <% if (scope.prettier) { %>
     "@vue/eslint-config-prettier": "^10.2.0",
     "prettier": "^3.8.1",
     <% } %>
-    "@quasar/app-vite": "^2.5.1",
+    "@quasar/app-vite": "^2.6.1",
     "autoprefixer": "^10.4.27",
     "postcss": "^8.5.8"
   },
+  "keywords": [
+    "quasar",
+    "quasar-app",
+    "quasar-cli",
+    "quasar-app-vite",
+    "vite",
+    "vue",
+    "vuejs"
+  ],
   "engines": {
-    "node": "^28 || ^26 || ^24 || ^22.12",
-    "npm": ">= 6.13.4",
-    "yarn": ">= 1.21.1",
-    "pnpm": ">= 10.0.0"
+    "node": ">= 26 || ^24 || ^22.12"
   }
 }

package/templates/app/vite-2/js/BASE/_pnpm-workspace.yaml

@@ -0,0 +1,11 @@
+# https://pnpm.io/settings
+shamefullyHoist: true
+
+allowBuilds:
+  '@parcel/watcher': true
+  core-js: true
+  electron-winstaller: true
+  esbuild: true
+  lightningcss: true
+  rolldown: true
+  unrs-resolver: true

package/templates/app/{quasar-v2/ts-vite-2 → vite-2/js}/BASE/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <title><%= '<' + '%= productName %' + '>' %></title>
+    <title><%~ <%= productName %> ~%></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>">
+    <meta name="description" content="<%~ <%= productDescription %> ~%>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '<' + '% if (ctx.mode.cordova || ctx.mode.capacitor) { %' + '>, viewport-fit=cover<' + '% } %' + '>' %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%~ <% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %> ~%>">
 
     <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
     <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">