docs(guide): extend custom node and edges section

Author: bcakmakoglu

docs/src/guide/edge.md

@@ -433,8 +433,13 @@ Edge-types are determined from your edges' definitions.
 
 ::: code-group
 
-```js [edges <LogosJavascript />]
+```vue [App.vue <LogosJavascript />]
+<script setup>
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
+
+import CustomEdge from './CustomEdge.vue'
+import SpecialEdge from './SpecialEdge.vue'
 
 export const edges = ref([
   {
@@ -445,22 +450,57 @@ export const edges = ref([
     type: 'custom',
   },
   {
-    id: 'e1-2',
+    id: 'e1-3',
     source: '1',
-    target: '2',
+    target: '3',
     // this will create the edge-type `special`
     type: 'special',
   }
 ])
+  
+const nodes = ref([
+  {
+    id: '1',
+    label: 'Node 1',
+    position: { x: 50, y: 50 },
+  },
+  {
+    id: '2',
+    label: 'Node 2',
+    position: { x: 50, y: 250 },
+  },
+  {
+    id: '3',
+    label: 'Node 3',
+    position: { x: 250, y: 50 },
+  },
+  {
+    id: '4',
+    label: 'Node 4',
+    position: { x: 250, y: 250 },
+  },
+])
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges">
+    <template #edge-custom="customEdgeProps">
+      <CustomEdge v-bind="customEdgeProps" />
+    </template>
+    
+    <template #edge-special="specialEdgeProps">
+      <SpecialEdge v-bind="specialEdgeProps" />
+    </template>
+  </VueFlow>
+</template>
 ```
 
 ```vue [CustomEdge.vue <LogosJavascript />]
 <script setup>
 import { BezierEdge } from '@vue-flow/core';
 
+// props were passed from the slot using `v-bind="customEdgeProps"`
 const props = defineProps(['sourceX', 'sourceY', 'targetX', 'targetY', 'sourcePosition', 'targetPosition']);
-
-console.log(props.data.hello) // 'world'
 </script>
 
 <script lang="ts">
@@ -481,9 +521,14 @@ export default {
 </template>
 ```
 
-```ts [edges <LogosTypescript />]
+```vue{25-26,32-33,40-42} [App.vue <LogosTypescript />]
+<script setup lang="ts">
 import { ref } from 'vue'
 import type { Edge } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+
+import CustomEdge from './CustomEdge.vue'
+import SpecialEdge from './SpecialEdge.vue'
 
 // You can pass 3 optional generic arguments to the Edge type, allowing you to define:
 // 1. The data object type
@@ -496,33 +541,69 @@ interface CustomData {
 
 type CustomEdgeTypes = 'custom' | 'special'
 
-type CustomEdge = Edge<CustomEdgeData, any, CustomEdgeTypes>
+type CustomEdge = Edge<CustomData, any, CustomEdgeTypes>
 
 export const edges = ref<CustomEdge[]>([
     {
-        id: 'e1-2',
-        source: '1',
-        target: '2',
-        // this will create the edge-type `custom`
-        type: 'custom',
+      id: 'e1-2',
+      source: '1',
+      target: '2',
+      // this will create the edge-type `custom`
+      type: 'custom',
     },
     {
-        id: 'e1-2',
-        source: '1',
-        target: '2',
-        // this will create the edge-type `special`
-        type: 'special',
+      id: 'e1-3',
+      source: '1',
+      target: '3',
+      // this will create the edge-type `special`
+      type: 'special',
     },
     
-    // this will throw a type error, as the type is not defined in the CustomEdgeTypes
-    // regardless it would be rendered as a default edge type
     {
-        id: 'e1-2',
-        source: '1',
-        target: '2',
-        type: 'not-defined', // should be 'custom' | 'special'
+      id: 'e1-4',
+      source: '1',
+      target: '4',
+      // this will throw a type error, as the type is not defined in the CustomEdgeTypes
+      // regardless it would be rendered as a default edge type
+      type: 'not-defined',
     }
 ])
+  
+const nodes = ref([
+  {
+    id: '1',
+    label: 'Node 1',
+    position: { x: 50, y: 50 },
+  },
+  {
+    id: '2',
+    label: 'Node 2',
+    position: { x: 50, y: 250 },
+  },
+  {
+    id: '3',
+    label: 'Node 3',
+    position: { x: 250, y: 50 },
+  },
+  {
+    id: '4',
+    label: 'Node 4',
+    position: { x: 250, y: 250 },
+  },
+])  
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges">
+    <template #edge-custom="customEdgeProps">
+      <CustomEdge v-bind="customEdgeProps" />
+    </template>
+    
+    <template #edge-special="specialEdgeProps">
+      <SpecialEdge v-bind="specialEdgeProps" />
+    </template>
+  </VueFlow>
+</template>
 ```
 
 ```vue [CustomEdge.vue <LogosTypescript />]
@@ -532,6 +613,7 @@ import { BezierEdge } from '@vue-flow/core';
 
 import { CustomData } from './edges'
 
+// props were passed from the slot using `v-bind="customEdgeProps"`
 const props = defineProps<EdgeProps<CustomData>>();
 
 console.log(props.data.hello) // 'world'
@@ -676,8 +758,7 @@ But you may wish to expand on these features or implement your business logic in
 ## Edge Events
 
 Vue Flow provides two main ways of listening to edge events,
-either by using `useVueFlow` to bind listeners to the event handlers
-or by using binding listeners to the `<VueFlow>` component.
+either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.
 
 ::: code-group
 

docs/src/guide/node.md

@@ -474,8 +474,13 @@ Node-types are determined from your nodes' definitions.
 
 ::: code-group
 
-```js [nodes <LogosJavascript />]
+```vue{11-12,18-19} [App.vue <LogosJavascript />]
+<script setup>
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
+
+import CustomNode from './CustomNode.vue'
+import SpecialNode from './SpecialNode.vue'
 
 export const nodes = ref([
   {
@@ -493,12 +498,26 @@ export const nodes = ref([
     position: { x: 150, y: 50 },
   }
 ])
+</script>
+
+<template>
+  <VueFlow :nodes="nodes">
+    <template #node-custom="customNodeProps">
+      <CustomNode v-bind="customNodeProps" />
+    </template>
+    
+    <template #node-special="specialNodeProps">
+      <SpecialNode v-bind="specialNodeProps" />
+    </template>
+  </VueFlow>
+</template>
 ```
 
 ```vue [CustomNode.vue <LogosJavascript />]
 <script setup>
 import { Position } from '@vue-flow/core'
 
+// props were passed from the slot using `v-bind="customNodeProps"`
 const props = defineProps(['label'])
 </script>
 
@@ -511,9 +530,14 @@ const props = defineProps(['label'])
 </template>
 ```
 
-```ts [nodes <LogosTypescript />]
+```vue{30-31,37-38,45-47} [App.vue <LogosTypescript />]
+<script setup lang="ts">
 import { ref } from 'vue'
 import type { Node } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+
+import CustomNode from './CustomNode.vue'
+import SpecialNode from './SpecialNode.vue'
 
 // You can pass 3 optional generic arguments to the Node interface, allowing you to define:
 // 1. The data object type
@@ -541,22 +565,35 @@ export const nodes = ref<CustomNode[]>([
     position: { x: 50, y: 50 },
   },
   {
-    id: '1',
-    label: 'Node 1',
+    id: '2',
+    label: 'Node 2',
     // this will create the node-type `special`
     type: 'special',
     position: { x: 150, y: 50 },
   },
     
-  // this will throw a type error, as the type is not defined in the CustomEdgeTypes
-  // regardless it would be rendered as a default edge type
   {
-    id: '1', 
-    label: 'Node 1',
+    id: '3', 
+    label: 'Node 3',
+    // this will throw a type error, as the type is not defined in the CustomEdgeTypes
+    // regardless it would be rendered as a default edge type
     type: 'invalid',
     position: { x: 150, y: 50 },
   }
 ])
+</script>
+
+<template>
+  <VueFlow :nodes="nodes">
+    <template #node-custom="customNodeProps">
+      <CustomNode v-bind="customNodeProps" />
+    </template>
+    
+    <template #node-special="specialNodeProps">
+      <SpecialNode v-bind="specialNodeProps" />
+    </template>
+  </VueFlow>
+</template>
 ```
 
 ```vue [CustomNode.vue <LogosTypescript />]
@@ -566,6 +603,7 @@ import { Position } from '@vue-flow/core'
 
 import { CustomData, CustomEvents } from './nodes'
 
+// props were passed from the slot using `v-bind="customNodeProps"`
 const props = defineProps<NodeProps<CustomData, CustomEvents>>()
   
 console.log(props.data.hello) // 'world'
@@ -691,8 +729,7 @@ But you may wish to expand on these features or implement your business logic in
 ## [Node Events](/typedocs/types/NodeEventsHandler)
 
 Vue Flow provides two main ways of listening to node events, 
-either by using `useVueFlow` to bind listeners to the event handlers 
-or by using binding listeners to the `<VueFlow>` component.
+either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.
 
 ::: code-group