perf(core): replace Array.forEach loops

Author: bcakmakoglu

packages/core/src/composables/useVueFlow.ts

@@ -40,15 +40,15 @@ export class Storage {
     const reactiveState = reactive(state)
 
     const hooksOn = <any>{}
-    Object.entries(reactiveState.hooks).forEach(([n, h]) => {
+    for (const [n, h] of Object.entries(reactiveState.hooks)) {
       const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
       hooksOn[name] = h.on
-    })
+    }
 
     const emits = <any>{}
-    Object.entries(reactiveState.hooks).forEach(([n, h]) => {
+    for (const [n, h] of Object.entries(reactiveState.hooks)) {
       emits[n] = h.trigger
-    })
+    }
 
     // for lookup purposes
     const nodeIds = computed(() => reactiveState.nodes.map((n) => n.id))

packages/core/src/composables/useWatchProps.ts

@@ -285,7 +285,7 @@ export function useWatchProps(
         'autoConnect',
       ]
 
-      Object.keys(props).forEach((key) => {
+      for (const key of Object.keys(props)) {
         const propKey = key as keyof typeof props
         if (!skip.includes(propKey)) {
           const propValue = toRef(() => props[propKey])
@@ -306,7 +306,7 @@ export function useWatchProps(
             })
           }
         }
-      })
+      }
     }
 
     const runAll = () => {

packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -20,15 +20,21 @@ const markers = computed(() => {
         } else {
           markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
         }
+
         ids.push(markerId)
       }
     }
   }
 
-  ;[connectionLineOptions.markerEnd, connectionLineOptions.markerStart].forEach(createMarkers)
+  for (const marker of [connectionLineOptions.markerEnd, connectionLineOptions.markerStart]) {
+    createMarkers(marker)
+  }
 
   edges.reduce<MarkerProps[]>((markers, edge) => {
-    ;[edge.markerStart, edge.markerEnd].forEach(createMarkers)
+    for (const marker of [edge.markerStart, edge.markerEnd]) {
+      createMarkers(marker)
+    }
+
     return markers.sort((a, b) => a.id.localeCompare(b.id))
   }, markers)
 

packages/core/src/store/actions.ts

@@ -110,7 +110,7 @@ export function useActions(
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
     const changes: NodePositionChange[] = []
 
-    dragItems.forEach((node) => {
+    for (const node of dragItems) {
       const change: Partial<NodePositionChange> = {
         id: node.id,
         type: 'position',
@@ -132,7 +132,7 @@ export function useActions(
       }
 
       changes.push(change as NodePositionChange)
-    })
+    }
 
     if (changes?.length) {
       state.hooks.nodesChange.trigger(changes)
@@ -485,8 +485,8 @@ export function useActions(
   }
 
   const removeNodes: Actions['removeNodes'] = (nodes, removeConnectedEdges = true, removeChildren = false) => {
-    let nodesToRemove = nodes instanceof Function ? nodes(state.nodes) : nodes
-    nodesToRemove = Array.isArray(nodesToRemove) ? nodesToRemove : [nodesToRemove]
+    const nextNodes = nodes instanceof Function ? nodes(state.nodes) : nodes
+    const nodesToRemove = Array.isArray(nextNodes) ? nextNodes : [nextNodes]
 
     const nodeChanges: NodeRemoveChange[] = []
     const edgeChanges: EdgeRemoveChange[] = []
@@ -519,21 +519,21 @@ export function useActions(
           createEdgeRemovalChanges(children)
         }
 
-        children.forEach((child) => {
+        for (const child of children) {
           createChildrenRemovalChanges(child.id)
-        })
+        }
       }
     }
 
-    nodesToRemove.forEach((item) => {
+    for (const item of nodesToRemove) {
       const currNode = typeof item === 'string' ? findNode(item) : item
 
       if (!currNode) {
-        return
+        continue
       }
 
       if (isDef(currNode.deletable) && !currNode.deletable) {
-        return
+        continue
       }
 
       nodeChanges.push(createNodeRemoveChange(currNode.id))
@@ -545,7 +545,7 @@ export function useActions(
       if (removeChildren) {
         createChildrenRemovalChanges(currNode.id)
       }
-    })
+    }
 
     if (edgeChanges.length) {
       state.hooks.edgesChange.trigger(edgeChanges)
@@ -557,20 +557,20 @@ export function useActions(
   }
 
   const removeEdges: Actions['removeEdges'] = (edges) => {
-    let edgesToRemove = edges instanceof Function ? edges(state.edges) : edges
-    edgesToRemove = Array.isArray(edgesToRemove) ? edgesToRemove : [edgesToRemove]
+    const nextEdges = edges instanceof Function ? edges(state.edges) : edges
+    const edgesToRemove = Array.isArray(nextEdges) ? nextEdges : [nextEdges]
 
     const changes: EdgeRemoveChange[] = []
 
-    edgesToRemove.forEach((item) => {
+    for (const item of edgesToRemove) {
       const currEdge = typeof item === 'string' ? findEdge(item) : item
 
       if (!currEdge) {
-        return
+        continue
       }
 
       if (isDef(currEdge.deletable) && !currEdge.deletable) {
-        return
+        continue
       }
 
       changes.push(
@@ -582,7 +582,7 @@ export function useActions(
           currEdge.targetHandle,
         ),
       )
-    })
+    }
 
     state.hooks.edgesChange.trigger(changes)
   }
@@ -777,14 +777,14 @@ export function useActions(
       }
     }
 
-    Object.keys(opts).forEach((o) => {
+    for (const o of Object.keys(opts)) {
       const key = o as keyof State
       const option = opts[key]
 
       if (![...skip, ...exclude].includes(key) && isDef(option)) {
         ;(<any>state)[key] = option
       }
-    })
+    }
 
     until(() => state.d3Zoom)
       .not.toBeNull()

packages/core/src/store/getters.ts

@@ -35,7 +35,9 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
 
     const keys = Object.keys(edgeTypes)
 
-    state.edges?.forEach((e) => e.type && !keys.includes(e.type) && (edgeTypes[e.type] = e.type))
+    for (const e of state.edges) {
+      e.type && !keys.includes(e.type) && (edgeTypes[e.type] = e.type)
+    }
 
     return edgeTypes
   })
@@ -48,7 +50,9 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
 
     const keys = Object.keys(nodeTypes)
 
-    state.nodes?.forEach((n) => n.type && !keys.includes(n.type) && (nodeTypes[n.type] = n.type))
+    for (const n of state.nodes) {
+      n.type && !keys.includes(n.type) && (nodeTypes[n.type] = n.type)
+    }
 
     return nodeTypes
   })

