refactor: improve type, lint, cleanup

Author: hunterliu1003

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

@@ -8,7 +8,7 @@ type Constructor<P = any> = {
   __isFragment?: never
   __isTeleport?: never
   __isSuspense?: never
-  new (...args: any[]): { $props: P }
+  new(...args: any[]): { $props: P }
 }
 
 export interface ModalSlotOptions { component: Raw<ComponentType>; attrs?: Record<string, any> }
@@ -61,16 +61,16 @@ export type Vfm = {
   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>[]>]>
+  closeAll: () => Promise<PromiseSettledResult<string>[]>
 }
 
 export type InternalVfm = {
-  deleteFromModals: (modal: ComputedRef<Modal>) => void
+  openLastOverlay: () => Promise<void>
   moveToLastOpenedModals: (modal: ComputedRef<Modal>) => void
   deleteFromOpenedModals: (modal: ComputedRef<Modal>) => void
   moveToLastOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
   deleteFromOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
-  openLastOverlay: () => Promise<void>
+  deleteFromModals: (modal: ComputedRef<Modal>) => void
   resolvedClosed: (index: number) => void
   resolvedOpened: (index: number) => void
 }

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

@@ -3,31 +3,31 @@ import { computed, onBeforeUnmount } from 'vue'
 import { isString } from '~/utils'
 import { useInternalVfm, useVfm } from '~/useApi'
 
-const vfm = useVfm()
-const _vfm = useInternalVfm()
+const { modalsContainers, dynamicModals } = useVfm()
+const { resolvedClosed, resolvedOpened } = useInternalVfm()
 
 const uid = Symbol('ModalsContainer')
-const shouldMount = computed(() => uid === vfm.modalsContainers.value?.[0])
+const shouldMount = computed(() => uid === modalsContainers.value?.[0])
 
-vfm.modalsContainers.value.push(uid)
+modalsContainers.value.push(uid)
 onBeforeUnmount(() => {
-  vfm.modalsContainers.value = vfm.modalsContainers.value.filter(i => i !== uid)
+  modalsContainers.value = modalsContainers.value.filter(i => i !== uid)
 })
 </script>
 
 <template>
   <template v-if="shouldMount">
     <component
-      :is="modal.component as any"
-      v-for="(modal, index) in vfm.dynamicModals"
+      :is="modal.component"
+      v-for="(modal, index) in dynamicModals"
       :key="modal.id"
       v-bind="{
         displayDirective: modal?.keepAlive ? 'show' : undefined,
         ...(typeof modal.attrs === 'object' ? modal.attrs : {}),
       }"
       v-model="modal.modelValue"
-      @closed="() => _vfm.resolvedClosed?.(index)"
-      @opened="() => _vfm.resolvedOpened?.(index)"
+      @closed="() => resolvedClosed(index)"
+      @opened="() => resolvedOpened(index)"
     >
       <template v-for="(slot, key) in modal.slots" #[key] :key="key">
         <div v-if="isString(slot)" v-html="slot" />

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, toRef, useAttrs, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRef, useAttrs, watch } from 'vue'
 import { vueFinalModalProps } from './VueFinalModalProps'
 import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
@@ -9,10 +9,9 @@ import { useLockScroll } from './useBodyScrollLock'
 import { useZIndex } from './useZIndex'
 import { vVisible } from './vVisible'
 import { noop, once } from '~/utils'
-import type { InternalVfm, Modal, Vfm } from '~/Modal'
+import { type Modal } from '~/Modal'
 import { useSwipeToClose } from '~/useSwipeToClose'
-
-import { internalVfmSymbol, vfmSymbol } from '~/injectionSymbols'
+import { useInternalVfm, useVfm } from '~/useApi'
 
 export interface VueFinalModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
@@ -41,10 +40,7 @@ defineSlots<{
   'swipe-banner'(): void
 }>()
 
