feat: route map

yuyinws · yuyinws · commit b44104c967e2 · 2024-04-21T14:38:50.000+08:00
diff --git a/examples/vite-vue3/src/App.vue b/examples/vite-vue3/src/App.vue
@@ -4,5 +4,5 @@
 
 <script setup lang="ts">
   const msg: string = "Hello World"
-  console.log(msg) // turbo-console-disable-line
+  console.log(msg)
 </script>
diff --git a/examples/vite-vue3/src/main.ts b/examples/vite-vue3/src/main.ts
@@ -1,5 +1,7 @@
 import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
-console.log('main.ts') // turbo-console-disable-line
+console.log('main.ts')
+
+console.log('main.ts--22')
 createApp(App).mount('#app')
diff --git a/package.json b/package.json
@@ -158,6 +158,7 @@
     "@nuxt/schema": "^3.11.2",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.12.7",
+    "@vitest/ui": "^1.5.0",
     "bumpp": "^9.4.0",
     "chalk": "^5.3.0",
     "eslint": "^9.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/client/index.html b/src/core/client/index.html
@@ -1,41 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="icon" type="image/svg+xml" href="https://unplugin.unjs.io/logo.svg">
   <title>Launch Editor</title>
 </head>
 <style>
-  #error-info {
-    color: red;
-    font-size: 2rem;
-  }
-
-  body {
-    background-color: white;
-  }
-
   @media (prefers-color-scheme: dark) {
     body {
       background-color: black;
     }
   }
 </style>
+
 <body>
-  <div id="error-info"></div>
+  <main class="container">
+    <article>
+      <h4>Ops, It get some error when launch to the editor:</h4>
+      <div id="error-info" style="color: #EE402E">
+        
+      </div>
+        <small>You can report this issus at <a href="https://github.com/unplugin/unplugin-turbo-console/issues"
+            target="_blank">GitHub</a>.
+        </small>
+    </article>
+  </main>
 </body>
 <script>
- (async () => {
-   try {
-     const hash = window.location.hash
-     const decodeBase64 = window.atob(hash.slice(1))
-     await fetch(`/__open-in-editor?file=${encodeURIComponent(decodeBase64)}`)
-     window.close()
-   }
-   catch (error) {
-     const errorInfo = document.getElementById('error-info')
-     errorInfo.innerText = String(error)
-   }
- })()
+  ; (async () => {
+    try {
+      const position = window.location.hash.slice(1)
+      const raw = await fetch(`/__open-in-editor?position=${(position)}`)
+      const response = await raw.json()
+      if (response.status === 'error')
+        throw new Error(response.message)
+
+      window.close()
+    }
+    catch (error) {
+      const errorInfo = document.getElementById('error-info')
+      errorInfo.innerText = String(error)
+    }
+  })()
 </script>
+
 </html>
diff --git a/src/core/server/index.ts b/src/core/server/index.ts
@@ -21,17 +21,42 @@ export async function startServer(port: number = 3070) {
       }
     }))
 
+    app.use('/routeMap', eventHandler(() => {
+      const routeMap = globalThis.TurboConsoleRouteMap || new Map()
+      return Object.fromEntries(routeMap)
+    }))
+
     app.use('/__open-in-editor', eventHandler(async (event) => {
       try {
-        const { file } = getQuery(event) as { file: string }
-        launch(resolve(cwd(), file))
+        const { position } = getQuery(event) as { position: string }
+        const routeMap = globalThis.TurboConsoleRouteMap
+
+        if (!routeMap)
+          throw new Error('routeMap is undefined')
+
+        const parsed = position.split(',')
+        const routeMapString = parsed[0]
+        const line = parsed[1] || 1
+        const column = parsed[2] || 1
+
+        let filePath = ''
+
+        for (const [key, value] of routeMap) {
+          if (value === routeMapString) {
+            filePath = key
+            break
+          }
+        }
+
+        launch(resolve(cwd(), `${filePath}:${line}:${column}`))
         return {
-          message: 'ok',
+          status: 'success',
         }
       }
       catch (error) {
         return {
-          error: String(error),
+          status: 'error',
+          message: String(error),
         }
       }
     }))
