fix: add activeVfm (inspire by pinia)

Author: hunterliu1003

packages/nuxt/playground/components/PlainCssConfirmModalPreview.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { ModalsContainer, useVfm } from 'vue-final-modal'
+import { ModalsContainer } from 'vue-final-modal'
 import { showConfirmModal } from './showConfirmModal'
-
-const vfm = useVfm()
 </script>
 
 <template>
-  <button @click="() => showConfirmModal(vfm)">
+  <button @click="() => showConfirmModal()">
     Open Modal
   </button>
 

packages/nuxt/playground/components/showConfirmModal.ts

@@ -1,19 +1,14 @@
-import type { Vfm } from 'vue-final-modal'
 import { useModal } from 'vue-final-modal'
 import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
 
-export function showConfirmModal(vfm: Vfm) {
-  const { open, close, destroy } = useModal({
-    context: vfm,
+export function showConfirmModal() {
+  const { open, close } = useModal({
     component: PlainCssConfirmModal,
     attrs: {
       title: 'Hello World!',
       onConfirm() {
         close()
       },
-      onClosed() {
-        destroy()
-      },
     },
     slots: {
       default: '<p>The content of the modal</p>',

packages/vue-final-modal/src/plugin.ts

@@ -1,8 +1,17 @@
 import type { App, ComputedRef } from 'vue'
-import { markRaw, nextTick, ref, shallowReactive } from 'vue'
+import { getCurrentInstance, inject, markRaw, nextTick, ref, shallowReactive } from 'vue'
 import { internalVfmSymbol, vfmSymbol } from './injectionSymbols'
 import type { InternalVfm, Modal, ModalId, UseModalOptions, UseModalOptionsPrivate, Vfm } from './Modal'
 
+// eslint-disable-next-line import/no-mutable-exports
+export let activeVfm: Vfm | undefined
+
+export const setActiveVfm = (vfm: Vfm | undefined) =>
+  (activeVfm = vfm)
+
+export const getActiveVfm = () =>
+  (getCurrentInstance() && inject(vfmSymbol)) || activeVfm
+
 export function createVfm() {
   const modals: ComputedRef<Modal>[] = shallowReactive([])
   const openedModals: ComputedRef<Modal>[] = shallowReactive([])
@@ -12,6 +21,8 @@ export function createVfm() {
 
   const vfm: Vfm = markRaw({
     install(app: App) {
+      setActiveVfm(vfm)
+
       app.provide(vfmSymbol, vfm)
       app.config.globalProperties.$vfm = vfm
 

packages/vue-final-modal/src/useApi.ts

@@ -6,13 +6,14 @@ import type CoreModal from './components/CoreModal/CoreModal.vue'
 import { internalVfmSymbol, vfmSymbol } from './injectionSymbols'
 
 import type { ComponentProps, Constructor, InternalVfm, ModalSlot, ModalSlotOptions, RawProps, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
+import { activeVfm, getActiveVfm, setActiveVfm } from './plugin'
 
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
  * templates.
  */
 export function useVfm(): Vfm {
-  return inject(vfmSymbol)!
+  return getActiveVfm()!
 }
 
 /**
@@ -52,23 +53,31 @@ function withMarkRaw<P>(options: Partial<UseModalOptions<P>>, DefaultComponent:
  * Create a dynamic modal.
  */
 export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_options: UseModalOptions<P>): UseModalReturnType<P> {
+  const currentInstance = getCurrentInstance()
+  let vfm = _options.context || (currentInstance && inject(vfmSymbol))
+  if (vfm)
+    setActiveVfm(vfm)
+
+  if (__DEV__ && !activeVfm) {
+    throw new Error(
+      '[🍍]: getActiveVfm was called with no active Vfm. Did you forget to install vfm?\n'
+        + '\tconst vfm = createVfm()\n'
+        + '\tapp.use(vfm)\n'
+        + 'This will fail in production.',
+    )
+  }
+
+  vfm = activeVfm
+
   const options = reactive({
     id: Symbol('useModal'),
+    context: vfm,
     modelValue: !!_options?.defaultModelValue,
     resolveOpened: () => { },
     resolveClosed: () => { },
     attrs: {},
     ...withMarkRaw<P>(_options),
   }) as UseModalOptions<P> & UseModalOptionsPrivate
-
-  if (!options.context) {
-    const currentInstance = getCurrentInstance()
-    if (currentInstance)
-      options.context = useVfm()
-    else if (__DEV__)
-      console.warn('[Vue Final Modal warn] useModal() can only be used inside setup() or functional components.')
-  }
-
   tryOnUnmounted(() => {
     if (!options.keepAlive)
       destroy()
@@ -77,17 +86,13 @@ export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_opti
   if (options.modelValue === true)
     options.context?.dynamicModals.push(options)
 
-  function open(opt?: { context: Vfm }): Promise<string> {
-    if (opt?.context)
-      options.context = opt.context
-    if (!options?.context)
-      return Promise.resolve('[Vue Final Modal] options.context is not exist.')
+  function open(): Promise<string> {
     if (options.modelValue)
       return Promise.resolve('[Vue Final Modal] modal is already opened.')
 
     destroy()
     options.modelValue = true
-    options.context.dynamicModals.push(options)
+    options.context?.dynamicModals.push(options)
 
     return new Promise((resolve) => {
       options.resolveOpened = () => resolve('opened')