vevet 3.16.0 → 3.18.0

package/lib/types/utils/listeners/onResize.d.ts

@@ -1,4 +1,4 @@
-import { NViewport } from '../../Application/events/Viewport';
+import { NViewport } from '../../Application/events/createViewport';
 export type TOnResizeTarget = keyof NViewport.ICallbacksTypes;
 export interface IOnResizeCallbackProps {
     trigger: 'unknown' | 'Viewport' | 'ResizeObserver';

package/lib/types/utils/listeners/onResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"onResize.d.ts","sourceRoot":"","sources":["../../../../src/utils/listeners/onResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAG9D,MAAM,MAAM,eAAe,GAAG,MAAM,SAAS,CAAC,eAAe,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,gBAAgB,CAAC;CACpD;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;AAExE,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IACtC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6BAA6B;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,2CAA2C;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gCAAgC;IAChC,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EAAE,YAAY,EACtB,OAAO,EACP,cAAsB,EACtB,aAAqB,EACrB,cAAkB,GACnB,EAAE,cAAc,GAAG,SAAS,CA8D5B"}
+{"version":3,"file":"onResize.d.ts","sourceRoot":"","sources":["../../../../src/utils/listeners/onResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGpE,MAAM,MAAM,eAAe,GAAG,MAAM,SAAS,CAAC,eAAe,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,gBAAgB,CAAC;CACpD;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;AAExE,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IACtC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6BAA6B;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,2CAA2C;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gCAAgC;IAChC,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EAAE,YAAY,EACtB,OAAO,EACP,cAAsB,EACtB,aAAqB,EACrB,cAAkB,GACnB,EAAE,cAAc,GAAG,SAAS,CA+D5B"}

package/lib/types/version.d.ts

@@ -1,3 +1,3 @@
-declare const version = "3.16.0";
+declare const version = "3.18.0";
 export default version;
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "3.16.0",
+  "version": "3.18.0",
   "description": "Vevet - a JavaScript library of ready-made solutions and helpers",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -67,7 +67,7 @@
     "vevet-dom": "^0.0.15"
   },
   "devDependencies": {
-    "@anton.bobrov/eslint-config": "2.0.0",
+    "@anton.bobrov/eslint-config": "2.0.2",
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.22.5",
@@ -90,12 +90,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
-    "sass": "~1.62.1",
+    "sass": "^1.77.8",
     "storybook": "^7.3.2",
     "stylelint": "^14.11.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "tsc-alias": "^1.8.7",
     "typedoc": "^0.24.8",
-    "typescript": "^5.1.6"
+    "typescript": "^5"
   }
 }

package/src/Application/events/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off"
+  }
+}

package/src/Application/events/createOnPageLoad/index.ts

@@ -0,0 +1,43 @@
+import { addEventListener } from 'vevet-dom';
+import { getApp } from '@/utils/internal/getApp';
+import { Callbacks } from '@/base/Callbacks';
+import { ICallbacksTypes } from './types';
+
+export function createOnPageLoad() {
+  const callbacks = new Callbacks<ICallbacksTypes>();
+
+  let isLoaded = false;
+
+  if (document.readyState === 'complete') {
+    handleLoaded();
+  } else {
+    addEventListener(window, 'load', () => handleLoaded());
+  }
+
+  /** Callback on page loaded */
+  function handleLoaded() {
+    const app = getApp();
+    const { prefix } = app;
+
+    isLoaded = true;
+
+    app.html.classList.remove(`${prefix}loading`);
+    app.body.classList.remove(`${prefix}loading`);
+
+    app.html.classList.add(`${prefix}loaded`);
+
+    callbacks.tbt('loaded', undefined);
+  }
+
+  function onLoad(callback: () => void) {
+    if (isLoaded) {
+      callback();
+
+      return undefined;
+    }
+
+    return callbacks.add('loaded', () => callback());
+  }
+
+  return { onLoad, getIsLoaded: () => isLoaded };
+}

package/src/Application/events/createOnPageLoad/types.ts

@@ -0,0 +1,5 @@
+import { NCallbacks } from '@/base/Callbacks/types';
+
+export interface ICallbacksTypes extends NCallbacks.ITypes {
+  loaded: undefined;
+}

