Website: refactor prettier worker (#18572)

website/playground/Playground.jsx

@@ -2,6 +2,7 @@ import { reactive, watch } from "vue";
 import { Button, ClipboardButton } from "./buttons.jsx";
 import getCodeSample from "./codeSamples.mjs";
 import { editorState } from "./composables/editor-state.js";
+import { worker } from "./composables/prettier-worker.js";
 import generateDummyId from "./dummyId.js";
 import formatMarkdown from "./markdown.js";
 import { getCodemirrorMode } from "./panel/language.js";
@@ -190,7 +191,7 @@ function setup(props) {
 
     const { content, selection } = state;
 
-    return props.worker
+    return worker
       .format(content, {
         parser: "__js_expression",
         cursorOffset: selection?.anchor ?? -1,
@@ -234,12 +235,10 @@ function setup(props) {
   };
 
   const render = () => {
-    const { worker } = props;
     const { content, options } = state;
 
     return (
       <PrettierFormat
-        worker={worker}
         code={content}
         options={options}
         debugAst={editorState.showAst}
@@ -546,7 +545,6 @@ function setup(props) {
 const Playground = {
   name: "Playground",
   props: {
-    worker: { type: Object, required: true },
     availableOptions: { type: Array, required: true },
     version: { type: String, required: true },
   },

website/playground/PrettierFormat.js

@@ -1,4 +1,5 @@
 import { onMounted, reactive, toRaw, watch } from "vue";
+import { worker } from "./composables/prettier-worker.js";
 
 function setup(props, { slots }) {
   const state = reactive({ formatted: "", debug: {} });
@@ -9,7 +10,6 @@ function setup(props, { slots }) {
 
   const format = async () => {
     let {
-      worker,
       code,
       options,
       debugAst: ast,
@@ -60,7 +60,6 @@ function setup(props, { slots }) {
 export default {
   name: "PrettierFormat",
   props: {
-    worker: Object,
     code: String,
     options: Object,
     debugAst: Boolean,

website/playground/WorkerApi.js

@@ -1,39 +0,0 @@
-export default function WorkerApi() {
-  const worker = new Worker("/worker.mjs", { type: "module" });
-  let counter = 0;
-  const handlers = {};
-
-  worker.addEventListener("message", (event) => {
-    const { uid, message, error } = event.data;
-
-    if (!handlers[uid]) {
-      return;
-    }
-
-    const [resolve, reject] = handlers[uid];
-    delete handlers[uid];
-
-    if (error) {
-      reject(error);
-    } else {
-      resolve(message);
-    }
-  });
-
-  function postMessage(message) {
-    const uid = ++counter;
-    return new Promise((resolve, reject) => {
-      handlers[uid] = [resolve, reject];
-      worker.postMessage({ uid, message });
-    });
-  }
-
-  return {
-    getMetadata() {
-      return postMessage({ type: "meta" });
-    },
-    format(code, options, debug = {}) {
-      return postMessage({ type: "format", code, options, debug });
-    },
-  };
-}

website/playground/composables/prettier-worker.js

@@ -0,0 +1,48 @@
+class WorkerApi {
+  #worker = new Worker("/worker.mjs", { type: "module" });
+  #counter = 0;
+  #handlers = {};
+
+  constructor() {
+    const worker = this.#worker;
+    const handlers = this.#handlers;
+
+    worker.addEventListener("message", (event) => {
+      const { uid, message, error } = event.data;
+
+      if (!handlers[uid]) {
+        return;
+      }
+
+      const [resolve, reject] = handlers[uid];
+      delete handlers[uid];
+
+      if (error) {
+        reject(error);
+      } else {
+        resolve(message);
+      }
+    });
+  }
+
+  #postMessage(message) {
+    const uid = ++this.#counter;
+    const worker = this.#worker;
+    return new Promise((resolve, reject) => {
+      this.#handlers[uid] = [resolve, reject];
+      worker.postMessage({ uid, message });
+    });
+  }
+
+  getMetadata() {
+    return this.#postMessage({ type: "meta" });
+  }
+
+  format(code, options, debug = {}) {
+    return this.#postMessage({ type: "format", code, options, debug });
+  }
+}
+
+const worker = new WorkerApi();
+
+export { worker };

website/playground/index.jsx

@@ -1,16 +1,15 @@
 import "./install-service-worker.js";
 
 import { createApp, onMounted, reactive } from "vue";
+import { worker } from "./composables/prettier-worker.js";
 import Header from "./header.vue";
 import Playground from "./Playground.jsx";
 import { fixPrettierVersion } from "./utilities.js";
-import WorkerApi from "./WorkerApi.js";
 
 const App = {
   name: "App",
   setup() {
     const state = reactive({ loaded: false });
-    const worker = new WorkerApi();
 
     const componentDidMount = async () => {
       const { supportInfo, version } = await worker.getMetadata();
@@ -32,11 +31,7 @@ const App = {
       return (
         <>
           <Header version={version}></Header>
-          <Playground
-            worker={worker}
-            availableOptions={availableOptions}
-            version={version}
-          />
+          <Playground availableOptions={availableOptions} version={version} />
         </>
       );
     };