insta-toc/src/svelte/helpers/MarkdownComponentMounter.ts

Simultaneously generate, update, and maintain a table of contents for your notes in real time.

import { MarkdownRenderChild } from "obsidian";
import { mount, unmount, type Component } from "svelte";
import type { MountedSvelteComponent, PropsOf } from "../ComponentTypes";

type ComponentParams<TComponent extends Component<any, any>> = { component: TComponent; props: PropsOf<TComponent>; };

export default class MarkdownComponentMounter<TComponent extends Component<any, any>> extends MarkdownRenderChild {
    private mounted: MountedSvelteComponent | null = null;
    private componentParams: ComponentParams<TComponent>;

    public constructor(hostEl: HTMLElement, componentParams: ComponentParams<TComponent>) {
        super(hostEl);
        this.componentParams = componentParams;
    }

    public override onload(): void {
        this.containerEl.replaceChildren();
        this.mounted = mount(this.componentParams.component, {
            target: this.containerEl,
            props: this
                .componentParams
                .props
        });
    }

    public override onunload(): void {
        const mounted = this.mounted;
        this.mounted = null;

        if (mounted) {
            void unmount(mounted);
        }

        super.onunload();
    }
}