feat(core): add plugin API

.changeset/config.json

@@ -6,7 +6,7 @@
       "repo": "bcakmakoglu/vue-flow"
     }
   ],
-  "fixed": [],
+  "fixed": [["@vue-flow/*"]],
   "updateInternalDependencies": "patch",
   "snapshot": {
     "useCalculatedVersion": true

.changeset/cool-coats-yawn.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/plugin-drag-n-drop': major
+---
+
+Add drag and drop plugin pkg to help simplify implementing a dnd UI for vue flow

.changeset/cyan-melons-unite.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Remove experimental features flag

.changeset/fluffy-pans-boil.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': major
+---
+
+Use `GraphNode` or `GraphEdge` as optional generic types for `findNode` or `findEdge` actions

.changeset/hip-melons-peel.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': major
+---
+
+Update handle styles and avoid using fixed pixel positions to offset handle position and instead use transform to align handles

.changeset/pre.json

@@ -0,0 +1,27 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@vue-flow/docs": "1.0.0",
+    "@vue-flow/examples-nuxt3": "0.0.0",
+    "@vue-flow/examples-quasar": "0.0.0",
+    "@vue-flow/examples-vite": "0.0.0",
+    "@vue-flow/background": "1.0.5",
+    "@vue-flow/controls": "1.0.4",
+    "@vue-flow/core": "1.16.5",
+    "@vue-flow/minimap": "1.0.4",
+    "@vue-flow/node-resizer": "1.3.0",
+    "@vue-flow/node-toolbar": "1.0.6",
+    "@vue-flow/pathfinding-edge": "1.0.5",
+    "vueflow": "1.0.0",
+    "@vue-flow/tests": "0.0.0",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
+    "@tooling/vite-config": "0.0.0"
+  },
+  "changesets": [
+    "cyan-melons-unite.md",
+    "fluffy-pans-boil.md",
+    "hip-melons-peel.md"
+  ]
+}

.changeset/slimy-seas-check.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/plugin-layout': major
+---
+
+Add dagre layout plugin pkg

.changeset/weak-points-whisper.md

@@ -0,0 +1,71 @@
+---
+'@vue-flow/core': minor
+
+---
+
+Add plugin API to Vue Flow App
+
+## What's changed?
+
+- Allow setting global store config that is applied as default to all stores that are created
+- A simple API to extend the vue flow store (⚠️ *NOT* a Vue Plugin)
+- Provide hooks to hook into store lifecycle (`beforeCreate`, `created`, `beforeDestroy`, `destroyed`)
+- Add some simple plugins to start off
+  - DnD
+  - Layout
+  - Screenshot
+
+## Plugin
+
+```ts
+interface PluginHooks {
+  beforeCreate: EventHookOn<[string, FlowOptions | undefined]>
+  created: EventHookOn<[VueFlowStore, (plugin: Partial<VueFlowStore>) => void]>
+  beforeDestroy: EventHookOn<VueFlowStore>
+  destroyed: EventHookOn<string>
+}
+
+type Plugin = (hooks: PluginHooks) => void
+```
+
+## Example
+
+```ts
+// main.ts or your App entry point
+import { createVueFlow, Plugin } from '@vue-flow/core'
+
+const plugin: Plugin = (hooks) => {
+ hooks.beforeCreate(([id, preloadedState]) => {
+  // do something before a store instance is created
+ })
+
+ // after a store has been created
+ hooks.created(([storeInstance, extendFn]) => {})
+
+ // before a store is destroyed
+ hooks.beforeDestroy((storeInstance) => {})
+
+ // after a store is destroyed
+ hooks.destroyed(() => {})
+}
+
+// You can pass a factory function to set default values to each new store instance
+const vueFlowApp = createVueFlow(() => ({ 
+  fitViewOnInit: true,
+}))
+
+vueFlowApp.use(plugin)
+```
+
+## Extending Store Type (TypeScript)
+
+```ts
+// my-shims.d.ts
+declare module '@vue-flow/core' {
+    // the StoreBase interface can be used to extend the VueFlowStore type
+  interface StoreBase {
+    myProperty: boolean
+    myRefProperty: Ref<boolean>
+  }
+}
+```

