From ff58657800b468c9551f81a2180799bfa31e1b1e Mon Sep 17 00:00:00 2001 From: otariidae Date: Sun, 18 Jun 2023 16:05:33 +0900 Subject: [PATCH] feat(script-compiler): add id property in lint and fix messages (#73) --- packages/@textlint/script-compiler/README.md | 2 + .../script-compiler/example/webindex.html | 2 + .../src/CodeGenerator/worker-codegen.ts | 7 +++ packages/textchecker-element/index.ts | 43 ++++++++----------- .../app/scripts/background/textlint.ts | 39 ++++++++--------- 5 files changed, 47 insertions(+), 46 deletions(-) diff --git a/packages/@textlint/script-compiler/README.md b/packages/@textlint/script-compiler/README.md index 942ae16..f3f36b6 100644 --- a/packages/@textlint/script-compiler/README.md +++ b/packages/@textlint/script-compiler/README.md @@ -49,9 +49,11 @@ worker.addEventListener('message', function (event) { } }, }); + const id = crypto.randomUUID(); setTimeout(() => { // lint worker.postMessage({ + id, command: "lint", text: "お刺身が食べれない", ext: ".md" diff --git a/packages/@textlint/script-compiler/example/webindex.html b/packages/@textlint/script-compiler/example/webindex.html index c9ce8cf..01abecd 100644 --- a/packages/@textlint/script-compiler/example/webindex.html +++ b/packages/@textlint/script-compiler/example/webindex.html @@ -22,8 +22,10 @@ } }, }); + const id = crypto.randomUUID(); setTimeout(() => { worker.postMessage({ + id, command: "lint", text: "お刺身が食べれない", ext: ".md" diff --git a/packages/@textlint/script-compiler/src/CodeGenerator/worker-codegen.ts b/packages/@textlint/script-compiler/src/CodeGenerator/worker-codegen.ts index 7b30c2c..82ded81 100644 --- a/packages/@textlint/script-compiler/src/CodeGenerator/worker-codegen.ts +++ b/packages/@textlint/script-compiler/src/CodeGenerator/worker-codegen.ts @@ -2,13 +2,16 @@ import { TextlintConfigDescriptor } from "@textlint/config-loader"; import type { TextlintFixResult, TextlintResult } from "@textlint/types"; import { TextlintScriptMetadata } from "@textlint/script-parser"; +export type MessageId = string; export type TextlintWorkerCommandLint = { + id?: MessageId; command: "lint"; text: string; ext: string; ruleId?: string; }; export type TextlintWorkerCommandFix = { + id?: MessageId; command: "fix"; text: string; ext: string; @@ -28,10 +31,12 @@ export type TextlintWorkerCommandResponseInit = { metadata: TextlintScriptMetadata; }; export type TextlintWorkerCommandResponseLint = { + id: MessageId | undefined; command: "lint:result"; result: TextlintResult; }; export type TextlintWorkerCommandResponseFix = { + id: MessageId | undefined; command: "fix:result"; result: TextlintFixResult; }; @@ -130,6 +135,7 @@ self.addEventListener('message', (event) => { ext: data.ext, }).then(result => { return self.postMessage({ + id: data.id, command: "lint:result", result }); @@ -143,6 +149,7 @@ self.addEventListener('message', (event) => { ext: data.ext, }).then(result => { return self.postMessage({ + id: data.id, command: "fix:result", result }); diff --git a/packages/textchecker-element/index.ts b/packages/textchecker-element/index.ts index 6270431..2c3bbb9 100644 --- a/packages/textchecker-element/index.ts +++ b/packages/textchecker-element/index.ts @@ -37,24 +37,22 @@ const waiterForInit = (worker: Worker) => { } }; }; +const generateMessageId = () => crypto.randomUUID(); const createTextlint = ({ worker, ext }: { worker: Worker; ext: string }) => { const lintText: LintEngineAPI["lintText"] = async ({ text }: { text: string }): Promise => { updateStatus("linting..."); return new Promise((resolve, _reject) => { - worker.addEventListener( - "message", - function (event) { - const data: TextlintWorkerCommandResponse = event.data; - if (data.command === "lint:result") { - resolve([data.result]); - } - updateStatus("linted"); - }, - { - once: true + const id = generateMessageId(); + worker.addEventListener("message", function handler(event) { + const data: TextlintWorkerCommandResponse = event.data; + if (data.command === "lint:result" && data.id === id) { + resolve([data.result]); + worker.removeEventListener("message", handler); } - ); + updateStatus("linted"); + }); return worker.postMessage({ + id, command: "lint", text, ext: ext @@ -70,20 +68,17 @@ const createTextlint = ({ worker, ext }: { worker: Worker; ext: string }) => { }): Promise => { updateStatus("fixing..."); return new Promise((resolve, _reject) => { - worker.addEventListener( - "message", - function (event) { - const data: TextlintWorkerCommandResponse = event.data; - if (data.command === "fix:result") { - resolve(data.result); - } - updateStatus("fixed"); - }, - { - once: true + const id = generateMessageId(); + worker.addEventListener("message", function handler(event) { + const data: TextlintWorkerCommandResponse = event.data; + if (data.command === "fix:result" && data.id === id) { + resolve(data.result); + worker.removeEventListener("message", handler); } - ); + updateStatus("fixed"); + }); return worker.postMessage({ + id, command: "fix", text, ruleId: message?.ruleId, diff --git a/packages/webextension/app/scripts/background/textlint.ts b/packages/webextension/app/scripts/background/textlint.ts index 5f717c4..e4458a4 100644 --- a/packages/webextension/app/scripts/background/textlint.ts +++ b/packages/webextension/app/scripts/background/textlint.ts @@ -47,6 +47,7 @@ const createWorkerRef = (worker: Worker) => { } }; }; +const generateMessageId = () => crypto.randomUUID(); export type TextlintWorker = ReturnType; export const createTextlintWorker = (script: Script) => { const blob = new Blob([script.code], { type: "application/javascript" }); @@ -56,19 +57,16 @@ export const createTextlintWorker = (script: Script) => { const workerRef = createWorkerRef(defaultWorker); const lintText = async ({ text, ext }: { text: string; ext: string }): Promise => { return new Promise((resolve, _reject) => { - workerRef.current.addEventListener( - "message", - function (event) { - const data: TextlintWorkerCommandResponse = event.data; - if (data.command === "lint:result") { - resolve([data.result]); - } - }, - { - once: true + const id = generateMessageId(); + workerRef.current.addEventListener("message", function handler(event) { + const data: TextlintWorkerCommandResponse = event.data; + if (data.command === "lint:result" && data.id === id) { + resolve([data.result]); + workerRef.current.removeEventListener("message", handler); } - ); + }); return workerRef.current.postMessage({ + id, command: "lint", text, ext @@ -88,19 +86,16 @@ export const createTextlintWorker = (script: Script) => { message?: TextlintMessage; }): Promise => { return new Promise((resolve, _reject) => { - workerRef.current.addEventListener( - "message", - function (event) { - const data: TextlintWorkerCommandResponse = event.data; - if (data.command === "fix:result") { - resolve(data.result); - } - }, - { - once: true + const id = generateMessageId(); + workerRef.current.addEventListener("message", function handler(event) { + const data: TextlintWorkerCommandResponse = event.data; + if (data.command === "fix:result" && data.id === id) { + resolve(data.result); + workerRef.current.removeEventListener("message", handler); } - ); + }); return workerRef.current.postMessage({ + id, command: "fix", text, ruleId: message?.ruleId,