package/src/Application/events/createViewport/index.ts

@@ -0,0 +1,165 @@
+import { addEventListener } from 'vevet-dom';
+import { getApp } from '@/utils/internal/getApp';
+import { EOrientationTypes, ESizeTypes, NViewport } from './types';
+import { Callbacks } from '@/base/Callbacks';
+
+export function createViewport() {
+  // create callbacks
+  const callbacks = new Callbacks<NViewport.ICallbacksTypes>();
+
+  // defaults
+  const data = {
+    callbacks,
+    width: 0,
+    height: 0,
+    radius: 0,
+    vw: 0,
+    vh: 0,
+    vr: 0,
+    isLandscape: false,
+    isPortrait: false,
+    isDesktop: false,
+    isTablet: false,
+    isPhone: false,
+    dpr: window.devicePixelRatio,
+    lowerDesktopDpr: window.devicePixelRatio,
+  };
+
+  // update values for the first time
+  updateValues();
+
+  // set resize events
+
+  let resizeTimeout: NodeJS.Timeout | undefined;
+
+  addEventListener(window, 'resize', () => {
+    if (resizeTimeout) {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = undefined;
+    }
+
+    resizeTimeout = setTimeout(() => {
+      onResize();
+      resizeTimeout = undefined;
+    }, getApp().props.resizeDebounce);
+  });
+
+  // methods
+
+  function onResize() {
+    const { width: prevWidth, height: prevHeight } = data;
+
+    updateValues();
+
+    const { width, height } = data;
+
+    // get changes in viewport
+    const changes: NViewport.IChanges = {
+      isWidthChanged: width !== prevWidth,
+      isHeightChanged: height !== prevHeight,
+      isOrientationChanged: width > height !== prevWidth > prevHeight,
+    };
+
+    if (width !== prevWidth && height === prevHeight) {
+      callbacks.tbt('widthOnly', changes);
+    }
+    if (height !== prevHeight && width === prevWidth) {
+      callbacks.tbt('heightOnly', changes);
+    }
+    if (width !== prevWidth && height !== prevHeight) {
+      callbacks.tbt('both', changes);
+    }
+    if (width !== prevWidth) {
+      callbacks.tbt('width', changes);
+    }
+    if (height !== prevHeight) {
+      callbacks.tbt('height', changes);
+    }
+
+    callbacks.tbt('any', changes);
+  }
+
+  function updateValues() {
+    const app = getApp();
+    const { html, props } = app;
+
+    // get width
+    const width =
+      props.widthDetection === 'boundingRect'
+        ? parseFloat(html.getBoundingClientRect().width.toFixed(3))
+        : html.clientWidth;
+
+    // set sizes
+    data.width = width;
+    data.height = html.clientHeight;
+    data.radius = Math.sqrt(data.width ** 2 + data.height ** 2) / 2;
+    data.vw = data.width / 100;
+    data.vh = data.height / 100;
+    data.vr = data.radius / 100;
+    data.isLandscape = data.width > data.height;
+    data.isPortrait = data.width < data.height;
+    data.isDesktop = data.width > props.tablet;
+    data.isTablet = data.width <= props.tablet && data.width > props.phone;
+    data.isPhone = data.width <= props.phone;
+    data.dpr = window.devicePixelRatio;
+    data.lowerDesktopDpr = data.dpr < 1 ? 1 : data.dpr;
+    data.isDesktop = data.width > props.tablet;
+    data.isTablet = data.width <= props.tablet && data.width > props.phone;
+    data.isPhone = data.width <= props.phone;
+    data.dpr = window.devicePixelRatio;
+    data.lowerDesktopDpr = app.isDesktop ? 1 : data.dpr;
+
+    // update states
+    updateClassNames();
+    updateCSSVars();
+  }
+
+  function updateClassNames() {
+    const viewportSizeTypes: ESizeTypes[] = [
+      ESizeTypes.Desktop,
+      ESizeTypes.Tablet,
+      ESizeTypes.Phone,
+    ];
+
+    if (data.isDesktop) {
+      updateBreakpointClassNames(ESizeTypes.Desktop, viewportSizeTypes);
+    } else if (data.isTablet) {
+      updateBreakpointClassNames(ESizeTypes.Tablet, viewportSizeTypes);
+    } else {
+      updateBreakpointClassNames(ESizeTypes.Phone, viewportSizeTypes);
+    }
+
+    const orientationTypes: EOrientationTypes[] = [
+      EOrientationTypes.Landscape,
+      EOrientationTypes.Portrait,
+    ];
+
+    if (data.isLandscape) {
+      updateBreakpointClassNames(EOrientationTypes.Landscape, orientationTypes);
+    } else if (data.isPortrait) {
+      updateBreakpointClassNames(EOrientationTypes.Portrait, orientationTypes);
+    } else {
+      updateBreakpointClassNames('', orientationTypes);
+    }
+  }
+
+  function updateBreakpointClassNames(activeType: string, types: string[]) {
+    const { html, prefix } = getApp();
+
+    types.forEach((type) => {
+      html.classList.toggle(`${prefix}viewport-${type}`, type === activeType);
+    });
+  }
+
+  function updateCSSVars() {
+    const { html } = getApp();
+
+    html.style.setProperty('--vw', `${data.vw}px`);
+    html.style.setProperty('--vh', `${data.vh}px`);
+    html.style.setProperty('--vr', `${data.vr}px`);
+  }
+
+  return data;
+}
+
+export type { NViewport };

