Class TypedComponent

apps/client/src/components/component.ts:17–175

 *   event / command is executed in all components - by simply awaiting the `triggerEvent()`.
 */
export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
    $widget!: JQuery<HTMLElement>;
    componentId: string;
    children: ChildT[];
    initialized: Promise<void> | null;
    parent?: TypedComponent<any>;
    _position!: number;
    private listeners: Record<string, EventHandler[]> | null = {};

    constructor() {
        this.componentId = `${this.sanitizedClassName}-${utils.randomString(8)}`;
        this.children = [];
        this.initialized = null;
    }

    get sanitizedClassName() {
        // webpack mangles names and sometimes uses unsafe characters
        return this.constructor.name.replace(/[^A-Z0-9]/gi, "_");
    }

    get position() {
        return this._position;
    }

    set position(newPosition: number) {
        this._position = newPosition;
    }

    setParent(parent: TypedComponent<any>) {
        this.parent = parent;
        return this;
    }

    child(...components: ChildT[]) {
        for (const component of components) {
            component.setParent(this);

            this.children.push(component);
        }

        return this;
    }

    /**
     * Removes a child component from this component's children array.
     * This is used for cleanup when a widget is unmounted to prevent event listener accumulation.
     */
    removeChild(component: ChildT) {
        const index = this.children.indexOf(component);
        if (index !== -1) {
            this.children.splice(index, 1);
            component.parent = undefined;
        }
    }

    handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
        try {
            const callMethodPromise = this.initialized ? this.initialized.then(() => this.callMethod((this as any)[`${name}Event`], data)) : this.callMethod((this as any)[`${name}Event`], data);