-
-
Notifications
You must be signed in to change notification settings - Fork 894
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Typescript declarations / usage #109
Comments
Hi @mflmartin! Thanks for the issue! |
You mean create intermediate classes?
|
@mflmartin that's right |
Hey @legomushroom! Are you planning the types definition file in the near future? Best Regards! |
I'd love to, not sure what would be priority for this. |
That would be amazing for Angular 2 usage! |
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? |
@ao21 awesome! 🎉 I'll try to use it with typescript shortly. Thanks a lot for this. |
nice work @ao21 thank you! is working like a charm |
Thanks for getting in touch! What about hosting it inside a dedicated Let us know.
|
@martinlombana Not sure what version of mojs Ao21's/ronanbrett version is, but the only API change we have made for v1 is changing 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 😊. |
I totally agree with you @Sandstedt, as usual 😎 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 Thanks for contributing to this project! |
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. |
Sure, we need to move forward to |
I'd be happy to contribute to a Typescript migration if you need an extra pair of hands. |
@sean0x42 Yes please :D Will contact you as soon as we can start with this. |
@Sandstedt Also available for help, I would like to take advantage of the typing ^^ |
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! |
Here is a half-baked typescript definitions, that I wrote. Just put it in a .d.ts/ts file and that's it 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;
}
} |
@JwanKaro |
More like an old typescript definition
|
Hi,
Is it possible to use your library directly with Typescript instead of Babel?
Thanks!
The text was updated successfully, but these errors were encountered: