feat: offload parsing elements to worker

* when we're not in ssr environment we use a web worker to parse the elements as this blocks the main thread when there's a good amount of nodes/edges to parse
* when in ssr we don't really care about the main thread blocking so we just parse them like usual
* update vite to latest

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

src/store/index.ts

@@ -1,91 +1,2 @@
-import { ConnectionMode, EdgeTypes, FlowState, NodeTypes, PanOnScrollMode } from '~/types'
-import { createHooks } from '~/composables'
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
-
-export const defaultNodeTypes: NodeTypes = {
-  input: markRaw(InputNode),
-  default: markRaw(DefaultNode),
-  output: markRaw(OutputNode),
-}
-
-export const defaultEdgeTypes: EdgeTypes = {
-  default: markRaw(BezierEdge),
-  straight: markRaw(StraightEdge),
-  step: markRaw(StepEdge),
-  smoothstep: markRaw(SmoothStepEdge),
-}
-
-export const initialState = (): FlowState => ({
-  dimensions: {
-    width: 0,
-    height: 0,
-  },
-  transform: [0, 0, 1],
-  elements: [],
-  nodes: [],
-  edges: [],
-  selectedElements: undefined,
-  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
-
-  d3Zoom: undefined,
-  d3Selection: undefined,
-  d3ZoomHandler: undefined,
-  minZoom: 0.5,
-  maxZoom: 2,
-  translateExtent: [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
-
-  nodeExtent: [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
-  zoomOnScroll: true,
-  zoomOnPinch: true,
-  zoomOnDoubleClick: true,
-  panOnScroll: false,
-  panOnScrollSpeed: 0.5,
-  panOnScrollMode: PanOnScrollMode.Free,
-  paneMoveable: true,
-  edgeUpdaterRadius: 10,
-
-  nodesSelectionActive: false,
-  selectionActive: false,
-
-  userSelectionRect: {
-    startX: 0,
-    startY: 0,
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    draw: false,
-  },
-
-  arrowHeadColor: '#b1b1b7',
-  connectionNodeId: undefined,
-  connectionHandleId: undefined,
-  connectionHandleType: 'source',
-  connectionPosition: { x: NaN, y: NaN },
-  connectionMode: ConnectionMode.Loose,
-
-  snapGrid: [15, 15],
-  snapToGrid: false,
-
-  nodesDraggable: true,
-  nodesConnectable: true,
-  elementsSelectable: true,
-
-  multiSelectionActive: false,
-
-  isReady: false,
-  hooks: createHooks(),
-  storageKey: undefined,
-  instance: undefined,
-
-  vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
-})
-
 export { default as useStateStore } from './stateStore'
+export { defaultEdgeTypes, defaultNodeTypes, initialState } from './utils'

src/store/stateStore.ts

@@ -1,10 +1,10 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import diff from 'microdiff'
-import { parseElements } from './utils'
+import { parseElements, defaultNodeTypes, defaultEdgeTypes } 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'
-import { defaultEdgeTypes, defaultNodeTypes } from '~/store/index'
+import parseElementsWorker from '~/workers/parseElements'
 
 const pinia = createPinia()
 
@@ -13,9 +13,6 @@ export default function flowStore(
   preloadedState: FlowState,
 ): StoreDefinition<string, FlowState, FlowGetters, FlowActions> {
   setActivePinia(pinia)
-  const { nextEdges, nextNodes } = parseElements(preloadedState.elements, [], [], preloadedState.nodeExtent)
-  preloadedState.nodes = nextNodes
-  preloadedState.edges = nextEdges
 
   return defineStore({
     id: id ?? 'vue-flow',
@@ -52,11 +49,23 @@ export default function flowStore(
       },
     },
     actions: {
-      setElements(elements) {
-        const { nextNodes, nextEdges } = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+      async setElements(elements) {
+        let next: any = {
+          nextEdges: [],
+          nextNodes: [],
+        }
+        if (import.meta.env.SSR || typeof window === 'undefined') {
+          next = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+        } else {
+          const { workerFn, workerTerminate } = parseElementsWorker()
+          next = await workerFn(toRaw(elements), toRaw(this.nodes), toRaw(this.edges), toRaw(this.nodeExtent)).catch(() =>
+            workerTerminate('ERROR'),
+          )
+          workerTerminate('SUCCESS')
+        }
         this.elements = elements
-        this.nodes = nextNodes
-        this.edges = nextEdges
+        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

@@ -1,11 +1,99 @@
-import { Edge, Elements, Node, NodeExtent } from '~/types'
+import { ConnectionMode, Edge, EdgeTypes, Elements, FlowState, Node, NodeExtent, NodeTypes, PanOnScrollMode } from '~/types'
 import { isEdge, isNode, parseEdge, parseNode } from '~/utils'
+import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { createHooks } from '~/composables'
 
 type NextElements = {
   nextNodes: Node[]
   nextEdges: Edge[]
 }
 
+export const defaultNodeTypes: NodeTypes = {
+  input: markRaw(InputNode),
+  default: markRaw(DefaultNode),
+  output: markRaw(OutputNode),
+}
+
+export const defaultEdgeTypes: EdgeTypes = {
+  default: markRaw(BezierEdge),
+  straight: markRaw(StraightEdge),
+  step: markRaw(StepEdge),
+  smoothstep: markRaw(SmoothStepEdge),
+}
+
+export const initialState = (): FlowState => ({
+  dimensions: {
+    width: 0,
+    height: 0,
+  },
+  transform: [0, 0, 1],
+  elements: [],
+  nodes: [],
+  edges: [],
+  selectedElements: undefined,
+  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
+
+  d3Zoom: undefined,
+  d3Selection: undefined,
+  d3ZoomHandler: undefined,
+  minZoom: 0.5,
+  maxZoom: 2,
+  translateExtent: [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+  ],
+
+  nodeExtent: [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+  ],
+  zoomOnScroll: true,
+  zoomOnPinch: true,
+  zoomOnDoubleClick: true,
+  panOnScroll: false,
+  panOnScrollSpeed: 0.5,
+  panOnScrollMode: PanOnScrollMode.Free,
+  paneMoveable: true,
+  edgeUpdaterRadius: 10,
+
+  nodesSelectionActive: false,
+  selectionActive: false,
+
+  userSelectionRect: {
+    startX: 0,
+    startY: 0,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    draw: false,
+  },
+
+  arrowHeadColor: '#b1b1b7',
+  connectionNodeId: undefined,
+  connectionHandleId: undefined,
+  connectionHandleType: 'source',
+  connectionPosition: { x: NaN, y: NaN },
+  connectionMode: ConnectionMode.Loose,
+
+  snapGrid: [15, 15],
+  snapToGrid: false,
+
+  nodesDraggable: true,
+  nodesConnectable: true,
+  elementsSelectable: true,
+
+  multiSelectionActive: false,
+
+  isReady: false,
+  hooks: createHooks(),
+  storageKey: undefined,
+  instance: undefined,
+
+  vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
+})
+
 export const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => {
   const nextElements: NextElements = {
     nextNodes: [],