refactor(types,flow)!: Use reactivity transform and remove store property

# What's changed?

* Remove store property from usevueflow return value
* All previously available properties are still there, just not nested inside an additional store object to avoid confusion + duplicates
* use reactivity transform to get rid of .value calls

package/src/additional-components/Background/Background.vue

@@ -18,13 +18,13 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const { store } = useVueFlow()
+const { viewport } = $(useVueFlow())
 
-const background = computed(() => {
+const background = $computed(() => {
-  const scaledGap = props.gap && props.gap * store.viewport.zoom
+  const scaledGap = props.gap && props.gap * viewport.zoom
-  const xOffset = scaledGap && store.viewport.x % scaledGap
+  const xOffset = scaledGap && viewport.x % scaledGap
-  const yOffset = scaledGap && store.viewport.y % scaledGap
+  const yOffset = scaledGap && viewport.y % scaledGap
-  const size = props.size || 0.4 * store.viewport.zoom
+  const size = props.size || 0.4 * viewport.zoom
 
   return {
     scaledGap,
@@ -36,14 +36,13 @@ const background = computed(() => {
 
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
+
 const patternColor = computed(() =>
   props.patternColor ? props.patternColor : defaultColors[props.variant || BackgroundVariant.Dots],
 )
+
 const d = computed(
-  () =>
+  () => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
-    `M${background.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
-      background.value.scaledGap
-    }`,
 )
 </script>
 <script lang="ts">

package/src/additional-components/Controls/Controls.vue

@@ -20,27 +20,27 @@ const emit = defineEmits<{
   (event: 'interaction-change', active: boolean): void
 }>()
 
-const { store, instance } = useVueFlow()
+const { instance, nodesDraggable, nodesConnectable, elementsSelectable, setInteractive } = $(useVueFlow())
 
-const isInteractive = computed(() => store.nodesDraggable && store.nodesConnectable && store.elementsSelectable)
+const isInteractive = computed(() => nodesDraggable && nodesConnectable && elementsSelectable)
 
 const onZoomInHandler = () => {
-  instance.value?.zoomIn()
+  instance?.zoomIn()
   emit('zoom-in')
 }
 
 const onZoomOutHandler = () => {
-  instance.value?.zoomOut()
+  instance?.zoomOut()
   emit('zoom-out')
 }
 
 const onFitViewHandler = () => {
-  instance.value?.fitView(props.fitViewParams)
+  instance?.fitView(props.fitViewParams)
   emit('fit-view')
 }
 
 const onInteractiveChangeHandler = () => {
-  store.setInteractive(!isInteractive.value)
+  setInteractive(!isInteractive.value)
   emit('interaction-change', !isInteractive.value)
 }
 </script>

package/src/additional-components/MiniMap/MiniMap.vue

@@ -15,16 +15,20 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
 })
 
 const attrs: Record<string, any> = useAttrs()
+
 const window = useWindow()
 
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { store } = useVueFlow()
+const { viewport, dimensions, hooks, getNodes } = $(useVueFlow())
 
 const elementWidth = attrs.style?.width ?? defaultWidth
+
 const elementHeight = attrs.style?.height ?? defaultHeight
+
 const nodeColorFunc: MiniMapNodeFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+
 const nodeStrokeColorFunc: MiniMapNodeFunc =
   props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
 
@@ -33,54 +37,58 @@ const nodeClassNameFunc =
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
-const bb = computed(() => {
+const bb = $computed(() => {
-  return getRectOfNodes(store.getNodes)
+  return getRectOfNodes(getNodes)
 })
 
-const viewBB = computed(() => ({
+const viewBB = $computed(() => ({
-  x: -store.viewport.x / store.viewport.zoom,
+  x: -viewport.x / viewport.zoom,
-  y: -store.viewport.y / store.viewport.zoom,
+  y: -viewport.y / viewport.zoom,
-  width: store.dimensions.width / store.viewport.zoom,
+  width: dimensions.width / viewport.zoom,
-  height: store.dimensions.height / store.viewport.zoom,
+  height: dimensions.height / viewport.zoom,
 }))
 
-const viewBox = controlledComputed(viewBB, () => {
+const viewBox = $(
-  const boundingRect = store.getNodes && store.getNodes.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
+  controlledComputed($$(viewBB), () => {
-  const scaledWidth = boundingRect.width / elementWidth
+    const boundingRect = getNodes && getNodes.length ? getBoundsofRects(bb, viewBB) : viewBB
-  const scaledHeight = boundingRect.height / elementHeight
+    const scaledWidth = boundingRect.width / elementWidth
-  const viewScale = Math.max(scaledWidth, scaledHeight)
+    const scaledHeight = boundingRect.height / elementHeight
-  const viewWidth = viewScale * elementWidth
+    const viewScale = Math.max(scaledWidth, scaledHeight)
-  const viewHeight = viewScale * elementHeight
+    const viewWidth = viewScale * elementWidth
-  const offset = 5 * viewScale
+    const viewHeight = viewScale * elementHeight
-  return {
+    const offset = 5 * viewScale
-    offset,
+    return {
-    x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
+      offset,
-    y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
+      x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
-    width: viewWidth + offset * 2,
+      y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
-    height: viewHeight + offset * 2,
+      width: viewWidth + offset * 2,
+      height: viewHeight + offset * 2,
+    }
+  }),
+)
+
+const d = controlledComputed($$(viewBox), () => {
+  if (viewBox.x && viewBox.y) {
+    return `
+    M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}
+    h${viewBox.width + viewBox.offset * 2}
+    v${viewBox.height + viewBox.offset * 2}
+    h${-viewBox.width - viewBox.offset * 2}z
+    M${viewBB.x},${viewBB.y}
+    h${viewBB.width}
+    v${viewBB.height}
+    h${-viewBB.width}z`
+  } else {
+    return ''
   }
 })
 
-const d = controlledComputed(viewBox, () => {
-  if (viewBox.value.x && viewBox.value.y)
-    return `
-    M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
-    h${viewBox.value.width + viewBox.value.offset * 2}
-    v${viewBox.value.height + viewBox.value.offset * 2}
-    h${-viewBox.value.width - viewBox.value.offset * 2}z
-    M${viewBB.value.x},${viewBB.value.y}
-    h${viewBB.value.width}
-    v${viewBB.value.height}
-    h${-viewBB.value.width}z`
-  else return ''
-})
-
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  store.hooks.miniMapNodeClick.trigger({ event, node })
+  hooks.miniMapNodeClick.trigger({ event, node })
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  store.hooks.miniMapNodeDoubleClick.trigger({ event, node })
+  hooks.miniMapNodeDoubleClick.trigger({ event, node })
 }
 </script>
 <script lang="ts">
@@ -96,7 +104,7 @@ export default {
     class="vue-flow__minimap"
   >
     <MiniMapNode
-      v-for="node of store.getNodes"
+      v-for="node of getNodes"
       :id="node.id"
       :key="node.id"
       v-memo="[node.computedPosition, node.dimensions]"

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -1,22 +1,34 @@
 <script lang="ts" setup>
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
+import { ConnectionLineType, GraphNode, HandleElement, HandleType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
 interface ConnectionLineProps {
   sourceNode: GraphNode
 }
+
 const props = defineProps<ConnectionLineProps>()
-const { store } = useVueFlow()
+
+const {
+  getNodes,
+  connectionHandleId,
+  connectionHandleType,
+  connectionPosition,
+  connectionLineType,
+  connectionLineStyle,
+  connectionNodeId,
+  viewport,
+} = $(useVueFlow())
 
 const slots = inject(Slots)?.['connection-line']
+
 const hasSlot = slots?.({})
 
 const sourceHandle =
-  store.connectionHandleId && store.connectionHandleType
+  connectionHandleId && connectionHandleType
-    ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
+    ? props.sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
-    : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
+    : connectionHandleType && props.sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
 
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
@@ -25,21 +37,22 @@ const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
 const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
+
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
 
-const targetX = computed(() => (store.connectionPosition.x - store.viewport.x) / store.viewport.zoom)
+const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
-const targetY = computed(() => (store.connectionPosition.y - store.viewport.y) / store.viewport.zoom)
+const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)
 
 const dAttr = computed(() => {
-  let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
+  let path = `M${sourceX},${sourceY} ${targetX},${targetY}`
-  switch (store.connectionLineType) {
+  switch (connectionLineType) {
     case ConnectionLineType.Bezier:
       path = getBezierPath({
         sourceX,
         sourceY,
         sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
+        targetX,
-        targetY: targetY.value,
+        targetY,
         targetPosition,
       })
       break
@@ -48,8 +61,8 @@ const dAttr = computed(() => {
         sourceX,
         sourceY,
         sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
+        targetX,
-        targetY: targetY.value,
+        targetY,
         targetPosition,
         borderRadius: 0,
       })
@@ -59,8 +72,8 @@ const dAttr = computed(() => {
         sourceX,
         sourceY,
         sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
+        targetX,
-        targetY: targetY.value,
+        targetY,
         targetPosition,
       })
       break
@@ -85,13 +98,13 @@ export default {
         targetX,
         targetY,
         targetPosition,
-        connectionLineType: store.connectionLineType,
+        connectionLineType,
-        connectionLineStyle: store.connectionLineStyle,
+        connectionLineStyle,
-        nodes: store.getNodes,
+        nodes: getNodes,
         sourceNode: props.sourceNode,
         sourceHandle,
       }"
     />
-    <path v-else :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle || {}" />
+    <path v-else :d="dAttr" class="vue-flow__connection-path" :style="connectionLineStyle || {}" />
   </g>
 </template>

package/src/components/Edges/EdgeText.vue

@@ -12,12 +12,12 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
 
-const edgeRefBbox = ref<Rect>({ x: 0, y: 0, width: 0, height: 0 })
+let edgeRefBbox = $ref<Rect>({ x: 0, y: 0, width: 0, height: 0 })
 
 onMounted(() => {
-  edgeRefBbox.value = edgeRef.value.getBBox()
+  edgeRefBbox = edgeRef.value.getBBox()
 })
-const transform = computed(() => `translate(${props.x - edgeRefBbox.value.width / 2} ${props.y - edgeRefBbox.value.height / 2})`)
+const transform = computed(() => `translate(${props.x - edgeRefBbox.width / 2} ${props.y - edgeRefBbox.height / 2})`)
 </script>
 <script lang="ts">
 export default {

package/src/components/Edges/EdgeWrapper.vue

@@ -19,17 +19,17 @@ const props = defineProps<EdgeWrapper>()
 
 const slots = inject(Slots)
 
-const { store } = useVueFlow()
+const { hooks, connectionMode, setState, addSelectedEdges, getEdgeTypes, edgeUpdaterRadius, noPanClassName } = $(useVueFlow())
 
-const edge = useVModel(props, 'edge')
+const edge = $(useVModel(props, 'edge'))
 
-const name = ref(edge.value.type ?? 'default')
+let name = $ref(edge.type ?? 'default')
 watch(
-  () => edge.value.type,
+  () => edge.type,
-  (v) => v && (name.value = v),
+  (v) => v && (name = v),
 )
 
-const updating = ref(false)
+let updating = $ref(false)
 
 onMounted(() => {
   watch(
@@ -52,10 +52,10 @@ onMounted(() => {
         targetHandle.value,
         targetPosition.value,
       )
-      if (edge.value.sourceX !== sourceX) edge.value.sourceX = sourceX
+      if (edge.sourceX !== sourceX) edge.sourceX = sourceX
-      if (edge.value.sourceY !== sourceY) edge.value.sourceY = sourceY
+      if (edge.sourceY !== sourceY) edge.sourceY = sourceY
-      if (edge.value.targetX !== targetX) edge.value.targetX = targetX
+      if (edge.targetX !== targetX) edge.targetX = targetX
-      if (edge.value.targetY !== targetY) edge.value.targetY = targetY
+      if (edge.targetY !== targetY) edge.targetY = targetY
     },
     { immediate: true },
   )
@@ -64,37 +64,40 @@ onMounted(() => {
 const { onMouseDown } = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
-  const data = { event, edge: edge.value }
+  const data = { event, edge }
   if (props.selectable) {
-    store.nodesSelectionActive = false
+    setState({
-    store.addSelectedEdges([edge.value])
+      nodesSelectionActive: false,
+    })
+
+    addSelectedEdges([edge])
   }
-  store.hooks.edgeClick.trigger(data)
+  hooks.edgeClick.trigger(data)
 }
 
-const onEdgeContextMenu = (event: MouseEvent) => store.hooks.edgeContextMenu.trigger({ event, edge: edge.value })
+const onEdgeContextMenu = (event: MouseEvent) => hooks.edgeContextMenu.trigger({ event, edge })
 
-const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: edge.value })
+const onDoubleClick = (event: MouseEvent) => hooks.edgeDoubleClick.trigger({ event, edge })
 
-const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: edge.value })
+const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge })
 
-const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: edge.value })
+const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge })
 
-const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: edge.value })
+const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge })
 
-const onEdgeUpdaterMouseEnter = () => (updating.value = true)
+const onEdgeUpdaterMouseEnter = () => (updating = true)
 
-const onEdgeUpdaterMouseOut = () => (updating.value = false)
+const onEdgeUpdaterMouseOut = () => (updating = false)
 
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, true)
 
 const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, false)
 
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
-  const nodeId = isSourceHandle ? edge.value.target : edge.value.source
+  const nodeId = isSourceHandle ? edge.target : edge.source
-  const handleId = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
+  const handleId = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
 
-  store.hooks.edgeUpdateStart.trigger({ event, edge: edge.value })
+  hooks.edgeUpdateStart.trigger({ event, edge })
 
   onMouseDown(
     event,
@@ -103,14 +106,14 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
     isSourceHandle,
     undefined,
     isSourceHandle ? 'target' : 'source',
-    (connection) => store.hooks.edgeUpdate.trigger({ edge: edge.value, connection }),
+    (connection) => hooks.edgeUpdate.trigger({ edge, connection }),
-    () => store.hooks.edgeUpdateEnd.trigger({ event, edge: edge.value }),
+    () => hooks.edgeUpdateEnd.trigger({ event, edge }),
   )
 }
 
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() => {
-  if (store.connectionMode === ConnectionMode.Strict) {
+  if (connectionMode === ConnectionMode.Strict) {
     return props.targetNode.handleBounds.target
   }
 
@@ -120,7 +123,7 @@ const targetNodeHandles = computed(() => {
 })
 
 const sourceNodeHandles = computed(() => {
-  if (store.connectionMode === ConnectionMode.Strict) {
+  if (connectionMode === ConnectionMode.Strict) {
     return props.sourceNode.handleBounds.source
   }
 
@@ -129,9 +132,9 @@ const sourceNodeHandles = computed(() => {
   return sourceBounds ?? targetBounds
 })
 
-const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.value.sourceHandle))
+const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.sourceHandle))
 
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
+const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.targetHandle))
 
 const sourcePosition = controlledComputed(sourceHandle, () =>
   sourceHandle.value ? sourceHandle.value.position : Position.Bottom,
@@ -139,49 +142,47 @@ const sourcePosition = controlledComputed(sourceHandle, () =>
 
 const targetPosition = controlledComputed(targetHandle, () => (targetHandle.value ? targetHandle.value.position : Position.Top))
 
-const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius)
-
 const type = computed(() => {
-  let edgeType = edge.value.template ?? store.getEdgeTypes[name.value]
+  let edgeType = edge.template ?? getEdgeTypes[name]
   const instance = getCurrentInstance()
 
   if (typeof edgeType === 'string') {
     if (instance) {
       const components = Object.keys(instance.appContext.components)
-      if (components && components.includes(name.value)) {
+      if (components && components.includes(name)) {
-        edgeType = resolveComponent(name.value, false) as EdgeComponent
+        edgeType = resolveComponent(name, false) as EdgeComponent
       }
     }
   }
   if (typeof edgeType !== 'string') return edgeType
 
-  const slot = slots?.[`edge-${name.value}`]
+  const slot = slots?.[`edge-${name}`]
   if (!slot?.({})) {
-    console.warn(`[vueflow]: Edge type "${edge.value.type}" not found and no edge-slot detected. Using fallback type "default".`)
+    console.warn(`[vueflow]: Edge type "${edge.type}" not found and no edge-slot detected. Using fallback type "default".`)
-    name.value = 'default'
+    name = 'default'
-    return store.getEdgeTypes.default
+    return getEdgeTypes.default
   }
 
   return slot
 })
 
 const getClass = computed(() => {
-  const extraClass = edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class
+  const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
   return [
     'vue-flow__edge',
-    `vue-flow__edge-${name.value}`,
+    `vue-flow__edge-${name}`,
-    store.noPanClassName,
+    noPanClassName,
     {
-      selected: edge.value.selected,
+      selected: edge.selected,
-      animated: edge.value.animated,
+      animated: edge.animated,
       inactive: !props.selectable,
-      updating: updating.value,
+      updating,
     },
     extraClass,
   ]
 })
 
-const getStyle = () => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style) as CSSProperties
+const getStyle = () => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
 </script>
 <script lang="ts">
 export default {

package/src/components/Handle/Handle.vue

@@ -4,38 +4,45 @@ import { ConnectionMode, Position } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
 
-const { id, hooks, connectionStartHandle, connectionMode } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
   position: 'top' as Position,
   connectable: true,
 })
 
+const { id, hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
+
 const nodeId = inject(NodeId, '')
 
-const handleId = computed(
+const handleId = $computed(
-  () => props.id ?? (connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
+  () => props.id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
 )
 
 const { onMouseDown, onClick } = useHandle()
-const onMouseDownHandler = (event: MouseEvent) =>
+
-  onMouseDown(event, handleId.value, nodeId, props.type === 'target', props.isValidConnection, undefined)
+const onMouseDownHandler = (event: MouseEvent) => {
-const onClickHandler = (event: MouseEvent) => onClick(event, handleId.value ?? null, nodeId, props.type, props.isValidConnection)
+  onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
+}
+
+const onClickHandler = (event: MouseEvent) => {
+  onClick(event, handleId ?? null, nodeId, props.type, props.isValidConnection)
+}
 
 const getClasses = computed(() => {
   return [
     'vue-flow__handle',
     `vue-flow__handle-${props.position}`,
-    `vue-flow__handle-${handleId.value}`,
+    `vue-flow__handle-${handleId}`,
     'nodrag',
     {
       source: props.type !== 'target',
       target: props.type === 'target',
       connectable: props.connectable,
       connecting:
-        connectionStartHandle.value?.nodeId === nodeId &&
+        connectionStartHandle &&
-        connectionStartHandle.value?.handleId === handleId.value &&
+        connectionStartHandle.nodeId === nodeId &&
-        connectionStartHandle.value?.type === props.type,
+        connectionStartHandle.handleId === handleId &&
+        connectionStartHandle.type === props.type,
     },
   ]
 })

package/src/components/Nodes/NodeWrapper.vue

@@ -21,36 +21,48 @@ provide(NodeId, props.id)
 
 const slots = inject(Slots)
 
-const { store } = useVueFlow()
+const {
+  viewport,
+  noDragClassName,
+  noPanClassName,
+  hooks,
+  selectNodesOnDrag,
+  setState,
+  updateNodePosition,
+  updateNodeDimensions,
+  getNode,
+  getNodeTypes,
+  addSelectedNodes,
+} = $(useVueFlow())
 
-const node = useVModel(props, 'node')
+const node = $(useVModel(props, 'node'))
 
-const name = ref(node.value.type ?? 'default')
+let name = $ref(node.type ?? 'default')
 watch(
-  () => node.value.type,
+  () => node.type,
-  (v) => v && (name.value = v),
+  (v) => v && (name = v),
 )
 
 const nodeElement = ref()
 
 const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
-  handle: node.value.dragHandle,
+  handle: node.dragHandle,
   disabled: !props.draggable,
   grid: props.snapGrid,
-  cancel: `.${store.noDragClassName}`,
+  cancel: `.${noDragClassName}`,
   enableUserSelectHack: false,
-  scale: store.viewport.zoom,
+  scale: viewport.zoom,
 })
 
 onBeforeMount(() => {
-  store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
+  updateNodePosition({ id: node.id, diff: { x: 0, y: 0 } })
 })
 
 onMounted(() => {
   debouncedWatch(
-    () => store.viewport.zoom,
+    () => viewport.zoom,
     () => {
-      scale.value = store.viewport.zoom
+      scale.value = viewport.zoom
     },
     { debounce: 5, flush: 'post' },
   )
@@ -58,42 +70,42 @@ onMounted(() => {
 
 onMounted(() => {
   const observer = useResizeObserver(nodeElement, () =>
-    store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]),
+    updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }]),
   )
 
   watch(
-    [() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition],
+    [() => node.type, () => node.sourcePosition, () => node.targetPosition],
     () => {
-      store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])
+      updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value }])
     },
     { flush: 'post' },
   )
 
   onBeforeUnmount(() => observer.stop())
 
