refactor(types): use vite-plugin-import-types

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

package.json

@@ -49,7 +49,7 @@
     "@rollup/plugin-replace": "^2.4.2",
     "@types/dagre": "^0.7.46",
     "@vitejs/plugin-vue": "^1.9.3",
-    "@vue/compiler-sfc": "^3.2.22",
+    "@vue/compiler-sfc": "3.2.22",
     "autoprefixer": "^10.3.7",
     "cypress": "8.5.0",
     "dagre": "^0.8.5",
@@ -67,8 +67,9 @@
     "typescript-transform-paths": "^3.3.1",
     "unplugin-auto-import": "^0.4.12",
     "vite": "2.5.x",
+    "vite-plugin-vue-type-imports": "^0.1.2",
     "vite-svg-loader": "^2.2.0",
-    "vue": "^3.2.22",
+    "vue": "3.2.22",
     "vue-router": "^4.0.12",
     "vue-tsc": "^0.29.5"
   },

src/container/VueFlow/VueFlow.vue

@@ -1,17 +1,4 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import {
-  ConnectionLineType,
-  ConnectionMode,
-  Elements,
-  PanOnScrollMode,
-  KeyCode,
-  TranslateExtent,
-  NodeExtent,
-  NodeTypes,
-  EdgeTypes,
-  FlowOptions,
-} from '../../types'
 import Renderer from '../Renderer/Renderer.vue'
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
@@ -19,47 +6,7 @@ import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow } from '../../composables'
-
-interface FlowProps extends FlowOptions {
-  id?: string
-  modelValue?: Elements
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
-  connectionMode?: ConnectionMode
-  connectionLineType?: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  deleteKeyCode?: KeyCode
-  selectionKeyCode?: KeyCode
-  multiSelectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  preventScrolling?: boolean
-  snapToGrid?: boolean
-  snapGrid?: [number, number]
-  onlyRenderVisibleElements?: boolean
-  edgesUpdatable?: boolean
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
-  elementsSelectable?: boolean
-  selectNodesOnDrag?: boolean
-  paneMoveable?: boolean
-  minZoom?: number
-  maxZoom?: number
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  translateExtent?: TranslateExtent
-  nodeExtent?: NodeExtent
-  arrowHeadColor?: string
-  markerEndId?: string
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-  edgeUpdaterRadius?: number
-  storageKey?: string
-  loading?: string
-}
+import type { FlowProps } from '../../types/flow'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   modelValue: () => [],

src/types/components.ts

@@ -1,9 +1,8 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, ElementId, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
-import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { GraphNode, Node, NodeExtent, NodeProps, TranslateExtent } from './node'
+import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
+import { Connection, ConnectionLineType } from './connection'
+import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
-import { KeyCode, PanOnScrollMode } from './zoom'
 
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
 export type EdgeTypes = (keyof DefaultEdgeTypes | string)[]
@@ -103,43 +102,3 @@ export interface CustomConnectionLineProps {
   sourceNode: GraphNode
   sourceHandle: HandleElement
 }
-
-export interface FlowProps extends FlowOptions {
-  id?: string
-  modelValue?: Elements
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
-  connectionMode?: ConnectionMode
-  connectionLineType?: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  deleteKeyCode?: KeyCode
-  selectionKeyCode?: KeyCode
-  multiSelectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  preventScrolling?: boolean
-  snapToGrid?: boolean
-  snapGrid?: [number, number]
-  onlyRenderVisibleElements?: boolean
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
-  elementsSelectable?: boolean
-  selectNodesOnDrag?: boolean
-  paneMoveable?: boolean
-  minZoom?: number
-  maxZoom?: number
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  translateExtent?: TranslateExtent
-  nodeExtent?: NodeExtent
-  arrowHeadColor?: string
-  markerEndId?: string
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-  edgeUpdaterRadius?: number
-  storageKey?: string
-  loading?: string
-}

src/types/flow.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'vue'
 import { Edge, GraphEdge } from './edge'
