feat: support build command for static hosting (#17)

.gitignore

@@ -5,3 +5,4 @@ dist
 .nuxt
 .env
 .idea/
+.eslint-config-inspector

bin.mjs

@@ -1,15 +1,58 @@
 #!/usr/bin/env node
-
+/* eslint-disable no-console */
 import process from 'node:process'
+import fs from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { relative, resolve } from 'node:path'
 import open from 'open'
 import { getPort } from 'get-port-please'
+import cac from 'cac'
+
+const cli = cac()
+
+cli
+  .command('build', 'Build inspector with current config file for static hosting')
+  .option('--config <configFile>', 'Config file path', { default: process.env.ESLINT_CONFIG })
+  .option('--out-dir <dir>', 'Output directory', { default: '.eslint-config-inspector' })
+  .action(async (options) => {
+    console.log('Building static ESLint config inspector...')
+
+    const cwd = process.cwd()
+    const outDir = resolve(cwd, options.outDir)
+    const { readConfig } = await import('./dist/server/chunks/routes/api/utils.mjs')
+    const configs = await readConfig(cwd, options.config || process.env.ESLINT_CONFIG)
+    if (existsSync(outDir))
+      await fs.rm(outDir, { recursive: true })
+    await fs.mkdir(outDir, { recursive: true })
+    const distDir = new URL('./dist/public', import.meta.url)
+    await fs.cp(distDir, outDir, { recursive: true })
+    await fs.mkdir(resolve(outDir, 'api'), { recursive: true })
+    configs.payload.meta.configPath = ''
+    await fs.writeFile(resolve(outDir, 'api/payload.json'), JSON.stringify(configs.payload, null, 2), 'utf-8')
+
+    console.log(`Built to ${relative(cwd, outDir)}`)
+    console.log(`You can use static server like \`npx serve ${relative(cwd, outDir)}\` to serve the inspector`)
+  })
+
+cli
+  .command('', 'Start dev inspector')
+  .option('--config <configFile>', 'Config file path', { default: process.env.ESLINT_CONFIG })
+  .option('--host <host>', 'Host', { default: process.env.HOST || '127.0.0.1' })
+  .option('--port <port>', 'Port', { default: process.env.PORT || 7777 })
+  .option('--open', 'Open browser', { default: true })
+  .action(async (options) => {
+    process.env.HOST = options.host
+    process.env.PORT = await getPort({ port: options.port })
+    if (options.config)
+      process.env.ESLINT_CONFIG = options.config
+
+    process.argv = process.argv.slice(0, 2)
 
-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'),
+      options.open ? open(`http://localhost:${process.env.PORT}`) : undefined,
+    ])
+  })
 
-await Promise.all([
-  import('./dist/server/index.mjs'),
-  process.env.NO_OPEN
-    ? undefined
-    : open(`http://localhost:${process.env.PORT}`),
-])
+cli.help()
+cli.parse()

components/NavBar.vue

@@ -40,7 +40,7 @@ function toggleRuleView() {
       v{{ version }}
     </div>
   </div>
-  <div flex="~ gap-1 items-center" text-sm my1>
+  <div v-if="payload.meta.configPath" flex="~ gap-1 items-center" text-sm my1>
     <span font-mono op35>{{ payload.meta.configPath }}</span>
   </div>
   <div flex="~ gap-1 items-center wrap" text-sm>

composables/payload.ts

@@ -9,7 +9,6 @@ const data = ref<Payload>({
   configs: [],
   meta: {} as any,
   files: [],
-  cwd: '',
 })
 
 export const errorInfo = ref<ErrorInfo>()
@@ -19,7 +18,7 @@ function isErrorInfo(payload: Payload | ErrorInfo): payload is ErrorInfo {
 }
 
 async function get() {
-  const payload = await $fetch<Payload | ErrorInfo>('/api/get')
+  const payload = await $fetch<Payload | ErrorInfo>('/api/payload.json')
   if (isErrorInfo(payload)) {
     errorInfo.value = payload
     return
@@ -34,23 +33,26 @@ const _promises = get()
   .then((payload) => {
     if (!payload)
       return
-    // Connect to WebSocket, listen for config changes
-    const ws = new WebSocket(`ws://${location.hostname}:${payload.meta.wsPort}`)
-    ws.addEventListener('message', async (event) => {
-      console.log(LOG_NAME, 'WebSocket message', event.data)
-      const payload = JSON.parse(event.data)
-      if (payload.type === 'config-change')
-        get()
-    })
-    ws.addEventListener('open', () => {
-      console.log(LOG_NAME, 'WebSocket connected')
-    })
-    ws.addEventListener('close', () => {
-      console.log(LOG_NAME, 'WebSocket closed')
-    })
-    ws.addEventListener('error', (error) => {
-      console.error(LOG_NAME, 'WebSocket error', error)
-    })
+
+    if (typeof payload.meta.wsPort === 'number') {
+      // Connect to WebSocket, listen for config changes
+      const ws = new WebSocket(`ws://${location.hostname}:${payload.meta.wsPort}`)
+      ws.addEventListener('message', async (event) => {
+        console.log(LOG_NAME, 'WebSocket message', event.data)
+        const payload = JSON.parse(event.data)
+        if (payload.type === 'config-change')
+          get()
+      })
+      ws.addEventListener('open', () => {
+        console.log(LOG_NAME, 'WebSocket connected')
+      })
+      ws.addEventListener('close', () => {
+        console.log(LOG_NAME, 'WebSocket closed')
+      })
+      ws.addEventListener('error', (error) => {
+        console.error(LOG_NAME, 'WebSocket error', error)
+      })
+    }
 
     return payload
   })

composables/types.ts

@@ -8,7 +8,6 @@ export interface FlatESLintConfigItem extends Linter.FlatConfig {
 export type RuleLevel = 'off' | 'warn' | 'error'
 
 export interface Payload {
-  cwd: string
   configs: FlatESLintConfigItem[]
   files: string[]
   rules: Record<string, RuleInfo>
@@ -25,7 +24,7 @@ export interface ResolvedPayload extends Payload {
 }
 
 export interface PayloadMeta {
-  wsPort: number
+  wsPort?: number
   lastUpdate: number
   configPath: string
 }

package.json

@@ -36,8 +36,8 @@
     "@unhead/shared": "^1.9.3",
     "@unhead/ssr": "^1.9.3",
     "bundle-require": "^4.0.2",
+    "cac": "^6.7.14",
     "chokidar": "^3.6.0",
-    "consola": "^3.2.3",
     "devalue": "^4.3.2",
     "esbuild": "^0.20.2",
     "fast-glob": "^3.3.2",
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.11.5",
+    "@eslint/js": "^8.57.0",
     "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/twemoji": "^1.1.15",