feat: migrate from eslint-flat-config-viewer (#1)

Author: antfu

.github/workflows/ci.yml

@@ -0,0 +1,68 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Lint
+        run: nr lint
+
+      - name: Typecheck
+        run: nr typecheck
+
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        node: [lts/*]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Build
+        run: nr build
+
+      # - name: Test
+      #   run: nr test

.github/workflows/release-please.yml

@@ -0,0 +1,56 @@
+on:
+  push:
+    branches:
+      - main
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          package-name: '@eslint/config-inspector'
+          pull-request-title-pattern: 'chore: release ${version}'
+          changelog-types: >
+            [
+              { "type": "feat", "section": "Features", "hidden": false },
+              { "type": "fix", "section": "Bug Fixes", "hidden": false },
+              { "type": "docs", "section": "Documentation", "hidden": false },
+              { "type": "build", "section": "Build Related", "hidden": false },
+              { "type": "chore", "section": "Chores", "hidden": false },
+              { "type": "perf", "section": "Chores", "hidden": false },
+              { "type": "ci", "section": "Chores", "hidden": false },
+              { "type": "refactor", "section": "Chores", "hidden": false },
+              { "type": "test", "section": "Chores", "hidden": false }
+            ]
+      - uses: actions/checkout@v3
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          registry-url: https://registry.npmjs.org
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm install
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        if: ${{ steps.release.outputs.release_created }}
+      - run: 'npx @humanwhocodes/tweet "@eslint/config-inspector ${{ steps.release.outputs.tag_name }} has been released: ${{ steps.release.outputs.html_url }}"'
+        if: ${{ steps.release.outputs.release_created }}
+        env:
+          TWITTER_CONSUMER_KEY: ${{ secrets.TWITTER_CONSUMER_KEY }}
+          TWITTER_CONSUMER_SECRET: ${{ secrets.TWITTER_CONSUMER_SECRET }}
+          TWITTER_ACCESS_TOKEN_KEY: ${{ secrets.TWITTER_ACCESS_TOKEN_KEY }}
+          TWITTER_ACCESS_TOKEN_SECRET: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}
+      - run: 'npx @humanwhocodes/toot "@eslint/config-inspector ${{ steps.release.outputs.tag_name }} has been released: ${{ steps.release.outputs.html_url }}"'
+        if: ${{ steps.release.outputs.release_created }}
+        env:
+          MASTODON_ACCESS_TOKEN: ${{ secrets.MASTODON_ACCESS_TOKEN }}
+          MASTODON_HOST: ${{ secrets.MASTODON_HOST }}

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+*.log
+dist
+.output
+.nuxt
+.env
+.idea/

.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true

.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.goto-alias",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "vue.volar"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,41 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

README.md

@@ -0,0 +1,38 @@
+<img src="./public/favicon.svg" width="100" height="100"><br>
+
+# ESLint Config Inspector
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+
+A visual tool to help you view and understand your [ESLint Flat configs](https://eslint.org/docs/latest/use/configure/configuration-files-new).
+
+<img width="1199" alt="Screenshot" src="https://github.com/antfu/eslint-flat-config-viewer/assets/11247099/f386563a-c655-458e-a2c3-0af19ebec958">
+<img width="1199" alt="Screenshot" src="https://github.com/antfu/eslint-flat-config-viewer/assets/11247099/44edeb05-02b3-4bca-8da6-768984e8d829">
+
+## Usage
+
+Change the directory to your project root that contains `eslint.config.js` and run:
+
+```bash
+npx @eslint/config-inspector
+```
+
+Goto http://localhost:7777/ to view your ESLint config. Whenever you update your ESLint config, the page will be updated automatically.
+
+---
+
+Or play it in your browser:
+
+[![](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/eslint/config-inspector)
+
+## License
+
+[Apache-2.0](./LICENSE) License
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/eslint-flat-config-viewer?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/eslint-flat-config-viewer
+[npm-downloads-src]: https://img.shields.io/npm/dm/eslint-flat-config-viewer?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/eslint-flat-config-viewer

app.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import { errorInfo } from './composables/payload'
+import 'floating-vue/dist/style.css'
+import './styles/global.css'
+import './composables/dark'
+import { version } from './package.json'
+import { ensureDataFetch } from '~/composables/payload'
+
+useHead({
+  title: 'ESLint Config Inspector',
+})
+
+await ensureDataFetch()
+</script>
+
+<template>
+  <div v-if="errorInfo" grid h-full w-full place-content-center whitespace-pre-line>
+    <div font-200 text-xl mb6>
+      <a
+        href="https://github.com/eslint/config-inspector" target="_blank"
+        flex="inline gap-2 items-center" mr1
+      >
+        <img src="/favicon.svg" inline-block h-1em>
+        <span op75>ESLint Config Inspector</span>
+      </a>
+      <sup op50>v{{ version }}</sup>
+    </div>
+
+    <div text-2xl text-red5 font-bold>
+      Failed to load <span rounded bg-red:5 px2>eslint.config.js</span><br>
+    </div>
+
+    <div text-lg text-red font-mono>
+      {{ errorInfo.error }}
+    </div>
+
+    <div op50 mt6>
+      Note that
+      <a href="https://github.com/eslint/config-inspector" target="_blank" hover:underline>config inspector</a>
+      only works with the <a href="https://eslint.org/docs/latest/use/configure/configuration-files-new" target="_blank" font-bold hover:underline>flat config format</a>.
+    </div>
+  </div>
+  <div v-else px14 py10>
+    <NavBar />
+    <NuxtPage />
+  </div>
+</template>

bin.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+import process from 'node:process'
+import open from 'open'
+import { getPort } from 'get-port-please'
+
+process.env.HOST = process.env.HOST || '127.0.0.1'
+process.env.PORT = process.env.PORT || await getPort({ port: 7777 })
+
+await Promise.all([
+  import('./dist/server/index.mjs'),
+  process.env.NO_OPEN
+    ? undefined
+    : open(`http://localhost:${process.env.PORT}`),
+])

components/ColorizedConfigName.ts

@@ -0,0 +1,22 @@
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const parts = computed(() => props.name.split(/([:/])/g).filter(Boolean))
+    return () => h('span', parts.value.map((part, i) => {
+      return h(
+        'span',
+        [':', '/'].includes(part)
+          ? { style: { opacity: 0.4 } }
+          : i !== parts.value.length - 1
+            ? { style: { color: getPluginColor(part) } }
+            : null,
+        part,
+      )
+    }))
+  },
+})

components/ColorizedRuleName.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  name: string
+  prefix?: string
+  url?: string
+  as?: string
+  deprecated?: boolean
+  borderless?: boolean
+  break?: boolean
+}>()
+
+const parsed = computed(() => {
+  if (props.prefix) {
+    if (props.name.startsWith(props.prefix)) {
+      return {
+        scope: props.prefix,
+        name: props.name.slice(props.prefix.length).replace(/^\/+/, ''),
+      }
+    }
+    else {
+      return {
+        scope: undefined,
+        name: props.name,
+      }
+    }
+  }
+  const parts = props.name.split('/')
+  if (parts.length === 1) {
+    return {
+      scope: undefined,
+      name: parts[0],
+    }
+  }
+  return {
+    scope: parts[0],
+    name: parts.slice(1).join('/'),
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="as || 'div'"
+    ws-nowrap font-mono of-hidden text-ellipsis
+    :class="[
+      deprecated ? 'line-through' : '',
+      borderless ? '' : 'border border-base px2 bg-gray:5 rounded',
+    ]"
+  >
+    <span v-if="parsed.scope" :style="{ color: getPluginColor(parsed.scope) }">{{ parsed.scope }}</span>
+    <span v-if="parsed.scope" op30>/</span>
+    <br v-if="parsed.scope && props.break">
+    <span op75>{{ parsed.name }}</span>
+  </component>
+</template>