package/src/Application/events/{Viewport → createViewport}/stories/index.tsx

@@ -30,7 +30,7 @@ export const Component: FC = () => {
   useEffect(() => {
     updateFeatures();
 
-    const callback = viewport.add('any', () => updateFeatures());
+    const callback = viewport.callbacks.add('any', () => updateFeatures());
 
     return () => callback.remove();
   }, [updateFeatures]);

package/src/Application/index.ts

@@ -1,10 +1,10 @@
-import { Viewport, NViewport } from './events/Viewport';
-import { PageLoad, NPageLoad } from './events/PageLoad';
 import version from '../version';
 import { NApplication } from './types';
 import { getDeviceInfo } from '@/utils/internal/getDeviceInfo';
 import { fetchWebpSupport } from '@/utils/internal/fetchWebpSupport';
 import { PCancelable } from '@/utils/common/PCancelable';
+import { createOnPageLoad } from './events/createOnPageLoad';
+import { createViewport, NViewport } from './events/createViewport';
 
 /**
  * Vevet Application. This is the base Vevet class
@@ -97,14 +97,9 @@ export class Application {
     return this._isWebpSupported;
   }
 
-  private _pageLoad: PageLoad;
+  private _pageLoad: ReturnType<typeof createOnPageLoad>;
 
-  /** Page Load Callbacks */
-  get pageLoad() {
-    return this._pageLoad;
-  }
-
-  private _viewport: Viewport;
+  private _viewport: ReturnType<typeof createViewport>;
 
   /** Viewport Callbacks */
   get viewport() {
@@ -135,8 +130,8 @@ export class Application {
     window.vevetApp = this;
 
     // create default helpers
-    this._pageLoad = new PageLoad();
-    this._viewport = new Viewport();
+    this._pageLoad = createOnPageLoad();
+    this._viewport = createViewport();
   }
 
   /** Get and set device info */
@@ -187,15 +182,20 @@ export class Application {
     return document.body;
   }
 
-  /** Action on page loaded */
+  /** Action on page load */
   public onPageLoad() {
     return new PCancelable((resolve: (...arg: any) => void) =>
       this._pageLoad.onLoad(resolve),
     );
   }
+
+  /** Check if page is loaded */
+  get isPageLoaded() {
+    return this._pageLoad.getIsLoaded();
+  }
 }
 
-export type { NApplication, NViewport, NPageLoad };
+export type { NApplication, NViewport };
 
 declare global {
   interface Window {

package/src/Application/stories/index.tsx

@@ -17,22 +17,20 @@ export const Component: FC = () => {
       'browserName',
       'osName',
       'isWebpSupported',
+      'isPageLoaded',
     ]);
 
     setFeatures(object);
   }, []);
 