-import { NodeExtent, GraphNode, TranslateExtent, Node } from './node'
+import { GraphNode, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
 import { EdgeTypes, NodeTypes } from './components'
@@ -15,6 +15,9 @@ export type NextElements = {
   edges: GraphEdge[]
 }
 
+export type TranslateExtent = [[number, number], [number, number]]
+export type NodeExtent = [[number, number], [number, number]]
+
 export type Transform = [number, number, number]
 
 export enum Position {
@@ -99,9 +102,9 @@ export type FlowInstance<T = any> = {
   toObject: ToObjectFunc<T>
 }
 
-export interface FlowOptions {
+export interface FlowProps {
+  modelValue?: Elements
   id?: string
-  elements?: Elements
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
@@ -139,3 +142,7 @@ export interface FlowOptions {
   storageKey?: string
   loading?: string
 }
+
+export interface FlowOptions extends Omit<FlowProps, 'modelValue'> {
+  elements?: Elements
+}

src/types/node.ts

@@ -54,9 +54,6 @@ export interface NodeProps<T = any> extends GraphNode {
   __vf: VFInternals
 }
 
-export type TranslateExtent = [[number, number], [number, number]]
-export type NodeExtent = TranslateExtent
-
 export type NodeDimensionUpdate = {
   id: ElementId
   nodeElement: HTMLDivElement

src/types/store.ts

@@ -7,16 +7,18 @@ import {
   FlowElements,
   FlowInstance,
   FlowOptions,
+  NodeExtent,
   Rect,
   SelectionRect,
   SnapGrid,
   Transform,
+  TranslateExtent,
   XYPosition,
 } from './flow'
 import { HandleType, EdgeComponent, NodeComponent, NodeTypes, EdgeTypes } from './components'
 import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
 import { GraphEdge } from './edge'
-import { NodeExtent, GraphNode, TranslateExtent } from './node'
+import { GraphNode } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks } from './hooks'
 

src/utils/graph.ts

@@ -1,3 +1,4 @@
+import { getSourceTargetNodes } from './edge'
 import {
   ElementId,
   Node,
@@ -19,7 +20,6 @@ import {
   FlowState,
 } from '~/types'
 import { useWindow } from '~/composables'
-import { getSourceTargetNodes } from '~/utils/edge'
 
 const isHTMLElement = (el: EventTarget): el is HTMLElement => ('nodeName' || 'hasAttribute') in el
 

src/utils/node.ts

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

vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueTypes from 'vite-plugin-vue-type-imports'
 import svgLoader from 'vite-svg-loader'
 import AutoImport from 'unplugin-auto-import/vite'
 import replace from '@rollup/plugin-replace'
@@ -40,6 +41,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueTypes(),
     svgLoader(),
     // https://github.com/antfu/unplugin-auto-import
     AutoImport({

yarn.lock

@@ -994,7 +994,7 @@
     "@vue/compiler-core" "3.2.22"
     "@vue/shared" "3.2.22"
 
-"@vue/compiler-sfc@3.2.22", "@vue/compiler-sfc@^3.2.22":
+"@vue/compiler-sfc@3.2.22":
   version "3.2.22"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.22.tgz#ffd0e5e35479b6ade18d12fefec369cbaf2f7718"
   integrity sha512-tWRQ5ge1tsTDhUwHgueicKJ8rYm6WUVAPTaIpFW3GSwZKcOEJ2rXdfkHFShNVGupeRALz2ET2H84OL0GeRxY0A==
@@ -6137,6 +6137,11 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vite-plugin-vue-type-imports@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-vue-type-imports/-/vite-plugin-vue-type-imports-0.1.2.tgz#be0037f7ebce25e160a2bfbfaedd4eab6ae522bd"
+  integrity sha512-uUuDUZnM/3muh4eKm81uYMWB+e+8J920fWe369hIOG8idQpiaki3BrPXvBfuweZEFYrPGyj35ciUEOLRhc5q+g==
+
 vite-svg-loader@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-2.2.0.tgz#b5d6ca948b03e45320cb4f96c44bf88f5bef0a2c"
@@ -6324,7 +6329,7 @@ vue-tsc@^0.29.5:
     "@volar/shared" "0.29.5"
     vscode-vue-languageservice "0.29.5"
 
-vue@^3.2.22:
+vue@3.2.22:
   version "3.2.22"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.22.tgz#46e4dd89e98cc4b851ae1eb35f00ced413a34bb7"
   integrity sha512-KD5nZpXVZquOC6926Xnp3zOvswrUyO9Rya7ZUoxWFQEjFDW4iACtwzubRB4Um2Om9kj6CaJOqAVRDSFlqLpdgw==