fix: add intrinsicattributes to shims

* remove declaration from shims-vue.d.ts

src/container/GraphView/index.tsx

@@ -1,42 +1,3 @@
-<template>
-  <FlowRenderer
-    :delete-key-code="deleteKeyCode"
-    :selection-key-code="selectionKeyCode"
-    :multi-selection-key-code="multiSelectionKeyCode"
-    :zoom-activation-key-code="zoomActivationKeyCode"
-    :elements-selectable="elementsSelectable"
-    :zoom-on-scroll="zoomOnScroll"
-    :zoom-on-pinch="zoomOnPinch"
-    :zoom-on-double-click="zoomOnDoubleClick"
-    :pan-on-scroll="panOnScroll"
-    :pan-on-scroll-speed="panOnScrollSpeed"
-    :pan-on-scroll-mode="panOnScrollMode"
-    :pane-moveable="paneMoveable"
-    :default-position="defaultPosition"
-    :default-zoom="defaultZoom"
-    :translate-extent="translateExtent"
-  >
-    <NodeRenderer
-      :node-types="nodeTypes"
-      :select-nodes-on-drag="selectNodesOnDrag"
-      :snap-to-grid="snapToGrid"
-      :snap-grid="snapGrid"
-      :only-render-visible-elements="onlyRenderVisibleElements"
-    />
-    <EdgeRenderer
-      :edge-types="edgeTypes"
-      :connection-line-type="connectionLineType"
-      :connection-line-style="connectionLineStyle"
-      :connection-line-component="connectionLineComponent"
-      :connection-mode="connectionMode"
-      :arrow-head-color="arrowHeadColor"
-      :marker-end-id="markerEndId"
-      :only-render-visible-elements="onlyRenderVisibleElements"
-      :edge-updater-radius="edgeUpdaterRadius"
-    />
-  </FlowRenderer>
-</template>
-<script lang="ts">
 import { defineComponent, inject, PropType, watchEffect } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
@@ -275,6 +236,44 @@ export default defineComponent({
     watchEffect(() => {
       init();
     });
+
+    return () => (
+      <FlowRenderer
+        deleteKeyCode={props.deleteKeyCode}
+        selectionKeyCode={props.selectionKeyCode}
+        multiSelectionKeyCode={props.multiSelectionKeyCode}
+        zoomActivationKeyCode={props.zoomActivationKeyCode}
+        elementsSelectable={props.elementsSelectable}
+        zoomOnScroll={props.zoomOnScroll}
+        zoomOnPinch={props.zoomOnPinch}
+        zoomOnDoubleClick={props.zoomOnDoubleClick}
+        panOnScroll={props.panOnScroll}
+        panOnScrollSpeed={props.panOnScrollSpeed}
+        panOnScrollMode={props.panOnScrollMode}
+        paneMoveable={props.paneMoveable}
+        defaultPosition={props.defaultPosition}
+        defaultZoom={props.defaultZoom}
+        translateExtent={props.translateExtent}
+      >
+        <NodeRenderer
+          nodeTypes={props.nodeTypes}
+          selectNodesOnDrag={props.selectNodesOnDrag}
+          snapToGrid={props.snapToGrid}
+          snapGrid={props.snapGrid}
+          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+        />
+        <EdgeRenderer
+          edgeTypes={props.edgeTypes}
+          connectionLineType={props.connectionLineType}
+          connectionLineStyle={props.connectionLineStyle}
+          connectionLineComponent={props.connectionLineComponent}
+          connectionMode={props.connectionMode}
+          arrowHeadColor={props.arrowHeadColor}
+          markerEndId={props.markerEndId}
+          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+          edgeUpdaterRadius={props.edgeUpdaterRadius}
+        />
+      </FlowRenderer>
+    );
   }
 });
-</script>

src/container/NodeRenderer/index.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, inject, PropType } from 'vue';
-import Node from '../../components/Nodes/Node.vue';
+import Node from '../../components/Nodes/Node';
 import { getNodesInside } from '../../utils/graph';
 import { NodeType, RevueFlowStore } from '../../types';
 

src/container/RevueFlow/index.tsx

