Compile the BLT on a background worker

web/src/BringListEdit.css

@@ -18,6 +18,7 @@
     color: red;
 }
 
-.BringListEdit-CompileWarn {
+.BringListEdit-CompileWarn,
+.BringListEdit-CompileInfo {
     color: darkblue;
 }

web/src/BringListEdit.tsx

@@ -1,15 +1,32 @@
 import "./BringListEdit.css"
-import { getBLTWarnings, parseBLTChecked, warningToString } from "./filterspec"
+import { BLTWarning, BringList, warningToString } from "./filterspec"
 import { Header, Nav } from "./Layout"
 import { useAppDispatch, useAppSelector } from "./hooks"
 import { setBringListTemplate, setHeader } from "./store"
-import React, { useMemo } from "react"
+import React, { useEffect, useState } from "react"
+import BLTCompileWorker from './worker?worker'
+
+const bltCompileWorker = new BLTCompileWorker()
 
 function CompileStatus(props: { blt: string }): React.ReactElement {
-    const compileResult = useMemo(() => parseBLTChecked(props.blt), [props.blt])
-    const warnings = useMemo(() => !(compileResult instanceof Error) ? getBLTWarnings(compileResult) : [], [compileResult])
+    const [compileResult, setCompileResult] = useState<BringList | Error | null>(null)
+    const [warnings, setWarnings] = useState<BLTWarning[]>([])
 
-    if (compileResult instanceof Error) {
+    useEffect(() => {
+        bltCompileWorker.addEventListener('message', (event) => {
+            const { compileResult, warnings } = event.data
+            setCompileResult(compileResult)
+            setWarnings(warnings)
+        }, { once: true })
+        bltCompileWorker.postMessage(props.blt)
+    }, [props.blt])
+
+    if (compileResult === null) {
+        return <span className="BringListEdit-CompileStatus BringListEdit-CompileInfo">
+            compiling...
+        </span>
+    }
+    else if (compileResult instanceof Error) {
         return (
             <span className="BringListEdit-CompileStatus BringListEdit-CompileErr">
                 compile error: {compileResult.message}

web/src/BringListView.tsx

@@ -266,6 +266,7 @@ function BringListView() {
   const dispatch = useAppDispatch()
 
   const BLT = useAppSelector((s) => s.bringList.bringListTemplate)
+  // TODO: Parse the BLT in store on a background worker
   const BL = useMemo(() => filterspec.parseBLT(BLT), [BLT])
   const checkedItems = new Set(useAppSelector((s) => s.bringList.checked))
   const strikedItems = new Set(useAppSelector((s) => s.bringList.striked))

web/src/worker.ts

@@ -0,0 +1,15 @@
+import { BLTWarning, BringList, getBLTWarnings, parseBLTChecked } from "./filterspec";
+
+type MessageEventData = string
+interface MessagePostData {
+    compileResult: BringList | Error,
+    warnings: BLTWarning[],
+}
+
+onmessage = (event: MessageEvent<MessageEventData>) => {
+    const btlString = event.data;
+    const compileResult = parseBLTChecked(btlString);
+    const warnings = !(compileResult instanceof Error) ? getBLTWarnings(compileResult) : [];
+    const workerResult: MessagePostData = { compileResult, warnings }
+    postMessage(workerResult);
+};