Skip to content

Commit

Permalink
docs: update README
Browse files Browse the repository at this point in the history
  • Loading branch information
@fi3ework
fi3ework committed Feb 6, 2022
1 parent eed4464 commit 8aa0dae
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 45 deletions.
87 changes: 50 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
```

---

Expand Down Expand Up @@ -173,46 +200,32 @@ checker({

### config.vueTsc

_coming soon._
no available params for now.

| field | Type | Default value | Description |
<!-- | 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

Run projects in [`playground/*`](./playground) to try it out.

```bash
pnpm i
npm run build
cd ./playground/<ONE_EXAMPLE> # ts / vls / vue-tsc / vanilla ts
npm run dev # test serve
npm run build # test build
pnpm run build
cd ./playground/<ONE_EXAMPLE> # 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)
8 changes: 7 additions & 1 deletion packages/runtime/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@
}
</script>

<Badge {checkerResults} {collapsed} position={overlayConfig.position} onClick={toggle} />
<Badge
{checkerResults}
{collapsed}
position={overlayConfig.position}
badgeStyle={overlayConfig.badgeStyle}
onClick={toggle}
/>
<main class={`window ${collapsed ? 'window-collapsed' : ''}`} on:click|stopPropagation>
<div class="list-scroll">
<List {checkerResults} ulStyle="margin-bottom: 36px;" />
Expand Down
2 changes: 2 additions & 0 deletions packages/runtime/src/components/Badge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
export let checkerResults
export let onClick
export let position = 'bl'
export let badgeStyle = ''
function calcSummary(results) {
let errorCount = 0
Expand Down Expand Up @@ -32,6 +33,7 @@
class={`badge-base ${
collapsed ? `to-uncollpase ${bgColorClass}` : 'to-collpase'
} badge-${position}`}
style={badgeStyle}
on:click|stopPropagation={onClick}
>
{#if collapsed}
Expand Down
31 changes: 24 additions & 7 deletions packages/vite-plugin-checker/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}>

Expand Down Expand Up @@ -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
Expand All @@ -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
}
Expand Down

0 comments on commit 8aa0dae

Please sign in to comment.