@revilise/web-utils 1.0.51

package/README.en.md

@@ -0,0 +1,112 @@
+[Русская версия](README.md)
+
+# @revilise/web-utils
+
+A collection of utilities for web development, including React hooks and performance optimization functions.
+
+## 📦 Installation
+
+```bash
+npm install @revilise/web-utils
+```
+
+## 🚀 Available Functions
+
+### React Hooks
+
+#### `useBEM`
+A hook for working with BEM methodology in React components. Allows easy creation of CSS classes following BEM methodology.
+
+**Parameters:**
+- `baseClass` - base block class
+
+**Returns:**
+- Object with `bem` method for class generation
+
+**Usage example:**
+```tsx
+import { useBEM } from '@revilise/web-utils/hooks';
+
+const MyComponent = () => {
+  const { bem } = useBEM('button');
+  
+  return (
+    <button
+       className={bem("button", {
+         extraCN: { isRed: true },
+         utilCN: ['active']
+       })}
+    >
+      Button
+    </button>
+  );
+};
+```
+
+### Utilities
+
+#### `debounce`
+Creates a wrapper for a function that delays its execution until a specified time has passed since the last call.
+
+**Parameters:**
+- `callback` - function to execute
+- `delay` - delay in milliseconds
+
+**Usage example:**
+```tsx
+import { debounce } from '@revilise/web-utils/libs';
+
+const debouncedSearch = debounce((query: string) => {
+  console.log('Searching:', query);
+}, 300);
+
+// Usage in event handler
+input.addEventListener('input', (e) => {
+  debouncedSearch(e.target.value);
+});
+```
+
+#### `throttle`
+Limits the frequency of function calls. Calls the original function no more than once per specified interval.
+
+**Parameters:**
+- `callback` - function to execute
+- `delay` - interval in milliseconds
+
+**Usage example:**
+```tsx
+import { throttle } from '@revilise/web-utils/libs';
+
+const throttledScroll = throttle(() => {
+  console.log('Scroll event');
+}, 100);
+
+window.addEventListener('scroll', throttledScroll);
+```
+
+## 📁 Export Structure
+
+The package exports functions in two formats:
+
+```tsx
+// React hooks
+import { useBEM } from '@revilise/web-utils/hooks';
+
+// Utilities
+import { debounce, throttle } from '@revilise/web-utils/libs';
+```
+
+## 🛠 Technical Details
+
+- **TypeScript**: Full type support
+- **Tree-shaking**: Optimized for tree-shaking
+- **ESM/CJS**: Support for ES and CommonJS module systems
+- **Size**: Minimal bundle size
+
+## 📄 License
+
+MIT
+
+## 👥 Author
+
+Anastasia Mutnykh (mutnyh.ao@mail.ru)

package/README.md

@@ -0,0 +1,117 @@
+[English version](README.en.md)
+
+# @revilise/web-utils
+
+Набор утилит для веб-разработки, включающий React хуки и полезные функции для оптимизации производительности.
+
+## 📦 Установка
+
+```bash
+npm install @revilise/web-utils
+```
+
+## 🚀 Доступные функции
+
+### React Hooks
+
+#### `useBEM`
+Хук для работы с BEM методологией в React компонентах. Позволяет легко создавать CSS классы по методологии БЭМ.
+
+**Параметры:**
+- `baseClass` - базовый класс блока
+
+**Возвращает:**
+- Объект с методом `bem` для генерации классов
+
+**Пример использования:**
+```tsx
+import { useBEM } from '@revilise/web-utils/hooks';
+
+const MyComponent = () => {
+  const { bem } = useBEM('button');
+  
+  return (
+    <button 
+      className={bem("button", {
+        extraCN: { isRed: true },
+        utilCN: ['active']
+      })}
+    >
+      Нажми на меня
+    </button>
+  );
+};
+```
+Результат
+
+```html
+<button class="button button--isRed active">Нажми на меня</button>
+```
+
+### Утилиты
+
+#### `debounce`
+Создает обёртку для функции, которая откладывает её выполнение до тех пор, пока не пройдет заданное время после последнего вызова.
+
+**Параметры:**
+- `callback` - функция для выполнения
+- `delay` - задержка в миллисекундах
+
+**Пример использования:**
+```tsx
+import { debounce } from '@revilise/web-utils/libs';
+
+const debouncedSearch = debounce((query: string) => {
+  console.log('Поиск:', query);
+}, 300);
+
+// Использование в обработчике событий
+input.addEventListener('input', (e) => {
+  debouncedSearch(e.target.value);
+});
+```
+
+#### `throttle`
+Ограничивает частоту вызовов функции. Вызывает исходную функцию не чаще одного раза в указанный интервал.
+
+**Параметры:**
+- `callback` - функция для выполнения
+- `delay` - интервал в миллисекундах
+
+**Пример использования:**
+```tsx
+import { throttle } from '@revilise/web-utils/libs';
+
+const throttledScroll = throttle(() => {
+  console.log('Событие прокрутки');
+}, 100);
+
+window.addEventListener('scroll', throttledScroll);
+```
+
+## 📁 Структура экспорта
+
+Пакет экспортирует функции в двух форматах:
+
+```tsx
+// React хуки
+import { useBEM } from '@revilise/web-utils/hooks';
+
+// Утилиты
+import { debounce, throttle } from '@revilise/web-utils/libs';
+```
+
+## 🛠 Технические детали
+
+- **TypeScript**: Полная поддержка типов
+- **Tree-shaking**: Оптимизирован для tree-shaking
+- **ESM/CJS**: Поддержка модульных систем ES и CommonJS
+- **Размер**: Только самое важное
+
+## 📄 Лицензия
+
+MIT
+
+## 👥 Автор
+
+Anastasia Mutnykh (mutnyh.ao@mail.ru)

