import { reactive, markRaw } from "vue";

import type { Component } from "vue";

export type MInfo<T = any> = [HTMLDivElement, Component, Record<string, any> | undefined, T]
export const needMounts: MInfo[] = reactive([])

export const mount = <T>(
  to: HTMLDivElement,
  Component: Component,
  props?: Record<string, any>,
  ref?: (data: T) => void
) => {
  const info = [to, Component, props, ref] as MInfo
  markRaw(Component)
  needMounts.push(info)

  return () => {
    const ndx = needMounts.indexOf(info)
    needMounts.splice(ndx, 1)
  }
};