optimize error source code location (#47)

HuolalaTech · Oct 11, 2023 · 5bc4269 · 5bc4269
1 parent 47c2353
commit 5bc4269
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/src/pages/Devtools/ConsolePanel/components/ErrorDetailDrawer/index.less b/src/pages/Devtools/ConsolePanel/components/ErrorDetailDrawer/index.less
@@ -15,33 +15,50 @@
     .origin-filename {
       position: absolute;
       left: 12px;
-      top: 0;
+      top: 10px;
       font-size: 14px;
       line-height: 32px;
       color: #aaa;
     }
     pre {
-      padding: 32px 12px 8px;
+      padding: 50px 12px 8px;
       border-radius: 4px;
       overflow: auto;
     }
     code {
       counter-reset: step;
       counter-increment: step calc(var(--start, 1) - 1);
-    }
-    code .line::before {
-      content: counter(step);
-      counter-increment: step;
-      width: 1rem;
-      margin-right: 1rem;
-      display: inline-block;
-      text-align: right;
-      color: rgba(182, 196, 200, 0.507);
-    }
-    code .line:nth-child(5) {
-      &::before {
-        color: #eee;
-        font-weight: 700;
+      .line {
+        color: rgba(182, 196, 200, 0.507);
+        opacity: 0.5;
+        &::before {
+          content: counter(step);
+          counter-increment: step;
+          width: 1rem;
+          margin-right: 1rem;
+          display: inline-block;
+          text-align: right;
+        }
+        &:nth-child(5) {
+          opacity: 1;
+          &::before {
+            color: #eee;
+            font-weight: 700;
+          }
+        }
+      }
+      .error-line {
+        display: inline-block;
+        margin-bottom: 1em;
+        position: relative;
+        font-size: 14px;
+        &::after {
+          content: '^';
+          color: #f97583;
+          position: absolute;
+          left: calc(2rem + var(--position) * 1ch);
+          top: 100%;
+        }
       }
     }
   }

diff --git a/src/utils/parseError.ts b/src/utils/parseError.ts
@@ -67,10 +67,25 @@ const locateSourceCode = (data: {
           [];
         const sourceContent = list.join('\n');
         const lang = getFileExtension(source) || 'js';
-        const highlighter = await sh.get();
-        const sourceHTML = highlighter.codeToHtml(sourceContent, {
+        const highlighter = await sh.get({
+          lang: lang as Lang,
+        });
+        const tokens = highlighter.codeToThemedTokens(
+          sourceContent,
           lang,
-          theme: 'github-dark',
+          'github-dark',
+        );
+        let index = 0;
+        const sourceHTML = window.shiki.renderToHtml(tokens, {
+          bg: highlighter.getBackgroundColor('github-dark'),
+          elements: {
+            line({ className, children }) {
+              if (index++ === 4) {
+                return `<span class="${className} error-line" style="--position: ${column}">${children}</span>`;
+              }
+              return `<span class="${className}">${children}</span>`;
+            },
+          },
         });
         resolve({
           line,