├── .github
    ├── FUNDING.yml
    └── workflows
    │   ├── release.yml
    │   └── ci.yml
├── .gitignore
├── .npmrc
├── .stackblitzrc
├── composables
    ├── dark.ts
    ├── strings.ts
    ├── rules.ts
    ├── state.ts
    ├── types.ts
    ├── color.ts
    └── payload.ts
├── server
    ├── tsconfig.json
    └── api
    │   └── get.ts
├── plugins
    └── floating-vue.ts
├── tsconfig.json
├── netlify.toml
├── .vscode
    ├── extensions.json
    └── settings.json
├── pages
    ├── index.vue
    ├── rules.vue
    └── configs.vue
├── components
    ├── GlobItem.vue
    ├── SummarizeItem.vue
    ├── ColorizedConfigName.ts
    ├── RuleLevelIcon.vue
    ├── OptionSelectGroup.vue
    ├── ColorizedRuleName.vue
    ├── RuleStateItem.vue
    ├── RuleList.vue
    ├── NavBar.vue
    ├── RuleItem.vue
    └── ConfigItem.vue
├── eslint.config.js
├── bin.mjs
├── patches
    └── nitropack@2.9.4.patch
├── styles
    └── global.css
├── LICENSE
├── uno.config.ts
├── app.vue
├── public
    └── favicon.svg
├── nuxt.config.ts
├── README.md
└── package.json


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [antfu]
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | dist
4 | .output
5 | .nuxt
6 | .env
7 | .idea/
8 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | shell-emulator=true
4 | 


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "installDependencies": true,
3 |   "startCommand": "npm run dev"
4 | }
5 | 


