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/container/VueFlow/VueFlow.vue

@@ -65,6 +65,7 @@ export interface FlowProps extends Partial<FlowOptions> {
   edgeUpdaterRadius?: number
   storageKey?: string
   loading?: Loading
+  worker?: boolean
 }
 
 const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue'])
@@ -107,16 +108,17 @@ const props = withDefaults(defineProps<FlowProps>(), {
   paneMoveable: true,
   edgeUpdaterRadius: 10,
   loading: false,
+  worker: false,
 })
 const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id, props.store)
 const elements = useVModel(props, props.elements.length ? 'elements' : 'modelValue', emit)
 
-const options = Object.assign({}, props, store.$state, props)
+const options = Object.assign({}, props, store.$state)
 
 // if there are preloaded elements we overwrite the current elements with the stored ones
 if (store.elements.length) elements.value = store.elements
 
-const init = async (state: FlowState) => {
+const init = (state: FlowState) => {
   for (const opt of Object.keys(state)) {
     const val = state[opt as keyof FlowState]
     if (typeof val !== 'undefined') {
@@ -125,7 +127,6 @@ const init = async (state: FlowState) => {
       } else (store as any)[opt] = val
     }
   }
-  await store.setElements(elements.value)
   store.setMinZoom(state.minZoom)
   store.setMaxZoom(state.maxZoom)
   store.setTranslateExtent(state.translateExtent)
@@ -133,27 +134,10 @@ const init = async (state: FlowState) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
-watch(
-  () => store.elements,
-  (val, oldVal) => {
-    nextTick(() => {
-      const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) elements.value = val
-    })
-  },
-  { flush: 'post', deep: true },
-)
-watch(
-  () => props,
-  (val) => {
-    init({ ...store.$state, ...val } as FlowState)
-  },
-  { flush: 'post', deep: true },
-)
-
 invoke(async () => {
-  await init(options)
+  console.log('invoked')
+  init(options)
+  await store.setElements(elements.value)
   store.isReady = true
   await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
   const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
@@ -172,6 +156,29 @@ invoke(async () => {
   store.instance = instance
 })
 
+onMounted(() => {
+  watch(
+    elements,
+    (val) => {
+      console.log('v-model watcher', val)
+      store.setElements(val)
+    },
+    { flush: 'post', deep: true },
+  )
+
+  watch(
+    () => props,
+    (val, oldVal) => {
+      const hasDiff = diff(val, oldVal)
+      if (hasDiff.length > 0) {
+        console.log('props watcher')
+        init({ ...store.$state, ...props } as FlowState)
+      }
+    },
+    { flush: 'post', deep: true },
+  )
+})
+
 const transitionName = computed(() => {
   let name = ''
   if (typeof store.loading === 'object' && store.loading.transition) {
@@ -180,14 +187,6 @@ const transitionName = computed(() => {
   }
   return name
 })
-
-const transitionMode = computed(() => {
-  let mode = ''
-  if (typeof store.loading === 'object' && store.loading.transition) {
-    if (typeof store.loading.transition !== 'string') mode = store.loading.transition.mode
-  }
-  return mode
-})
 </script>
 <template>
   <div class="vue-flow">
@@ -245,8 +244,8 @@ const transitionMode = computed(() => {
             <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
           </template>
         </ZoomPane>
-        <template v-if="store.loading" #fallback>
+        <template #fallback>
-          <slot key="loading-indicator" name="loading-indicator">
+          <slot v-if="store.loading" key="loading-indicator" name="loading-indicator">
             <LoadingIndicator key="default-loading-indicator" v-bind="store.loading">
               <slot name="loading-label" />
             </LoadingIndicator>

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(() =>
+          const res = await workerFn(
-            workerTerminate('ERROR'),
+            deepUnref(elements),
-          )
+            deepUnref(this.nodes),
-          workerTerminate('SUCCESS')
+            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)
+}

src/types/types.ts

@@ -141,4 +141,5 @@ export interface FlowOptions {
   edgeUpdaterRadius?: number
   storageKey?: string
   loading?: Loading
+  worker?: boolean
 }