fix: disable inherting attrs on nodes/edges to avoid warnings

* disable context warnings for non-dev environments

Signed-off-by: Braks <[email protected]>

src/components/Edges/BezierEdge.vue

@@ -58,6 +58,11 @@ const path = computed(() => {
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText

src/components/Edges/SmoothStepEdge.vue

@@ -61,6 +61,11 @@ const path = computed(() => {
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText

src/components/Edges/StraightEdge.vue

@@ -63,6 +63,11 @@ const path = computed(() => {
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
   <EdgeText

src/components/Nodes/DefaultNode.vue

@@ -16,6 +16,11 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
   sourcePosition: Position.Bottom,
 })
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />

src/components/Nodes/InputNode.vue

@@ -14,6 +14,11 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
   sourcePosition: Position.Bottom,
 })
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
   <span v-else v-html="props.data?.label"></span>

src/components/Nodes/Node.vue

@@ -129,7 +129,6 @@ onMounted(() => {
   })
 })
 </script>
-
 <template>
   <DraggableCore
     cancel=".nodrag"

src/components/Nodes/OutputNode.vue

@@ -14,6 +14,11 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
   targetPosition: Position.Top,
 })
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
   <span v-else v-html="props.data?.label"></span>

src/components/UserSelection/UserSelection.vue

@@ -30,6 +30,8 @@ const onMouseLeave = () => {
   store.unsetNodesSelection()
 }
 
+const userSelectionRect = computed(() => store.userSelectionRect)
+
 useEventListener(el, 'mousedown', onMouseDown)
 useEventListener(el, 'mousemove', onMouseMove)
 useEventListener(el, 'click', onMouseUp)
@@ -39,11 +41,11 @@ useEventListener(el, 'mouseleave', onMouseLeave)
 <template>
   <div ref="user-selection" class="vue-flow__selectionpane">
     <SelectionRect
-      v-if="store.userSelectionRect.draw"
-      :width="store.userSelectionRect.width"
-      :height="store.userSelectionRect.height"
-      :x="store.userSelectionRect.x"
-      :y="store.userSelectionRect.y"
+      v-if="userSelectionRect.draw"
+      :width="userSelectionRect.width"
+      :height="userSelectionRect.height"
+      :x="userSelectionRect.x"
+      :y="userSelectionRect.y"
     />
   </div>
 </template>

src/components/UserSelection/utils.ts

@@ -1,4 +1,4 @@
-import { XYPosition } from '../../types'
+import { XYPosition } from '~/types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
   const flowNode = (event.target as Element).closest('.vue-flow')

src/composables/useHooks.ts

@@ -66,7 +66,7 @@ export const createHooks = (): FlowHooks & { bind: (emit: EmitFunc) => FlowHooks
 export default (emit?: EmitFunc) => {
   let hooks = inject(Hooks)!
   if (!hooks) {
-    console.warn('hooks context not found; creating default hooks')
+    if (import.meta.env.DEV) console.warn('hooks context not found; creating default hooks')
     if (!emit) console.error('no emit function found for hook context.')
     else {
       hooks = createHooks().bind(emit)

src/composables/useStore.ts

@@ -5,7 +5,7 @@ import { Store } from '~/context'
 export default (options?: Partial<FlowOptions>) => {
   let store = inject(Store)!
   if (!store) {
-    console.warn('store context not found; creating default store')
+    if (import.meta.env.DEV) console.warn('store context not found; creating default store')
     store = useFlowStore({
       ...initialState(),
       ...options,

src/composables/useWindow.ts

@@ -1,4 +1,6 @@
-export default (): Window & typeof globalThis & { chrome?: any } => {
-  if (typeof window !== 'undefined') return window
-  else return {} as any
+type UseWindow = Window & typeof globalThis & { chrome?: any }
+
+export default (): UseWindow => {
+  if (typeof window !== 'undefined') return window as UseWindow
+  else return { chrome: false } as UseWindow
 }