vevet 4.2.0 → 4.3.0

package/src/Vevet/events/createViewport/viewportCssVarsScript.ts

@@ -0,0 +1,17 @@
+export const viewportCssVarsScript = `var updateVevetViewport = function update() {
+  if (window.vevetApp) {
+    return;
+  }
+
+  var w = window.innerWidth;
+  var h = window.innerHeight;
+  var sh = document.documentElement.clientHeight;
+
+  document.documentElement.style.setProperty('--vw', w / 100 + "px");
+  document.documentElement.style.setProperty('--vh', h / 100 + "px");
+  document.documentElement.style.setProperty('--svh', sh / 100 + "px");
+};
+
+window.addEventListener('resize', updateVevetViewport);
+
+updateVevetViewport();`;

package/src/Vevet/exported.ts

@@ -5,6 +5,9 @@ import {
   IViewportCallbackTypes,
   IViewport,
 } from './events/createViewport/types';
+import { viewportCssVarsScript } from './events/createViewport/viewportCssVarsScript';
+
+export { viewportCssVarsScript };
 
 export type {
   IVevetProps,

package/src/base/Module/index.ts

@@ -1,15 +1,10 @@
-import {
-  addEventListener,
-  IAddEventListener,
-  IAddEventListenerOptions,
-  ListenerElement,
-} from 'vevet-dom';
 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';
 
 export type { NModule };
 
@@ -86,7 +81,7 @@ export class Module<
   }
 
   /** Holds the list of event listeners added to the module */
-  private _listeners: IAddEventListener[];
+  private _listeners: (() => void)[];
 
   /** Stores actions that need to be executed when the module is destroyed */
   private _destroyableActions: (() => void)[];