diff --git a/src/core/transform/index.ts b/src/core/transform/index.ts
@@ -15,7 +15,12 @@ export async function transform(context: Context) {
   if (!compiler) {
     return {
       code: magicString.toString(),
-      map: magicString.generateMap({ source: id }),
+      map: magicString.generateMap({
+        source: id,
+        file: id,
+        includeContent: true,
+        hires: true,
+      }),
     }
   }
 
diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -114,6 +114,33 @@ export function isPluginDisable(meta: {
   return false
 }
 
+export function setRouteMap(filePath: string): string {
+  let routeMap = globalThis.TurboConsoleRouteMap
+
+  if (typeof routeMap === 'undefined')
+    routeMap = new Map<string, string>()
+
+  if (routeMap.has(filePath))
+    return routeMap.get(filePath)!
+
+  function getRandomString() {
+    const randomString = Math.random().toString(20).substring(2, 6)
+
+    for (const [_, value] of routeMap) {
+      if (value === randomString)
+        return getRandomString()
+    }
+
+    return randomString
+  }
+
+  const randomString = getRandomString()
+  routeMap.set(filePath, randomString)
+  globalThis.TurboConsoleRouteMap = routeMap
+
+  return randomString
+}
+
 export function genConsoleString(genContext: GenContext) {
   const { options, originalColumn, originalLine, argType, id } = genContext
   let { argsName } = genContext
@@ -126,6 +153,9 @@ export function genConsoleString(genContext: GenContext) {
   const fileName = getExtendedPath(filePath, extendedPathFileNames)
   const fileType = extname(filePath)
 
+  const relativePath = relative(cwd(), filePath)
+  const routeMapString = setRouteMap(relativePath)
+
   // Parsing escaped unicode symbols
   try {
     argsName = JSON.parse(`"${argsName}"`)
@@ -139,9 +169,9 @@ export function genConsoleString(genContext: GenContext) {
 
   // not output when argtype is string or number
   const lineInfo = `%c🚀 ${fileName}\u00B7${originalLine}${['StringLiteral', 'NumericLiteral'].includes(argType) ? '' : ` ~ ${argsName}`}`
-  const codePosition = `${relative(cwd(), filePath)}:${originalLine}:${(originalColumn || 0) + 1}`
+  const codePosition = `${routeMapString},${originalLine},${(originalColumn || 0) + 1}`
 
-  const launchEditorString = `%c🔦 http://localhost:${port}#${Buffer.from(codePosition, 'utf-8').toString('base64')}`
+  const launchEditorString = `%c🔦 http://localhost:${port}#${codePosition}`
 
   let consoleString = ''
 
diff --git a/src/globals.d.ts b/src/globals.d.ts
@@ -0,0 +1,7 @@
+/* eslint-disable no-var */
+/* eslint-disable vars-on-top */
+export interface global {}
+
+declare global {
+  var TurboConsoleRouteMap: Map<string, string>
+}
diff --git a/test/routeMap.test.ts b/test/routeMap.test.ts
@@ -0,0 +1,10 @@
+import { describe, expect, it, vi } from 'vitest'
+import { setRouteMap } from '../src/core/utils'
+
+describe('route map', () => {
+  it('should work', () => {
+    setRouteMap('src/app.vue')
+
+    expect(globalThis.TurboConsoleRouteMap instanceof Map).toMatchInlineSnapshot(`true`)
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,5 +11,6 @@
     "esModuleInterop": true,
     "skipLibCheck": true
   },
+  "include": ["src/**/*d.ts"],
   "exclude": ["node_modules", "dist", "playground", "eslint.config.js", "examples"]
 }

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,12 @@ export async function transform(context: Context) {`
`15`	`15`	`if (!compiler) {`
`16`	`16`	`return {`
`17`	`17`	`code: magicString.toString(),`
`18`		`- map: magicString.generateMap({ source: id }),`
	`18`	`+ map: magicString.generateMap({`
	`19`	`+ source: id,`
	`20`	`+ file: id,`
	`21`	`+ includeContent: true,`
	`22`	`+ hires: true,`
	`23`	`+ }),`
`19`	`24`	`}`
`20`	`25`	`}`
`21`	`26`