-  store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }])
+  updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }])
 })
 
 watch(
   [
-    () => node.value.position,
+    () => node.position,
-    () => store.getNode(node.value.parentNode!)?.computedPosition,
+    () => getNode(node.parentNode!)?.computedPosition,
-    () => node.value.selected,
+    () => node.selected,
-    () => store.getNode(node.value.parentNode!)?.selected,
+    () => getNode(node.parentNode!)?.selected,
   ],
   ([pos, parent]) => {
     const xyzPos = {
       ...pos,
-      z: node.value.dragging || node.value.selected ? 1000 : 0,
+      z: node.dragging || node.selected ? 1000 : 0,
     }
 
     if (parent) {
-      node.value.computedPosition = getXYZPos(parent, xyzPos)
+      node.computedPosition = getXYZPos(parent, xyzPos)
     } else {
-      node.value.computedPosition = xyzPos
+      node.computedPosition = xyzPos
     }
 
-    node.value.handleBounds = getHandleBounds(nodeElement.value, scale.value)
+    node.handleBounds = getHandleBounds(nodeElement.value, scale.value)
   },
   { deep: true, flush: 'post' },
 )
@@ -103,108 +115,116 @@ onUnmounted(() => {
 })
 
 const onMouseEnter = (event: MouseEvent) => {
-  if (!node.value.dragging) {
+  if (!node.dragging) {
-    store.hooks.nodeMouseEnter.trigger({ event, node: node.value })
+    hooks.nodeMouseEnter.trigger({ event, node })
   }
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!node.value.dragging) {
+  if (!node.dragging) {
-    store.hooks.nodeMouseMove.trigger({ event, node: node.value })
+    hooks.nodeMouseMove.trigger({ event, node })
   }
 }
 
 const onMouseLeave = (event: MouseEvent) => {
-  if (!node.value.dragging) {
+  if (!node.dragging) {
-    store.hooks.nodeMouseLeave.trigger({ event, node: node.value })
+    hooks.nodeMouseLeave.trigger({ event, node })
   }
 }
 
 const onContextMenu = (event: MouseEvent) => {
-  store.hooks.nodeContextMenu.trigger({
+  hooks.nodeContextMenu.trigger({
     event,
-    node: node.value,
+    node,
   })
 }
 
-const onDoubleClick = (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: node.value })
+const onDoubleClick = (event: MouseEvent) => hooks.nodeDoubleClick.trigger({ event, node })
 
 const onSelectNode = (event: MouseEvent) => {
   if (!props.draggable) {
     if (props.selectable) {
-      store.nodesSelectionActive = false
+      setState({
-      if (!node.value.selected) store.addSelectedNodes([node.value])
+        nodesSelectionActive: false,
+      })
+
+      if (!node.selected) addSelectedNodes([node])
     }
-    store.hooks.nodeClick.trigger({ event, node: node.value })
+    hooks.nodeClick.trigger({ event, node })
   }
 }
 
 const type = computed(() => {
-  let nodeType = node.value.template ?? store.getNodeTypes[name.value]
+  let nodeType = node.template ?? getNodeTypes[name]
   const instance = getCurrentInstance()
 
   if (typeof nodeType === 'string') {
     if (instance) {
       const components = Object.keys(instance.appContext.components)
-      if (components && components.includes(name.value)) {
+      if (components && components.includes(name)) {
-        nodeType = resolveComponent(name.value, false) as NodeComponent
+        nodeType = resolveComponent(name, false) as NodeComponent
       }
     }
   }
   if (typeof nodeType !== 'string') return nodeType
 
-  const slot = slots?.[`node-${name.value}`]
+  const slot = slots?.[`node-${name}`]
   if (!slot?.({})) {
-    console.warn(`[vueflow]: Node type "${node.value.type}" not found and no node-slot detected. Using fallback type "default".`)
+    console.warn(`[vueflow]: Node type "${node.type}" not found and no node-slot detected. Using fallback type "default".`)
-    name.value = 'default'
+    name = 'default'
-    return store.getNodeTypes.default
+    return getNodeTypes.default
   }
 
   return slot
 })
 
 onDragStart(({ event }) => {
-  store.addSelectedNodes([])
+  addSelectedNodes([])
-  store.hooks.nodeDragStart.trigger({ event, node: node.value })
+  hooks.nodeDragStart.trigger({ event, node })
 
-  if (store.selectNodesOnDrag && props.selectable) {
+  if (selectNodesOnDrag && props.selectable) {
-    store.nodesSelectionActive = false
+    setState({
+      nodesSelectionActive: false,
+    })
 
-    if (!node.value.selected) store.addSelectedNodes([node.value])
+    if (!node.selected) addSelectedNodes([node])
-  } else if (!store.selectNodesOnDrag && !node.value.selected && props.selectable) {
+  } else if (!selectNodesOnDrag && !node.selected && props.selectable) {
-    store.nodesSelectionActive = false
+    setState({
-    store.addSelectedNodes([])
+      nodesSelectionActive: false,
+    })
+
+    addSelectedNodes([])
   }
 })
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
-  store.updateNodePosition({ id: node.value.id, diff: { x: deltaX, y: deltaY }, dragging: true })
+  updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: true })
-  store.hooks.nodeDrag.trigger({ event, node: node.value })
+  hooks.nodeDrag.trigger({ event, node })
 })
 
 onDragStop(({ event, data: { deltaX, deltaY } }) => {
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
-  if (!node.value.dragging) {
+  if (!node.dragging) {
-    if (props.selectable && !store.selectNodesOnDrag && !node.value.selected) {
+    if (props.selectable && !selectNodesOnDrag && !node.selected) {
-      store.addSelectedNodes([node.value])
+      addSelectedNodes([node])
     }
-    store.hooks.nodeClick.trigger({ event, node: node.value })
+    hooks.nodeClick.trigger({ event, node })
     return
   }
-  store.updateNodePosition({ id: node.value.id, diff: { x: deltaX, y: deltaY }, dragging: false })
+  updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: false })
-  store.hooks.nodeDragStop.trigger({ event, node: node.value })
+  hooks.nodeDragStop.trigger({ event, node })
 })
 
 const getClass = computed(() => {
-  const extraClass = node.value.class instanceof Function ? node.value.class(node.value) : node.value.class
+  const extraClass = node.class instanceof Function ? node.class(node) : node.class
   return [
     'vue-flow__node',
-    `vue-flow__node-${name.value}`,
+    `vue-flow__node-${name}`,
-    store.noPanClassName,
+    noPanClassName,
     {
-      dragging: node.value.dragging,
+      dragging: node.dragging,
-      selected: node.value.selected,
+      selected: node.selected,
       selectable: props.selectable,
     },
     extraClass,
@@ -212,15 +232,15 @@ const getClass = computed(() => {
 })
 
 const getStyle = computed(() => {
-  const styles = (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style) || {}
+  const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
-  const width = node.value.width instanceof Function ? node.value.width(node.value) : node.value.width
+  const width = node.width instanceof Function ? node.width(node) : node.width
-  const height = node.value.height instanceof Function ? node.value.height(node.value) : node.value.height
+  const height = node.height instanceof Function ? node.height(node) : node.height
   if (width) styles.width = typeof width === 'string' ? width : `${width}px`
   if (height) styles.height = typeof height === 'string' ? height : `${height}px`
 
   return {
-    zIndex: node.value.computedPosition.z,
+    zIndex: node.computedPosition.z,
-    transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
+    transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
     pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
     ...styles,
   } as CSSProperties

package/src/components/NodesSelection/NodesSelection.vue

@@ -3,51 +3,55 @@ import { useDraggableCore } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 
-const { store } = useVueFlow()
+const { hooks, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, updateNodePosition, noPanClassName } = $(useVueFlow())
 
 const el = templateRef<HTMLDivElement>('el', null)
 
-const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes))
+const selectedNodesBBox = $computed(() => getRectOfNodes(getSelectedNodes))
 
 const innerStyle = computed(() => ({
-  width: `${selectedNodesBBox.value.width}px`,
+  width: `${selectedNodesBBox.width}px`,
-  height: `${selectedNodesBBox.value.height}px`,
+  height: `${selectedNodesBBox.height}px`,
-  top: `${selectedNodesBBox.value.y}px`,
+  top: `${selectedNodesBBox.y}px`,
-  left: `${selectedNodesBBox.value.x}px`,
+  left: `${selectedNodesBBox.x}px`,
 }))
 
-const transform = computed(() => `translate(${store.viewport.x}px,${store.viewport.y}px) scale(${store.viewport.zoom})`)
+const transform = computed(() => `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`)
 
-watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
+watch(selectedNodesBBox, (v) => {
+  setState({
+    selectedNodesBbox: v,
+  })
+})
 
-const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
+const onContextMenu = (event: MouseEvent) => hooks.selectionContextMenu.trigger({ event, nodes: getSelectedNodes })
 
 const { onDragStart, onDrag, onDragStop, scale } = useDraggableCore(el, {
-  grid: store.snapToGrid ? store.snapGrid : undefined,
+  grid: snapToGrid ? snapGrid : undefined,
   enableUserSelectHack: false,
-  scale: store.viewport.zoom,
+  scale: viewport.zoom,
 })
 
 onMounted(() => {
   debouncedWatch(
-    () => store.viewport.zoom,
+    () => viewport.zoom,
     () => {
-      scale.value = store.viewport.zoom
+      scale.value = viewport.zoom
     },
     { debounce: 5 },
   )
 })
 
-onDragStart(({ event }) => store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes }))
+onDragStart(({ event }) => hooks.selectionDragStart.trigger({ event, nodes: getSelectedNodes }))
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
-  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
+  hooks.selectionDrag.trigger({ event, nodes: getSelectedNodes })
-  store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
+  updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
 })
 
 onDragStop(({ event }) => {
-  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
+  hooks.selectionDragStop.trigger({ event, nodes: getSelectedNodes })
-  store.getSelectedNodes.forEach((node) => (node.dragging = false))
+  getSelectedNodes.forEach((node) => (node.dragging = false))
 })
 </script>
 <script lang="ts">
