feat: implement workspaces

README.md

@@ -1,6 +1,6 @@
 # Vue Flow 🌊
 
-[![vue flow](./src/assets/vue-flow.gif)](https://vueflow.dev/)
+[![vue flow](package/src/assets/vue-flow.gif)](https://vueflow.dev/)
 ![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
 [![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg)](https://david-dm.org/bcakmakoglu/vue-flow)
 [![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/vue-flow?type=dev)

cypress/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "target": "es2018"
-  },
-  "include": ["**/*"]
-}

examples/.gitignore

@@ -0,0 +1 @@
+auto-imports.d.ts

examples/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
 import ResizableNode from './ResizableNode.vue'
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '~/index'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -33,7 +33,7 @@ const updatePos = () =>
   })
 
 const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => elements.value.push({ id: '1234', position: { x: 50, y: 50 }, label: 'Foobar' })
+const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 <template>

examples/Basic/BasicOptionsAPI.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '~/index'
+import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',

examples/Basic/ResizableNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '~/index'
+import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface Props {
   id: string

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import { VueFlow, Background, BackgroundVariant, Elements } from '~/index'
+import { VueFlow, Background, BackgroundVariant, Elements } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   {

examples/CustomNode/ColorSelectorNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, Position, Connection, Edge, NodeProps } from '~/index'
+import { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {

examples/CustomNode/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
-import { ConnectionMode, Controls, Elements, isEdge, MiniMap, Node, Position, SnapGrid, useVueFlow, VueFlow } from '~/index'
+import { ConnectionMode, Controls, Elements, isEdge, MiniMap, Node, Position, SnapGrid, useVueFlow, VueFlow } from '@braks/vue-flow'
 
 const elements = ref<Elements>([])
 const bgColor = ref('#1A192B')

examples/DragNDrop/DnD.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, FlowInstance, Node, useVueFlow } from '~/index'
+import { VueFlow, FlowInstance, Node, useVueFlow } from '@braks/vue-flow'
 
 let id = 0
 const getId = () => `dndnode_${id++}`

examples/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { VueFlow, MiniMap, Controls, FlowInstance } from '~/index'
+import { VueFlow, MiniMap, Controls, FlowInstance } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()

examples/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Elements, Position } from '../../src'
+import { Elements, Position } from '../../package/src'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2

examples/Edges/CustomEdge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getBezierPath, getMarkerId, Position, EdgeProps } from '~/index'
+import { getBezierPath, getMarkerId, Position, EdgeProps } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   source: string

examples/Edges/CustomEdge2.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string

examples/Edges/EdgesExample.vue

@@ -2,7 +2,7 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '@braks/vue-flow'
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },

examples/Empty/EmptyExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

examples/Hidden/HiddenExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
 
 const isHidden = ref(false)
 

examples/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
 
 const {
   nodesDraggable,

examples/Layouting/LayoutingExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import initialElements from './initial-elements'
-import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '~/index'
+import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '@braks/vue-flow'
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))

examples/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Elements, XYPosition } from '~/index'
+import { Elements, XYPosition } from '@braks/vue-flow'
 
 const position: XYPosition = { x: 0, y: 0 }
 

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Elements } from '~/index'
+import { VueFlow, Background, Elements } from '@braks/vue-flow'
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },

examples/Nesting/GroupNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '~/index'
-import type { NodeProps } from '~/index'
+import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, transform } = useVueFlow()

examples/Nesting/Nesting.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
+import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '@braks/vue-flow'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,

examples/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
+import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/Overview/Overview.vue