-const { modals, openedModals } = inject(vfmSymbol, {
-  modals: [],
-  openedModals: [],
-} as any as Vfm)
+const { modals, openedModals } = useVfm()
 
 const {
   openLastOverlay,
@@ -53,14 +49,7 @@ const {
   moveToLastOpenedModalOverlays,
   deleteFromOpenedModalOverlays,
   deleteFromModals,
-} = inject(internalVfmSymbol, {
-  openLastOverlay: noop,
-  moveToLastOpenedModals: noop,
-  deleteFromOpenedModals: noop,
-  moveToLastOpenedModalOverlays: noop,
-  deleteFromOpenedModalOverlays: noop,
-  deleteFromModals: noop,
-} as any as InternalVfm)
+} = useInternalVfm()
 
 const vfmRootEl = ref<HTMLDivElement>()
 const vfmContentEl = ref<HTMLDivElement>()

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

@@ -2,15 +2,30 @@ import type { App, ComputedRef } 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'
+import { noop } from './utils'
 
 // eslint-disable-next-line import/no-mutable-exports
 export let activeVfm: Vfm | undefined
 
 export const setActiveVfm = (vfm: Vfm | undefined) =>
   (activeVfm = vfm)
 
+export const defaultVfm: Vfm = {
+  install: noop,
+  modals: [],
+  openedModals: [],
+  openedModalOverlays: [],
+  dynamicModals: [],
+  modalsContainers: ref([]),
+  get: () => undefined,
+  toggle: () => undefined,
+  open: () => undefined,
+  close: () => undefined,
+  closeAll: () => Promise.allSettled([]),
+}
+
 export const getActiveVfm = () =>
-  (getCurrentInstance() && inject(vfmSymbol)) || activeVfm
+  (getCurrentInstance() && inject(vfmSymbol, defaultVfm)) || activeVfm
 
 export function createVfm() {
   const modals: ComputedRef<Modal>[] = shallowReactive([])
@@ -46,7 +61,7 @@ export function createVfm() {
       return vfm.toggle(modalId, false)
     },
     closeAll() {
-      return Promise.allSettled([openedModals.map(modal => modal.value.toggle(false))])
+      return Promise.allSettled(openedModals.map(modal => modal.value.toggle(false)))
     },
   })
 

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

@@ -1,12 +1,10 @@
 import { computed, inject, markRaw, nextTick, reactive, useAttrs } from 'vue'
 import { tryOnUnmounted } from '@vueuse/core'
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
-import type VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
-import { internalVfmSymbol } from './injectionSymbols'
-
 import type { ComponentProps, ComponentType, InternalVfm, ModalSlot, ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
 import { activeVfm, getActiveVfm } from './plugin'
-import { isString } from '~/utils'
+import { internalVfmSymbol } from './injectionSymbols'
+import { isString, noop, noopPromise } from '~/utils'
 
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
@@ -17,20 +15,28 @@ export function useVfm(): Vfm {
   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.',
+      + '\tconst vfm = createVfm()\n'
+      + '\tapp.use(vfm)\n'
+      + 'This will fail in production.',
     )
   }
 
   return vfm!
 }
 
-/**
- * Returns the internalVfm instance.
- */
-export function useInternalVfm(): InternalVfm {
-  return inject(internalVfmSymbol)!
+export const defaultInternalVfm: InternalVfm = {
+  openLastOverlay: noopPromise,
+  moveToLastOpenedModals: noop,
+  deleteFromOpenedModals: noop,
+  moveToLastOpenedModalOverlays: noop,
+  deleteFromOpenedModalOverlays: noop,
+  deleteFromModals: noop,
+  resolvedClosed: noop,
+  resolvedOpened: noop,
+}
+
+export function useInternalVfm() {
+  return inject(internalVfmSymbol, defaultInternalVfm)
 }
 
 function withMarkRaw<T extends ComponentType>(options: Partial<UseModalOptions<T>>, DefaultComponent: ComponentType = VueFinalModal) {

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

@@ -8,6 +8,7 @@ export const once
     }
 
 export const noop = () => {}
+export const noopPromise = async () => {}
 
 export function clamp(val: number, min: number, max: number) {
   return val > max ? max : val < min ? min : val

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

@@ -47,7 +47,7 @@ const modal2 = useModal({
     background: 'interactive',
   },
   slots: {
-    default: useModalSlot('test'),
+    default: 'test'
   },
 })