.changeset/wild-carrots-occur.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/plugin-screenshot': major
+---
+
+Add screenshot plugin pkg to create a downloadable image of the graph

docs/src/.vitepress/config.ts

@@ -1,5 +1,4 @@
 import { resolve } from 'node:path'
-import { readdirSync, statSync } from 'node:fs'
 import type { DefaultTheme, HeadConfig } from 'vitepress'
 import { defineConfigWithTheme } from 'vitepress'
 import WindiCSS from 'vite-plugin-windicss'
@@ -9,56 +8,11 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { useVueFlow } from '@vue-flow/core'
 import head from './head'
-import { copyVueFlowPlugin, files } from './plugins'
+import { copyVueFlowPlugin } from './plugins'
+import { changelogSidebarEntries, pluginSidebarEntries, typedocSidebarEntries } from './utils'
 
 const { vueFlowVersion } = useVueFlow()
 
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-function typedocSidebarEntries() {
-  const filePath = resolve(__dirname, '../typedocs')
-
-  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
-
-  return docsModules.map((module) => {
-    let children = readdirSync(`${filePath}/${module}/`).map<DefaultTheme.SidebarItem>((entry) => ({
-      text: entry.replace('.md', ''),
-      link: `/typedocs/${module}/${entry.replace('.md', '')}`,
-    }))
-
-    if (module === 'variables') {
-      children = children.filter((child) => {
-        return child.link.includes('default')
-      })
-    }
-
-    return { text: capitalize(module), collapsed: false, items: children } as DefaultTheme.SidebarItem
-  })
-}
-
-function changelogSidebarEntries(): DefaultTheme.SidebarItem[] {
-  return [
-    {
-      text: 'CHANGELOG',
-      collapsed: true,
-      items: files.map((file) => {
-        const name = file.pkgName.replace('.md', '')
-        const isCore = name === 'core'
-
-        return {
-          text: name
-            .split('-')
-            .map((s) => capitalize(s))
-            .join(' '),
-          link: `/changelog/${isCore ? '' : name}`,
-        }
-      }),
-    },
-  ]
-}
-
 export default defineConfigWithTheme<DefaultTheme.Config>({
   title: 'Vue Flow',
   description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
@@ -130,6 +84,11 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         link: '/examples/',
         activeMatch: '^/examples/',
       },
+      {
+        text: 'Plugins',
+        link: '/plugins/',
+        activeMatch: '^/plugins/',
+      },
       {
         text: 'Migration',
         link: '/migration/',
@@ -244,6 +203,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
       ],
       '/typedocs/': typedocSidebarEntries(),
       '/changelog/': changelogSidebarEntries(),
+      '/plugins/': pluginSidebarEntries(),
     },
   },
 })

docs/src/.vitepress/plugins/changelog.ts

@@ -26,15 +26,15 @@ const getAllFiles = function (dirPath: string, needle?: string, arrayOfFiles: Ch
   return arrayOfFiles
 }
 
-export const files = getAllFiles(resolve(__dirname, '../../../../packages'), 'CHANGELOG')
+export const changelogFiles = getAllFiles(resolve(__dirname, '../../../../packages'), 'CHANGELOG')
 
 const changelogDirPath = resolve(__dirname, `../../changelog/`)
 
 if (!existsSync(changelogDirPath)) {
   mkdirSync(changelogDirPath)
 }
 