@@ -14,7 +14,7 @@ import {
   Edge,
   FlowEvents,
   MarkerType,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

examples/Provider/ProviderExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
+import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 

examples/Provider/Sidebar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '~/index'
+import { useVueFlow } from '@braks/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
 
 const selectAll = () => {

examples/RGBFlow/RGBFlow.vue

@@ -2,7 +2,7 @@
 import { templateRef } from '@vueuse/core'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow } from '~/index'
+import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 
 type Colors = {
   red: number

examples/RGBFlow/RGBNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {

examples/RGBFlow/RGBOutputNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string

examples/SaveRestore/Controls.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '~/index'
+import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {

examples/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },

examples/Stress/StressExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { VueFlow, FlowInstance } from '~/index'
+import { VueFlow, FlowInstance } from '@braks/vue-flow'
 
 const instance = ref<FlowInstance>()
 const onLoad = (flowInstance: FlowInstance) => {

examples/Stress/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from '~/index'
+import { Edge, Node } from '@braks/vue-flow'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/Unidirectional/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, Position } from '~/index'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface Props {
   id: string

examples/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
-import { VueFlow, useZoomPanHelper, Elements, Node, ConnectionLineType, ConnectionMode, MarkerType } from '~/index'
+import { VueFlow, useZoomPanHelper, Elements, Node, ConnectionLineType, ConnectionMode, MarkerType } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -10,7 +10,7 @@ import {
   Edge,
   FlowEvents,
   ConnectionMode,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/UpdateNode/UpdateNodeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },

examples/Validation/CustomInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '~/index'
+import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc

examples/Validation/CustomNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, NodeProps, ValidConnectionFunc } from '~/index'
+import { Position, Handle, NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string

examples/Validation/ValidationExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '~/index'
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, edges, addEdges } = useVueFlow({
   nodes: [

examples/index.css

@@ -1,3 +1,9 @@
+/* import the required styles */
+@import '@braks/vue-flow/dist/style.css';
+
+/* import the default theme (optional) */
+@import '@braks/vue-flow/dist/theme-default.css';
+
 body {
   color: #111;
   padding: 5px;

examples/index.html

@@ -8,6 +8,6 @@
 </head>
 <body>
 <div id="root"></div>
-<script type="module" src="/examples/main.ts"></script>
+<script type="module" src="./main.ts"></script>
 </body>
 </html>

examples/main.ts

@@ -1,17 +1,10 @@
 import { createApp } from 'vue'
 import './index.css'
-import { DraggablePlugin } from '@braks/revue-draggable'
 import App from './App.vue'
 import { router } from './router'
-/* import the required styles */
-import '../src/style.css'
-
-/* import the default theme (optional) */
-import '../src/theme-default.css'
 
 const app = createApp(App)
 
 app.config.performance = true
 app.use(router)
-app.use(DraggablePlugin)
 app.mount('#root')

examples/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "examples",
+  "version": "0.0.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bcakmakoglu/vue-flow"
+  },
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
+  "homepage": "https://vueflow.dev/",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite serve"
+  },
+  "dependencies": {
+    "@braks/vue-flow": "^0.4.0-17"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.46",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vue/compiler-sfc": "3.2.22",
+    "dagre": "^0.8.5",
+    "vite": "2.5.x",
+    "vite-plugin-vue-type-imports": "^0.1.3",
+    "vue": "3.2.21",
+    "vue-router": "^4.0.12"
+  }
+}

examples/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2017",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "noEmit": true,
+    "declaration": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client"
+    ],
+    "paths": {
+      "~/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": ["src", "server"],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

examples/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueTypes from 'vite-plugin-vue-type-imports'
+import AutoImport from 'unplugin-auto-import/vite'
+
+export default defineConfig({
+  root: '.',
+  plugins: [
+    vue(),
+    vueTypes(),
+    // https://github.com/antfu/unplugin-auto-import
+    AutoImport({
+      imports: ['vue', '@vueuse/core'],
+      dts: 'auto-imports.d.ts',
+    }),
+  ],
+  optimizeDeps: {
+    include: ['@braks/vue-flow'],
+  },
+})

package.json

@@ -1,86 +1,28 @@
 {
-  "name": "@braks/vue-flow",
-  "version": "0.4.0-17",
-  "private": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/bcakmakoglu/vue-flow"
-  },
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
-  "homepage": "https://vueflow.dev/",
-  "main": "./dist/vue-flow.cjs.js",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/vue-flow.es.js",
-  "unpkg": "./dist/vue-flow.iife.js",
-  "jsdelivr": "./dist/vue-flow.iife.js",
-  "files": [
-    "dist"
-  ],
+  "name": "vue-flow",
+  "version": "0.0.0",
+  "private": true,
+  "workspaces": ["tests", "examples", "package"],
   "scripts": {
     "prepare": "ts-patch install -s",
-    "dev": "vite",
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly && tsc -p tsconfig.build.json && yarn theme",
-    "postbuild": "shx rm -rf tmp && yarn typedocs",
-    "prepublishOnly": "yarn build",
-    "test": "cypress run-ct",
-    "test:open": "cypress open-ct",
+    "dev": "yarn --cwd examples dev",
+    "build": "yarn --cwd package build",
+    "postbuild": "yarn typedoc",
+    "test": "yarn --cwd tests test",
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
-    "theme": "postcss src/theme-default.css -o dist/theme-default.css",
-    "typedocs": "typedoc --tsconfig ./tsconfig.docs.json dist/index.d.ts --out typedocs"
-  },
-  "dependencies": {
-    "@braks/revue-draggable": "^0.4.2",
-    "@types/d3": "^7.1.0",
-    "@vueuse/core": "^7.5.5",
-    "d3": "^7.1.1",
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
+    "typedoc": "typedoc --tsconfig ./package/tsconfig.docs.json ./package/dist/index.d.ts --out typedocs"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
-    "@cypress/vite-dev-server": "^2.2.1",
-    "@cypress/vue": "^3.0.5",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@types/dagre": "^0.7.46",
-    "@vitejs/plugin-vue": "^2.2.0",
-    "@vue/compiler-sfc": "3.2.22",
-    "autoprefixer": "^10.3.7",
-    "cypress": "8.5.0",
-    "dagre": "^0.8.5",
-    "esbuild": "0.13.4",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-prettier": "^3.4.1",
-    "np": "^7.5.0",
-    "postcss": "^8.4.8",
-    "postcss-cli": "^9.1.0",
-    "postcss-nested": "^5.0.6",
     "prettier": "^2.4.1",
     "shx": "^0.3.4",
     "ts-patch": "^2.0.1",
     "typedoc": "^0.22.13",
     "typescript": "^4.5.5",
-    "typescript-transform-paths": "^3.3.1",
-    "unplugin-auto-import": "^0.5.11",
-    "vite": "2.5.x",
-    "vite-plugin-vue-type-imports": "^0.1.3",
-    "vite-svg-loader": "^2.2.0",
-    "vue": "3.2.21",
-    "vue-router": "^4.0.12",
-    "vue-tsc": "^0.29.5"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.21"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "http://registry.npmjs.org/"
-  },
-  "np": {
-    "branch": "master",
-    "yarn": true,
-    "message": "v%s"
+    "typescript-transform-paths": "^3.3.1"
   }
 }

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@braks/vue-flow",
+  "version": "0.4.0-17",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bcakmakoglu/vue-flow"
+  },
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
+  "homepage": "https://vueflow.dev/",
+  "main": "./dist/vue-flow.cjs.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/vue-flow.es.js",
+  "unpkg": "./dist/vue-flow.iife.js",
+  "jsdelivr": "./dist/vue-flow.iife.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "ts-patch install -s",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly && tsc -p tsconfig.build.json && yarn theme",
+    "postbuild": "shx rm -rf tmp",
+    "prepublishOnly": "yarn build",
+    "test": "cypress run-ct",
+    "test:open": "cypress open-ct",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
+    "theme": "postcss src/theme-default.css -o dist/theme-default.css"
+  },
+  "dependencies": {
+    "@braks/revue-draggable": "^0.4.2",
+    "@types/d3": "^7.1.0",
+    "@vueuse/core": "^7.5.5",
+    "d3": "^7.1.1",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vue/compiler-sfc": "3.2.22",
+    "autoprefixer": "^10.3.7",
+    "np": "^7.5.0",
+    "postcss": "^8.4.8",
+    "postcss-cli": "^9.1.0",
+    "postcss-nested": "^5.0.6",
+    "unplugin-auto-import": "^0.5.11",
+    "vite": "2.5.x",
+    "vite-plugin-vue-type-imports": "^0.1.3",
+    "vite-svg-loader": "^2.2.0",
+    "vue": "3.2.21",
+    "vue-tsc": "^0.29.5"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.21"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "http://registry.npmjs.org/"
+  },
+  "np": {
+    "branch": "master",
+    "yarn": true,
+    "message": "v%s"
+  }
+}

package/src/auto-imports.d.ts

@@ -42,6 +42,7 @@ declare global {
   const onDeactivated: typeof import('vue')['onDeactivated']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
   const onMounted: typeof import('vue')['onMounted']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
@@ -55,6 +56,8 @@ declare global {
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
@@ -88,6 +91,7 @@ declare global {
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
   const useClamp: typeof import('@vueuse/core')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
@@ -125,6 +129,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
@@ -145,6 +150,7 @@ declare global {
   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
   const useNow: typeof import('@vueuse/core')['useNow']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']