diff --git a/.changeset/red-avocados-know.md b/.changeset/red-avocados-know.md new file mode 100644 index 000000000..01d426df5 --- /dev/null +++ b/.changeset/red-avocados-know.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Add overloads to `useVueFlow`. Allows calling `useVueFlow` with an `id` string only while emitting a deprecation warning for using the options obj. diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts index 0d60e1efc..9de7839da 100644 --- a/packages/core/src/composables/useVueFlow.ts +++ b/packages/core/src/composables/useVueFlow.ts @@ -1,8 +1,8 @@ import { tryOnScopeDispose } from '@vueuse/core' import type { EffectScope } from 'vue' -import { effectScope, getCurrentScope, inject, provide, watch } from 'vue' +import { effectScope, getCurrentInstance, getCurrentScope, inject, provide, watch } from 'vue' import type { EdgeChange, FlowOptions, NodeChange, VueFlowStore } from '../types' -import { warn } from '../utils' +import { ErrorCode, VueFlowError, warn } from '../utils' import { VueFlow } from '../context' import { Storage } from '../utils/storage' @@ -18,15 +18,21 @@ type Scope = (EffectScope & { vueFlowId: string }) | undefined * If no store instance is found in context, a new store instance is created and registered in storage * * @public - * @param options - optional options to initialize the store instance * @returns a vue flow store instance + * @param idOrOpts - id of the store instance or options to create a new store instance */ -export function useVueFlow(options?: FlowOptions): VueFlowStore { +export function useVueFlow(id?: string): VueFlowStore +export function useVueFlow(options?: FlowOptions): VueFlowStore +export function useVueFlow(idOrOpts?: any): VueFlowStore { const storage = Storage.getInstance() const scope = getCurrentScope() as Scope - const id = options?.id + const isOptsObj = typeof idOrOpts === 'object' + + const options = isOptsObj ? idOrOpts : undefined + + const id = options?.id ?? idOrOpts const vueFlowId = scope?.vueFlowId || id let vueFlow: Injection @@ -114,7 +120,7 @@ export function useVueFlow(options?: FlowOptions): VueFlowStore { }) } else { // If options were passed, overwrite state with the options' values - if (options) { + if (isOptsObj) { vueFlow.setState(options) } } @@ -126,8 +132,13 @@ export function useVueFlow(options?: FlowOptions): VueFlowStore { scope.vueFlowId = vueFlow.id } - if (options) { - warn('options are deprecated and will be removed in the next major version. Use props on the `` component instead.') + if (isOptsObj) { + const instance = getCurrentInstance() + + // ignore the warning if we are in a VueFlow component + if (instance?.type.name !== 'VueFlow') { + vueFlow.emits.error(new VueFlowError(ErrorCode.USEVUEFLOW_OPTIONS)) + } } return vueFlow diff --git a/packages/core/src/composables/useWatchProps.ts b/packages/core/src/composables/useWatchProps.ts index a83b35b3c..4dd9da6a6 100644 --- a/packages/core/src/composables/useWatchProps.ts +++ b/packages/core/src/composables/useWatchProps.ts @@ -309,7 +309,7 @@ export function useWatchProps( ;(storeRef.value as any) = nextValue } }, - { immediate: true, flush: 'pre' }, + { immediate: true }, ) }) } diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue index 097259b8a..f71a823b3 100644 --- a/packages/core/src/container/VueFlow/VueFlow.vue +++ b/packages/core/src/container/VueFlow/VueFlow.vue @@ -56,18 +56,12 @@ const modelValue = useVModel(props, 'modelValue', emit) const modelNodes = useVModel(props, 'nodes', emit) const modelEdges = useVModel(props, 'edges', emit) -const { vueFlowRef, hooks, getNodeTypes, getEdgeTypes, ...rest } = useVueFlow(props) +const instance = useVueFlow(props) // watch props and update store state -const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges }, props, { - vueFlowRef, - hooks, - getNodeTypes, - getEdgeTypes, - ...rest, -}) +const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges }, props, instance) -useHooks(emit, hooks) +useHooks(emit, instance.hooks) useOnInitHandler() @@ -83,13 +77,7 @@ onUnmounted(() => { dispose() }) -defineExpose({ - vueFlowRef, - hooks, - getNodeTypes, - getEdgeTypes, - ...rest, -}) +defineExpose(instance)