Typescript definitions?

[omares]

Hey,

do you maybe have TypeScript type definitions available for your project?

Thanks!

[omares]

As i did not find any i went ahead and created type definitions. In case its ok with you i would contribute these to https://github.com/DefinitelyTyped/DefinitelyTyped

// Type definitions for @glidejs/glide 3.2.6
// Project: https://glidejs.com/
// Definitions by: Ota Mares <https://github.com/omares>

declare module '@glidejs/glide' {
    import Glide from '@glidejs/glide/dist/glide.modular.esm';
    export default Glide;
}

declare module '@glidejs/glide/dist/glide.modular.esm' {
    export type GlideType = 'slider' | 'carousel';
    export type GlideEvent = 'mount.before' | 'mount.after' | 'update' | 'play' | 'pause' | 'build.before' | 'build.after'
        | 'run.before' | 'run' | 'run.after' | 'run.offset' | 'run.start' | 'run.end'
        | 'move' | 'move.after' | 'resize' | 'swipe.start' | 'swipe.move' | 'swipe.end' | 'translate.jump';

    declare interface GlideOptions {
        type?: GlideType;
        startAt?: number;
        perView?: number;
        focusAt?: number;
        gap?: number;
        autoplay?: boolean;
        hoverpause?: boolean;
        keyboard?: boolean;
        bound?: boolean;
        swipeThreshold?: number;
        dragThreshold?: number;
        perTouch?: boolean;
        touchRatio?: number;
        touchAngle?: number;
        animationDuration?: number;
        rewind?: boolean;
        rewindDuration?: number;
        animationTimingFunc?: string;
        throttle?: number;
        direction?: string;
        peek?: number;
        breakpoints?: object;
        classes?: object;
    }

    export declare class DefaultOptions implements GlideOptions {
        public type?: GlideType = 'slider';
        public startAt?: number = 0;
        public perView?: number = 1;
        public focusAt?: number = 0;
        public gap?: number = 10;
        public autoplay?: boolean = false;
        public hoverpause?: boolean = true;
        public keyboard?: boolean = true;
        public bound?: boolean = false;
        public swipeThreshold?: number = 80;
        public dragThreshold?: number = 120;
        public perTouch?: boolean = false;
        public touchRatio?: number = 0.5;
        public touchAngle?: number = 45;
        public animationDuration?: number = 400;
        public rewind?: boolean = true;
        public rewindDuration?: number = 800;
        public animationTimingFunc?: string = 'cubic-bezier(.165, .840, .440, 1)';
        public throttle?: number = 10;
        public direction?: string = 'ltr';
        public peek?: number = 0;
        public breakpoints?: object = {};
        public classes?: {
            direction?: {
                ltr?: string,
                rtl?: string,
            },
            slider?: string,
            carousel?: string,
            swipeable?: string,
            dragging?: string,
            cloneSlide?: string,
            activeNav?: string,
            activeSlide?: string,
            disabledArrow?: string,
        };
    }

    export declare interface EventsBus {
        on(event: GlideEvent | GlideEvent[], handler: (context?: any) => void): void;
        emit(event: GlideEvent | GlideEvent[], context: object): void;
    }

    export default class Glide {
        public index: number;
        public settings: GlideOptions;
        public type: GlideType;
        public disabled: boolean;

        constructor(selector: string, options?: GlideOptions);
        public mount(extensions: object): Glide;
        public mutate(transformers: ((glide: Glide, components: object, events: EventsBus) => void)[]): Glide;
        public update(settings: GlideOptions): Glide;
        public destroy(): Glide;
        public on(event: GlideEvent | GlideEvent[], callback: (context?: any) => void): Glide;
        public go(pattern: string | boolean): Glide;
        public pause(): Glide;
        public play(force: number): Glide;
        public disable(): Glide;
        public enable(): Glide;
        public isType(name: GlideType): boolean;
    }

    declare interface ControlsInterface {
        items: HTMLElement[];
        mount(): void;
        setActive(): void;
        removeActive(): void;
        addClass(controls: HTMLElement): void;
        removeClass(controls: HTMLElement): void;
        addBindings(): void;
        removeBindings(): void;
        bind(elements: HTMLCollection): void;
        unbind(elements: HTMLCollection): void;
        click(event: Event): void;
    }

    export const Controls: ControlsInterface;

    declare interface AnchorsInterface {
        items: HTMLElement[];
        mount(): void;
        bind(): void;
        unbind(): void;
        detach(): AnchorsInterface;
        attach(): AnchorsInterface;
    }

