feat: use custom server host, reduce deps (#20)

app.vue → app/app.vue

@@ -4,7 +4,7 @@ import { errorInfo } from './composables/payload'
 import 'floating-vue/dist/style.css'
 import './styles/global.css'
 import './composables/dark'
-import { version } from './package.json'
+import { version } from '~~/package.json'
 import { ensureDataFetch } from '~/composables/payload'
 
 useHead({

components/ConfigItem.vue → app/components/ConfigItem.vue

@@ -3,7 +3,7 @@ import { computed, defineModel } from 'vue'
 import { stringifyUnquoted } from '~/composables/strings'
 import { filtersRules, stateStorage } from '~/composables/state'
 import { useRouter } from '#app/composables/router'
-import type { FiltersConfigsPage, FlatESLintConfigItem } from '~/composables/types'
+import type { FiltersConfigsPage, FlatESLintConfigItem } from '~~/types'
 
 const props = defineProps<{
   config: FlatESLintConfigItem
@@ -40,7 +40,7 @@ const extraConfigs = computed(() => {
     class="flat-config-item"
     :open="open"
     border="~ rounded-lg" relative
-    :class="active ? 'border-accent:50' : 'border-base'"
+    :class="active ? 'border-yellow:70' : 'border-base'"
     @toggle="open = $event.target.open"
   >
     <summary block>

components/NavBar.vue → app/components/NavBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useTimeAgo } from '@vueuse/core'
-import { version } from '~/package.json'
+import { version } from '../../package.json'
 import { filtersRules as filters, stateStorage } from '~/composables/state'
 import { useRouter } from '#app/composables/router'
 import { payload } from '~/composables/payload'
@@ -99,3 +99,4 @@ function toggleRuleView() {
     </template>
   </div>
 </template>
+~/app/composables/state~/app/composables/payload

components/RuleItem.vue → app/components/RuleItem.vue

@@ -2,7 +2,7 @@
 import { useClipboard } from '@vueuse/core'
 import { vTooltip } from 'floating-vue'
 import { getRuleLevel } from '~/composables/rules'
-import type { RuleConfigStates, RuleInfo, RuleLevel } from '~/composables/types'
+import type { RuleConfigStates, RuleInfo, RuleLevel } from '~~/types'
 
 const props = defineProps<{
   rule: RuleInfo
@@ -145,3 +145,5 @@ function capitalize(str?: string) {
     </div>
   </div>
 </template>
+~/app/composables/rules~/app/composables/types
+~~/types

components/RuleLevelIcon.vue → app/components/RuleLevelIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { RuleLevel } from '~/composables/types'
+import type { RuleLevel } from '~~/types'
 import { nth } from '~/composables/strings'
 
 const props = defineProps<{

components/RuleList.vue → app/components/RuleList.vue

@@ -3,7 +3,7 @@ import { Fragment, computed, defineComponent, h } from 'vue'
 import type { Linter } from 'eslint'
 import { getRuleFromName, payload } from '~/composables/payload'
 import { stateStorage } from '~/composables/state'
-import type { RuleInfo } from '~/composables/types'
+import type { RuleInfo } from '~~/types'
 
 const props = defineProps<{
   rules: RuleInfo[] | Record<string, Linter.RuleEntry>

components/RuleStateItem.vue → app/components/RuleStateItem.vue

@@ -4,7 +4,7 @@ import { nth, stringifyUnquoted } from '~/composables/strings'
 import { filtersConfigs } from '~/composables/state'
 import { payload } from '~/composables/payload'
 import { useRouter } from '#app/composables/router'
-import type { RuleConfigState } from '~/composables/types'
+import type { RuleConfigState } from '~~/types'
 
 const props = defineProps<{
   state: RuleConfigState

composables/color.ts → app/composables/color.ts

@@ -55,15 +55,18 @@ export function getHsla(
   return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
 }
 
-export function getPluginColor(name: string, opacity = 1) {
+export function getPluginColor(name: string, opacity = 1): string {
   if (predefinedColorMap[name]) {
     const color = predefinedColorMap[name]
-    if (typeof color === 'number')
+    if (typeof color === 'number') {
       return getHsla(color, opacity)
-    if (opacity === 1)
-      return predefinedColorMap[name]
-    const opacityHex = Math.floor(opacity * 255).toString(16).padStart(2, '0')
-    return predefinedColorMap[name] + opacityHex
+    }
+    else {
+      if (opacity === 1)
+        return color
+      const opacityHex = Math.floor(opacity * 255).toString(16).padStart(2, '0')
+      return color + opacityHex
+    }
   }
   return getHashColorFromString(name, opacity)
 }

composables/payload.ts → app/composables/payload.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { $fetch } from 'ofetch'
-import type { ErrorInfo, Payload, ResolvedPayload } from '~/composables/types'
+import type { ErrorInfo, Payload, ResolvedPayload, RuleConfigStates, RuleInfo } from '~~/types'
 
 const LOG_NAME = '[ESLint Config Inspector]'
 

composables/state.ts → app/composables/state.ts

@@ -1,3 +1,5 @@
+import type { FiltersConfigsPage } from '~~/types'
+
 export const filtersConfigs = reactive<FiltersConfigsPage>({
   rule: '',
   filepath: '',

pages/configs.vue → app/pages/configs.vue

@@ -380,3 +380,4 @@ debouncedWatch(
     </div>
   </div>
 </template>
+~/app/composables/rules~/app/composables/state~/app/composables/payload

pages/rules.vue → app/pages/rules.vue

@@ -154,3 +154,4 @@ function resetFilters() {
     />
   </div>
 </template>
+~/app/composables/state~/app/composables/payload

app/server/api/payload.json.ts

@@ -0,0 +1,9 @@
+import { createWsServer } from '~~/src/ws'
+
+export default lazyEventHandler(async () => {
+  const ws = await createWsServer()
+
+  return defineEventHandler(async () => {
+    return await ws.getData()
+  })
+})

server/tsconfig.json → app/server/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json",
+  "extends": "../../.nuxt/tsconfig.server.json",
   "compilerOptions": {
     "moduleResolution": "Bundler",
     "noEmit": true

bin.mjs

@@ -1,58 +1,3 @@
 #!/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)
-
-    await Promise.all([
-      import('./dist/server/index.mjs'),
-      options.open ? open(`http://localhost:${process.env.PORT}`) : undefined,
-    ])
-  })
-
-cli.help()
-cli.parse()
+await import('./dist/cli.mjs')

build.config.ts

@@ -0,0 +1,8 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/cli.ts',
+  ],
+  clean: false,
+})

eslint.config.js

@@ -15,3 +15,9 @@ export default nuxt()
       },
     ),
   )
+  .append({
+    files: ['src/**/*.ts'],
+    rules: {
+      'no-console': 'off',
+    },
+  })

nuxt.config.ts

@@ -1,5 +1,3 @@
-import pkg from './package.json'
-
 export default defineNuxtConfig({
   ssr: false,
 
@@ -11,6 +9,8 @@ export default defineNuxtConfig({
     'nuxt-eslint-auto-explicit-import',
   ],
 
+  srcDir: 'app',
+
   eslint: {
     config: {
       standalone: false,
@@ -42,33 +42,25 @@ export default defineNuxtConfig({
   ],
 
   nitro: {
-    preset: 'node-server',
+    preset: 'static',
     output: {
       dir: './dist',
     },
     routeRules: {
-      '/**': {
-        cors: true,
-        headers: {
-          'Access-Control-Allow-Origin': '*',
-          'Access-Control-Allow-Methods': '*',
-          'Access-Control-Allow-Credentials': 'true',
-          'Access-Control-Allow-Headers': '*',
-          'Access-Control-Expose-Headers': '*',
-        },
+      '/': {
+        prerender: true,
+      },
+      '/200.html': {
+        prerender: true,
+      },
+      '/404.html': {
+        prerender: true,
+      },
+      '/*': {
+        prerender: false,
       },
-    },
-    prerender: {
-      routes: ['/'],
     },
     sourceMap: false,
-    externals: {
-      trace: false,
-      external: [
-        ...Object.keys(pkg.dependencies),
-        ...Object.keys(pkg.peerDependencies),
-      ],
-    },
   },
 
   app: {

package.json

@@ -21,7 +21,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "nuxi build",
+    "build": "nuxi build && unbuild",
     "dev": "nuxi dev",
     "prepare": "nuxi prepare",
     "start": "node bin.mjs",
@@ -33,21 +33,16 @@
     "eslint": "^8.50.0"
   },
   "dependencies": {
-    "@unhead/shared": "^1.9.4",
-    "@unhead/ssr": "^1.9.4",
     "bundle-require": "^4.0.2",
     "cac": "^6.7.14",
     "chokidar": "^3.6.0",
-    "devalue": "^4.3.2",
+    "connect": "^3.7.0",
     "esbuild": "^0.20.2",
     "fast-glob": "^3.3.2",
     "get-port-please": "^3.1.2",
     "minimatch": "^9.0.4",
-    "ofetch": "^1.3.4",
     "open": "^10.1.0",
-    "unhead": "^1.9.4",
-    "vue": "^3.4.21",
-    "vue-bundle-renderer": "^2.0.0",
+    "sirv": "^2.0.4",
     "ws": "^8.16.0"
   },
   "devDependencies": {
@@ -57,6 +52,7 @@
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/twemoji": "^1.1.15",
     "@nuxt/eslint": "0.3.0-beta.6",
+    "@types/connect": "^3.4.38",
     "@types/ws": "^8.5.10",
     "@typescript-eslint/utils": "^7.5.0",
     "@unocss/eslint-config": "^0.58.9",
@@ -71,10 +67,5 @@
     "typescript": "^5.4.3",
     "unbuild": "^2.0.0",
     "vue-tsc": "^2.0.7"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "nitropack@2.9.4": "patches/nitropack@2.9.4.patch"
-    }
   }
 }