--------------------------------------------------------------------------------
/composables/dark.ts:
--------------------------------------------------------------------------------
1 | export const isDark = useDark()
2 | 
3 | export function toggleDark() {
4 |   isDark.value = !isDark.value
5 | }
6 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json",
3 |   "compilerOptions": {
4 |     "moduleResolution": "Bundler"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/plugins/floating-vue.ts:
--------------------------------------------------------------------------------
1 | import FloatingVue from 'floating-vue'
2 | 
3 | export default defineNuxtPlugin((nuxtApp) => {
4 |   nuxtApp.vueApp.use(FloatingVue)
5 | })
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json",
3 |   "compilerOptions": {
4 |     "moduleResolution": "Bundler",
5 |     "resolveJsonModule": true
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 | publish = "dist"
 3 | command = "pnpm run build"
 4 | 
 5 | [build.environment]
 6 | NODE_VERSION = "16"
 7 | 
 8 | [[redirects]]
 9 | from = "/*"
10 | to = "/index.html"
11 | status = 200
12 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "antfu.iconify",
 4 |     "antfu.unocss",
 5 |     "antfu.goto-alias",
 6 |     "csstools.postcss",
 7 |     "dbaeumer.vscode-eslint",
 8 |     "vue.volar"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useRouter } from '#app/composables/router'
 3 | 
 4 | const router = useRouter()
 5 | router.replace('/configs')
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div>
10 |     <slot />
11 |   </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/GlobItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Linter } from 'eslint'
 3 | 
 4 | defineProps<{
 5 |   glob: Linter.FlatConfigFileSpec | Linter.FlatConfigFileSpec[]
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <div border="~ base rounded" bg-gray:5 px2 font-mono op75>
11 |     {{ glob }}
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/composables/strings.ts:
--------------------------------------------------------------------------------
 1 | export function nth(n: number) {
 2 |   if (n === 1)
 3 |     return '1st'
 4 |   if (n === 2)
 5 |     return '2nd'
 6 |   if (n === 3)
 7 |     return '3rd'
 8 |   return `${n}th`
 9 | }
10 | 
11 | export function stringifyUnquoted(obj: any) {
12 |   return JSON.stringify(obj, null, 2)
13 |     .replace(/"([\w\d_]+)":/g, '$1:')
14 |     .replace(/"/g, '\'')
15 | }
16 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import antfu from '@antfu/eslint-config'
 3 | import nuxt from './.nuxt/eslint.config.mjs'
 4 | 
 5 | export default nuxt()
 6 |   .prepend(
 7 |     antfu(
 8 |       {
 9 |         unocss: true,
10 |         vue: {
11 |           overrides: {
12 |             'vue/no-extra-parens': 'off',
13 |           },
14 |         },
15 |       },
16 |     ),
17 |   )
18 | 


--------------------------------------------------------------------------------
/bin.mjs:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | import process from 'node:process'
 4 | import open from 'open'
 5 | import { getPort } from 'get-port-please'
 6 | 
 7 | process.env.HOST = process.env.HOST || '127.0.0.1'
 8 | process.env.PORT = process.env.PORT || await getPort({ port: 7777 })
 9 | 
10 | await Promise.all([
11 |   import('./dist/server/index.mjs'),
12 |   process.env.NO_OPEN
13 |     ? undefined
14 |     : open(`http://localhost:${process.env.PORT}`),
15 | ])
16 | 


--------------------------------------------------------------------------------
/components/SummarizeItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps<{
 3 |   icon: string
 4 |   number: number
 5 |   color: string
 6 |   title: string
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div flex="~ gap-2" :title="`${props.number} ${props.title}`" :class="props.number ? props.color : 'op35'">
12 |     <div :class="props.icon" />
13 |     <span min-w-6 :class="`text-${props.color}`">{{ props.number || '-' }}</span>
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/patches/nitropack@2.9.4.patch:
--------------------------------------------------------------------------------
 1 | diff --git a/dist/nitro.mjs b/dist/nitro.mjs
 2 | index 08c4200200397e51bceffbabce5ac39cc2c441bb..2e29d65ac97bedc17f88a75ab73c231ae9260a14 100644
 3 | --- a/dist/nitro.mjs
 4 | +++ b/dist/nitro.mjs
 5 | @@ -454,7 +454,7 @@ function externals$1(opts) {
 6 |        if (opts.trace === false) {
 7 |          return {
 8 |            ...resolved,
 9 | -          id: isAbsolute(resolved.id) ? normalizeid(resolved.id) : resolved.id,
10 | +          id: originalId,
11 |            external: true
12 |          };
13 |        }
14 | 


--------------------------------------------------------------------------------
/composables/rules.ts:
--------------------------------------------------------------------------------
 1 | import type { Linter } from 'eslint'
 2 | 
 3 | export function getRuleLevel(level: Linter.RuleEntry | undefined) {
 4 |   const first = Array.isArray(level) ? level[0] : level
 5 |   switch (first) {
 6 |     case 0:
 7 |     case 'off':
 8 |       return 'off'
 9 |     case 1:
10 |     case 'warn':
11 |       return 'warn'
12 |     case 2:
13 |     case 'error':
14 |       return 'error'
15 |   }
16 | }
17 | 
18 | export function getRuleOptions<T extends any[]>(level: Linter.RuleEntry<T> | undefined): T | undefined {
19 |   if (Array.isArray(level))
20 |     return level.slice(1) as T
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | permissions:
 4 |   contents: write
 5 | 
 6 | on:
 7 |   push:
 8 |     tags:
 9 |       - 'v*'
10 | 
11 | jobs:
12 |   release:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v3
16 |         with:
17 |           fetch-depth: 0
18 | 
19 |       - name: Install pnpm
20 |         uses: pnpm/action-setup@v2
21 | 
22 |       - name: Set node
23 |         uses: actions/setup-node@v3
24 |         with:
25 |           node-version: lts/*
26 | 
27 |       - run: npx changelogithub
28 |         env:
29 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
30 | 


--------------------------------------------------------------------------------
/components/ColorizedConfigName.ts:
--------------------------------------------------------------------------------
 1 | export default defineComponent({
 2 |   props: {
 3 |     name: {
 4 |       type: String,
 5 |       required: true,
 6 |     },
 7 |   },
 8 |   setup(props) {
 9 |     const parts = computed(() => props.name.split(/([:/])/g).filter(Boolean))
10 |     return () => h('span', parts.value.map((part, i) => {
11 |       return h(
12 |         'span',
13 |         [':', '/'].includes(part)
14 |           ? { style: { opacity: 0.4 } }
15 |           : i !== parts.value.length - 1
16 |             ? { style: { color: getPluginColor(part) } }
17 |             : null,
18 |         part,
19 |       )
20 |     }))
21 |   },
22 | })
23 | 


--------------------------------------------------------------------------------
/composables/state.ts:
--------------------------------------------------------------------------------
 1 | export const filtersConfigs = reactive<FiltersConfigsPage>({
 2 |   rule: '',
 3 |   filepath: '',
 4 | })
 5 | 
 6 | export const filtersRules = reactive({
 7 |   plugin: '',
 8 |   search: '',
 9 |   state: 'using' as 'using' | 'unused' | 'overloads' | '',
10 |   status: 'active' as 'deprecated' | 'active' | '',
11 |   fixable: null as boolean | null,
12 | })
13 | 
14 | export const stateStorage = useLocalStorage(
15 |   'eslint-config-viewer',
16 |   {
17 |     viewType: 'list' as 'list' | 'grid',
18 |     viewFileMatchType: 'configs' as 'configs' | 'merged',
19 |     showSpecificOnly: false,
20 |   },
21 |   { mergeDefaults: true },
22 | )
23 | 


--------------------------------------------------------------------------------
/components/RuleLevelIcon.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue'
 3 | import type { RuleLevel } from '../composables/types'
 4 | import { nth } from '~/composables/strings'
 5 | 
 6 | const props = defineProps<{
 7 |   level: RuleLevel
 8 |   configIndex?: number
 9 |   class?: string
10 | }>()
11 | 
12 | const title = computed(() => {
13 |   if (props.configIndex == null)
14 |     return `Enabled as '${props.level}'`
15 |   return `Enabled as '${props.level}', in the ${nth(props.configIndex + 1)} config item`
16 | })
17 | </script>
18 | 
19 | <template>
20 |   <div
21 |     v-if="level === 'error'" i-ph-warning-circle-duotone text-red op80
22 |     :title="title" :class="props.class"
23 |   />
24 |   <div
25 |     v-if="level === 'warn'" i-ph-warning-duotone text-yellow5 op80 dark:text-yellow4
26 |     :title="title" :class="props.class"
27 |   />
28 |   <div
29 |     v-if="level === 'off'" i-ph-circle-half-tilt-duotone text-gray op50
30 |     :title="title" :class="props.class"
31 |   />
32 | </template>
33 | 


--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
 1 | html, body , #__nuxt{
 2 |   height: 100vh;
 3 |   margin: 0;
 4 |   padding: 0;
 5 | }
 6 | 
 7 | html.dark {
 8 |   background: #111;
 9 |   color: white;
10 |   color-scheme: dark;
11 | }
12 | 
13 | .shiki {
14 |   font-size: 15px;
15 | }
16 | 
17 | .shiki span {
18 |   color: var(--shiki-light);
19 | }
20 | 
21 | html.dark .shiki span {
22 |   color: var(--shiki-dark);
23 | }
24 | 
25 | /* Overrides Floating Vue */
26 | .v-popper--theme-dropdown .v-popper__inner,
27 | .v-popper--theme-tooltip .v-popper__inner {
28 |   --at-apply: bg-base text-black dark:text-white rounded border border-base shadow;
29 |   box-shadow: 0 6px 30px #0000001a;
30 | }
31 | 
32 | .v-popper--theme-tooltip .v-popper__arrow-inner,
33 | .v-popper--theme-dropdown .v-popper__arrow-inner {
34 |   visibility: visible;
35 |   --at-apply: border-white dark:border-hex-121212;
36 | }
37 | 
38 | .v-popper--theme-tooltip .v-popper__arrow-outer,
39 | .v-popper--theme-dropdown .v-popper__arrow-outer {
40 |   --at-apply: border-base;
41 | }
42 | 
43 | .v-popper--theme-tooltip.v-popper--shown,
44 | .v-popper--theme-tooltip.v-popper--shown * {
45 |   transition: none !important;
46 | }
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021-PRESENT Anthony Fu<https://github.com/antfu>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/OptionSelectGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineModel } from 'vue'
 3 | 
 4 | defineProps<{
 5 |   options: readonly string[] | number[]
 6 |   titles?: string[]
 7 |   classes?: string[]
 8 |   props?: any[]
 9 | }>()
10 | 
11 | const value = defineModel<string | number>('modelValue', {
12 |   type: [String, Number],
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <fieldset flex="~ inline gap-1 wrap" of-hidden text-sm>
18 |     <label
19 |       v-for="i, idx of options" :key="i"
20 |       border="~ base rounded-full" relative hover:bg-hover px2.5 py0.5
21 |       :class="[
22 |         i === value ? 'bg-active' : '',
23 |         props?.[idx]?.class || '',
24 |       ]"
25 |       v-bind="props?.[idx]"
26 |       :title="titles?.[idx]"
27 |     >
28 |       <div
29 |         :class="[
30 |           i === value ? '' : 'op35',
31 |           titles?.[idx] ? '' : 'capitalize',
32 |           classes?.[idx] || '',
33 |         ]"
34 |       >{{ titles?.[idx] ?? i }}</div>
35 |       <input
36 |         v-model="value" type="radio" :value="i"
37 |         :title="titles?.[idx]"
38 |         absolute inset-0 op-0.1
39 |       >
40 |     </label>
41 |   </fieldset>
42 | </template>
43 | 


--------------------------------------------------------------------------------
/composables/types.ts:
--------------------------------------------------------------------------------
 1 | import type { Linter } from 'eslint'
 2 | import type { RuleMetaData } from '@typescript-eslint/utils/ts-eslint'
 3 | 
 4 | export interface FlatESLintConfigItem extends Linter.FlatConfig {
 5 |   name?: string
 6 | }
 7 | 
 8 | export type RuleLevel = 'off' | 'warn' | 'error'
 9 | 
10 | export interface Payload {
11 |   cwd: string
12 |   configs: FlatESLintConfigItem[]
13 |   files: string[]
14 |   rules: Record<string, RuleInfo>
15 |   meta: PayloadMeta
16 | }
17 | 
18 | export interface ErrorInfo {
19 |   error: string
20 |   message?: string
21 | }
22 | 
23 | export interface ResolvedPayload extends Payload {
24 |   ruleStateMap: Map<string, RuleConfigStates>
25 | }
26 | 
27 | export interface PayloadMeta {
28 |   wsPort: number
29 |   lastUpdate: number
30 |   configPath: string
31 | }
32 | 
33 | export interface RuleInfo extends RuleMetaData<any, any> {
34 |   name: string
35 |   plugin: string
36 | }
37 | 
38 | export interface FiltersConfigsPage {
39 |   rule?: string
40 |   filepath?: string
41 | }
42 | 
43 | export interface RuleConfigState {
44 |   name: string
45 |   configIndex: number
46 |   level: RuleLevel
47 |   options?: any[]
48 | }
49 | 
50 | export type RuleConfigStates = RuleConfigState[]
51 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Enable the ESlint flat config support
 3 |   "eslint.experimental.useFlatConfig": true,
 4 | 
 5 |   // Disable the default formatter, use eslint instead
 6 |   "prettier.enable": false,
 7 |   "editor.formatOnSave": false,
 8 | 
 9 |   // Auto fix
10 |   "editor.codeActionsOnSave": {
11 |     "source.fixAll": "explicit",
12 |     "source.organizeImports": "never"
13 |   },
14 | 
15 |   // Silent the stylistic rules in you IDE, but still auto fix them
16 |   "eslint.rules.customizations": [
17 |     { "rule": "style/*", "severity": "off" },
18 |     { "rule": "*-indent", "severity": "off" },
19 |     { "rule": "*-spacing", "severity": "off" },
20 |     { "rule": "*-spaces", "severity": "off" },
21 |     { "rule": "*-order", "severity": "off" },
22 |     { "rule": "*-dangle", "severity": "off" },
23 |     { "rule": "*-newline", "severity": "off" },
24 |     { "rule": "*quotes", "severity": "off" },
25 |     { "rule": "*semi", "severity": "off" }
26 |   ],
27 | 
28 |   // Enable eslint for all supported languages
29 |   "eslint.validate": [
30 |     "javascript",
31 |     "javascriptreact",
32 |     "typescript",
33 |     "typescriptreact",
34 |     "vue",
35 |     "html",
36 |     "markdown",
37 |     "json",
38 |     "jsonc",
39 |     "yaml"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/composables/color.ts:
--------------------------------------------------------------------------------
 1 | import { isDark } from './dark'
 2 | 
 3 | const pluginColorMap = {
 4 |   'ts': '#34879f',
 5 |   'typescript': '#34879f',
 6 |   '@typescript-eslint': '#34879f',
 7 |   'vue': '#41b883',
 8 |   'nuxt': '#41b883',
 9 |   'svelte': '#ff3e00',
10 |   'react': '#61dafb',
11 |   'node': '#026e00',
12 |   'n': '#026e00',
13 |   'js': '#f1e05a',
14 |   'javascript': '#f1e05a',
15 |   'import': '#e36209',
16 |   'style': '#ffac45',
17 |   'antfu': '#30b8af',
18 |   'markdown': '#a8508f',
19 | } as Record<string, string>
20 | 
21 | export function getHashColorFromString(
22 |   name: string,
23 |   saturation = 65,
24 |   lightness = isDark.value ? 60 : 40,
25 |   opacity: number | string = 1,
26 | ) {
27 |   let hash = 0
28 |   for (let i = 0; i < name.length; i++)
29 |     hash = name.charCodeAt(i) + ((hash << 5) - hash)
30 |   const h = hash % 360
31 |   return `hsla(${h}, ${saturation}%, ${lightness}%, ${opacity})`
32 | }
33 | 
34 | export function getPluginColor(name: string, opacity = 1) {
35 |   if (pluginColorMap[name]) {
36 |     if (opacity === 1)
37 |       return pluginColorMap[name]
38 |     const opacityHex = Math.floor(opacity * 255).toString(16).padStart(2, '0')
39 |     return pluginColorMap[name] + opacityHex
40 |   }
41 |   return getHashColorFromString(name, undefined, undefined, opacity)
42 | }
43 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   lint:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v3
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v2
20 | 
21 |       - name: Set node
22 |         uses: actions/setup-node@v3
23 |         with:
24 |           node-version: lts/*
25 | 
26 |       - name: Setup
27 |         run: npm i -g @antfu/ni
28 | 
29 |       - name: Install
30 |         run: nci
31 | 
32 |       - name: Lint
33 |         run: nr lint
34 | 
35 |       - name: Typecheck
36 |         run: nr typecheck
37 | 
38 |   test:
39 |     runs-on: ${{ matrix.os }}
40 | 
41 |     strategy:
42 |       matrix:
43 |         node: [lts/*]
44 |         os: [ubuntu-latest, windows-latest, macos-latest]
45 |       fail-fast: false
46 | 
47 |     steps:
48 |       - uses: actions/checkout@v3
49 | 
50 |       - name: Install pnpm
51 |         uses: pnpm/action-setup@v2
52 | 
53 |       - name: Set node ${{ matrix.node }}
54 |         uses: actions/setup-node@v3
55 |         with:
56 |           node-version: ${{ matrix.node }}
57 | 
58 |       - name: Setup
59 |         run: npm i -g @antfu/ni
60 | 
61 |       - name: Install
62 |         run: nci
63 | 
64 |       - name: Build
65 |         run: nr build
66 | 
67 |       # - name: Test
68 |       #   run: nr test
69 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineConfig,
 3 |   presetAttributify,
 4 |   presetIcons,
 5 |   presetTypography,
 6 |   presetUno,
 7 |   presetWebFonts,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from 'unocss'
11 | 
12 | export default defineConfig({
13 |   shortcuts: {
14 |     'bg-base': 'bg-white dark:bg-#111',
15 |     'bg-glass': 'bg-white:75 dark:bg-#111:75 backdrop-blur-5',
16 |     'bg-hover': 'bg-gray:5',
17 |     'bg-active': 'bg-gray:10',
18 |     'border-base': 'border-#aaa3',
19 |     'border-box': 'border border-base rounded',
20 |     'text-button': 'border-box bg-hover hover:bg-active px3 py1 flex gap-1 items-center justify-center',
21 |     'icon-button': 'border-box bg-hover hover:bg-active p1',
22 |     'icon-button-sm': 'icon-button p0.5 text-sm',
23 |     'action-button': 'border border-base rounded flex gap-2 items-center px2 py1 text-sm op75 hover:op100 hover:bg-hover',
24 |   },
25 |   theme: {
26 |     colors: {
27 |       primary: '#4B32C3',
28 |       accent: '#8080F2',
29 |     },
30 |   },
31 |   presets: [
32 |     presetUno(),
33 |     presetAttributify(),
34 |     presetIcons({
35 |       scale: 1.2,
36 |     }),
37 |     presetTypography(),
38 |     presetWebFonts({
39 |       fonts: {
40 |         sans: 'DM Sans',
41 |         serif: 'DM Serif Display',
42 |         mono: 'DM Mono',
43 |       },
44 |     }),
45 |   ],
46 |   transformers: [
47 |     transformerDirectives(),
48 |     transformerVariantGroup(),
49 |   ],
50 | })
51 | 


--------------------------------------------------------------------------------
/components/ColorizedRuleName.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue'
 3 | 
 4 | const props = defineProps<{
 5 |   name: string
 6 |   prefix?: string
 7 |   url?: string
 8 |   as?: string
 9 |   deprecated?: boolean
10 |   borderless?: boolean
11 |   break?: boolean
12 | }>()
13 | 
14 | const parsed = computed(() => {
15 |   if (props.prefix) {
16 |     if (props.name.startsWith(props.prefix)) {
17 |       return {
18 |         scope: props.prefix,
19 |         name: props.name.slice(props.prefix.length).replace(/^\/+/, ''),
20 |       }
21 |     }
22 |     else {
23 |       return {
24 |         scope: undefined,
25 |         name: props.name,
26 |       }
27 |     }
28 |   }
29 |   const parts = props.name.split('/')
30 |   if (parts.length === 1) {
31 |     return {
32 |       scope: undefined,
33 |       name: parts[0],
34 |     }
35 |   }
36 |   return {
37 |     scope: parts[0],
38 |     name: parts.slice(1).join('/'),
39 |   }
40 | })
41 | </script>
42 | 
43 | <template>
44 |   <component
45 |     :is="as || 'div'"
46 |     ws-nowrap font-mono of-hidden text-ellipsis
47 |     :class="[
48 |       deprecated ? 'line-through' : '',
49 |       borderless ? '' : 'border border-base px2 bg-gray:5 rounded',
50 |     ]"
51 |   >
52 |     <span v-if="parsed.scope" :style="{ color: getPluginColor(parsed.scope) }">{{ parsed.scope }}</span>
53 |     <span v-if="parsed.scope" op30>/</span>
54 |     <br v-if="parsed.scope && props.break">
55 |     <span op75>{{ parsed.name }}</span>
56 |   </component>
57 | </template>
58 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useHead } from '@unhead/vue'
 3 | import { errorInfo } from './composables/payload'
 4 | import 'floating-vue/dist/style.css'
 5 | import './styles/global.css'
 6 | import './composables/dark'
 7 | import { version } from './package.json'
 8 | import { ensureDataFetch } from '~/composables/payload'
 9 | 
10 | useHead({
11 |   title: 'ESLint Flat Config Viewer',
12 | })
13 | 
14 | await ensureDataFetch()
15 | </script>
16 | 
17 | <template>
18 |   <div v-if="errorInfo" grid h-full w-full place-content-center whitespace-pre-line>
19 |     <div font-200 text-xl mb6>
20 |       <a
21 |         href="https://github.com/antfu/eslint-flat-config-viewer" target="_blank"
22 |         flex="inline gap-2 items-center" mr1
23 |       >
24 |         <img src="/favicon.svg" inline-block h-1em>
25 |         <span op75>ESLint Config Viewer</span>
26 |       </a>
27 |       <sup op50>v{{ version }}</sup>
28 |     </div>
29 | 
30 |     <div text-2xl text-red5 font-bold>
31 |       Failed to load <span rounded bg-red:5 px2>eslint.config.js</span><br>
32 |     </div>
33 | 
34 |     <div text-lg text-red font-mono>
35 |       {{ errorInfo.error }}
36 |     </div>
37 | 
38 |     <div op50 mt6>
39 |       Note that
40 |       <a href="https://github.com/antfu/eslint-flat-config-viewer" target="_blank" hover:underline>config viewer</a>
41 |       only works with the <a href="https://eslint.org/docs/latest/use/configure/configuration-files-new" target="_blank" font-bold hover:underline>new flat config format</a>.
42 |     </div>
43 |   </div>
44 |   <div v-else px14 py10>
45 |     <NavBar />
46 |     <NuxtPage />
47 |   </div>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_8_7)">
 3 | <path d="M441.23 486.379C452.945 498.095 471.94 498.095 483.656 486.379C495.372 474.663 495.372 455.668 483.656 443.953L441.23 486.379ZM483.656 443.953L379.014 339.311L336.588 381.737L441.23 486.379L483.656 443.953Z" fill="#8080F2"/>
 4 | <path d="M159.743 149.857L255.316 124.264C256.492 123.949 257.729 123.949 258.905 124.264C260.081 124.579 261.153 125.198 262.013 126.058L331.986 196.01C332.846 196.87 333.465 197.942 333.78 199.117C334.095 200.292 334.095 201.529 333.781 202.704L308.18 298.249C307.539 300.639 305.669 302.506 303.278 303.149L207.705 328.742C206.529 329.057 205.291 329.057 204.115 328.742C202.94 328.427 201.868 327.808 201.007 326.947L131.035 256.996C130.175 256.136 129.556 255.064 129.241 253.889C128.925 252.714 128.925 251.477 129.24 250.302L154.841 154.756C155.484 152.364 157.351 150.5 159.743 149.857Z" fill="#8080F2"/>
 5 | <path d="M448.193 276.171L395.325 77.4659C393.397 70.2775 387.984 63.9046 380.793 61.9776L182.784 8.92143C175.593 6.99443 167.716 9.80644 162.452 15.0679L17.4171 160.338C12.1529 165.601 10.0471 173.46 11.9746 180.65L65.2194 377.944C67.1473 385.132 72.9409 390.096 80.1326 392.023L278.139 445.078C285.331 447.005 292.803 445.699 298.065 440.435L442.9 295.919C448.167 290.66 450.123 283.36 448.191 276.171L448.193 276.171ZM344.028 336.999C343.35 339.529 341.199 341.463 338.665 342.143L193.068 381.084C191.815 381.415 190.498 381.412 189.246 381.077C187.995 380.742 186.853 380.085 185.934 379.172L79.2165 272.624C77.3629 270.769 76.4546 268.016 77.1334 265.483L116.111 120.017C116.79 117.483 118.93 115.55 121.464 114.871L267.055 75.9261C268.307 75.5939 269.624 75.5955 270.876 75.9308C272.127 76.2661 273.269 76.9234 274.187 77.8371L380.911 184.389C382.768 186.245 383.685 188.998 383.006 191.531L344.028 336.999Z" fill="#4B32C3"/>
 6 | </g>
 7 | <defs>
 8 | <clipPath id="clip0_8_7">
 9 | <rect width="500" height="500" fill="white"/>
10 | </clipPath>
11 | </defs>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import pkg from './package.json'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   ssr: false,
 5 | 
 6 |   modules: [
 7 |     '@vueuse/nuxt',
 8 |     '@unocss/nuxt',
 9 |     '@nuxt/eslint',
10 |     'nuxt-shiki',
11 |     'nuxt-eslint-auto-explicit-import',
12 |   ],
13 | 
14 |   eslint: {
15 |     config: {
16 |       standalone: false,
17 |     },
18 |   },
19 | 
20 |   experimental: {
21 |     typedPages: true,
22 |   },
23 | 
24 |   features: {
25 |     inlineStyles: false,
26 |   },
27 | 
28 |   shiki: {
29 |     bundledLangs: ['js', 'ts'],
30 |     bundledThemes: ['vitesse-light', 'vitesse-dark'],
31 |     highlightOptions: {
32 |       themes: {
33 |         light: 'vitesse-light',
34 |         dark: 'vitesse-dark',
35 |       },
36 |       defaultColor: false,
37 |     },
38 |   },
39 | 
40 |   css: [
41 |     '@unocss/reset/tailwind.css',
42 |   ],
43 | 
44 |   nitro: {
45 |     preset: 'node-server',
46 |     output: {
47 |       dir: './dist',
48 |     },
49 |     routeRules: {
50 |       '/**': {
51 |         cors: true,
52 |         headers: {
53 |           'Access-Control-Allow-Origin': '*',
54 |           'Access-Control-Allow-Methods': '*',
55 |           'Access-Control-Allow-Credentials': 'true',
56 |           'Access-Control-Allow-Headers': '*',
57 |           'Access-Control-Expose-Headers': '*',
58 |         },
59 |       },
60 |     },
61 |     prerender: {
62 |       routes: ['/'],
63 |     },
64 |     sourceMap: false,
65 |     externals: {
66 |       trace: false,
67 |       external: [
68 |         ...Object.keys(pkg.dependencies),
69 |         ...Object.keys(pkg.peerDependencies),
70 |       ],
71 |     },
72 |   },
73 | 
74 |   app: {
75 |     head: {
76 |       viewport: 'width=device-width,initial-scale=1',
77 |       link: [
78 |         { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
79 |       ],
80 |     },
81 |   },
82 | 
83 |   vite: {
84 |     vue: {
85 |       script: {
86 |         defineModel: true,
87 |       },
88 |     },
89 |   },
90 | 
91 |   devtools: {
92 |     enabled: true,
93 |   },
94 | })
95 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > [!IMPORTANT]
 2 | > This project is now the official [`@eslint/config-inspector`](https://github.com/eslint/config-inspector). Please migrate to the new package for future updates and improvements. This repository is archived.
 3 | 
 4 | -----
 5 | 
 6 | <img src="./public/favicon.svg" width="100" height="100"><br>
 7 | 
 8 | # ESLint Flat Config Viewer
 9 | 
10 | [![npm version][npm-version-src]][npm-version-href]
11 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
12 | 
13 | A visual tool to help you view and understand your [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new).
14 | 
15 | <img width="1199" alt="Screenshot" src="https://github.com/antfu/eslint-flat-config-viewer/assets/11247099/f386563a-c655-458e-a2c3-0af19ebec958">
16 | <img width="1199" alt="Screenshot" src="https://github.com/antfu/eslint-flat-config-viewer/assets/11247099/44edeb05-02b3-4bca-8da6-768984e8d829">
17 | 
18 | ## Usage
19 | 
20 | Change directory to your project root that contains `eslint.config.js` and run:
21 | 
22 | ```bash
23 | npx eslint-flat-config-viewer
24 | ```
25 | 
26 | Goto http://localhost:7777/ to view your ESLint config. Whenever you update your ESLint config, the page will be updated automatically.
27 | 
28 | ---
29 | 
30 | Or play it in your browser:
31 | 
32 | [![](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/antfu/eslint-flat-config-viewer)
33 | 
34 | ## Sponsors
35 | 
36 | <p align="center">
37 |   <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
38 |     <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
39 |   </a>
40 | </p>
41 | 
42 | ## License
43 | 
44 | [MIT](./LICENSE) License © 2023-PRESENT [Anthony Fu](https://github.com/antfu)
45 | 
46 | <!-- Badges -->
47 | 
48 | [npm-version-src]: https://img.shields.io/npm/v/eslint-flat-config-viewer?style=flat&colorA=080f12&colorB=1fa669
49 | [npm-version-href]: https://npmjs.com/package/eslint-flat-config-viewer
50 | [npm-downloads-src]: https://img.shields.io/npm/dm/eslint-flat-config-viewer?style=flat&colorA=080f12&colorB=1fa669
51 | [npm-downloads-href]: https://npmjs.com/package/eslint-flat-config-viewer
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "eslint-flat-config-viewer",
 3 |   "type": "module",
 4 |   "version": "0.1.20",
 5 |   "packageManager": "pnpm@8.15.5",
 6 |   "description": "A visual tool to help you view and understand your ESLint Flat config",
 7 |   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
 8 |   "license": "MIT",
 9 |   "funding": "https://github.com/sponsors/antfu",
10 |   "homepage": "https://github.com/antfu/eslint-flat-config-viewer#readme",
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/antfu/eslint-flat-config-viewer.git"
14 |   },
15 |   "bugs": "https://github.com/antfu/eslint-flat-config-viewer/issues",
16 |   "bin": "./bin.mjs",
17 |   "files": [
18 |     "*.mjs",
19 |     "dist"
20 |   ],
21 |   "scripts": {
22 |     "build": "nuxi build",
23 |     "dev": "nuxi dev",
24 |     "prepare": "nuxi prepare",
25 |     "start": "node bin.mjs",
26 |     "prepublishOnly": "nuxi build",
27 |     "release": "bumpp && pnpm publish",
28 |     "lint": "nuxi prepare && eslint .",
29 |     "typecheck": "vue-tsc --noEmit"
30 |   },
31 |   "peerDependencies": {
32 |     "eslint": "^8.50.0"
33 |   },
34 |   "dependencies": {
35 |     "@unhead/shared": "^1.9.3",
36 |     "@unhead/ssr": "^1.9.3",
37 |     "chokidar": "^3.6.0",
38 |     "consola": "^3.2.3",
39 |     "devalue": "^4.3.2",
40 |     "fast-glob": "^3.3.2",
41 |     "get-port-please": "^3.1.2",
42 |     "jiti": "^1.21.0",
43 |     "minimatch": "^9.0.4",
44 |     "ofetch": "^1.3.4",
45 |     "open": "^10.1.0",
46 |     "unhead": "^1.9.3",
47 |     "vue": "^3.4.21",
48 |     "vue-bundle-renderer": "^2.0.0",
49 |     "ws": "^8.16.0"
50 |   },
51 |   "devDependencies": {
52 |     "@antfu/eslint-config": "^2.11.5",
53 |     "@iconify-json/carbon": "^1.1.31",
54 |     "@iconify-json/ph": "^1.1.11",
55 |     "@iconify-json/twemoji": "^1.1.15",
56 |     "@nuxt/eslint": "0.3.0-beta.6",
57 |     "@types/ws": "^8.5.10",
58 |     "@typescript-eslint/utils": "^7.4.0",
59 |     "@unocss/eslint-config": "^0.58.8",
60 |     "@unocss/nuxt": "^0.58.8",
61 |     "@vueuse/nuxt": "^10.9.0",
62 |     "bumpp": "^9.4.0",
63 |     "eslint": "^9.0.0-rc.0",
64 |     "floating-vue": "^5.2.2",
65 |     "fuse.js": "^7.0.0",
66 |     "nuxt": "^3.11.1",
67 |     "nuxt-eslint-auto-explicit-import": "^0.0.2",
68 |     "nuxt-shiki": "^0.2.1",
69 |     "typescript": "^5.4.3",
70 |     "vue-tsc": "^2.0.7"
71 |   },
72 |   "pnpm": {
73 |     "patchedDependencies": {
74 |       "nitropack@2.9.4": "patches/nitropack@2.9.4.patch"
75 |     }
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/components/RuleStateItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue'
 3 | import { stringifyUnquoted } from '../composables/strings'
 4 | import { filtersConfigs } from '../composables/state'
 5 | import { payload } from '../composables/payload'
 6 | import { useRouter } from '#app/composables/router'
 7 | import { nth } from '~/composables/strings'
 8 | import type { RuleConfigState } from '~/composables/types'
 9 | 
10 | const props = defineProps<{
11 |   state: RuleConfigState
12 |   isLocal?: boolean
13 | }>()
14 | 
15 | const colors = {
16 |   error: 'text-red',
17 |   warn: 'text-amber',
18 |   off: 'text-gray',
19 | }
20 | 
21 | const config = computed(() => payload.value.configs[props.state.configIndex])
22 | 
23 | const router = useRouter()
24 | function goto() {
25 |   filtersConfigs.rule = props.state.name
26 |   router.push('/configs')
27 | }
28 | </script>
29 | 
30 | <template>
31 |   <div min-w-100 p4 flex="~ col gap-2">
32 |     <div flex="~ gap-1 items-center">
33 |       <RuleLevelIcon
34 |         :level="state.level"
35 |         :config-index="state.configIndex"
36 |       />
37 |       <span v-if="state.level === 'off'" ml1 op50>Turned </span>
38 |       <span v-else ml1 op50>Set to </span>
39 |       <span font-mono :class="colors[state.level]">{{ state.level }}</span>
40 |       <template v-if="!isLocal">
41 |         <span op50>in the</span>
42 |         <button hover="underline" @click="goto()">
43 |           {{ nth(state.configIndex + 1) }}
44 |           <span op50> config item </span>
45 |           <span v-if="config.name" text-sm text-teal6 font-mono op75 dark:text-teal>({{ config.name }})</span>
46 |         </button>
47 |       </template>
48 |       <div v-else op50>
49 |         in this config
50 |       </div>
51 |     </div>
52 |     <div v-if="!isLocal" flex="~ gap-2">
53 |       <template v-if="config.files">
54 |         <div i-ph-file-magnifying-glass-duotone my1 flex-none op75 />
55 |         <div flex="~ col gap-2">
56 |           <div op50>
57 |             Applies to files matching
58 |           </div>
59 |           <div flex="~ gap-2 items-center wrap">
60 |             <GlobItem v-for="glob, idx of config.files" :key="idx" :glob="glob" />
61 |           </div>
62 |         </div>
63 |       </template>
64 |       <template v-else-if="config.rules">
65 |         <div i-ph-files-duotone my1 flex-none op75 />
66 |         <div op50>
67 |           Applied generally for all files
68 |         </div>
69 |       </template>
70 |     </div>
71 |     <template v-if="state.options?.length">
72 |       <div flex="~ gap-2 items-center">
73 |         <div i-ph-sliders-duotone my1 flex-none op75 />
74 |         <div op50>
75 |           Rule options
76 |         </div>
77 |       </div>
78 |       <Shiki lang="ts" :code="stringifyUnquoted(state.options)" rounded bg-hover p2 text-sm />
79 |     </template>
80 |   </div>
81 | </template>
82 | 


--------------------------------------------------------------------------------
/composables/payload.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | import { $fetch } from 'ofetch'
 3 | import type { ErrorInfo, Payload, ResolvedPayload } from '~/composables/types'
 4 | 
 5 | const LOG_NAME = '[ESLint Config Viewer]'
 6 | 
 7 | const data = ref<Payload>({
 8 |   rules: {},
 9 |   configs: [],
10 |   meta: {} as any,
11 |   files: [],
12 |   cwd: '',
13 | })
14 | 
15 | export const errorInfo = ref<ErrorInfo>()
16 | 
17 | function isErrorInfo(payload: Payload | ErrorInfo): payload is ErrorInfo {
18 |   return 'error' in payload
19 | }
20 | 
21 | async function get() {
22 |   const payload = await $fetch<Payload | ErrorInfo>('/api/get')
23 |   if (isErrorInfo(payload)) {
24 |     errorInfo.value = payload
25 |     return
26 |   }
27 |   errorInfo.value = undefined
28 |   data.value = payload
29 |   console.log(LOG_NAME, 'Config payload', payload)
30 |   return payload
31 | }
32 | 
33 | const _promises = get()
34 |   .then((payload) => {
35 |     if (!payload)
36 |       return
37 |     // Connect to WebSocket, listen for config changes
38 |     const ws = new WebSocket(`ws://${location.hostname}:${payload.meta.wsPort}`)
39 |     ws.addEventListener('message', async (event) => {
40 |       console.log(LOG_NAME, 'WebSocket message', event.data)
41 |       const payload = JSON.parse(event.data)
42 |       if (payload.type === 'config-change')
43 |         get()
44 |     })
45 |     ws.addEventListener('open', () => {
46 |       console.log(LOG_NAME, 'WebSocket connected')
47 |     })
48 |     ws.addEventListener('close', () => {
49 |       console.log(LOG_NAME, 'WebSocket closed')
50 |     })
51 |     ws.addEventListener('error', (error) => {
52 |       console.error(LOG_NAME, 'WebSocket error', error)
53 |     })
54 | 
55 |     return payload
56 |   })
57 | 
58 | export function ensureDataFetch() {
59 |   return _promises
60 | }
61 | 
62 | export const payload = computed(() => resolvePayload(data.value!))
63 | 
64 | export function getRuleFromName(name: string): RuleInfo | undefined {
65 |   return payload.value.rules[name]
66 | }
67 | 
68 | export function getRuleStates(name: string): RuleConfigStates | undefined {
69 |   return payload.value.ruleStateMap.get(name)
70 | }
71 | 
72 | export function resolvePayload(payload: Payload): ResolvedPayload {
73 |   const ruleStateMap = new Map<string, RuleConfigStates>()
74 |   payload.configs.forEach((config, index) => {
75 |     if (!config.rules)
76 |       return
77 |     Object.entries(config.rules).forEach(([name, raw]) => {
78 |       const value = getRuleLevel(raw)
79 |       if (!value)
80 |         return
81 |       const options = getRuleOptions(raw)
82 |       if (!ruleStateMap.has(name))
83 |         ruleStateMap.set(name, [])
84 |       ruleStateMap.get(name)!.push({
85 |         name,
86 |         configIndex: index,
87 |         level: value,
88 |         options,
89 |       })
90 |     })
91 |   })
92 | 
93 |   return {
94 |     ...payload,
95 |     ruleStateMap,
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/components/RuleList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Fragment, computed, defineComponent, h } from 'vue'
 3 | import type { Linter } from 'eslint'
 4 | import { getRuleFromName, payload } from '../composables/payload'
 5 | import { stateStorage } from '../composables/state'
 6 | import type { RuleInfo } from '../composables/types'
 7 | 
 8 | const props = defineProps<{
 9 |   rules: RuleInfo[] | Record<string, Linter.RuleEntry>
10 |   getBind?: (ruleName: string) => Record<string, any>
11 |   filter?: (ruleName: string) => boolean
12 | }>()
13 | 
14 | const names = computed(() => Array.isArray(props.rules) ? props.rules.map(i => i.name) : Object.keys(props.rules))
15 | const getRule = function (name: string) {
16 |   return Array.isArray(props.rules)
17 |     ? props.rules.find(i => i.name === name)
18 |     : getRuleFromName(name)!
19 | }
20 | const getValue = function (name: string) {
21 |   return Array.isArray(props.rules)
22 |     ? undefined
23 |     : props.rules[name]
24 | }
25 | 
26 | const containerClass = computed(() => {
27 |   if (stateStorage.value.viewType === 'list') {
28 |     if (Array.isArray(props.rules))
29 |       return 'grid grid-cols-[max-content_max-content_max-content_1fr] gap-x-2 gap-y-2 items-center'
30 |     else
31 |       return 'grid grid-cols-[max-content_max-content_max-content_1fr] gap-x-2 gap-y-2 items-center'
32 |   }
33 |   else {
34 |     return 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,350px),1fr))] gap-2'
35 |   }
36 | })
37 | 
38 | const Wrapper = defineComponent({
39 |   setup(_, { slots }) {
40 |     return () => stateStorage.value.viewType === 'list'
41 |       ? h(Fragment, slots.default?.())
42 |       : h('div', { class: 'relative border border-base max-w-full rounded-lg p4 py3 flex flex-col gap-2 of-hidden justify-start' }, slots.default?.())
43 |   },
44 | })
45 | </script>
46 | 
47 | <template>
48 |   <div :class="containerClass">
49 |     <template
50 |       v-for="name in names"
51 |       :key="name"
52 |     >
53 |       <Wrapper v-if="props.filter?.(name) !== false">
54 |         <RuleItem
55 |           :rule="getRule(name)!"
56 |           :rule-states="Array.isArray(rules) ? payload.ruleStateMap.get(name) || [] : undefined"
57 |           :grid-view="stateStorage.viewType === 'grid'"
58 |           :value="getValue(name)"
59 |           v-bind="getBind?.(name)"
60 |         >
61 |           <template #popup>
62 |             <slot name="popup" :rule-name="name" :value="getValue(name)">
63 |               <RuleStateItem
64 |                 v-for="state, idx of payload.ruleStateMap.get(name) || []"
65 |                 :key="idx"
66 |                 border="t base"
67 |                 :state="state"
68 |               />
69 |             </slot>
70 |           </template>
71 |           <template #popup-actions>
72 |             <slot name="popup-actions" :rule-name="name" />
73 |           </template>
74 |         </RuleItem>
75 |       </Wrapper>
76 |     </template>
77 |   </div>
78 | </template>
79 | 


--------------------------------------------------------------------------------
/components/NavBar.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed } from 'vue'
  3 | import { useTimeAgo } from '@vueuse/core'
  4 | import { stateStorage } from '../composables/state'
  5 | import { version } from '../package.json'
  6 | import { useRouter } from '#app/composables/router'
  7 | import { payload } from '~/composables/payload'
  8 | import { filtersRules as filters } from '~/composables/state'
  9 | 
 10 | const lastUpdate = useTimeAgo(() => payload.value.meta.lastUpdate)
 11 | 
 12 | const rules = computed(() => Object.values(payload.value.rules))
 13 | const deprecatedUsing = computed(() => rules.value
 14 |   .filter(rule => rule.deprecated && payload.value.ruleStateMap.get(rule.name)?.some(i => i.level !== 'off')))
 15 | 
 16 | const router = useRouter()
 17 | function showDeprecated() {
 18 |   filters.status = 'deprecated'
 19 |   filters.plugin = ''
 20 |   filters.state = 'using'
 21 |   filters.search = ''
 22 | 
 23 |   if (router.currentRoute.value.path !== '/rules')
 24 |     router.push('/rules')
 25 | }
 26 | 
 27 | function toggleRuleView() {
 28 |   stateStorage.value.viewType = stateStorage.value.viewType === 'list' ? 'grid' : 'list'
 29 | }
 30 | </script>
 31 | 
 32 | <template>
 33 |   <div text-3xl font-200>
 34 |     <a
 35 |       href="https://github.com/antfu/eslint-flat-config-viewer" target="_blank"
 36 |       flex="inline gap-2 items-center" mr1
 37 |     >
 38 |       <img src="/favicon.svg" inline-block h-1em> ESLint Flat Config Viewer
 39 |     </a>
 40 |     <div op50 font-mono text-base inline-block translate-y--5 ml1>
 41 |       v{{ version }}
 42 |     </div>
 43 |   </div>
 44 |   <div flex="~ gap-1 items-center" text-sm my1>
 45 |     <span font-mono op35>{{ payload.meta.configPath }}</span>
 46 |   </div>
 47 |   <div flex="~ gap-1 items-center wrap" text-sm>
 48 |     <span op50>Composed with</span>
 49 |     <span font-bold>{{ payload.configs.length }}</span>
 50 |     <span op50>config items, updated</span>
 51 |     <span op75>{{ lastUpdate }}</span>
 52 |   </div>
 53 |   <div flex="~ gap-3 items-center wrap" py4>
 54 |     <NuxtLink
 55 |       to="/configs" active-class="op100! bg-active"
 56 |       px3 py1 op50 border="~ base rounded"
 57 |       flex="~ gap-2 items-center"
 58 |     >
 59 |       <div i-ph-stack-duotone flex-none />
 60 |       Configs
 61 |     </NuxtLink>
 62 |     <NuxtLink
 63 |       to="/rules" active-class="op100! bg-active"
 64 |       px3 py1 op50 border="~ base rounded"
 65 |       flex="~ gap-2 items-center"
 66 |     >
 67 |       <div i-ph-list-dashes-duotone flex-none />
 68 |       Rules
 69 |     </NuxtLink>
 70 |     <button
 71 |       title="Toggle Dark Mode"
 72 |       i-ph-sun-dim-duotone dark:i-ph-moon-stars-duotone ml1 text-xl op50 hover:op75
 73 |       @click="toggleDark()"
 74 |     />
 75 |     <button
 76 |       title="Toggle Rule View"
 77 |       :class="stateStorage.viewType === 'list' ? 'i-ph-list-duotone' : 'i-ph-grid-four-duotone'"
 78 |       text-xl op50 hover:op75
 79 |       @click="toggleRuleView()"
 80 |     />
 81 |     <NuxtLink
 82 |       href="https://github.com/antfu/eslint-flat-config-viewer" target="_blank"
 83 |       i-carbon-logo-github text-lg op50 hover:op75
 84 |     />
 85 |     <template v-if="deprecatedUsing.length">
 86 |       <div w-1px border="l base" h-5 ml3 mr2 />
 87 |       <button
 88 |         to="/configs"
 89 |         border="~ orange/20 rounded-full"
 90 |         flex="~ gap-2 items-center"
 91 |         bg-orange:5 px3 py1 text-sm text-orange hover:bg-orange:10
 92 |         @click="showDeprecated"
 93 |       >
 94 |         <div i-ph-warning-duotone flex-none />
 95 |         Using {{ deprecatedUsing.length }} deprecated rules
 96 |       </button>
 97 |     </template>
 98 |   </div>
 99 | </template>
100 | 


--------------------------------------------------------------------------------
/components/RuleItem.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useClipboard } from '@vueuse/core'
  3 | import { getRuleLevel } from '../composables/rules'
  4 | import type { RuleConfigStates, RuleLevel } from '../composables/types'
  5 | import type { RuleInfo } from '~/composables/types'
  6 | 
  7 | const props = defineProps<{
  8 |   rule: RuleInfo
  9 |   ruleStates?: RuleConfigStates
 10 |   value?: any
 11 |   class?: string
 12 |   gridView?: boolean
 13 | }>()
 14 | 
 15 | const emit = defineEmits<{
 16 |   badgeClick: [MouseEvent]
 17 |   stateClick: [RuleLevel]
 18 | }>()
 19 | 
 20 | const { copy } = useClipboard()
 21 | 
 22 | function capitalize(str?: string) {
 23 |   if (!str)
 24 |     return str
 25 |   return str[0].toUpperCase() + str.slice(1)
 26 | }
 27 | </script>
 28 | 
 29 | <template>
 30 |   <div
 31 |     v-if="ruleStates"
 32 |     flex="~ items-center gap-0.5 justify-end" text-lg
 33 |     :class="gridView ? 'absolute top-2 right-2 flex-col' : ''"
 34 |   >
 35 |     <template v-for="s, idx of ruleStates" :key="idx">
 36 |       <VDropdown>
 37 |         <RuleLevelIcon
 38 |           :level="s.level"
 39 |           :config-index="s.configIndex"
 40 |         />
 41 |         <template #popper="{ shown }">
 42 |           <RuleStateItem v-if="shown" :state="s" />
 43 |         </template>
 44 |       </VDropdown>
 45 |     </template>
 46 |   </div>
 47 | 
 48 |   <div
 49 |     v-if="value != null"
 50 |     :class="[props.class, gridView ? 'absolute top-2 right-2 flex-col' : '']"
 51 |   >
 52 |     <RuleLevelIcon
 53 |       :level="getRuleLevel(value)!"
 54 |       :class="getRuleLevel(value) === 'error' ? '' : ''"
 55 |     />
 56 |   </div>
 57 | 
 58 |   <div :class="props.class">
 59 |     <VDropdown inline-block>
 60 |       <ColorizedRuleName
 61 |         :name="rule.name"
 62 |         :prefix="rule.plugin"
 63 |         :deprecated="rule.deprecated"
 64 |         :borderless="gridView"
 65 |         :break="gridView"
 66 |         text-start
 67 |         as="button"
 68 |         @click="e => emit('badgeClick', e)"
 69 |       />
 70 |       <template #popper="{ shown }">
 71 |         <div v-if="shown" max-h="50vh">
 72 |           <div flex="~ items-center gap-2" p3>
 73 |             <NuxtLink
 74 |               action-button
 75 |               :to="rule.docs?.url" target="_blank" rel="noopener noreferrer"
 76 |               title="Documentations"
 77 |             >
 78 |               <div i-ph-book-duotone />
 79 |               Documentations
 80 |             </NuxtLink>
 81 |             <button
 82 |               action-button
 83 |               title="Copy"
 84 |               @click="copy(rule.name)"
 85 |             >
 86 |               <div i-ph-copy-duotone />
 87 |               Copy name
 88 |             </button>
 89 |             <slot name="popup-actions" />
 90 |           </div>
 91 |           <slot name="popup" />
 92 |         </div>
 93 |       </template>
 94 |     </VDropdown>
 95 |   </div>
 96 | 
 97 |   <div v-if="!gridView">
 98 |     <div v-if="rule.fixable" title="Fixable" i-ph-wrench-duotone mx2 op25 />
 99 |   </div>
100 | 
101 |   <div :class="props.class" flex="~ gap-2 items-center">
102 |     <div
103 |       of-hidden text-ellipsis
104 |       :class="[
105 |         rule.deprecated ? 'line-through' : '',
106 |         gridView ? 'op50 text-sm' : 'op75',
107 |       ]"
108 |     >
109 |       {{ capitalize(rule.docs?.description) }}
110 |     </div>
111 |     <div v-if="!gridView && rule.deprecated" border="~ red/25 rounded" bg-red:5 px1 text-xs text-red>
112 |       DEPRECATED
113 |     </div>
114 |   </div>
115 | 
116 |   <div v-if="gridView && rule.deprecated" flex-auto justify-end flex flex-col items-start>
117 |     <div border="~ red/25 rounded" bg-red:5 px1 text-xs text-red>
118 |       DEPRECATED
119 |     </div>
120 |   </div>
121 | </template>
122 | 


--------------------------------------------------------------------------------
/pages/rules.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { debouncedWatch } from '@vueuse/core'
  3 | import { computed, ref } from 'vue'
  4 | import Fuse from 'fuse.js'
  5 | import { filtersRules as filters } from '~/composables/state'
  6 | import { payload } from '~/composables/payload'
  7 | 
  8 | const rules = computed(() => Object.values(payload.value.rules))
  9 | const pluginNames = computed(() => Array.from(new Set(rules.value.map(i => i.plugin))))
 10 | 
 11 | const conditionalFiltered = computed(() => {
 12 |   let conditional = rules.value
 13 | 
 14 |   if (filters.plugin) {
 15 |     conditional = conditional
 16 |       .filter(rule => rule.plugin === filters.plugin)
 17 |   }
 18 | 
 19 |   if (filters.fixable != null) {
 20 |     conditional = conditional
 21 |       .filter(rule => !!rule.fixable === filters.fixable)
 22 |   }
 23 | 
 24 |   switch (filters.state) {
 25 |     case 'using':
 26 |       conditional = conditional.filter(rule => payload.value.ruleStateMap.get(rule.name))
 27 |       break
 28 |     case 'unused':
 29 |       conditional = conditional.filter(rule => !payload.value.ruleStateMap.get(rule.name))
 30 |       break
 31 |     case 'overloads':
 32 |       conditional = conditional.filter(rule => (payload.value.ruleStateMap.get(rule.name)?.length || 0) > 1)
 33 |       break
 34 |   }
 35 | 
 36 |   switch (filters.status) {
 37 |     case 'active':
 38 |       conditional = conditional.filter(rule => !rule.deprecated)
 39 |       break
 40 |     case 'deprecated':
 41 |       conditional = conditional.filter(rule => rule.deprecated)
 42 |       break
 43 |   }
 44 | 
 45 |   return conditional
 46 | })
 47 | 
 48 | const fuse = computed(() => new Fuse(conditionalFiltered.value, {
 49 |   keys: ['name', 'docs.description'],
 50 |   threshold: 0.5,
 51 | }))
 52 | 
 53 | const filtered = ref(conditionalFiltered.value)
 54 | 
 55 | debouncedWatch(
 56 |   () => [filters.search, conditionalFiltered.value],
 57 |   () => {
 58 |     if (!filters.search)
 59 |       return filtered.value = conditionalFiltered.value
 60 |     filtered.value = fuse.value.search(filters.search).map(i => i.item)
 61 |   },
 62 |   { debounce: 200 },
 63 | )
 64 | const isDefaultFilters = computed(() => !(filters.search || filters.plugin || filters.state !== 'using' || filters.status !== 'active'))
 65 | 
 66 | function resetFilters() {
 67 |   filters.search = ''
 68 |   filters.plugin = ''
 69 |   filters.state = 'using'
 70 |   filters.status = 'active'
 71 | }
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div>
 76 |     <div py4 flex="~ col gap-2">
 77 |       <div relative flex>
 78 |         <input
 79 |           v-model="filters.search"
 80 |           placeholder="Search rules..."
 81 |           border="~ base rounded-full"
 82 |           w-full bg-transparent px3 py2 pl10 font-mono outline-none
 83 |         >
 84 |         <div absolute bottom-0 left-0 top-0 flex="~ items-center justify-center" p4 op50>
 85 |           <div i-ph-magnifying-glass-duotone />
 86 |         </div>
 87 |       </div>
 88 |       <div grid="~ cols-[max-content_1fr] gap-2" my2 items-center>
 89 |         <div text-right text-sm op50>
 90 |           Plugins
 91 |         </div>
 92 |         <OptionSelectGroup
 93 |           v-model="filters.plugin"
 94 |           :options="['', ...pluginNames]"
 95 |           :titles="['All', ...pluginNames]"
 96 |           :props="[{}, ...pluginNames.map(i => ({
 97 |             class: 'font-mono',
 98 |             style: filters.plugin === i ? {
 99 |               color: getPluginColor(i),
100 |               backgroundColor: getPluginColor(i, 0.1),
101 |             } : {},
102 |           }))]"
103 |         />
104 |         <div text-right text-sm op50>
105 |           Usage
106 |         </div>
107 |         <OptionSelectGroup
108 |           v-model="filters.state"
109 |           :options="['', 'using', 'overloads', 'unused']"
110 |           :titles="['All', 'Using', 'Overloaded', 'Unused']"
111 |         />
112 |         <div text-right text-sm op50>
113 |           State
114 |         </div>
115 |         <OptionSelectGroup
116 |           v-model="filters.status"
117 |           :options="['', 'active', 'deprecated']"
118 |           :titles="['All', 'Active', 'Deprecated']"
119 |         />
120 |       </div>
121 |     </div>
122 | 
123 |     <div flex="~ gap-2">
124 |       <div
125 |         flex="~ inline gap-2 items-center"
126 |         border="~ gray/20 rounded-full" bg-gray:10 px3 py1
127 |       >
128 |         <div i-ph-list-checks-duotone />
129 |         <span>{{ filtered.length }}</span>
130 |         <span op75>rules {{ isDefaultFilters ? 'enabled' : 'filtered' }}</span>
131 |         <span text-sm op50>out of {{ rules.length }} rules</span>
132 |       </div>
133 |       <button
134 |         v-if="!isDefaultFilters"
135 |         flex="~ inline gap-2 items-center"
136 |         border="~ purple/20 rounded-full" bg-purple:10 px3 py1
137 |         @click="resetFilters()"
138 |       >
139 |         <div i-ph-funnel-duotone text-purple />
140 |         <span op50>Clear Filter</span>
141 |         <button
142 |           i-ph-x ml--1 text-sm op25 hover:op100
143 |         />
144 |       </button>
145 |     </div>
146 |     <RuleList
147 |       my4
148 |       :rules="filtered"
149 |       :get-bind="(name: string) => ({ class: (payload.ruleStateMap.get(name)?.length || filters.state === 'unused') ? '' : 'op40' })"
150 |     />
151 |   </div>
152 | </template>
153 | 


--------------------------------------------------------------------------------
/server/api/get.ts:
--------------------------------------------------------------------------------
  1 | import process from 'node:process'
  2 | import fs from 'node:fs'
  3 | import JITI from 'jiti'
  4 | import { relative, resolve } from 'pathe'
  5 | import type { Linter } from 'eslint'
  6 | import chokidar from 'chokidar'
  7 | import { consola } from 'consola'
  8 | import type { WebSocket } from 'ws'
  9 | import { WebSocketServer } from 'ws'
 10 | import { getPort } from 'get-port-please'
 11 | import fg from 'fast-glob'
 12 | import type { Payload, RuleInfo } from '~/composables/types'
 13 | 
 14 | const configs = [
 15 |   'eslint.config.js',
 16 |   'eslint.config.mjs',
 17 |   'eslint.config.cjs',
 18 |   'eslint.config.ts',
 19 |   'eslint.config.mts',
 20 |   'eslint.config.cts',
 21 | ]
 22 | 
 23 | const readErrorWarning = `Failed to load \`eslint.config.js\`.
 24 | Note that \`eslint-flat-config-viewer\` only works with the flat config format:
 25 | https://eslint.org/docs/latest/use/configure/configuration-files-new`
 26 | 
 27 | export default lazyEventHandler(async () => {
 28 |   const wsPort = await getPort({ port: 7811, random: true })
 29 |   const wss = new WebSocketServer({
 30 |     port: wsPort,
 31 |   })
 32 |   const wsClients = new Set<WebSocket>()
 33 |   wss.on('connection', (ws) => {
 34 |     wsClients.add(ws)
 35 |     consola.log('Websocket client connected')
 36 |     ws.on('close', () => wsClients.delete(ws))
 37 |   })
 38 | 
 39 |   const cwd = process.cwd()
 40 |   const configPath = resolve(cwd, process.env.ESLINT_CONFIG || configs.find(i => fs.existsSync(resolve(cwd, i))) || configs[0])
 41 | 
 42 |   const jiti = JITI(cwd, {
 43 |     cache: false,
 44 |     interopDefault: true,
 45 |   })
 46 | 
 47 |   const eslintRules = await import(['eslint', 'use-at-your-own-risk'].join('/')).then(r => r.default.builtinRules)
 48 | 
 49 |   let invalidated = true
 50 |   let rawConfigs: Linter.FlatConfig[] = []
 51 |   let payload: Payload = undefined!
 52 | 
 53 |   const watcher = chokidar.watch([], {
 54 |     ignoreInitial: true,
 55 |     cwd: process.cwd(),
 56 |     disableGlobbing: true,
 57 |   })
 58 | 
 59 |   watcher.on('change', (path) => {
 60 |     invalidated = true
 61 |     consola.info('Config change detected', path)
 62 |     wsClients.forEach((ws) => {
 63 |       ws.send(JSON.stringify({
 64 |         type: 'config-change',
 65 |         path,
 66 |       }))
 67 |     })
 68 |   })
 69 | 
 70 |   async function readConfig() {
 71 |     Object.keys(jiti.cache).forEach(i => delete jiti.cache[i])
 72 |     const configExports = await jiti(configPath)
 73 |     rawConfigs = (configExports.default ?? configExports) as Linter.FlatConfig[]
 74 |     payload = await processConfig(rawConfigs)
 75 |     const deps = Object.keys(jiti.cache).map(i => i.replace(/\\/g, '/')).filter(i => !i.includes('/node_modules/'))
 76 |     watcher.add(deps)
 77 |     invalidated = false
 78 | 
 79 |     consola.success(`Read ESLint config from \`${relative(cwd, configPath)}\` with`, rawConfigs.length, 'configs and', Object.keys(payload.rules).length, 'rules')
 80 |   }
 81 | 
 82 |   async function processConfig(raw: Linter.FlatConfig[]): Promise<Payload> {
 83 |     const rulesMap = new Map<string, RuleInfo>()
 84 | 
 85 |     for (const [name, rule] of eslintRules.entries()) {
 86 |       rulesMap.set(name, {
 87 |         ...(rule as any).meta as any,
 88 |         name,
 89 |         plugin: 'eslint',
 90 |         schema: undefined,
 91 |         messages: undefined,
 92 |       })
 93 |     }
 94 | 
 95 |     for (const item of raw) {
 96 |       for (const [prefix, plugin] of Object.entries(item.plugins ?? {})) {
 97 |         for (const [name, rule] of Object.entries(plugin.rules ?? {})) {
 98 |           rulesMap.set(`${prefix}/${name}`, {
 99 |             ...(rule as any).meta as any,
100 |             name: `${prefix}/${name}`,
101 |             plugin: prefix,
102 |             schema: undefined,
103 |             messages: undefined,
104 |           })
105 |         }
106 |       }
107 |     }
108 | 
109 |     const rules = Object.fromEntries(rulesMap.entries())
110 |     const configs = raw.map((c): Linter.FlatConfig => {
111 |       return {
112 |         ...c,
113 |         plugins: c.plugins
114 |           ? Object.fromEntries(Object.entries(c.plugins ?? {}).map(([prefix]) => [prefix, {}]))
115 |           : undefined,
116 |         languageOptions: c.languageOptions
117 |           ? { ...c.languageOptions, parser: c.languageOptions.parser?.meta?.name as any }
118 |           : undefined,
119 |         processor: (c.processor as any)?.meta?.name,
120 |       }
121 |     })
122 | 
123 |     const files = await fg(
124 |       configs.flatMap(i => i.files ?? []).filter(i => typeof i === 'string') as string[],
125 |       {
126 |         cwd,
127 |         onlyFiles: true,
128 |         ignore: [
129 |           '**/node_modules/**',
130 |           ...configs.flatMap(i => i.ignores ?? []).filter(i => typeof i === 'string') as string[],
131 |         ],
132 |         deep: 5,
133 |       },
134 |     )
135 | 
136 |     return {
137 |       configs,
138 |       rules,
139 |       files,
140 |       cwd,
141 |       meta: {
142 |         lastUpdate: Date.now(),
143 |         wsPort,
144 |         configPath,
145 |       },
146 |     }
147 |   }
148 | 
149 |   return defineEventHandler(async () => {
150 |     try {
151 |       if (invalidated)
152 |         await readConfig()
153 |       return payload
154 |     }
155 |     catch (e) {
156 |       consola.error(readErrorWarning)
157 |       consola.error(e)
158 |       return {
159 |         message: readErrorWarning,
160 |         error: String(e),
161 |       }
162 |     }
163 |   })
164 | })
165 | 


--------------------------------------------------------------------------------
/components/ConfigItem.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed, defineModel } from 'vue'
  3 | import { stringifyUnquoted } from '../composables/strings'
  4 | import { filtersRules, stateStorage } from '../composables/state'
  5 | import { useRouter } from '#app/composables/router'
  6 | import type { FiltersConfigsPage, FlatESLintConfigItem } from '~/composables/types'
  7 | 
  8 | const props = defineProps<{
  9 |   config: FlatESLintConfigItem
 10 |   index: number
 11 |   filters?: FiltersConfigsPage
 12 |   active?: boolean
 13 | }>()
 14 | 
 15 | const emit = defineEmits<{
 16 |   badgeClick: [string]
 17 | }>()
 18 | 
 19 | const open = defineModel('open', {
 20 |   default: true,
 21 | })
 22 | 
 23 | const router = useRouter()
 24 | function gotoPlugin(name: string) {
 25 |   filtersRules.plugin = name
 26 |   router.push('/rules')
 27 | }
 28 | 
 29 | const extraConfigs = computed(() => {
 30 |   const ignoredKeys = ['files', 'plugins', 'ignores', 'rules', 'name']
 31 |   return Object.fromEntries(
 32 |     Object.entries(props.config)
 33 |       .filter(([key]) => !ignoredKeys.includes(key)),
 34 |   )
 35 | })
 36 | </script>
 37 | 
 38 | <template>
 39 |   <details
 40 |     class="flat-config-item"
 41 |     :open="open"
 42 |     border="~ rounded-lg" relative
 43 |     :class="active ? 'border-accent:50' : 'border-base'"
 44 |     @toggle="open = $event.target.open"
 45 |   >
 46 |     <summary block>
 47 |       <div class="absolute right-[calc(100%+10px)] top-1.5" text-right font-mono op35>
 48 |         #{{ index + 1 }}
 49 |       </div>
 50 |       <div flex="~ gap-2 items-start wrap" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono op75>
 51 |         <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition />
 52 |         <span :class="config.name ? '' : 'op50 italic'" flex-auto>
 53 |           <ColorizedConfigName v-if="config.name" :name="config.name" />
 54 |           <span v-else>anonymous #{{ index + 1 }}</span>
 55 |         </span>
 56 | 
 57 |         <SummarizeItem
 58 |           icon="i-ph-file-magnifying-glass-duotone"
 59 |           :number="config.files?.length || 0"
 60 |           color="text-yellow5"
 61 |           title="Files"
 62 |         />
 63 |         <SummarizeItem
 64 |           icon="i-ph-eye-closed-duotone"
 65 |           :number="config.ignores?.length || 0"
 66 |           color="text-purple5 dark:text-purple4"
 67 |           title="Ignores"
 68 |         />
 69 |         <SummarizeItem
 70 |           icon="i-ph-sliders-duotone"
 71 |           :number="Object.keys(extraConfigs).length"
 72 |           color="text-green5"
 73 |           title="Options"
 74 |         />
 75 |         <SummarizeItem
 76 |           icon="i-ph-plug-duotone"
 77 |           :number="Object.keys(config.plugins || {}).length"
 78 |           color="text-teal5"
 79 |           title="Plugins"
 80 |         />
 81 |         <SummarizeItem
 82 |           icon="i-ph-list-dashes-duotone"
 83 |           :number="Object.keys(config.rules || {}).length"
 84 |           color="text-blue5 dark:text-blue4"
 85 |           title="Rules"
 86 |           mr-2
 87 |         />
 88 |       </div>
 89 |     </summary>
 90 | 
 91 |     <div absolute right-2 top-2 text-right text-5em font-mono op5 pointer-events-none>
 92 |       #{{ index + 1 }}
 93 |     </div>
 94 | 
 95 |     <div px4 py3 flex="~ col gap-4" of-auto>
 96 |       <div v-if="config.files" flex="~ gap-2 items-start">
 97 |         <div i-ph-file-magnifying-glass-duotone my1 flex-none />
 98 |         <div flex="~ col gap-2">
 99 |           <div>Applies to files matching</div>
100 |           <div flex="~ gap-2 items-center wrap">
101 |             <GlobItem v-for="glob, idx of config.files" :key="idx" :glob="glob" />
102 |           </div>
103 |         </div>
104 |       </div>
105 |       <div v-else-if="config.rules || Object.keys(extraConfigs).length" flex="~ gap-2 items-center">
106 |         <div i-ph-files-duotone flex-none />
107 |         <div>Generally applies to all files</div>
108 |       </div>
109 |       <div v-if="config.plugins" flex="~ gap-2 items-start">
110 |         <div i-ph-plug-duotone my1 flex-none />
111 |         <div flex="~ col gap-2">
112 |           <div>Plugins ({{ Object.keys(config.plugins).length }})</div>
113 |           <div flex="~ gap-2 items-center wrap">
114 |             <button
115 |               v-for="name, idx of Object.keys(config.plugins)"
116 |               :key="idx" border="~ base rounded" bg-gray:5 px2
117 |               :style="{ color: getPluginColor(name) }"
118 |               font-mono op75
119 |               @click="gotoPlugin(name)"
120 |             >
121 |               {{ name }}
122 |             </button>
123 |           </div>
124 |         </div>
125 |       </div>
126 |       <div v-if="config.ignores" flex="~ gap-2 items-start">
127 |         <div i-ph-eye-closed-duotone my1 flex-none />
128 |         <div flex="~ col gap-2">
129 |           <div v-if="!config.files">
130 |             Ignore files globally
131 |           </div>
132 |           <div v-else>
133 |             Ignore
134 |           </div>
135 |           <div flex="~ gap-2 items-center wrap">
136 |             <GlobItem v-for="glob, idx of config.ignores" :key="idx" :glob="glob" />
137 |           </div>
138 |         </div>
139 |       </div>
140 |       <div v-else-if="config.rules">
141 |         <div flex="~ gap-2 items-center">
142 |           <div i-ph-list-dashes-duotone my1 flex-none />
143 |           <div>Rules ({{ Object.keys(config.rules).length }})</div>
144 |         </div>
145 |         <RuleList
146 |           py2
147 |           :class="stateStorage.viewType === 'grid' ? 'pl6' : ''"
148 |           :rules="config.rules"
149 |           :filter="name => !filters?.rule || filters.rule === name"
150 |           :get-bind="(name: string) => ({ class: getRuleLevel(config.rules?.[name]) === 'off' ? 'op50' : '' })"
151 |         >
152 |           <template #popup="{ ruleName, value }">
153 |             <RuleStateItem
154 |               border="t base"
155 |               :is-local="true"
156 |               :state="{
157 |                 name: ruleName,
158 |                 level: getRuleLevel(value)!,
159 |                 configIndex: index,
160 |                 options: getRuleOptions(value),
161 |               }"
162 |             />
163 |           </template>
164 |           <template #popup-actions="{ ruleName }">
165 |             <button
166 |               v-close-popper
167 |               action-button
168 |               @click="emit('badgeClick', ruleName)"
169 |             >
170 |               <div i-ph-funnel-duotone />
171 |               Filter by this rule
172 |             </button>
173 |           </template>
174 |         </RuleList>
175 |         <div>
176 |           <button v-if="filters?.rule" ml8 op50 @click="emit('badgeClick', '')">
177 |             ...{{ Object.keys(config.rules).filter(r => r !== filters?.rule).length }} others rules are hidden
178 |           </button>
179 |         </div>
180 |       </div>
181 | 
182 |       <div v-if="Object.keys(extraConfigs).length" flex="~ gap-2">
183 |         <div i-ph-sliders-duotone my1 flex-none />
184 |         <div flex="~ col gap-2" w-full>
185 |           <div>
186 |             Additional configurations
187 |           </div>
188 |           <template v-for="v, k in extraConfigs" :key="k">
189 |             <div border="~ base rounded-lg">
190 |               <div p2 px3 op50 of-auto>
191 |                 {{ k }}
192 |               </div>
193 |               <Shiki lang="ts" :code="stringifyUnquoted(v)" max-h-100 max-w-full w-full of-scroll rounded bg-hover p2 text-sm />
194 |             </div>
195 |           </template>
196 |         </div>
197 |       </div>
198 |     </div>
199 |   </details>
200 | </template>
201 | 


--------------------------------------------------------------------------------
/pages/configs.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { debouncedWatch } from '@vueuse/core'
  3 | import { computed, defineComponent, h, ref } from 'vue'
  4 | import { minimatch } from 'minimatch'
  5 | import type { Linter } from 'eslint'
  6 | import Fuse, { type FuseResultMatch } from 'fuse.js'
  7 | import type { PropType, VNode } from 'vue'
  8 | import { getRuleLevel } from '../composables/rules'
  9 | import { stateStorage } from '../composables/state'
 10 | import { filtersConfigs as filters } from '~/composables/state'
 11 | import { payload } from '~/composables/payload'
 12 | 
 13 | const opens = ref(payload.value.configs.map(() => true))
 14 | const input = ref(filters.filepath)
 15 | 
 16 | function expandAll() {
 17 |   opens.value = opens.value.map(() => true)
 18 | }
 19 | 
 20 | function collapseAll() {
 21 |   opens.value = opens.value.map(() => false)
 22 | }
 23 | 
 24 | function matchGlob(file: string, glob: (Linter.FlatConfigFileSpec | Linter.FlatConfigFileSpec[])[]) {
 25 |   const globs = (Array.isArray(glob) ? glob : [glob]).flat()
 26 |   return globs.some(glob => typeof glob === 'function' ? glob(file) : minimatch(file, glob))
 27 | }
 28 | 
 29 | const filteredConfigs = computed(() => {
 30 |   let configs = payload.value.configs
 31 | 
 32 |   if (filters.filepath) {
 33 |     const ignoreOnlyConfigs = configs.filter(config => !config.rules && config.ignores)
 34 |     const isIgnored = ignoreOnlyConfigs.some(config => matchGlob(filters.filepath!, config.ignores!))
 35 |     if (isIgnored)
 36 |       return []
 37 |     const isAnyIncluded = configs.some(config => matchGlob(filters.filepath!, config.files || []))
 38 |     if (!isAnyIncluded)
 39 |       return []
 40 |     configs = configs.filter((config) => {
 41 |       const isIncluded = config.files ? matchGlob(filters.filepath!, config.files) : true
 42 |       const isExcluded = config.ignores ? matchGlob(filters.filepath!, config.ignores) : false
 43 |       return isIncluded && !isExcluded
 44 |     })
 45 |   }
 46 | 
 47 |   if (filters.rule)
 48 |     configs = configs.filter(config => filters.rule! in (config.rules || {}))
 49 | 
 50 |   return configs
 51 | })
 52 | 
 53 | const autoCompleteFuse = computed(() => {
 54 |   return new Fuse(payload.value.files, {
 55 |     threshold: 0.3,
 56 |     includeMatches: true,
 57 |   })
 58 | })
 59 | 
 60 | const autoCompleteFiles = computed(() => {
 61 |   return autoCompleteFuse.value.search(filters.filepath || '')
 62 | })
 63 | 
 64 | const autoCompleteIndex = ref(0)
 65 | const autoCompleteOpen = ref(false)
 66 | 
 67 | function autoCompleteConfirm(idx = autoCompleteIndex.value) {
 68 |   input.value = filters.filepath = autoCompleteFiles.value[idx]?.item || filters.filepath
 69 |   autoCompleteOpen.value = false
 70 | }
 71 | 
 72 | function autoCompleteBlur() {
 73 |   setTimeout(() => {
 74 |     autoCompleteOpen.value = false
 75 |   }, 100)
 76 | }
 77 | 
 78 | function autoCompleteMove(delta: number) {
 79 |   autoCompleteIndex.value += delta
 80 |   if (autoCompleteIndex.value < 0)
 81 |     autoCompleteIndex.value += autoCompleteFiles.value.length
 82 |   if (autoCompleteIndex.value >= autoCompleteFiles.value.length)
 83 |     autoCompleteIndex.value -= autoCompleteFiles.value.length
 84 | }
 85 | 
 86 | const mergedRules = computed(() => {
 87 |   if (!filters.filepath || stateStorage.value.viewFileMatchType !== 'merged') {
 88 |     return {
 89 |       all: {},
 90 |       common: {},
 91 |       specific: {},
 92 |       specificDisabled: {},
 93 |       specificEnabled: {},
 94 |     }
 95 |   }
 96 |   const all: Record<string, Linter.RuleEntry> = {}
 97 |   const common: Record<string, Linter.RuleEntry> = {}
 98 |   const specific: Record<string, Linter.RuleEntry> = {}
 99 | 
100 |   filteredConfigs.value.forEach((config) => {
101 |     if (!config.rules)
102 |       return
103 |     Object.assign(all, config.rules)
104 |     if (config.files)
105 |       Object.assign(specific, config.rules)
106 |     else
107 |       Object.assign(common, config.rules)
108 |   })
109 |   const specificDisabled = Object.fromEntries(
110 |     Object.entries(specific)
111 |       .filter(([_, value]) => getRuleLevel(value) === 'off'),
112 |   )
113 |   const specificEnabled = Object.fromEntries(
114 |     Object.entries(specific)
115 |       .filter(([_, value]) => getRuleLevel(value) !== 'off'),
116 |   )
117 |   for (const key in all) {
118 |     if (getRuleLevel(all[key]) === 'off')
119 |       delete all[key]
120 |   }
121 |   return {
122 |     all,
123 |     common,
124 |     specific,
125 |     specificDisabled,
126 |     specificEnabled,
127 |   }
128 | })
129 | 
130 | const HighlightMatch = defineComponent({
131 |   props: {
132 |     matches: Array as PropType<readonly FuseResultMatch[]>,
133 |   },
134 |   setup(props) {
135 |     return () => props.matches?.map((match) => {
136 |       let start = 0
137 |       const content = match.value || ''
138 |       const array: VNode[] = []
139 | 
140 |       for (const [from, to] of match.indices) {
141 |         if (start < from)
142 |           array.push(h('span', { class: 'op50' }, content.slice(start, from)))
143 |         array.push(h('span', { class: 'text-purple font-bold' }, content.slice(from, to + 1)))
144 |         start = to + 1
145 |       }
146 |       if (start < content.length)
147 |         array.push(h('span', { class: 'op50' }, content.slice(start)))
148 |       return array
149 |     })
150 |   },
151 | })
152 | 
153 | debouncedWatch(
154 |   () => input.value,
155 |   () => {
156 |     filters.filepath = input.value
157 |     autoCompleteIndex.value = 0
158 |   },
159 |   { debounce: 200 },
160 | )
161 | </script>
162 | 
163 | <template>
164 |   <div>
165 |     <div flex="~ col gap-3" py4>
166 |       <div relative flex>
167 |         <input
168 |           v-model="input"
169 |           placeholder="Test matching with filepath..."
170 |           border="~ base rounded-full"
171 |           w-full bg-transparent px3 py2 pl10 font-mono outline-none
172 |           @focus="autoCompleteOpen = true"
173 |           @click="autoCompleteOpen = true"
174 |           @blur="autoCompleteBlur"
175 |           @keydown.esc="autoCompleteOpen = false"
176 |           @keydown.down.prevent="autoCompleteMove(1)"
177 |           @keydown.up.prevent="autoCompleteMove(-1)"
178 |           @keydown.enter.prevent="autoCompleteConfirm()"
179 |         >
180 |         <div absolute bottom-0 left-0 top-0 flex="~ items-center justify-center" p4 op50>
181 |           <div i-ph-magnifying-glass-duotone />
182 |         </div>
183 |         <div
184 |           v-show="autoCompleteOpen && autoCompleteFiles.length"
185 |           pos="absolute left-8 right-8 top-1/1"
186 |           border="~ base rounded"
187 |           flex="~ col" z-1 mt--1 max-h-80 of-auto py1 shadow bg-glass
188 |         >
189 |           <button
190 |             v-for="file, idx of autoCompleteFiles"
191 |             :key="file.item" px3 py0.5 text-left font-mono
192 |             :class="idx === autoCompleteIndex ? 'bg-active' : ''"
193 |             hover:bg-active
194 |             @click="autoCompleteConfirm(idx)"
195 |           >
196 |             <template v-if="file.matches">
197 |               <HighlightMatch :matches="file.matches" />
198 |             </template>
199 |             <template v-else>
200 |               {{ file.item }}
201 |             </template>
202 |           </button>
203 |         </div>
204 |       </div>
205 |       <div v-if="filters.filepath || filters.rule" flex="~ gap-2 items-center wrap" mb2>
206 |         <div v-if="filters.filepath">
207 |           <div
208 |             flex="~ gap-2 items-center wrap"
209 |             border="~ purple/20 rounded-full" bg-purple:10 px3 py1
210 |             :class="{ 'saturate-0': !filteredConfigs.length }"
211 |           >
212 |             <div i-ph-file-dotted-duotone text-purple />
213 |             <span op50>Filepath</span>
214 |             <code>{{ filters.filepath }}</code>
215 | 
216 |             <template v-if="!filteredConfigs.length">
217 |               <span op50>is not included or has been ignored</span>
218 |             </template>
219 |             <template v-else-if="stateStorage.viewFileMatchType === 'configs'">
220 |               <span op50>matched with</span>
221 |               <span>{{ filteredConfigs.length }} / {{ payload.configs.length }}</span>
222 |               <span op50>config items</span>
223 |             </template>
224 |             <template v-else>
225 |               <span op50>matched with total </span>
226 |               <span>{{ Object.keys(mergedRules.all).length }}</span>
227 |               <span op50>rules, </span>
228 |               <span>{{ Object.keys(mergedRules.specific).length }}</span>
229 |               <span op50>of them are specific to the file</span>
230 |             </template>
231 |             <button
232 |               i-ph-x text-sm op25 hover:op100
233 |               @click="filters.filepath = ''; input = ''"
234 |             />
235 |           </div>
236 |         </div>
237 |         <div v-if="filters.rule">
238 |           <div
239 |             flex="~ gap-2 items-center"
240 |             border="~ blue/20 rounded-full" bg-blue:10 px3 py1
241 |           >
242 |             <div i-ph-funnel-duotone />
243 |             <span op50>Filtered by</span>
244 |             <ColorizedRuleName :name="filters.rule" />
245 |             <span op50>rule</span>
246 |             <button
247 |               i-ph-x text-sm op25 hover:op100
248 |               @click="filters.rule = ''"
249 |             />
250 |           </div>
251 |         </div>
252 |       </div>
253 |       <div flex="~ gap-2 items-center wrap">
254 |         <template v-if="filters.filepath">
255 |           <div border="~ base rounded" flex>
256 |             <button
257 |               :class="stateStorage.viewFileMatchType === 'configs' ? 'bg-gray:5' : 'op25'"
258 |               flex="~ gap-2 items-center"
259 |               px3 py1 hover:bg-gray:15
260 |               @click="stateStorage.viewFileMatchType = stateStorage.viewFileMatchType === 'configs' ? 'merged' : 'configs'"
261 |             >
262 |               <div i-ph-stack-duotone />
263 |               <span>Matched Config Items</span>
264 |             </button>
265 |             <div border="l base" />
266 |             <button
267 |               :class="stateStorage.viewFileMatchType !== 'configs' ? 'bg-gray:5' : 'op25'"
268 |               flex="~ gap-2 items-center"
269 |               px3 py1 hover:bg-gray:15
270 |               @click="stateStorage.viewFileMatchType = stateStorage.viewFileMatchType === 'configs' ? 'merged' : 'configs'"
271 |             >
272 |               <div i-ph-film-script-duotone />
273 |               <span>Merged Rules</span>
274 |             </button>
275 |           </div>
276 |         </template>
277 | 
278 |         <label
279 |           v-if="filters.filepath && stateStorage.viewFileMatchType === 'configs'"
280 |           flex="~ gap-2 items-center" ml2 select-none
281 |         >
282 |           <input
283 |             v-model="stateStorage.showSpecificOnly"
284 |             type="checkbox"
285 |           >
286 |           <span op50>Show Specific Rules Only</span>
287 |         </label>
288 |         <div flex-auto />
289 |         <button
290 |           hover="op100! bg-active"
291 |           px3 py1 op50 border="~ base rounded"
292 |           flex="~ gap-2 items-center"
293 |           @click="expandAll"
294 |         >
295 |           Expand All
296 |         </button>
297 |         <button
298 |           hover="op100! bg-active"
299 |           px3 py1 op50 border="~ base rounded"
300 |           flex="~ gap-2 items-center"
301 |           @click="collapseAll"
302 |         >
303 |           Collapse All
304 |         </button>
305 |       </div>
306 | 
307 |       <template v-if="!filteredConfigs.length">
308 |         <div italic op50>
309 |           No matched config items.
310 |         </div>
311 |       </template>
312 |       <template v-else>
313 |         <!-- Merged Rules -->
314 |         <template v-if="filters.filepath && stateStorage.viewFileMatchType === 'merged'">
315 |           <details class="flat-config-item" border="~ base rounded-lg" relative>
316 |             <summary block>
317 |               <div flex="~ gap-2 items-start" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono op75>
318 |                 <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition />
319 |                 Merged Rules: Common to every file ({{ Object.keys(mergedRules.common).length }} rules)
320 |               </div>
321 |             </summary>
322 |             <RuleList
323 |               m4
324 |               :rules="mergedRules.common"
325 |             />
326 |           </details>
327 |           <details class="flat-config-item" border="~ base rounded-lg" relative open>
328 |             <summary block>
329 |               <div flex="~ gap-2 items-start" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono op75>
330 |                 <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition />
331 |                 Merged Rules: Specific to matched file ({{ Object.keys(mergedRules.specific).length }} rules)
332 |               </div>
333 |             </summary>
334 |             <template v-if="Object.keys(mergedRules.specificDisabled).length">
335 |               <div px4 pt4>
336 |                 Disables ({{ Object.keys(mergedRules.specificDisabled).length }})
337 |               </div>
338 |               <RuleList
339 |                 m4
340 |                 :get-bind="(name: string) => ({ class: 'op50' })"
341 |                 :rules="mergedRules.specificDisabled"
342 |               />
343 |             </template>
344 |             <template v-if="Object.keys(mergedRules.specificEnabled).length">
345 |               <div px4 pt4>
346 |                 Enables ({{ Object.keys(mergedRules.specificEnabled).length }})
347 |               </div>
348 |               <RuleList
349 |                 m4
350 |                 :rules="mergedRules.specificEnabled"
351 |               />
352 |             </template>
353 |           </details>
354 |         </template>
355 | 
356 |         <!-- Flat Configs -->
357 |         <template v-else>
358 |           <template
359 |             v-for="config, idx in payload.configs"
360 |             :key="idx"
361 |           >
362 |             <ConfigItem
363 |               v-show="!filters.filepath ? true : filteredConfigs.includes(config) && (!stateStorage.showSpecificOnly || config.files)"
364 |               v-model:open="opens[idx]"
365 |               :payload="payload"
366 |               :config="config"
367 |               :index="idx"
368 |               :filters="filters"
369 |               :active="!!(filters.filepath && config.files)"
370 |               @badge-click="e => filters.rule = e"
371 |             />
372 |           </template>
373 |         </template>
374 |       </template>
375 |     </div>
376 |   </div>
377 | </template>
378 | 


--------------------------------------------------------------------------------