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 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">

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(() => {
-  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]"