refactor(core,deps-dev): update to vue 3.3

.changeset/three-ads-yawn.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Update to use vue 3.3

examples/vite/package.json

@@ -13,20 +13,20 @@
     "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
-    "pinia": "^2.0.35",
+    "pinia": "^2.1.6",
     "vueflow": "workspace:*"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@types/dagre": "^0.7.48",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@types/dagre": "^0.7.50",
+    "@vitejs/plugin-vue": "^4.4.0",
     "dagre": "^0.8.5",
-    "unplugin-auto-import": "^0.14.4",
-    "vite": "^4.3.5",
-    "vite-svg-loader": "^3.6.0",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.6.5"
+    "unplugin-auto-import": "^0.16.6",
+    "vite": "^4.4.11",
+    "vite-svg-loader": "^4.0.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.15"
   }
 }

examples/vite/vite.config.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueTypes from 'vite-plugin-vue-type-imports'
 import AutoImport from 'unplugin-auto-import/vite'
 import svgLoader from 'vite-svg-loader'
 
@@ -13,7 +12,6 @@ export default defineConfig({
     vue({
       reactivityTransform: true,
     }),
-    vueTypes(),
     svgLoader(),
     AutoImport({
       imports: ['vue', '@vueuse/core', 'vue/macros'],

package.json

@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.1",
+    "@changesets/cli": "^2.26.2",
     "shx": "^0.3.4",
-    "turbo": "^1.9.6"
+    "turbo": "^1.10.15"
   }
 }

packages/background/package.json

@@ -55,16 +55,16 @@
     "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
     "test": "exit 0"
   },
-  "peerDependencies": {
-    "@vue-flow/core": "^1.12.2"
+   "peerDependencies": {
+    "@vue-flow/core": "^1.23.0",
+    "vue": "^3.3.0"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
     "@tooling/vite-config": "workspace:*",
     "@vue-flow/core": "workspace:*",
-    "vue": "^3.2.25",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.15"
   },
   "publishConfig": {
     "access": "public",

packages/background/src/Background.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useVueFlow } from '@vue-flow/core'
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
 import { BackgroundVariant } from './types'
 import type { BackgroundProps } from './types'
-import { DotPattern, LinePattern } from './patterns'
+import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
 const {
   id,
@@ -20,11 +20,6 @@ const {
   offset = 2,
 } = defineProps<BackgroundProps>()
 
-const defaultColors: Record<BackgroundVariant, string> = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
-}
-
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
@@ -47,9 +42,9 @@ 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 = computed(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
+const patternId = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
 
-const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
+const patternColor = toRef(() => initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
 </script>
 
 <script lang="ts">

packages/background/src/patterns.ts

@@ -29,3 +29,8 @@ export const Patterns = {
   [BackgroundVariant.Lines]: LinePattern,
   [BackgroundVariant.Dots]: DotPattern,
 }
+
+export const DefaultBgColors: Record<BackgroundVariant, string> = {
+  [BackgroundVariant.Dots]: '#81818a',
+  [BackgroundVariant.Lines]: '#eee',
+}

packages/background/src/types.ts

@@ -1,12 +1,15 @@
+// todo: replace with a simple string type
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
 }
 
+export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
+
 export interface BackgroundProps {
   id?: string
-  /** The background pattern variant, {@link BackgroundVariant} */
-  variant?: BackgroundVariant
+  /** The background pattern variant */
+  variant?: BackgroundVariant | BackgroundVariantType
   /** Background pattern gap */
   gap?: number | number[]
   /** Background pattern size */
@@ -16,9 +19,9 @@ export interface BackgroundProps {
   patternColor?: string
   /** Background color */
   bgColor?: string
-  /** Background height */
+  /** @deprecated Background height */
   height?: number
-  /** Background width */
+  /** @deprecated Background width */
   width?: number
   /** Background x-coordinate (offset x) */
   x?: number

packages/controls/package.json

@@ -59,16 +59,16 @@
     "test": "exit 0"
   },
   "peerDependencies": {
-    "@vue-flow/core": "^1.12.2"
+    "@vue-flow/core": "^1.23.0",
+    "vue": "^3.3.0"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
     "@tooling/vite-config": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "vite-svg-loader": "^4.0.0",
-    "vue": "^3.2.25",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.15"
   },
   "publishConfig": {
     "access": "public",

packages/controls/src/Controls.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'
-import { computed } from 'vue'
+import { toRef } from 'vue'
 import type { ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from './icons/plus.svg'
@@ -37,11 +37,11 @@ const {
   maxZoom,
 } = useVueFlow()
 
-const isInteractive = computed(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value)
+const isInteractive = toRef(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value)
 
-const minZoomReached = computed(() => viewport.value.zoom <= minZoom.value)
+const minZoomReached = toRef(() => viewport.value.zoom <= minZoom.value)
 
-const maxZoomReached = computed(() => viewport.value.zoom >= maxZoom.value)
+const maxZoomReached = toRef(() => viewport.value.zoom >= maxZoom.value)
 
 function onZoomInHandler() {
   zoomIn()
@@ -78,6 +78,7 @@ export default {
 <template>
   <Panel class="vue-flow__controls" :position="position">
     <slot name="top" />
+
     <template v-if="showZoom">
       <slot name="control-zoom-in">
         <ControlButton class="vue-flow__controls-zoomin" :disabled="maxZoomReached" @click="onZoomInHandler">

packages/controls/tsconfig.json

@@ -4,8 +4,7 @@
     "baseUrl": ".",
     "declarationDir": "./dist",
     "types": [
-      "vite/client",
-      "vue/macros"
+      "vite/client"
     ]
   },
   "include": [

packages/core/package.json

@@ -65,32 +65,30 @@
     "test": "exit 0"
   },
   "peerDependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.3.0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^10.4.1",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-replace": "^5.0.3",
     "@types/d3-drag": "^3.0.4",
     "@types/d3-selection": "^3.0.7",
     "@types/d3-zoom": "^3.0.5",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-nested": "^6.0.1",
-    "ts-patch": "^2.1.0",
+    "ts-patch": "^3.0.2",
     "typescript-transform-paths": "^3.4.6",
-    "unplugin-vue-macros": "^2.1.7",
-    "vite": "^4.3.7",
-    "vue": "^3.2.25",
-    "vue-tsc": "^1.6.5"
+    "vite": "^4.4.11",
+    "vue-tsc": "^1.8.15"
   },
   "publishConfig": {
     "access": "public",

packages/core/src/composables/useViewport.ts

@@ -2,7 +2,7 @@ import { until } from '@vueuse/core'
 import { zoomIdentity } from 'd3-zoom'
 import { computed, ref } from 'vue'
 import type { ComputedGetters, D3Selection, GraphNode, Project, State, ViewportFunctions } from '~/types'
-import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint } from '~/utils'
+import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '~/utils'
 
 interface ExtendedViewport extends ViewportFunctions {
   initialized: boolean
@@ -13,6 +13,8 @@ interface ExtendedViewport extends ViewportFunctions {
 const DEFAULT_PADDING = 0.1
 
 function noop() {
+  warn('Viewport not initialized yet.')
+
   return Promise.resolve(false)
 }
 

packages/core/src/container/VueFlow/VueFlow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { D3ZoomEvent } from 'd3-zoom'
 import { useVModel } from '@vueuse/core'
 import { onMounted, onUnmounted, provide, ref, useSlots } from 'vue'
+import type { D3ZoomEvent } from 'd3-zoom'
 import Viewport from '../Viewport/Viewport.vue'
 import A11yDescriptions from '../../components/A11y/A11yDescriptions.vue'
 import type { FlowElements, FlowProps } from '../../types/flow'
@@ -188,7 +188,7 @@ export default {
         </template>
       </template>
 
-      <template #connection-name>
+      <template #connection-line>
         <slot name="connection-line" />
       </template>
 

packages/core/src/types/components.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, Component, DefineComponent, SVGAttributes, VNode } from 'vue'
+import type { CSSProperties, Component, DefineComponent, VNode } from 'vue'
 import type { NodeProps } from './node'
 import type { EdgeProps } from './edge'
 import type { BezierEdge, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
@@ -27,7 +27,7 @@ export interface DefaultEdgeTypes {
 export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent }
 
 /** these props are passed to edge texts */
-export interface EdgeTextProps extends SVGAttributes {
+export interface EdgeTextProps {
   x: number
   y: number
   label?: string | VNode | Object

packages/core/tsconfig.json

@@ -7,7 +7,6 @@
     "types": [
       "vite/client",
       "vue/macros",
-      "unplugin-vue-macros/macros-global"
     ],
     "paths": {
       "~/*": [

packages/core/vite.config.iife.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import VueMacros from 'unplugin-vue-macros/vite'
 import replace from '@rollup/plugin-replace'
 import pkg from './package.json'
 
@@ -37,24 +36,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    VueMacros({
-      hoistStatic: false,
-      setupBlock: false,
-      shortEmits: false,
-      definePropsRefs: false,
-      setupComponent: false,
-      setupSFC: false,
-      exportProps: false,
-      plugins: {
-        vue: vue({
-          reactivityTransform: true,
-        }),
-      },
-    }) as any,
+    vue({
+      reactivityTransform: true,
+    }),
     replace({
       __ENV__: 'production',
       __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
       preventAssignment: true,
-    }),
+    }) as any,
   ],
 })

packages/core/vite.config.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import VueMacros from 'unplugin-vue-macros/vite'
 import replace from '@rollup/plugin-replace'
 import pkg from './package.json'
 
@@ -37,24 +36,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    VueMacros({
-      hoistStatic: false,
-      setupBlock: false,
-      shortEmits: false,
-      definePropsRefs: false,
-      setupComponent: false,
-      setupSFC: false,
-      exportProps: false,
-      plugins: {
-        vue: vue({
-          reactivityTransform: true,
-        }),
-      },
-    }) as any,
+    vue({
+      reactivityTransform: true,
+    }),
     replace({
       __ENV__: 'process.env.NODE_ENV',
       __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
       preventAssignment: true,
-    }),
+    }) as any,
   ],
 })