feat: print out url when enabled

antfu-collective · Sep 10, 2021 · 33ac4bc · 33ac4bc
1 parent 8e1ef8a
commit 33ac4bc
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@vueuse/core": "^6.3.2",
     "@vueuse/router": "^6.3.2",
     "bumpp": "^7.1.1",
+    "chalk": "^4.1.2",
     "codemirror": "^5.62.3",
     "codemirror-theme-vars": "^0.1.1",
     "diff-match-patch": "^1.0.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/node/index.ts b/src/node/index.ts
@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import _debug from 'debug'
-import type { ModuleNode, Plugin, ResolvedConfig } from 'vite'
+import { yellow } from 'chalk'
+import type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import sirv from 'sirv'
 import { parseURL } from 'ufo'
 import { parseQuery } from 'vue-router'
@@ -115,76 +116,92 @@ function PluginInspect({
     }
   }
 
+  function configureServer(server: ViteDevServer) {
+    const _invalidateModule = server.moduleGraph.invalidateModule
+    server.moduleGraph.invalidateModule = function(this: any, ...args: any) {
+      const mod = args[0] as ModuleNode
+      if (mod?.id)
+        delete transformMap[mod.id]
+      return _invalidateModule.apply(this, args)
+    }
+
+    if (process.env.NODE_ENV === 'production') {
+      server.middlewares.use('/__inspect', sirv(resolve(__dirname, 'client'), {
+        single: true,
+        dev: true,
+      }))
+    }
+
+    server.middlewares.use('/__inspect_api', (req, res) => {
+      const { pathname, search } = parseURL(req.url)
+
+      if (pathname === '/list') {
+        const modules = Object.keys(transformMap).sort()
+          .map((id): ModuleInfo => {
+            const plugins = transformMap[id]?.map(i => i.name)
+            const deps = Array.from(server.moduleGraph.getModuleById(id)?.importedModules || [])
+              .map(i => i.id || '')
+              .filter(Boolean)
+
+            return {
+              id,
+              plugins,
+              deps,
+              virtual: plugins[0] !== '__load__',
+            }
+          })
+
+        res.write(JSON.stringify({
+          root: config.root,
+          modules,
+        }, null, 2))
+        res.end()
+      }
+      else if (pathname === '/module') {
+        const id = parseQuery(search).id as string
+        res.write(JSON.stringify(getIdInfo(id), null, 2))
+        res.end()
+      }
+      else if (pathname === '/resolve') {
+        const id = parseQuery(search).id as string
+        res.write(JSON.stringify({ id: resolveId(id) }, null, 2))
+        res.end()
+      }
+      else if (pathname === '/clear') {
+        const id = resolveId(parseQuery(search).id as string)
+        if (id) {
+          const mod = server.moduleGraph.getModuleById(id)
+          if (mod)
+            server.moduleGraph.invalidateModule(mod)
+          delete transformMap[id]
+        }
+        res.end()
+      }
+    })
+
+    // hijack httpServer.listen to print the log
+    const _listen = server.httpServer!.listen
+    let port = config.server.port || 3000
+    let timer: any
+    server.httpServer!.listen = function(this: any, ...args: any) {
+      port ||= args[0]
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        // eslint-disable-next-line no-console
+        console.log(`  > Inspect: ${yellow(`http://localhost:${port}/__inspect/`)}\n`)
+      }, 0)
+      return _listen.apply(this, args)
+    }
+  }
+
   return <Plugin>{
     name: 'vite-plugin-inspect',
     apply: 'serve',
     configResolved(_config) {
       config = _config
       config.plugins.forEach(hijackPlugin)
     },
-    configureServer(server) {
-      const _invalidateModule = server.moduleGraph.invalidateModule
-      server.moduleGraph.invalidateModule = function(this: any, ...args: any) {
-        const mod = args[0] as ModuleNode
-        if (mod?.id)
-          delete transformMap[mod.id]
-        return _invalidateModule.apply(this, args)
-      }
-
-      if (process.env.NODE_ENV === 'production') {
-        server.middlewares.use('/__inspect', sirv(resolve(__dirname, 'client'), {
-          single: true,
-          dev: true,
-        }))
-      }
-
-      server.middlewares.use('/__inspect_api', (req, res) => {
-        const { pathname, search } = parseURL(req.url)
-
-        if (pathname === '/list') {
-          const modules = Object.keys(transformMap).sort()
-            .map((id): ModuleInfo => {
-              const plugins = transformMap[id]?.map(i => i.name)
-              const deps = Array.from(server.moduleGraph.getModuleById(id)?.importedModules || [])
-                .map(i => i.id || '')
-                .filter(Boolean)
-
-              return {
-                id,
-                plugins,
-                deps,
-                virtual: plugins[0] !== '__load__',
-              }
-            })
-
-          res.write(JSON.stringify({
-            root: config.root,
-            modules,
-          }, null, 2))
-          res.end()
-        }
-        else if (pathname === '/module') {
-          const id = parseQuery(search).id as string
-          res.write(JSON.stringify(getIdInfo(id), null, 2))
-          res.end()
-        }
-        else if (pathname === '/resolve') {
-          const id = parseQuery(search).id as string
-          res.write(JSON.stringify({ id: resolveId(id) }, null, 2))
-          res.end()
-        }
-        else if (pathname === '/clear') {
-          const id = resolveId(parseQuery(search).id as string)
-          if (id) {
-            const mod = server.moduleGraph.getModuleById(id)
-            if (mod)
-              server.moduleGraph.invalidateModule(mod)
-            delete transformMap[id]
-          }
-          res.end()
-        }
-      })
-    },
+    configureServer,
   }
 }