Typescript declarations / usage

[martinlombana]

Hi,

Is it possible to use your library directly with Typescript instead of Babel?

Thanks!

[legomushroom]

Hi @mflmartin!

Thanks for the issue! mojs doesn't restrict you on how would you use it. Of course, you will have to define custom types for Typescript, and frankly I never actually did it.

[martinlombana]

You mean create intermediate classes?

[legomushroom]

@mflmartin that's right

[mateobadillo]

Hey @legomushroom!

Are you planning the types definition file in the near future?

Best Regards!

[legomushroom]

I'd love to, not sure what would be priority for this.

[mateobadillo]

That would be amazing for Angular 2 usage!

[ronanbrett]

I made these for myself, they're very quick and dirty and there's definitely some incorrect types over the place, but might be useful to start with?

https://github.com/Ao21/mojs-typescript-definitions

[legomushroom]

@Ao21 awesome! 🎉 I'll try to use it with typescript shortly. Thanks a lot for this.

[cesarvega]

nice work @Ao21 thank you! is working like a charm

[princefishthrower]

Should https://github.com/Ao21/mojs-typescript-definitions be moved into https://github.com/DefinitelyTyped/DefinitelyTyped ?

[xavierfoucrier]

Hi @princefishthrower,

Thanks for getting in touch!

What about hosting it inside a dedicated mojs repository? Like @mojs/types. I guess it would be better, but may be most developers are using "DefinitelyTyped" repo? :thinking:

Let us know. cc @Sandstedt

We recently change a part of the mojs API, so may be TS definitions need to be reviewed before published.

[Sandstedt]

@martinlombana We have plans to convert mojs to typescript in the future, so then this won't be nessesary, but before that is accomplished, you're more then welcome to submit mo.js to the DefinitelyTyped monorepo. Or provide some instructions how we can submit to it.

Not sure what version of mojs Ao21's/ronanbrett version is, but the only API change we have made for v1 is changing angle to rotate. But depends on what version that type declaration has been using. Last commit is 4 years ago, so could be more changes and a lot of API:s that is missing.

Anyway, you don't need our permission to add it to DefinitelyTyped, but would prefer if it doesn't brake anything for the end user 😊.

[xavierfoucrier]

I totally agree with you @Sandstedt, as usual :sunglasses:

If you want to contribute to mojs types definitions @princefishthrower, you can push them to the DefinitelyTyped monorepo. Just be sure to use the latest mojs API: you can wait for the v1.0.0 release to be sure - in the next few weeks - and yes, we prefer that it doesn't brake anything for the end user of course :smile:

Thanks for contributing to this project!

[P0oOOOo0YA]

No matter what you do writing type definition file for an existing JS library never ends up in a reliable solution. Nowadays Typescript is the way to go for JS developers, having types in place increase code quality, reliability and speed of development. Hope that the maintainers rewrite this wonderful project in TS in near future.

[xavierfoucrier]

Sure, we need to move forward to TypeScript of course, it's a lot of code refactoring, so we will need a lot of spare time to do this, but yeah this is planned :wink:

[sean0x42]

I'd be happy to contribute to a Typescript migration if you need an extra pair of hands.

[Sandstedt]

@sean0x42 Yes please :D Will contact you as soon as we can start with this.

[NOPR9D]

@Sandstedt Also available for help, I would like to take advantage of the typing ^^

[Sandstedt]

We will need to rewrite the entire mojs codebase, so it's a big task, and we haven't started with this yet, too little free time from our side. But we'll let you all know when that happens. Thanks for the interest!

[JwanKaro]

 There is already a typescript impl 🤦‍♂️. didn't see that

Here is a half-baked typescript definitions, that I wrote. Just put it in a .d.ts/ts file and that's it
I've only covered Shape, Tween and Timeline .

declare module "@mojs/core" {
  export = mojs;
}
declare namespace mojs {
  type BuiltInEasing =
    | "linear.none"
    | "ease.in"
    | "ease.out"
    | "ease.inout"
    | "sin.in"
    | "sin.out"
    | "sin.inout"
    | "quad.in"
    | "quad.out"
    | "quad.inout"
    | "cubic.in"
    | "cubic.out"
    | "cubic.inout"
    | "quart.in"
    | "quart.out"
    | "quart.inout"
    | "quint.in"
    | "quint.out"
    | "quint.inout"
    | "expo.in"
    | "expo.out"
    | "expo.inout"
    | "circ.in"
    | "circ.out"
    | "circ.inout"
    | "back.in"
    | "back.out"
    | "back.inout"
    | "elastic.in"
    | "elastic.out"
    | "elastic.inout"
    | "bounce.in"
    | "bounce.out"
    | "bounce.inout"
    | "bezier()";

  type TransitionFromTo = Record<any, any>;
  type StrokeLineCap = "butt" | "round" | "square";

  type ToUnionRecord<K extends string | number | symbol, V> = {
    [Key in K]: { [Key2 in Key]: V };
  }[K];
  /**
   * Represents a shape with various graphical properties.
   */
  interface MainShapeProps {
    /** Parent of the module. Can be a selector string or HTMLElement.
     * @default document.body
     */
    parent?: string | HTMLElement;