package/dist/hooks.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.useBEM=function(t){return{bem(e,r={}){const s=[],n=e?`${t}__${e}`:t;s.push(n);const{extraCN:o={},utilCN:i}=r;if(Object.keys(o).length>0)for(const t in o)o[t]&&s.push(`${n}--${t}`);if("string"==typeof i&&i)s.push(i);else if(Array.isArray(i))for(const t in i){const e=i[t];e&&s.push(e)}return s.join(" ")}}};

package/dist/hooks.d.ts

@@ -0,0 +1,11 @@
+declare type bemOptions = {
+    baseCN: string;
+    extraCN?: Record<string, boolean>;
+    utilCN?: string | Array<string | boolean>;
+};
+
+export declare function useBEM(baseClass: string): {
+    bem(blockCN: string, options?: Omit<bemOptions, "baseCN">): string;
+};
+
+export { }

package/dist/hooks.es.js

@@ -0,0 +1,29 @@
+function useBEM(baseClass) {
+  return {
+    bem(blockCN, options = {}) {
+      const className = [];
+      const base = !blockCN ? baseClass : `${baseClass}__${blockCN}`;
+      className.push(base);
+      const { extraCN = {}, utilCN } = options;
+      if (Object.keys(extraCN).length > 0) {
+        for (const key in extraCN) {
+          if (extraCN[key]) {
+            className.push(`${base}--${key}`);
+          }
+        }
+      }
+      if (typeof utilCN === "string" && utilCN) {
+        className.push(utilCN);
+      } else if (Array.isArray(utilCN)) {
+        for (const i in utilCN) {
+          const cn = utilCN[i];
+          cn && className.push(cn);
+        }
+      }
+      return className.join(" ");
+    }
+  };
+}
+export {
+  useBEM
+};

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./hooks.cjs.js"),t=require("./libs.cjs.js");exports.useBEM=e.useBEM,exports.debounce=t.debounce,exports.throttle=t.throttle;

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+declare type bemOptions = {
+    baseCN: string;
+    extraCN?: Record<string, boolean>;
+    utilCN?: string | Array<string | boolean>;
+};
+
+/**
+ * Создает обёртку для функции, которая откладывает её выполнение
+ * до тех пор, пока не пройдет заданное время `delay` после последнего вызова.
+ *
+ * Это полезно для оптимизации частых событий, например:
+ * ввод текста, изменение размера окна, прокрутка или ресайз изображений.
+ *
+ * Например, если пользователь непрерывно вводит текст, обработчик срабатывает
+ * только один раз — спустя `delay` миллисекунд после последнего нажатия клавиши.
+ *
+ * @template T
+ * @param {T} callback - Функция, которую нужно выполнить после периода "тишины".
+ * @param {number} delay - Время задержки (в миллисекундах) перед вызовом `callback`.
+ *
+ * @returns Возвращает новую функцию, которая реализует поведение debounce.
+ *
+ * @example
+ * // Пример: выполнение запроса только после паузы в наборе текста
+ * const debouncedSearch = debounce((query: string) => {
+ *   console.log('Ищем:', query);
+ * }, 300);
+ *
+ * document.querySelector('input')?.addEventListener('input', (e) => {
+ *   debouncedSearch((e.target as HTMLInputElement).value);
+ * });
+ */
+export declare function debounce<T extends (...args: any[]) => void>(callback: T, delay: number): (this: ThisParameterType<T>, ...args: Parameters<T>) => void;
+
+/**
+ * Ограничивает частоту вызовов функции.
+ *
+ * Возвращает новую обёртку, которая вызывает исходный `callback` не чаще,
+ * чем один раз в указанный интервал `delay`. Если во время ожидания поступают
+ * новые вызовы, они откладываются и выполняются после следующего разрешённого интервала.
+ *
+ * @template T
+ * @param {T} callback - Исходная функция, которую нужно ограничить по частоте вызова.
+ * @param {number} delay - Интервал в миллисекундах, определяющий, как часто можно вызывать `callback`.
+ *
+ * @returns {(...args: Parameters<T>) => void} Обёртка, выполняющая throttle‑логику.
+ *
+ * @example
+ * const throttledScroll = throttle(() => {
+ *   console.log('scroll event');
+ * }, 1000);
+ *
+ * window.addEventListener('scroll', throttledScroll);
+ */
+export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay: number): (this: ThisParameterType<T>, ...args: Parameters<T>) => void;
+
+export declare function useBEM(baseClass: string): {
+    bem(blockCN: string, options?: Omit<bemOptions, "baseCN">): string;
+};
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,7 @@
+import { useBEM } from "./hooks.es.js";
+import { debounce, throttle } from "./libs.es.js";
+export {
+  debounce,
+  throttle,
+  useBEM
+};

