fix: add intrinsicattributes to shims

* remove declaration from shims-vue.d.ts

package.json

@@ -71,20 +71,17 @@
     "rollup": "^2.52.2",
     "rollup-plugin-dts": "^3.0.2",
     "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "rollup-plugin-vue": "^6.0.0-beta.10",
-    "rollup-plugin-vue-inline-svg": "^1.1.2",
     "tslib": "^2.3.0",
     "typescript": "^4.3.5",
     "vite": "^2.3.8",
     "vite-svg-loader": "^2.1.0",
     "vue": "^3.2.0-beta.8",
-    "vue-loader": "^16.4.1",
     "vue-router": "4",
-    "vue-tsc": "^0.0.24"
+    "vue-tsc": "^0.2.2"
   },
   "peerDependencies": {
     "vue": ">=3.0.5"

rollup.ts

@@ -5,7 +5,6 @@ import { OutputOptions, RollupOptions } from 'rollup';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import vue from 'rollup-plugin-vue';
 // @ts-ignore
 import svg from 'rollup-plugin-svg';
 import postcss from 'rollup-plugin-postcss';
@@ -93,8 +92,7 @@ for (const { external, iife } of activePackages) {
           extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
           exclude: 'node_modules/**',
           babelHelpers: 'bundled'
-        }),
+        })
-        vue()
       ],
       external: ['vue', ...(external || [])]
     });

src/components/Nodes/Node.tsx

@@ -1,42 +1,4 @@
-<template>
+import { computed, CSSProperties, defineComponent, h, inject, PropType, provide } from 'vue';
-  <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 { 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 {
+    return () => (
-      nodeClasses,
+      <DraggableCore
-      grid,
+        cancel=".nodrag"
-      nodeStyle,
+        scale={transform.value[2]}
-      nodeElement,
+        disabled={!isDraggable.value}
-      onDragStart,
+        grid={grid.value}
-      onDrag,
+        enableUserSelectHack={false}
-      onDragStop,
+        onStart={onDragStart}
-      onContextMenuHandler,
+        onMove={onDrag}
-      onMouseEnterHandler,
+        onStop={onDragStop}
-      onMouseLeaveHandler,
+      >
-      onMouseMoveHandler,
+        <div
-      onSelectNodeHandler,
+          ref="nodeElement"
-      transform,
+          class={nodeClasses.value}
-      isConnectable,
+          style={nodeStyle.value}
-      isDraggable,
+          data-id={props.node.id}
-      selected
+          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 {
+    return () => (
-      nodeTypesParsed,
+      <div class="revue-flow">
-      edgeTypesParsed
+        <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;
-  }
-}

tsconfig.json

@@ -9,7 +9,8 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": ["es6", "dom", "es2016", "es2017", "es2020"],
+    "types": ["@types/node"],
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
@@ -21,7 +22,6 @@
     "noImplicitReturns": false,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
-    "types": ["node"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["node_modules", "build", "dist", "example"]