feat(core): add plugin API

[bcakmakoglu]

To-Do's

• update changeset (description of plugin API as in PR)

DnD

• add touch support - will be handled in a later release!
  • touchstart
  • touchmove
• auto-bind dragOver and drop to vue flow dom ref (in store)

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 lifecycles (beforeCreate, created, beforeDestroy, destroyed)
• Add some simple plugins to start off
  • DnD Plugin
  • Dagre Layout
  • Screenshot

Types

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

// 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(([store, extend]) => {})
    
 // before a store is destroyed
 hooks.beforeDestroy((store) => {})

 // 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 shims)

declare module '@vue-flow/core' {
  interface StoreBase {
    myProperty: boolean
    myRefProperty: Ref<boolean>
  }
}

[changeset-bot]

🦋 Changeset detected

Latest commit: 3fae582

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@vue-flow/plugin-drag-n-drop	Major
@vue-flow/plugin-layout	Major
@vue-flow/core	Major
@vue-flow/plugin-screenshot	Major
@vue-flow/background	Major
@vue-flow/controls	Major
@vue-flow/minimap	Major
@vue-flow/node-resizer	Major
@vue-flow/node-toolbar	Major
@vue-flow/pathfinding-edge	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 9 hours (more than 100, code: "api-deployments-free-per-day").

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vue-flow-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 15, 2023 9:09pm
vue-flow-typedoc	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 15, 2023 9:09pm