fix: try to deploy as package...

package.json

@@ -17,10 +17,10 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build && yarn build:dist",
     "build:dist": "rollup -c --environment NODE_ENV:production && postcss src/*.css --dir dist",
     "serve": "vite preview",
-    "prepublishOnly": "yarn build:dist",
+    "prepublishOnly": "yarn build",
     "test": "exit 0;",
     "lint:js": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
     "lint": "yarn lint:js"
@@ -28,7 +28,7 @@
   "dependencies": {
     "d3": "^7.0.0",
     "pinia": "^2.0.0-beta.3",
-    "vue": "^3.0.5"
+    "vue-demi": "^0.10.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -65,8 +65,18 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.3.5",
     "vite": "^2.3.8",
+    "vue": "^3.0.5",
     "vue-tsc": "^0.0.24"
   },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public",
     "registry": "http://registry.npmjs.org/"

rollup.config.js

@@ -58,7 +58,7 @@ export const baseConfig = ({ mainFile = pkg.main, moduleFile = pkg.module, injec
     babel({
       extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
       exclude: 'node_modules/**',
-      babelHelpers: 'bundled'
+      babelHelpers: 'inline'
     })
   ]
 });

src/App.vue

@@ -1,18 +1,15 @@
 <template>
   <div id="app">
     <h1>Revue Flow</h1>
