refactor(core): log warnings for non-prod node envs

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

@@ -3,7 +3,7 @@ import type { CSSProperties, EffectScope } from 'vue'
 import EdgeWrapper from '../../components/Edges/Wrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useVueFlow } from '../../composables'
-import { groupEdgesByZLevel } from '../../utils'
+import { groupEdgesByZLevel, warn } from '../../utils'
 import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
 import { Slots } from '../../context'
 import MarkerDefinitions from './MarkerDefinitions.vue'
@@ -107,7 +107,7 @@ const getType = (type?: string, template?: GraphEdge['template']) => {
 
   const slot = slots?.[`edge-${name}`]
   if (!slot?.({})) {
-    console.warn(`[vueflow]: Edge type "${type}" not found and no edge-slot detected. Using fallback type "default".`)
+    warn(`Edge type "${type}" not found and no edge-slot detected. Using fallback type "default".`)
     return false
   }
 

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

@@ -3,6 +3,7 @@ import { NodeWrapper } from '../../components'
 import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
+import { warn } from '../../utils'
 
 const slots = inject(Slots)
 
@@ -45,7 +46,7 @@ const getType = (type?: string, template?: GraphNode['template']) => {
 
   const slot = slots?.[`node-${name}`]
   if (!slot?.({})) {
-    console.warn(`[vueflow]: Node type "${type}" not found and no node-slot detected. Using fallback type "default".`)
+    warn(`Node type "${type}" not found and no node-slot detected. Using fallback type "default".`)
     return false
   }
 

packages/core/src/store/actions.ts

@@ -36,6 +36,7 @@ import {
   parseEdge,
   pointToRendererPoint,
   updateEdgeAction,
+  warn,
 } from '~/utils'
 import { useZoomPanHelper } from '~/composables'
 
@@ -283,8 +284,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
       const missingSource = !sourceNode || typeof sourceNode === 'undefined'
       const missingTarget = !targetNode || typeof targetNode === 'undefined'
-      if (missingSource) console.warn(`[vue-flow]: Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-      if (missingTarget) console.warn(`[vue-flow]: Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
+      if (missingSource) warn(`Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
+      if (missingTarget) warn(`Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
       if (missingSource || missingTarget) return res
 
       const storedEdge = getters.getEdge.value(edge.id)
@@ -335,8 +336,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
         const missingSource = !sourceNode || typeof sourceNode === 'undefined'
         const missingTarget = !targetNode || typeof targetNode === 'undefined'
-        if (missingSource) console.warn(`[vueflow]: Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-        if (missingTarget) console.warn(`[vueflow]: Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
+        if (missingSource) warn(`Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
+        if (missingTarget) warn(`Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
         if (missingTarget || missingSource) return acc
 
         acc.push(

packages/core/src/store/getters.ts

@@ -1,6 +1,6 @@
 import { defaultEdgeTypes, defaultNodeTypes } from './state'
 import type { ComputedGetters, GraphEdge, GraphNode, State } from '~/types'
-import { getNodesInside, isEdgeVisible } from '~/utils'
+import { getNodesInside, isEdgeVisible, warn } from '~/utils'
 
 export default (state: State): ComputedGetters => {
   const nodeIds = computed(() => state.nodes.map((n) => n.id))
@@ -61,7 +61,7 @@ export default (state: State): ComputedGetters => {
     if (!source || !target) {
       state.edges = state.edges.filter((edge) => edge.id !== e.id)
 
-      console.warn(`[vue-flow]: Orphaned edge ${e.id} removed.`)
+      warn(`Orphaned edge ${e.id} removed.`)
       return
     }
 

packages/core/src/utils/graph.ts

@@ -1,3 +1,4 @@
+import { warn } from './log'
 import type {
   Box,
   Connection,
@@ -140,7 +141,7 @@ export const connectionExists = (edge: Edge | Connection, elements: Elements) =>
  */
 export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) => {
   if (!edgeParams.source || !edgeParams.target) {
-    console.warn("[vueflow]: Can't create edge. An edge needs a source and a target.")
+    warn("Can't create edge. An edge needs a source and a target.")
     return elements
   }
 
@@ -165,14 +166,14 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defau
  */
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements) => {
   if (!newConnection.source || !newConnection.target) {
-    console.warn("[vueflow]: Can't create new edge. An edge needs a source and a target.")
+    warn("Can't create new edge. An edge needs a source and a target.")
     return elements
   }
 
   const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id)
 
   if (!foundEdge) {
-    console.warn(`[vueflow]: The old edge with id=${oldEdge.id} does not exist.`)
+    warn(`The old edge with id=${oldEdge.id} does not exist.`)
     return elements
   }
 

packages/core/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './graph'
 export * from './node'
 export * from './changes'
 export * from './store'
+export * from './log'

packages/core/src/utils/log.ts

@@ -0,0 +1,7 @@
+const productionEnvs = ['production', 'prod']
+
+export const warn = (message: string, ...args: any[]) => {
+  if (!productionEnvs.includes(__ENV__ || '')) {
+    console.warn(`[Vue Flow]: ${message}`, ...args)
+  }
+}

packages/core/src/utils/store.ts

@@ -1,11 +1,12 @@
+import { connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from './graph'
+import { warn } from './log'
 import type { Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types'
-import { connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from '~/utils/graph'
 
 export const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
 
 export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) => {
   if (!edgeParams.source || !edgeParams.target) {
-    console.warn("[vueflow]: Can't create edge. An edge needs a source and a target.")
+    warn("Can't create edge. An edge needs a source and a target.")
     return false
   }
 
@@ -25,14 +26,14 @@ export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) =>
 
 export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) => {
   if (!newConnection.source || !newConnection.target) {
-    console.warn("[vueflow]: Can't create new edge. An edge needs a source and a target.")
+    warn("Can't create new edge. An edge needs a source and a target.")
     return false
   }
 
   const foundEdge = edges.find((e) => isGraphEdge(e) && e.id === edge.id)
 
   if (!foundEdge) {
-    console.warn(`[vueflow]: The old edge with id=${edge.id} does not exist.`)
+    warn(`The old edge with id=${edge.id} does not exist.`)
     return false
   }
 
@@ -75,7 +76,7 @@ export const createGraphNodes = (
   graphNodes.forEach((node) => {
     const nextNodes = [...graphNodes, ...currGraphNodes]
     if (node.parentNode && !nextNodes.find((n) => n.id === node.parentNode)) {
-      console.warn(`[vueflow]: Parent node ${node.parentNode} not found`)
+      warn(`Parent node ${node.parentNode} not found`)
     }
 
     if (node.parentNode || parentNodes[node.id]) {

packages/core/tsconfig.json

@@ -16,7 +16,7 @@
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationDir": "./dist",
-    "types": ["vite/client", "vue/macros"],
+    "types": ["vite", "vue/macros"],
     "jsx": "preserve",
     "paths": {
       "~/*": ["src/*"]

packages/core/vite.config.ts

@@ -14,6 +14,9 @@ export default defineConfig({
     },
     extensions: ['.ts', '.vue'],
   },
+  define: {
+    'process.env.NODE_ENV': 'process.env.NODE_ENV',
+  },
   build: {
     emptyOutDir: false,
     lib: {
@@ -47,6 +50,7 @@ export default defineConfig({
       dts: 'src/auto-imports.d.ts',
     }),
     replace({
+      __ENV__: 'process.env.NODE_ENV',
       __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
       preventAssignment: true,
     }),