From 8aa0dae425048988d2b9bb56899827d121b4ab48 Mon Sep 17 00:00:00 2001 From: fi3ework Date: Sun, 6 Feb 2022 17:57:38 +0800 Subject: [PATCH] docs: update README --- README.md | 87 +++++++++++--------- packages/runtime/src/App.svelte | 8 +- packages/runtime/src/components/Badge.svelte | 2 + packages/vite-plugin-checker/src/types.ts | 31 +++++-- 4 files changed, 83 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index b78eb7c7..532a17b0 100644 --- a/README.md +++ b/README.md @@ -118,17 +118,44 @@ export default { } ``` -### config.overlay +### Checker common config -| field | Type | Default value | Description | -| :------ | --------- | ------------- | ------------------------- | -| overlay | `boolean` | true | Show error prompt overlay | - -### config.enableBuild - -| field | Type | Default value | Description | -| :---------- | --------- | ------------- | ----------------------------- | -| enableBuild | `boolean` | `true` | Enable checking in build mode | +```ts +{ + /** + * Show overlay on UI view when there are errors or warnings + * - Set `true` to show overlay in dev mode + * - Set `false` to disable overlay in dev mode + * - Set with a object to customize overlay + * + * @defaultValue `true` + */ + overlay: + | boolean + | { + /** + * Set this true if you want the overlay to default to being open if errors/warnings are found. + * @defaultValue `true` + */ + initialIsOpen?: boolean + /** + * The position of the vite-plugin-checker badge to open and close the diagnostics panel + * @default `bl` + */ + position?: 'tl' | 'tr' | 'bl' | 'br' + /** + * Use this to add extra style to the badge button + * For example, if you want to want with react-query devtool, you can pass 'margin-left: 100px;' to avoid the badge overlap with the react-query's + */ + badgeStyle?: string + } + /** + * Enable checking in build mode + * @defaultValue `true` + */ + enableBuild: boolean +} +``` --- @@ -173,33 +200,19 @@ checker({ ### config.vueTsc -_coming soon._ +no available params for now. -| field | Type | Default value | Description | + ### config.eslint -<<<<<<< HEAD -<<<<<<< HEAD -| field | Type | Default value | Description | -| :------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| lintCommand | `string` | This value is required | `lintCommand` will be executed at build mode, and will also be used as default config for dev mode when `eslint.dev.overrideConfig` is nullable. | -| `dev.overrideConfig` | [`ESLint.Options`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/eslint/index.d.ts) | `undefined` | You can override the options of the translated from `lintCommand`. Config priority: `const eslint = new ESLint({cwd: root, ...translatedOptions, ...pluginConfig.eslint.devOptions, })`. | -======= -| field | Type | Default value | Description | -| :----------- | ---------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| lintCommand | `string` | This value is required | `lintCommand` will be executed at build mode, and will also be used as default config for dev mode when `eslint.dev.eslint` is nullable. | -| `dev.eslint` | [`ESLint.Options`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/eslint/index.d.ts) | `undefined` | You can override the options of the translated from `lintCommand`. Config priority: `const eslint = new ESLint({cwd: root, ...translatedOptions, ...pluginConfig.eslint.dev, })`. | ->>>>>>> refactor: change ESLint property -======= -| field | Type | Default value | Description | -| :------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| lintCommand | `string` | This value is required | `lintCommand` will be executed at build mode, and will also be used as default config for dev mode when `eslint.dev.eslint` is nullable. | -| `dev.overrideConfig` | [`ESLint.Options`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/eslint/index.d.ts) | `undefined` | **(Only in dev mode)** You can override the options of the translated from `lintCommand`. Config priority: `const eslint = new ESLint({cwd: root, ...translatedOptions, ...pluginConfig.eslint.dev, })`. | -| dev.logLevel | `('error' \| 'warning')[]` | `['error', 'warning']` | **(Only in dev mode)** Which level of ESLint should be emitted to terminal and overlay in dev mode | ->>>>>>> feat: support log level of ESLint +| field | Type | Default value | Description | +| :----------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| lintCommand | `string` | This value is required | `lintCommand` will be executed at build mode, and will also be used as default config for dev mode when `eslint.dev.eslint` is nullable. | +| dev.overrideConfig | [`ESLint.Options`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/eslint/index.d.ts) | `undefined` | **(Only in dev mode)** You can override the options of the translated from `lintCommand`. Config priority: `const eslint = new ESLint({cwd: root, ...translatedOptions, ...pluginConfig.eslint.dev, })`. | +| dev.logLevel | `('error' \| 'warning')[]` | `['error', 'warning']` | **(Only in dev mode)** Which level of ESLint should be emitted to terminal and overlay in dev mode | ## Playground @@ -207,12 +220,12 @@ Run projects in [`playground/*`](./playground) to try it out. ```bash pnpm i -npm run build -cd ./playground/ # ts / vls / vue-tsc / vanilla ts -npm run dev # test serve -npm run build # test build +pnpm run build +cd ./playground/ # choose one example +pnpm run dev # test in serve mode +pnpm run build # test in build mode ``` ## License -MIT License © 2021 [fi3ework](https://github.com/fi3ework) +MIT License © 2022 [fi3ework](https://github.com/fi3ework) diff --git a/packages/runtime/src/App.svelte b/packages/runtime/src/App.svelte index 2caa6fd2..21a9d267 100644 --- a/packages/runtime/src/App.svelte +++ b/packages/runtime/src/App.svelte @@ -11,7 +11,13 @@ } - +
diff --git a/packages/runtime/src/components/Badge.svelte b/packages/runtime/src/components/Badge.svelte index 9247929f..5fc4fc0b 100644 --- a/packages/runtime/src/components/Badge.svelte +++ b/packages/runtime/src/components/Badge.svelte @@ -3,6 +3,7 @@ export let checkerResults export let onClick export let position = 'bl' + export let badgeStyle = '' function calcSummary(results) { let errorCount = 0 @@ -32,6 +33,7 @@ class={`badge-base ${ collapsed ? `to-uncollpase ${bgColorClass}` : 'to-collpase' } badge-${position}`} + style={badgeStyle} on:click|stopPropagation={onClick} > {#if collapsed} diff --git a/packages/vite-plugin-checker/src/types.ts b/packages/vite-plugin-checker/src/types.ts index ff570826..217ecfa2 100644 --- a/packages/vite-plugin-checker/src/types.ts +++ b/packages/vite-plugin-checker/src/types.ts @@ -5,15 +5,28 @@ import type { VlsOptions } from './checkers/vls/initParams' /* ----------------------------- userland plugin options ----------------------------- */ -/** TypeScript checker configuration */ +/** + * TypeScript checker configuration + * @default true + */ export type TscConfig = + /** + * - set to `true` to enable type checking with default configuration + * - set to `false` to disable type checking, you can also remove `config.typescript` directly + */ | boolean | Partial<{ - /** path to tsconfig.json file */ + /** + * path to tsconfig.json file + */ tsconfigPath: string - /** root path of cwd */ + /** + * root path of cwd + */ root: string - /** root path of cwd */ + /** + * root path of cwd + */ buildMode: boolean }> @@ -65,9 +78,12 @@ export interface SharedConfig { */ enableBuild: boolean /** - * Show overlay when has TypeScript error - * @defaultValue - * Same as [Vite config](https://vitejs.dev/config/#root) + * Show overlay on UI view when there are errors or warnings + * - Set `true` to show overlay in dev mode + * - Set `false` to disable overlay in dev mode + * - Set with a object to customize overlay + * + * @defaultValue `true` */ overlay: | boolean @@ -84,6 +100,7 @@ export interface SharedConfig { position?: 'tl' | 'tr' | 'bl' | 'br' /** * Use this to add extra style to the badge button + * For example, if you want to want with react-query devtool, you can pass 'margin-left: 100px;' to avoid the badge overlap with the react-query's */ badgeStyle?: string }