refactor: extraxt DynamiModal component from ModalsContainer

Author: hunterliu1003

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

@@ -63,26 +63,15 @@ export interface UseModalReturnType<T extends ComponentType> {
 ```ts
 export type Vfm = {
   install(app: App): void
-  modals: ComputedRef<Modal>[]
-  openedModals: ComputedRef<Modal>[]
-  openedModalOverlays: ComputedRef<Modal>[]
-  dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
+  modals: ComponentInternalInstance[]
+  openedModals: ComponentInternalInstance[]
+  openedModalOverlays: ComponentInternalInstance[]
+  dynamicModals: VNode[]
   modalsContainers: Ref<symbol[]>
-  get: (modalId: ModalId) => undefined | ComputedRef<Modal>
+  get: (modalId: ModalId) => undefined | ComponentInternalInstance
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>
   close: (modalId: ModalId) => undefined | Promise<string>
-  closeAll: () => Promise<[PromiseSettledResult<Promise<string>[]>]>
-}
-```
-
-## Modal
-
-```ts
-export type Modal = {
-  modalId?: ModalId
-  hideOverlay: Ref<boolean | undefined> | undefined
-  overlayVisible: Ref<boolean>
-  toggle: (show?: boolean) => Promise<string>
+  closeAll: () => Promise<PromiseSettledResult<string>[]>
 }
 ```

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

@@ -1,4 +1,4 @@
-import type { App, CSSProperties, Component, ComponentInternalInstance, FunctionalComponent, Raw, Ref } from 'vue'
+import type { App, CSSProperties, Component, ComponentInternalInstance, FunctionalComponent, Raw, Ref, VNode } from 'vue'
 import type { ComponentProps, ComponentSlots } from './Component'
 
 export type ModalId = number | string | symbol
@@ -41,7 +41,7 @@ export type Vfm = {
   modals: ComponentInternalInstance[]
   openedModals: ComponentInternalInstance[]
   openedModalOverlays: ComponentInternalInstance[]
-  dynamicModals: (UseModalOptions<Component> & UseModalOptionsPrivate)[]
+  dynamicModals: VNode[]
   modalsContainers: Ref<symbol[]>
   get: (modalId: ModalId) => undefined | ComponentInternalInstance
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>

packages/vue-final-modal/src/components/DynamicModal.ts

@@ -0,0 +1,57 @@
+import type { Component, PropType } from 'vue'
+import { defineComponent, h } from 'vue'
+import type { ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate } from '..'
+import { destroyVNode, isModalSlotOptions, useVfm } from '~/useApi'
+import { isString, objectEntries } from '~/utils'
+
+export const DynamicModal = defineComponent({
+  name: 'DynamicModal',
+  props: {
+    modal: {
+      type: Object as PropType<UseModalOptions<Component> & UseModalOptionsPrivate>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { dynamicModals } = useVfm()
+    function renderDynamicModal(modal: (UseModalOptions<Component> & UseModalOptionsPrivate)) {
+      if (!modal.component)
+        return null
+      const slots = objectEntries(modal.slots || {}).reduce((acc, cur) => {
+        const slotName = cur[0] as string
+        const slot = cur[1] as string | Component | ModalSlotOptions
+        if (isString(slot))
+          acc[slotName] = () => h('div', { innerHTML: slot })
+        else if (isModalSlotOptions(slot))
+          acc[slotName] = () => h(slot.component, slot.attrs)
+        else
+          acc[slotName] = () => h(slot)
+        return acc
+      }, {} as any)
+
+      return h(modal.component, {
+        'modelValue': modal.modelValue,
+        'displayDirective': modal?.keepAlive ? 'show' : undefined,
+        ...(typeof modal.attrs === 'object' ? modal.attrs : {}),
+        'onUpdate:modelValue': (value: boolean) => {
+          modal.modelValue = value
+          const onUpdateModelValue = modal.attrs?.['onUpdate:modelValue']
+          if (onUpdateModelValue)
+            onUpdateModelValue(value)
+        },
+        'on_closed': () => {
+          modal?.resolveClosed?.()
+          if (!modal.keepAlive) {
+            const vNode = dynamicModals.find(component => component.key === modal.id)
+            if (!vNode)
+              return
+            destroyVNode(vNode)
+          }
+        },
+        'on_opened': () => modal?.resolveOpened?.(),
+      }, slots)
+    }
+
+    return () => renderDynamicModal(props.modal)
+  },
+})

packages/vue-final-modal/src/components/ModalsContainer.ts

@@ -1,10 +1,8 @@
-import type { Component } from 'vue'
-import { computed, defineComponent, h, onBeforeUnmount } from 'vue'
-import type { ModalSlotOptions } from '..'
-import { isModalSlotOptions, useVfm } from '~/useApi'
-import { isString, objectEntries } from '~/utils'
+import { computed, defineComponent, onBeforeUnmount } from 'vue'
+import { useVfm } from '~/useApi'
 
 export const ModalsContainer = defineComponent({
+  name: 'ModalsContainer',
   setup() {
     const { modalsContainers, dynamicModals } = useVfm()
 
@@ -16,44 +14,11 @@ export const ModalsContainer = defineComponent({
       modalsContainers.value = modalsContainers.value.filter(i => i !== uid)
     })
 
-    function resolvedClosed(index: number) {
-      dynamicModals[index]?.resolveClosed?.()
-      if (!dynamicModals[index]?.keepAlive)
-        dynamicModals.splice(index, 1)
-    }
-
-    function resolvedOpened(index: number) {
-      dynamicModals[index]?.resolveOpened?.()
-    }
-
     return () => {
       if (!shouldMount.value)
         return null
-      return dynamicModals.map((modal, index) => {
-        if (!modal.component)
-          return null
-        const slots = objectEntries(modal.slots || {}).reduce((acc, cur) => {
-          const slotName = cur[0] as string
-          const slot = cur[1] as string | Component | ModalSlotOptions
-          if (isString(slot))
-            acc[slotName] = () => h('div', { innerHTML: slot })
-          else if (isModalSlotOptions(slot))
-            acc[slotName] = () => h(slot.component, slot.attrs)
-          else
-            acc[slotName] = () => h(slot)
-          return acc
-        }, {} as any)
 
-        return h(modal.component, {
-          'key': modal.id,
-          'modelValue': modal.modelValue,
-          'onUpdate:modelValue': (value: boolean) => modal.modelValue = value,
-          'displayDirective': modal?.keepAlive ? 'show' : undefined,
-          ...(typeof modal.attrs === 'object' ? modal.attrs : {}),
-          'on_closed': () => resolvedClosed(index),
-          'on_opened': () => resolvedOpened(index),
-        }, slots)
-      })
+      return dynamicModals
     }
   },
 })

packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue

@@ -208,7 +208,6 @@ export default {
       :style="{ zIndex }"
       role="dialog"
       aria-modal="true"
-      data-scroll-lock-scrollable
       @keydown.esc="() => onEsc()"
       @mouseup.self="() => onMouseupRoot()"
       @mousedown.self="e => onMousedown(e)"

packages/vue-final-modal/src/components/VueFinalModal/useModelValue.ts

@@ -24,6 +24,8 @@ export function useModelValue(
       return _modelValueLocal.value
     },
     set value(val: boolean) {
+      if (_modelValueLocal.value === val)
+        return
       setModelValueLocal(val)
     },
   } as Ref<boolean>

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

@@ -1,7 +1,7 @@
-import type { App, ComponentInternalInstance, ComputedRef } from 'vue'
+import type { App, ComponentInternalInstance, ComputedRef, VNode } from 'vue'
 import { getCurrentInstance, inject, markRaw, ref, shallowReactive } from 'vue'
 import { vfmSymbol } from './injectionSymbols'
-import type { ModalExposed, ModalId, UseModalOptions, UseModalOptionsPrivate, Vfm } from './Modal'
+import type { ModalExposed, ModalId, Vfm } from './Modal'
 import { noop } from './utils'
 
 // eslint-disable-next-line import/no-mutable-exports
@@ -31,7 +31,7 @@ export function createVfm() {
   const modals: ComponentInternalInstance[] = shallowReactive([])
   const openedModals: ComponentInternalInstance[] = shallowReactive([])
   const openedModalOverlays: ComponentInternalInstance[] = shallowReactive([])
-  const dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[] = shallowReactive([])
+  const dynamicModals: VNode[] = shallowReactive([])
   const modalsContainers = ref<symbol[]>([])
 
   const vfm: Vfm = markRaw({

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

@@ -1,10 +1,11 @@
-import type { Component } from 'vue'
-import { computed, markRaw, nextTick, reactive, useAttrs } from 'vue'
+import type { Component, VNode } from 'vue'
+import { computed, h, markRaw, nextTick, reactive, useAttrs } from 'vue'
 import { tryOnUnmounted } from '@vueuse/core'
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
 import type { ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
 import { activeVfm, getActiveVfm } from './plugin'
 import type { ComponentEmit, ComponentProps } from './Component'
+import { DynamicModal } from './components/DynamicModal'
 import { isString, objectEntries } from '~/utils'
 
 /**
@@ -55,48 +56,35 @@ function withMarkRaw<T extends Component>(options: Partial<UseModalOptions<T>>,
  * Create a dynamic modal.
  */
 export function useModal<T extends Component = typeof VueFinalModal>(_options: UseModalOptions<T>): UseModalReturnType<T> {
+  const id = Symbol(__DEV__ ? 'useModal' : '')
+
   const options = reactive({
-    id: Symbol(__DEV__ ? 'useModal' : ''),
+    id,
     modelValue: !!_options?.defaultModelValue,
     resolveOpened: () => { },
     resolveClosed: () => { },
     attrs: {},
     ...withMarkRaw<T>(_options),
   }) as UseModalOptions<T> & UseModalOptionsPrivate
+
+  const vNode = h(DynamicModal, { modal: options, key: id })
+
   tryOnUnmounted(() => {
-    if (!options?.keepAlive)
-      destroy()
+    if (options?.keepAlive)
+      return
+    destroyVNode(vNode)
   })
 
-  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)
-      })
-    }
-  }
+  if (options.modelValue === true)
+    pushVNode(vNode)
 
-  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()
-    }
+  function open(): Promise<string> {
     if (options.modelValue)
       return Promise.resolve('[Vue Final Modal] modal is already opened.')
 
-    destroy()
+    destroyVNode(vNode)
     options.modelValue = true
-    vfm.dynamicModals.push(options)
+    pushVNode(vNode)
 
     return new Promise((resolve) => {
       options.resolveOpened = () => resolve('opened')
@@ -138,41 +126,58 @@ export function useModal<T extends Component = typeof VueFinalModal>(_options: U
     }
   }
 
-  function patchComponentOptions<T extends Component>(
-    options: UseModalOptions<T> | ModalSlotOptions,
-    newOptions: Partial<UseModalOptions<T>> | ModalSlotOptions,
-  ) {
-    if (newOptions.component)
-      options.component = newOptions.component
-
-    if (newOptions.attrs)
-      patchAttrs(options.attrs!, newOptions.attrs)
-  }
-
-  function patchAttrs<T extends Record<string, any>>(attrs: T, newAttrs: Partial<T>): T {
-    Object.entries(newAttrs).forEach(([key, value]) => {
-      attrs[key as keyof T] = value as any
-    })
-
-    return attrs
-  }
-
-  function destroy(): void {
-    const vfm = useVfm()
-    const index = vfm.dynamicModals.indexOf(options)
-    if (index !== -1)
-      vfm.dynamicModals.splice(index, 1)
-  }
-
   return {
     options,
     open,
     close,
     patchOptions,
-    destroy,
+    destroy: () => destroyVNode(vNode),
   }
 }
 
+function patchComponentOptions<T extends Component>(
+  options: UseModalOptions<T> | ModalSlotOptions,
+  newOptions: Partial<UseModalOptions<T>> | ModalSlotOptions,
+) {
+  if (newOptions.component)
+    options.component = newOptions.component
+
+  if (newOptions.attrs)
+    patchAttrs(options.attrs!, newOptions.attrs)
+}
+
+function patchAttrs<T extends Record<string, any>>(attrs: T, newAttrs: Partial<T>): T {
+  Object.entries(newAttrs).forEach(([key, value]) => {
+    attrs[key as keyof T] = value as any
+  })
+
+  return attrs
+}
+
+async function pushVNode(vNode: VNode) {
+  const vfm = await useSsrVfm()
+  vfm?.dynamicModals.push(vNode)
+}
+
+/** nextTick will break the SSR, so use `activeVfm` first and then `useVfm()` */
+async function useSsrVfm(): Promise<Vfm> {
+  if (activeVfm) {
+    return activeVfm
+  }
+  else {
+    await nextTick()
+    return useVfm()
+  }
+}
+
+export function destroyVNode(vNode: VNode): void {
+  const vfm = useVfm()
+
+  const index = vfm?.dynamicModals.indexOf(vNode)
+  if (index !== undefined && index !== -1)
+    vfm?.dynamicModals.splice(index, 1)
+}
+
 export function useModalSlot<T extends Component>(options: {
   component: T
   attrs?: ComponentProps<T>