vevet 4.4.2 → 5.0.1

package/src/base/Module/index.ts

@@ -1,116 +1,57 @@
-import { NModule } from './types';
-import { MutableProps, NMutableProps } from '../MutableProps';
-import { Callbacks, NCallbacks } from '../Callbacks';
-import { TRequiredModuleProp } from '@/types/utility';
-import { getApp } from '@/utils/internal/getApp';
-import { createViewport } from '@/src/Vevet/events/createViewport';
-import { addEventListener } from '@/utils/dom/addEventListener';
+import { TRequiredProps } from '@/internal/requiredProps';
+import { Callbacks, ICallbacksSettings, TCallbacksAction } from '../Callbacks';
+import {
+  IModuleCallbacksMap,
+  IModuleMutableProps,
+  IModuleStaticProps,
+} from './types';
 
-export type { NModule };
+// todo: jsdoc
 
-type TViewportAdd = ReturnType<typeof createViewport>['callbacks']['add'];
+export * from './types';
 
 /**
  * A base class for modules that handle responsive properties, event listeners, and custom callbacks.
- * This class provides a structure for modules that can dynamically respond to viewport changes, property mutations, and various lifecycle events.
  *
- * @example
- *
- * interface IStaticProps extends NModule.IStaticProps {
- *   staticName: 'My name';
- * }
- *
- * interface IChangeableProps extends NModule.IChangeableProps {
- *   weight: number;
- *   height: number;
- * }
- *
- * interface ICallbacks extends NModule.ICallbacksTypes {}
- *
- * const module = new Module<IStaticProps, IChangeableProps, ICallbacks>({
- *   staticName: 'My name',
- *   weight: 70,
- *   height: 175,
- * }, false);
- *
- * module.addResponsiveProps({
- *   breakpoint: 'viewport_phone',
- *   settings: {
- *     weight: 80,
- *   },
- * });
- *
- * module.init();
- *
- * module.addCallback('propsMutate', () => console.log('mutate props'));
- * module.addCallback('destroy', () => console.log('destroy'));
+ * @group Base
  */
 export class Module<
