feat: load highlight to webworker if available

packages/ui/package.json

@@ -50,6 +50,7 @@
     "highlight.js": "^11.5.1",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
+    "nanoid": "^4.0.1",
     "postcss": "^8.4.12",
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^7.4.3",

packages/ui/src/components/Highlight/Highlight.tsx

@@ -1,14 +1,6 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import hljs from 'highlight.js/lib/core';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import json from 'highlight.js/lib/languages/json';
+import cn from 'clsx';
 import React from 'react';
-import { stacktraceJS } from './languages/stacktrace';
-
-hljs.registerLanguage('json', json);
-hljs.registerLanguage('stacktrace', stacktraceJS);
+import { asyncHighlight } from '../../utils/highlight/highlight';
 
 interface HighlightProps {
   language: 'json' | 'stacktrace';
@@ -30,27 +22,26 @@ export class Highlight extends React.Component<HighlightProps> {
   }
 
   public componentDidMount() {
-    this.highlightCode();
+    return this.highlightCode();
   }
 
   public componentDidUpdate() {
-    this.highlightCode();
+    return this.highlightCode();
   }
 
   public render() {
     const { language } = this.props;
     return (
       <pre ref={this.codeRef}>
-        <code className={language} />
+        <code className={cn('hljs', language)} />
       </pre>
     );
   }
 
-  private highlightCode() {
+  private async highlightCode() {
     const node = this.codeRef.current?.querySelector('code');
     if (node) {
-      node.textContent = this.props.children;
-      hljs.highlightElement(node);
+      node.innerHTML = await asyncHighlight(this.props.children as string, this.props.language);
     }
   }
 }

packages/ui/src/utils/highlight/config.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import hljs from 'highlight.js/lib/core';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import json from 'highlight.js/lib/languages/json';
+import { stacktraceJS } from './languages/stacktrace';
+
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('stacktrace', stacktraceJS);
+
+export const highlighter = hljs;

packages/ui/src/utils/highlight/highlight.ts

@@ -0,0 +1,47 @@
+import { nanoid } from 'nanoid';
+
+const isWebworkerSupported = typeof window.Worker !== 'undefined';
+let highlightWorker: Worker | null = null;
+const messageQueue = new Map<string, { resolve: any; reject: any }>();
+
+export async function asyncHighlight(code: string, language: string): Promise<string> {
+  if (isWebworkerSupported) {
+    if (!highlightWorker) {
+      highlightWorker = new Worker(
+        /* webpackChunkName: "highlight-worker" */ new URL('./worker.ts', import.meta.url)
+      );
+      highlightWorker.onmessage = ({ data }) => {
+        const { id, code } = data;
+        if (messageQueue.has(id)) {
+          const { resolve } = messageQueue.get(id) as any;
+          resolve(code);
+        }
+      };
+    }
+
+    return new Promise((resolve, reject) => {
+      const messageId = nanoid(5);
+      highlightWorker?.postMessage({ id: messageId, code, language });
+      messageQueue.set(messageId, {
+        resolve: (formattedCode: string) => {
+          messageQueue.delete(messageId);
+          resolve(formattedCode);
+        },
+        reject: () => {
+          messageQueue.delete(messageId);
+          reject();
+        },
+      });
+      setTimeout(() => reject(), 60 * 1000);
+    });
+  } else {
+    const { highlighter } = await import(
+      /* webpackChunkName: "highlight" */
+      /* webpackMode: "lazy-once" */
+      /* webpackPreload: true */
+      './config'
+    );
+
+    return highlighter.highlightAuto(code, [language]).value || '';
+  }
+}

packages/ui/src/utils/highlight/worker.ts

@@ -0,0 +1,12 @@
+import { highlighter } from './config';
+
+self.onmessage = ({ data = {} }) => {
+  const { id = '', code = '', language = '' } = data;
+  if (!id || !code || !language) {
+    return;
+  }
+
+  const resp = highlighter.highlightAuto(code, [language]);
+
+  self.postMessage({ code: resp.value, id });
+};

yarn.lock

@@ -9684,6 +9684,11 @@ nanoid@^3.3.1, nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.1.tgz#398d7ccfdbf9faf2231b2ca7e8fff5dbca6a509b"
+  integrity sha512-udKGtCCUafD3nQtJg9wBhRP3KMbPglUsgV5JVsXhvyBs/oefqb4sqMEhKBBgqZncYowu58p1prsZQBYvAj/Gww==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"