use discriminated union for worker state to remove duplicated state

Author: mostthingsweb

src/main/components/EditorParseListener.tsx

@@ -7,16 +7,16 @@ const PARSE_DEBOUNCE_MS = 600;
 
 export const EditorParseListener: React.FC = () => {
     const text = useSelector(selectEditorText);
-    const { getClient, status, prepared } = usePyodideWorker();
+    const { getClient, workerState } = usePyodideWorker();
     const timeoutRef = useRef<number | null>(null);
 
     useEffect(() => {
         const client = getClient();
+        const status = workerState.status;
 
         if (
             !client ||
             status !== "ready" ||
-            !prepared ||
             text.trim().length === 0
         ) {
             return;
@@ -42,7 +42,7 @@ export const EditorParseListener: React.FC = () => {
                 timeoutRef.current = null;
             }
         };
-    }, [getClient, prepared, status, text]);
+    }, [getClient, text, workerState]);
 
     return null;
 };

src/main/components/layout.tsx

@@ -65,16 +65,17 @@ const json: IJsonModel = {
 const model = Model.fromJson(json);
 
 const LayoutWrapper = () => {
-    const { status, getClient, prepared } = usePyodideWorker();
+    const { workerState, getClient } = usePyodideWorker();
 
     const factory = (node: TabNode) => {
         const component = node.getComponent();
         const client = getClient();
+        const status = workerState.status;
         if (component === "terminal") {
             if (!client || status === "error") {
                 return <div className="p-3">Pyodide failed to start.</div>;
             }
-            if (!prepared || status !== "ready") {
+            if (status !== "ready") {
                 return <div className="p-3">Pyodide is starting...</div>;
             }
             return <PlaygroundTerminal client={client} />;

src/main/hooks/usePyodideWorker.tsx

@@ -10,25 +10,23 @@ import React, {
 import { wrap, Remote } from "comlink";
 import { MyWorker } from "../../pyodide-worker/worker";
 
-type PyodideWorkerStatus =
-    | "idle"
-    | "starting"
-    | "preparing"
-    | "ready"
-    | "error";
+type WorkerState =
+    | { status: "idle" }
+    | { status: "starting" }
+    | { status: "preparing" }
+    | { status: "ready" }
+    | { status: "error"; error: Error };
 
 export type BitbakeSpec = {
     version: string;
     url?: string;
 };
 
 type PyodideWorkerContextValue = {
-    status: PyodideWorkerStatus;
+    workerState: WorkerState;
     getClient: () => Remote<MyWorker> | null;
-    error: Error | null;
     bitbakeSpec: BitbakeSpec;
     bitbakeZipUrl: string;
-    prepared: boolean;
 };
 
 const DEFAULT_BITBAKE_VERSION = "2.8.0";
@@ -61,9 +59,9 @@ export const PyodideWorkerProvider: React.FC<{
         [normalizedSpec]
     );
 
-    const [status, setStatus] = useState<PyodideWorkerStatus>("idle");
-    const [error, setError] = useState<Error | null>(null);
-    const [prepared, setPrepared] = useState<boolean>(false);
+    const [workerState, setWorkerState] = useState<WorkerState>({
+        status: "idle",
+    });
 
     const workerRef = useRef<Worker | null>(null);
     const clientRef = useRef<Remote<MyWorker> | null>(null);
@@ -72,8 +70,7 @@ export const PyodideWorkerProvider: React.FC<{
         let cancelled = false;
 
         const setup = async () => {
-            setStatus("starting");
-            setError(null);
+            setWorkerState({ status: "starting" });
             clientRef.current = null;
 
             const worker = new Worker(
@@ -91,24 +88,21 @@ export const PyodideWorkerProvider: React.FC<{
                 }
 
                 clientRef.current = api;
-                setStatus("preparing");
-                setPrepared(false);
+                setWorkerState({ status: "preparing" });
 
                 await api.prepareBitbake(bitbakeZipUrl, normalizedSpec.version);
 
                 if (cancelled) {
                     worker.terminate();
                     return;
                 }
-                setPrepared(true);
-                setStatus("ready");
+                setWorkerState({ status: "ready" });
             } catch (err) {
                 if (cancelled) {
                     return;
                 }
                 clientRef.current = null;
-                setError(err as Error);
-                setStatus("error");
+                setWorkerState({ status: "error", error: err as Error });
             }
         };
 
@@ -119,22 +113,20 @@ export const PyodideWorkerProvider: React.FC<{
             workerRef.current?.terminate();
             workerRef.current = null;
             clientRef.current = null;
-            setPrepared(false);
+            setWorkerState({ status: "idle" });
         };
     }, [bitbakeZipUrl, normalizedSpec.version]);
 
     const getClient = useCallback(() => clientRef.current, []);
 
     const value = useMemo<PyodideWorkerContextValue>(
         () => ({
-            status,
+            workerState,
             getClient,
-            error,
             bitbakeSpec: normalizedSpec,
             bitbakeZipUrl,
-            prepared,
         }),
-        [bitbakeZipUrl, error, getClient, normalizedSpec, prepared, status]
+        [bitbakeZipUrl, getClient, normalizedSpec, workerState]
     );
 
     return (