-    <Basic style="height: 75vh; background: #0f0f0f" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import Basic from './Basic';
+import { defineComponent } from 'vue-demi';
 
 export default defineComponent({
   name: 'App',
   components: {
-    Basic
   },
   data() {
     return {

src/Basic.tsx

@@ -2,7 +2,7 @@ import { Connection, Edge, Elements, FlowElement, Node, OnLoadParams } from './t
 import { addEdge, isNode, removeElements } from './utils/graph';
 import RevueFlow from './container/RevueFlow';
 import { MiniMap, Controls, Background } from './additional-components';
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref } from 'vue-demi';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);

src/additional-components/Background/index.tsx

@@ -1,6 +1,6 @@
 import { BackgroundVariant } from '../../types';
 import { createGridDotsPath, createGridLinesPath } from './utils';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
+import { computed, defineComponent, HTMLAttributes, PropType } from 'vue-demi';
 import store from '../../store';
 
 export interface BackgroundProps extends HTMLAttributes {

src/additional-components/Controls/index.tsx

@@ -1,6 +1,6 @@
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 import { FitViewParams } from '../../types';
-import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue';
+import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue-demi';
 import store from '../../store';
 
 export interface ControlProps extends HTMLAttributes {

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 interface MiniMapNodeProps {
   x: number;

src/additional-components/MiniMap/index.tsx

@@ -1,7 +1,7 @@
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
 import { Node, Rect } from '../../types';
 import MiniMapNode from './MiniMapNode';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
+import { computed, defineComponent, HTMLAttributes, PropType } from 'vue-demi';
 import store from '../../store';
 
 type StringFunc = (node: Node) => string;

src/components/ConnectionLine/index.tsx

@@ -1,4 +1,4 @@
-import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
+import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue-demi';
 
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';

src/components/Edges/BezierEdge.tsx

@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, PropType } from 'vue';
+import { computed, CSSProperties, defineComponent, PropType } from 'vue-demi';
 
 import EdgeText from './EdgeText';
 

src/components/Edges/EdgeAnchor.tsx

@@ -1,5 +1,5 @@
 import { Position } from '../../types';
-import { defineComponent, HTMLAttributes, PropType } from 'vue';
+import { defineComponent, HTMLAttributes, PropType } from 'vue-demi';
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift;

src/components/Edges/EdgeText.tsx

@@ -1,5 +1,5 @@
 import { EdgeTextProps, Rect } from '../../types';
-import { defineComponent, PropType, ref, watch } from 'vue';
+import { defineComponent, PropType, ref, watch } from 'vue-demi';
 
 const EdgeText = defineComponent({
   props: {

src/components/Edges/SmoothStepEdge.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 
 import EdgeText from './EdgeText';
 import { getMarkerEnd, getCenter } from './utils';

src/components/Edges/StepEdge.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 
 import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';

src/components/Edges/StraightEdge.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 
 import EdgeText from './EdgeText';
 import { getMarkerEnd } from './utils';

src/components/Edges/wrapEdge.tsx

@@ -1,4 +1,4 @@
-import { Component, computed, defineComponent, ref } from 'vue';
+import { Component, computed, defineComponent, ref } from 'vue-demi';
 
 import store from '../../store';
 import { Edge, EdgeProps, Position, WrapEdgeProps } from '../../types';

src/components/Handle/index.tsx

@@ -1,6 +1,6 @@
 import { Connection, ElementId, Position } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
-import { defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue-demi';
 import store from '../../store';
 
 const alwaysValid = () => true;

src/components/Nodes/DefaultNode.tsx

@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 const DefaultNode = defineComponent({
   name: 'DefaultNode',

src/components/Nodes/InputNode.tsx

@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 const InputNode = defineComponent({
   name: 'InputNode',

src/components/Nodes/OutputNode.tsx

@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 const OutputNode = defineComponent({
   name: 'OutputNode',

src/components/Nodes/wrapNode.tsx

@@ -1,5 +1,5 @@
 import { Node, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, defineComponent, onMounted, provide, ref } from 'vue';
+import { computed, CSSProperties, defineComponent, onMounted, provide, ref } from 'vue-demi';
 import store from '../../store';
 
 export default (NodeComponent: any) => {

src/components/UserSelection/index.tsx

@@ -2,7 +2,7 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 import { XYPosition } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 type UserSelectionProps = {

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 interface MarkerProps {
   id: string;

src/container/EdgeRenderer/index.tsx

@@ -13,7 +13,7 @@ import {
   Transform,
   OnEdgeUpdateFunc
 } from '../../types';
-import { computed, CSSProperties, defineComponent, PropType } from 'vue';
+import { computed, CSSProperties, defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 interface EdgeRendererProps {

src/container/EdgeRenderer/utils.ts

@@ -3,7 +3,7 @@ import wrapEdge from '../../components/Edges/wrapEdge';
 import { rectToBox } from '../../utils/graph';
 
 import { EdgeTypesType, EdgeProps, Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge } from '../../types';
-import { Component } from 'vue';
+import { Component } from 'vue-demi';
 
 export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {

src/container/FlowRenderer/index.tsx

@@ -1,7 +1,7 @@
 import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 type FlowRendererProps = Omit<

src/container/GraphView/index.tsx

@@ -2,13 +2,13 @@ import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
-import { ReactFlowProps } from '../RevueFlow';
+import { RevueFlowProps } from '../RevueFlow';
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
-import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue';
+import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue-demi';
 import store from '../../store';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
-export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'elements'> {
+export interface GraphViewProps extends Omit<RevueFlowProps, 'onSelectionChange' | 'elements'> {
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   selectionKeyCode: KeyCode;

src/container/NodeRenderer/index.tsx

@@ -1,6 +1,6 @@
 import { getNodesInside } from '../../utils/graph';
 import { Node, NodeTypesType, Edge } from '../../types';
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 interface NodeRendererProps {

src/container/RevueFlow/index.tsx

@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onUpdated, PropType } from 'vue';
+import { computed, CSSProperties, defineComponent, HTMLAttributes, onUpdated, PropType } from 'vue-demi';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -45,7 +45,7 @@ const defaultEdgeTypes = {
   smoothstep: SmoothStepEdge
 };
 
-export interface ReactFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
+export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
   elements: Elements;
   onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
@@ -123,331 +123,331 @@ const RevueFlow = defineComponent({
   components: { GraphView },
   props: {
     elements: {
-      type: Object as PropType<ReactFlowProps['elements']>,
+      type: Object as PropType<RevueFlowProps['elements']>,
       required: true
     },
     nodeTypesId: {
-      type: String as PropType<ReactFlowProps['nodeTypesId']>,
+      type: String as PropType<RevueFlowProps['nodeTypesId']>,
       required: false,
       default: '1'
     },
     edgeTypesId: {
-      type: String as PropType<ReactFlowProps['edgeTypesId']>,
+      type: String as PropType<RevueFlowProps['edgeTypesId']>,
       required: false,
       default: '1'
     },
     nodeTypes: {
-      type: Object as PropType<ReactFlowProps['nodeTypes']>,
+      type: Object as PropType<RevueFlowProps['nodeTypes']>,
       required: false,
       default: () => defaultNodeTypes
     },
     edgeTypes: {
-      type: Object as PropType<ReactFlowProps['edgeTypes']>,
+      type: Object as PropType<RevueFlowProps['edgeTypes']>,
       required: false,
       default: () => defaultEdgeTypes
     },
     onMove: {
-      type: Function() as PropType<ReactFlowProps['onMove']>,
+      type: Function() as PropType<RevueFlowProps['onMove']>,
       required: false,
       default: undefined as any
     },
     onMoveStart: {
-      type: Function() as PropType<ReactFlowProps['onMoveStart']>,
+      type: Function() as PropType<RevueFlowProps['onMoveStart']>,
       required: false,
       default: undefined as any
     },
     onMoveEnd: {
-      type: Function() as PropType<ReactFlowProps['onMoveEnd']>,
+      type: Function() as PropType<RevueFlowProps['onMoveEnd']>,
       required: false,
       default: undefined as any
     },
     onLoad: {
-      type: Function() as PropType<ReactFlowProps['onLoad']>,
+      type: Function() as PropType<RevueFlowProps['onLoad']>,
       required: false,
       default: undefined as any
     },
     onElementClick: {
-      type: Function() as PropType<ReactFlowProps['onElementClick']>,
+      type: Function() as PropType<RevueFlowProps['onElementClick']>,
       required: false,
       default: undefined as any
     },
     onNodeDoubleClick: {
-      type: Function() as PropType<ReactFlowProps['onNodeDoubleClick']>,
+      type: Function() as PropType<RevueFlowProps['onNodeDoubleClick']>,
       required: false,
       default: undefined as any
     },
     onEdgeDoubleClick: {
-      type: Function() as PropType<ReactFlowProps['onEdgeDoubleClick']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeDoubleClick']>,
       required: false,
       default: undefined as any
     },
     onNodeMouseEnter: {
-      type: Function() as PropType<ReactFlowProps['onNodeMouseEnter']>,
+      type: Function() as PropType<RevueFlowProps['onNodeMouseEnter']>,
       required: false,
       default: undefined as any
     },
     onNodeMouseMove: {
-      type: Function() as PropType<ReactFlowProps['onNodeMouseMove']>,
+      type: Function() as PropType<RevueFlowProps['onNodeMouseMove']>,
       required: false,
       default: undefined as any
     },
     onNodeMouseLeave: {
-      type: Function() as PropType<ReactFlowProps['onNodeMouseLeave']>,
+      type: Function() as PropType<RevueFlowProps['onNodeMouseLeave']>,
       required: false,
       default: undefined as any
     },
     onNodeContextMenu: {
-      type: Function() as PropType<ReactFlowProps['onNodeContextMenu']>,
+      type: Function() as PropType<RevueFlowProps['onNodeContextMenu']>,
       required: false,
       default: undefined as any
     },
     onNodeDragStart: {
-      type: Function() as PropType<ReactFlowProps['onNodeDragStart']>,
+      type: Function() as PropType<RevueFlowProps['onNodeDragStart']>,
       required: false,
       default: undefined as any
     },
     onNodeDrag: {
-      type: Function() as PropType<ReactFlowProps['onNodeDrag']>,
+      type: Function() as PropType<RevueFlowProps['onNodeDrag']>,
       required: false,
       default: undefined as any
     },
     onNodeDragStop: {
-      type: Function() as PropType<ReactFlowProps['onNodeDragStop']>,
+      type: Function() as PropType<RevueFlowProps['onNodeDragStop']>,
       required: false,
       default: undefined as any
     },
     onSelectionContextMenu: {
-      type: Function() as PropType<ReactFlowProps['onSelectionContextMenu']>,
+      type: Function() as PropType<RevueFlowProps['onSelectionContextMenu']>,
       required: false,
       default: undefined as any
     },
     onElementsRemove: {
-      type: Function() as PropType<ReactFlowProps['onElementsRemove']>,
+      type: Function() as PropType<RevueFlowProps['onElementsRemove']>,
       required: false,
       default: undefined as any
     },
     onConnect: {
-      type: Function() as PropType<ReactFlowProps['onConnect']>,
+      type: Function() as PropType<RevueFlowProps['onConnect']>,
       required: false,
       default: undefined as any
     },
     onConnectStart: {
-      type: Function() as PropType<ReactFlowProps['onConnectStart']>,
+      type: Function() as PropType<RevueFlowProps['onConnectStart']>,
       required: false,
       default: undefined as any
     },
     onConnectStop: {
-      type: Function() as PropType<ReactFlowProps['onConnectStop']>,
+      type: Function() as PropType<RevueFlowProps['onConnectStop']>,
       required: false,
       default: undefined as any
     },
     onConnectEnd: {
-      type: Function() as PropType<ReactFlowProps['onConnectEnd']>,
+      type: Function() as PropType<RevueFlowProps['onConnectEnd']>,
       required: false,
       default: undefined as any
     },
     connectionMode: {
-      type: String as PropType<ReactFlowProps['connectionMode']>,
+      type: String as PropType<RevueFlowProps['connectionMode']>,
       required: false,
       default: ConnectionMode.Strict
     },
     connectionLineType: {
-      type: String as PropType<ReactFlowProps['connectionLineType']>,
+      type: String as PropType<RevueFlowProps['connectionLineType']>,
       required: false,
       default: ConnectionLineType.Bezier
     },
     connectionLineStyle: {
-      type: Object as PropType<ReactFlowProps['connectionLineStyle']>,
+      type: Object as PropType<RevueFlowProps['connectionLineStyle']>,
       required: false,
       default: () => ({} as CSSProperties)
     },
     connectionLineComponent: {
-      type: Object as PropType<ReactFlowProps['connectionLineComponent']>,
+      type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
       required: false,
       default: undefined as any
     },
     selectionKeyCode: {
-      type: (Number || String) as PropType<ReactFlowProps['selectionKeyCode']>,
+      type: (Number || String) as PropType<RevueFlowProps['selectionKeyCode']>,
       required: false,
       default: 'Shift'
     },
     multiSelectionKeyCode: {
-      type: (Number || String) as PropType<ReactFlowProps['multiSelectionKeyCode']>,
+      type: (Number || String) as PropType<RevueFlowProps['multiSelectionKeyCode']>,
       required: false,
       default: 'Meta'
     },
     zoomActivationKeyCode: {
-      type: (Number || String) as PropType<ReactFlowProps['zoomActivationKeyCode']>,
+      type: (Number || String) as PropType<RevueFlowProps['zoomActivationKeyCode']>,
       required: false,
       default: 'Meta'
     },
     deleteKeyCode: {
-      type: (Number || String) as PropType<ReactFlowProps['deleteKeyCode']>,
+      type: (Number || String) as PropType<RevueFlowProps['deleteKeyCode']>,
       required: false,
       default: 'Backspace'
     },
     snapToGrid: {
-      type: Boolean as PropType<ReactFlowProps['snapToGrid']>,
+      type: Boolean as PropType<RevueFlowProps['snapToGrid']>,
       required: false,
       default: false
     },
     snapGrid: {
-      type: Array as unknown as PropType<ReactFlowProps['snapGrid']>,
+      type: Array as unknown as PropType<RevueFlowProps['snapGrid']>,
       required: false,
       default: () => [15, 15]
     },
     onlyRenderVisibleElements: {
-      type: Boolean as PropType<ReactFlowProps['onlyRenderVisibleElements']>,
+      type: Boolean as PropType<RevueFlowProps['onlyRenderVisibleElements']>,
       required: false,
       default: false
     },
     nodesDraggable: {
-      type: Boolean as PropType<ReactFlowProps['nodesDraggable']>,
+      type: Boolean as PropType<RevueFlowProps['nodesDraggable']>,
       required: false,
       default: undefined
     },
     nodesConnectable: {
-      type: Boolean as PropType<ReactFlowProps['nodesConnectable']>,
+      type: Boolean as PropType<RevueFlowProps['nodesConnectable']>,
       required: false,
       default: undefined
     },
     elementsSelectable: {
-      type: Boolean as PropType<ReactFlowProps['elementsSelectable']>,
+      type: Boolean as PropType<RevueFlowProps['elementsSelectable']>,
       required: false,
       default: undefined
     },
     selectNodesOnDrag: {
-      type: Boolean as PropType<ReactFlowProps['selectNodesOnDrag']>,
+      type: Boolean as PropType<RevueFlowProps['selectNodesOnDrag']>,
       required: false,
       default: true
     },
     minZoom: {
-      type: Number as PropType<ReactFlowProps['minZoom']>,
+      type: Number as PropType<RevueFlowProps['minZoom']>,
       required: false,
       default: undefined
     },
     maxZoom: {
-      type: Number as PropType<ReactFlowProps['maxZoom']>,
+      type: Number as PropType<RevueFlowProps['maxZoom']>,
       required: false,
       default: undefined
     },
     defaultZoom: {
-      type: Number as PropType<ReactFlowProps['defaultZoom']>,
+      type: Number as PropType<RevueFlowProps['defaultZoom']>,
       required: false,
       default: 1
     },
     defaultPosition: {
-      type: Array as unknown as PropType<ReactFlowProps['defaultPosition']>,
+      type: Array as unknown as PropType<RevueFlowProps['defaultPosition']>,
       required: false,
       default: () => [0, 0]
     },
     translateExtent: {
-      type: Array as unknown as PropType<ReactFlowProps['translateExtent']>,
+      type: Array as unknown as PropType<RevueFlowProps['translateExtent']>,
       required: false,
       default: undefined
     },
     nodeExtent: {
-      type: Array as unknown as PropType<ReactFlowProps['nodeExtent']>,
+      type: Array as unknown as PropType<RevueFlowProps['nodeExtent']>,
       required: false,
       default: undefined
     },
     arrowHeadColor: {
-      type: String as PropType<ReactFlowProps['arrowHeadColor']>,
+      type: String as PropType<RevueFlowProps['arrowHeadColor']>,
       required: false,
       default: '#b1b1b7'
     },
     markerEndId: {
-      type: String as PropType<ReactFlowProps['markerEndId']>,
+      type: String as PropType<RevueFlowProps['markerEndId']>,
       required: false,
       default: undefined
     },
     zoomOnScroll: {
-      type: Boolean as PropType<ReactFlowProps['zoomOnScroll']>,
+      type: Boolean as PropType<RevueFlowProps['zoomOnScroll']>,
       required: false,
       default: true
     },
     zoomOnPinch: {
-      type: Boolean as PropType<ReactFlowProps['zoomOnPinch']>,
+      type: Boolean as PropType<RevueFlowProps['zoomOnPinch']>,
       required: false,
       default: true
     },
     panOnScroll: {
-      type: Boolean as PropType<ReactFlowProps['panOnScroll']>,
+      type: Boolean as PropType<RevueFlowProps['panOnScroll']>,
       required: false,
       default: false
     },
     panOnScrollSpeed: {
-      type: Number as PropType<ReactFlowProps['panOnScrollSpeed']>,
+      type: Number as PropType<RevueFlowProps['panOnScrollSpeed']>,
       required: false,
       default: 0.5
     },
     panOnScrollMode: {
-      type: String as PropType<ReactFlowProps['panOnScrollMode']>,
+      type: String as PropType<RevueFlowProps['panOnScrollMode']>,
       required: false,
       default: PanOnScrollMode.Free
     },
     zoomOnDoubleClick: {
-      type: Boolean as PropType<ReactFlowProps['zoomOnDoubleClick']>,
+      type: Boolean as PropType<RevueFlowProps['zoomOnDoubleClick']>,
       required: false,
       default: true
     },
     paneMoveable: {
-      type: Boolean as PropType<ReactFlowProps['paneMoveable']>,
+      type: Boolean as PropType<RevueFlowProps['paneMoveable']>,
       required: false,
       default: true
     },
     onPaneClick: {
-      type: Function() as PropType<ReactFlowProps['onPaneClick']>,
+      type: Function() as PropType<RevueFlowProps['onPaneClick']>,
       required: false,
       default: undefined as any
     },
     onPaneScroll: {
-      type: Function() as PropType<ReactFlowProps['onPaneScroll']>,
+      type: Function() as PropType<RevueFlowProps['onPaneScroll']>,
       required: false,
       default: undefined as any
     },
     onPaneContextMenu: {
-      type: Function() as PropType<ReactFlowProps['onPaneContextMenu']>,
+      type: Function() as PropType<RevueFlowProps['onPaneContextMenu']>,
       required: false,
       default: undefined as any
     },
     onEdgeUpdate: {
-      type: Function() as PropType<ReactFlowProps['onEdgeUpdate']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeUpdate']>,
       required: false,
       default: undefined as any
     },
     onEdgeMouseEnter: {
-      type: Function() as PropType<ReactFlowProps['onEdgeMouseEnter']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeMouseEnter']>,
       required: false,
       default: undefined as any
     },
     onEdgeContextMenu: {
-      type: Function() as PropType<ReactFlowProps['onEdgeContextMenu']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeContextMenu']>,
       required: false,
       default: undefined as any
     },
     onEdgeMouseMove: {
-      type: Function() as PropType<ReactFlowProps['onEdgeMouseMove']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeMouseMove']>,
       required: false,
       default: undefined as any
     },
     onEdgeMouseLeave: {
-      type: Function() as PropType<ReactFlowProps['onEdgeMouseLeave']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeMouseLeave']>,
       required: false,
       default: undefined as any
     },
     onEdgeUpdateEnd: {
-      type: Function() as PropType<ReactFlowProps['onEdgeUpdateEnd']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
       required: false,
       default: undefined as any
     },
     onEdgeUpdateStart: {
-      type: Function() as PropType<ReactFlowProps['onEdgeUpdateStart']>,
+      type: Function() as PropType<RevueFlowProps['onEdgeUpdateStart']>,
       required: false,
       default: undefined as any
     },
     edgeUpdaterRadius: {
-      type: Number as PropType<ReactFlowProps['edgeUpdaterRadius']>,
+      type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
       required: false,
       default: 10
     }

src/container/ZoomPane/index.tsx

@@ -3,7 +3,7 @@ import { select, pointer } from 'd3-selection';
 
 import { clamp } from '../../utils';
 import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
-import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue-demi';
 import store from '../../store';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';

src/hooks/useGlobalKeyHandler.ts

@@ -2,7 +2,7 @@ import useKeyPress from './useKeyPress';
 import { isNode, getConnectedEdges } from '../utils/graph';
 import { Elements, KeyCode, ElementId, FlowElement } from '../types';
 import store from '../store';
-import { onMounted } from 'vue';
+import { onMounted } from 'vue-demi';
 
 interface HookParams {
   deleteKeyCode: KeyCode;

src/hooks/useKeyPress.ts

@@ -1,6 +1,6 @@
 import { isInputDOMNode } from '../utils';
 import { KeyCode } from '../types';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue-demi';
 
 export default (keyCode?: KeyCode): boolean => {
   const keyPressed = ref<boolean>(false);

src/index.ts

@@ -25,8 +25,3 @@ export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternal
 
 export * from './additional-components';
 export * from './types';
-
-export { ReactFlowProps } from './container/RevueFlow';
-export { MiniMapProps } from './additional-components/MiniMap';
-export { ControlProps } from './additional-components/Controls';
-export { BackgroundProps } from './additional-components/Background';

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp } from 'vue-demi';
 import App from './App.vue';
 import { createPinia } from 'pinia';
 

src/shims-vue.d.ts

@@ -1,5 +1,5 @@
 declare module '*.vue' {
-  import { DefineComponent } from 'vue';
+  import { DefineComponent } from 'vue-demi';
   // eslint-disable-next-line @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>;
   export default component;

src/store/configure-store.ts

@@ -1,9 +1,18 @@
-import { defineStore, StoreDefinition } from 'pinia';
+import { createPinia, defineStore, StoreDefinition } from 'pinia';
 import isEqual from 'fast-deep-equal';
 import { Edge, Node, NodeDiffUpdate, ReactFlowState, RevueFlowActionsTree, XYPosition } from '../types';
-import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '../utils/graph';
+import {
+  getConnectedEdges,
+  getNodesInside,
+  getRectOfNodes,
+  isEdge,
+  isNode,
+  parseEdge,
+  parseNode
+} from '../utils/graph';
 import { clampPosition, getDimensions } from '../utils';
 import { getHandleBounds } from '../components/Nodes/utils';
+import { provide } from 'vue-demi';
 
 type NextElements = {
   nextNodes: Node[];
@@ -13,6 +22,7 @@ type NextElements = {
 export default function configureStore(
   preloadedState: ReactFlowState
 ): StoreDefinition<'revue-flow', ReactFlowState, any, RevueFlowActionsTree> {
+  provide(Symbol('pinia'), createPinia());
   return defineStore({
     id: 'revue-flow',
     state: () => preloadedState,
@@ -189,8 +199,8 @@ export default function configureStore(
         const selectedElementsChanged = !isEqual(nextSelectedElements, this.selectedElements);
         const selectedElementsUpdate = selectedElementsChanged
           ? {
-              selectedElements: nextSelectedElements.length > 0 ? nextSelectedElements : null
-            }
+            selectedElements: nextSelectedElements.length > 0 ? nextSelectedElements : null
+          }
           : {};
 
         this.userSelectionRect = nextUserSelectRect;

src/types/index.ts

@@ -1,5 +1,5 @@
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { Component, HTMLAttributes, PropType, VNode } from 'vue';
+import { Component, HTMLAttributes, PropType, VNode } from 'vue-demi';
 
 export type ElementId = string;
 

vite.config.ts

@@ -1,11 +1,35 @@
 import { defineConfig } from 'vite';
+import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  build: { sourcemap: 'inline' },
-  esbuild: { sourcemap: 'both' },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'RevueFlow'
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue'
+        },
+        dir: 'dist',
+        sourcemap: true,
+        exports: 'named'
+      },
+      inlineDynamicImports: true
+    }
+  },
+  optimizeDeps: {
+    exclude: ['vue-demi']
+  },
   plugins: [
     vue(),
     vueJsx({

yarn.lock

@@ -6599,6 +6599,11 @@ vite@^2.3.8:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.10.1.tgz#229b81395510f02f4ee255344557a12cc0120930"
+  integrity sha512-L6Oi+BvmMv6YXvqv5rJNCFHEKSVu7llpWWJczqmAQYOdmPPw5PNYoz1KKS//Fxhi+4QP64dsPjtmvnYGo1jemA==
+
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.1.1, vue-eslint-parser@^7.6.0:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz#01ea1a2932f581ff244336565d712801f8f72561"