update(dist): Remove rollup and use vite to build lib

* Remove custom tsconfig paths to avoid resolving issues on published package

README.md

@@ -1,5 +1,5 @@
 # Vue Flow
-[![vue flow](./assets/vue-flow.gif)](https://reactflow.dev/)
+[![vue flow](./src/assets/vue-flow.gif)](https://reactflow.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)

docs/app.vue

@@ -1,13 +1,11 @@
 <template>
-  <NuxtLayout name="default">
+  <Header />
-    <Header />
+  <div class="h-full flex flex-row">
-    <div class="h-full flex flex-row">
+    <Sidebar />
-      <Sidebar />
+    <div id="vue-flow-docs" class="flex-1">
-      <div id="vue-flow-docs" class="flex-1">
+      <NuxtPage />
-        <NuxtPage />
-      </div>
     </div>
-  </NuxtLayout>
+  </div>
 </template>
 <style>
 @import 'assets/index.css';

docs/components/Sidebar.vue

@@ -1,15 +1,129 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const examples = [
+  {
+    path: '/',
+    label: 'Overview',
+  },
+  {
+    path: '/basic',
+    label: 'Basic',
+  },
+  {
+    path: '/custom-connectionline',
+    label: 'Custom Connectionline',
+  },
+  {
+    path: '/custom-node',
+    label: 'Custom Node',
+  },
+  {
+    path: '/drag-n-drop',
+    label: 'Drag and Drop',
+  },
+  {
+    path: '/edges',
+    label: 'Edges',
+  },
+  {
+    path: '/button-edge',
+    label: 'Edge with Button',
+  },
+  {
+    path: '/edge-types',
+    label: 'Edge Types',
+  },
+  {
+    path: '/empty',
+    label: 'Empty',
+  },
+  {
+    path: '/hidden',
+    label: 'Hidden',
+  },
+  {
+    path: '/interaction',
+    label: 'Interaction',
+  },
+  {
+    path: '/layouting',
+    label: 'Layouting',
+  },
+  {
+    path: '/multi-flows',
+    label: 'Multi Flows',
+  },
+  {
+    path: '/node-type-change',
+    label: 'Node Type Change',
+  },
+  {
+    path: '/node-types-id-change',
+    label: 'Node Types ID Change',
+  },
+  {
+    path: '/provider',
+    label: 'Provider',
+  },
+  {
+    path: '/save-restore',
+    label: 'Save and Restore',
+  },
+  {
+    path: '/stress',
+    label: 'Stress',
+  },
+  {
+    path: '/switch',
+    label: 'Switch',
+  },
+  {
+    path: '/unidirectional',
+    label: 'Unidirectional',
+  },
+  {
+    path: '/updateable-edge',
+    label: 'Updatable Edge',
+  },
+  {
+    path: '/update-node',
+    label: 'Update Node',
+  },
+  {
+    path: '/update-node-internals',
+    label: 'Update Node Internals',
+  },
+  {
+    path: '/validation',
+    label: 'Validation',
+  },
+  {
+    path: '/zoom-pan-helper',
+    label: 'Zoom Pan Helper',
+  },
+]
+</script>
 <template>
   <aside>
-    <div class="description">You can drag these nodes to the pane on the left.</div>
+    <div class="flex flex-col justify-center items-start">
+      <router-link
+        v-for="(example, i) of examples"
+        :key="`example-link-${i}`"
+        class="example-link"
+        :to="`/examples${example.path}`"
+      >
+        {{ example.label }}
+      </router-link>
+    </div>
     <slot></slot>
   </aside>
 </template>
 <style>
+.example-link {
+  @apply text-md text-white hover:text-black mt-2 p-2 underline;
+}
 aside {
   border-right: 1px solid #eee;
   padding: 15px 10px;
-  background: #fff;
   height: 100%; /* Full-height: remove this if you want "auto" height */
   width: 280px; /* Set the width of the sidebar */
   overflow-x: hidden; /* Disable horizontal scroll */

docs/layouts/default.vue

@@ -1,4 +0,0 @@
-<script lang="ts" setup></script>
-<template>
-  <slot></slot>
-</template>

package.json

@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "dev": "vue-tsc --noEmit && vite",
-    "build": "vite build && vue-dts-gen \"./src/**/*.{ts,vue}\"",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
     "serve": "vite preview",
     "prepublishOnly": "pnpm build",
     "test": "exit 0;",
@@ -44,8 +44,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
-    "@rollup/plugin-commonjs": "^19.0.2",
-    "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^2.4.2",
     "@types/dagre": "^0.7.46",
     "@vitejs/plugin-vue": "^1.9.3",
@@ -59,13 +57,11 @@
     "pnpm": "^6.18.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.4.1",
-    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.4.4",
     "unplugin-auto-import": "^0.4.12",
     "vite": "^2.6.10",
     "vite-svg-loader": "^2.2.0",
     "vue": "^3.2.20",
-    "vue-dts-gen": "^0.3.0",
     "vue-tsc": "^0.28.7"
   },
   "peerDependencies": {

src/additional-components/Background/Background.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { SVGAttributes } from 'vue'
-import { BackgroundVariant } from '~/types'
+import { BackgroundVariant } from '../../types'
-import { useStore } from '~/composables'
+import { useStore } from '../../composables'
 
 export interface BackgroundProps extends SVGAttributes {
   variant?: BackgroundVariant

src/additional-components/Controls/Controls.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
+import PlusIcon from '../../assets/icons/plus.svg'
+import MinusIcon from '../../assets/icons/minus.svg'
+import Fitview from '../../assets/icons/fitview.svg'
+import Lock from '../../assets/icons/lock.svg'
+import Unlock from '../../assets/icons/unlock.svg'
+import { FitViewParams } from '../../types'
+import { useZoomPanHelper, useStore } from '../../composables'
 import ControlButton from './ControlButton.vue'
-import PlusIcon from '@/assets/icons/plus.svg'
-import MinusIcon from '@/assets/icons/minus.svg'
-import Fitview from '@/assets/icons/fitview.svg'
-import Lock from '@/assets/icons/lock.svg'
-import Unlock from '@/assets/icons/unlock.svg'
-import { FitViewParams } from '~/types'
-import { useZoomPanHelper, useStore } from '~/composables'
 
 export interface ControlProps extends HTMLAttributes {
   showZoom?: boolean

src/additional-components/MiniMap/MiniMap.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
+import { getBoundsofRects, getRectOfNodes } from '../../utils'
+import { Node } from '../../types'
+import { useStore } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
-import { getBoundsofRects, getRectOfNodes } from '~/utils'
-import { Node } from '~/types'
-import { useStore } from '~/composables'
 
 type StringFunc = (node: Node) => string
 type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
+import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
-import { getBezierPath, getSmoothStepPath } from '~/components/Edges/utils'
+import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { useStore } from '~/composables'
+import { useStore } from '../../composables'
 
 interface ConnectionLineProps {
   sourceNode: Node

src/components/Edges/BezierEdge.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { CSSProperties, VNode } from 'vue'
+import { CSSProperties } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
+import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
-import { getCenter, getMarkerEnd, getBezierPath } from '~/components/Edges/utils'
 
-interface BezierEdgeProps<T = any> {
+interface BezierEdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -30,7 +30,7 @@ interface BezierEdgeProps<T = any> {
   style?: CSSProperties
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   sourceHandleId?: ElementId
   targetHandleId?: ElementId
 }

src/components/Edges/Edge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'
+import { isEdge } from '../../utils'
+import { ConnectionMode, Edge, EdgeType, Position } from '../../types'
+import { useHandle, useHooks, useStore } from '../../composables'
 import EdgeAnchor from './EdgeAnchor.vue'
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
-import { isEdge } from '~/utils/graph'
-import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
-import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType

src/components/Edges/EdgeAnchor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { Position } from '~/types'
+import { Position } from '../../types'
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift

src/components/Edges/EdgeText.vue

@@ -4,13 +4,7 @@ import { CSSProperties, HTMLAttributes } from 'vue'
 interface EdgeTextProps extends HTMLAttributes {
   x: number
   y: number
-  label?:
+  label?: any
-    | string
-    | {
-        component: any
-        props?: any
-      }
-    | any
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any

src/components/Edges/SmoothStepEdge.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { VNode } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
+import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
-import { getCenter, getMarkerEnd, getSmoothStepPath } from '~/components/Edges/utils'
 
-export interface EdgeSmoothStepProps<T = any> {
+export interface EdgeSmoothStepProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -30,7 +29,7 @@ export interface EdgeSmoothStepProps<T = any> {
   style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   borderRadius?: number
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null

src/components/Edges/StepEdge.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { VNode } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
 
-export interface EdgeStepProps<T = any> {
+export interface EdgeStepProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -29,7 +28,7 @@ export interface EdgeStepProps<T = any> {
   style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }

src/components/Edges/StraightEdge.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { VNode } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
+import { getMarkerEnd, getBezierPath } from './utils'
-import { getMarkerEnd, getBezierPath } from '~/components/Edges/utils'
 
-interface StraightEdgeProps<T = any> {
+interface StraightEdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -30,7 +29,7 @@ interface StraightEdgeProps<T = any> {
   style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }

src/components/Edges/utils.ts

@@ -1,4 +1,4 @@
-import { ArrowHeadType, Position } from '~/types'
+import { ArrowHeadType, Position } from '../../types'
 
 export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {

src/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Position, ValidConnectionFunc } from '~/types'
+import { Position, ValidConnectionFunc } from '../../types'
-import { NodeIdContextKey } from '~/context'
+import { NodeIdContextKey } from '../../context'
-import { useHandle, useHooks, useStore } from '~/composables'
+import { useHandle, useHooks, useStore } from '../../composables'
 
 interface HandleProps {
   id?: string

src/components/Nodes/DefaultNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import Handle from '~/components/Handle/Handle.vue'
+import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import { NodeProps, Position } from '../../types'
 
 interface DefaultNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/InputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import Handle from '~/components/Handle/Handle.vue'
+import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import { NodeProps, Position } from '../../types'
 
 interface InputNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/Node.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
-import { Node, NodeType, SnapGrid } from '~/types'
+import { Node, NodeType, SnapGrid } from '../../types'
-import { NodeIdContextKey } from '~/context'
+import { NodeIdContextKey } from '../../context'
-import { useHooks, useStore } from '~/composables'
+import { useHooks, useStore } from '../../composables'
 
 interface NodeProps {
   node: Node

src/components/Nodes/OutputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import Handle from '~/components/Handle/Handle.vue'
+import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import { NodeProps, Position } from '../../types'
 
 interface OutputNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/utils.ts

@@ -1,5 +1,5 @@
-import { HandleElement, Position } from '~/types'
+import { HandleElement, Position } from '../../types'
-import { getDimensions } from '~/utils'
+import { getDimensions } from '../../utils'
 
 export const getHandleBoundsByHandleType = (
   selector: string,

src/components/NodesSelection/NodesSelection.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { DraggableEventListener } from '@braks/revue-draggable'
+import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
-import { Node } from '~/types'
+import { Node } from '../../types'
-import { getRectOfNodes, isNode } from '~/utils/graph'
+import { getRectOfNodes, isNode } from '../../utils'
-import { useHooks, useStore } from '~/composables'
+import { useHooks, useStore } from '../../composables'
 
 const store = useStore()
 const hooks = useHooks()

src/components/UserSelection/UserSelection.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useStore } from '../../composables'
 import SelectionRect from './SelectionRect.vue'
-import { getMousePosition } from '~/components/UserSelection/utils'
+import { getMousePosition } from './utils'
-import { useStore } from '~/composables'
 
 const store = useStore()
 const el = templateRef('user-selection', null)

src/components/UserSelection/utils.ts

@@ -1,4 +1,4 @@
-import { XYPosition } from '~/types'
+import { XYPosition } from '../../types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
   const flowNode = (event.target as Element).closest('.vue-flow')

src/composables/useHandle.ts

@@ -1,7 +1,7 @@
-import { getHostForElement } from '~/utils'
+import { getHostForElement } from '../utils'
-import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
+import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '../types'
-import useStore from '~/composables/useStore'
+import useStore from './useStore'
-import useHooks from '~/composables/useHooks'
+import useHooks from './useHooks'
 
 type Result = {
   elementBelow: Element | null
@@ -157,6 +157,7 @@ export default () => {
       hooks.connectEnd.trigger(event)
 
       if (elementEdgeUpdaterType) {
+        // todo fix missing edge
         hooks.edgeUpdateEnd.trigger({ event } as any)
       }
 

src/composables/useHooks.ts

@@ -1,5 +1,15 @@
-import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '~/types'
+import {
-import { Hooks } from '~/context'
+  Connection,
+  Edge,
+  Elements,
+  EmitFunc,
+  FlowHooks,
+  FlowTransform,
+  Node,
+  OnConnectStartParams,
+  FlowInstance,
+} from '../types'
+import { Hooks } from '../context'
 
 // flow event hooks
 const hooks = (): FlowHooks => {

src/composables/useKeyPress.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
-import { KeyCode } from '~/types'
+import { KeyCode } from '../types'
 
 // todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {

src/composables/useStore.ts

@@ -1,7 +1,6 @@
-import { FlowOptions } from '~/types'
+import { FlowOptions } from '../types'
-import useFlowStore from '~/store/useFlowStore'
+import { useFlowStore, initialState } from '../store'
-import { initialState } from '~/store'
+import { Store } from '../context'
-import { Store } from '~/context'
 
 export default (options?: Partial<FlowOptions>) => {
   let store = inject(Store)!

src/composables/useUpdateNodeInternals.ts

@@ -1,5 +1,5 @@
-import { ElementId, UpdateNodeInternals } from '~/types'
+import { ElementId, UpdateNodeInternals } from '../types'
-import useStore from '~/composables/useStore'
+import useStore from './useStore'
 
 export default (store = useStore()): UpdateNodeInternals =>
   (id: ElementId) => {

src/composables/useZoom.ts

@@ -2,9 +2,11 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { Ref } from 'vue'
 import { get } from '@vueuse/core'
-import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '~/types'
+import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '../types'
-import { clamp } from '~/utils'
+import { clamp } from '../utils'
-import { useKeyPress, useHooks, useStore } from '~/composables'
+import useKeyPress from './useKeyPress'
+import useHooks from './useHooks'
+import useStore from './useStore'
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
   prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k

src/composables/useZoomPanHelper.ts

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import { zoomIdentity } from 'd3-zoom'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils/graph'
+import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils'
-import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
+import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '../types'
-import useStore from '~/composables/useStore'
+import useStore from './useStore'
 
 const DEFAULT_PADDING = 0.1
 

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, CSSProperties } from 'vue'
+import Edge from '../../components/Edges/Edge.vue'
+import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
+import { ConnectionLineType, EdgeType } from '../../types'
+import { useStore } from '../../composables'
 import MarkerDefinitions from './MarkerDefinitions.vue'
-import Edge from '~/components/Edges/Edge.vue'
-import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
-import { ConnectionLineType, EdgeType } from '~/types'
-import { useStore } from '~/composables'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>
@@ -25,7 +25,7 @@ const store = useStore()
 
 const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
 const connectionLineVisible = computed(
-  () => store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType,
+  () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
 )
 const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
 </script>

src/container/EdgeRenderer/utils.ts

@@ -1,6 +1,6 @@
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { rectToBox } from '~/utils/graph'
+import { rectToBox } from '../../utils'
-import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
+import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '../../types'
 
 export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
   const standardTypes: Record<string, EdgeType> = {

src/container/Flow/Flow.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import '~/style.css'
-import '~/theme-default.css'
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
+import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
-import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
+import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
-import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
+import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '~/container/EdgeRenderer/EdgeRenderer.vue'
+import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -17,12 +15,12 @@ import {
   TranslateExtent,
   NodeExtent,
   FlowOptions,
-} from '~/types'
+} from '../../types'
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { createEdgeTypes } from '~/container/EdgeRenderer/utils'
+import { createEdgeTypes } from '../EdgeRenderer/utils'
-import { createNodeTypes } from '~/container/NodeRenderer/utils'
+import { createNodeTypes } from '../NodeRenderer/utils'
-import { useHooks, useStore, createHooks } from '~/composables'
+import { useHooks, useStore, createHooks } from '../../composables'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements
@@ -189,3 +187,7 @@ const edgeTypes = controlledComputed(
     <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>
+<style>
+@import '../../style.css';
+@import '../../theme-default.css';
+</style>

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import Node from '~/components/Nodes/Node.vue'
+import Node from '../../components/Nodes/Node.vue'
-import { NodeType, Node as TNode } from '~/types'
+import { NodeType, Node as TNode } from '../../types'
-import { getNodesInside } from '~/utils'
+import { getNodesInside } from '../../utils'
-import { useStore } from '~/composables'
+import { useStore } from '../../composables'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>

src/container/NodeRenderer/utils.ts

@@ -1,5 +1,5 @@
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
-import { NodeType } from '~/types'
+import { NodeType } from '../../types'
 
 export function createNodeTypes(nodeTypes: Record<string, NodeType>): Record<string, NodeType> {
   const standardTypes: Record<string, NodeType> = {

src/container/SelectionPane/SelectionPane.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import useKeyPress from '~/composables/useKeyPress'
+import { ElementId, FlowElement, KeyCode } from '../../types'
-import { ElementId, FlowElement, KeyCode } from '~/types'
+import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
-import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
+import UserSelection from '../../components/UserSelection/UserSelection.vue'
-import UserSelection from '~/components/UserSelection/UserSelection.vue'
+import { getConnectedEdges, isNode } from '../../utils'
-import { getConnectedEdges, isNode } from '~/utils/graph'
+import { useHooks, useStore, useKeyPress } from '../../composables'
-import { useHooks, useStore } from '~/composables'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode

src/container/ZoomPane/ZoomPane.vue

@@ -3,9 +3,9 @@ import { onMounted } from 'vue'
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
+import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
-import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '~/composables'
+import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '../../composables'
-import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
+import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode

src/context/index.ts

@@ -1,6 +1,5 @@
-// @ts-nocheck
 import { InjectionKey } from 'vue'
-import { ElementId, FlowHooks, FlowStore } from '~/types'
+import { ElementId, FlowHooks, FlowStore } from '../types'
 
 export const Store: InjectionKey<FlowStore> = Symbol('store')
 export const Hooks: InjectionKey<FlowHooks> = Symbol('hooks')

src/store/index.ts

@@ -1,4 +1,4 @@
-import { ConnectionMode, FlowState } from '~/types'
+import { ConnectionMode, FlowState } from '../types'
 
 export const initialState = (): FlowState => ({
   dimensions: {

src/store/useFlowStore.ts

@@ -1,9 +1,18 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import isEqual from 'fast-deep-equal'
-import { Edge, FlowState, Node, FlowActions } from '~/types'
+import { Edge, FlowState, Node, FlowActions } from '../types'
-import { clampPosition, getDimensions } from '~/utils'
+import {
-import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils/graph'
+  clampPosition,
-import { getHandleBounds } from '~/components/Nodes/utils'
+  getDimensions,
+  getConnectedEdges,
+  getNodesInside,
+  getRectOfNodes,
+  isEdge,
+  isNode,
+  parseEdge,
+  parseNode,
+} from '../utils'
+import { getHandleBounds } from '../components/Nodes/utils'
 
 type NextElements = {
   nextNodes: Node[]

src/types/composables.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue'
 import { ElementId, FlowTransform } from './types'
 import { D3Zoom, D3Selection, PanOnScrollMode, KeyCode } from './panel'
-import { Connection } from '@/src'
+import { Connection } from './connection'
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void
 

src/types/connection.ts

@@ -1,5 +1,5 @@
 import { ElementId, Position } from './types'
-import { HandleType } from '~/types/handle'
+import { HandleType } from './handle'
 
 export enum ConnectionLineType {
   Bezier = 'default',

src/types/edge.ts

@@ -1,4 +1,4 @@
-import { DefineComponent, VNode } from 'vue'
+import { DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './types'
 import { Connection } from './connection'
 
@@ -63,7 +63,7 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number
 }
 
-export type EdgeType = DefineComponent<EdgeSmoothStepProps>
+export type EdgeType = DefineComponent<EdgeSmoothStepProps, any, any, any, any, any>
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
 

src/types/hooks.ts

@@ -1,5 +1,8 @@
 import { EventHook } from '@vueuse/core'
-import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '../types'
+import { Elements, FlowTransform, FlowInstance } from './types'
+import { Edge } from './edge'
+import { Node } from './node'
+import { Connection, OnConnectStartParams } from './connection'
 
 export type FlowHook<T = any> = EventHook<T>
 

src/types/node.ts

@@ -1,6 +1,5 @@
 import { DefineComponent } from 'vue'
-import { XYPosition } from './types'
+import { XYPosition, ElementId, Position } from './types'
-import { ElementId, Position } from './index'
 
 export interface Node<T = any> {
   id: ElementId

src/types/store.ts

@@ -5,7 +5,7 @@ import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, On
 import { Edge } from './edge'
 import { Node, NodeExtent, TranslateExtent } from './node'
 import { FlowActions } from './actions'
-import { D3Selection, D3Zoom, D3ZoomHandler } from '~/types/panel'
+import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
 
 export interface FlowState {
   dimensions: Dimensions

src/types/types.ts

@@ -1,9 +1,8 @@
-// @ts-nocheck
 import { CSSProperties, HTMLAttributes } from 'vue'
 import { Edge, EdgeType } from './edge'
 import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
-import { ConnectionLineType, ConnectionMode } from '~/types/connection'
+import { ConnectionLineType, ConnectionMode } from './connection'
-import { KeyCode, PanOnScrollMode } from '~/types/panel'
+import { KeyCode, PanOnScrollMode } from './panel'
 
 export type ElementId = string
 

src/utils/graph.ts

@@ -12,7 +12,7 @@ import {
   NodeExtent,
   Dimensions,
   FlowStore,
-} from '~/types'
+} from '../types'
 
 export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
   const target = e.target as HTMLElement
@@ -34,7 +34,7 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
 export const getHostForElement = (element: HTMLElement): Document => {
   const doc = element.getRootNode() as Document
   if ('getElementFromPoint' in doc) return doc
-  else return false as any
+  else return window.document
 }
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>

tsconfig.json

@@ -20,15 +20,8 @@
     "types": [
       "vite/client"
     ],
-    "paths": {
-      "~/*": [
-        "src/*"
-      ],
-      "@/*": [
-        "*"
-      ]
-    }
   },
+  "include": ["src"],
   "exclude": [
     "node_modules",
     "build",

vite.config.ts

@@ -3,17 +3,13 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import svgLoader from 'vite-svg-loader'
 import AutoImport from 'unplugin-auto-import/vite'
-import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
 import pkg from './package.json'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
-    alias: {
+    extensions: ['*', '.ts', '.vue'],
-      '~/': `${resolve(__dirname, 'src')}/`,
-      '@/': `${resolve(__dirname)}/`,
-    },
   },
   build: {
     minify: 'terser',
@@ -26,7 +22,6 @@ export default defineConfig({
       // into your library
       external: ['vue'],
       plugins: [
-        commonjs({ include: 'node_modules/**/*' }),
         replace({
           __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
           preventAssignment: true,