feat: better client tips

unplugin · Apr 21, 2024 · 477e7bd · 477e7bd
1 parent b3e2960
commit 477e7bd
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 11 deletions.
diff --git a/src/core/client/index.html b/src/core/client/index.html
@@ -18,15 +18,40 @@
 
 <body>
   <main class="container">
-    <article>
+    <h3>Launch Editor</h3>
+    <article id="error" style="display: none;">
       <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>.
+      <code id="error-info" style="color: #EE402E">
+
+      </code>
+      <hr />
+      <p>
+        <small>
+          You can checkout <a href="https://github.com/unplugin/unplugin-turbo-console#troubleshooting"
+            target="_blank">troubleshooting</a> and <a
+            href="https://github.com/unplugin/unplugin-turbo-console/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed">closed
+            issues</a> first.
+        </small>
+
+        <br>
+
+        <small>If the problem is still not solved. Please open a <a
+            href="https://github.com/unplugin/unplugin-turbo-console/issues/new?assignees=&labels=pending+triage&projects=&template=bug_report.yml"
+            target="_blank">new issue</a>.
         </small>
+      </p>
+
+    </article>
+
+    <article id="success" style="display: block;">
+      <p>🎉 Everything is normal</p>
     </article>
+
+    <footer>
+      <small id="version" style="color: #777777">
+
+      </small>
+    </footer>
   </main>
 </body>
 <script>
@@ -35,8 +60,15 @@ <h4>Ops, It get some error when launch to the editor:</h4>
       const position = window.location.hash.slice(1)
       const raw = await fetch(`/launchEditor?position=${(position)}`)
       const response = await raw.json()
-      if (response.status === 'error')
+      const versionEl = document.getElementById('version')
+      versionEl.innerText = `version: ${response.version}`
+      if (response.status === 'error') {
+        const error = document.getElementById('error')
+        error.style.display = 'block'
+        const success = document.getElementById('success')
+        success.style.display = 'none'
         throw new Error(response.message)
+      }
 
       window.close()
     }

diff --git a/src/core/client/inspect/index.html b/src/core/client/inspect/index.html
@@ -33,6 +33,10 @@ <h2>Unplugin Turbo Console</h2>
     </article>
 
     <footer>
+      <small id="version" style="color: #777777">
+
+      </small>
+      <br>
       <a target="_blank" href="https://github.com/unplugin/unplugin-turbo-console" class="secondary">Star On GitHub</a>
     </footer>
   </main>
@@ -42,7 +46,11 @@ <h2>Unplugin Turbo Console</h2>
   import { codeToHtml } from 'https://esm.sh/shiki@1.0.0'
 
   const raw = await fetch('/filePathMap')
-  const filePathMap = await raw.json()
+  const response = await raw.json()
+  const filePathMap = response.filePathMap
+
+  const versionEl = document.getElementById('version')
+  versionEl.innerText = `version: ${response.version}`
 
   let index = 0
   Object.entries(filePathMap).forEach(([key, value]) => {

diff --git a/src/core/server/filePathMap.ts b/src/core/server/filePathMap.ts
@@ -1,6 +1,21 @@
 import { defineEventHandler } from 'h3'
+import { version } from '../../../package.json'
 
 export default defineEventHandler(async () => {
-  const filePathMap = globalThis.TurboConsoleFilePathMap || new Map()
-  return Object.fromEntries(filePathMap)
+  try {
+    const filePathMap = globalThis.TurboConsoleFilePathMap || new Map()
+    return {
+      status: 'success',
+      filePathMap: Object.fromEntries(filePathMap),
+      version,
+    }
+  }
+  catch (error) {
+    return {
+      status: 'error',
+      filePathMap: {},
+      version,
+      message: String(error),
+    }
+  }
 })
diff --git a/src/core/server/launchEditor.ts b/src/core/server/launchEditor.ts
@@ -3,6 +3,7 @@ import { defineEventHandler, getQuery } from 'h3'
 // @ts-expect-error no types
 import launch from 'launch-editor'
 import { resolve } from 'pathe'
+import { version } from '../../../package.json'
 
 export default defineEventHandler(async (event) => {
   try {
@@ -29,11 +30,13 @@ export default defineEventHandler(async (event) => {
     launch(resolve(cwd(), `${filePath}:${line}:${column}`))
     return {
       status: 'success',
+      version,
     }
   }
   catch (error) {
     return {
       status: 'error',
+      version,
       message: String(error),
     }
   }

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -31,7 +31,7 @@ export const launchEditorStyle = 'background: #00DC8250;padding:2px 5px;border-r
 
 export function printInfo(port: number) {
   // eslint-disable-next-line no-console
-  console.log('\x1B[32m%s\x1B[0m\x1B[1m%s\x1B[0m\x1B[36m%s\x1B[0m', '  ➜', `  TurboConsole:`, ` http://localhost:${port}/inspect`)
+  console.log(`  \x1B[32m➜\x1B[39m  \x1B[1mTurboConsole\x1B[22m: \x1B[36mhttp://localhost:\x1B[1m${port}\x1B[22m/inspect\x1B[39m`)
 }
 
 export function getFileNameWithoutExtension(fileName: string) {