create-quasar 1.9.2 → 1.10.0

package/templates/app-extension/ae-ts/BASE/_eslint.config.js

@@ -0,0 +1,107 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginVue from 'eslint-plugin-vue';
+import configPrettier from 'eslint-config-prettier';
+import globals from 'globals';
+import { version as vueVersion } from 'vue';
+
+export default tseslint.config(
+  {
+    name: 'eslint/recommended',
+    ...eslint.configs.recommended,
+  },
+
+  // Recommended rules
+  ...tseslint.configs.recommendedTypeChecked,
+  // Strict rules (recommended if have good TS knowledge)
+  // ...tseslint.configs.strictTypeChecked, // disable recommended above if you enable this
+  ...tseslint.configs.stylisticTypeChecked,
+
+  ...pluginVue.configs['flat/recommended'],
+
+  {
+    name: 'eslint-config-prettier',
+    ...configPrettier,
+  },
+
+  {
+    name: 'ignored',
+
+    ignores: [
+      "**/dist",
+
+      "playground/*/.quasar",
+      "playground/*/quasar.config.*.temporary.compiled*",
+      "playground/*/src-cordova",
+      "playground/*/src-capacitor",
+      "playground/*/src-ssr",
+      "playground/*/postcss.config.cjs",
+
+      "playground/quasar-cli-webpack/src-bex/www",
+      "playground/quasar-cli-webpack/babel.config.cjs",
+    ],
+  },
+
+  {
+    name: 'general',
+
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+        extraFileExtensions: ['.vue'],
+        projectService: true,
+      },
+
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021,
+
+        chrome: 'readonly',
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/no-misused-promises': [
+        'error',
+        { checksVoidReturn: false },
+      ],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+
+      'vue/no-unsupported-features': [
+        'error',
+        {
+          version: vueVersion,
+        },
+      ],
+      'vue/padding-line-between-blocks': 'warn',
+      'vue/no-empty-component-block': 'warn',
+      'vue/eqeqeq': 'error',
+      'vue/custom-event-name-casing': 'warn',
+      'vue/no-unused-properties': ['warn', { groups: ['props', 'setup'] }],
+      'vue/v-for-delimiter-style': 'warn',
+      'vue/require-macro-variable-name': 'warn',
+      'vue/prefer-separate-static-class': 'warn',
+
+      curly: 'error',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    },
+  },
+
+  {
+    // Layout/page components are not used as components in templates, so they don't need to be multi-word
+    name: 'playground/vue-layout-and-page',
+    files: [
+      'playground/*/src/layouts/**/*.vue',
+      'playground/*/src/pages/**/*.vue',
+    ],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+);

package/templates/app-extension/ae-ts/BASE/_package.json