@@ -1,49 +1,8 @@
-<template>
-  <div class="revue-flow">
-    <GraphView
-      :node-types="nodeTypesParsed().value"
-      :edge-types="edgeTypesParsed().value"
-      :connection-mode="connectionMode"
-      :connection-line-type="connectionLineType"
-      :connection-line-style="connectionLineStyle"
-      :connection-line-component="connectionLineComponent"
-      :selection-key-code="selectionKeyCode"
-      :delete-key-code="deleteKeyCode"
-      :multi-selection-key-code="multiSelectionKeyCode"
-      :zoom-activation-key-code="zoomActivationKeyCode"
-      :snap-to-grid="snapToGrid"
-      :snap-grid="snapGrid"
-      :only-render-visible-elements="onlyRenderVisibleElements"
-      :nodes-draggable="nodesDraggable"
-      :nodes-connectable="nodesConnectable"
-      :elements-selectable="elementsSelectable"
-      :select-nodes-on-drag="selectNodesOnDrag"
-      :min-zoom="minZoom"
-      :max-zoom="maxZoom"
-      :default-zoom="defaultZoom"
-      :default-position="defaultPosition"
-      :translate-extent="translateExtent"
-      :node-extent="nodeExtent"
-      :arrow-head-color="arrowHeadColor"
-      :marker-end-id="markerEndId"
-      :zoom-on-scroll="zoomOnScroll"
-      :zoom-on-pinch="zoomOnPinch"
-      :zoom-on-double-click="zoomOnDoubleClick"
-      :pan-on-scroll="panOnScroll"
-      :pan-on-scroll-speed="panOnScrollSpeed"
-      :pan-on-scroll-mode="panOnScrollMode"
-      :pane-moveable="paneMoveable"
-      :edge-updater-radius="edgeUpdaterRadius"
-    />
-    <slot></slot>
-  </div>
-</template>
-<script lang="ts">
 import { defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
 import { reactify, useVModel } from '@vueuse/core';
 import '../../style.css';
 import '../../theme-default.css';
-import GraphView from '../GraphView/GraphView.vue';
+import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
@@ -260,7 +219,7 @@ export default defineComponent({
     }
   },
   emits: Object.keys(useRevueFlow()),
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const store = configureStore(initialState)();
     provide<RevueFlowStore>('store', store);
     const hooks = useRevueFlow().bind(emit);
@@ -284,10 +243,45 @@ export default defineComponent({
     const nodeTypesParsed = reactify(() => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
     const edgeTypesParsed = reactify(() => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
 
-    return {
-      nodeTypesParsed,
-      edgeTypesParsed
-    };
+    return () => (
+      <div class="revue-flow">
+        <GraphView
+          nodeTypes={nodeTypesParsed().value}
+          edgeTypes={edgeTypesParsed().value}
+          connectionMode={props.connectionMode}
+          connectionLineType={props.connectionLineType}
+          connectionLineStyle={props.connectionLineStyle}
+          connectionLineComponent={props.connectionLineComponent}
+          selectionKeyCode={props.selectionKeyCode}
+          deleteKeyCode={props.deleteKeyCode}
+          multiSelectionKeyCode={props.multiSelectionKeyCode}
+          zoomActivationKeyCode={props.zoomActivationKeyCode}
+          snapToGrid={props.snapToGrid}
+          snapGrid={props.snapGrid}
+          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+          nodesDraggable={props.nodesDraggable}
+          nodesConnectable={props.nodesConnectable}
+          elementsSelectable={props.elementsSelectable}
+          selectNodesOnDrag={props.selectNodesOnDrag}
+          minZoom={props.minZoom}
+          maxZoom={props.maxZoom}
+          defaultZoom={props.defaultZoom}
+          defaultPosition={props.defaultPosition}
+          translateExtent={props.translateExtent}
+          nodeExtent={props.nodeExtent}
+          arrowHeadColor={props.arrowHeadColor}
+          markerEndId={props.markerEndId}
+          zoomOnScroll={props.zoomOnScroll}
+          zoomOnPinch={props.zoomOnPinch}
+          zoomOnDoubleClick={props.zoomOnDoubleClick}
+          panOnScroll={props.panOnScroll}
+          panOnScrollSpeed={props.panOnScrollSpeed}
+          panOnScrollMode={props.panOnScrollMode}
+          paneMoveable={props.paneMoveable}
+          edgeUpdaterRadius={props.edgeUpdaterRadius}
+        />
+        {slots.default ? slots.default() : ''}
+      </div>
+    );
   }
 });
-</script>