fix: add intrinsicattributes to shims

* remove declaration from shims-vue.d.ts

src/components/Nodes/Node.tsx

@@ -1,42 +1,4 @@
-<template>
-  <DraggableCore
-    cancel=".nodrag"
-    :scale="transform[2]"
-    :disabled="!isDraggable"
-    :grid="grid"
-    :enableUserSelectHack="false"
-    @start="onDragStart"
-    @move="onDrag"
-    @stop="onDragStop"
-  >
-    <div
-      ref="nodeElement"
-      :class="nodeClasses"
-      :style="nodeStyle"
-      :data-id="node.id"
-      @mouseenter="onMouseEnterHandler"
-      @mousemove="onMouseMoveHandler"
-      @mouseleave="onMouseLeaveHandler"
-      @contextmenu="onContextMenuHandler"
-      @click="onSelectNodeHandler"
-    >
-      <component
-        :is="type"
-        :data="node.data"
-        :type="node.type"
-        :x-pos="node.__rf.position.x"
-        :y-pos="node.__rf.position.y"
-        :selected="selected"
-        :is-connectable="isConnectable"
-        :source-position="node.sourcePosition"
-        :target-position="node.targetPosition"
-        :is-dragging="node.__rf.isDragging"
-      />
-    </div>
-  </DraggableCore>
-</template>
-<script lang="ts">
-import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
+import { computed, CSSProperties, defineComponent, h, inject, PropType, provide } from 'vue';
 import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
 import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
 import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
@@ -57,7 +19,7 @@ export default defineComponent({
       required: true
     },
     type: {
-      type: [Object, String],
+      type: Object,
       required: true
     },
     snapToGrid: {
@@ -235,24 +197,41 @@ export default defineComponent({
       }
     ]);
 
-    return {
-      nodeClasses,
-      grid,
-      nodeStyle,
-      nodeElement,
-      onDragStart,
-      onDrag,
-      onDragStop,
-      onContextMenuHandler,
-      onMouseEnterHandler,
-      onMouseLeaveHandler,
-      onMouseMoveHandler,
-      onSelectNodeHandler,
-      transform,
-      isConnectable,
-      isDraggable,
-      selected
-    };
+    return () => (
+      <DraggableCore
+        cancel=".nodrag"
+        scale={transform.value[2]}
+        disabled={!isDraggable.value}
+        grid={grid.value}
+        enableUserSelectHack={false}
+        onStart={onDragStart}
+        onMove={onDrag}
+        onStop={onDragStop}
+      >
+        <div
+          ref="nodeElement"
+          class={nodeClasses.value}
+          style={nodeStyle.value}
+          data-id={props.node.id}
+          onMouseenter={onMouseEnterHandler}
+          onMousemove={onMouseMoveHandler}
+          onMouseleave={onMouseLeaveHandler}
+          onContextmenu={onContextMenuHandler}
+          onClick={onSelectNodeHandler}
+        >
+          {h(props.type, {
+            data: props.node.data,
+            type: props.node.type,
+            xPos: props.node.__rf.position.x,
+            yPos: props.node.__rf.position.y,
+            selected: selected.value,
+            isConnectable: isConnectable.value,
+            sourcePosition: props.node.sourcePosition,
+            targetPosition: props.node.targetPosition,
+            isDragging: props.node.__rf.isDragging
+          })}
+        </div>
+      </DraggableCore>
+    );
   }
 });
-</script>

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>

src/index.ts

@@ -1,4 +1,4 @@
-export { default as default } from './container/RevueFlow/RevueFlow.vue';
+export { default as default } from './container/RevueFlow';
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
 export { getBezierPath } from './components/Edges/BezierEdge';

src/shims-tsx.d.ts

@@ -11,5 +11,9 @@ declare global {
     interface IntrinsicElements {
       [elem: string]: any;
     }
+
+    interface IntrinsicAttributes {
+      [prop: string]: any;
+    }
   }
 }

src/shims-vue.d.ts

@@ -4,9 +4,3 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-
-declare namespace JSX {
-  export interface IntrinsicElements {
-    [key: string]: any;
-  }
-}