vevet 5.2.0 → 5.2.1

package/src/base/Module/index.ts

@@ -4,6 +4,7 @@ import {
   IModuleCallbacksMap,
   IModuleMutableProps,
   IModuleStaticProps,
+  TModuleOnCallbacksProps,
 } from './types';
 import { mergeWithNoUndefined } from '@/internal/mergeWithNoUndefined';
 import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
@@ -65,7 +66,7 @@ export class Module<
   }
 
   /** Callbacks instance */
-  protected _callbacks: Callbacks<CallbacksMap>;
+  protected _callbacks: Callbacks<CallbacksMap, this>;
 
   /**
    * Retrieves the module's callbacks instance.
@@ -80,8 +81,14 @@ export class Module<
   /**
    * Creates a new instance of the Module class.
    */
-  constructor(props?: StaticProps & MutableProps) {
-    this._callbacks = new Callbacks();
+  constructor(
+    props?: StaticProps & MutableProps,
+    onCallbacks?: TModuleOnCallbacksProps<
+      CallbacksMap,
+      Module<CallbacksMap, StaticProps, MutableProps>
+    >,
+  ) {
+    this._callbacks = new Callbacks({ ctx: this });
 
     this._props = mergeWithNoUndefined(
       {
@@ -93,18 +100,20 @@ export class Module<
 
     // Initialize callbacks
 
-    const callbacksProps = Object.keys(this._props).filter((key) =>
-      key.startsWith('on'),
-    );
-
-    callbacksProps.forEach((key) => {
-      let target = key.slice(2);
-      target = target.charAt(0).toLowerCase() + target.slice(1);
-      this._callbacks.on(
-        target as keyof CallbacksMap,
-        this._props[key as keyof typeof props],
+    if (onCallbacks) {
+      const callbacksProps = Object.keys(onCallbacks).filter((key) =>
+        key.startsWith('on'),
       );
-    });
+
+      callbacksProps.forEach((key) => {
+        let target = key.slice(2);
+        target = target.charAt(0).toLowerCase() + target.slice(1);
+        this._callbacks.on(
+          target as keyof CallbacksMap,
+          onCallbacks[key as keyof typeof props],
+        );
+      });
+    }
   }
 
   /**
@@ -150,7 +159,7 @@ export class Module<
   @noopIfDestroyed
   public on<T extends keyof CallbacksMap>(
     target: T,
-    listener: TCallbacksAction<CallbacksMap[T]>,
+    listener: TCallbacksAction<CallbacksMap[T], this>,
     settings: ICallbacksSettings = {},
   ) {
     return this.callbacks.on(target, listener, settings);

package/src/base/Module/types.ts

@@ -1,4 +1,4 @@
-import { ICallbacksMap } from '../Callbacks';
+import { ICallbacksMap, TCallbacksAction } from '../Callbacks';
 
 export interface IModuleStaticProps {
   __staticProp?: null;
@@ -20,6 +20,6 @@ export interface IModuleCallbacksMap extends ICallbacksMap {
   props: undefined;
 }
 
-export type TModuleCallbacksProps<T> = Partial<{
-  [K in keyof T as `on${Capitalize<string & K>}`]: (data: T[K]) => void;
+export type TModuleOnCallbacksProps<T, Ctx> = Partial<{
+  [K in keyof T as `on${Capitalize<string & K>}`]: TCallbacksAction<T[K], Ctx>;
 }>;

package/src/base/Responsive/types.ts

@@ -2,8 +2,8 @@ import { Module } from '../Module';
 
 export type TResponsiveSource = Record<string, any> | Module;
 
-export type TResponsivePick<T> =
-  T extends Module<any, any, any>
+export type TResponsivePick<T extends TResponsiveSource> =
+  T['_getMutable'] extends Function
     ? Partial<ReturnType<T['_getMutable']>>
     : Partial<T>;
 
@@ -24,6 +24,5 @@ export type TResponsiveRule<T extends TResponsiveSource> = {
   props: TResponsivePick<T>;
 };
 
-export type TResponsiveProps<T extends TResponsiveSource> = T extends Module
-  ? T['props']
-  : T;
+export type TResponsiveProps<T extends TResponsiveSource> =
+  T['_getMutable'] extends Function ? T['props'] : T;

package/src/components/Canvas/index.ts

@@ -1,6 +1,6 @@
 import { TRequiredProps } from '@/internal/requiredProps';
 import { onResize } from '@/utils/listeners/onResize';
-import { Module, TModuleCallbacksProps } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import {
   ICanvasCallbacksMap,
   ICanvasMutableProps,
@@ -22,12 +22,12 @@ export * from './types';
  * @group Components
  */
 export class Canvas<
-  CallbacksMap extends ICanvasCallbacksMap = ICanvasCallbacksMap,
-  StaticProps extends ICanvasStaticProps = ICanvasStaticProps,
-  MutableProps extends ICanvasMutableProps = ICanvasMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends ICanvasCallbacksMap = ICanvasCallbacksMap,
+  S extends ICanvasStaticProps = ICanvasStaticProps,
+  M extends ICanvasMutableProps = ICanvasMutableProps,
+> extends Module<C, S, M> {
   /** Get default static properties */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       container: null,
@@ -36,17 +36,17 @@ export class Canvas<
       resizeOnRuntime: false,
       viewportTarget: 'any',
       resizeDebounce: 0,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /** Get default mutable properties */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       width: 'auto',
       height: 'auto',
       dpr: 'auto',
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** The canvas element created for rendering */
@@ -108,9 +108,10 @@ export class Canvas<
    * Constructor for the Ctx2D class.
    */
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Canvas<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     const {
       append: shouldAppend,

package/src/components/CanvasMedia/index.ts

@@ -8,7 +8,7 @@ import {
 import { Canvas, ICanvasRenderArg } from '../Canvas';
 import { addEventListener } from '@/utils';
 import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
-import { TModuleCallbacksProps } from '@/base';
+import { TModuleOnCallbacksProps } from '@/base';
 
 export * from './types';
 
@@ -21,30 +21,31 @@ export * from './types';
  * @group Components
  */
 export class CanvasMedia<
-  CallbacksMap extends ICanvasMediaCallbacksMap = ICanvasMediaCallbacksMap,
-  StaticProps extends ICanvasMediaStaticProps = ICanvasMediaStaticProps,
-  MutableProps extends ICanvasMediaMutableProps = ICanvasMediaMutableProps,
-> extends Canvas<CallbacksMap, StaticProps, MutableProps> {
+  C extends ICanvasMediaCallbacksMap = ICanvasMediaCallbacksMap,
+  S extends ICanvasMediaStaticProps = ICanvasMediaStaticProps,
+  M extends ICanvasMediaMutableProps = ICanvasMediaMutableProps,
+> extends Canvas<C, S, M> {
   /** Get default static properties */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       autoRenderVideo: true,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /** Get default mutable properties */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       rule: 'cover',
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, CanvasMedia<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     this._setMediaEvents();
   }

package/src/components/Cursor/index.ts

@@ -7,7 +7,7 @@ import {
   ICursorStaticProps,
   ICursorType,
 } from './types';
-import { Module, TModuleCallbacksProps } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import { Raf } from '../Raf';
 import { addEventListener } from '@/utils/listeners';
 import { initVevet } from '@/global/initVevet';
@@ -30,21 +30,21 @@ export * from './types';
  * @group Components
  */
 export class Cursor<
-  CallbacksMap extends ICursorCallbacksMap = ICursorCallbacksMap,
-  StaticProps extends ICursorStaticProps = ICursorStaticProps,
-  MutableProps extends ICursorMutableProps = ICursorMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends ICursorCallbacksMap = ICursorCallbacksMap,
+  S extends ICursorStaticProps = ICursorStaticProps,
+  M extends ICursorMutableProps = ICursorMutableProps,
+> extends Module<C, S, M> {
   /** Get default static properties */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       container: window,
       hideNative: false,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /** Get default mutable properties */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       enabled: true,
@@ -52,7 +52,7 @@ export class Cursor<
       height: 50,
       lerp: 0.2,
       autoStop: true,
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /**
@@ -177,9 +177,10 @@ export class Cursor<
   protected _activeTypes: string[];
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Cursor<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     // Set default variables
     const { width, height, enabled: isEnabled } = this.props;

package/src/components/InView/index.ts

@@ -6,7 +6,7 @@ import {
   IInViewMutableProps,
   IInViewStaticProps,
 } from './types';
-import { Module, TModuleCallbacksProps } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import { initVevet } from '@/global/initVevet';
 import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
 import { cnToggle } from '@/internal/cn';
@@ -22,31 +22,31 @@ export * from './types';
  * @group Components
  */
 export class InView<
-  CallbacksMap extends IInViewCallbacksMap = IInViewCallbacksMap,
-  StaticProps extends IInViewStaticProps = IInViewStaticProps,
-  MutableProps extends IInViewMutableProps = IInViewMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends IInViewCallbacksMap = IInViewCallbacksMap,
+  S extends IInViewStaticProps = IInViewStaticProps,
+  M extends IInViewMutableProps = IInViewMutableProps,
+> extends Module<C, S, M> {
   /**
    * Returns default static properties.
    */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       hasOut: true,
       maxInitialDelay: 1000,
       scrollDirection: 'vertical',
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /**
    * Returns default mutable properties.
    */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       enabled: true,
       rootMargin: '0% 0% -5% 0%',
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** Intersection observer for detecting elements entering the viewport. */
@@ -79,9 +79,10 @@ export class InView<
    * Initializes the `InView` module.
    */
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, InView<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     this._setup();
   }

package/src/components/InView/types.ts

@@ -51,16 +51,12 @@ export interface IInViewCallbacksMap extends IModuleCallbacksMap {
   /**
    * Fires when an element enters the viewport.
    */
-  in: {
-    element: Element;
-  };
+  in: { element: Element };
 
   /**
    * Fires when an element leaves the viewport.
    */
-  out: {
-    element: Element;
-  };
+  out: { element: Element };
 }
 
 /**

package/src/components/Marquee/index.ts

@@ -6,7 +6,7 @@ import {
   IMarqueeMutableProps,
   IMarqueeStaticProps,
 } from './types';
-import { Module, TModuleCallbacksProps } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import { Raf } from '../Raf';
 import { initVevet } from '@/global/initVevet';
 import { toPixels } from '@/utils';
@@ -27,23 +27,23 @@ export * from './types';
  * @group Components
  */
 export class Marquee<
-  CallbacksMap extends IMarqueeCallbacksMap = IMarqueeCallbacksMap,
-  StaticProps extends IMarqueeStaticProps = IMarqueeStaticProps,
-  MutableProps extends IMarqueeMutableProps = IMarqueeMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends IMarqueeCallbacksMap = IMarqueeCallbacksMap,
+  S extends IMarqueeStaticProps = IMarqueeStaticProps,
+  M extends IMarqueeMutableProps = IMarqueeMutableProps,
+> extends Module<C, S, M> {
   /** Get default static properties. */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       resizeDebounce: 0,
       hasWillChange: true,
       cloneNodes: true,
       direction: 'horizontal',
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /** Get default mutable properties. */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       speed: 1,
@@ -53,7 +53,7 @@ export class Marquee<
       centered: false,
       adjustSpeed: true,
       pauseOnOut: true,
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** Current container size (width or height depending on direction) */
@@ -124,9 +124,10 @@ export class Marquee<
   protected _intersection?: IntersectionObserver;
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Marquee<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     const { container } = this.props;
     const { isVertical } = this;

package/src/components/Pointers/index.ts

@@ -1,4 +1,4 @@
-import { Module, TModuleCallbacksProps } from '@/base';
+import { Module, TModuleOnCallbacksProps } from '@/base';
 import {
   IPointersCallbacksMap,
   IPointersItem,
@@ -24,14 +24,14 @@ export * from './types';
  * @group Components
  */
 export class Pointers<
-  CallbacksMap extends IPointersCallbacksMap = IPointersCallbacksMap,
-  StaticProps extends IPointersStaticProps = IPointersStaticProps,
-  MutableProps extends IPointersMutableProps = IPointersMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends IPointersCallbacksMap = IPointersCallbacksMap,
+  S extends IPointersStaticProps = IPointersStaticProps,
+  M extends IPointersMutableProps = IPointersMutableProps,
+> extends Module<C, S, M> {
   /**
    * Returns the default static properties.
    */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       buttons: [0],
@@ -39,17 +39,17 @@ export class Pointers<
       minPointers: 1,
       maxPointers: 5,
       disableUserSelect: true,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /**
    * Returns the default mutable properties.
    */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       enabled: true,
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /**
@@ -89,9 +89,10 @@ export class Pointers<
   }
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Pointers<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     // Defaults
     this._pointersMap = new Map();

package/src/components/Preloader/index.ts

@@ -4,7 +4,7 @@ import {
   IPreloaderMutableProps,
   IPreloaderStaticProps,
 } from './types';
-import { Module, TModuleCallbacksProps } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import { Timeline } from '../Timeline';
 import { initVevet } from '@/global/initVevet';
 import { isNumber } from '@/internal/isNumber';
@@ -20,25 +20,25 @@ export * from './types';
  * @group Components
  */
 export class Preloader<
-  CallbacksMap extends IPreloaderCallbacksMap = IPreloaderCallbacksMap,
-  StaticProps extends IPreloaderStaticProps = IPreloaderStaticProps,
-  MutableProps extends IPreloaderMutableProps = IPreloaderMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends IPreloaderCallbacksMap = IPreloaderCallbacksMap,
+  S extends IPreloaderStaticProps = IPreloaderStaticProps,
+  M extends IPreloaderMutableProps = IPreloaderMutableProps,
+> extends Module<C, S, M> {
   /**
    * Retrieves the default static properties.
    */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       hide: 250,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /**
    * Retrieves the default mutable properties.
    */
-  public _getMutable(): TRequiredProps<MutableProps> {
-    return { ...super._getMutable() } as TRequiredProps<MutableProps>;
+  public _getMutable(): TRequiredProps<M> {
+    return { ...super._getMutable() } as TRequiredProps<M>;
   }
 
   /** Indicates if the preloader is in the process of being hidden. */
@@ -58,9 +58,10 @@ export class Preloader<
   }
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Preloader<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     // Handle page load event
     const timeout = setTimeout(() => {

package/src/components/ProgressPreloader/index.ts

@@ -14,9 +14,9 @@ import { Preloader } from '../Preloader';
 import { Raf } from '../Raf';
 import { initVevet } from '@/global/initVevet';
 import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
-import { TModuleCallbacksProps } from '@/base';
 import { cnHas } from '@/internal/cn';
 import { doc } from '@/internal/env';
+import { TModuleOnCallbacksProps } from '@/base';
 
 export * from './types';
 
@@ -31,17 +31,14 @@ const PAGE_RESOURCE = `vevet-page-${Math.random()}`;
  * @group Components
  */
 export class ProgressPreloader<
-  CallbacksMap extends
-    IProgressPreloaderCallbacksMap = IProgressPreloaderCallbacksMap,
-  StaticProps extends
-    IProgressPreloaderStaticProps = IProgressPreloaderStaticProps,
-  MutableProps extends
-    IProgressPreloaderMutableProps = IProgressPreloaderMutableProps,
-> extends Preloader<CallbacksMap, StaticProps, MutableProps> {
+  C extends IProgressPreloaderCallbacksMap = IProgressPreloaderCallbacksMap,
+  S extends IProgressPreloaderStaticProps = IProgressPreloaderStaticProps,
+  M extends IProgressPreloaderMutableProps = IProgressPreloaderMutableProps,
+> extends Preloader<C, S, M> {
   /**
    * Retrieves the default static properties.
    */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       preloadImages: true,
@@ -50,14 +47,14 @@ export class ProgressPreloader<
       ignoreClassName: 'js-preload-ignore',
       lerp: 0.1,
       endDuration: 500,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /**
    * Retrieves the default mutable properties.
    */
-  public _getMutable(): TRequiredProps<MutableProps> {
-    return { ...super._getMutable() } as TRequiredProps<MutableProps>;
+  public _getMutable(): TRequiredProps<M> {
+    return { ...super._getMutable() } as TRequiredProps<M>;
   }
 
   /**
@@ -111,9 +108,10 @@ export class ProgressPreloader<
   protected _raf: Raf;
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, ProgressPreloader<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     // Initialize animation frame if interpolation is enabled
     this._raf = new Raf();

package/src/components/Raf/index.ts

@@ -1,5 +1,5 @@
 import { TRequiredProps } from '@/internal/requiredProps';
-import { Module, TModuleCallbacksProps } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import { IRafCallbacksMap, IRafMutableProps, IRafStaticProps } from './types';
 import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
 
@@ -13,23 +13,23 @@ export * from './types';
  * @group Components
  */
 export class Raf<
-  CallbacksMap extends IRafCallbacksMap = IRafCallbacksMap,
-  StaticProps extends IRafStaticProps = IRafStaticProps,
-  MutableProps extends IRafMutableProps = IRafMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends IRafCallbacksMap = IRafCallbacksMap,
+  S extends IRafStaticProps = IRafStaticProps,
+  M extends IRafMutableProps = IRafMutableProps,
+> extends Module<C, S, M> {
   /** Get default static properties */
-  public _getStatic(): TRequiredProps<StaticProps> {
-    return { ...super._getStatic() } as TRequiredProps<StaticProps>;
+  public _getStatic(): TRequiredProps<S> {
+    return { ...super._getStatic() } as TRequiredProps<S>;
   }
 
   /** Get default mutable properties */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       fps: 'auto',
       enabled: false,
       fpsRecalcFrames: 10,
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** Indicates if the animation frame is currently running */
@@ -84,9 +84,10 @@ export class Raf<
   }
 
   constructor(
-    props?: StaticProps & MutableProps & TModuleCallbacksProps<CallbacksMap>,
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Raf<C, S, M>>,
   ) {
-    super(props);
+    super(props, onCallbacks as any);
 
     // Initialize FPS
     this._fps = this.props.fps === 'auto' ? this._fps : this.props.fps;
@@ -117,7 +118,7 @@ export class Raf<
       return;
     }
 
-    this.updateProps({ enabled: true } as MutableProps);
+    this.updateProps({ enabled: true } as M);
   }
 
   /** Internal method to start the loop */
@@ -141,7 +142,7 @@ export class Raf<
       return;
     }
 
-    this.updateProps({ enabled: false } as MutableProps);
+    this.updateProps({ enabled: false } as M);
   }
 
   /** Internal method to pause the loop */