@@ -258,34 +253,24 @@ export class Module<
   /**
    * Adds a DOM event listener that will be automatically removed when the module is destroyed.
    *
-   * @param el - The target element for the event listener.
+   * @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<
-    El extends ListenerElement,
     Target extends keyof HTMLElementEventMap,
-    Callback extends (evt: HTMLElementEventMap[Target]) => void,
+    Listener extends (event: DocumentEventMap[Target]) => void,
   >(
-    el: El,
+    element: Document | Element | Window,
     target: Target,
-    callback: Callback,
-    options?: IAddEventListenerOptions,
-  ): IAddEventListener {
-    const listener = addEventListener(el, target, callback, options);
+    callback: Listener,
+    options?: boolean | AddEventListenerOptions,
+  ) {
+    const listener = addEventListener(element, target, callback, options);
     this._listeners.push(listener);
 
-    return {
-      ...listener,
-      remove: () => {
-        this._listeners = this._listeners.filter(
-          (item) => item.id !== listener.id,
-        );
-
-        return listener.remove();
-      },
-    };
+    return listener;
   }
 
   /**
@@ -341,7 +326,7 @@ export class Module<
     this._mutableProps.destroy();
 
     this._destroyableActions.forEach((action) => action());
-    this._listeners.forEach((listener) => listener.remove());
+    this._listeners.forEach((listener) => listener());
 
     this._classNamesToRemove.forEach(({ element, className }) =>
       element.classList.remove(className),

package/src/components/CustomCursor/index.ts

@@ -1,9 +1,10 @@
-import { addEventListener, createElement, selectOne } from 'vevet-dom';
 import { AnimationFrame } from '../AnimationFrame';
 import { NCustomCursor } from './types';
 import { Component as ComponentClass } from '@/base/Component';
 import { lerp } from '@/utils/math';
 import { getApp } from '@/utils/internal/getApp';
+import { selectOne } from '@/utils/dom/selectOne';
+import { addEventListener } from '@/utils/dom/addEventListener';
 
 export type { NCustomCursor };
 
@@ -215,20 +216,24 @@ export class CustomCursor<
     domContainer.classList.add(this.className('-container'));
 
     // Create outer element
-    this._outerElement = createElement('div', {
-      class: this.className(
-        '',
+    const outer = document.createElement('div');
+    this._outerElement = outer;
+    domContainer.append(outer);
+    outer.classList.add(this.className(''));
+    outer.classList.add(
+      this.className(
         container instanceof Window ? '-in-window' : '-in-element',
-        '-disabled',
       ),
-      parent: domContainer,
-    });
+    );
+    outer.classList.add(this.className('-disabled'));
 
     // Create inner element
-    this._innerElement = createElement('div', {
-      class: this.className('__inner', '-disabled'),
-      parent: this._outerElement,
-    });
+    const inner = document.createElement('div');
+    this._innerElement = inner;
+    outer.append(inner);
+    inner.classList.add(this.className('__inner'));
+    inner.classList.add(this.className('-disabled'));
+    outer.append(inner);
 
     // Call events
     this.callbacks.tbt('create', {
@@ -372,8 +377,8 @@ export class CustomCursor<
         this.hoveredElement = undefined;
       }
 
-      mouseEnter.remove();
-      mouseLeave.remove();
+      mouseEnter();
+      mouseLeave();
 
       if (timeout) {
         clearTimeout(timeout);

package/src/components/CustomScroll/Elements.ts

@@ -1,5 +1,6 @@
-import { createElement, selectAll, selectOne } from 'vevet-dom';
+import { selectOne } from '@/utils/dom/selectOne';
 import { NCustomScroll } from './types';
+import { selectAll } from '@/utils/dom/selectAll';
 
 type TPickedProps = 'elements' | 'hasWillChange' | 'translatePrecision';
 
@@ -16,8 +17,6 @@ export class Elements {
     return this._wrapper;
   }
 
-  private _wrapperExists!: boolean;
-
   private _elements!: NCustomScroll.IElement[];
 
   get elements() {
@@ -29,30 +28,21 @@ export class Elements {
   }
 
   constructor(private _props: IProps) {
-    this._createWrapper();
+    this._getWrapper();
     this._createElements();
   }
 
-  /** Create scrollable wrapper */
-  private _createWrapper() {
+  /** Get scrollable wrapper */
+  private _getWrapper() {
     const { wrapperClassName, container } = this.props;
 
     const existingWrapper = selectOne(`.${wrapperClassName}`, container);
 
-    if (existingWrapper instanceof HTMLElement) {
+    if (!(existingWrapper instanceof HTMLElement)) {
+      throw new Error(`No wrapper found: .${wrapperClassName}`);
+    } else {
       this._wrapper = existingWrapper;
-      this._wrapperExists = true;
-
-      return;
     }
-
-    this._wrapper = createElement('div', {
-      class: wrapperClassName,
-      parent: container,
-      children: Array.from(container.children),
-    });
-
-    this._wrapperExists = false;
   }
 
   /** Create scrollable elements */
@@ -128,15 +118,6 @@ export class Elements {
   }
 
   public destroy() {
-    // remove wrapper
-    if (!this._wrapperExists) {
-      while (this.wrapper.firstChild) {
-        this.props.container.appendChild(this.wrapper.firstChild);
-      }
-
-      this._wrapper.remove();
-    }
-
     // reset styles
     this._elements.forEach((element) => {
       // eslint-disable-next-line no-param-reassign

package/src/components/CustomScroll/index.ts

@@ -1,4 +1,3 @@
-import { selectOne } from 'vevet-dom';
 import { Component as ComponentClass } from '@/base/Component';
 import { NCustomScroll } from './types';
 import { IScrollLike } from '@/types/general';
@@ -8,6 +7,7 @@ import { Elements } from './Elements';
 import { AnimationFrame } from './AnimatonFrame';
 import { onResize } from '@/utils/listeners/onResize';
 import { getApp } from '@/utils/internal/getApp';
+import { selectOne } from '@/utils/dom/selectOne';
 
 export type { NCustomScroll };
 

package/src/components/CustomScrollKeyboardPlugin/index.ts

@@ -1,8 +1,8 @@
-import { childOf } from 'vevet-dom';
 import { Plugin } from '@/base/Plugin';
 import { NCustomScrollKeyboardPlugin } from './types';
 import type { CustomScroll as CustomScrollInstance } from '../CustomScroll';
 import { getApp } from '@/utils/internal/getApp';
+import { childOf } from '@/utils/dom/childOf';
 
 export type { NCustomScrollKeyboardPlugin };
 

package/src/components/DraggerBase/index.ts

@@ -1,12 +1,9 @@
-import {
-  IAddEventListener,
-  addEventListener,
-  isElement,
-  isWindow,
-  selectOne,
-} from 'vevet-dom';
+import { addEventListener } from '@/utils/dom/addEventListener';
 import { NDraggerBase } from './types';
 import { Component as ComponentClass } from '@/base/Component';
+import { isElement } from '@/utils/dom/isElement';
+import { isWindow } from '@/utils/dom/isWindow';
+import { selectOne } from '@/utils/dom/selectOne';
 import { getApp } from '@/utils/internal/getApp';
 
 export type { NDraggerBase };
@@ -52,7 +49,7 @@ export abstract class DraggerBase<
   /**
    * Stores runtime event listeners added during dragging.
    */
-  protected _runtimeListeners: IAddEventListener[];
+  protected _runtimeListeners: (() => void)[];
 
   /**
    * Indicates whether dragging is currently happening.
@@ -230,7 +227,7 @@ export abstract class DraggerBase<
    * Removes runtime events after the drag operation ends or is canceled.
    */
   protected _removeRuntimeEvents() {
-    this._runtimeListeners.forEach((listener) => listener.remove());
+    this._runtimeListeners.forEach((listener) => listener());
 
     this._runtimeListeners = [];
   }

package/src/components/DraggerMove/index.ts

@@ -1,4 +1,4 @@
-import { addEventListener } from 'vevet-dom';
+import { addEventListener } from '@/utils/dom/addEventListener';
 import { DraggerBase, NDraggerBase } from '../DraggerBase';
 import { NDraggerMove } from './types';
 

package/src/components/Marquee/index.ts

@@ -1,10 +1,10 @@
-import { selectOne } from 'vevet-dom';
 import { NMarquee } from './types';
 import { Component as ComponentClass } from '@/base/Component';
 import { AnimationFrame } from '../AnimationFrame';
 import { getApp } from '@/utils/internal/getApp';
 import { wrap } from '@/utils/math';
 import { onResize } from '@/utils/listeners';
+import { selectOne } from '@/utils/dom/selectOne';
 
 export type { NMarquee };
 

package/src/components/Preloader/index.ts

@@ -1,9 +1,9 @@
-import { selectOne } from 'vevet-dom';
 import { PCancelable } from '@/utils/common/PCancelable';
 import { NPreloader } from './types';
 import { Component as ComponentClass } from '@/base/Component';
 import { normalizedTimeoutCallback } from '@/utils/common';
 import { getApp } from '@/utils/internal/getApp';
+import { selectOne } from '@/utils/dom/selectOne';
 
 export type { NPreloader };
 

package/src/components/ProgressPreloader/index.ts

@@ -1,4 +1,3 @@
-import { selectAll } from 'vevet-dom';
 import { PCancelable } from '@/utils/common/PCancelable';
 import { AnimationFrame } from '../AnimationFrame';
 import { Preloader } from '../Preloader';
@@ -9,6 +8,7 @@ import { preloadImage } from './utils/preloadImage';
 import { preloadVideo } from './utils/preloadVideo';
 import { preloadCustomElement } from './utils/preloadCustomElement';
 import { getApp } from '@/utils/internal/getApp';
+import { selectAll } from '@/utils/dom/selectAll';
 
 export type { NProgressPreloader };
 

package/src/components/ScrollBar/Bar/index.ts

@@ -1,10 +1,10 @@
-import { IAddEventListener, addEventListener } from 'vevet-dom';
 import { IBarProps } from './types';
 import { IRemovable } from '@/types/general';
 import { DraggerMove, NDraggerMove } from '@/components/DraggerMove';
 import { IOnScrollCallbackParameter, onScroll } from '@/utils/scroll/onScroll';
 import { clamp } from '@/utils/math';
 import { getScrollValues } from '@/utils/scroll';
+import { addEventListener } from '@/utils/dom/addEventListener';
 
 /**
  * Represents a custom scroll bar with a draggable thumb.
@@ -49,7 +49,7 @@ export class Bar {
   private _coordsAtDragStart = { scrollLeft: 0, scrollTop: 0 };
 
   /** Stores the list of event listeners */
-  private _listeners: IAddEventListener[] = [];
+  private _listeners: (() => void)[] = [];
 
   /** The scroll event handler */
   private _scrollEvent?: IRemovable;
@@ -184,7 +184,7 @@ export class Bar {
    * Removes all the event listeners for the scroll bar.
    */
   private _removeEvents() {
-    this._listeners?.forEach((listener) => listener.remove());
+    this._listeners?.forEach((listener) => listener());
     this._scrollEvent?.remove();
     this._dragger?.destroy();
   }

package/src/components/ScrollBar/index.ts

@@ -1,4 +1,3 @@
-import { selectOne } from 'vevet-dom';
 import type { CustomScroll } from '../CustomScroll';
 import { Bar } from './Bar';
 import { NScrollBar } from './types';
@@ -6,6 +5,7 @@ import { Component as ComponentClass } from '@/base/Component';
 import { IBarProps } from './Bar/types';
 import { onResize } from '@/utils/listeners/onResize';
 import { getApp } from '@/utils/internal/getApp';
+import { selectOne } from '@/utils/dom/selectOne';
 
 export type { NScrollBar };
 

package/src/components/SectionScrollProgress/index.ts

@@ -1,4 +1,3 @@
-import { selectOne } from 'vevet-dom';
 import type { CustomScroll } from '../CustomScroll';
 import { NScrollSectionProgress } from './types';
 import { Component as ComponentClass } from '@/base/Component';
@@ -6,6 +5,7 @@ import { clampScope } from '@/utils/math';
 import { IGetScrollValues, getScrollValues, onScroll } from '@/utils/scroll';
 import { onResize } from '@/utils/listeners/onResize';
 import { getApp } from '@/utils/internal/getApp';
+import { selectOne } from '@/utils/dom/selectOne';
 
 export type { NScrollSectionProgress };
 

package/src/components/SplitText/index.ts

@@ -1,10 +1,10 @@
-import { selectOne } from 'vevet-dom';
 import { Component as ComponentClass } from '@/base/Component';
 import { NSplitText } from './types';
 import { onResize } from '@/utils/listeners/onResize';
 import { splitBase } from './utils/splitBase';
 import { wrapLines } from './utils/wrapLines';
 import { getApp } from '@/utils/internal/getApp';
+import { selectOne } from '@/utils/dom/selectOne';
 
 export type { NSplitText };
 

package/src/components/SplitText/stories/index.tsx

@@ -29,7 +29,7 @@ export const Component: FC<IProps> = ({ text, hasLetters, hasLines }) => {
 
   return (
     <>
-      <h1>Vevet</h1>
+      <h1>Vevet Split Text</h1>
 
       <div ref={ref} style={style} dangerouslySetInnerHTML={{ __html: text }} />
 

package/src/components/SplitText/utils/wrapLines.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { childOf } from 'vevet-dom';
+import { childOf } from '@/utils/dom/childOf';
 import { NSplitText } from '../types';
 
 interface IProps {

package/src/utils/dom/addEventListener.ts

@@ -0,0 +1,37 @@
+/**
+ * A utility function to add an event listener to a specified element.
+ *
+ * This function adds an event listener for the specified event type and
+ * returns a function that can be called to remove the event listener.
+ *
+ * @param element - The target element to which the event listener will be attached.
+ * @param target - The name of the event to listen for (e.g., 'click', 'scroll').
+ * @param listener - The callback function to execute when the event occurs.
+ * @param options - Optional parameters for the event listener.
+ *
+ * @example
+ * const button = document.getElementById('myButton');
+ * const removeClickListener = addEventListener(button, 'click', (event) => {
+ *   console.log('Button clicked!');
+ * });
+ *
+ * // To remove the event listener later
+ * removeClickListener();
+ */
+export function addEventListener<
+  Target extends keyof HTMLElementEventMap,
+  Listener extends (event: DocumentEventMap[Target]) => void,
+>(
+  element: Document | Element | Window,
+  target: Target,
+  listener: Listener,
+  options?: boolean | AddEventListenerOptions,
+) {
+  element.addEventListener(target, listener as any, options);
+
+  const remove = () => {
+    element.removeEventListener(target, listener as any, options);
+  };
+
+  return remove;
+}

package/src/utils/dom/childOf.ts

@@ -0,0 +1,15 @@
+function childOfCheck(el: Element, parent: Element): boolean {
+  if (el === parent) {
+    return true;
+  }
+
+  if (el !== null) {
+    return childOfCheck(el.parentNode as Element, parent);
+  }
+
+  return false;
+}
+
+export function childOf(element: Element, parent: Element) {
+  return childOfCheck(element, parent);
+}

package/src/utils/dom/isElement.ts

@@ -0,0 +1,3 @@
+export function isElement(element: any): element is Element {
+  return element instanceof Element;
+}

package/src/utils/dom/isWindow.ts

@@ -0,0 +1,3 @@
+export function isWindow(element: any): element is Window {
+  return element instanceof Window;
+}

package/src/utils/dom/selectAll.ts

@@ -0,0 +1,42 @@
+import { isElement } from './isElement';
+import { selectOne } from './selectOne';
+
+export type TSelectAll = string | NodeList | Element | Element[];
+
+type TNodeListByTagName<T extends keyof HTMLElementTagNameMap> = NodeListOf<
+  HTMLElementTagNameMap[T]
+>;
+
+export function selectAll<T extends TSelectAll | keyof HTMLElementTagNameMap>(
+  selector: T,
+  parent?: Element | string,
+): T extends Element[]
+  ? Element[]
+  : T extends Element
+    ? Element[]
+    : T extends keyof HTMLElementTagNameMap
+      ? TNodeListByTagName<T>
+      : NodeListOf<Element> {
+  if (selector instanceof NodeList) {
+    return selector as any;
+  }
+
+  if (isElement(selector)) {
+    return [selector] as any;
+  }
+
+  if (Array.isArray(selector)) {
+    return selector as any;
+  }
+
+  // if string
+  if (typeof parent !== 'undefined') {
+    const parenElement = selectOne(parent);
+
+    if (parenElement) {
+      return parenElement.querySelectorAll(selector) as any;
+    }
+  }
+
+  return document.querySelectorAll(selector) as any;
+}

package/src/utils/dom/selectOne.ts

@@ -0,0 +1,31 @@
+import { isElement } from './isElement';
+import { isWindow } from './isWindow';
+
+export type TSelectOne = string | Element | Window;
+
+export function selectOne<T extends TSelectOne | keyof HTMLElementTagNameMap>(
+  selector: T,
+  parent?: Element | string,
+): T extends Window
+  ? Window
+  : T extends keyof HTMLElementTagNameMap
+    ? HTMLElementTagNameMap[T]
+    : HTMLElement | Element | null {
+  if (isWindow(selector)) {
+    return selector as any;
+  }
+
+  if (isElement(selector)) {
+    return selector as any;
+  }
+
+  // if string
+  if (typeof parent !== 'undefined') {
+    const parenEl = selectOne(parent);
+    if (parenEl) {
+      return parenEl.querySelector(selector as string) as any;
+    }
+  }
+
+  return document.querySelector(selector as string) as any;
+}

package/src/utils/scroll/isPageScrolling.ts

@@ -1,11 +1,10 @@
-import { addEventListener } from 'vevet-dom';
-import { IRemovable } from '@/types/general';
 import { uid } from '../common';
+import { addEventListener } from '../dom/addEventListener';
 
 let ids: string[] = [];
 
 let timeout: NodeJS.Timeout | null = null;
-let listener: IRemovable | undefined;
+let listener: (() => void) | undefined;
 
 let isScrolling = false;
 
@@ -34,7 +33,7 @@ function createListener() {
  */
 function destroyListener() {
   if (ids.length === 0) {
-    listener?.remove();
+    listener?.();
     listener = undefined;
   }
 }