refactor: rename h.ts to useVNodesContainer.ts

Author: hunterliu1003

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

@@ -1,6 +1,6 @@
 import type { App, CSSProperties, Component, ComponentInternalInstance, Ref } from 'vue'
 import type { ComponentProps, ComponentSlots } from './Component'
-import type { H } from './h'
+import type { VNodesContainer } from './useVNodesContainer'
 
 export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
@@ -43,7 +43,7 @@ export type Vfm = {
   modals: ComponentInternalInstance[]
   openedModals: ComponentInternalInstance[]
   openedModalOverlays: ComponentInternalInstance[]
-  h: H
+  vNodesContainer: VNodesContainer
   get: (modalId: ModalId) => undefined | ComponentInternalInstance
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>

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

@@ -4,20 +4,20 @@ import { useVfm } from '~/useVfm'
 export const ModalsContainer = defineComponent({
   name: 'ModalsContainer',
   setup() {
-    const { h } = useVfm()
+    const { vNodesContainer } = useVfm()
 
     const uid = Symbol(__DEV__ ? 'ModalsContainer' : '')
-    const shouldMount = computed(() => uid === h.containers.value?.[0])
+    const shouldMount = computed(() => uid === vNodesContainer.containers.value?.[0])
 
-    h.containers.value.push(uid)
+    vNodesContainer.containers.value.push(uid)
     onBeforeUnmount(() => {
-      h.containers.value = h.containers.value.filter(i => i !== uid)
+      vNodesContainer.containers.value = vNodesContainer.containers.value.filter(i => i !== uid)
     })
 
     return () => {
       if (!shouldMount.value)
         return null
-      return h.vNodes
+      return vNodesContainer.vNodes
     }
   },
 })

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

@@ -3,7 +3,7 @@ import { getCurrentInstance, inject, markRaw, ref, shallowReactive } from 'vue'
 import { vfmSymbol } from './injectionSymbols'
 import type { ModalExposed, ModalId, Vfm } from './Modal'
 import { noop } from './utils'
-import { createH } from './h'
+import { useVNodesContainer } from './useVNodesContainer'
 
 // eslint-disable-next-line import/no-mutable-exports
 export let activeVfm: Vfm | undefined
@@ -16,7 +16,7 @@ export const defaultVfm: Vfm = {
   modals: [],
   openedModals: [],
   openedModalOverlays: [],
-  h: {
+  vNodesContainer: {
     vNodes: [],
     containers: ref([]),
     push: noop,
@@ -45,7 +45,7 @@ export function createVfm() {
     modals,
     openedModals,
     openedModalOverlays,
-    h: createH(),
+    vNodesContainer: useVNodesContainer(),
     get(modalId: ModalId) {
       return modals.find(modal => getModalExposed(modal)?.value.modalId?.value === modalId)
     },

packages/vue-final-modal/src/h.ts renamed to packages/vue-final-modal/src/useVNodesContainer.ts

@@ -1,14 +1,14 @@
 import type { Ref, VNode } from 'vue'
 import { ref, shallowReactive } from 'vue'
 
-export type H = {
+export type VNodesContainer = {
   vNodes: VNode[]
   containers: Ref<symbol[]>
   push: (vNode: VNode) => void
   remove: (vNode: VNode) => void
 }
 
-export function createH(): H {
+export function useVNodesContainer(): VNodesContainer {
   const vNodes: VNode[] = shallowReactive([])
   const containers = ref<symbol[]>([])
 
@@ -23,11 +23,11 @@ export function createH(): H {
       vNodes.splice(index, 1)
   }
 
-  const _h: H = {
+  const _vNodesContainer: VNodesContainer = {
     vNodes,
     containers,
     push,
     remove,
   }
-  return _h
+  return _vNodesContainer
 }

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

@@ -3,14 +3,32 @@ import { computed, useAttrs } from 'vue'
 import type { ComponentEmit, ComponentProps } from './Component'
 import type { VueFinalModal } from '.'
 
-export function pickModalProps(props: Record<string, any>, modalProps: Record<string, any>) {
+export function useVfmAttrs<TP extends Component, MP extends Component>(options: {
+  props: ComponentProps<TP>
+  modalProps: ComponentProps<MP>
+  emit?: any
+}) {
+  const { props, modalProps, emit } = options
+  const bindProps = computed(() => pickModalProps(props, modalProps))
+  const bindEmits = byPassAllModalEvents(emit)
+  const attrs = useAttrs()
+  const vfmAttrs = computed(() => ({
+    ...bindProps.value,
+    ...bindEmits,
+    ...attrs,
+  }))
+
+  return vfmAttrs
+}
+
+function pickModalProps(props: Record<string, any>, modalProps: Record<string, any>) {
   return Object.keys(modalProps).reduce<Record<string, any>>((acc, propName) => {
     acc[propName] = props?.[propName]
     return acc
   }, {})
 }
 
-export function byPassAllModalEvents(emit?: ComponentEmit<typeof VueFinalModal>): ComponentProps<typeof VueFinalModal> {
+function byPassAllModalEvents(emit?: ComponentEmit<typeof VueFinalModal>): ComponentProps<typeof VueFinalModal> {
   return {
     'onUpdate:modelValue': (val: boolean) => emit?.('update:modelValue', val),
 
@@ -23,21 +41,3 @@ export function byPassAllModalEvents(emit?: ComponentEmit<typeof VueFinalModal>)
     'onClickOutside': () => emit?.('clickOutside'),
   }
 }
-
-export function useVfmAttrs<TP extends Component, MP extends Component>(options: {
-  props: ComponentProps<TP>
-  modalProps: ComponentProps<MP>
-  emit?: any
-}) {
-  const { props, modalProps, emit } = options
-  const bindProps = computed(() => pickModalProps(props, modalProps))
-  const bindEmits = byPassAllModalEvents(emit)
-  const attrs = useAttrs()
-  const vfmAttrs = computed(() => ({
-    ...bindProps.value,
-    ...bindEmits,
-    ...attrs,
-  }))
-
-  return vfmAttrs
-}