From a58d952e9fca3ee54717d1a4b6f6c647dc469b7b Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Nov 2021 16:01:44 +0100
Subject: [PATCH] fix: disable inherting attrs on nodes/edges to avoid warnings

* disable context warnings for non-dev environments

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/BezierEdge.vue            |  5 +++++
 src/components/Edges/SmoothStepEdge.vue        |  5 +++++
 src/components/Edges/StraightEdge.vue          |  5 +++++
 src/components/Nodes/DefaultNode.vue           |  5 +++++
 src/components/Nodes/InputNode.vue             |  5 +++++
 src/components/Nodes/Node.vue                  |  1 -
 src/components/Nodes/OutputNode.vue            |  5 +++++
 src/components/UserSelection/UserSelection.vue | 12 +++++++-----
 src/components/UserSelection/utils.ts          |  2 +-
 src/composables/useHooks.ts                    |  2 +-
 src/composables/useStore.ts                    |  2 +-
 src/composables/useWindow.ts                   |  8 +++++---
 12 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 181e4932..d9bb5aaf 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/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
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index 4e2328e6..a52e9cb7 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/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
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index 2b60cf5f..f99358b1 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/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
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index 2f4be9cb..15e86720 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/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'" />
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index c06510eb..41af75d9 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/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>
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index d7006865..4ffb6ed3 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -129,7 +129,6 @@ onMounted(() => {
   })
 })
 </script>
-
 <template>
   <DraggableCore
     cancel=".nodrag"
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index ca96fa77..571f8932 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/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>
diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index 3acc7fa1..62c84ca8 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/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>
diff --git a/src/components/UserSelection/utils.ts b/src/components/UserSelection/utils.ts
index cc795620..dc72ab1b 100644
--- a/src/components/UserSelection/utils.ts
+++ b/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')
diff --git a/src/composables/useHooks.ts b/src/composables/useHooks.ts
index c8aaf4d1..f525b045 100644
--- a/src/composables/useHooks.ts
+++ b/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)
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
index ad4109a1..184bd3c4 100644
--- a/src/composables/useStore.ts
+++ b/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,
diff --git a/src/composables/useWindow.ts b/src/composables/useWindow.ts
index 7af1a971..e4ba3935 100644
--- a/src/composables/useWindow.ts
+++ b/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
 }