@@ -0,0 +1,39 @@
+{
+  "name": "quasar-app-extension-<%= name %>-monorepo",
+  "private": true,
+  <% if (packageManagerField) { %>"packageManager": "<%= packageManagerField %>",<% } %>
+  "author": "<%= author %>",
+  "type": "module",
+  <% if (packageManager?.name !== 'pnpm') { %>"workspaces": [
+    "app-extension",
+    "playground/*"
+  ],<% } %>
+  "scripts": {
+    <% if (packageManager) { %>
+    "build": <% if (['pnpm', 'bun'].includes(packageManager.name)) { %>"<%= packageManager.name %> --filter ./app-extension build"<% } else if (packageManager.name === 'yarn') { %>"yarn workspace <%= pkgName %> build"<% } else { %>"npm run --workspace <%= pkgName %> build"<% } %>,
+    "dev:vite": <% if (['pnpm', 'bun'].includes(packageManager.name)) { %>"<%= packageManager.name %> --filter ./playground/quasar-cli-vite dev"<% } else if (packageManager.name === 'yarn') { %>"yarn workspace playground-quasar-cli-vite dev"<% } else { %>"npm run --workspace playground-quasar-cli-vite dev"<% } %>,
+    "dev:webpack": <% if (['pnpm', 'bun'].includes(packageManager.name)) { %>"<%= packageManager.name %> --filter ./playground/quasar-cli-webpack dev"<% } else if (packageManager.name === 'yarn') { %>"yarn workspace playground-quasar-cli-webpack dev"<% } else { %>"npm run --workspace playground-quasar-cli-webpack dev"<% } %>,
+    "format": <% if (packageManager.name === 'pnpm') { %>"pnpm format:root && pnpm --recursive format"<% } else if (packageManager.name === 'bun') { %>"bun format:root && bun --filter '*' format"<% } else if (packageManager.name === 'yarn') { %>"yarn format:root && yarn workspace <%= pkgName %> format"<% } else { %>"npm run format:root && npm run --workspaces format"<% } %>,
+    <% } else { %>
+    "build": "pnpm --filter ./app-extension build",
+    "dev:vite": "pnpm --filter ./playground/quasar-cli-vite dev",
+    "dev:webpack": "pnpm --filter ./playground/quasar-cli-webpack dev",
+    "format": "pnpm format:root && pnpm --recursive format",
+    <% } %>
+    "lint": "eslint",
+    "format:root": "prettier --write \"./*.{json,md,vue,js,ts,yml}\" \"./.vscode/*.json\" --ignore-path .gitignore"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.8.0",
+    "@types/eslint": "^9.6.0",
+    "@types/eslint__js": "^8.42.3",
+    "@types/node": "^20.12.8",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "globals": "^15.9.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.0.1"
+  }
+}

package/templates/app-extension/ae-ts/BASE/_tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "lib": ["es2022"],
+    "module": "node16",
+    "target": "es2022",
+    "moduleResolution": "node16",
+
+    "noEmit": true,
+    "resolveJsonModule": true,
+
+    "strict": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "isolatedModules": true,
+
+    "checkJs": true,
+
+    "esModuleInterop": true,
+    "skipLibCheck": false,
+    "forceConsistentCasingInFileNames": true
+  }
+}

package/templates/app-extension/ae-ts/BASE/app-extension/README.md