    /** Class name.
     * @default ""
     */
    className?: string;

    /** Shape name. Can be one of several predefined shapes or a custom defined name.
     * @default "circle"
     */
    shape:
      | "circle"
      | "rect"
      | "polygon"
      | "line"
      | "cross"
      | "equal"
      | "curve"
      | "zigzag";

    /** Stroke color. Can be a color name, rgb, rgba, or hex value.
     * @default "transparent"
     */
    stroke?: string | TransitionFromTo;

    /** Stroke opacity. A number between 0 and 1.
     * @default 1
     */
    strokeOpacity?: number;

    /** Stroke line cap style. Can be 'butt', 'round', or 'square'.
     * @default ""
     */
    strokeLinecap?: StrokeLineCap | ToUnionRecord<StrokeLineCap, StrokeLineCap>;

    /** Stroke width.
     * @default 2
     */
    strokeWidth?: number | TransitionFromTo;

    /** Stroke dash array. Can be a number or string. */
    strokeDasharray?: number | TransitionFromTo | string;

    /** Stroke dash offset. Can be a number or string. */
    strokeDashoffset?: number | TransitionFromTo | string;

    /** Fill color. Can be a color name, rgb, rgba, or hex value. */
    fill?: string | TransitionFromTo;

    /** Fill opacity. A number between 0 and 1. */
    fillOpacity?: number | TransitionFromTo;

    /** Left position of the module. Can be a number or string. */
    left?: number | TransitionFromTo | string;

    /** Top position of the module. Can be a number or string. */
    top?: number | TransitionFromTo | string;

    /** X shift. Can be a number or string. */
    x?: number | TransitionFromTo | string;

    /** Y shift. Can be a number or string. */
    y?: number | TransitionFromTo | string;

    /** Angle of rotation. */
    rotate?: number | TransitionFromTo | string;

    /** Scale of the module. */
    scale?: number | TransitionFromTo;

    /** Explicit scaleX value. Fallbacks to `scale` if not set. */
    scaleX?: number | TransitionFromTo | null;

    /** Explicit scaleY value. Fallbacks to `scale` if not set. */
    scaleY?: number | TransitionFromTo | null;

    /** Origin for `x`, `y`, `scale`, `rotate` properties. */
    origin?: string;

    /** Opacity of the module. A number between 0 and 1. */
    opacity?: number | TransitionFromTo;

    /** X border radius. Can be a number or string. */
    rx?: number | TransitionFromTo | string;

    /** Y border radius. Can be a number or string. */
    ry?: number | TransitionFromTo | string;

    /** Points count for shapes like polygon, zigzag, equal. Can be a number or string. */
    points?: number | TransitionFromTo | string;

    /** Radius of the shape. Can be a number or string. */
    radius?: number | TransitionFromTo | string;

    /** Radius X of the shape. Fallbacks to `radius` if not set. */
    radiusX?: number | TransitionFromTo | string | null;

    /** Radius Y of the shape. Fallbacks to `radius` if not set. */
    radiusY?: number | TransitionFromTo | string | null;

    /** If true, hides the module with `transforms` instead of `display`. */
    isSoftHide?: boolean;

    /** If true, triggers a composite layer for the module. */
    isForce3d?: boolean;

    /** If true, the module is shown before the animation starts. */
    isShowStart?: boolean;

    /** If true, the module stays shown after the animation ends. */
    isShowEnd?: boolean;

    /** If true, refreshes the state on subsequent plays. */
    isRefreshState?: boolean;

    /** Context in which callbacks will be called. */
    callbacksContext?: object;
  }
  interface TweenProps {
    /* TWEEN PROPERTIES */

    /** Duration of the tween. */
    duration?: number;

    /** Delay before the tween starts. */
    delay?: number;

    /** Number of times the animation should repeat. */
    repeat?: number;

    /** Speed of the tween. */
    speed?: number;

    /** If true, the progress will be flipped on repeat animation end. */
    isYoyo?: boolean;

    /** Easing function for the tween. Can be a string, function, or other values. */
    easing?: BuiltInEasing | Function;

