feat(core): add missing styles warning

Author: bcakmakoglu

packages/core/src/composables/useStylesLoadedWarning.ts

@@ -0,0 +1,17 @@
+import { onMounted } from 'vue'
+import { ErrorCode, VueFlowError, isDev } from '../utils'
+import { useVueFlow } from './useVueFlow'
+
+export function useStylesLoadedWarning() {
+  const { emits } = useVueFlow()
+
+  onMounted(() => {
+    if (isDev()) {
+      const pane = document.querySelector('.vue-flow__pane')
+
+      if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {
+        emits.error(new VueFlowError(ErrorCode.MISSING_STYLES))
+      }
+    }
+  })
+}

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

@@ -11,6 +11,7 @@ import { useVueFlow } from '../../composables/useVueFlow'
 import { useHooks } from '../../store/hooks'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
+import { useStylesLoadedWarning } from '../../composables/useStylesLoadedWarning'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: undefined,
@@ -70,6 +71,8 @@ useHooks(emit, hooks)
 
 useOnInitHandler()
 
+useStylesLoadedWarning()
+
 // slots will be passed via provide
 // this is to avoid having to pass them down through all the components
 // as that would require a lot of boilerplate and causes significant performance drops

packages/core/src/utils/errors.ts

@@ -1,4 +1,5 @@
 export enum ErrorCode {
+  MISSING_STYLES = 'MISSING_STYLES',
   MISSING_VIEWPORT_DIMENSIONS = 'MISSING_VIEWPORT_DIMENSIONS',
   NODE_INVALID = 'NODE_INVALID',
   NODE_NOT_FOUND = 'NODE_NOT_FOUND',
@@ -16,6 +17,8 @@ export enum ErrorCode {
 }
 
 const messages = {
+  [ErrorCode.MISSING_STYLES]: () =>
+    `It seems that you haven't loaded the necessary styles. Please import '@vue-flow/core/dist/style.css' to ensure that the graph is rendered correctly`,
   [ErrorCode.MISSING_VIEWPORT_DIMENSIONS]: () => 'The Vue Flow parent container needs a width and a height to render the graph',
   [ErrorCode.NODE_INVALID]: (id?: string) => `Node is invalid\nNode: ${id}`,
   [ErrorCode.NODE_NOT_FOUND]: (id: string | null) => `Node not found\nNode: ${id}`,

packages/core/src/utils/log.ts

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