feat: make worker optional

* worker can be enabled with prop, defaults to false
* add deep unref function

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/store/stateStore.ts

@@ -1,6 +1,6 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import diff from 'microdiff'
-import { parseElements, defaultNodeTypes, defaultEdgeTypes } from './utils'
+import { parseElements, defaultNodeTypes, defaultEdgeTypes, deepUnref } from './utils'
 import { FlowState, Node, FlowActions, Elements, FlowGetters, Edge, EdgeTypes, NodeTypes } from '~/types'
 import { clampPosition, getDimensions, getConnectedEdges, getNodesInside, getRectOfNodes, isNode } from '~/utils'
 import { getHandleBounds } from '~/components/Nodes/utils'
@@ -54,18 +54,29 @@ export default function flowStore(
           nextEdges: [],
           nextNodes: [],
         }
-        if (import.meta.env.SSR || typeof window === 'undefined') {
+        if (!this.worker || import.meta.env.SSR || typeof window === 'undefined') {
           next = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
-        } else {
+        } else if (this.worker) {
           const { workerFn, workerTerminate } = parseElementsWorker()
-          next = await workerFn(toRaw(elements), toRaw(this.nodes), toRaw(this.edges), toRaw(this.nodeExtent)).catch(() =>
-            workerTerminate('ERROR'),
-          )
-          workerTerminate('SUCCESS')
+          const res = await workerFn(
+            deepUnref(elements),
+            deepUnref(this.nodes),
+            deepUnref(this.edges),
+            deepUnref(this.nodeExtent),
+          ).catch((err) => {
+            console.error(err)
+            workerTerminate('ERROR')
+          })
+          if (res) {
+            workerTerminate('SUCCESS')
+            next = res
+          } else next = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+        }
+        if (next) {
+          this.elements = elements ?? []
+          this.nodes = next?.nextNodes ?? []
+          this.edges = next?.nextEdges ?? []
         }
-        this.elements = elements
-        this.nodes = next?.nextNodes ?? []
-        this.edges = next?.nextEdges ?? []
       },
       updateNodeDimensions({ id, nodeElement, forceUpdate }) {
         const i = this.nodes.map((x) => x.id).indexOf(id)

src/store/utils.ts

@@ -139,3 +139,49 @@ export const parseElements = (elements: Elements, nodes: Node[], edges: Edge[],
 
   return nextElements
 }
+
+const isObject = (val: any) => val !== null && typeof val === 'object'
+const isArray = Array.isArray
+
+const smartUnref = (val: any) => {
+  if (val !== null && !isRef(val) && typeof val === 'object') {
+    // eslint-disable-next-line no-use-before-define
+    return deepUnref(val)
+  }
+
+  return unref(val)
+}
+
+const unrefArray = (arr: any[]) => {
+  const unreffed: any[] = []
+
+  arr.forEach((val) => {
+    unreffed.push(smartUnref(val))
+  })
+
+  return unreffed
+}
+
+const unrefObject = (obj: Record<string, any>) => {
+  const unreffed: Record<string, any> = {}
+
+  Object.keys(obj).forEach((key) => {
+    unreffed[key] = smartUnref(obj[key])
+  })
+
+  return unreffed
+}
+
+export const deepUnref = (val: any) => {
+  const checkedVal = isRef(val) ? unref(val) : val
+
+  if (!isObject(checkedVal)) {
+    return checkedVal
+  }
+
+  if (isArray(checkedVal)) {
+    return unrefArray(checkedVal)
+  }
+
+  return unrefObject(checkedVal)
+}