perf(core): cleanup computed vars

packages/core/src/components/A11y/A11yDescriptions.vue

@@ -1,21 +1,8 @@
 <script lang="ts" setup>
-import type { CSSProperties } from 'vue'
 import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
 import { useVueFlow } from '../../composables'
 
 const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow()
-
-const ariaLiveStyle: CSSProperties = {
-  position: 'absolute',
-  width: 1,
-  height: 1,
-  margin: -1,
-  border: 0,
-  padding: 0,
-  overflow: 'hidden',
-  clip: 'rect(0px, 0px, 0px, 0px)',
-  clipPath: 'inset(100%)',
-}
 </script>
 
 <script lang="ts">
@@ -41,7 +28,17 @@ export default {
     :id="`${ARIA_LIVE_MESSAGE}-${id}`"
     aria-live="assertive"
     aria-atomic="true"
-    :style="ariaLiveStyle"
+    style="
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      border: 0;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0px, 0px, 0px, 0px);
+      clip-path: inset(100%);
+    "
   >
     {{ ariaLiveMessage }}
   </div>

packages/core/src/components/Handle/Handle.vue

@@ -33,11 +33,28 @@ const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
 
 const handle = ref<HTMLDivElement>()
 
-const handleId = computed(() => id ?? `${nodeId}__handle-${position}`)
+const handleId = toRef(() => id ?? `${nodeId}__handle-${position}`)
 
-const isConnectableStart = computed(() => (typeof connectableStart !== 'undefined' ? connectableStart : true))
+const isConnectableStart = toRef(() => (typeof connectableStart !== 'undefined' ? connectableStart : true))
 
-const isConnectableEnd = computed(() => (typeof connectableEnd !== 'undefined' ? connectableEnd : true))
+const isConnectableEnd = toRef(() => (typeof connectableEnd !== 'undefined' ? connectableEnd : true))
+
+const isConnecting = toRef(
+  () =>
+    (connectionStartHandle.value?.nodeId === nodeId &&
+      connectionStartHandle.value?.handleId === handleId.value &&
+      connectionStartHandle.value?.type === type.value) ||
+    (connectionEndHandle.value?.nodeId === nodeId &&
+      connectionEndHandle.value?.handleId === handleId.value &&
+      connectionEndHandle.value?.type === type.value),
+)
+
+const isClickConnecting = toRef(
+  () =>
+    connectionClickStartHandle.value?.nodeId === nodeId &&
+    connectionClickStartHandle.value?.handleId === handleId.value &&
+    connectionClickStartHandle.value?.type === type.value,
+)
 
 const { handlePointerDown, handleClick } = useHandle({
   nodeId,
@@ -80,23 +97,6 @@ const isConnectable = computed(() => {
   return isDef(connectable) ? connectable : nodesConnectable.value
 })
 
-const isConnecting = toRef(
-  () =>
-    (connectionStartHandle.value?.nodeId === nodeId &&
-      connectionStartHandle.value?.handleId === handleId.value &&
-      connectionStartHandle.value?.type === type.value) ||
-    (connectionEndHandle.value?.nodeId === nodeId &&
-      connectionEndHandle.value?.handleId === handleId.value &&
-      connectionEndHandle.value?.type === type.value),
-)
-
-const isClickConnecting = toRef(
-  () =>
-    connectionClickStartHandle.value?.nodeId === nodeId &&
-    connectionClickStartHandle.value?.handleId === handleId.value &&
-    connectionClickStartHandle.value?.type === type.value,
-)
-
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
 until(() => node.initialized)
   .toBe(true, { flush: 'post' })

packages/core/src/container/Pane/Pane.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
+import { toRef } from '@vueuse/core'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import type { GraphNode } from '../../types'
@@ -42,7 +43,7 @@ const prevSelectedEdgesCount = ref(0)
 
 const containerBounds = ref<DOMRect>()
 
-const hasActiveSelection = computed(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
+const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
 useKeyPress(deleteKeyCode, (keyPressed) => {
   if (!keyPressed) {