-  useEffect(() => {
-    updateFeatures();
-
-    const promise = vevet.onPageLoad();
-    promise.then(() => updateFeatures()).catch(() => {});
-
-    return () => promise.cancel();
-  }, [updateFeatures]);
+  useEffect(() => updateFeatures(), [updateFeatures]);
 
   return (
     <div>
+      <button type="button" onClick={updateFeatures}>
+        Update features
+      </button>
+
       {features &&
         Object.keys(features).map((key) => {
           const value = features[key];

package/src/base/Callbacks/index.ts

@@ -4,7 +4,7 @@ import { NCallbacks } from './types';
 export type { NCallbacks };
 
 /**
- * A set of callbacks
+ * This class is responsible for adding, removing, and executing callbacks of different kinds.
  */
 export class Callbacks<Types extends NCallbacks.ITypes = NCallbacks.ITypes> {
   /** List of callbacks */
@@ -16,35 +16,49 @@ export class Callbacks<Types extends NCallbacks.ITypes = NCallbacks.ITypes> {
   }
 
   /**
-   * @param canInit - Defines if you need to call {@linkcode Callbacks._init} at the constructor's end.
-   * If no, you will have to call {@linkcode Callbacks._init} manually.
-   *
    * @example
-   * 
-   * interface ITypes {
-   *   render: { fps: number };
-   *   empty: undefined;
+   *
+   * interface ICallbacks {
+   *   onAdd: undefined;
+   *   onDelete: undefined;
    * }
-
-   * const callbacks = new Callbacks<ITypes>();
-
-   * callbacks.add('render', ({ fps }) => console.log(fps));
-
-   * callbacks.add('empty', () => {}, {
-   *   timeout: 50,
-   * });
+   *
+   * const callbacks = new Callbacks<ICallbacks>();
+   *
+   * callbacks.add('onAdd', () => console.log('callback on add #1'));
+   *
+   * const addCallback2 = callbacks.add('onAdd', () =>
+   *   console.log('callback on add #2'),
+   * );
+   *
+   * const addCallback3 = callbacks.add(
+   *   'onAdd',
+   *   () => console.log('callback on add #3'),
+   *   { isProtected: true },
+   * );
+   *
+   * callbacks.add('onDelete', () => console.log('callback on delete'));
+   *
+   * console.log('--- All callbacks by the target "onAdd" will be executed:');
+   * callbacks.tbt('onAdd', undefined);
+   *
+   * console.log('--- addCallback2 will be removed:');
+   * addCallback2.remove();
+   * callbacks.tbt('onAdd', undefined);
+   * console.log('---');
+   *
+   * console.log('--- addCallback3 cannot be removed because it is protected:');
+   * addCallback3.remove();
+   * callbacks.tbt('onAdd', undefined);
+   * console.log('---');
+   *
+   * console.log('--- Execute all callbacks by the target "onDelete":');
+   * callbacks.tbt('onDelete', undefined);
    */
-  constructor(canInit = true) {
+  constructor() {
     this._callbacks = [];
-
-    if (canInit) {
-      this._init();
-    }
   }
 
-  /** Initialize the class */
-  protected _init() {}
-
   /**
    * Adds a callback
    *

package/src/base/Callbacks/stories/index.tsx

@@ -1,53 +1,48 @@
-import { FC, useEffect } from 'react';
+/* eslint-disable no-console */
+import React, { FC, useEffect } from 'react';
 import { Callbacks } from '..';
 
-interface ITypes {
-  render: { fps: number };
-  empty: undefined;
+interface ICallbacks {
+  onAdd: undefined;
+  onDelete: undefined;
 }
 
 export const Component: FC = () => {
   useEffect(() => {
-    const callbacks = new Callbacks<ITypes>();
+    const callbacks = new Callbacks<ICallbacks>();
 
-    const renderSimple = callbacks.add('render', () => {}, {
-      name: 'render simple',
-    });
+    callbacks.add('onAdd', () => console.log('callback on add #1'));
 
-    const emptySimple = callbacks.add('empty', () => {}, {
-      name: 'empty simple',
-    });
+    const addCallback2 = callbacks.add('onAdd', () =>
+      console.log('callback on add #2'),
+    );
 
-    callbacks.add('empty', () => {}, {
-      isOnce: true,
-      name: 'empty once',
-    });
+    const addCallback3 = callbacks.add(
+      'onAdd',
+      () => console.log('callback on add #3'),
+      { isProtected: true },
+    );
 
-    const emptyProtected = callbacks.add('empty', () => {}, {
-      isProtected: true,
-      name: 'empty protected',
-    });
+    callbacks.add('onDelete', () => console.log('callback on delete'));
 
-    callbacks.add('empty', () => {}, {
-      isProtected: true,
-      isOnce: true,
-      name: 'empty protected and once',
-    });
+    console.log('--- All callbacks by the target "onAdd" will be executed:');
+    callbacks.tbt('onAdd', undefined);
 
-    callbacks.tbt('empty', undefined);
-    callbacks.tbt('render', { fps: 10 });
+    console.log('--- addCallback2 will be removed:');
+    addCallback2.remove();
+    callbacks.tbt('onAdd', undefined);
+    console.log('---');
 
-    // eslint-disable-next-line no-console
-    console.log(callbacks.callbacks.map(({ name }) => name));
+    console.log('--- addCallback3 cannot be removed because it is protected:');
+    addCallback3.remove();
+    callbacks.tbt('onAdd', undefined);
+    console.log('---');
 
-    renderSimple.remove();
-    emptySimple.remove();
-    emptyProtected.remove();
-    // eslint-disable-next-line no-console
-    console.log(callbacks.callbacks.map(({ name }) => name));
+    console.log('--- Execute all callbacks by the target "onDelete":');
+    callbacks.tbt('onDelete', undefined);
 
     return () => callbacks.destroy();
   }, []);
 
-  return null;
+  return <p>Open the console to see the output</p>;
 };

package/src/base/Module/index.ts

@@ -7,13 +7,13 @@ import {
 import { NModule } from './types';
 import { MutableProps, NMutableProps } from '../MutableProps';
 import { Callbacks, NCallbacks } from '../Callbacks';
-import { Viewport } from '@/src/Application/events/Viewport';
 import { TRequiredModuleProp } from '@/types/utility';
 import { getApp } from '@/utils/internal/getApp';
+import { createViewport } from '@/src/Application/events/createViewport';
 
 export type { NModule };
 
-type TViewportAdd = Viewport['add'];
+type TViewportAdd = ReturnType<typeof createViewport>['callbacks']['add'];
 
 /**
  * Module base
@@ -215,7 +215,7 @@ export class Module<
     action: Parameters<TViewportAdd>[1],
     data: Parameters<TViewportAdd>[2] = {},
   ) {
-    const callback = getApp().viewport.add(target, action, {
+    const callback = getApp().viewport.callbacks.add(target, action, {
       ...data,
       name: this.constructor.name,
     });

package/src/base/MutableProps/index.ts

@@ -135,7 +135,7 @@ export class MutableProps<
       return;
     }
 
-    this._viewportCallback = getApp().viewport.add(
+    this._viewportCallback = getApp().viewport.callbacks.add(
       'width',
       this._responseProps.bind(this),
       { name: this._name },

package/src/utils/listeners/onResize.ts

@@ -1,4 +1,4 @@
-import { NViewport } from '@/src/Application/events/Viewport';
+import { NViewport } from '@/src/Application/events/createViewport';
 import { NCallbacks } from '@/base/Callbacks';
 
 export type TOnResizeTarget = keyof NViewport.ICallbacksTypes;
@@ -119,8 +119,9 @@ export function onResize({
   }
 
   if (hasBothEvents || !resizeObserver) {
-    viewportCallback = window.vevetApp.viewport.add(viewportTarget, () =>
-      debounceResize({ trigger: 'Viewport' }),
+    viewportCallback = window.vevetApp.viewport.callbacks.add(
+      viewportTarget,
+      () => debounceResize({ trigger: 'Viewport' }),
     );
   }
 

package/src/version.ts

@@ -1,2 +1,2 @@
-const version = '3.16.0';
+const version = '3.18.0';
 export default version;