From d50d74598b3bf5ac80200e9e0bc382d4852f77e0 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 10 Jul 2021 16:41:17 +0200
Subject: [PATCH] update: no vue-2 compatability (doesn't work with current
 build) * README.md

---
 README.md                                         | 9 +--------
 rollup.config.js                                  | 4 ++--
 src/App.vue                                       | 2 +-
 src/Basic.tsx                                     | 2 +-
 src/additional-components/Background/index.tsx    | 2 +-
 src/additional-components/Controls/index.tsx      | 2 +-
 src/additional-components/MiniMap/MiniMapNode.tsx | 2 +-
 src/additional-components/MiniMap/index.tsx       | 2 +-
 src/components/ConnectionLine/index.tsx           | 2 +-
 src/components/Edges/BezierEdge.tsx               | 2 +-
 src/components/Edges/EdgeAnchor.tsx               | 2 +-
 src/components/Edges/EdgeText.tsx                 | 2 +-
 src/components/Edges/SmoothStepEdge.tsx           | 2 +-
 src/components/Edges/StepEdge.tsx                 | 2 +-
 src/components/Edges/StraightEdge.tsx             | 2 +-
 src/components/Edges/wrapEdge.tsx                 | 2 +-
 src/components/Handle/index.tsx                   | 2 +-
 src/components/Nodes/DefaultNode.tsx              | 2 +-
 src/components/Nodes/InputNode.tsx                | 2 +-
 src/components/Nodes/OutputNode.tsx               | 2 +-
 src/components/Nodes/wrapNode.tsx                 | 2 +-
 src/components/UserSelection/index.tsx            | 2 +-
 src/container/EdgeRenderer/MarkerDefinitions.tsx  | 2 +-
 src/container/EdgeRenderer/index.tsx              | 2 +-
 src/container/EdgeRenderer/utils.ts               | 2 +-
 src/container/FlowRenderer/index.tsx              | 2 +-
 src/container/GraphView/index.tsx                 | 2 +-
 src/container/NodeRenderer/index.tsx              | 2 +-
 src/container/RevueFlow/index.tsx                 | 2 +-
 src/container/ZoomPane/index.tsx                  | 2 +-
 src/hooks/useGlobalKeyHandler.ts                  | 2 +-
 src/hooks/useKeyPress.ts                          | 2 +-
 src/main.ts                                       | 2 +-
 src/types/index.ts                                | 2 +-
 34 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index b860c8ec..3d98aded 100644
