fix/feat(app-vite): fix&improve quasar config types (quasarframework#…

…15939) * fix(app-vite): Fix devServer option type * fix(app-vite): Fix build.alias type * feat(app-vite): Improve build.vitePlugins type * fix(app-vite): Add missing build.vueDevtools type And update misleading docs that suggest it's devServer.vueDevtools. * feat(app-vite): Improve eslint.rawOptions type
AlFathah7 · Jun 2, 2023 · 1159b47 · 1159b47
1 parent 42565de
commit 1159b47
Show file tree

Hide file tree

Showing 6 changed files with 279 additions and 156 deletions.
diff --git a/app-vite/package.json b/app-vite/package.json
@@ -85,6 +85,7 @@
     "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
+    "@types/eslint": "^8.40.0",
     "electron-builder": "^24.3.0",
     "electron-packager": "^17.1.1",
     "eslint": "^8.11.0",

diff --git a/app-vite/types/configuration/build.d.ts b/app-vite/types/configuration/build.d.ts
@@ -1,4 +1,4 @@
-import { UserConfig as ViteUserConfig } from "vite";
+import { Plugin, UserConfig as ViteUserConfig } from "vite";
 import { Options as VuePluginOptions } from "@vitejs/plugin-vue"
 import { QuasarHookParams } from "./conf";
 
@@ -18,6 +18,14 @@ interface BuildTargetOptions {
   node: string;
 }
 
