Function createAngularPanel

packages/devtools-utils/src/angular/panel.ts:28–71

(
  CoreClass:
    | CoreClassConstructor<TanStackDevtoolsPluginProps, TCoreDevtoolsClass>
    | (() => Promise<
        CoreClassConstructor<TanStackDevtoolsPluginProps, TCoreDevtoolsClass>
      >),
)

}

export function createAngularPanel<
  TComponentProps extends DevtoolsPanelProps,
  TCoreDevtoolsClass extends BaseCorePanelClass,
>(
  CoreClass:
    | CoreClassConstructor<TanStackDevtoolsPluginProps, TCoreDevtoolsClass>
    | (() => Promise<
        CoreClassConstructor<TanStackDevtoolsPluginProps, TCoreDevtoolsClass>
      >),
) {
  return [
    () =>
      (inputs: () => TComponentProps, host: HTMLElement): (() => void) => {
        const panel = host.ownerDocument.createElement('div')
        panel.style.height = '100%'
        let unmount: null | (() => void) = null

        function mount(instance: TCoreDevtoolsClass) {
          instance.mount(panel, inputs())
          unmount = () => instance.unmount()
        }

        host.appendChild(panel)

        const isConstructor = isPanelClassConstructor<
          TComponentProps,
          TCoreDevtoolsClass
        >(CoreClass)

        if (isConstructor) {
          mount(new CoreClass(inputs()))
        } else {
          CoreClass()
            .then((ResolvedCoreClass) => new ResolvedCoreClass(inputs()))
            .then(mount)
        }

        return () => {
          unmount?.()
        }
      },
    () => null,
  ] as const
}