packages/core/src/store/state.ts

@@ -145,13 +145,14 @@ function defaultState(): State {
 
 export function useState(opts?: FlowOptions): State {
   const state = defaultState()
+
   if (opts) {
-    Object.keys(opts).forEach((o) => {
-      const option = opts[o as keyof typeof opts]
+    for (const key of Object.keys(opts)) {
+      const option = opts[key as keyof typeof opts]
       if (isDef(option)) {
-        ;(state as any)[o] = option
+        ;(state as any)[key] = option
       }
-    })
+    }
   }
 
   return state

packages/core/src/utils/changes.ts

@@ -114,7 +114,7 @@ export function applyChanges<
     | EdgeRemoveChange
   )[]
 
-  addRemoveChanges.forEach((change) => {
+  for (const change of addRemoveChanges) {
     if (change.type === 'add') {
       const index = elements.findIndex((el) => el.id === change.item.id)
 
@@ -128,11 +128,11 @@ export function applyChanges<
         elements.splice(index, 1)
       }
     }
-  })
+  }
 
   const elementIds = elements.map((el) => el.id)
 
-  elements.forEach((element) => {
+  for (const element of elements) {
     const currentChanges = changes.filter((c) => (<any>c).id === element.id)
 
     for (const currentChange of currentChanges) {
@@ -198,7 +198,7 @@ export function applyChanges<
           break
       }
     }
-  })
+  }
 
   return elements
 }

packages/core/src/utils/graph.ts

@@ -169,11 +169,11 @@ function getConnectedElements<T extends Node = Node>(
 
   const origin = dir === 'source' ? 'target' : 'source'
 
-  edges.forEach((edge) => {
+  for (const edge of edges) {
     if (edge[origin] === id) {
       connectedIds.add(edge[dir])
     }
-  })
+  }
 
   return nodes.filter((n) => connectedIds.has(n.id))
 }
@@ -415,7 +415,9 @@ export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, ed
   if (typeof nodesOrId === 'string') {
     nodeIds.add(nodesOrId)
   } else if (nodesOrId.length >= 1) {
-    nodesOrId.forEach((n) => nodeIds.add(n.id))
+    for (const n of nodesOrId) {
+      nodeIds.add(n.id)
+    }
   }
 
   return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target))
@@ -424,7 +426,9 @@ export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, ed
 export function getConnectedNodes<N extends Node | { id: string } | string>(nodes: N[], edges: Edge[]) {
   const nodeIds = new Set()
 
-  nodes.forEach((node) => nodeIds.add(typeof node === 'string' ? node : node.id))
+  for (const node of nodes) {
+    nodeIds.add(typeof node === 'string' ? node : node.id)
+  }
 
   const connectedNodeIds = edges.reduce((acc, edge) => {
     if (nodeIds.has(edge.source)) {

packages/core/src/utils/handle.ts

@@ -101,7 +101,7 @@ export function getClosestHandle(
   let closestHandles: { handle: ConnectionHandle; validHandleResult: ValidHandleResult }[] = []
   let minDistance = Number.POSITIVE_INFINITY
 
-  handles.forEach((handle) => {
+  for (const handle of handles) {
     const distance = Math.sqrt((handle.x - pos.x) ** 2 + (handle.y - pos.y) ** 2)
 
     if (distance <= connectionRadius) {
@@ -121,7 +121,7 @@ export function getClosestHandle(
         minDistance = distance
       }
     }
-  })
+  }
 
   if (!closestHandles.length) {
     return { handle: null, validHandleResult: defaultValidHandleResult() }