    export const Anchors: AnchorsInterface;

    declare interface AutoplayInterface {
        time: number;
        mount(): void;
        bind(): void;
        unbind(): void;
        start(): void;
        stop(): void;
    }

    export const Autoplay: AutoplayInterface;

    declare interface BreakpointsInterface {
        match(breakpoints: object): object;
    }

    export const Breakpoints: BreakpointsInterface;

    declare interface ImagesInterface {
        mount(): void;
        bind(): void;
        unbind(): void;
        dragstart(event: Event): void;
    }

    export const Images: ImagesInterface;

    declare interface KeyboardInterface {
        mount(): void;
        bind(): void;
        unbind(): void;
        press(event: Event): void;
    }

    export const Keyboard: KeyboardInterface;

}

[bdunn313]

@omares I'd (personally) say go ahead and contribute to definitelytyped! Looks like this was over a month ago that you asked.

For me though - just want to say thanks! I appreciate you dumping the types here for consumption.

[omares]

Oh boy, i still have this on my todo ;) Hope to get this done soonish! Have to add the missing types for the 'internal' components.

Thanks for the motivation.

[omares]

Lets hope for the best :)

Compared to the first version i had to change around a lot of types to adhere the DefinitelyTyped linting, also i noticed that the components i exposed were not reflecting the actual Component function call.

DefinitelyTyped/DefinitelyTyped#34581

[dimitri-luno]

I see your Pull Request didn't get accepted. It is a pity, cause I could really use those TypeScript definitions, and I am sure others too.

@omares Would you be willing to try another DefinitelyTyped PR? Me and maybe other glidejs users could help you get it approved.

[Jordan-Hall]

You can bring these into your own package which is the preferred solution

[kevinlandsberg]

Removing glidejs from my project because js is oldschool and typescript is king... 👯

[ChristianMurphy]

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/49521 was merged there are now typings available https://www.npmjs.com/package/@types/glidejs__glide

[alexmahan]

@ChristianMurphy Thanks for these types! I'm wondering, have you had any success with using the modular esm file with TypeScript? We're currently trying, but getting a Could not find a declaration file for module error when trying to import that module:

[ChristianMurphy]

Credit where credit is due, I didn't add them, @martin-badin did :slightly_smiling_face: I don't think it is currently supported, @alexmahan you are welcome to open a PR to DefinitelyTyped adding support https://github.com/DefinitelyTyped/DefinitelyTyped

[gremo]

Seems that typings are quire... well, wrong. I.e. the Staticdoesn't accept an HTMLElement. Mind to update the typings?

[ChristianMurphy]

@gremo you're welcome to open a PR to https://github.com/DefinitelyTyped/DefinitelyTyped

[icetee]

Seems that typings are quire... well, wrong. I.e. the Staticdoesn't accept an HTMLElement. Mind to update the typings?

I have same issue, but the "mount" resolved it.

const _glide = new Glide('.glide', { ... });

_glide.on(['run.after'], function () { ... });

const mountedGlide = _glide.mount();

Now mountedGlide.index exists and correct type.

[martin-badin]

@icetee Please, could you better describe what you mean? I can update typings but I don't know what you mean. Any links to documentation will be helpful. Thanks a lot

[idmedia-kaiser]

Hi @martin-badin,

the issue is the constructor type constructor(selector: string, options?: Partial<Options>); Because according to the implementation it will also work with an HTMLElement. Check https://github.com/glidejs/glide/blob/v3.6.0/src/components/html.js ` define(Html, 'root', { /**

• Gets node of the glide main element.

• @return {Object} */ get () { return Html._r },

  /**

• Sets node of the glide main element.

• @return {Object} */ set (r) { if (isString(r)) { r = document.querySelector(r) }

  if (exist(r)) { Html._r = r } else { warn('Root element must be a existing Html node') } } })`

If it's a string, it will search it via querySelector, otherwise it just checks if it exists and takes the Element directly So TS doesn't allow to for example to pass a ref from React, but it will work

[martin-badin]

@idmedia-kaiser Thanks for your explanation. PR is merged https://github.com/DefinitelyTyped/DefinitelyTyped/pull/63663#event-8064330326

[icetee]

The type designation is incorrect here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/glidejs__glide/index.d.ts#L158C31-L158C31

The selector HTML element can also be: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/glider-js/index.d.ts#L10C38-L10C38

https://github.com/icetee/DefinitelyTyped/commit/4249f34d85855ce5159bcc22ccb7f117f2692978