feat(example): Add edge types example (stress tests)

* Remove a lot of computed functions or merge them into existing ones
*

src/container/EdgeRenderer/index.tsx

@@ -70,18 +70,18 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const store = inject<RevueFlowStore>('store');
-    const transform = computed(() => store?.transform);
+    const store = inject<RevueFlowStore>('store')!;
+
     const transformStyle = computed(() => {
-      return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
+      return `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`;
     });
-    const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
+    const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
 
     return () => (
-      <svg width={store?.width} height={store?.height} class="revue-flow__edges">
+      <svg width={store.width} height={store.height} class="revue-flow__edges">
         <MarkerDefinitions color={props.arrowHeadColor as string} />
         <g transform={transformStyle.value}>
-          {store?.edges.map((edge) => (
+          {store.edges.map((edge) => (
             <Edge
               key={edge.id}
               edge={edge}

src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, PropType, watchEffect } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -6,6 +6,7 @@ import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/gr
 import { GraphViewProps, RevueFlowStore } from '../../types';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+import { tryOnMounted } from '@vueuse/core';
 
 export default defineComponent({
   name: 'GraphView',
@@ -233,7 +234,7 @@ export default defineComponent({
       }
     };
 
-    watchEffect(() => {
+    tryOnMounted(() => {
       init();
     });
 

src/container/RevueFlow/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
-import { reactify, useVModel } from '@vueuse/core';
+import { useVModel } from '@vueuse/core';
 import '../../style.css';
 import '../../theme-default.css';
 import GraphView from '../GraphView';
@@ -240,14 +240,11 @@ export default defineComponent({
       store.setElements([]);
     });
 
-    const nodeTypesParsed = reactify(() => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
-    const edgeTypesParsed = reactify(() => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
-
     return () => (
       <div class="revue-flow">
         <GraphView
-          nodeTypes={nodeTypesParsed().value}
-          edgeTypes={edgeTypesParsed().value}
+          nodeTypes={createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })}
+          edgeTypes={createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })}
           connectionMode={props.connectionMode}
           connectionLineType={props.connectionLineType}
           connectionLineStyle={props.connectionLineStyle}