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
2022-04-24 13:34:22 +02:00
parent 3bc972a1d1
commit e722f49e6e
24 changed files with 646 additions and 469 deletions
@@ -18,13 +18,13 @@ const defaultColors: Record<BackgroundVariant, string> = {
  [BackgroundVariant.Lines]: '#eee',
 }

-const { store } = useVueFlow()
+const { viewport } = $(useVueFlow())

-const background = computed(() => {
-  const scaledGap = props.gap && props.gap * store.viewport.zoom
-  const xOffset = scaledGap && store.viewport.x % scaledGap
-  const yOffset = scaledGap && store.viewport.y % scaledGap
-  const size = props.size || 0.4 * store.viewport.zoom
+const background = $computed(() => {
+  const scaledGap = props.gap && props.gap * viewport.zoom
+  const xOffset = scaledGap && viewport.x % scaledGap
+  const yOffset = scaledGap && viewport.y % scaledGap
+  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.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
-      background.value.scaledGap
-    }`,
+  () => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
 )
 </script>
 <script lang="ts">
@@ -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>
@@ -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(() => {
-  return getRectOfNodes(store.getNodes)
+const bb = $computed(() => {
+  return getRectOfNodes(getNodes)
 })

-const viewBB = computed(() => ({
-  x: -store.viewport.x / store.viewport.zoom,
-  y: -store.viewport.y / store.viewport.zoom,
-  width: store.dimensions.width / store.viewport.zoom,
-  height: store.dimensions.height / store.viewport.zoom,
+const viewBB = $computed(() => ({
+  x: -viewport.x / viewport.zoom,
+  y: -viewport.y / viewport.zoom,
+  width: dimensions.width / viewport.zoom,
+  height: dimensions.height / viewport.zoom,
 }))

-const viewBox = controlledComputed(viewBB, () => {
-  const boundingRect = store.getNodes && store.getNodes.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
-  const scaledWidth = boundingRect.width / elementWidth
-  const scaledHeight = boundingRect.height / elementHeight
-  const viewScale = Math.max(scaledWidth, scaledHeight)
-  const viewWidth = viewScale * elementWidth
-  const viewHeight = viewScale * elementHeight
-  const offset = 5 * viewScale
-  return {
-    offset,
-    x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
-    y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
-    width: viewWidth + offset * 2,
-    height: viewHeight + offset * 2,
+const viewBox = $(
+  controlledComputed($$(viewBB), () => {
+    const boundingRect = getNodes && getNodes.length ? getBoundsofRects(bb, viewBB) : viewBB
+    const scaledWidth = boundingRect.width / elementWidth
+    const scaledHeight = boundingRect.height / elementHeight
+    const viewScale = Math.max(scaledWidth, scaledHeight)
+    const viewWidth = viewScale * elementWidth
+    const viewHeight = viewScale * elementHeight
+    const offset = 5 * viewScale
+    return {
+      offset,
+      x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
+      y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
+      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]"
@@ -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
-    ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
-    : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
+  connectionHandleId && connectionHandleType
+    ? props.sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
+    : 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 targetY = computed(() => (store.connectionPosition.y - store.viewport.y) / store.viewport.zoom)
+const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
+const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)

 const dAttr = computed(() => {
-  let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
-  switch (store.connectionLineType) {
+  let path = `M${sourceX},${sourceY} ${targetX},${targetY}`
+  switch (connectionLineType) {
    case ConnectionLineType.Bezier:
      path = getBezierPath({
        sourceX,
        sourceY,
        sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
-        targetY: targetY.value,
+        targetX,
+        targetY,
        targetPosition,
      })
      break
@@ -48,8 +61,8 @@ const dAttr = computed(() => {
        sourceX,
        sourceY,
        sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
-        targetY: targetY.value,
+        targetX,
+        targetY,
        targetPosition,
        borderRadius: 0,
      })
@@ -59,8 +72,8 @@ const dAttr = computed(() => {
        sourceX,
        sourceY,
        sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
-        targetY: targetY.value,
+        targetX,
+        targetY,
        targetPosition,
      })
      break
@@ -85,13 +98,13 @@ export default {
        targetX,
        targetY,
        targetPosition,
-        connectionLineType: store.connectionLineType,
-        connectionLineStyle: store.connectionLineStyle,
-        nodes: store.getNodes,
+        connectionLineType,
+        connectionLineStyle,
+        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>
@@ -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 {
@@ -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,
-  (v) => v && (name.value = v),
+  () => edge.type,
+  (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.value.sourceY !== sourceY) edge.value.sourceY = sourceY
-      if (edge.value.targetX !== targetX) edge.value.targetX = targetX
-      if (edge.value.targetY !== targetY) edge.value.targetY = targetY
+      if (edge.sourceX !== sourceX) edge.sourceX = sourceX
+      if (edge.sourceY !== sourceY) edge.sourceY = sourceY
+      if (edge.targetX !== targetX) edge.targetX = targetX
+      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
-    store.addSelectedEdges([edge.value])
+    setState({
+      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 handleId = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
+  const nodeId = isSourceHandle ? edge.target : edge.source
+  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 }),
-    () => store.hooks.edgeUpdateEnd.trigger({ event, edge: edge.value }),
+    (connection) => hooks.edgeUpdate.trigger({ edge, connection }),
+    () => 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)) {
-        edgeType = resolveComponent(name.value, false) as EdgeComponent
+      if (components && components.includes(name)) {
+        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".`)
-    name.value = 'default'
-    return store.getEdgeTypes.default
+    console.warn(`[vueflow]: Edge type "${edge.type}" not found and no edge-slot detected. Using fallback type "default".`)
+    name = '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}`,
-    store.noPanClassName,
+    `vue-flow__edge-${name}`,
+    noPanClassName,
    {
-      selected: edge.value.selected,
-      animated: edge.value.animated,
+      selected: edge.selected,
+      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 {
@@ -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(
-  () => props.id ?? (connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
+const handleId = $computed(
+  () => 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 onClickHandler = (event: MouseEvent) => onClick(event, handleId.value ?? null, nodeId, props.type, props.isValidConnection)
+
+const onMouseDownHandler = (event: MouseEvent) => {
+  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.value?.handleId === handleId.value &&
-        connectionStartHandle.value?.type === props.type,
+        connectionStartHandle &&
+        connectionStartHandle.nodeId === nodeId &&
+        connectionStartHandle.handleId === handleId &&
+        connectionStartHandle.type === props.type,
    },
  ]
 })
@@ -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,
-  (v) => v && (name.value = v),
+  () => node.type,
+  (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,
-    () => store.getNode(node.value.parentNode!)?.computedPosition,
-    () => node.value.selected,
-    () => store.getNode(node.value.parentNode!)?.selected,
+    () => node.position,
+    () => getNode(node.parentNode!)?.computedPosition,
+    () => node.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) {
-    store.hooks.nodeMouseEnter.trigger({ event, node: node.value })
+  if (!node.dragging) {
+    hooks.nodeMouseEnter.trigger({ event, node })
  }
 }

 const onMouseMove = (event: MouseEvent) => {
-  if (!node.value.dragging) {
-    store.hooks.nodeMouseMove.trigger({ event, node: node.value })
+  if (!node.dragging) {
+    hooks.nodeMouseMove.trigger({ event, node })
  }
 }

 const onMouseLeave = (event: MouseEvent) => {
-  if (!node.value.dragging) {
-    store.hooks.nodeMouseLeave.trigger({ event, node: node.value })
+  if (!node.dragging) {
+    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
-      if (!node.value.selected) store.addSelectedNodes([node.value])
+      setState({
+        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)) {
-        nodeType = resolveComponent(name.value, false) as NodeComponent
+      if (components && components.includes(name)) {
+        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".`)
-    name.value = 'default'
-    return store.getNodeTypes.default
+    console.warn(`[vueflow]: Node type "${node.type}" not found and no node-slot detected. Using fallback type "default".`)
+    name = 'default'
+    return getNodeTypes.default
  }

  return slot
 })

 onDragStart(({ event }) => {
-  store.addSelectedNodes([])
-  store.hooks.nodeDragStart.trigger({ event, node: node.value })
+  addSelectedNodes([])
+  hooks.nodeDragStart.trigger({ event, node })

-  if (store.selectNodesOnDrag && props.selectable) {
-    store.nodesSelectionActive = false
+  if (selectNodesOnDrag && props.selectable) {
+    setState({
+      nodesSelectionActive: false,
+    })

-    if (!node.value.selected) store.addSelectedNodes([node.value])
-  } else if (!store.selectNodesOnDrag && !node.value.selected && props.selectable) {
-    store.nodesSelectionActive = false
-    store.addSelectedNodes([])
+    if (!node.selected) addSelectedNodes([node])
+  } else if (!selectNodesOnDrag && !node.selected && props.selectable) {
+    setState({
+      nodesSelectionActive: false,
+    })
+
+    addSelectedNodes([])
  }
 })

 onDrag(({ event, data: { deltaX, deltaY } }) => {
-  store.updateNodePosition({ id: node.value.id, diff: { x: deltaX, y: deltaY }, dragging: true })
-  store.hooks.nodeDrag.trigger({ event, node: node.value })
+  updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: true })
+  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 (props.selectable && !store.selectNodesOnDrag && !node.value.selected) {
-      store.addSelectedNodes([node.value])
+  if (!node.dragging) {
+    if (props.selectable && !selectNodesOnDrag && !node.selected) {
+      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 })
-  store.hooks.nodeDragStop.trigger({ event, node: node.value })
+  updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: false })
+  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}`,
-    store.noPanClassName,
+    `vue-flow__node-${name}`,
+    noPanClassName,
    {
-      dragging: node.value.dragging,
-      selected: node.value.selected,
+      dragging: node.dragging,
+      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 width = node.value.width instanceof Function ? node.value.width(node.value) : node.value.width
-  const height = node.value.height instanceof Function ? node.value.height(node.value) : node.value.height
+  const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
+  const width = node.width instanceof Function ? node.width(node) : node.width
+  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,
-    transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
+    zIndex: node.computedPosition.z,
+    transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
    pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
    ...styles,
  } as CSSProperties
@@ -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`,
-  height: `${selectedNodesBBox.value.height}px`,
-  top: `${selectedNodesBBox.value.y}px`,
-  left: `${selectedNodesBBox.value.x}px`,
+  width: `${selectedNodesBBox.width}px`,
+  height: `${selectedNodesBBox.height}px`,
+  top: `${selectedNodesBBox.y}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 })
-  store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
+  hooks.selectionDrag.trigger({ event, nodes: getSelectedNodes })
+  updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
 })

 onDragStop(({ event }) => {
-  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
-  store.getSelectedNodes.forEach((node) => (node.dragging = false))
+  hooks.selectionDragStop.trigger({ event, nodes: getSelectedNodes })
+  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>
@@ -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)
-const prevEdges = ref(0)
+let prevNodes = $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()
-  store.userSelectionActive = false
-  prevNodes.value = 0
-  prevEdges.value = 0
+  rect = initialRect()
+  prevNodes = 0
+  prevEdges = 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
-  store.nodesSelectionActive = false
+  setState({
+    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 startY = rect.value.startY
+  const startX = rect.startX
+  const startY = rect.startY

  const nextUserSelectRect: Rect = {
-    ...rect.value,
-    x: mousePos.x < startX ? mousePos.x : rect.value.x,
-    y: mousePos.y < startY ? mousePos.y : rect.value.y,
+    ...rect,
+    x: mousePos.x < startX ? mousePos.x : rect.x,
+    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 selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
+  const selectedNodes = getNodesInside(getNodes, rect, viewport)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges)

-  rect.value = nextUserSelectRect
+  rect = nextUserSelectRect

-  store.addSelectedNodes(selectedNodes)
-  store.addSelectedEdges(selectedEdges)
+  addSelectedNodes(selectedNodes)
+  addSelectedEdges(selectedEdges)

-  prevNodes.value = selectedNodes.length
-  prevEdges.value = selectedEdges.length
+  prevNodes = selectedNodes.length
+  prevEdges = selectedEdges.length
 }

 const onMouseUp = () => {
-  store.nodesSelectionActive = prevNodes.value > 0
-  rect.value = initialRect()
-  store.userSelectionActive = false
+  rect = initialRect()
+
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+    userSelectionActive: false,
+  })
 }

 const onMouseLeave = () => {
-  store.nodesSelectionActive = false
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+  })
+
  reset()
 }

@@ -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
-      store.connectionPosition.y = event.clientY - containerBounds.top
+      connectionPosition.x = event.clientX - containerBounds.left
+      connectionPosition.y = event.clientY - containerBounds.top

      const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
        event,
-        store.connectionMode,
+        connectionMode,
        isTarget,
        nodeId,
        handleId,
        validConnectFunc,
        doc,
-        store.edges,
-        store.getNode,
+        edges,
+        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,
-        store.getNode,
+        edges,
+        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 (!store.connectionStartHandle) {
-      store.hooks.connectStart.trigger({ event, nodeId, handleId, handleType })
-      store.setState({ connectionStartHandle: { nodeId, type: handleType, handleId } })
+    if (!connectOnClick) return
+    if (!connectionStartHandle) {
+      hooks.connectStart.trigger({ event, nodeId, handleId, handleType })
+      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,
-        store.connectionStartHandle.type === 'target',
-        store.connectionStartHandle.nodeId,
-        store.connectionStartHandle.handleId || null,
+        connectionMode,
+        connectionStartHandle.type === 'target',
+        connectionStartHandle.nodeId,
+        connectionStartHandle.handleId || null,
        validConnectFunc,
        doc,
-        store.edges,
-        store.getNode,
+        edges,
+        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 })
    }
  }

@@ -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({
-      ...hooksOn,
-      ...toRefs(reactiveState),
-      ...getters,
-      ...actions,
-    })
-
-    const flow: UseVueFlow = {
+    const flow: VueFlowStore = {
      ...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()
-        storage.remove(vueFlow!.id)
+        vueFlow?.$reset()
+        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)
  }
@@ -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) {
-      await until(store.getNodes).toMatch(
+    if (getNodes.length > 0) {
+      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 => {
-  const hasDimensions = ref(false)
-  store.hooks.paneReady.on(() => (hasDimensions.value = true))
+export default (): ViewportFuncs => {
+  const { hooks, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, getNodes } =
+    $(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) {
-      store.d3Zoom.scaleTo(transition(store.d3Selection, options?.duration), zoomLevel)
+    if (d3Selection && d3Zoom) {
+      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) {
-      store.d3Zoom.scaleBy(transition(store.d3Selection, duration), scale)
+    if (d3Selection && d3Zoom) {
+      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) {
-      store.d3Zoom.transform(transition(store.d3Selection, duration), nextTransform)
+    if (d3Selection && d3Zoom) {
+      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,
-      y: store.viewport.y,
-      zoom: store.viewport.zoom,
+      x: viewport.x,
+      y: viewport.y,
+      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,
-        store.dimensions.height,
-        options.minZoom ?? store.minZoom,
-        options.maxZoom ?? store.maxZoom,
+        dimensions.width,
+        dimensions.height,
+        options.minZoom ?? minZoom,
+        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 centerX = store.dimensions.width / 2 - x * nextZoom
-      const centerY = store.dimensions.height / 2 - y * nextZoom
+      const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom
+      const centerX = dimensions.width / 2 - x * 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(
-        bounds,
-        store.dimensions.width,
-        store.dimensions.height,
-        store.minZoom,
-        store.maxZoom,
-        options.padding,
-      )
+      const { x, y, zoom } = getTransformForBounds(bounds, dimensions.width, dimensions.height, minZoom, 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),
  }
 }
@@ -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(
-  () => store.connectionNodeId,
-  () => {
-    if (store.connectionNodeId) return store.getNode(store.connectionNodeId)
-    return false
-  },
+const sourceNode = $(
+  controlledComputed(
+    () => connectionNodeId,
+    () => {
+      if (connectionNodeId) return getNode(connectionNodeId)
+      return false
+    },
+  ),
 )

-const connectionLineVisible = controlledComputed(
-  () => store.connectionNodeId,
-  () =>
-    !!(
-      sourceNode.value &&
-      (typeof sourceNode.value.connectable === 'undefined' ? store.nodesConnectable : sourceNode.value.connectable) &&
-      store.connectionNodeId &&
-      store.connectionHandleType
-    ),
+const connectionLineVisible = $(
+  controlledComputed(
+    () => connectionNodeId,
+    () =>
+      !!(
+        sourceNode &&
+        (typeof sourceNode.connectable === 'undefined' ? nodesConnectable : sourceNode.connectable) &&
+        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)"
-        :target-node="getNode(edge.target)"
-        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
-        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+        :source-node="getNodeWrapped(edge.source)"
+        :target-node="getNodeWrapped(edge.target)"
+        :selectable="typeof edge.selectable === 'undefined' ? elementsSelectable : edge.selectable"
+        :updatable="typeof edge.updatable === 'undefined' ? edgesUpdatable : edge.updatable"
      />
      <ConnectionLine v-if="connectionLineVisible && !!sourceNode" :source-node="sourceNode" />
    </g>
@@ -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)
@@ -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 selectable = (s?: boolean) => (typeof s === 'undefined' ? store.elementsSelectable : s)
-const connectable = (c?: boolean) => (typeof c === 'undefined' ? store.nodesConnectable : c)
-const snapGrid = (sg?: SnapGrid) => (sg ?? store.snapToGrid ? store.snapGrid : undefined)
+const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
+const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
+const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
+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>
@@ -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)
-  store.nodesSelectionActive = false
-  store.resetSelectedElements()
+  hooks.paneClick.trigger(event)
+  setState({
+    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) => {
-  const selectedNodes = store.getSelectedNodes
-  const selectedEdges = store.getSelectedEdges
+useKeyPress($$(deleteKeyCode), (keyPressed) => {
+  const selectedNodes = getSelectedNodes
+  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)
-    store.hooks.edgesChange.trigger(edgeChanges)
-    store.nodesSelectionActive = false
+    hooks.nodesChange.trigger(nodeChanges)
+    hooks.edgesChange.trigger(edgeChanges)

-    store.resetSelectedElements()
+    setState({
+      nodesSelectionActive: false,
+    })
+
+    resetSelectedElements()
  }
 })

-useKeyPress(multiSelectionKeyCode, (keyPressed) => {
-  store.multiSelectionActive = keyPressed
+useKeyPress($$(multiSelectionKeyCode), (keyPressed) => {
+  setState({
+    multiSelectionActive: keyPressed,
+  })
 })

-const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPressed) => {
-  if (store.userSelectionActive && keyPressed) return
-  store.userSelectionActive = keyPressed && store.elementsSelectable
+const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPressed) => {
+  if (userSelectionActive && keyPressed) return
+  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"
@@ -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,
-          edges: store.edges,
-          position: [store.viewport.x, store.viewport.y],
-          zoom: store.viewport.zoom,
+          nodes,
+          edges,
+          position: [viewport.x, viewport.y],
+          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
-  store.instance = instance
-  store.fitViewOnInit && instance.fitView()
-  store.hooks.paneReady.trigger(instance)
+  // hide graph until dimensions are ready, so we don't have jumping graphs (ssr for example)
+  ready = true
+
+  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 {
@@ -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 transform = ref({
-  ...clampPosition({ x: store.defaultPosition[0], y: store.defaultPosition[1] }, store.translateExtent),
+const clampedZoom = clamp(defaultZoom, minZoom, maxZoom)
+
+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
-    store.dimensions.height = newHeight
+    dimensions.width = newWidth
+    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
-    store.hooks.moveStart.trigger({ event, flowTransform })
+    transform = 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
-      store.hooks.moveEnd.trigger({ event, flowTransform })
+      transform = flowTransform
+      hooks.moveEnd.trigger({ event, flowTransform })
    }
  })

  d3Selection
-    ?.on('wheel', (event: WheelEvent) => {
-      if (store.panOnScroll && !zoomKeyPressed.value) {
-        if (isWrappedWithClass(event, store.noWheelClassName)) return
+    .on('wheel', (event: WheelEvent) => {
+      if (panOnScroll && !zoomKeyPressed.value) {
+        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 deltaY = store.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
+        const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
+        const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize

-        if (d3Selection && store.panOnScrollSpeed)
-          d3Zoom?.translateBy(
-            d3Selection,
-            -(deltaX / currentZoom) * store.panOnScrollSpeed,
-            -(deltaY / currentZoom) * store.panOnScrollSpeed,
-          )
+        if (d3Selection && panOnScrollSpeed) {
+          d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
+        }
      } else {
-        if (
-          (!store.zoomOnScroll && store.preventScrolling) ||
-          !store.preventScrolling ||
-          isWrappedWithClass(event, store.noWheelClassName)
-        )
+        if ((!zoomOnScroll && preventScrolling) || !preventScrolling || isWrappedWithClass(event, noWheelClassName as any)) {
          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 pinchZoom = store.zoomOnPinch && event.ctrlKey
+    const zoomScroll = zoomKeyPressed.value || zoomOnScroll
+    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
@@ -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(() => {
@@ -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')
@@ -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'
@@ -185,11 +185,8 @@ export type ComputedGetters = {
  [key in keyof Getters]: ComputedRef<Getters[key]>
 }

-export type Store = State & Actions & Getters
-
-export type UseVueFlow = {
+export type VueFlowStore = {
  id: string
-  store: Store
 } & FlowHooksOn &
  ToRefs<State> &
  ComputedGetters &
@@ -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({