package/dist/libs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.debounce=function(t,e){let o;return function(...n){clearTimeout(o),o=setTimeout(()=>t.apply(this,n),e)}},exports.throttle=function(t,e){let o=!1,n=null;const u=()=>{null===n?o=!1:(t(...n),n=null,setTimeout(u,e))};return function(...l){o?n=l:(t.apply(this,l),o=!0,setTimeout(u,e))}};

package/dist/libs.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Создает обёртку для функции, которая откладывает её выполнение
+ * до тех пор, пока не пройдет заданное время `delay` после последнего вызова.
+ *
+ * Это полезно для оптимизации частых событий, например:
+ * ввод текста, изменение размера окна, прокрутка или ресайз изображений.
+ *
+ * Например, если пользователь непрерывно вводит текст, обработчик срабатывает
+ * только один раз — спустя `delay` миллисекунд после последнего нажатия клавиши.
+ *
+ * @template T
+ * @param {T} callback - Функция, которую нужно выполнить после периода "тишины".
+ * @param {number} delay - Время задержки (в миллисекундах) перед вызовом `callback`.
+ *
+ * @returns Возвращает новую функцию, которая реализует поведение debounce.
+ *
+ * @example
+ * // Пример: выполнение запроса только после паузы в наборе текста
+ * const debouncedSearch = debounce((query: string) => {
+ *   console.log('Ищем:', query);
+ * }, 300);
+ *
+ * document.querySelector('input')?.addEventListener('input', (e) => {
+ *   debouncedSearch((e.target as HTMLInputElement).value);
+ * });
+ */
+export declare function debounce<T extends (...args: any[]) => void>(callback: T, delay: number): (this: ThisParameterType<T>, ...args: Parameters<T>) => void;
+
+/**
+ * Ограничивает частоту вызовов функции.
+ *
+ * Возвращает новую обёртку, которая вызывает исходный `callback` не чаще,
+ * чем один раз в указанный интервал `delay`. Если во время ожидания поступают
+ * новые вызовы, они откладываются и выполняются после следующего разрешённого интервала.
+ *
+ * @template T
+ * @param {T} callback - Исходная функция, которую нужно ограничить по частоте вызова.
+ * @param {number} delay - Интервал в миллисекундах, определяющий, как часто можно вызывать `callback`.
+ *
+ * @returns {(...args: Parameters<T>) => void} Обёртка, выполняющая throttle‑логику.
+ *
+ * @example
+ * const throttledScroll = throttle(() => {
+ *   console.log('scroll event');
+ * }, 1000);
+ *
+ * window.addEventListener('scroll', throttledScroll);
+ */
+export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay: number): (this: ThisParameterType<T>, ...args: Parameters<T>) => void;
+
+export { }

package/dist/libs.es.js

@@ -0,0 +1,33 @@
+function debounce(callback, delay) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, args), delay);
+  };
+}
+function throttle(callback, delay) {
+  let shouldWait = false;
+  let pendingArgs = null;
+  const timeoutFunc = () => {
+    if (pendingArgs === null) {
+      shouldWait = false;
+    } else {
+      callback(...pendingArgs);
+      pendingArgs = null;
+      setTimeout(timeoutFunc, delay);
+    }
+  };
+  return function(...args) {
+    if (shouldWait) {
+      pendingArgs = args;
+      return;
+    }
+    callback.apply(this, args);
+    shouldWait = true;
+    setTimeout(timeoutFunc, delay);
+  };
+}
+export {
+  debounce,
+  throttle
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@revilise/web-utils",
+  "version": "1.0.51",
+  "description": "Utility functions",
+  "homepage": "https://github.com/revilise/web-utils#readme",
+  "bugs": {
+    "url": "https://github.com/revilise/web-utils/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/revilise/web-utils.git"
+  },
+  "license": "MIT",
+  "author": "Anastasia Mutnykh <mutnyh.ao@mail.ru>",
+  "sideEffects": false,
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs.js"
+    },
+    "./libs": {
+      "import": "./dist/libs.es.js",
+      "types": "./dist/libs.d.ts",
+      "require": "./dist/libs.cjs.js"
+    },
+    "./hooks": {
+      "import": "./dist/hooks.es.js",
+      "types": "./dist/hooks.d.ts",
+      "require": "./dist/hooks.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^24.9.1",
+    "@vitest/coverage-v8": "^4.0.4",
+    "jsdom": "^27.0.1",
+    "terser": "^5.44.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.4"
+  }
+}