glide

glide copied to clipboard

Hey,

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

Thanks!

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;

}

@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.

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.

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

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.

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

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

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

@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:

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

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

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

Seems that typings are quire... well, wrong. I.e. the Static doesn'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.

@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

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

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

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