@@ -56,7 +60,7 @@ export default {
 }
 </script>
 <template>
-  <div class="vue-flow__nodesselection vue-flow__container" :class="store.noPanClassName" :style="{ transform }">
+  <div class="vue-flow__nodesselection vue-flow__container" :class="noPanClassName" :style="{ transform }">
     <div ref="el" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
   </div>
 </template>

package/src/components/UserSelection/UserSelection.vue

@@ -5,11 +5,11 @@ import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
 
-const { store } = useVueFlow()
+const { userSelectionActive, setState, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } = $(useVueFlow())
 const el = templateRef('user-selection', null)
 
-const prevNodes = ref(0)
+let prevNodes = $ref(0)
-const prevEdges = ref(0)
+let prevEdges = $ref(0)
 const initialRect = () => ({
   width: 0,
   height: 0,
@@ -20,20 +20,23 @@ const initialRect = () => ({
   draw: false,
 })
 
-const rect = ref<Rect>(initialRect())
+let rect = $ref<Rect>(initialRect())
 
 const reset = () => {
-  rect.value = initialRect()
+  rect = initialRect()
-  store.userSelectionActive = false
+  prevNodes = 0
-  prevNodes.value = 0
+  prevEdges = 0
-  prevEdges.value = 0
+
+  setState({
+    userSelectionActive: false,
+  })
 }
 
 const onMouseDown = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  rect.value = {
+  rect = {
     width: 0,
     height: 0,
     startX: mousePos.x,
@@ -43,47 +46,55 @@ const onMouseDown = (event: MouseEvent) => {
     draw: true,
   }
 
-  store.userSelectionActive = true
+  setState({
-  store.nodesSelectionActive = false
+    userSelectionActive: true,
+    nodesSelectionActive: false,
+  })
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!store.userSelectionActive || !rect.value.draw) return
+  if (!userSelectionActive || !rect.draw) return
 
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  const startX = rect.value.startX
+  const startX = rect.startX
-  const startY = rect.value.startY
+  const startY = rect.startY
 
   const nextUserSelectRect: Rect = {
-    ...rect.value,
+    ...rect,
-    x: mousePos.x < startX ? mousePos.x : rect.value.x,
+    x: mousePos.x < startX ? mousePos.x : rect.x,
-    y: mousePos.y < startY ? mousePos.y : rect.value.y,
+    y: mousePos.y < startY ? mousePos.y : rect.y,
     width: Math.abs(mousePos.x - startX),
     height: Math.abs(mousePos.y - startY),
   }
 
-  const selectedNodes = getNodesInside(store.getNodes, rect.value, store.viewport)
+  const selectedNodes = getNodesInside(getNodes, rect, viewport)
-  const selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges)
 
-  rect.value = nextUserSelectRect
+  rect = nextUserSelectRect
 
-  store.addSelectedNodes(selectedNodes)
+  addSelectedNodes(selectedNodes)
-  store.addSelectedEdges(selectedEdges)
+  addSelectedEdges(selectedEdges)
 
-  prevNodes.value = selectedNodes.length
+  prevNodes = selectedNodes.length
-  prevEdges.value = selectedEdges.length
+  prevEdges = selectedEdges.length
 }
 
 const onMouseUp = () => {
-  store.nodesSelectionActive = prevNodes.value > 0
+  rect = initialRect()
-  rect.value = initialRect()
+
-  store.userSelectionActive = false
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+    userSelectionActive: false,
+  })
 }
 
 const onMouseLeave = () => {
-  store.nodesSelectionActive = false
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+  })
+
   reset()
 }
 