--- a/README.md
+++ b/README.md
@@ -33,14 +33,7 @@ import '@braks/revue-flow/dist/style.css';
 ```
 
 ## Vue2
-With Vue2 make sure you have the composition api installed as a dependency. Same goes for Nuxtjs.
-```bash
-# install revue flow
-$ yarn add @braks/revue-flow @vue/composition-api
-
-# or
-$ npm i --save @braks/revue-flowy @vue/composition-api
-```
+This doesn't work with Vue2, sorry.
 
 ## Development
 This project uses Vite for development and Rollup to create type definitions.
diff --git a/rollup.config.js b/rollup.config.js
index 438491e0..cc9fdf89 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -82,7 +82,7 @@ function createConfig(format, output, plugins = []) {
   output.sourcemap = !!process.env.SOURCE_MAP;
   output.banner = banner;
   output.externalLiveBindings = false;
-  output.globals = { 'vue-demi': 'VueDemi' };
+  output.globals = { 'vue': 'Vue' };
 
   const isProductionBuild = /\.prod\.js$/.test(output.file);
   const isGlobalBuild = format.startsWith('global');
@@ -111,7 +111,7 @@ function createConfig(format, output, plugins = []) {
   // during a single build.
   hasTSChecked = true;
 
-  const external = ['vue-demi'];
+  const external = ['vue'];
 
   const nodePlugins = [resolve(), commonjs({ include: 'node_modules/**' })];
 
diff --git a/src/App.vue b/src/App.vue
index 9392ce97..06efe323 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi';
+import { defineComponent } from 'vue';
 import Basic from './Basic';
 
 export default defineComponent({
diff --git a/src/Basic.tsx b/src/Basic.tsx
index 177f3fc1..317cbd33 100644
--- a/src/Basic.tsx
+++ b/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-demi';
+import { defineComponent, ref } from 'vue';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx
index 9ba97e56..6abff8f2 100644
--- a/src/additional-components/Background/index.tsx
+++ b/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-demi';
+import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
 import store from '../../store';
 
 export interface BackgroundProps extends HTMLAttributes {
diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index 2f4a9984..02de356c 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/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-demi';
+import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue';
 import store from '../../store';
 
 export interface ControlProps extends HTMLAttributes {
diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx
index af2da9de..9399aa9f 100644
--- a/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/src/additional-components/MiniMap/MiniMapNode.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue-demi';
+import { defineComponent, PropType } from 'vue';
 
 interface MiniMapNodeProps {
   x: number;
diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx
index 804cac15..3d4e2759 100644
--- a/src/additional-components/MiniMap/index.tsx
+++ b/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-demi';
+import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
 import store from '../../store';
 
 type StringFunc = (node: Node) => string;
diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx
index 1136ba13..ef3731d8 100644
--- a/src/components/ConnectionLine/index.tsx
+++ b/src/components/ConnectionLine/index.tsx
@@ -1,4 +1,4 @@
-import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue-demi';
+import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
 
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx
index ad271a85..40339d5c 100644
--- a/src/components/Edges/BezierEdge.tsx
+++ b/src/components/Edges/BezierEdge.tsx
@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, PropType } from 'vue-demi';
+import { computed, CSSProperties, defineComponent, PropType } from 'vue';
 
 import EdgeText from './EdgeText';
 
diff --git a/src/components/Edges/EdgeAnchor.tsx b/src/components/Edges/EdgeAnchor.tsx
index 44412a31..ef115c03 100644
--- a/src/components/Edges/EdgeAnchor.tsx
+++ b/src/components/Edges/EdgeAnchor.tsx
@@ -1,5 +1,5 @@
 import { Position } from '../../types';
-import { defineComponent, HTMLAttributes, PropType } from 'vue-demi';
+import { defineComponent, HTMLAttributes, PropType } from 'vue';
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift;
diff --git a/src/components/Edges/EdgeText.tsx b/src/components/Edges/EdgeText.tsx
index 9693d784..dbe77585 100644
--- a/src/components/Edges/EdgeText.tsx
+++ b/src/components/Edges/EdgeText.tsx
@@ -1,5 +1,5 @@
 import { EdgeTextProps, Rect } from '../../types';
-import { defineComponent, PropType, ref, watch } from 'vue-demi';
+import { defineComponent, PropType, ref, watch } from 'vue';
 
 const EdgeText = defineComponent({
   props: {
diff --git a/src/components/Edges/SmoothStepEdge.tsx b/src/components/Edges/SmoothStepEdge.tsx
index af8a30c4..c3c2d806 100644
--- a/src/components/Edges/SmoothStepEdge.tsx
+++ b/src/components/Edges/SmoothStepEdge.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue-demi';
+import { defineComponent } from 'vue';
 
 import EdgeText from './EdgeText';
 import { getMarkerEnd, getCenter } from './utils';
diff --git a/src/components/Edges/StepEdge.tsx b/src/components/Edges/StepEdge.tsx
index 9dbbcb08..19466a41 100644
--- a/src/components/Edges/StepEdge.tsx
+++ b/src/components/Edges/StepEdge.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue-demi';
+import { defineComponent } from 'vue';
 
 import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
diff --git a/src/components/Edges/StraightEdge.tsx b/src/components/Edges/StraightEdge.tsx
index 44785b0b..e0a1f910 100644
--- a/src/components/Edges/StraightEdge.tsx
+++ b/src/components/Edges/StraightEdge.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue-demi';
+import { defineComponent } from 'vue';
 
 import EdgeText from './EdgeText';
 import { getMarkerEnd } from './utils';
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index d2f0e210..b0756095 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -1,4 +1,4 @@
-import { Component, computed, defineComponent, ref } from 'vue-demi';
+import { Component, computed, defineComponent, ref } from 'vue';
 
 import store from '../../store';
 import { Edge, EdgeProps, Position, WrapEdgeProps } from '../../types';
diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
index 91a34549..e7609635 100644
--- a/src/components/Handle/index.tsx
+++ b/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-demi';
+import { defineComponent, inject, PropType } from 'vue';
 import store from '../../store';
 
 const alwaysValid = () => true;
diff --git a/src/components/Nodes/DefaultNode.tsx b/src/components/Nodes/DefaultNode.tsx
index 2bc252c8..0f541422 100644
--- a/src/components/Nodes/DefaultNode.tsx
+++ b/src/components/Nodes/DefaultNode.tsx
@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue-demi';
+import { defineComponent, PropType } from 'vue';
 
 const DefaultNode = defineComponent({
   name: 'DefaultNode',
diff --git a/src/components/Nodes/InputNode.tsx b/src/components/Nodes/InputNode.tsx
index 896bb4d1..548e68eb 100644
--- a/src/components/Nodes/InputNode.tsx
+++ b/src/components/Nodes/InputNode.tsx
@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue-demi';
+import { defineComponent, PropType } from 'vue';
 
 const InputNode = defineComponent({
   name: 'InputNode',
diff --git a/src/components/Nodes/OutputNode.tsx b/src/components/Nodes/OutputNode.tsx
index 056446c5..1a0fb900 100644
--- a/src/components/Nodes/OutputNode.tsx
+++ b/src/components/Nodes/OutputNode.tsx
@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue-demi';
+import { defineComponent, PropType } from 'vue';
 
 const OutputNode = defineComponent({
   name: 'OutputNode',
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index d8c771b4..155233b4 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -1,5 +1,5 @@
 import { Node, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, defineComponent, onMounted, provide, ref } from 'vue-demi';
+import { computed, CSSProperties, defineComponent, onMounted, provide, ref } from 'vue';
 import store from '../../store';
 
 export default (NodeComponent: any) => {
diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx
index 453b4fd1..3d7de3ae 100644
--- a/src/components/UserSelection/index.tsx
+++ b/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-demi';
+import { defineComponent, PropType } from 'vue';
 import store from '../../store';
 
 type UserSelectionProps = {
diff --git a/src/container/EdgeRenderer/MarkerDefinitions.tsx b/src/container/EdgeRenderer/MarkerDefinitions.tsx
index 4fd728dd..cd8a8b01 100644
--- a/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue-demi';
+import { defineComponent, PropType } from 'vue';
 
 interface MarkerProps {
   id: string;
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index b700990d..6dce0dfb 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -13,7 +13,7 @@ import {
   Transform,
   OnEdgeUpdateFunc
 } from '../../types';
-import { computed, CSSProperties, defineComponent, PropType } from 'vue-demi';
+import { computed, CSSProperties, defineComponent, PropType } from 'vue';
 import store from '../../store';
 
 interface EdgeRendererProps {
diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts
index b035b89a..c070e82e 100644
--- a/src/container/EdgeRenderer/utils.ts
+++ b/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-demi';
+import { Component } from 'vue';
 
 export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {
diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index bb81644c..e357fe3d 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/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-demi';
+import { defineComponent, PropType } from 'vue';
 import store from '../../store';
 
 type FlowRendererProps = Omit<
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 9677d680..85a6bb21 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -4,7 +4,7 @@ import EdgeRenderer from '../EdgeRenderer';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import { RevueFlowProps } from '../RevueFlow';
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
-import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue-demi';
+import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue';
 import store from '../../store';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 955437a0..68a511c4 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/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-demi';
+import { computed, defineComponent, PropType } from 'vue';
 import store from '../../store';
 
 interface NodeRendererProps {
diff --git a/src/container/RevueFlow/index.tsx b/src/container/RevueFlow/index.tsx
index 25e06462..aeca7911 100644
--- a/src/container/RevueFlow/index.tsx
+++ b/src/container/RevueFlow/index.tsx
@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onUpdated, PropType } from 'vue-demi';
+import { computed, CSSProperties, defineComponent, HTMLAttributes, onUpdated, PropType } from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index 76c4a8a2..179fa4bf 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/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-demi';
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
 import store from '../../store';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts
index 48f305ad..5f027a54 100644
--- a/src/hooks/useGlobalKeyHandler.ts
+++ b/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-demi';
+import { onMounted } from 'vue';
 
 interface HookParams {
   deleteKeyCode: KeyCode;
diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts
index ba5016b6..571784b1 100644
--- a/src/hooks/useKeyPress.ts
+++ b/src/hooks/useKeyPress.ts
@@ -1,6 +1,6 @@
 import { isInputDOMNode } from '../utils';
 import { KeyCode } from '../types';
-import { onMounted, ref } from 'vue-demi';
+import { onMounted, ref } from 'vue';
 
 export default (keyCode?: KeyCode): boolean => {
   const keyPressed = ref<boolean>(false);
diff --git a/src/main.ts b/src/main.ts
index 21dc9fe3..a9f733c7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue-demi';
+import { createApp } from 'vue';
 import App from './App.vue';
 
 const app = createApp(App);
diff --git a/src/types/index.ts b/src/types/index.ts
index a8de90ea..89786b24 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,5 @@
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { Component, HTMLAttributes, PropType, VNode } from 'vue-demi';
+import { Component, HTMLAttributes, PropType, VNode } from 'vue';
 
 export type ElementId = string;