@@ -0,0 +1,52 @@
+# Quasar App Extension <%= name %> (<%= pkgName %>)
+
+> TODO: 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/<%= pkgName %>.svg?label=<%= pkgName %>)](https://www.npmjs.com/package/<%= pkgName %>)
+[![npm](https://img.shields.io/npm/dt/<%= pkgName %>.svg)](https://www.npmjs.com/package/<%= pkgName %>)
+
+# Install
+
+```bash
+quasar ext add <%= name %>
+```
+
+Quasar CLI will retrieve it from NPM and install the extension.
+
+## Global component typings
+
+Add this to `src/quasar.d.ts` to load the global component typings:
+```ts
+// Load global component typings
+/// <reference types="<%= pkgName %>" />
+```
+
+## Prompts
+
+> TODO: If your app extension uses prompts, explain them here, otherwise remove this section and remove prompts.ts file.
+
+# Uninstall
+
+```bash
+quasar ext remove <%= name %>
+```
+
+# Info
+
+> TODO: Add longer information here that will help the user of your app extension.
+
+# Other Info
+
+> TODO: Add other information that's not as important to know
+
+# Development
+
+See [the root README](../README.md) for more information.
+
+# Donate
+
+If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
+
+# License
+
+<%= license %> (c) <%= author %>

package/templates/app-extension/ae-ts/BASE/app-extension/_.npmignore

@@ -0,0 +1,5 @@
+.DS_Store
+.thumbs.db
+.eslintignore
+.eslintrc.js
+tsconfig.json

package/templates/app-extension/ae-ts/BASE/app-extension/_package.json

@@ -0,0 +1,57 @@
+{
+  "name": "<%= pkgName %>",
+  "version": "0.0.1",
+  "description": "<%= description %>",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "type": "module",
+  "repository": {
+    "type": "<%= repositoryType %>",
+    "url": "<%= repositoryURL %>"
+  },
+  "bugs": "<%= bugs %>",
+  "homepage": "<%= homepage %>",
+  "main": "./dist/runtime/index.js",
+  "module": "./dist/runtime/index.js",
+  "types": "./dist/runtime/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./package.json": "./package.json",
+    <% if (preset.prompts) { %>"./dist/prompts": "./dist/prompts.js",<% } %>
+    <% if (preset.install) { %>"./dist/install": "./dist/install.js",<% } %>
+    <% if (preset.uninstall) { %>"./dist/uninstall": "./dist/uninstall.js",<% } %>
+    "./dist/index": "./dist/index.js",
+    "./*": "./dist/runtime/*"
+  },
+  "scripts": {
+    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    <% if (preset.install) { %>"build:code": "mkdist ./ --ext=js --declaration --pattern='**' --pattern='!shims-vue.d.ts' --pattern='!templates/**'",
+    "build:templates": "mkdist ./ --src ./src/templates --dist ./dist/templates --loaders='raw'",
+    "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-rc.1",
+    "@quasar/app-webpack": "^4.0.0-rc.1",
+    "mkdist": "^1.5.4",
+    "quasar": "^2.16.7",
+    "vue": "^3.4.36",
+    "vue-tsc": "^2.0.29"
+  },
+  "peerDependencies": {
+    "@quasar/app-vite": "^2.0.0-rc.1",
+    "@quasar/app-webpack": "^4.0.0-rc.2",
+    "quasar": "^2.16.0",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@quasar/app-vite": {
+      "optional": true
+    },
+    "@quasar/app-webpack": {
+      "optional": true
+    }
+  }
+}

package/templates/app-extension/ae-ts/BASE/app-extension/_tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["./src/**/*"]
+}

package/templates/app-extension/ae-ts/BASE/app-extension/src/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ */
+
+import { QuasarConfProxy as WebpackQuasarConfProxy } from '@quasar/app-webpack';
+import { IndexAPI } from './quasar';
+
+export default function (api: IndexAPI) {
+  // Quasar compatibility check; you may need hard dependencies,
+  // as in a minimum version of the "quasar" package or
+  // a minimum version of "@quasar/app-*" CLI
+  api.compatibleWith('quasar', '^2.0.0');
+
+  if (api.hasVite) {
+    api.compatibleWith('@quasar/app-vite', '^2.0.0-rc.1');
+  }
+
+  if (api.hasWebpack) {
+    api.compatibleWith('@quasar/app-webpack', '^4.0.0-rc.1');
+  }
+
+  api.extendQuasarConf((conf, api) => {
+    conf.boot!.push('~<%= pkgName %>/boot/register');
+
+    // make sure app extension files get transpiled
+    if (api.hasWebpack) {
+      const config = conf as unknown as WebpackQuasarConfProxy;
+      config.build.webpackTranspileDependencies.push(
+        /<%= pkgName.replace('/', '[\\\\/]') %>[\\/]dist/,
+      );
+    }
+  });
+}

package/templates/app-extension/ae-ts/BASE/app-extension/src/quasar.d.ts

@@ -0,0 +1,24 @@
+<% /* TODO: Create a shared package for App Extensions */ %>
+// This file is here to unify the types for the App Extension API
+
+import {
+  IndexAPI as BaseViteIndexAPI,
+  InstallAPI as BaseViteInstallAPI,
+  PromptsAPI as BaseVitePromptsAPI,
+  UninstallAPI as BaseViteUninstallAPI,
+} from '@quasar/app-vite/types';
+
+import {
+  IndexAPI as BaseWebpackIndexAPI,
+  InstallAPI as BaseWebpackInstallAPI,
+  PromptsAPI as BaseWebpackPromptsAPI,
+  UninstallAPI as BaseWebpackUninstallAPI,
+} from '@quasar/app-webpack/types';
+
+export type IndexAPI = BaseViteIndexAPI | BaseWebpackIndexAPI;
+
+export type InstallAPI = BaseViteInstallAPI | BaseWebpackInstallAPI;
+
+export type PromptsAPI = BaseVitePromptsAPI | BaseWebpackPromptsAPI;
+
+export type UninstallAPI = BaseViteUninstallAPI | BaseWebpackUninstallAPI;

package/templates/app-extension/ae-ts/BASE/app-extension/src/runtime/README.md

@@ -0,0 +1,46 @@
+<% /* TODO: Consider reworking the AE docs and moving this to the docs */ %>
+# Runtime directory
+
+This directory contains runtime files for your app extension. The code here will run in the browser context. Some example use cases for this directory include:
+
+- Distributing a Vue component, directive, plugin, etc.
+- Distributing JS/TS code such as constants, composables, utilities, services, etc.
+- Creating a Quasar boot file to register from the app extension.
+
+## Instructions
+
+Use `index.ts` to export your runtime code as part of the library. The exported code can then be imported like so:
+
+```js
+import { someFunction } from '<%= pkgName %>'
+```
+
+If you need more entrypoints(e.g. `<%= pkgName %>/another`) for a good reason, you can create the respective files and add an entry to `package.json > exports`.
+
+### Boot files
+
+For each boot file you create, you will need to add an entrypoint to `package.json > exports`. For example, given a boot file at `./boot/some-boot-file.ts`, you would add the following to `package.json`:
+
+```json
+{
+  "exports": {
+    "./boot/some-boot-file": {
+      "types": "./dist/runtime/boot/some-boot-file.d.ts",
+      "import": "./dist/runtime/boot/some-boot-file.js"
+    },
+  }
+}
+```
+
+Afterwards, you can use the Index API ([`src/index.ts`](../index.ts)) to register the boot file:
+
+```ts
+// ...
+export default function (api: IndexAPI) {
+  // ...
+  api.extendQuasarConf((conf, api) => {
+    conf.boot!.push('~<%= pkgName %>/boot/some-boot-file');
+    // ...
+  });
+}
+```

package/templates/app-extension/ae-ts/BASE/app-extension/src/runtime/boot/register.ts

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import MyButton from '../components/MyButton.vue';
+
+export default boot(({ app }) => {
+  app.component('MyButton', MyButton);
+});

package/templates/app-extension/ae-ts/BASE/app-extension/src/runtime/components/MyButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-btn v-bind="$props">
+    <!-- QBtn has no scoped slots -->
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+  </q-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent, SlotsType } from 'vue';
+import { QBtn, QBtnProps, QBtnSlots } from 'quasar';
+import { PropOptions } from './types';
+
+// You can also use <script setup lang="ts">, but it won't work in app-webpack JS apps
+// without extra configuration in the app's webpack config
+// If https://github.com/unjs/mkdist/pull/210 gets released, you will be able to use
+// <script setup lang="ts"> if not using type-only macros, e.g. defineProps<QBtnProps>()
+// If you will only use the app-extension by yourself or within your organization, and you
+// don't have JS app-webpack apps, then you can freely use <script setup lang="ts">
+
+export default defineComponent({
+  name: 'MyButton',
+  props: {
+    ...(QBtn['props'] as PropOptions<QBtnProps>),
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outline: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  slots: Object as SlotsType<QBtnSlots>,
+});
+</script>

package/templates/app-extension/ae-ts/BASE/app-extension/src/runtime/components/types.ts

@@ -0,0 +1,19 @@
+import { PropType } from 'vue';
+
+type IsKeyRequired<T, Keys extends keyof T> =
+  { [Key in Keys]?: T[Key] } extends Pick<T, Keys> ? false : true;
+
+/**
+ * @example
+ * ```ts
+ * props: {
+ *   ...(QBtn['props'] as PropOptions<QBtnProps>),
+ * }
+ * ```
+ */
+export type PropOptions<T> = {
+  [K in keyof Required<T>]: {
+    type: PropType<T[K]>;
+    required: IsKeyRequired<T, K>;
+  };
+};

package/templates/app-extension/ae-ts/BASE/app-extension/src/runtime/index.ts

@@ -0,0 +1,9 @@
+import MyButton from './components/MyButton.vue';
+
+declare module 'vue' {
+  interface GlobalComponents {
+    MyButton: typeof MyButton;
+  }
+}
+
+export { MyButton };

package/templates/{app/quasar-v2/ts-vite-2/BASE/src → app-extension/ae-ts/BASE/app-extension/src/runtime}/quasar.d.ts

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 // Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
 // Removing this would break `quasar/wrappers` imports as those typings are declared
 //  into `@quasar/app-vite`

package/templates/app-extension/ae-ts/BASE/eslint.d.ts

@@ -0,0 +1,18 @@
+declare module 'eslint-plugin-vue' {
+  import type { TSESLint } from '@typescript-eslint/utils';
+
+  const configs: {
+    'flat/recommended': TSESLint.FlatConfig.ConfigArray;
+  };
+  const plugin: {
+    configs: typeof configs;
+  };
+  export default plugin;
+}
+
+declare module 'eslint-config-prettier' {
+  import type { TSESLint } from '@typescript-eslint/utils';
+
+  const config: TSESLint.FlatConfig.Config;
+  export default config;
+}

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/README.md

@@ -0,0 +1,67 @@
+# Quasar AE <%= name %> Playground (quasar-cli-vite)
+
+Playground for Quasar AE <%= name %>
+
+## Install the dependencies
+
+<% if (packageManager) { %>```bash
+<%= packageManager.name %> install
+```<% } else { %>```bash
+# One of the following, depending on your package manager
+npm install
+yarn install
+pnpm install
+bun install
+```<% } %>
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+
+<% if (packageManager) { %>```bash
+<%= packageManager.name %> run dev
+```<% } else { %>```bash
+# One of the following, depending on your package manager
+npm run dev
+yarn dev
+pnpm dev
+bun dev
+```<% } %>
+
+### Lint the files
+
+<% if (packageManager) { %>```bash
+<%= packageManager.name %> run lint
+```<% } else { %>```bash
+# One of the following, depending on your package manager
+npm run lint
+yarn lint
+pnpm lint
+bun lint
+```<% } %>
+
+### Format the files
+
+<% if (packageManager) { %>```bash
+<%= packageManager.name %> run format
+```<% } else { %>```bash
+# One of the following, depending on your package manager
+npm run format
+yarn format
+pnpm format
+bun format
+```<% } %>
+
+### Build the app for production
+
+<% if (packageManager) { %>```bash
+<%= packageManager.name %> run build
+```<% } else { %>```bash
+# One of the following, depending on your package manager
+npm run build
+yarn build
+pnpm build
+bun build
+```<% } %>
+
+### Customize the configuration
+
+See [Configuring quasar.config file](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/_.gitignore

@@ -0,0 +1,37 @@
+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+/quasar.config.*.temporary.compiled*
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# BEX related directories and files
+/src-bex/www
+/src-bex/js/core
+
+# Log files
+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-extension/ae-ts/BASE/playground/quasar-cli-vite/_package.json

@@ -0,0 +1,29 @@
+{
+  "name": "playground-quasar-cli-vite",
+  "version": "0.0.1",
+  "description": "Playground for Quasar AE <%= name %>",
+  "productName": "Quasar AE <%= name %> Playground",
+  "author": "<%= author %>",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "test": "echo \"No test specified\" && exit 0",
+    "dev": "quasar dev",
+    "build": "quasar build"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.16.12",
+    "quasar": "^2.16.7",
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3",
+    "<%= pkgName %>": <% if (!packageManager || ['pnpm', 'bun'].includes(packageManager.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "^2.0.0-rc.1",
+    "autoprefixer": "^10.4.20"
+  },
+  "engines": {
+    "node": "^20 || ^18"
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "extends": "@quasar/app-vite/tsconfig-preset",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  // Needed to avoid files copied into 'dist' folder (e.g. a `.d.ts` file inside `src-ssr` folder)
+  // to be evaluated by TS when their original files has been updated
+  "exclude": ["dist", ".quasar", "node_modules"]
+}