package/src/composables/useHandle.ts

@@ -1,6 +1,6 @@
 import useVueFlow from './useVueFlow'
 import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, Getters, GraphEdge, HandleType, Store, ValidConnectionFunc } from '~/types'
+import { Connection, ConnectionMode, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types'
 
 type Result = {
   elementBelow: Element | null
@@ -71,7 +71,19 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
   hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
-export default (store: Store = useVueFlow().store) => {
+export default () => {
+  const {
+    edges,
+    connectOnClick,
+    nodesConnectable,
+    connectionStartHandle,
+    connectionPosition,
+    connectionMode,
+    hooks,
+    setState,
+    getNode,
+  } = $(useVueFlow())
+
   let recentHoveredHandle: Element
 
   const onMouseDown = (
@@ -85,16 +97,20 @@ export default (store: Store = useVueFlow().store) => {
     onEdgeUpdateEnd?: () => void,
   ) => {
     const flowNode = (event.target as Element).closest('.vue-flow')
+
     const doc = getHostForElement(event.target as HTMLElement)
     if (!doc) return
 
     let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
-    const node = store.getNode(nodeId)
 
-    if (node && (typeof node.connectable === 'undefined' ? store.nodesConnectable : node.connectable) === false) return
+    const node = getNode(nodeId)
+
+    if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
+
     if (!isValidConnection) {
       if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) ?? (() => true)
     }
+
     const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
     const elementBelowIsTarget = elementBelow?.classList.contains('target')
     const elementBelowIsSource = elementBelow?.classList.contains('source')
@@ -102,9 +118,10 @@ export default (store: Store = useVueFlow().store) => {
     if (!flowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
 
     const handleType = elementEdgeUpdaterType ?? (elementBelowIsTarget ? 'target' : 'source')
+
     const containerBounds = flowNode.getBoundingClientRect()
 
-    store.setState({
+    setState({
       connectionPosition: {
         x: event.clientX - containerBounds.left,
         y: event.clientY - containerBounds.top,
@@ -114,22 +131,22 @@ export default (store: Store = useVueFlow().store) => {
       connectionHandleType: handleType,
     })
 
-    store.hooks.connectStart.trigger({ event, nodeId, handleId, handleType })
+    hooks.connectStart.trigger({ event, nodeId, handleId, handleType })
 
     function onMouseMove(event: MouseEvent) {
-      store.connectionPosition.x = event.clientX - containerBounds.left
+      connectionPosition.x = event.clientX - containerBounds.left
-      store.connectionPosition.y = event.clientY - containerBounds.top
+      connectionPosition.y = event.clientY - containerBounds.top
 
       const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
         event,
-        store.connectionMode,
+        connectionMode,
         isTarget,
         nodeId,
         handleId,
         validConnectFunc,
         doc,
-        store.edges,
+        edges,
-        store.getNode,
+        getNode,
       )
 
       if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
@@ -146,30 +163,32 @@ export default (store: Store = useVueFlow().store) => {
     function onMouseUp(event: MouseEvent) {
       const { connection, isValid } = checkElementBelowIsValid(
         event,
-        store.connectionMode,
+        connectionMode,
         isTarget,
         nodeId,
         handleId,
         validConnectFunc,
         doc,
-        store.edges,
+        edges,
-        store.getNode,
+        getNode,
       )
 
-      store.hooks.connectStop.trigger(event)
+      hooks.connectStop.trigger(event)
+
       const isOwnHandle = connection.source === connection.target
 
       if (isValid && !isOwnHandle) {
-        if (!onEdgeUpdate) store.hooks.connect.trigger(connection)
+        if (!onEdgeUpdate) hooks.connect.trigger(connection)
         else onEdgeUpdate(connection)
       }
 
-      store.hooks.connectEnd.trigger(event)
+      hooks.connectEnd.trigger(event)
 
       if (elementEdgeUpdaterType) onEdgeUpdateEnd?.()
 
       resetRecentHandle(recentHoveredHandle)
-      store.setState({
+
+      setState({
         connectionNodeId: null,
         connectionHandleId: null,
         connectionHandleType: null,
@@ -191,40 +210,44 @@ export default (store: Store = useVueFlow().store) => {
     handleType: HandleType,
     isValidConnection?: ValidConnectionFunc,
   ) => {
-    if (!store.connectOnClick) return
+    if (!connectOnClick) return
-    if (!store.connectionStartHandle) {
+    if (!connectionStartHandle) {
-      store.hooks.connectStart.trigger({ event, nodeId, handleId, handleType })
+      hooks.connectStart.trigger({ event, nodeId, handleId, handleType })
-      store.setState({ connectionStartHandle: { nodeId, type: handleType, handleId } })
+      setState({ connectionStartHandle: { nodeId, type: handleType, handleId } })
     } else {
       let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
-      const node = store.getNode(nodeId)
 
-      if (node && (typeof node.connectable === 'undefined' ? store.nodesConnectable : node.connectable) === false) return
+      const node = getNode(nodeId)
+
+      if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
+
       if (!isValidConnection) {
         if (node) validConnectFunc = (handleType !== 'target' ? node.isValidTargetPos : node.isValidSourcePos) ?? (() => true)
       }
+
       const doc = getHostForElement(event.target as HTMLElement)
+
       const { connection, isValid } = checkElementBelowIsValid(
         event as MouseEvent,
-        store.connectionMode,
+        connectionMode,
-        store.connectionStartHandle.type === 'target',
+        connectionStartHandle.type === 'target',
-        store.connectionStartHandle.nodeId,
+        connectionStartHandle.nodeId,
-        store.connectionStartHandle.handleId || null,
+        connectionStartHandle.handleId || null,
         validConnectFunc,
         doc,
-        store.edges,
+        edges,
-        store.getNode,
+        getNode,
       )
 
       const isOwnHandle = connection.source === connection.target
 
-      store.hooks.connectStop.trigger(event)
+      hooks.connectStop.trigger(event)
 
-      if (isValid && !isOwnHandle) store.hooks.connect.trigger(connection)
+      if (isValid && !isOwnHandle) hooks.connect.trigger(connection)
 
-      store.hooks.connectEnd.trigger(event)
+      hooks.connectEnd.trigger(event)
 
-      store.setState({ connectionStartHandle: null })
+      setState({ connectionStartHandle: null })
     }
   }
 

package/src/composables/useVueFlow.ts

@@ -1,14 +1,17 @@
 import { EffectScope } from 'vue'
 import { MaybeRef } from '@vueuse/core'
-import { FlowHooksOn, FlowOptions, FlowProps, State, UseVueFlow } from '~/types'
+import { FlowHooksOn, FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
 import { VueFlow } from '~/context'
 import useState from '~/store/state'
 import useGetters from '~/store/getters'
 import useActions from '~/store/actions'
 
+/**
+ * Stores all currently created store instances
+ */
 export class Storage {
   public currentId = 0
-  public flows = new Map<string, UseVueFlow>()
+  public flows = new Map<string, VueFlowStore>()
   static instance: Storage
 
   public static getInstance(): Storage {
@@ -19,7 +22,7 @@ export class Storage {
     return Storage.instance
   }
 
-  public set(id: string, flow: UseVueFlow) {
+  public set(id: string, flow: VueFlowStore) {
     return this.flows.set(id, flow)
   }
 
@@ -31,16 +34,21 @@ export class Storage {
     return this.flows.delete(id)
   }
 
-  public create(id: string, preloadedState?: FlowOptions): UseVueFlow {
+  public create(id: string, preloadedState?: FlowOptions): VueFlowStore {
     const state: State = useState(preloadedState)
+
     const reactiveState = reactive(state)
+
     const getters = useGetters(reactiveState)
+
     const actions = useActions(reactiveState, getters)
+
     const hooksOn: FlowHooksOn = <any>{}
     Object.entries(reactiveState.hooks).forEach(([n, h]) => {
       const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}` as keyof FlowHooksOn
       hooksOn[name] = h.on as any
     })
+
     actions.setState(reactiveState)
     if (preloadedState) {
       if (preloadedState.modelValue) actions.setElements(preloadedState.modelValue)
@@ -48,20 +56,12 @@ export class Storage {
       if (preloadedState.edges) actions.setEdges(preloadedState.edges)
     }
 
-    const store = reactive({
+    const flow: VueFlowStore = {
-      ...hooksOn,
-      ...toRefs(reactiveState),
-      ...getters,
-      ...actions,
-    })
-
-    const flow: UseVueFlow = {
       ...hooksOn,
       ...getters,
       ...actions,
       ...toRefs(reactiveState),
       id,
-      store,
     }
 
     this.set(id, flow)
@@ -74,13 +74,15 @@ export class Storage {
   }
 }
 
-type Injection = UseVueFlow | null | undefined
+type Injection = VueFlowStore | null | undefined
 type Scope = (EffectScope & { vueFlowId: string }) | undefined
 type Options = { [key in keyof FlowProps]: MaybeRef<FlowProps[key]> }
 
-export default (options?: Options): UseVueFlow => {
+export default (options?: Options): VueFlowStore => {
   const reactiveOptions = options ? reactive(options) : undefined
+
   const storage = Storage.getInstance()
+
   const scope = getCurrentScope() as Scope
 
   const id = reactiveOptions?.id
@@ -88,15 +90,28 @@ export default (options?: Options): UseVueFlow => {
 
   let vueFlow: Injection
 
+  /**
+   * check if we can get a store instance through injections
+   * this should be the regular way after initialization
+   */
   if (scope) {
     const injection = inject(VueFlow, null)
     if (typeof injection !== 'undefined' && injection !== null) vueFlow = injection
   }
 
+  /**
+   * check if we can get a store instance through storage
+   * this requires options id or an id on the current scope
+   */
   if (!vueFlow) {
     if (vueFlowId) vueFlow = storage.get(vueFlowId)
   }
 
+  /**
+   * If we cannot find any store instance in the previous steps
+   * _or_ if the store instance we found does not match up with provided ids
+   * create a new store instance and register it in storage
+   */
   if (!vueFlow || (vueFlow && id && id !== vueFlow.id)) {
     const name = id ?? storage.getId()
 
@@ -105,18 +120,32 @@ export default (options?: Options): UseVueFlow => {
     if (scope) {
       scope.vueFlowId = name
 
+      // dispose of state values and storage entry
       onScopeDispose(() => {
-        vueFlow!.$reset()
+        vueFlow?.$reset()
-        storage.remove(vueFlow!.id)
+        storage.remove(name)
         vueFlow = null
       })
+
+      if (reactiveOptions) {
+        scope.run(() => {
+          watch(reactiveOptions, (opts) => {
+            vueFlow?.setState(opts)
+          })
+        })
+      }
     }
   } else {
+    // if composable was called with additional options after initialization, overwrite state with the options values
     if (reactiveOptions) vueFlow.setState(reactiveOptions)
   }
 
+  /**
+   * Vue flow wasn't able to find any store instance - we can't proceed
+   */
   if (!vueFlow) throw new Error('[vueflow]: store instance not found.')
 
+  // always provide a fresh instance into context on call
   if (scope) {
     provide(VueFlow, vueFlow)
   }

package/src/composables/useZoomPanHelper.ts

@@ -2,22 +2,22 @@ import { zoomIdentity } from 'd3-zoom'
 import useVueFlow from './useVueFlow'
 import useWindow from './useWindow'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, clampPosition } from '~/utils'
-import { GraphNode, Store, ViewportFuncs, D3Selection } from '~/types'
+import { GraphNode, ViewportFuncs, D3Selection, Getters, Dimensions } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 
 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
 
-const untilDimensions = async (store: Store) => {
+const untilDimensions = async (dimensions: Dimensions, getNodes: Getters['getNodes']) => {
   // if ssr we can't wait for dimensions, they'll never really exist
   const window = useWindow()
   if ('screen' in window) {
     // wait until viewport dimensions has been established
-    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
+    await until(dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
 
     // if initial nodes are present, wait until the node dimensions have been established
-    if (store.getNodes.length > 0) {
+    if (getNodes.length > 0) {
-      await until(store.getNodes).toMatch(
+      await until(getNodes).toMatch(
         (nodes) =>
           !!nodes.filter(({ dimensions: { width, height } }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
             .length,
@@ -28,23 +28,27 @@ const untilDimensions = async (store: Store) => {
   return true
 }
 
-export default (store: Store = useVueFlow().store): ViewportFuncs => {
+export default (): ViewportFuncs => {
-  const hasDimensions = ref(false)
+  const { hooks, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, getNodes } =
-  store.hooks.paneReady.on(() => (hasDimensions.value = true))
+    $(useVueFlow())
+
+  let hasDimensions = $ref(false)
+
+  hooks.paneReady.on(() => (hasDimensions = true))
 
   const zoomTo: ViewportFuncs['zoomTo'] = async (zoomLevel, options) => {
-    if (!hasDimensions.value) await untilDimensions(store)
+    if (!hasDimensions) await untilDimensions(dimensions, getNodes)
 
-    if (store.d3Selection && store.d3Zoom) {
+    if (d3Selection && d3Zoom) {
-      store.d3Zoom.scaleTo(transition(store.d3Selection, options?.duration), zoomLevel)
+      d3Zoom.scaleTo(transition(d3Selection, options?.duration), zoomLevel)
     }
   }
 
   const zoom = async (scale: number, duration?: number) => {
-    if (!hasDimensions.value) await untilDimensions(store)
+    if (!hasDimensions) await untilDimensions(dimensions, getNodes)
 
-    if (store.d3Selection && store.d3Zoom) {
+    if (d3Selection && d3Zoom) {
-      store.d3Zoom.scaleBy(transition(store.d3Selection, duration), scale)
+      d3Zoom.scaleBy(transition(d3Selection, duration), scale)
     }
   }
 
@@ -58,12 +62,12 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => {
 
   const transformViewport = (x: number, y: number, zoom: number, duration?: number) => {
     // enforce translate extent
-    const { x: clampedX, y: clampedY } = clampPosition({ x: -x, y: -y }, store.translateExtent)
+    const { x: clampedX, y: clampedY } = clampPosition({ x: -x, y: -y }, translateExtent)
 
     const nextTransform = zoomIdentity.translate(-clampedX, -clampedY).scale(zoom)
 
-    if (store.d3Selection && store.d3Zoom) {
+    if (d3Selection && d3Zoom) {
-      store.d3Zoom.transform(transition(store.d3Selection, duration), nextTransform)
+      d3Zoom.transform(transition(d3Selection, duration), nextTransform)
     }
   }
 
@@ -72,13 +76,13 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => {
     zoomOut,
     zoomTo,
     setTransform: async (transform, options) => {
-      if (!hasDimensions.value) await untilDimensions(store)
+      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
       transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
     },
     getTransform: () => ({
-      x: store.viewport.x,
+      x: viewport.x,
-      y: store.viewport.y,
+      y: viewport.y,
-      zoom: store.viewport.zoom,
+      zoom: viewport.zoom,
     }),
     fitView: async (
       options = {
@@ -87,27 +91,27 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => {
         duration: 0,
       },
     ) => {
-      if (!hasDimensions.value) await untilDimensions(store)
+      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
 
-      if (!store.getNodes.length) return
+      if (!getNodes.length) return
 
       let nodes: GraphNode[] = []
       if (options.nodes) {
-        nodes = store.nodes.filter((n) => options.nodes?.includes(n.id))
+        nodes = nodes.filter((n) => options.nodes?.includes(n.id))
       }
 
       if (!nodes || !nodes.length) {
-        nodes = options.includeHiddenNodes ? store.nodes : store.getNodes
+        nodes = options.includeHiddenNodes ? nodes : getNodes
       }
 
       const bounds = getRectOfNodes(nodes)
 
       const { x, y, zoom } = getTransformForBounds(
         bounds,
-        store.dimensions.width,
+        dimensions.width,
-        store.dimensions.height,
+        dimensions.height,
-        options.minZoom ?? store.minZoom,
+        options.minZoom ?? minZoom,
-        options.maxZoom ?? store.maxZoom,
+        options.maxZoom ?? maxZoom,
         options.padding ?? DEFAULT_PADDING,
         options.offset,
       )
@@ -115,28 +119,21 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => {
       transformViewport(x, y, zoom, options?.duration)
     },
     setCenter: async (x, y, options) => {
-      if (!hasDimensions.value) await untilDimensions(store)
+      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
 
-      const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom
+      const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom
-      const centerX = store.dimensions.width / 2 - x * nextZoom
+      const centerX = dimensions.width / 2 - x * nextZoom
-      const centerY = store.dimensions.height / 2 - y * nextZoom
+      const centerY = dimensions.height / 2 - y * nextZoom
 
       transformViewport(centerX, centerY, nextZoom, options?.duration)
     },
     fitBounds: async (bounds, options = { padding: DEFAULT_PADDING }) => {
-      if (!hasDimensions.value) await untilDimensions(store)
+      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
 
-      const { x, y, zoom } = getTransformForBounds(
+      const { x, y, zoom } = getTransformForBounds(bounds, dimensions.width, dimensions.height, minZoom, maxZoom, options.padding)
-        bounds,
-        store.dimensions.width,
-        store.dimensions.height,
-        store.minZoom,
-        store.maxZoom,
-        options.padding,
-      )
 
       transformViewport(x, y, zoom, options?.duration)
     },
-    project: (position) => pointToRendererPoint(position, store.viewport, store.snapToGrid, store.snapGrid),
+    project: (position) => pointToRendererPoint(position, viewport, snapToGrid, snapGrid),
   }
 }

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -5,30 +5,43 @@ import { useVueFlow } from '../../composables'
 import { groupEdgesByZLevel } from '../../utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
-const { store } = useVueFlow()
+const {
+  connectionNodeId,
+  nodesConnectable,
+  connectionHandleType,
+  defaultMarkerColor,
+  edgesUpdatable,
+  elementsSelectable,
+  getNode,
+  getEdges,
+} = $(useVueFlow())
 
-const sourceNode = controlledComputed(
+const sourceNode = $(
-  () => store.connectionNodeId,
+  controlledComputed(
-  () => {
+    () => connectionNodeId,
-    if (store.connectionNodeId) return store.getNode(store.connectionNodeId)
+    () => {
-    return false
+      if (connectionNodeId) return getNode(connectionNodeId)
-  },
+      return false
+    },
+  ),
 )
 
-const connectionLineVisible = controlledComputed(
+const connectionLineVisible = $(
-  () => store.connectionNodeId,
+  controlledComputed(
-  () =>
+    () => connectionNodeId,
-    !!(
+    () =>
-      sourceNode.value &&
+      !!(
-      (typeof sourceNode.value.connectable === 'undefined' ? store.nodesConnectable : sourceNode.value.connectable) &&
+        sourceNode &&
-      store.connectionNodeId &&
+        (typeof sourceNode.connectable === 'undefined' ? nodesConnectable : sourceNode.connectable) &&
-      store.connectionHandleType
+        connectionNodeId &&
-    ),
+        connectionHandleType
+      ),
+  ),
 )
 
-const getNode = (node: string) => store.getNode(node)!
+const getNodeWrapped = (node: string) => getNode(node)!
 
-const groups = computed(() => groupEdgesByZLevel(store.getEdges, getNode))
+const groups = computed(() => groupEdgesByZLevel(getEdges, getNodeWrapped))
 </script>
 <script lang="ts">
 export default {
@@ -37,17 +50,17 @@ export default {
 </script>
 <template>
   <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
-    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="store.defaultMarkerColor" />
+    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
     <g>
       <EdgeWrapper
         v-for="edge of group.edges"
         :id="edge.id"
         :key="edge.id"
         :edge="edge"
-        :source-node="getNode(edge.source)"
+        :source-node="getNodeWrapped(edge.source)"
-        :target-node="getNode(edge.target)"
+        :target-node="getNodeWrapped(edge.target)"
-        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
+        :selectable="typeof edge.selectable === 'undefined' ? elementsSelectable : edge.selectable"
-        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+        :updatable="typeof edge.updatable === 'undefined' ? edgesUpdatable : edge.updatable"
       />
       <ConnectionLine v-if="connectionLineVisible && !!sourceNode" :source-node="sourceNode" />
     </g>

package/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -12,12 +12,13 @@ interface MarkerDefinitionsProps {
 const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
   defaultColor: '',
 })
-const { store } = useVueFlow()
+
+const { edges } = $(useVueFlow())
 
 const markers = computed(() => {
   const ids: string[] = []
 
-  return store.edges.reduce<MarkerProps[]>((markers, edge) => {
+  return edges.reduce<MarkerProps[]>((markers, edge) => {
     ;[edge.markerStart, edge.markerEnd].forEach((marker) => {
       if (marker) {
         const markerId = getMarkerId(marker)

package/src/container/NodeRenderer/NodeRenderer.vue

@@ -3,12 +3,12 @@ import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
 import { SnapGrid } from '../../types'
 import { useVueFlow } from '../../composables'
 
-const { store } = useVueFlow()
+const { nodesDraggable, elementsSelectable, nodesConnectable, snapToGrid, snapGrid, getNodes } = $(useVueFlow())
 
-const draggable = (d?: boolean) => (typeof d === 'undefined' ? store.nodesDraggable : d)
+const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
-const selectable = (s?: boolean) => (typeof s === 'undefined' ? store.elementsSelectable : s)
+const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
-const connectable = (c?: boolean) => (typeof c === 'undefined' ? store.nodesConnectable : c)
+const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
-const snapGrid = (sg?: SnapGrid) => (sg ?? store.snapToGrid ? store.snapGrid : undefined)
+const hasSnapGrid = (sg?: SnapGrid) => (sg ?? snapToGrid ? snapGrid : undefined)
 </script>
 <script lang="ts">
 export default {
@@ -18,14 +18,14 @@ export default {
 <template>
   <div class="vue-flow__nodes vue-flow__container">
     <NodeWrapper
-      v-for="node of store.getNodes"
+      v-for="node of getNodes"
       :id="node.id"
       :key="node.id"
       :node="node"
       :draggable="draggable(node.draggable)"
       :selectable="selectable(node.selectable)"
       :connectable="connectable(node.connectable)"
-      :snap-grid="snapGrid(node.snapGrid)"
+      :snap-grid="hasSnapGrid(node.snapGrid)"
     />
   </div>
 </template>

package/src/container/SelectionPane/SelectionPane.vue

@@ -5,23 +5,39 @@ import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 
-const { id, store, deleteKeyCode, selectionKeyCode, multiSelectionKeyCode } = useVueFlow()
+const {
+  id,
+  edges,
+  deleteKeyCode,
+  selectionKeyCode,
+  multiSelectionKeyCode,
+  hooks,
+  nodesSelectionActive,
+  userSelectionActive,
+  elementsSelectable,
+  resetSelectedElements,
+  setState,
+  getSelectedEdges,
+  getSelectedNodes,
+} = $(useVueFlow())
 
 const onClick = (event: MouseEvent) => {
-  store.hooks.paneClick.trigger(event)
+  hooks.paneClick.trigger(event)
-  store.nodesSelectionActive = false
+  setState({
-  store.resetSelectedElements()
+    nodesSelectionActive: false,
+  })
+  resetSelectedElements()
 }
 
-const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger(event)
+const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event)
 
-const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
+const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event)
 
-useKeyPress(deleteKeyCode, (keyPressed) => {
+useKeyPress($$(deleteKeyCode), (keyPressed) => {
-  const selectedNodes = store.getSelectedNodes
+  const selectedNodes = getSelectedNodes
-  const selectedEdges = store.getSelectedEdges
+  const selectedEdges = getSelectedEdges
   if (keyPressed && (selectedNodes || selectedEdges)) {
-    const connectedEdges = (selectedNodes && getConnectedEdges(selectedNodes, store.edges)) ?? []
+    const connectedEdges = (selectedNodes && getConnectedEdges(selectedNodes, edges)) ?? []
 
     const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }))
     const edgeChanges: EdgeChange[] = [...selectedEdges, ...connectedEdges].map((e) => ({
@@ -29,21 +45,28 @@ useKeyPress(deleteKeyCode, (keyPressed) => {
       type: 'remove',
     }))
 
-    store.hooks.nodesChange.trigger(nodeChanges)
+    hooks.nodesChange.trigger(nodeChanges)
-    store.hooks.edgesChange.trigger(edgeChanges)
+    hooks.edgesChange.trigger(edgeChanges)
-    store.nodesSelectionActive = false
 
-    store.resetSelectedElements()
+    setState({
+      nodesSelectionActive: false,
+    })
+
+    resetSelectedElements()
   }
 })
 
-useKeyPress(multiSelectionKeyCode, (keyPressed) => {
+useKeyPress($$(multiSelectionKeyCode), (keyPressed) => {
-  store.multiSelectionActive = keyPressed
+  setState({
+    multiSelectionActive: keyPressed,
+  })
 })
 
-const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPressed) => {
+const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPressed) => {
-  if (store.userSelectionActive && keyPressed) return
+  if (userSelectionActive && keyPressed) return
-  store.userSelectionActive = keyPressed && store.elementsSelectable
+  setState({
+    userSelectionActive: keyPressed && elementsSelectable,
+  })
 })
 </script>
 <script lang="ts">
@@ -54,7 +77,7 @@ export default {
 </script>
 <template>
   <UserSelection v-if="selectionKeyPressed" :key="`user-selection-${id}`" />
-  <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selection-${id}`" />
+  <NodesSelection v-if="nodesSelectionActive" :key="`nodes-selection-${id}`" />
   <div
     :key="`pane-${id}`"
     class="vue-flow__pane vue-flow__container"

package/src/container/Viewport/Transform.vue

@@ -2,49 +2,51 @@
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
-import { FlowExportObject, FlowInstance, Store, XYPosition } from '../../types'
+import { Dimensions, FlowExportObject, FlowInstance, XYPosition } from '../../types'
 import { pointToRendererPoint } from '../../utils'
 
-const { id, store } = useVueFlow()
+const { id, nodes, edges, viewport, snapToGrid, snapGrid, dimensions, setState, fitViewOnInit, hooks } = $(useVueFlow())
 
-const untilDimensions = async (store: Store) => {
+const untilDimensions = async (dim: Dimensions) => {
   // if ssr we can't wait for dimensions, they'll never really exist
   const window = useWindow()
   if ('screen' in window) {
     // wait until viewport dimensions has been established
-    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
+    await until(dim).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
   }
 
   return true
 }
 
-const ready = ref(false)
+let ready = $ref(false)
 onMounted(async () => {
-  const { fitView, ...rest } = useZoomPanHelper(store)
+  // create new instance and set to state
+  const { fitView, ...rest } = useZoomPanHelper()
+
   let instance: FlowInstance | null = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
     ...rest,
 
     project(position: XYPosition) {
-      return pointToRendererPoint(position, store.viewport, store.snapToGrid, store.snapGrid)
+      return pointToRendererPoint(position, viewport, snapToGrid, snapGrid)
     },
     getElements() {
-      return [...store.nodes, ...store.edges]
+      return [...nodes, ...edges]
     },
     getNodes() {
-      return store.nodes
+      return nodes
     },
     getEdges() {
-      return store.edges
+      return edges
     },
     toObject() {
       // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
       return JSON.parse(
         JSON.stringify({
-          nodes: store.nodes,
+          nodes,
-          edges: store.edges,
+          edges,
-          position: [store.viewport.x, store.viewport.y],
+          position: [viewport.x, viewport.y],
-          zoom: store.viewport.zoom,
+          zoom: viewport.zoom,
         } as FlowExportObject),
       )
     },
@@ -52,15 +54,21 @@ onMounted(async () => {
 
   onScopeDispose(() => (instance = null))
 
-  await untilDimensions(store)
+  // wait until proper dimensions have been established, otherwise fitView will have wrong bounds when called at paneReady
+  await untilDimensions(dimensions)
 
-  ready.value = true
+  // hide graph until dimensions are ready, so we don't have jumping graphs (ssr for example)
-  store.instance = instance
+  ready = true
-  store.fitViewOnInit && instance.fitView()
+
-  store.hooks.paneReady.trigger(instance)
+  setState({
+    instance,
+  })
+
+  fitViewOnInit && instance.fitView()
+  hooks.paneReady.trigger(instance)
 })
 
-const transform = computed(() => `translate(${store.viewport.x}px,${store.viewport.y}px) scale(${store.viewport.zoom})`)
+const transform = computed(() => `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`)
 </script>
 <script lang="ts">
 export default {

package/src/container/Viewport/Viewport.vue

@@ -7,7 +7,30 @@ import { clamp, clampPosition } from '../../utils'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import Transform from './Transform.vue'
 
-const { id, store, zoomActivationKeyCode, selectionKeyCode } = useVueFlow()
+const {
+  id,
+  minZoom,
+  maxZoom,
+  defaultZoom,
+  defaultPosition,
+  translateExtent,
+  dimensions,
+  zoomActivationKeyCode,
+  selectionKeyCode,
+  panOnScroll,
+  panOnScrollMode,
+  panOnScrollSpeed,
+  panOnDrag,
+  zoomOnDoubleClick,
+  zoomOnPinch,
+  zoomOnScroll,
+  preventScrolling,
+  noWheelClassName,
+  noPanClassName,
+  setState,
+  hooks,
+} = $(useVueFlow())
+
 const viewportEl = templateRef<HTMLDivElement>('viewport', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -23,75 +46,77 @@ const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => (
 
 const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
 
-const clampedZoom = clamp(store.defaultZoom, store.minZoom, store.maxZoom)
+const clampedZoom = clamp(defaultZoom, minZoom, maxZoom)
-const transform = ref({
+
-  ...clampPosition({ x: store.defaultPosition[0], y: store.defaultPosition[1] }, store.translateExtent),
+let transform = $ref({
+  ...clampPosition({ x: defaultPosition[0], y: defaultPosition[1] }, translateExtent),
   zoom: clampedZoom,
 })
+
 const { width, height } = useElementBounding(viewportEl)
 
 watch(
   [width, height],
   ([newWidth, newHeight]) => {
-    store.dimensions.width = newWidth
+    dimensions.width = newWidth
-    store.dimensions.height = newHeight
+    dimensions.height = newHeight
   },
   { immediate: true },
 )
 
 onMounted(() => {
-  const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent)
+  const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent)
   const d3Selection = select(viewportEl.value).call(d3Zoom)
   const d3ZoomHandler = d3Selection.on('wheel.zoom')
 
-  const updatedTransform = zoomIdentity.translate(transform.value.x, transform.value.y).scale(transform.value.zoom)
+  const updatedTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom)
   d3Zoom.transform(d3Selection, updatedTransform)
 
-  store.setState({
+  setState({
     d3Zoom,
     d3Selection,
     d3ZoomHandler,
     viewport: { x: updatedTransform.x, y: updatedTransform.y, zoom: updatedTransform.k },
   })
 
-  const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPress) => {
+  const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPress) => {
     if (keyPress) {
       d3Zoom.on('zoom', null)
     } else {
       d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        store.setState({ viewport: { x: event.transform.x, y: event.transform.y, zoom: event.transform.k } })
+        setState({ viewport: { x: event.transform.x, y: event.transform.y, zoom: event.transform.k } })
         const flowTransform = eventToFlowTransform(event.transform)
-        store.hooks.move.trigger({ event, flowTransform })
+        hooks.move.trigger({ event, flowTransform })
       })
     }
   })
 
-  const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
+  const zoomKeyPressed = useKeyPress($$(zoomActivationKeyCode))
 
   d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
     const flowTransform = eventToFlowTransform(event.transform)
-    transform.value = flowTransform
+    transform = flowTransform
-    store.hooks.moveStart.trigger({ event, flowTransform })
+    hooks.moveStart.trigger({ event, flowTransform })
   })
 
   d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-    if (viewChanged(transform.value, event.transform)) {
+    if (viewChanged(transform, event.transform)) {
       const flowTransform = eventToFlowTransform(event.transform)
-      transform.value = flowTransform
+      transform = flowTransform
-      store.hooks.moveEnd.trigger({ event, flowTransform })
+      hooks.moveEnd.trigger({ event, flowTransform })
     }
   })
 
   d3Selection
-    ?.on('wheel', (event: WheelEvent) => {
+    .on('wheel', (event: WheelEvent) => {
-      if (store.panOnScroll && !zoomKeyPressed.value) {
+      if (panOnScroll && !zoomKeyPressed.value) {
-        if (isWrappedWithClass(event, store.noWheelClassName)) return
+        if (isWrappedWithClass(event, noWheelClassName as any)) return
         event.preventDefault()
         event.stopImmediatePropagation()
 
         const currentZoom = d3Selection?.property('__zoom').k || 1
 
-        if (event.ctrlKey && store.zoomOnPinch) {
+        if (event.ctrlKey && zoomOnPinch) {
           const point = pointer(event)
           // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
           const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
@@ -104,53 +129,48 @@ onMounted(() => {
         // increase scroll speed in firefox
         // firefox: deltaMode === 1; chrome: deltaMode === 0
         const deltaNormalize = event.deltaMode === 1 ? 20 : 1
-        const deltaX = store.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
+        const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
-        const deltaY = store.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
+        const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
 
-        if (d3Selection && store.panOnScrollSpeed)
+        if (d3Selection && panOnScrollSpeed) {
-          d3Zoom?.translateBy(
+          d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
-            d3Selection,
+        }
-            -(deltaX / currentZoom) * store.panOnScrollSpeed,
-            -(deltaY / currentZoom) * store.panOnScrollSpeed,
-          )
       } else {
-        if (
+        if ((!zoomOnScroll && preventScrolling) || !preventScrolling || isWrappedWithClass(event, noWheelClassName as any)) {
-          (!store.zoomOnScroll && store.preventScrolling) ||
-          !store.preventScrolling ||
-          isWrappedWithClass(event, store.noWheelClassName)
-        )
           return null
+        }
+
         event.preventDefault()
       }
     })
-    .on('wheel.zoom', store.panOnScroll || typeof d3ZoomHandler === 'undefined' ? null : (d3ZoomHandler as any))
+    .on('wheel.zoom', panOnScroll || typeof d3ZoomHandler === 'undefined' ? null : (d3ZoomHandler as any))
 
   d3Zoom.filter((event: MouseEvent) => {
-    const zoomScroll = zoomKeyPressed.value || store.zoomOnScroll
+    const zoomScroll = zoomKeyPressed.value || zoomOnScroll
-    const pinchZoom = store.zoomOnPinch && event.ctrlKey
+    const pinchZoom = zoomOnPinch && event.ctrlKey
 
     // if all interactions are disabled, we prevent all zoom events
-    if (!store.panOnDrag && !zoomScroll && !store.panOnScroll && !store.zoomOnDoubleClick && !store.zoomOnPinch) return false
+    if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
 
     // during a selection we prevent all other interactions
     if (selectionKeyPressed.value) return false
 
     // if zoom on double click is disabled, we prevent the double click event
-    if (!store.zoomOnDoubleClick && event.type === 'dblclick') return false
+    if (!zoomOnDoubleClick && event.type === 'dblclick') return false
 
     // if the target element is inside an element with the nowheel class, we prevent zooming
-    if (isWrappedWithClass(event, store.noWheelClassName) && event.type === 'wheel') return false
+    if (isWrappedWithClass(event, noWheelClassName as any) && event.type === 'wheel') return false
 
     // if the target element is inside an element with the nopan class, we prevent panning
-    if (isWrappedWithClass(event, store.noPanClassName) && event.type !== 'wheel') return false
+    if (isWrappedWithClass(event, noPanClassName as any) && event.type !== 'wheel') return false
 
-    if (!store.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
+    if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
 
     // when there is no scroll handling enabled, we prevent all wheel events
-    if (!zoomScroll && !store.panOnScroll && !pinchZoom && event.type === 'wheel') return false
+    if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') return false
 
     // if the pane is not movable, we prevent dragging it with mousestart or touchstart
-    if (!store.panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
+    if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
 
     // default filter for d3-zoom
     return (!event.ctrlKey || event.type === 'wheel') && !event.button

package/src/container/VueFlow/watch.ts

@@ -1,9 +1,9 @@
 import { Ref, ToRefs } from 'vue'
 import { WatchPausableReturn } from '@vueuse/core'
-import { FlowProps, UseVueFlow } from '~/types'
+import { FlowProps, VueFlowStore } from '~/types'
 
 const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
-export default (models: ToRefs<FlowProps>, store: UseVueFlow) => {
+export default (models: ToRefs<FlowProps>, store: VueFlowStore) => {
   const scope = effectScope()
 
   scope.run(() => {

package/src/context/index.ts

@@ -1,6 +1,6 @@
 import { InjectionKey, Slots as TSlots } from 'vue'
-import { UseVueFlow } from '~/types'
+import { VueFlowStore } from '~/types'
 
-export const VueFlow: InjectionKey<UseVueFlow> = Symbol('vueFlow')
+export const VueFlow: InjectionKey<VueFlowStore> = Symbol('vueFlow')
 export const NodeId: InjectionKey<string> = Symbol('nodeId')
 export const Slots: InjectionKey<TSlots> = Symbol('slots')

package/src/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
+/// <reference types="vue/macros-global" />
 
 declare module '*.vue' {
   import { DefineComponent } from 'vue'

package/src/types/store.ts

@@ -185,11 +185,8 @@ export type ComputedGetters = {
   [key in keyof Getters]: ComputedRef<Getters[key]>
 }
 
-export type Store = State & Actions & Getters
+export type VueFlowStore = {
-
-export type UseVueFlow = {
   id: string
-  store: Store
 } & FlowHooksOn &
   ToRefs<State> &
   ComputedGetters &

package/vite.config.ts

@@ -40,11 +40,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    vue(),
+    vue({
+      reactivityTransform: true,
+    }),
     vueTypes(),
     svgLoader(),
     AutoImport({
-      imports: ['vue', '@vueuse/core'],
+      imports: ['vue', '@vueuse/core', 'vue/macros'],
       dts: 'src/auto-imports.d.ts',
     }),
     replace({