import { Component, createApp } from 'vue';

interface Extra {
  parent?: HTMLElement;
  createRoot?(): HTMLElement;
  insert?(root: HTMLElement): void;
  remove?(root: HTMLElement): void;
}
export default function mountComponent(
  RootComponent: Component,
  { parent = document.body, createRoot, insert, remove }: Extra = {}
) {
  const app = createApp(RootComponent);

  const root = createRoot ? createRoot() : document.createElement('div');

  // parent.appendChild(root);
  if (insert) insert(root);
  else parent.appendChild(root);

  return {
    instance: app.mount(root),
    unmount() {
      app.unmount();

      // parent.removeChild(root);
      if (remove) remove(root);
      else parent.removeChild(root);
    }
  };
}