-  StaticProps extends NModule.IStaticProps = NModule.IStaticProps,
-  ChangeableProps extends NModule.IChangeableProps = NModule.IChangeableProps,
-  CallbacksTypes extends NModule.ICallbacksTypes = NModule.ICallbacksTypes,
+  CallbacksMap extends IModuleCallbacksMap = IModuleCallbacksMap,
+  StaticProps extends IModuleStaticProps = IModuleStaticProps,
+  MutableProps extends IModuleMutableProps = IModuleMutableProps,
 > {
-  /**
-   * Retrieves the default properties for the module. This method is intended to be overridden in subclasses to provide default values for the module's properties.
-   */
-  protected _getDefaultProps() {
-    return {};
+  /** Get default static props */
+  public _getStatic(): TRequiredProps<StaticProps> {
+    return { __staticProp: null } as TRequiredProps<StaticProps>;
   }
 
-  /**
-   * The current properties of the module, which include both static and changeable properties.
-   * These can be retrieved dynamically during the module's lifecycle.
-   */
-  get props() {
-    return this._mutableProps.props as TRequiredModuleProp<
-      StaticProps & ChangeableProps
-    >;
+  /** Set default mutable props */
+  public _getMutable(): TRequiredProps<MutableProps> {
+    return { __mutableProp: null } as TRequiredProps<MutableProps>;
   }
 
-  /** Manages the module's mutable properties */
-  private _mutableProps: MutableProps<StaticProps, ChangeableProps>;
-
-  /** Manages the module's callbacks */
-  private _callbacks: Callbacks<CallbacksTypes>;
+  /** Current properties */
+  protected _props: TRequiredProps<MutableProps & StaticProps>;
 
   /**
-   * Retrieves the module's registered callbacks.
+   * Current properties. Do not mutate these directly, use {@linkcode updateProps} instead.
    */
-  get callbacks() {
-    return this._callbacks;
-  }
-
-  /** Holds the list of event listeners added to the module */
-  private _listeners: (() => void)[];
-
-  /** Stores actions that need to be executed when the module is destroyed */
-  private _destroyableActions: (() => void)[];
-
-  /** Stores the class names to be removed when the module is destroyed */
-  private _classNamesToRemove: NModule.IClassNamesToRemove[];
-
-  /** The name of the module, derived from the class name */
-  get name() {
-    return this.constructor.name;
+  get props() {
+    return this._props;
   }
 
-  /** Optional prefix for class names used by the module */
+  /** Optional prefix for classnames used by the module */
   get prefix() {
     return '';
   }
 
-  /** Tracks whether the module has been initialized */
-  private _isInitialized = false;
-
-  /**
-   * Checks if the module has been initialized.
-   */
-  get isInitialized() {
-    return this._isInitialized;
+  /** The name of the module, derived from the class name */
+  get name() {
+    return this.constructor.name;
   }
 
   /** Tracks whether the module has been destroyed */
-  private _isDestroyed = false;
+  protected _isDestroyed = false;
 
   /**
    * Checks if the module has been destroyed.
@@ -119,188 +60,96 @@ export class Module<
     return this._isDestroyed;
   }
 
-  /**
-   * Creates a new instance of the Module class.
-   *
-   * @param initialProps - The initial static and changeable properties to be used by the module.
-   * @param canInit - Whether to automatically initialize the module after construction. Set this to `false` if you want to add responsive properties before initializing.
-   */
-  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
-    if (!getApp()) {
-      throw new Error('Vevet.Application does not exist yet');
-    }
-
-    this._callbacks = new Callbacks<CallbacksTypes>();
-    this._listeners = [];
-    this._destroyableActions = [];
-    this._classNamesToRemove = [];
-
-    const props = {
-      ...this._getDefaultProps(),
-      ...(initialProps || {}),
-    };
-
-    this._mutableProps = new MutableProps(
-      props as StaticProps & ChangeableProps,
-      () => this._onPropsMutate(),
-      this.name,
-    );
-
-    if (canInit) {
-      this.init();
-    }
-  }
+  /** Callbacks instance */
+  protected _callbacks: Callbacks<CallbacksMap>;
 
   /**
-   * Adds responsive property rules to the module. This must be done before initialization.
-   *
-   * @param rules - The responsive property rules to be added.
+   * Retrieves the module's callbacks instance.
    */
-  public addResponsiveProps(rules: NMutableProps.IResponsive<ChangeableProps>) {
-    if (this.isInitialized) {
-      throw new Error(
-        'Responsive properties cannot be added after `init` is called',
-      );
-    } else {
-      this._mutableProps.addResponsiveProps(rules);
-    }
+  get callbacks() {
+    return this._callbacks;
   }
 
+  /** Stores actions that need to be executed when the module is destroyed */
+  protected _destroyable: (() => void)[] = [];
+
   /**
-   * Updates the changeable properties of the module.
-   *
-   * @param props - The properties to be updated.
+   * Creates a new instance of the Module class.
    */
-  public changeProps(props: Partial<ChangeableProps>) {
-    if (this.isDestroyed) {
-      return;
-    }
-
-    this._mutableProps.changeProps(props);
+  constructor(props?: StaticProps & MutableProps) {
+    this._callbacks = new Callbacks();
 
-    this._callbacks.tbt('propsChange', undefined);
+    this._props = {
+      ...this._getStatic(),
+      ...this._getMutable(),
+      ...props,
+    } as TRequiredProps<MutableProps & StaticProps>;
   }
 
   /**
-   * This method is called internally when the module's properties change.
+   * Method that is called when the module's properties mutate. In most cases, used to handle callbacks.
    */
-  protected _onPropsMutate() {
-    this._callbacks.tbt('propsMutate', undefined);
+  protected _handleProps() {
+    this.callbacks.emit('props', undefined);
   }
 
-  /**
-   * Initializes the module. Calls the internal `_init` method and marks the module as initialized.
-   */
-  public init() {
-    if (this.isInitialized) {
-      return;
-    }
-
-    this._isInitialized = true;
+  /** Change module's mutable properties */
+  public updateProps(props: Partial<MutableProps>) {
+    this._props = {
+      ...this._props,
+      ...props,
+    };
 
-    this._init();
+    this._handleProps();
   }
 
   /**
-   * Additional initialization logic that can be overridden in subclasses.
-   */
-  protected _init() {}
-
-  /**
-   * Adds an action to the list of actions to be executed when the module is destroyed.
+   * Adds a callback on the module's destruction.
    *
    * @param action - The function to execute during destruction.
    */
-  protected addDestroyableAction(action: () => void) {
-    this._destroyableActions.push(action);
-  }
-
-  /**
-   * Adds a viewport callback that will be automatically removed when the module is destroyed.
-   *
-   * @param target - The viewport target (e.g., width or height).
-   * @param action - The callback function to execute when the viewport target changes.
-   * @param data - Additional data for the callback.
-   */
-  public addViewportCallback(
-    target: Parameters<TViewportAdd>[0],
-    action: Parameters<TViewportAdd>[1],
-    data: Parameters<TViewportAdd>[2] = {},
-  ) {
-    const callback = getApp().viewport.callbacks.add(target, action, {
-      ...data,
-      name: this.constructor.name,
-    });
-
-    this.addDestroyableAction(() => callback.remove());
+  public onDestroy(action: () => void) {
+    this._destroyable.push(action);
   }
 
   /**
    * Adds a custom callback to the module.
    *
-   * @param target - The event type to listen for (e.g., 'propsChange', 'destroy').
-   * @param action - The function to execute when the event is triggered.
+   * @param target - The event type to listen for (e.g., 'props', 'destroy').
+   * @param listener - The function to execute when the event is triggered.
    * @param settings - Additional settings for the callback.
    */
-  public addCallback<T extends keyof CallbacksTypes>(
+  public on<T extends keyof CallbacksMap>(
     target: T,
-    action: NCallbacks.TAction<CallbacksTypes[T]>,
-    settings: NCallbacks.ISettings = {},
-  ) {
-    return this.callbacks.add(target, action, settings);
-  }
-
-  /**
-   * Adds a DOM event listener that will be automatically removed when the module is destroyed.
-   *
-   * @param element - The target element for the event listener.
-   * @param target - The event type to listen for (e.g., 'click', 'resize').
-   * @param callback - The callback function to execute when the event is triggered.
-   * @param options - Additional options for the event listener.
-   */
-  public addEventListener<
-    Target extends keyof HTMLElementEventMap,
-    Listener extends (event: DocumentEventMap[Target]) => void,
-  >(
-    element: Document | Element | Window,
-    target: Target,
-    callback: Listener,
-    options?: boolean | AddEventListenerOptions,
+    listener: TCallbacksAction<CallbacksMap[T]>,
+    settings: ICallbacksSettings = {},
   ) {
-    const listener = addEventListener(element, target, callback, options);
-    this._listeners.push(listener);
-
-    return listener;
+    return this.callbacks.on(target, listener, settings);
   }
 
   /**
-   * Helper function to generate class names with the module's prefix.
+   * Helper function to generate classnames with the module's prefix.
    *
    * @param classNames - The class names to generate.
    * @returns A string of class names with the module's prefix applied.
    */
-  protected className(...classNames: string[]) {
+  protected _cn(...classNames: string[]) {
     return classNames.map((value) => `${this.prefix}${value}`).join(' ');
   }
 
   /**
-   * Toggles a class name on an element, and keeps track of it for removal when the module is destroyed.
+   * Adds a class name on an element, and keeps track of it for removal when the module is destroyed.
    *
    * @param element - The target DOM element.
    * @param className - The class name to toggle.
-   * @param isActive - Whether the class should be added or removed.
    */
-  protected toggleClassName(
-    element: Element,
-    className: string,
-    isActive: boolean,
-  ) {
+  protected _addTempClassName(element: Element, className: string) {
     const isAlreadyExists = element.classList.contains(className);
 
-    element.classList.toggle(className, isActive);
-
     if (!isAlreadyExists) {
-      this._classNamesToRemove.push({ element, className });
+      element.classList.add(className);
+
+      this.onDestroy(() => element.classList.remove(className));
     }
   }
 
@@ -320,17 +169,10 @@ export class Module<
    * It removes all callbacks, destroys properties, and cleans up event listeners and class names.
    */
   protected _destroy() {
-    this._callbacks.tbt('destroy', undefined);
+    this._callbacks.emit('destroy', undefined);
     this._callbacks.destroy();
 
-    this._mutableProps.destroy();
-
-    this._destroyableActions.forEach((action) => action());
-    this._listeners.forEach((listener) => listener());
-
-    this._classNamesToRemove.forEach(({ element, className }) =>
-      element.classList.remove(className),
-    );
+    this._destroyable.forEach((action) => action());
 
     this._isDestroyed = true;
   }

package/src/base/Module/types.ts

@@ -1,56 +1,21 @@
-import { NCallbacks } from '../Callbacks/types';
+import { ICallbacksMap } from '../Callbacks';
 
-export namespace NModule {
-  /**
-   * Interface representing the properties that can change dynamically.
-   * These properties may be updated during window resize events or through
-   * the {@linkcode Module.changeProps} method.
-   */
-  export interface IChangeableProps {
-    __fixHelperChangeableProps?: any;
-  }
+export interface IModuleStaticProps {
+  __staticProp?: null;
+}
 
-  /**
-   * Interface representing static properties that remain constant and do not change
-   * after initialization.
-   */
-  export interface IStaticProps {
-    __fixHelperStaticProps?: any;
-  }
+export interface IModuleMutableProps {
+  __mutableProp?: null;
+}
 
+export interface IModuleCallbacksMap extends ICallbacksMap {
   /**
-   * Defines the available callback types for the module.
-   * These callbacks allow interaction with specific module events.
+   * Triggered when the module is destroyed.
    */
-  export interface ICallbacksTypes extends NCallbacks.ITypes {
-    /**
-     * Triggered when the module is destroyed.
-     */
-    destroy: undefined;
-
-    /**
-     * Triggered when module properties are manually changed.
-     */
-    propsChange: undefined;
-
-    /**
-     * Triggered when module properties mutate due to responsive settings or other updates.
-     */
-    propsMutate: undefined;
-  }
+  destroy: undefined;
 
   /**
-   * Represents the class names to be removed from an element when the module is destroyed.
+   * Triggered when the module's properties are updated.
    */
-  export interface IClassNamesToRemove {
-    /**
-     * The DOM element from which the class name should be removed.
-     */
-    element: Element;
-
-    /**
-     * The class name that should be removed from the element.
-     */
-    className: string;
-  }
+  props: undefined;
 }

package/src/base/Responsive/index.ts

@@ -0,0 +1,197 @@
+/* eslint-disable no-underscore-dangle */
+import { initVevet } from '@/global/initVevet';
+import { TResponsiveProps, TResponsiveRule, TResponsiveSource } from './types';
+import { Module } from '../Module';
+
+export * from './types';
+
+export class Responsive<T extends TResponsiveSource> {
+  /** Tracks whether the instance has been destroyed */
+  protected _isDestroyed = false;
+
+  /** Destroyable actions */
+  protected _destructors: (() => void)[] = [];
+
+  /** Previously active breakpoints */
+  protected _prevBreakpoints = '[]';
+
+  /** Initial props */
+  protected _initProps!: TResponsiveProps<T>;
+
+  /** Current props */
+  protected _props: TResponsiveProps<T>;
+
+  /** Current props */
+  get props() {
+    return this._props;
+  }
+
+  constructor(
+    protected _source: T,
+    protected _rules: TResponsiveRule<T>[],
+    protected _onChange?: (props: TResponsiveProps<T>) => void,
+  ) {
+    const source = _source;
+
+    const app = initVevet();
+    const sourceName = source instanceof Module ? source.name : 'Object';
+
+    // Fetch initial props
+    this._fetchInitProps();
+
+    // Save current props
+    this._props = { ...this._initProps };
+
+    // Override Module's `updateProps`
+    if (source instanceof Module) {
+      source.on('destroy', () => this.destroy(), {
+        name: this.constructor.name,
+        protected: true,
+      });
+
+      const saveUpdateProps = source.updateProps.bind(source);
+
+      source.updateProps = (p) => {
+        saveUpdateProps(p);
+        this._initProps = { ...this._initProps, ...p };
+      };
+
+      Object.defineProperty(source, '_$_responseProps', {
+        value: (p: any) => {
+          saveUpdateProps(p);
+        },
+      });
+    }
+
+    // Update Props
+    this._handleUpdate();
+
+    // Add viewport listener
+    this._destructors.push(
+      app.onViewport('any', () => this._handleUpdate(), {
+        name: `${this.constructor.name} / ${sourceName}`,
+      }),
+    );
+  }
+
+  /** Set initial props */
+  protected _fetchInitProps() {
+    const source = this._source;
+
+    if (source instanceof Module) {
+      this._initProps = {} as any;
+
+      const mutableKeys = Object.keys(source._getMutable());
+      mutableKeys.forEach((key) => {
+        // @ts-ignore
+        this._initProps[key] = source.props[key];
+      });
+
+      return;
+    }
+
+    this._initProps = this._source as any;
+  }
+
+  /** Get active rules */
+  protected _getActiveRules() {
+    const app = initVevet();
+
+    const rules = this._rules.filter(({ at }) => {
+      if (at === 'tablet ' && app.tablet) {
+        return true;
+      }
+
+      if (at === 'phone' && app.phone) {
+        return true;
+      }
+
+      if (at === 'mobile' && app.mobile) {
+        return true;
+      }
+      if (at === 'non_mobile' && !app.mobile) {
+        return true;
+      }
+      if (at === 'lg' && app.lg) {
+        return true;
+      }
+
+      if (at === 'md' && app.md) {
+        return true;
+      }
+
+      if (at === 'sm' && app.sm) {
+        return true;
+      }
+
+      if (at === 'portrait' && app.portrait) {
+        return true;
+      }
+
+      if (at === 'landscape' && app.landscape) {
+        return true;
+      }
+
+      if (at.startsWith('@media')) {
+        const isMediaActive = window.matchMedia(
+          at.replace('@media', ''),
+        ).matches;
+
+        return isMediaActive;
+      }
+
+      return false;
+    });
+
+    return rules;
+  }
+
+  /** Get responsive props */
+  protected _getResponsiveProps() {
+    const rules = this._getActiveRules();
+    let newProps = {};
+
+    rules.forEach(({ props }) => {
+      newProps = { ...newProps, ...props };
+    });
+
+    return newProps;
+  }
+
+  /** Update properties */
+  protected _handleUpdate() {
+    const activeRules = this._getActiveRules();
+    const activeBreakpoints = activeRules.map(({ at }) => at);
+    const json = JSON.stringify(activeBreakpoints);
+
+    if (this._prevBreakpoints === json) {
+      return;
+    }
+
+    this._prevBreakpoints = json;
+
+    this._props = { ...this._initProps, ...this._getResponsiveProps() };
+
+    if (this._source instanceof Module) {
+      // @ts-ignore
+      this._source._$_responseProps(this._props);
+    }
+
+    this._onChange?.(this.props);
+  }
+
+  /**
+   * Destroy the instance and clean up resources.
+   *
+   * The instance is destroyed automatically when it is used to mutate Module's props.
+   */
+  public destroy() {
+    if (this._isDestroyed) {
+      return;
+    }
+
+    this._isDestroyed = true;
+
+    this._destructors.forEach((destructor) => destructor());
+  }
+}

package/src/base/Responsive/types.ts

@@ -0,0 +1,29 @@
+import { Module } from '../Module';
+
+export type TResponsiveSource = Record<string, any> | Module;
+
+export type TResponsivePick<T> =
+  T extends Module<any, any, any>
+    ? Partial<ReturnType<T['_getMutable']>>
+    : Partial<T>;
+
+export type TResponsiveQuery =
+  | 'tablet'
+  | 'phone'
+  | 'mobile'
+  | 'non_mobile'
+  | 'lg'
+  | 'md'
+  | 'sm'
+  | 'landscape'
+  | 'portrait'
+  | (string & {});
+
+export type TResponsiveRule<T extends TResponsiveSource> = {
+  at: TResponsiveQuery;
+  props: TResponsivePick<T>;
+};
+
+export type TResponsiveProps<T extends TResponsiveSource> = T extends Module
+  ? T['props']
+  : T;