Reimplement EventBus

[cagataycivici]

Current implementation uses an html comment element and causes conflicts, instead create a map based EventBus to avoid these cases.

[tft7000]

@cagataycivici : if I may ask: is TypeScript support planned for the EventBus?

The reason I ask: EventBus is used in the primevue templates. If I rewrite part of them in TypeScript, I need also the EventBus in TypeScript.

[tft7000]

in case anybody is interested:

with the following command it is possible to create type definitions for utils.js (including the EventBus, DomHandler, ..):

npx -p typescript tsc node_modules/primevue/utils/utils.esm.js --declaration --allowJs --emitDeclarationOnly --outDir src/types

the content of the resulting file should be surrounded by a module declaration for primevue/utils:

declare module "primevue/utils" {
  export class ConnectedOverlayScrollHandler {
    constructor(element: any, listener?: () => void);
    element: any;
    listener: () => void;
    bindScrollListener(): void;
    scrollableParents: any[];
    unbindScrollListener(): void;
    destroy(): void;
  }
  export class DomHandler {
    static innerWidth(el: any): any;
    static width(el: any): any;
    static getWindowScrollTop(): number;
    static getWindowScrollLeft(): number;
    static getOuterWidth(el: any, margin: any): any;
    static getOuterHeight(el: any, margin: any): any;
    static getClientHeight(el: any, margin: any): any;
    static getViewport(): {
      width: number;
      height: number;
    };
    static getOffset(
      el: any
    ): {
      top: any;
      left: any;
    };
    static index(element: any): number;
    static addMultipleClasses(element: any, className: any): void;
    static addClass(element: any, className: any): void;
    static removeClass(element: any, className: any): void;
    static hasClass(element: any, className: any): any;
    static find(element: any, selector: any): any;
    static findSingle(element: any, selector: any): any;
    static getHeight(el: any): any;
    static getWidth(el: any): any;
    static absolutePosition(element: any, target: any): void;
    static relativePosition(element: any, target: any): void;
    static getParents(element: any, parents?: any[]): any;
    static getScrollableParents(element: any): any[];
    static getHiddenElementOuterHeight(element: any): any;
    static getHiddenElementOuterWidth(element: any): any;
    static getHiddenElementDimensions(
      element: any
    ): {
      width: any;
      height: any;
    };
    static fadeIn(element: any, duration: any): void;
    static fadeOut(element: any, ms: any): void;
    static getUserAgent(): string;
    static appendChild(element: any, target: any): void;
    static scrollInView(container: any, item: any): void;
    static clearSelection(): void;
    static calculateScrollbarWidth(): number;
    static getBrowser(): {};
    static resolveUserAgent(): {
      browser: any;
      version: any;
    };
    static isVisible(element: any): boolean;
    static invokeElementMethod(element: any, methodName: any, args: any): void;
    static getFocusableElements(element: any): any[];
    static isClickable(element: any): any;
    static applyStyle(element: any, style: any): void;
    static isIOS(): boolean;
    static isAndroid(): boolean;
  }
  declare function primebus(): {
    on(type: any, handler: any): void;
    off(type: any, handler: any): void;
    emit(type: any, evt: any): void;
  };
  export class ObjectUtils {
    static equals(obj1: any, obj2: any, field: any): boolean;
    static deepEquals(a: any, b: any): boolean;
    static resolveFieldData(data: any, field: any): any;
    static isFunction(obj: any): boolean;
    static filter(value: any, fields: any, filterValue: any): any[];
    static reorderArray(value: any, from: any, to: any): void;
    static findIndexInList(value: any, list: any): number;
    static contains(value: any, list: any): boolean;
    static insertIntoOrderedArray(
      item: any,
      index: any,
      arr: any,
      sourceArr: any
    ): void;
    static removeAccents(str: any): any;
  }
  export function UniqueComponentId(prefix?: string): string;
  export namespace ZIndexUtils {
    export { getZIndex as get };
    export function set(key: any, el: any, baseZIndex: any): void;
    export function clear(el: any): void;
    export function getCurrent(): any;
  }
  declare function getZIndex(el: any): number;
  export { primebus as EventBus };
}

I hope this helps.

[PeterHewat]

Hi @tft7000,

TypeScript support out of the box would certainly be good.
Fortunetly, it is already on @cagataycivici's roadmap:
https://github.com/primefaces/primevue/wiki/Roadmap

Thanks for the tip on auto generating the .d.ts file. It helped me out.

In my case, I had to replace the any and {} types by unknown (strict eslint@typescript-eslint/no-explicit-any) and I had to remove declare in front of functions (A 'declare' modifier cannot be used in an already ambient context.ts(1038)).

Other than that, I can now import from "primevue/utils" inside a .ts file without any Could not find a declaration file for module 'primevue/utils'. 'node_modules/primevue/utils/utils.cjs.js' implicitly has an 'any' type.ts(7016)

Cheers 👍

[mertsincan]

Hi all,

Fixed in #1622