    /** Easing function for backward direction of the tween animation. Fallbacks to `easing`. */
    backwardEasing?: string | Function | null;
  }
  interface TweenCallbacksProps {
    /* TWEEN CALLBACKS */
    /*
    Fires on every update of the tween in any period (including delay periods). You probably want to use `onUpdate` method instead.
    @param p {Number} Normal (not eased) progress.
    @param isForward {Boolean} Direction of the progress.
    @param isYoyo {Boolean} If in `yoyo` period.
  */
    onProgress?: (p: number, isForward: boolean, isYoyo: boolean) => void;
    /*
    Fires when tween's the entire progress reaches `0` point(doesn't fire in repeat periods).
    @param isForward {Boolean} If progress moves in forward direction.
    @param isYoyo {Boolean} If progress inside `yoyo` flip period.
  */
    onStart?: (isForward: boolean, isYoyo: boolean) => void;
    /*
    Fires when tween's the progress reaches `0` point in normal or repeat period.
    @param isForward {Boolean} If progress moves in forward direction.
    @param isYoyo {Boolean} If progress inside `yoyo` flip period.
  */
    onFirstUpdate?: (isForward: boolean, isYoyo: boolean) => void;
    /*
    Fires on first update of the tween in sufficiently active period (excluding delay periods).
    @param ep {Number} Eased progress.
    @param p {Number} Normal (not eased) progress.
    @param isForward {Boolean} Direction of the progress.
    @param isYoyo {Boolean} If in `yoyo` period.
  */
    onUpdate?: (
      easedProgress: number,
      progress: number,
      isForward: boolean,
      isYoyo: boolean
    ) => void;
    /*
    Fires when tween's the progress reaches `1` point in normal or repeat period.
    @param isForward {Boolean} If progress moves in forward direction.
    @param isYoyo {Boolean} If progress inside `yoyo` flip period.
  */
    onRepeatComplete?: (isForward: boolean, isYoyo: boolean) => void;
    /*
    Fires when tween's the entire progress reaches `1` point(doesn't fire in repeat periods).
    @param isForward {Boolean} If progress moves in forward direction.
    @param isYoyo {Boolean} If progress inside `yoyo` flip period.
  */
    onComplete?: (isForward: boolean, isYoyo: boolean) => void;
    /* Fires when the `.play` method called and tween isn't in play state yet. */
    onPlaybackStart?: () => void;
    /* Fires when the `.pause` method called and tween isn't in pause state yet. */
    onPlaybackPause?: () => void;
    /* Fires when the `.stop` method called and tween isn't in stop state yet. */
    onPlaybackStop?: () => void;
    /* Fires when the tween end's animation (regardless progress) */
    onPlaybackComplete?: () => void;
  }

  type ShapeProps = MainShapeProps & TweenProps & TweenCallbacksProps;

  class Shape {
    tween: Tween;
    timeline: Timeline;
    constructor(props: ShapeProps);
    /**
     * Creates next state transition chain.
     * @param options {Object} Next shape state.
     */
    then(options: ShapeProps): this;
    /**
     * Tunes start state with new options.
     * @param options {Object} New start properties.
     */
    tune(options: ShapeProps): this;
    /**
     * Regenerates all randoms in initial properties.
     */
    generate(): this;

    /**
     * Starts playback.
     * @param shift {Number} Start progress shift in milliseconds.
     *
     */
    play(shift?: number): this;
    /**
     * Starts playback in backward direction.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    playBackward(shift?: number): this;
    /**
     * Pauses playback.
     */
    pause(): this;
    /**
     * Restarts playback.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    replay(shift?: number): this;

    /**
     * Restarts playback in backward direction.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    replayBackward(shift?: number): this;

    /**
     * Resumes playback in direction it was prior to `pause`.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    resume(shift?: number): this;

    /**
     * Sets progress of the tween.
     * @param progress {Number} Progress to set [ 0..1 ].
     */
    setProgress(progress: number): this;

    /**
     * Sets speed of the tween.
     * @param speed {Number} Progress to set [ 0..∞ ].
     */
    setSpeed(speed: number): this;

    /**
     * Stops and resets the tween.
     */
    reset(): this;
  }

  class Tween {
    constructor(props: TweenProps);
    /**
     * Starts playback.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    play(shift?: number): this;
    /**
     * Starts playback in backward direction.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    playBackward(shift?: number): this;
    /**
     * Pauses playback.
     */
    pause(): this;
    /**
     * Restarts playback.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    replay(shift?: number): this;
    /**
     * Restarts playback in backward direction.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    replayBackward(shift?: number): this;
    /**
     * Resumes playback in direction it was prior to `pause`.
     * @param shift {Number} Start progress shift in milliseconds.
     */
    resume(shift?: number): this;
    /**
     * Sets progress of the Tween.
     * @param progress {Number} Progress to set [ 0..1 ].
     */
    setProgress(progress: number): this;
    /**
     * Sets speed of the this.
     * @param speed {Number} Progress to set [ 0..∞ ].
     */
    setSpeed(speed: number): this;
    /**
     * Stops and resets the this.
     */
    reset(): this;
  }

  type TimelineProps = TweenProps & TweenCallbacksProps & { duration?: number };
  class Timeline extends Tween {
    constructor(props: TimelineProps);
    /*
    Adds children tweens/timelines to the timeline.
    @param children {Object, Array} Tweens/Timelines or array of such.
  */
    add(tween: (Tween | this) | (Tween | this)[]): Timeline;
    /*
    Appends children tweens/timelines to the timeline after the current children.
    @param children {Object, Array} Tweens/Timelines or array of such.
  */
    append(tween: (Tween | this) | (Tween | this)[]): Timeline;
  }
}

[willlogs]

@JwanKaro You said there is a ts implementation? Could you leave a link to it?

[JwanKaro]

@JwanKaro You said there is a ts implementation? Could you leave a link to it?

More like an old typescript definition

I made these for myself, they're very quick and dirty and there's definitely some incorrect types over the place, but might be useful to start with?

https://github.com/Ao21/mojs-typescript-definitions