feat(slots): Add node and edge renderer slots

* more flexibility by having the ability to use the node/edge-renderer and wrapper
* export renderer and wrapper from lib entry

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/index.ts

@@ -4,3 +4,4 @@ export { default as SmoothStepEdge } from './SmoothStepEdge.vue'
 export { default as StraightEdge } from './StraightEdge.vue'
 export { default as EdgeAnchor } from './EdgeAnchor.vue'
 export { default as EdgeText } from './EdgeText.vue'
+export { default as EdgeWrapper } from './Edge.vue'

src/components/Nodes/index.ts

@@ -1,3 +1,4 @@
 export { default as DefaultNode } from './DefaultNode.vue'
 export { default as InputNode } from './InputNode.vue'
 export { default as OutputNode } from './OutputNode.vue'
+export { default as NodeWrapper } from './Node.vue'

src/container/VueFlow/VueFlow.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import diff from 'microdiff'
 import { invoke } from '@vueuse/core'
 import {
   ConnectionLineType,
@@ -155,7 +154,7 @@ invoke(async () => {
   store.instance = instance
 })
 
-throttledWatch(elements, (val) => store.setElements(val), { flush: 'post', deep: true, throttle: 10 })
+throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
 throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
 
 onMounted(() => {
@@ -179,7 +178,9 @@ const transitionName = computed(() => {
   <div class="vue-flow">
     <Transition key="vue-flow-transition" :name="transitionName">
       <Suspense>
+        <template #default>
           <ZoomPane
+            v-show="store.isReady"
             key="zoom-pane"
             :selection-key-code="store.selectionKeyCode"
             :zoom-activation-key-code="store.zoomActivationKeyCode"
@@ -200,6 +201,7 @@ const transitionName = computed(() => {
                 :multi-selection-key-code="store.multiSelectionKeyCode"
                 :selection-key-code="store.selectionKeyCode"
               >
+                <slot name="node-renderer" v-bind="{ nodes: store.getNodes, nodeTypes: store.getNodeTypes }">
                   <NodeRenderer key="node-renderer" :select-nodes-on-drag="store.selectNodesOnDrag">
                     <template
                       v-for="nodeName of Object.keys(store.getNodeTypes)"
@@ -209,6 +211,8 @@ const transitionName = computed(() => {
                       <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
                     </template>
                   </NodeRenderer>
+                </slot>
+                <slot name="edge-renderer" v-bind="{ edges: store.getEdges, edgeTypes: store.getEdgeTypes }">
                   <EdgeRenderer
                     key="edge-renderer"
                     :connection-line-type="store.connectionLineType"
@@ -227,10 +231,12 @@ const transitionName = computed(() => {
                       <slot key="connection-line" name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
                     </template>
                   </EdgeRenderer>
+                </slot>
               </SelectionPane>
               <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
             </template>
           </ZoomPane>
+        </template>
         <template v-if="store.loading" #fallback>
           <slot key="loading-indicator" name="loading-indicator">
             <LoadingIndicator key="default-loading-indicator" v-bind="store.loading">

src/container/ZoomPane/ZoomPane.vue

@@ -181,7 +181,8 @@ store.dimensions = {
   height: height.value,
 }
 
-await until(() => store.isReady).toBe(true)
+// skip waiting for ssr
+if (import.meta.env.SSR || typeof window === 'undefined') await until(() => store.isReady)
 
 watch(
   [width, height],

src/index.ts

@@ -1,4 +1,6 @@
 export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
+export { default as NodeRenderer } from './container/NodeRenderer/NodeRenderer.vue'
+export { default as EdgeRenderer } from './container/EdgeRenderer/EdgeRenderer.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export * from './components/Edges'
 export * from './components/Nodes'