refactor(additional-components): move additional components into separate pkg

packages/additional-components/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    'no-use-before-define': 0,
+    'vue/no-setup-props-destructure': 0,
+  },
+  extends: ['../../.eslintrc.js'],
+  ignorePatterns: ['!**/*'],
+}

packages/additional-components/.gitignore

@@ -0,0 +1,99 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+.webpack
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+# Db-Data
+hasura/db_data/
+
+# Codegen types
+types/types.ts
+
+build

packages/additional-components/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "quoteProps": "consistent",
+  "bracketSpacing": true,
+  "printWidth": 130
+}

packages/additional-components/README.md

@@ -0,0 +1,84 @@
+# Vue Flow Resizable Rotatable Node
+
+### Custom Node that can be resized and rotated
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/core-resize-rotate-node
+
+# or
+$ npm i --save @vue-flow/core-resize-rotate-node
+```
+
+## 🎮 Quickstart
+
+```vue
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { ResizeRotateNode } from '@vue-flow/core-resize-rotate-node'
+import initialElements from './initial-elements'
+
+const elements = ref(initialElements)
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow v-model="elements">
+      <template #node-resize-rotate="props">
+        <ResizeRotateNode v-bind="props" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+```
+
+```js
+// initial-elements.js
+export default [
+  {
+    id: '1',
+    label: 'Node 1',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    sourcePosition: 'right',
+    position: {
+      x: 0,
+      y: 0,
+    },
+    data: {
+      // additional styles for the node
+      // cannot use the regular style tag as those apply to the node wrapper
+      style: {
+        background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: '2',
+    label: 'Node 2',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    position: {
+      x: 330,
+      y: 50,
+    },
+    data: {
+      style: {
+        background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'smoothstep',
+  },
+]
+```

packages/additional-components/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vue-flow/additional-components",
+  "version": "0.0.1",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/background"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-additional-components.cjs.js",
+  "module": "./dist/vue-flow-additional-components.es.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-additional-components.iife.js",
+  "jsdelivr": "./dist/vue-flow-additional-components.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
+    "typedoc": "typedoc --options ./typedoc.json",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37",
+    "@vue-flow/core": "^0.4.41"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.3.0"
+  },
+  "devDependencies": {
+    "@vue-flow/core": "workspace:*",
+    "@vitejs/plugin-vue": "^2.3.4",
+    "unplugin-auto-import": "^0.11.2",
+    "vite": "^2.9.15",
+    "vite-svg-loader": "^3.6.0",
+    "vite-plugin-vue-type-imports": "0.2.0",
+    "vue-tsc": "^0.40.13"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

packages/additional-components/src/auto-imports.d.ts

@@ -0,0 +1,255 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  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']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  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']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  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']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  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']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  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']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}

packages/additional-components/src/background/Background.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { BackgroundVariant } from '../../types'
-import { useVueFlow } from '../../composables'
-import type { BackgroundProps } from '../../types/components'
+import { useVueFlow } from '@vue-flow/core'
+import { BackgroundVariant } from './types'
+import type { BackgroundProps } from './types'
 
 const {
   variant = 'dots' as BackgroundVariant,
@@ -20,13 +20,13 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const { viewport } = $(useVueFlow())
+const { viewport } = useVueFlow()
 
 const background = $computed(() => {
-  const scaledGap = gap && gap * viewport.zoom
-  const xOffset = scaledGap && viewport.x % scaledGap
-  const yOffset = scaledGap && viewport.y % scaledGap
-  const bgSize = size * viewport.zoom
+  const scaledGap = gap && gap * viewport.value.zoom
+  const xOffset = scaledGap && viewport.value.x % scaledGap
+  const yOffset = scaledGap && viewport.value.y % scaledGap
+  const bgSize = size * viewport.value.zoom
 
   return {
     scaledGap,

packages/additional-components/src/background/index.ts

@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'

packages/additional-components/src/background/types.ts

@@ -0,0 +1,25 @@
+export enum BackgroundVariant {
+  Lines = 'lines',
+  Dots = 'dots',
+}
+
+export interface BackgroundProps {
+  /** The background pattern variant, {@link BackgroundVariant} */
+  variant?: BackgroundVariant
+  /** Background pattern gap */
+  gap?: number
+  /** Background pattern size */
+  size?: number
+  /** Background pattern color */
+  patternColor?: string
+  /** Background color */
+  bgColor?: string
+  /** Background height */
+  height?: number
+  /** Background width */
+  width?: number
+  /** Background x-coordinate (offset x) */
+  x?: number
+  /** Background y-coordinate (offset y) */
+  y?: number
+}

packages/additional-components/src/controls/Controls.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useVueFlow } from '../../composables'
-import type { ControlProps } from '../../types/components'
+import { useVueFlow } from '@vue-flow/core'
+import type { ControlProps } from './types'
 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 PlusIcon from './icons/plus.svg'
+import MinusIcon from './icons/minus.svg'
+import FitView from './icons/fitview.svg'
+import Lock from './icons/lock.svg'
+import Unlock from './icons/unlock.svg'
 
 const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
 

packages/additional-components/src/controls/index.ts

@@ -0,0 +1,4 @@
+export { default as Controls } from './Controls.vue'
+export { default as ControlButton } from './ControlButton.vue'
+
+export * from './types'

packages/additional-components/src/controls/types.ts

@@ -0,0 +1,12 @@
+import type { FitViewParams } from '@vue-flow/core'
+
+export interface ControlProps {
+  /** Show the zoom icon */
+  showZoom?: boolean
+  /** Show the fit-view icon */
+  showFitView?: boolean
+  /** Show the interactive icon */
+  showInteractive?: boolean
+  /** Params to use on fitView */
+  fitViewParams?: FitViewParams
+}

packages/additional-components/src/index.ts

@@ -0,0 +1,3 @@
+export * from './background'
+export * from './controls'
+export * from './minimap'

packages/additional-components/src/minimap/MiniMap.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { GraphNode, MiniMapNodeFunc, ShapeRendering } from '../../types'
-import { useVueFlow, useWindow } from '../../composables'
-import { getBoundsofRects, getConnectedEdges, getRectOfNodes } from '../../utils'
-import type { MiniMapProps } from '../../types/components'
+import type { GraphNode } from '@vue-flow/core'
+import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
+import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode'
 
 const {
@@ -20,12 +19,10 @@ const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMo
 
 const attrs: Record<string, any> = useAttrs()
 
-const window = useWindow()
-
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { edges, viewport, dimensions, emits, getNodes } = $(useVueFlow())
+const { edges, viewport, dimensions, emits, getNodes } = useVueFlow()
 
 const elementWidth = $computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
@@ -40,20 +37,18 @@ const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
-const bb = $computed(() => {
-  return getRectOfNodes(getNodes)
-})
+const bb = $computed(() => getRectOfNodes(getNodes.value))
 
 const viewBB = $computed(() => ({
-  x: -viewport.x / viewport.zoom,
-  y: -viewport.y / viewport.zoom,
-  width: dimensions.width / viewport.zoom,
-  height: dimensions.height / viewport.zoom,
+  x: -viewport.value.x / viewport.value.zoom,
+  y: -viewport.value.y / viewport.value.zoom,
+  width: dimensions.value.width / viewport.value.zoom,
+  height: dimensions.value.height / viewport.value.zoom,
 }))
 
 const viewBox = $(
   controlledComputed($$(viewBB), () => {
-    const boundingRect = getNodes && getNodes.length ? getBoundsofRects(bb, viewBB) : viewBB
+    const boundingRect = getNodes && getNodes.value.length ? getBoundsofRects(bb, viewBB) : viewBB
     const scaledWidth = boundingRect.width / elementWidth
     const scaledHeight = boundingRect.height / elementHeight
     const viewScale = Math.max(scaledWidth, scaledHeight)
@@ -87,31 +82,31 @@ const d = controlledComputed($$(viewBox), () => {
 })
 
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeClick(param)
   emit('nodeClick', param)
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeDoubleClick(param)
   emit('nodeDblclick', param)
 }
 
 const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseEnter(param)
   emit('nodeMouseenter', param)
 }
 
 const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseMove(param)
   emit('nodeMousemove', param)
 }
 
 const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseLeave(param)
   emit('nodeMouseleave', param)
 }

packages/additional-components/src/minimap/MiniMapNode.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, FunctionalComponent } from 'vue'
-import type { MiniMapNodeProps } from '~/types'
+import type { MiniMapNodeProps } from './types'
 
 const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
   {

packages/additional-components/src/minimap/index.ts

@@ -0,0 +1,4 @@
+export { default as MiniMap } from './MiniMap.vue'
+export { default as MiniMapNode } from './MiniMapNode'
+
+export * from './types'

packages/additional-components/src/minimap/types.ts

@@ -0,0 +1,43 @@
+import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
+import type { CSSProperties } from 'vue'
+
+/** expects a node and returns a color value */
+export type MiniMapNodeFunc = (node: GraphNode) => string
+// hack for vue-type imports
+type MiniMapNodeFunc2 = (node: GraphNode) => string
+type MiniMapNodeFunc3 = (node: GraphNode) => string
+
+export type ShapeRendering = CSSProperties['shapeRendering']
+
+export interface MiniMapProps {
+  /** Node color, can be either a string or a string func that receives the current node */
+  nodeColor?: string | MiniMapNodeFunc
+  /** Node stroke color, can be either a string or a string func that receives the current node */
+  nodeStrokeColor?: string | MiniMapNodeFunc2
+  /** Additional node class name, can be either a string or a string func that receives the current node */
+  nodeClassName?: string | MiniMapNodeFunc3
+  /** Node border radius */
+  nodeBorderRadius?: number
+  /** Node stroke width */
+  nodeStrokeWidth?: number
+  /** Background color of minimap */
+  maskColor?: string
+
+  width?: number
+  height?: number
+}
+
+/** these props are passed to mini map node slots */
+export interface MiniMapNodeProps {
+  id: string
+  parentNode?: string
+  selected?: boolean
+  dragging?: boolean
+  position: XYPosition
+  dimensions: Dimensions
+  borderRadius?: number
+  color?: string
+  shapeRendering?: ShapeRendering
+  strokeColor?: string
+  strokeWidth?: number
+}

packages/additional-components/src/window-shims.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  chrome: any
+}

packages/additional-components/tsconfig.json

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

packages/additional-components/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
+  "files": ["package.json"]
+}

packages/additional-components/vite.config.ts

@@ -0,0 +1,48 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import vueTypes from 'vite-plugin-vue-type-imports'
+import svgLoader from 'vite-svg-loader'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    dedupe: ['vue'],
+    extensions: ['.ts', '.vue'],
+  },
+  build: {
+    minify: 'esbuild',
+    emptyOutDir: false,
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'vueFlowBackground',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue', '@vue-flow/core'],
+      output: {
+        dir: './dist',
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          'vue': 'Vue',
+          '@vue-flow/core': 'VueFlow',
+        },
+      },
+    },
+  },
+  plugins: [
+    vue({
+      reactivityTransform: true,
+    }),
+    vueTypes(),
+    AutoImport({
+      imports: ['vue', '@vueuse/core', 'vue/macros'],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    svgLoader(),
+  ],
+})

packages/vue-flow/package.json

@@ -58,7 +58,6 @@
     "unplugin-auto-import": "^0.11.2",
     "vite": "^2.9.15",
     "vite-plugin-vue-type-imports": "0.2.0",
-    "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^0.40.13"
   },
   "publishConfig": {

packages/vue-flow/src/additional-components/index.ts

@@ -1,5 +0,0 @@
-export { default as MiniMap } from './MiniMap/MiniMap.vue'
-export { default as MiniMapNode } from './MiniMap/MiniMapNode'
-export { default as Controls } from './Controls/Controls.vue'
-export { default as ControlButton } from './Controls/ControlButton.vue'
-export { default as Background } from './Background/Background.vue'

packages/vue-flow/src/custom.d.ts

@@ -1,5 +1,2 @@
 declare const __VUE_FLOW_VERSION__: string
 declare const __ENV__: string
-declare interface Window {
-  chrome?: any
-}

packages/vue-flow/src/env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-svg-loader" />
 /// <reference types="vue/macros-global" />
 
 declare module '*.vue' {

packages/vue-flow/src/index.ts

@@ -26,6 +26,7 @@ export {
   graphPosToZoomedPos,
   getNodesInside,
   getMarkerId,
+  getBoundsofRects,
 } from './utils/graph'
 
 /**
@@ -48,6 +49,4 @@ export { default as useNode } from './composables/useNode'
 
 export { default as useEdge } from './composables/useEdge'
 
-export * from './additional-components'
-
 export * from './types'

packages/vue-flow/src/types/components.ts

@@ -1,8 +1,6 @@
 import type { CSSProperties, Component, DefineComponent, SVGAttributes, VNode } from 'vue'
-import type { BackgroundVariant, Dimensions, XYPosition } from './flow'
-import type { GraphNode, NodeProps } from './node'
+import type { NodeProps } from './node'
 import type { EdgeProps } from './edge'
-import type { FitViewParams } from './zoom'
 
 /** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string
@@ -20,79 +18,6 @@ export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, an
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
 export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent }
 
-export interface BackgroundProps {
-  /** The background pattern variant, {@link BackgroundVariant} */
-  variant?: BackgroundVariant
-  /** Background pattern gap */
-  gap?: number
-  /** Background pattern size */
-  size?: number
-  /** Background pattern color */
-  patternColor?: string
-  /** Background color */
-  bgColor?: string
-  /** Background height */
-  height?: number
-  /** Background width */
-  width?: number
-  /** Background x-coordinate (offset x) */
-  x?: number
-  /** Background y-coordinate (offset y) */
-  y?: number
-}
-
-export interface ControlProps {
-  /** Show the zoom icon */
-  showZoom?: boolean
-  /** Show the fit-view icon */
-  showFitView?: boolean
-  /** Show the interactive icon */
-  showInteractive?: boolean
-  /** Params to use on fitView */
-  fitViewParams?: FitViewParams
-}
-
-/** expects a node and returns a color value */
-export type MiniMapNodeFunc = (node: GraphNode) => string
-// hack for vue-type imports
-type MiniMapNodeFunc2 = (node: GraphNode) => string
-type MiniMapNodeFunc3 = (node: GraphNode) => string
-
-export type ShapeRendering = CSSProperties['shapeRendering']
-
-export interface MiniMapProps {
-  /** Node color, can be either a string or a string func that receives the current node */
-  nodeColor?: string | MiniMapNodeFunc
-  /** Node stroke color, can be either a string or a string func that receives the current node */
-  nodeStrokeColor?: string | MiniMapNodeFunc2
-  /** Additional node class name, can be either a string or a string func that receives the current node */
-  nodeClassName?: string | MiniMapNodeFunc3
-  /** Node border radius */
-  nodeBorderRadius?: number
-  /** Node stroke width */
-  nodeStrokeWidth?: number
-  /** Background color of minimap */
-  maskColor?: string
-
-  width?: number
-  height?: number
-}
-
-/** these props are passed to mini map node slots */
-export interface MiniMapNodeProps {
-  id: string
-  parentNode?: string
-  selected?: boolean
-  dragging?: boolean
-  position: XYPosition
-  dimensions: Dimensions
-  borderRadius?: number
-  color?: string
-  shapeRendering?: ShapeRendering
-  strokeColor?: string
-  strokeWidth?: number
-}
-
 /** these props are passed to edge texts */
 export interface EdgeTextProps extends SVGAttributes {
   x: number

packages/vue-flow/src/types/flow.ts

@@ -58,11 +58,6 @@ export interface Rect extends Dimensions, XYPosition {}
 
 export type SnapGrid = [number, number]
 
-export enum BackgroundVariant {
-  Lines = 'lines',
-  Dots = 'dots',
-}
-
 export interface SelectionRect extends Rect {
   startX: number
   startY: number

packages/vue-flow/vite.config.ts

@@ -2,7 +2,6 @@ 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'
 import pkg from './package.json'
@@ -43,7 +42,6 @@ export default defineConfig({
       reactivityTransform: true,
     }),
     vueTypes(),
-    svgLoader(),
     AutoImport({
       imports: ['vue', '@vueuse/core', 'vue/macros'],
       dts: 'src/auto-imports.d.ts',