+type PluginEntry =
+  | [pluginName: string, options?: any]
+  | [pluginFactory: (options?: any) => Plugin, options?: any]
+  | Plugin
+  | null
+  | undefined
+  | false;
+
 interface QuasarStaticBuildConfiguration {
   /**
    * @example
@@ -41,20 +49,39 @@ interface QuasarStaticBuildConfiguration {
   /**
    * Vite plugins
    *
+   * @see https://v2.quasar.dev/quasar-cli-vite/handling-vite#adding-vite-plugins
+   *
    * @example
-   *   [
-   *     [ 'package-name', { ..options.. } ],
-   *     [ require('some-plugin'), { ...options... } ]
-   *   ]
+   * // ESM
+   * import { somePlugin } from 'some-plugin'
+   * // ...
+   * [
+   *   [ 'some-plugin', { ...options... } ],
+   *
+   *   [ somePlugin, { ...options... } ],
+   *
+   *   somePlugin(options)
+   * ]
+   *
+   * @example
+   * // CJS
+   * [
+   *   [ 'some-plugin', { ...options... } ],
+   *
+   *   [ require('some-plugin'), { ...options... } ],
+   *
+   *   require('some-plugin')(options)
+   * ]
    */
-  vitePlugins?: object[];
+  vitePlugins?: PluginEntry[];
   /**
-   * @example setting an alias for a custom folder
-   *    {
-   *       locales: path.join(__dirname, 'src/locales')
-   *    }
+   * @example
+   * {
+   *   // import { ... } from 'locales/...'
+   *   locales: path.join(__dirname, 'src/locales')
+   * }
    */
-  alias?: object[];
+  alias?: { [key: string]: string };
   /**
    * Public path of your app.
    * Use it when your public path is something else,
@@ -76,6 +103,10 @@ interface QuasarStaticBuildConfiguration {
    * Should not need to configure this, unless absolutely needed.
    */
   vueRouterBase?: string;
+  /**
+   * Automatically open remote Vue Devtools when running in development mode.
+   */
+  vueDevtools?: boolean;
   /**
    * Should the Vue Options API be available? If all your components only use Composition API
    * it would make sense performance-wise to disable Vue Options API for a compile speedup.

diff --git a/app-vite/types/configuration/conf.d.ts b/app-vite/types/configuration/conf.d.ts
@@ -10,7 +10,12 @@ import { QuasarPwaConfiguration } from "./pwa-conf";
 import { QuasarSsrConfiguration } from "./ssr-conf";
 import { QuasarBexConfiguration } from "./bex";
 
-import { ServerOptions } from "vite";
+import { Options as OpenOptions } from "open";
+import { ServerOptions as ViteServerOptions } from "vite";
+
+type DevServerOptions = Omit<ViteServerOptions, "open"> & {
+  open?: Omit<OpenOptions, "wait">;
+};
 
 type QuasarAnimationsConfiguration = "all" | QuasarAnimations[];
 
@@ -81,7 +86,7 @@ interface BaseQuasarConfiguration {
    * Note: if you're proxying the development server (i.e. using a cloud IDE),
    * set the `public` setting to your public application URL.
    */
-  devServer?: ServerOptions;
+  devServer?: DevServerOptions;
   /** Build configuration options. */
   build?: QuasarBuildConfiguration;
   /** Change the default name of parts of your app. */

diff --git a/app-vite/types/configuration/eslint.d.ts b/app-vite/types/configuration/eslint.d.ts
@@ -1,3 +1,4 @@
+import { ESLint } from "eslint";
 
 export interface QuasarEslintConfiguration {
   /**
@@ -20,7 +21,10 @@ export interface QuasarEslintConfiguration {
   /**
    * Raw options to send to ESLint
    */
-  rawOptions?: object;
+  rawOptions?: Omit<
+    ESLint.Options,
+    "cache" | "cacheLocation" | "fix" | "errorOnUnmatchedPattern"
+  >;
 
   /**
    * Files to include (can be in glob format)

diff --git a/docs/src/pages/quasar-cli-vite/quasar-config-file.md b/docs/src/pages/quasar-cli-vite/quasar-config-file.md
@@ -176,6 +176,8 @@ You will need the linting files already installed. If you don't know which those
 /** Options with which Quasar CLI will use ESLint */
 eslint?: QuasarEslintConfiguration;
 
+import { ESLint } from "eslint";
+
 interface QuasarEslintConfiguration {
   /**
    * Should it report warnings?
@@ -197,7 +199,10 @@ interface QuasarEslintConfiguration {
   /**
    * Raw options to send to ESLint
    */
-  rawOptions?: object;
+  rawOptions?: Omit<
+    ESLint.Options,
+    "cache" | "cacheLocation" | "fix" | "errorOnUnmatchedPattern"
+  >;
 
   /**
    * Files to include (can be in glob format)
@@ -292,8 +297,12 @@ animations?: QuasarAnimationsConfiguration | 'all';
 
 More info: [Vite server options](https://vitejs.dev/config/#server-options)
 
-```js
-import { ServerOptions } from "vite";
+```ts
+import type { ViteServerOptions } from "vite";
+import type { OpenOptions } from "open";
+type DevServerOptions = Omit<ViteServerOptions, "open"> & {
+  open?: Omit<OpenOptions, "wait">;
+};
 
 /**
  * Vite "server" options.
@@ -302,7 +311,7 @@ import { ServerOptions } from "vite";
  * Note: if you're proxying the development server (i.e. using a cloud IDE),
  * set the `public` setting to your public application URL.
  */
-devServer?: ServerOptions;
+devServer?: DevServerOptions;
 ```
 
 Apart from these options, Quasar CLI tampers with some and you will experience them differently than on a Vite app:
@@ -336,22 +345,13 @@ devServer: {
 }
 ```
 
-You can also configure automatically opening remote Vue Devtools:
-
-```js
-// quasar.config file
-devServer: {
-  vueDevtools: true
-}
-```
-
 ### build
 
 ```js
 /** Build configuration options. */
 build?: QuasarBuildConfiguration;
 
-import { UserConfig as ViteUserConfig } from "vite";
+import { Plugin, UserConfig as ViteUserConfig } from "vite";
 import { Options as VuePluginOptions } from "@vitejs/plugin-vue"
 
 interface InvokeParams {
@@ -370,6 +370,14 @@ interface BuildTargetOptions {
   node: string;
 }
 
+type PluginEntry =
+  | [pluginName: string, options?: any]
+  | [pluginFactory: (options?: any) => Plugin, options?: any]
+  | Plugin
+  | null
+  | undefined
+  | false;
+
 interface QuasarStaticBuildConfiguration {
   /**
    * @example
@@ -393,20 +401,39 @@ interface QuasarStaticBuildConfiguration {
   /**
    * Vite plugins
    *
+   * @see https://v2.quasar.dev/quasar-cli-vite/handling-vite#adding-vite-plugins
+   *
    * @example
-   *   [
-   *     [ 'package-name', { ..options.. } ],
-   *     [ require('some-plugin'), { ...options... } ]
-   *   ]
+   * // ESM
+   * import { somePlugin } from 'some-plugin'
+   * // ...
+   * [
+   *   [ 'some-plugin', { ...options... } ],
+   *
+   *   [ somePlugin, { ...options... } ],
+   *
+   *   somePlugin(options)
+   * ]
+   *
+   * @example
+   * // CJS
+   * [
+   *   [ 'some-plugin', { ...options... } ],
+   *
+   *   [ require('some-plugin'), { ...options... } ],
+   *
+   *   require('some-plugin')(options)
+   * ]
    */
-  vitePlugins?: object[];
+  vitePlugins?: PluginEntry[];
   /**
-   * @example setting an alias for a custom folder
-   *    {
-   *       locales: path.join(__dirname, 'src/locales')
-   *    }
+   * @example
+   * {
+   *   // import { ... } from 'locales/...'
+   *   locales: path.join(__dirname, 'src/locales')
+   * }
    */
-  alias?: object[];
+  alias?: { [key: string]: string };
   /**
    * Public path of your app.
    * Use it when your public path is something else,
@@ -428,6 +455,10 @@ interface QuasarStaticBuildConfiguration {
    * Should not need to configure this, unless absolutely needed.
    */
   vueRouterBase?: string;
+  /**
+   * Automatically open remote Vue Devtools when running in development mode.
+   */
+  vueDevtools?: boolean;
   /**
    * Should the Vue Options API be available? If all your components only use Composition API
    * it would make sense performance-wise to disable Vue Options API for a compile speedup.