fix: add compatConfig to all components

packages/background/src/Background.vue

@@ -49,6 +49,7 @@ const d = computed(
 <script lang="ts">
 export default {
   name: 'Background',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/controls/src/ControlButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 export default {
   name: 'ControlButton',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/controls/src/Controls.vue

@@ -52,6 +52,7 @@ const onInteractiveChangeHandler = () => {
 <script lang="ts">
 export default {
   name: 'Controls',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

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

@@ -17,6 +17,12 @@ const ariaLiveStyle: CSSProperties = {
 }
 </script>
 
+<script lang="ts">
+export default {
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div :id="`${ARIA_NODE_DESC_KEY}-${id}`" style="display: none">
     Press enter or space to select a node.

packages/core/src/components/ConnectionLine/ConnectionLine.vue

@@ -93,6 +93,7 @@ const dAttr = computed(() => {
 <script lang="ts">
 export default {
   name: 'ConnectionLine',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Edges/BaseEdge.ts

@@ -71,5 +71,6 @@ BaseEdge.props = [
 ]
 
 BaseEdge.inheritAttrs = false
+BaseEdge.compatConfig = { MODE: 3 }
 
 export default BaseEdge

packages/core/src/components/Edges/BezierEdge.ts

@@ -42,5 +42,6 @@ BezierEdge.props = [
 ]
 
 BezierEdge.inheritAttrs = false
+BezierEdge.compatConfig = { MODE: 3 }
 
 export default BezierEdge

packages/core/src/components/Edges/EdgeAnchor.ts

@@ -46,5 +46,6 @@ const EdgeAnchor: FunctionalComponent<Props> = function ({ radius = 10, centerX
 }
 
 EdgeAnchor.props = ['radius', 'centerX', 'centerY', 'position']
+EdgeAnchor.compatConfig = { MODE: 3 }
 
 export default EdgeAnchor

packages/core/src/components/Edges/EdgeLabelRenderer.vue

@@ -7,6 +7,7 @@ const teleportTarget = computed(() => viewportRef.value?.getElementsByClassName(
 <script lang="ts">
 export default {
   name: 'EdgeLabelRenderer',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Edges/EdgeText.vue

@@ -38,6 +38,7 @@ function getBox() {
 <script lang="ts">
 export default {
   name: 'EdgeText',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -14,6 +14,7 @@ interface Props {
 
 const EdgeWrapper = defineComponent({
   name: 'Edge',
+  compatConfig: { MODE: 3 },
   props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
   setup(props: Props) {
     const {

packages/core/src/components/Edges/SimpleBezierEdge.ts

@@ -41,5 +41,6 @@ SimpleBezierEdge.props = [
 ]
 
 SimpleBezierEdge.inheritAttrs = false
+SimpleBezierEdge.compatConfig = { MODE: 3 }
 
 export default SimpleBezierEdge

packages/core/src/components/Edges/SmoothStepEdge.ts

@@ -43,5 +43,6 @@ SmoothStepEdge.props = [
 ]
 
 SmoothStepEdge.inheritAttrs = false
+SmoothStepEdge.compatConfig = { MODE: 3 }
 
 export default SmoothStepEdge

packages/core/src/components/Edges/StepEdge.ts

@@ -25,5 +25,6 @@ StepEdge.props = [
 ]
 
 StepEdge.inheritAttrs = false
+StepEdge.compatConfig = { MODE: 3 }
 
 export default StepEdge

packages/core/src/components/Edges/StraightEdge.ts

@@ -31,5 +31,6 @@ StraightEdge.props = [
 ]
 
 StraightEdge.inheritAttrs = false
+StraightEdge.compatConfig = { MODE: 3 }
 
 export default StraightEdge

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

@@ -74,6 +74,7 @@ onMounted(() => {
 <script lang="ts">
 export default {
   name: 'Handle',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Nodes/DefaultNode.ts

@@ -20,5 +20,6 @@ const DefaultNode: FunctionalComponent<NodeProps> = function ({
 
 DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable']
 DefaultNode.inheritAttrs = false
+DefaultNode.compatConfig = { MODE: 3 }
 
 export default DefaultNode

packages/core/src/components/Nodes/InputNode.ts

@@ -17,5 +17,6 @@ const InputNode: FunctionalComponent<NodeProps> = function ({
 
 InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable']
 InputNode.inheritAttrs = false
+InputNode.compatConfig = { MODE: 3 }
 
 export default InputNode

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -242,6 +242,7 @@ function onKeyDown(event: KeyboardEvent) {
 export default {
   name: 'Node',
   inheritAttrs: false,
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Nodes/OutputNode.ts

@@ -17,5 +17,6 @@ const OutputNode: FunctionalComponent<NodeProps> = function ({
 
 OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable']
 OutputNode.inheritAttrs = false
+OutputNode.compatConfig = { MODE: 3 }
 
 export default OutputNode

packages/core/src/components/NodesSelection/NodesSelection.vue

@@ -55,6 +55,7 @@ function onKeyDown(event: KeyboardEvent) {
 <script lang="ts">
 export default {
   name: 'NodesSelection',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Panel/Panel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PanelProps } from '../../types'
+import type { PanelProps } from '../../types/panel'
 
 const props = defineProps<PanelProps>()
 
@@ -8,6 +8,13 @@ const { userSelectionActive } = useVueFlow()
 const positionClasses = computed(() => `${props.position}`.split('-'))
 </script>
 
+<script lang="ts">
+export default {
+  name: 'Panel',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div class="vue-flow__panel" :class="positionClasses" :style="{ pointerEvents: userSelectionActive ? 'none' : 'all' }">
     <slot />

packages/core/src/components/UserSelection/UserSelection.vue

@@ -2,6 +2,13 @@
 const { userSelectionRect } = useVueFlow()
 </script>
 
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div
     class="vue-flow__selection vue-flow__container"

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -89,6 +89,7 @@ function getType(type?: string, template?: GraphEdge['template']) {
 <script lang="ts">
 export default {
   name: 'Edges',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/container/EdgeRenderer/Marker.vue

@@ -17,6 +17,7 @@ const {
 <script lang="ts">
 export default {
   name: 'MarkerType',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -33,6 +33,7 @@ const markers = computed(() => {
 <script lang="ts">
 export default {
   name: 'MarkerDefinitions',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/container/NodeRenderer/NodeRenderer.vue

@@ -78,6 +78,7 @@ function getType(type?: string, template?: GraphNode['template']) {
 <script lang="ts">
 export default {
   name: 'Nodes',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

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

@@ -215,6 +215,7 @@ function onMouseEnter(event: MouseEvent) {
 <script lang="ts">
 export default {
   name: 'Pane',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/container/Viewport/Transform.vue

@@ -42,6 +42,7 @@ onMounted(async () => {
 <script lang="ts">
 export default {
   name: 'Transform',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/container/Viewport/Viewport.vue

@@ -299,6 +299,7 @@ function isWrappedWithClass(event: Event, className: string | undefined) {
 <script lang="ts">
 export default {
   name: 'Viewport',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

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

@@ -153,6 +153,7 @@ defineExpose<VueFlowStore>({
 <script lang="ts">
 export default {
   name: 'VueFlow',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/minimap/src/MiniMap.vue

@@ -191,6 +191,7 @@ const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
 <script lang="ts">
 export default {
   name: 'MiniMap',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/minimap/src/MiniMapNode.ts

@@ -4,6 +4,7 @@ import { MiniMapSlots } from './types'
 
 export default defineComponent({
   name: 'MiniMapNode',
+  compatConfig: { MODE: 3 },
   props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering', 'type'],
   emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
   setup(props: MiniMapNodeProps, { attrs, emit }) {

packages/node-resizer/src/NodeResizer.vue

@@ -22,6 +22,7 @@ const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left']
 <script lang="ts">
 export default {
   name: 'NodeResizer',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>

packages/node-resizer/src/ResizeControl.vue

@@ -215,6 +215,13 @@ const colorStyleProp = computed(() => (props.variant === ResizeControlVariant.Li
 const controlStyle = computed(() => (props.color ? { [colorStyleProp.value]: props.color } : {}))
 </script>
 
+<script lang="ts">
+export default {
+  name: 'ResizeControl',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div
     ref="resizeControlRef"

packages/node-resizer/src/ResizeControlLine.vue

@@ -12,6 +12,13 @@ const emits = defineEmits<{
 }>()
 </script>
 
+<script lang="ts">
+export default {
+  name: 'ResizeControlLine',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <ResizeControl
     v-bind="props"

packages/node-toolbar/src/NodeToolbar.vue

@@ -77,6 +77,7 @@ const wrapperStyle = computed<CSSProperties>(() => ({
 <script lang="ts">
 export default {
   name: 'NodeToolbar',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>

packages/pathfinding-edge/src/arrow/PerfectArrow.vue

@@ -30,6 +30,7 @@ const attrs = useAttrs() as { style: CSSProperties }
 <script lang="ts">
 export default {
   name: 'PerfectArrow',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>

packages/pathfinding-edge/src/edge/PathFindingEdge.vue

@@ -80,6 +80,7 @@ const attrs: any = useAttrs()
 <script lang="ts">
 export default {
   name: 'PathFindingEdge',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>