refactor(playground): Worker code handling
MODIFY
website/playground/src/App.tsx
website/playground/src/App.tsx
@@ -9,8 +9,6 @@ import {
} from "./utils";
import DesktopPlayground from "./DesktopPlayground";
import { MobilePlayground } from "./MobilePlayground";
-import RomeWorker from "./romeWorker?worker";
-import PrettierWorker from "./prettierWorker?worker";
function App() {
const [loadingState, setLoadingState] = useState(LoadingState.Loading);
@@ -30,11 +28,18 @@ function App() {
const [prettierOutput, setPrettierOutput] = useState({ code: "", ir: "" });
useEffect(() => {
- romeWorkerRef.current = new RomeWorker();
- prettierWorkerRef.current = new PrettierWorker();
+ romeWorkerRef.current = new Worker(new URL(
+ "./romeWorker",
+ import.meta.url,
+ ), { type: "module" });
+ prettierWorkerRef.current = new Worker(new URL(
+ "./prettierWorker",
+ import.meta.url,
+ ), { type: "module" });
romeWorkerRef.current.addEventListener("message", (event) => {
- if (event.data.type === "init") {
+ switch (event.data.type) {
+ case "init": {
const loadingState = event.data.loadingState as LoadingState;
setLoadingState(loadingState);
if (loadingState === LoadingState.Success) {
@@ -42,20 +47,35 @@ function App() {
const localStorageRomeConfig = loadRomeConfigFromLocalStorage();
setRomeConfig({ ...romeConfig, ...localStorageRomeConfig });
}
+ break;
}
- if (event.data.type === "formatted") {
+
+ case "formatted": {
setRomeOutput(event.data.romeOutput);
+ break;
+ }
+
+ default:
+ console.error(`Unknown message ${event.data.type}`);
}
});
+
prettierWorkerRef.current.addEventListener("message", (event) => {
- if (event.data.type === "init") {
- setLoadingState(event.data.loadingState as LoadingState);
- }
- if (event.data.type === "formatted") {
+ switch (event.data.type) {
+ case "formatted": {
setPrettierOutput(event.data.prettierOutput);
+ break;
+ }
+
+ default:
+ console.error(`Unknown message ${event.data.type}`);
}
});
+ romeWorkerRef.current?.postMessage({
+ type: "init",
+ });
+
return () => {
romeWorkerRef.current?.terminate();
prettierWorkerRef.current?.terminate();
@@ -66,8 +86,18 @@ function App() {
if (loadingState !== LoadingState.Success) {
return;
}
+
+ // Throttle the formatting so that it doesn't run on every keystroke to prevent that the
+ // workers are busy formatting outdated code.
+ let timeout = setTimeout(() => {
romeWorkerRef.current?.postMessage({ type: "format", playgroundState });
- prettierWorkerRef.current?.postMessage({ type: "format", playgroundState });
+ prettierWorkerRef.current?.postMessage({
+ type: "format",
+ playgroundState,
+ });
+ }, 100);
+
+ return () => clearTimeout(timeout);
}, [loadingState, playgroundState]);
switch (loadingState) {

MODIFY
website/playground/src/prettierWorker.ts
website/playground/src/prettierWorker.ts
import { formatWithPrettier } from "./utils";
-let timeout: number;
self.addEventListener("message", (e) => {
- clearTimeout(timeout);
-
- if (e.data.type === "format") {
+ switch (e.data.type) {
+ case "format": {
const {
code,
lineWidth,
@@ -13,7 +11,6 @@ self.addEventListener("message", (e) => {
quoteStyle,
isTypeScript,
} = e.data.playgroundState;
- timeout = setTimeout(() => {
const prettierOutput = formatWithPrettier(code, {
lineWidth,
indentStyle,
@@ -21,10 +18,16 @@ self.addEventListener("message", (e) => {
language: isTypeScript ? "ts" : "js",
quoteStyle,
});
+
self.postMessage({
type: "formatted",
prettierOutput,
});
- }, 500);
+
+ break;
+ }
+
+ default:
+ console.error(`Unknown message ${e.data.type}.`);
}
});

MODIFY
website/playground/src/romeWorker.ts
website/playground/src/romeWorker.ts
import init, { PlaygroundFormatOptions, run } from "../pkg/rome_playground";
import { IndentStyle, TreeStyle, LoadingState } from "./types";
-init()
- .then(() => {
+self.addEventListener("message", async (e) => {
+ switch (e.data.type) {
+ case "init": {
+ try {
+ await init();
self.postMessage({ type: "init", loadingState: LoadingState.Success });
- })
- .catch(() => {
+ } catch {
self.postMessage({ type: "init", loadingState: LoadingState.Error });
- });
-
-let timeout: number;
+ }
-self.addEventListener("message", (e) => {
- clearTimeout(timeout);
+ break;
+ }
- if (e.data.type === "format") {
+ case "format": {
const {
code,
lineWidth,
@@ -26,7 +26,6 @@ self.addEventListener("message", (e) => {
sourceType,
treeStyle,
} = e.data.playgroundState;
- timeout = setTimeout(() => {
const romeOutput = run(
code,
new PlaygroundFormatOptions(
@@ -49,6 +48,11 @@ self.addEventListener("message", (e) => {
formatter_ir: romeOutput.formatter_ir,
},
});
- }, 500);
+
+ break;
+ }
+
+ default:
+ console.error(`Unknown message '${e.data.type}'.`);
}
});

refactor(playground): Worker code handling (#2888)