Merge pull request #63 from easyops-cn/steve/update-istanbul

chore(): update istanbul-lib-instrument to support ESM when reading coverage

Author: weareoutman

bricks/mini-chart/src/mini-line-chart/getRemoteWorker.ts

@@ -1,9 +1,6 @@
 // istanbul ignore file
 import { wrap } from "comlink";
 import type { MiniLineChartOptions } from "./draw.js";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { getChartWorker } from "./worker.mjs";
 
 export interface RemoteWorker {
   init(id: string, canvas: OffscreenCanvas): Promise<void>;
@@ -13,12 +10,21 @@ export interface RemoteWorker {
 
 let remoteWorkerPromise: Promise<RemoteWorker> | undefined;
 
+let worker: Worker | undefined;
+
 export function getRemoteWorker() {
   if (!remoteWorkerPromise) {
     remoteWorkerPromise = (async () => {
-      const Remote = wrap(getChartWorker()) as any;
+      const Remote = wrap<{ new (): RemoteWorker }>(getWorker());
       return await new Remote();
     })();
   }
   return remoteWorkerPromise;
 }
+
+function getWorker() {
+  if (!worker) {
+    worker = new Worker(new URL("./chart.worker.ts", import.meta.url));
+  }
+  return worker;
+}

bricks/mini-chart/src/mini-line-chart/index.spec.tsx

@@ -14,7 +14,6 @@ jest.mock("./getRemoteWorker.js", () => ({
     });
   },
 }));
-jest.mock("./worker.mjs", () => ({}));
 jest.mock("./draw.js");
 
 jest.mock(

bricks/mini-chart/src/mini-line-chart/worker.mjs

@@ -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/package.json

@@ -7,7 +7,7 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 jest.mock("@next-core/theme", () => ({}));
 jest.mock("@next-core/react-runtime");
-jest.mock("./workers/yamlLinter", () => ({}));
+jest.mock("./workers/yamlLinter.js", () => ({}));
 
 global.ResizeObserver = ResizeObserver as any;
 

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

@@ -52,10 +52,7 @@ import classNames from "classnames";
 import "./index.css";
 import { EmbeddedModelContext } from "./utils/embeddedModelState.js";
 import { PlaceholderContentWidget } from "./widget/Placeholder.js";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { getYamlLinterWorker } from "./workers/yamlLinter.mjs";
-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";
@@ -955,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/index.tsx

@@ -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,