-files.forEach(({ path, pkgName }) => {
+changelogFiles.forEach(({ path, pkgName }) => {
   const isCore = pkgName === 'core'
 
   const filePath = resolve(__dirname, `${path}`)

docs/src/.vitepress/plugins/index.ts

@@ -1,2 +1,3 @@
 export * from './changelog'
 export * from './copy'
+export * from './plugins'

docs/src/.vitepress/plugins/plugins.ts

@@ -0,0 +1,41 @@
+import { copyFile, existsSync, mkdirSync, readdirSync, statSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+interface PluginFile {
+  path: string
+  pkgName: string
+}
+
+const skip = ['node_modules', 'dist', 'turbo']
+
+const getAllFiles = function (dirPath: string, needle?: string, arrayOfFiles: PluginFile[] = [], pkgName?: string) {
+  readdirSync(dirPath).forEach((file) => {
+    if (skip.includes(file)) return
+
+    if (statSync(`${dirPath}/${file}`).isDirectory()) {
+      getAllFiles(`${dirPath}/${file}`, needle, arrayOfFiles, file)
+    } else {
+      if (file.includes('README')) {
+        arrayOfFiles.push({ path: `${dirPath}/${file}`, pkgName })
+      }
+    }
+  })
+
+  return arrayOfFiles
+}
+
+export const pluginFiles = getAllFiles(resolve(__dirname, '../../../../packages/plugins'), 'README')
+
+const pluginDirPath = resolve(__dirname, `../../plugins/`)
+
+if (!existsSync(pluginDirPath)) {
+  mkdirSync(pluginDirPath)
+}
+
+pluginFiles.forEach(({ path, pkgName }) => {
+  const filePath = resolve(__dirname, `${path}`)
+
+  copyFile(filePath, `${pluginDirPath}/${pkgName}.md`, () => {})
+
+  console.log(`Copied ${filePath} to ${pluginDirPath}/${pkgName}.md`)
+})

docs/src/.vitepress/utils.ts

@@ -0,0 +1,70 @@
+import { resolve } from 'node:path'
+import { readdirSync, statSync } from 'node:fs'
+import type { DefaultTheme } from 'vitepress'
+import { changelogFiles, pluginFiles } from './plugins'
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export const typedocSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  const filePath = resolve(__dirname, '../typedocs')
+
+  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
+
+  return docsModules.map((module) => {
+    let children = readdirSync(`${filePath}/${module}/`).map<DefaultTheme.SidebarItem>((entry) => ({
+      text: entry.replace('.md', ''),
+      link: `/typedocs/${module}/${entry.replace('.md', '')}`,
+    }))
+
+    if (module === 'variables') {
+      children = children.filter((child) => {
+        return child.link.includes('default')
+      })
+    }
+
+    return { text: capitalize(module), collapsible: true, items: children } as DefaultTheme.SidebarGroup
+  })
+}
+
+export const changelogSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  return [
+    {
+      text: 'CHANGELOG',
+      collapsible: true,
+      items: changelogFiles.map((file) => {
+        const name = file.pkgName.replace('.md', '')
+        const isCore = name === 'core'
+
+        return {
+          text: name
+            .split('-')
+            .map((s) => capitalize(s))
+            .join(' '),
+          link: `/changelog/${isCore ? '' : name}`,
+        }
+      }),
+    },
+  ]
+}
+
+export const pluginSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  return [
+    {
+      text: 'Plugins',
+      collapsible: true,
+      items: pluginFiles.map((file) => {
+        const name = file.pkgName.replace('.md', '')
+
+        return {
+          text: name
+            .split('-')
+            .map((s) => capitalize(s))
+            .join(' '),
+          link: `/plugins/${name}`,
+        }
+      }),
+    },
+  ]
+}

docs/src/guide/index.md

@@ -19,18 +19,18 @@ Check out the [examples](/examples/) if you want to dive directly into the code.
 
 - 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
 
-- 🎨 __Customizable__: Use your own custom nodes, edges, connection lines and expand on the Vue Flows functionality
+- 🎨 __Customizable__: Use your own custom nodes, edges, connection-lines and a multitude of plugins to extend the functionality of Vue Flow
 
 - 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
 
-- 🧲 __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses
+- 🧲 __Utils & Composition__: Built for Composition API and comes with a set of useful utilities to make your life easier
 
 - 📦 __Additional Components__:
 
-  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
+  - 🖼 Background: With two built-in patterns (grid & dots) and the ability to add your own custom background shapes
 
-  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
+  - 🧭 Interactive Minimap: Shows current nodes in a small map shape and allows dragging or zooming the viewport using the mini map
 
-  - 🕹 Controls: Control zoom behavior from a panel on the bottom left
+  - 🕹 Controls: A panel with buttons to zoom in, zoom out, fit the view or lock interaction. You can also add your own custom controls to the panel.
 
-- 🦾 __Reliable__: Fully written in TypeScript
+- 🦾 __Reliable__: Fully written in TypeScript and tested with Cypress 10