Merge pull request #355 from vue-final/feat/singleton

feat: get rid of context and made useModal can be execute everywhere

Author: hunterliu1003

docs/content/2.get-started/1.guide/4.types.md

@@ -33,7 +33,6 @@ export type ModalSlot = string | Component | ModalSlotOptions
 export type UseModalOptions<P> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-  context?: Vfm
   component?: Constructor<P>
   attrs?: (RawProps & P) | ({} extends P ? null : never)
   slots?: {

packages/vue-final-modal/cypress/components/focusTrap.spec.ts

@@ -7,7 +7,6 @@ describe('Test focusTrap', () => {
     const vfm = createVfm()
 
     const firstModal = useModal({
-      context: vfm,
       component: VueFinalModal,
       attrs: { contentClass: 'first-modal-content' },
       slots: {
@@ -16,7 +15,6 @@ describe('Test focusTrap', () => {
     })
 
     const secondModal = useModal({
-      context: vfm,
       component: VueFinalModal,
       attrs: { contentClass: 'second-modal-content' },
       slots: {

packages/vue-final-modal/cypress/components/useModal.spec.ts

@@ -6,7 +6,6 @@ describe('Test useModal()', () => {
   it('Should be closed by default', () => {
     const vfm = createVfm()
     const modal = useModal({
-      context: vfm,
       slots: { default: 'Hello World!' },
     })
 
@@ -25,7 +24,6 @@ describe('Test useModal()', () => {
   it('Should be opened by given defaultModelValue: true', () => {
     const vfm = createVfm()
     useModal({
-      context: vfm,
       defaultModelValue: true,
       slots: {
         default: 'Hello World!',
@@ -51,7 +49,6 @@ describe('Test useModal()', () => {
     const onClosed = cy.spy().as('onClosed')
 
     const modal = useModal({
-      context: vfm,
       attrs: {
         onBeforeOpen,
         onOpened,

packages/vue-final-modal/cypress/components/useZIndex.spec.ts

@@ -5,19 +5,16 @@ describe('Test useZIndex()', () => {
   it('Props: zIndexFn()', () => {
     const vfm = createVfm()
     const firstModal = useModal({
-      context: vfm,
       component: VueFinalModal,
       attrs: { class: 'first-modal' },
     })
 
     const secondModal = useModal({
-      context: vfm,
       component: VueFinalModal,
       attrs: { class: 'second-modal' },
     })
 
     const thirdModal = useModal({
-      context: vfm,
       component: VueFinalModal,
       attrs: { class: 'third-modal' },
     })

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

@@ -25,7 +25,6 @@ export type ModalSlot = string | Component | ModalSlotOptions
 export type UseModalOptions<P> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-  context?: Vfm
   component?: Constructor<P>
   attrs?: (RawProps & P) | ({} extends P ? null : never)
   slots?: {

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

@@ -21,8 +21,6 @@ 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

@@ -1,19 +1,29 @@
+import { computed, inject, markRaw, nextTick, reactive, useAttrs } from 'vue'
 import { isString, tryOnUnmounted } from '@vueuse/core'
-import { computed, getCurrentInstance, inject, markRaw, reactive, useAttrs } from 'vue'
 import type { Component } from 'vue'
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
 import type CoreModal from './components/CoreModal/CoreModal.vue'
-import { internalVfmSymbol, vfmSymbol } from './injectionSymbols'
+import { internalVfmSymbol } from './injectionSymbols'
 
 import type { ComponentProps, Constructor, InternalVfm, ModalSlot, ModalSlotOptions, RawProps, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
-import { activeVfm, getActiveVfm, setActiveVfm } from './plugin'
+import { activeVfm, getActiveVfm } from './plugin'
 
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
  * templates.
  */
 export function useVfm(): Vfm {
-  return getActiveVfm()!
+  const vfm = getActiveVfm()
+  if (__DEV__ && !vfm) {
+    throw new Error(
+      '[Vue Final Modal]: 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.',
+    )
+  }
+
+  return vfm!
 }
 
 /**
@@ -53,25 +63,8 @@ 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: () => { },
@@ -83,16 +76,35 @@ export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_opti
       destroy()
   })
 
-  if (options.modelValue === true)
-    options.context?.dynamicModals.push(options)
+  if (options.modelValue === true) {
+    // nextTick will break the SSR, so use `activeVfm` first and then `useVfm()`
+    if (activeVfm) {
+      activeVfm?.dynamicModals.push(options)
+    }
+    else {
+      nextTick(() => {
+        const vfm = useVfm()
+        vfm?.dynamicModals.push(options)
+      })
+    }
+  }
 
-  function open(): Promise<string> {
+  async function open(): Promise<string> {
+    // nextTick will break the SSR, so use `activeVfm` first and then `useVfm()`
+    let vfm: Vfm
+    if (activeVfm) {
+      vfm = activeVfm
+    }
+    else {
+      await nextTick()
+      vfm = useVfm()
+    }
     if (options.modelValue)
       return Promise.resolve('[Vue Final Modal] modal is already opened.')
 
     destroy()
     options.modelValue = true
-    options.context?.dynamicModals.push(options)
+    vfm.dynamicModals.push(options)
 
     return new Promise((resolve) => {
       options.resolveOpened = () => resolve('opened')
@@ -116,8 +128,6 @@ export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_opti
       options.defaultModelValue = _options.defaultModelValue
     if (_options?.keepAlive !== undefined)
       options.keepAlive = _options?.keepAlive
-    if (_options.context)
-      options.context = _options.context
 
     // patch options.component and options.attrs
     patchComponentOptions(options, rest)
@@ -156,11 +166,10 @@ export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_opti
   }
 
   function destroy(): void {
-    if (!options.context)
-      return
-    const index = options.context.dynamicModals.indexOf(options)
+    const vfm = useVfm()
+    const index = vfm.dynamicModals.indexOf(options)
     if (index !== -1)
-      options.context.dynamicModals.splice(index, 1)
+      vfm.dynamicModals.splice(index, 1)
   }
 
   return {

viteplay/src/components/VueFinalModal/Basic.example.vue

@@ -2,10 +2,16 @@
 import { ref } from 'vue'
 import { ModalsContainer, VueFinalModal, useModal, useModalSlot, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
+import { modal } from './modalsHelpers'
 import TestModal from './TestModal.vue'
 
-const { toggle, closeAll } = useVfm()
+console.log('modal → ', modal)
 
+const { toggle, closeAll } = useVfm()
+modal.open().then((res) => { console.log('res', res) })
+modal.open().then((res) => { console.log('res', res) })
+modal.open().then((res) => { console.log('res', res) })
+modal.open().then((res) => { console.log('res', res) })
 const modal1 = useModal({
   keepAlive: true,
   component: VueFinalModal,

viteplay/src/components/VueFinalModal/modalsHelpers.ts

@@ -0,0 +1,20 @@
+import { VueFinalModal, useModal, useModalSlot } from 'vue-final-modal'
+import DefaultSlot from '../DefaultSlot.vue'
+
+console.log('helper')
+export const modal = useModal({
+  component: VueFinalModal,
+  // defaultModelValue: true,
+  slots: {
+    default: useModalSlot({
+      component: DefaultSlot,
+      attrs: {
+        text: '123',
+        onCreate() {
+          // console.log('onCreated')
+        },
+      },
+    }),
+  },
+})
+// modal.open()