fix(): use comlink to simplify worker usage

Author: weareoutman

bricks/vs/package.json

@@ -66,6 +66,7 @@
     "@next-core/theme": "^1.5.4",
     "@next-core/utils": "^1.7.32",
     "@next-shared/form": "^0.7.9",
+    "comlink": "^4.4.2",
     "monaco-editor": "^0.50.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "react": "0.0.0-experimental-ee8509801-20230117",

bricks/vs/src/code-editor/index.tsx

@@ -52,8 +52,7 @@ import classNames from "classnames";
 import "./index.css";
 import { EmbeddedModelContext } from "./utils/embeddedModelState.js";
 import { PlaceholderContentWidget } from "./widget/Placeholder.js";
-import { getYamlLinterWorker } from "./workers/yamlLinter.js";
-import type { LintResponse } from "./workers/lintYaml.js";
+import { getRemoteYamlLinterWorker } from "./workers/yamlLinter.js";
 import { register as registerCel } from "./languages/cel.js";
 import { register as registerCelYaml } from "./languages/cel-yaml.js";
 import { register as registerCelStr } from "./languages/cel-str.js";
@@ -953,67 +952,65 @@ export function CodeEditorComponent({
   // istanbul ignore next
   useEffect(() => {
     const editor = editorRef.current;
-    if (editor && language === "brick_next_yaml") {
-      const yamlLinter = getYamlLinterWorker();
-      const handleChange = (): void => {
-        const value = editor.getValue();
-        yamlLinter.postMessage({
-          id: workerId,
-          source: value,
-          links,
-          markers,
-        });
-      };
-      const debounceChange = debounce(handleChange, 200);
-      const handleLintResponse = (event: MessageEvent<LintResponse>): void => {
-        const { id, lintMarkers, lintDecorations } = event.data;
-        if (id !== workerId) {
-          return;
-        }
-        const model = editor.getModel();
-        if (!model) {
-          return;
-        }
-        monaco.editor.setModelMarkers(
-          model,
-          "brick_next_yaml_lint",
-          lintMarkers.map(({ start, end, message, severity, code }) => {
-            const startPos = model.getPositionAt(start);
-            const endPos = model.getPositionAt(end);
-            return {
-              startLineNumber: startPos.lineNumber,
-              startColumn: startPos.column,
-              endLineNumber: endPos.lineNumber,
-              endColumn: endPos.column,
-              severity: monaco.MarkerSeverity[severity],
-              message,
-              code: code as monaco.editor.IMarkerData["code"],
-            };
-          })
-        );
-        decorationsCollection.current?.set(
-          lintDecorations.map(({ start, end, options }) => ({
-            range: monaco.Range.fromPositions(
-              model.getPositionAt(start),
-              model.getPositionAt(end)
-            ),
-            options,
-          }))
-        );
-      };
-      yamlLinter.addEventListener("message", handleLintResponse);
-      const change = editor.onDidChangeModelContent(debounceChange);
-      debounceChange();
-      return () => {
-        change.dispose();
-        monaco.editor.setModelMarkers(
-          editor.getModel()!,
-          "brick_next_yaml_lint",
-          []
-        );
-        yamlLinter.removeEventListener("message", handleLintResponse);
-      };
+    if (!(editor && language === "brick_next_yaml")) {
+      return;
     }
+
+    let ignore = false;
+    const handleChange = async () => {
+      const worker = await getRemoteYamlLinterWorker();
+      if (ignore) {
+        return;
+      }
+      const { lintMarkers, lintDecorations } = await worker.lint({
+        source: editor.getValue(),
+        links,
+        markers,
+      });
+      const model = editor.getModel();
+      if (ignore || !model) {
+        return;
+      }
+      monaco.editor.setModelMarkers(
+        model,
+        "brick_next_yaml_lint",
+        lintMarkers.map(({ start, end, message, severity, code }) => {
+          const startPos = model.getPositionAt(start);
+          const endPos = model.getPositionAt(end);
+          return {
+            startLineNumber: startPos.lineNumber,
+            startColumn: startPos.column,
+            endLineNumber: endPos.lineNumber,
+            endColumn: endPos.column,
+            severity: monaco.MarkerSeverity[severity],
+            message,
+            code: code as monaco.editor.IMarkerData["code"],
+          };
+        })
+      );
+      decorationsCollection.current?.set(
+        lintDecorations.map(({ start, end, options }) => ({
+          range: monaco.Range.fromPositions(
+            model.getPositionAt(start),
+            model.getPositionAt(end)
+          ),
+          options,
+        }))
+      );
+    };
+    const debounceChange = debounce(handleChange, 200);
+    const change = editor.onDidChangeModelContent(debounceChange);
+    debounceChange();
+
+    return () => {
+      ignore = true;
+      change.dispose();
+      monaco.editor.setModelMarkers(
+        editor.getModel()!,
+        "brick_next_yaml_lint",
+        []
+      );
+    };
   }, [language, links, markers, theme, workerId]);
 
   return (

bricks/vs/src/code-editor/workers/lintYaml.spec.ts

@@ -4,47 +4,39 @@ import { lintYaml } from "./lintYaml";
 describe("lintYaml", () => {
   test("plain with no expressions", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "a",
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [],
       lintDecorations: [],
     });
   });
 
   test("plain with not string value", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "1",
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [],
       lintDecorations: [],
     });
   });
 
   test("plain with correct expression", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "<% a %>",
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [],
       lintDecorations: [],
     });
   });
 
   test("plain with incorrect expression", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "<% a. %>",
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [
         {
           start: 5,
@@ -59,12 +51,10 @@ describe("lintYaml", () => {
 
   test("block with CTX of links", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "|\n  <%\n    STATE.b,\n    CTX.abc\n    %>\n",
       links: ["CTX"],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [],
       lintDecorations: [
         {
@@ -80,7 +70,6 @@ describe("lintYaml", () => {
 
   test("block with STATE of markers", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "|-\n  <%\n    STATE.b,\n    CTX.abc\n    %>\n",
       markers: [
         {
@@ -91,7 +80,6 @@ describe("lintYaml", () => {
       ],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [
         {
           start: 12,
@@ -106,7 +94,6 @@ describe("lintYaml", () => {
 
   test("single-quote with non-expressions", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "'CTX.a'",
       links: ["CTX"],
       markers: [
@@ -118,15 +105,13 @@ describe("lintYaml", () => {
       ],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [],
       lintDecorations: [],
     });
   });
 
   test("single-quote with CTX", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "'<% CTX(), CTX.b, STATE.c %>'",
       links: ["CTX"],
       markers: [
@@ -138,7 +123,6 @@ describe("lintYaml", () => {
       ],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [
         {
           start: 18,
@@ -161,12 +145,10 @@ describe("lintYaml", () => {
 
   test("single-quote incorrect expression", async () => {
     const result = await lintYaml({
-      id: "1",
       source: "'<% CTX[''a''], CTX'' %>'",
       links: ["CTX"],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [
         {
           start: 19,
@@ -181,12 +163,10 @@ describe("lintYaml", () => {
 
   test("double-quote with CTX", async () => {
     const result = await lintYaml({
-      id: "1",
       source: '"<% CTX[\\"a\\"], CTX.b, CTX[\\"c\\"] %>"',
       links: ["CTX"],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [],
       lintDecorations: [
         {
@@ -202,12 +182,10 @@ describe("lintYaml", () => {
 
   test("double-quote incorrect expression", async () => {
     const result = await lintYaml({
-      id: "1",
       source: '"<% CTX[\\"a\\"], CTX) %>"',
       links: ["CTX"],
     });
     expect(result).toEqual({
-      id: "1",
       lintMarkers: [
         {
           start: 19,

bricks/vs/src/code-editor/workers/lintYaml.ts

@@ -5,14 +5,12 @@ import type * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import type { Marker } from "..";
 
 export interface LintRequest {
-  id: string;
   source: string;
   links?: string[];
   markers?: Marker[];
 }
 
 export interface LintResponse {
-  id: string;
   lintMarkers: LintMarker[];
   lintDecorations: LintDecoration[];
 }
@@ -57,7 +55,6 @@ const LEVEL_TO_SEVERITY_NAME = {
 } as const;
 
 export async function lintYaml({
-  id,
   source,
   links,
   markers,
@@ -279,7 +276,6 @@ export async function lintYaml({
   }
 
   return {
-    id,
     lintMarkers,
     lintDecorations,
   };

bricks/vs/src/code-editor/workers/yamlLinter.ts

@@ -1,8 +1,26 @@
 // istanbul ignore file
+import { wrap } from "comlink";
+import type { LintRequest, LintResponse } from "./lintYaml";
+
+export interface RemoteYamlLinterWorker {
+  lint(req: LintRequest): Promise<LintResponse>;
+}
+
+let remoteWorkerPromise: Promise<RemoteYamlLinterWorker> | undefined;
 
 let worker: Worker | undefined;
 
-export function getYamlLinterWorker() {
+export function getRemoteYamlLinterWorker() {
+  if (!remoteWorkerPromise) {
+    remoteWorkerPromise = (async () => {
+      const Remote = wrap<{ new (): RemoteYamlLinterWorker }>(getWorker());
+      return await new Remote();
+    })();
+  }
+  return remoteWorkerPromise;
+}
+
+export function getWorker() {
   if (!worker) {
     worker = new Worker(new URL("./yamlLinter.worker.ts", import.meta.url));
   }

bricks/vs/src/code-editor/workers/yamlLinter.worker.ts

@@ -1,7 +1,11 @@
+// istanbul ignore file
+import { expose } from "comlink";
 import { lintYaml, type LintRequest } from "./lintYaml";
 
-self.addEventListener("message", async (event: MessageEvent<LintRequest>) => {
-  const response = await lintYaml(event.data);
+class YamlLinterWorker {
+  lint(req: LintRequest) {
+    return lintYaml(req);
+  }
+}
 
-  self.postMessage(response);
-});
+expose(YamlLinterWorker);