Added missing types. Updated dependencies

package.json

@@ -9,19 +9,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vite-plugin-solid": "^2.5.0"
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.1",
+    "vite-plugin-solid": "^2.6.1"
   },
   "dependencies": {
-    "@types/diff": "^5.0.2",
+    "@types/diff": "^5.0.3",
     "diff": "^5.1.0",
     "solid-headless": "^0.13.1",
     "solid-heroicons": "^3.1.1",
-    "solid-js": "^1.6.11",
+    "solid-js": "^1.6.16",
     "xlsx": "^0.18.5"
   }
 }

src/functions/fetch.ts

@@ -0,0 +1,27 @@
+/* @refresh reload */
+import type { FetchResultsProps, WebWorkerProps } from '../types/interfaces';
+
+onmessage = async (e: MessageEvent<WebWorkerProps>) => {
+    console.log("Worker: Message received from main script")
+    const {
+        expression,
+        simplifyEnabled,
+        hideValue,
+        sortValue,
+        hideIntermediates
+    } = e.data;
+
+    const result: FetchResultsProps = {
+        fetchResult: null,
+        error: null,
+    };
+
+    await fetch(`https://api.martials.no/simplify-truths/do/simplify/table?exp=${ encodeURIComponent(expression) }&
+simplify=${ simplifyEnabled }&hide=${ hideValue }&sort=${ sortValue }&caseSensitive=false&
+hideIntermediate=${ hideIntermediates }`)
+        .then(res => res.json())
+        .then(res => result.fetchResult = res)
+        .catch(err => result.error = err.toString());
+
+    postMessage(result);
+};

src/truth-table.tsx

@@ -6,7 +6,7 @@ import TruthTable from "./components/truth-table";
 import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output";
 import { diffChars } from "diff";
 import MyMenu from "./components/menu";
-import type { FetchResult } from "./types/interfaces";
+import type { FetchResultsProps, FetchResult, WebWorkerProps } from "./types/interfaces";
 import { type Accessor, type Component, createSignal, JSX, onMount, Show } from "solid-js";
 import { For, render } from "solid-js/web";
 import Row from "./components/row";
@@ -107,6 +107,32 @@ hide=${ hideValues().value }&sort=${ sortValues().value }&hideIntermediate=${ hi
             setError(null);
             setIsLoaded(false);
 
+            if (window.Worker) {
+                const worker = new Worker(new URL("./functions/fetch.ts", import.meta.url));
+
+                const input: WebWorkerProps = {
+                    expression: exp,
+                    simplifyEnabled: simplifyEnabled(),
+                    hideValue: hideValues().value,
+                    sortValue: sortValues().value,
+                    hideIntermediates: hideIntermediates()
+                };
+
+                worker.postMessage(input);
+
+                worker.onmessage = (e: MessageEvent<FetchResultsProps>): void => {
+                    const data = e.data;
+                    setIsLoaded(true);
+                    if (data.fetchResult) {
+                        setFetchResult(data.fetchResult);
+                    }
+                    else if (data.error) {
+                        setError(data.error);
+                    }
+                    worker.terminate();
+                };
+            }
+            else {
                 fetch(`https://api.martials.no/simplify-truths/do/simplify/table?exp=${ encodeURIComponent(exp) }&
 simplify=${ simplifyEnabled() }&hide=${ hideValues().value }&sort=${ sortValues().value }&caseSensitive=false&
 hideIntermediate=${ hideIntermediates() }`)
@@ -116,6 +142,7 @@ hideIntermediate=${ hideIntermediates() }`)
                     .finally(() => setIsLoaded(true));
             }
         }
+    }
 
     const inputId = "truth-input";
 

src/types/interfaces.ts

@@ -71,3 +71,16 @@ export type FetchResult = {
         truthMatrix: Table,
     } | null,
 };
+
+export type WebWorkerProps = {
+    expression: string,
+    simplifyEnabled: boolean,
+    hideValue: string,
+    sortValue: string,
+    hideIntermediates: boolean
+};
+
+export type FetchResultsProps = {
+    fetchResult: FetchResult | null,
+    error: string | null,
+}