refactor: rewrite ModalsContainer with render function

Author: hunterliu1003

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

@@ -0,0 +1,59 @@
+import type { Component } from 'vue-demi'
+import { computed, defineComponent, h, onBeforeUnmount } from 'vue-demi'
+import type { ModalSlotOptions } from '..'
+import { isModalSlotOptions, useVfm } from '~/useApi'
+import { isString, objectEntries } from '~/utils'
+
+export const ModalsContainer = defineComponent({
+  setup() {
+    const { modalsContainers, dynamicModals } = useVfm()
+
+    const uid = Symbol(__DEV__ ? 'ModalsContainer' : '')
+    const shouldMount = computed(() => uid === modalsContainers.value?.[0])
+
+    modalsContainers.value.push(uid)
+    onBeforeUnmount(() => {
+      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)
+      })
+    }
+  },
+})

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

@@ -24,6 +24,11 @@ export interface VueFinalModalEmits {
 
   /** onClickOutside will only be emitted when clickToClose equal to `false` */
   (e: 'clickOutside'): void
+
+  /** Internal event, only used in ModalsContainer */
+  (e: '_opened'): void
+  /** Internal event, only used in ModalsContainer */
+  (e: '_closed'): void
 }
 
 const props = defineProps(vueFinalModalProps)
@@ -75,13 +80,17 @@ const {
   },
   onEnter() {
     emit('opened')
+    // eslint-disable-next-line vue/custom-event-name-casing
+    emit('_opened')
     resolveToggle('opened')
   },
   onLeave() {
     arrayRemoveItem(openedModals, instance)
     resetZIndex()
     enableBodyScroll()
     emit('closed')
+    // eslint-disable-next-line vue/custom-event-name-casing
+    emit('_closed')
     resolveToggle('closed')
   },
 })

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

@@ -1,4 +1,4 @@
-import ModalsContainer from './components/ModalsContainer.vue'
+import { ModalsContainer } from './components/ModalsContainer'
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
 
 import type { Vfm } from './Modal'