yummies 5.4.5 → 5.4.6

package/src/mobx/deep-observable-struct.test.ts

@@ -0,0 +1,69 @@
+import { reaction } from 'mobx';
+import { describe, expect, it, vi } from 'vitest';
+import { DeepObservableStruct } from './deep-observable-struct';
+
+const dataSet = {
+  values: {
+    a1: 1,
+    a2: 'string',
+    a3: 'strign',
+    a4: 1,
+    a5: { a5_1: 0, a5_2: 0, a5_3: 0, a5_4: 0 },
+    a6: {
+      a6_1: ['1', '2', '3'],
+      a6_2: false,
+      a6_3: false,
+      a6_4: ['1', '2', '3'],
+      a6_5: [],
+    },
+    a7: {},
+    a8: {
+      a8_1: { a8_1_1: true, a8_1_2: '' },
+    },
+    a9: 'string',
+    a10: 'string',
+  },
+};
+
+describe('DeepObservableStruct', () => {
+  it('should set data correctly', () => {
+    const sourceValue = structuredClone(dataSet);
+    const struct = new DeepObservableStruct(sourceValue);
+
+    expect(struct.data).toEqual(structuredClone(dataSet));
+
+    const nextData = structuredClone(dataSet);
+    nextData.values.a8.a8_1.a8_1_2 = 'new value';
+
+    struct.set(nextData);
+
+    expect(struct.data).toEqual(nextData);
+  });
+
+  it('should MobX reaction ignores all updates expect real changes', () => {
+    const sourceValue = structuredClone(dataSet);
+    const struct = new DeepObservableStruct(sourceValue);
+
+    expect(struct.data).toEqual(structuredClone(dataSet));
+
+    const reaction1Spy = vi.fn();
+    const reaction2Spy = vi.fn();
+    const reaction3Spy = vi.fn();
+    const reaction4Spy = vi.fn();
+
+    reaction(() => struct.data.values.a2, reaction1Spy);
+    reaction(() => struct.data.values.a8, reaction2Spy);
+    reaction(() => struct.data.values.a8.a8_1, reaction3Spy);
+    reaction(() => struct.data.values.a8.a8_1.a8_1_2, reaction4Spy);
+
+    const nextData = structuredClone(dataSet);
+    nextData.values.a8.a8_1.a8_1_2 = 'new value';
+
+    struct.set(nextData);
+
+    expect(reaction1Spy).not.toBeCalled();
+    expect(reaction2Spy).not.toBeCalled();
+    expect(reaction3Spy).not.toBeCalled();
+    expect(reaction4Spy).toBeCalledTimes(1);
+  });
+});

package/src/mobx/deep-observable-struct.ts

@@ -0,0 +1,69 @@
+import { action, makeObservable, observable } from 'mobx';
+import { typeGuard } from '../type-guard/index.js';
+import type { AnyObject } from '../utils/types.js';
+
+export class DeepObservableStruct<TData extends AnyObject> {
+  data: TData;
+
+  constructor(data: TData) {
+    this.data = data;
+
+    makeObservable(this, {
+      data: observable.deep,
+      set: action,
+    });
+  }
+
+  set(newData: Partial<TData>) {
+    type StackItem = [key: string, currObservable: AnyObject, new: AnyObject];
+
+    const stack: StackItem[] = Object.keys(this.data).map((key) => [
+      key,
+      this.data,
+      newData,
+    ]);
+
+    let currentIndex = 0;
+    let stackLength = stack.length;
+
+    while (currentIndex < stackLength) {
+      const [key, currObservableData, newData] = stack[currentIndex];
+      const newValue = newData[key];
+      const currValue = currObservableData[key];
+
+      currentIndex++;
+
+      if (key in newData) {
+        if (typeGuard.isObject(newValue) && typeGuard.isObject(currValue)) {
+          const newValueKeys = Object.keys(newValue);
+
+          Object.keys(currValue).forEach((childKey) => {
+            if (!(childKey in newValue)) {
+              delete currObservableData[key][childKey];
+            }
+          });
+
+          newValueKeys.forEach((childKey) => {
+            const length = stack.push([
+              childKey,
+              currObservableData[key],
+              newValue,
+            ]);
+            stackLength = length;
+          });
+        } else if (newValue !== currValue) {
+          currObservableData[key] = newValue;
+        }
+      } else {
+        delete currObservableData[key];
+      }
+    }
+
+    Object.keys(newData).forEach((newDataKey) => {
+      if (!this.data[newDataKey]) {
+        // @ts-expect-error
+        this.data[newDataKey] = newData[newDataKey];
+      }
+    });
+  }
+}

package/src/mobx/get-mobx-administration.ts

@@ -0,0 +1,10 @@
+import { $mobx, type AnnotationMapEntry } from 'mobx';
+import type { AnyObject } from '../utils/types.js';
+
+type ObservableObjectAdministration = Parameters<
+  Exclude<AnnotationMapEntry, boolean>['make_']
+>[0];
+
+export const getMobxAdministration = (
+  context: AnyObject,
+): ObservableObjectAdministration => context[$mobx];

package/src/mobx/index.ts

@@ -0,0 +1,5 @@
+export * from './apply-observable.js';
+export * from './create-enhanced-atom.js';
+export * from './deep-observable-struct.js';
+export * from './get-mobx-administration.js';
+export * from './lazy-observe.js';

package/src/mobx/lazy-observe.ts

@@ -0,0 +1,59 @@
+import { onBecomeObserved, onBecomeUnobserved } from 'mobx';
+
+export const lazyObserve = <TMetaData = void>({
+  context,
+  property,
+  onStart,
+  onEnd,
+  endDelay = 0,
+}: {
+  context?: any;
+  property: any | any[];
+  onStart: () => TMetaData;
+  onEnd: (metaData: TMetaData, cleanupFn: VoidFunction) => void;
+  endDelay?: number;
+}) => {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  let metaData: TMetaData | undefined;
+  const properties = Array.isArray(property) ? property : [property];
+  let isObserving = false;
+
+  const start = () => {
+    if (isObserving) {
+      return;
+    }
+    isObserving = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+    metaData = onStart();
+  };
+
+  const cleanup = () => {
+    if (!isObserving) {
+      return;
+    }
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+    timeoutId = setTimeout(() => {
+      onEnd(metaData!, cleanup);
+      timeoutId = undefined;
+      metaData = undefined;
+    }, endDelay);
+  };
+
+  properties.forEach((property) => {
+    if (context) {
+      onBecomeObserved(context, property, start);
+      onBecomeUnobserved(context, property, cleanup);
+    } else {
+      onBecomeObserved(property, start);
+      onBecomeUnobserved(property, cleanup);
+    }
+  });
+
+  return cleanup;
+};

package/src/ms.ts

@@ -0,0 +1,20 @@
+export const unitsToMs = {
+  ms: 1,
+  sec: 1000,
+  min: 1000 * 60,
+  hour: 1000 * 60 * 60,
+  day: 1000 * 60 * 60 * 24,
+  week: 1000 * 60 * 60 * 24 * 7,
+} as const;
+
+/**
+ * Переводит значение в юнитах в миллисекунды
+ *
+ * @example
+ * ```ts
+ * ms(1, 'min') // 60_000
+ * ms(30, 'sec') // 30_000
+ * ```
+ */
+export const ms = (value: number, unit: keyof typeof unitsToMs = 'ms') =>
+  value * unitsToMs[unit];

package/src/number.ts

@@ -0,0 +1,14 @@
+/**
+ * Works like `parseFloat(number.toFixed(4))` but performance better
+ *
+ * @example
+ * round(191.212999999999999999999999, 4) // 191.213
+ */
+export function round(value: number, decimalPlaces: number = 0): number {
+  if (!decimalPlaces) {
+    return Math.round(value);
+  }
+
+  const factor = 10 ** decimalPlaces;
+  return Math.round(value * factor) / factor;
+}

package/src/parser/_exports.ts

@@ -0,0 +1,3 @@
+export * from './number.js';
+export * from './percent.js';
+export * from './string.js';

package/{dist/parser/index.js → src/parser/index.ts}

@@ -1,4 +1,5 @@
 // This way is more treeshakable than collecting
 // it into one exportable object export const parser
-import * as parser from "./_exports.js";
+import * as parser from './_exports.js';
+
 export { parser };

package/src/parser/number.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest';
+import { number } from './number';
+
+describe('parser.number', () => {
+  test('empty string should return 0', () => {
+    expect(number('')).toBe(0);
+  });
+
+  test('empty string with fallback should return fallback', () => {
+    expect(number('', { fallback: 'kek' })).toBe('kek');
+  });
+
+  test('Checking the logic of the function', () => {
+    expect(number(1)).toBe(1);
+    expect(number(100)).toBe(100);
+    expect(number(500)).toBe(500);
+    expect(number(1, { clamped: [400] })).toBe(400);
+    expect(number(1001, { clamped: [null, 1000] })).toBe(1000);
+  });
+
+  test('Rounding down', () => {
+    expect(number(5.9, { floor: true })).toBe(5);
+  });
+
+  test('Rounding up', () => {
+    expect(number(5.1, { ceil: true })).toBe(6);
+  });
+
+  test('Processing invalid values', () => {
+    expect(number(null)).toBe(0);
+    expect(number(undefined)).toBe(0);
+    expect(number('-')).toBe(0);
+    expect(number('test')).toBe(0);
+
+    expect(number(null, null)).toBe(0);
+    expect(number(undefined, undefined)).toBe(0);
+  });
+});

package/src/parser/number.ts

@@ -0,0 +1,73 @@
+import { skipSpaces } from '../format/skip-spaces.js';
+import { typeGuard } from '../type-guard/index.js';
+import type { Maybe } from '../utils/types.js';
+
+export interface NumberParserSettings<TFallback = number> {
+  digits?: number;
+  fallback?: TFallback;
+  /**
+   * Round to upper boundary
+   * 5.1 -> 6
+   */
+  ceil?: boolean;
+  /**
+   * Round to bottom boundary
+   * 5.9 -> 5
+   */
+  floor?: boolean;
+  clamped?: [min?: Maybe<number>, max?: Maybe<number>];
+}
+
+export const number = <TFallback = number>(
+  input: Maybe<unknown>,
+  userSettings?: Maybe<NumberParserSettings<TFallback>>,
+): number | TFallback => {
+  const settings = {
+    ...number.defaultSettings,
+    ...userSettings,
+  };
+
+  const fallback = settings?.fallback ?? 0;
+
+  let result: number;
+
+  if (typeGuard.isNumber(input)) {
+    result = input;
+  } else if (typeGuard.isString(input)) {
+    const formattedInput = skipSpaces(input).replace(',', '.');
+    if (formattedInput === '') {
+      result = fallback as any;
+    } else {
+      result = Number(formattedInput);
+    }
+  } else {
+    result = fallback as any;
+  }
+
+  if (typeGuard.isNumber(result)) {
+    if (settings?.clamped != null) {
+      result = Math.max(
+        settings.clamped[0] ?? -Infinity,
+        Math.min(result, settings.clamped[1] ?? Infinity),
+      );
+    }
+
+    if (settings?.ceil != null) {
+      result = Math.ceil(result);
+    }
+
+    if (settings?.floor != null) {
+      result = Math.floor(result);
+    }
+
+    if (settings?.digits != null) {
+      result = +result.toFixed(settings.digits);
+    }
+
+    return result;
+  } else {
+    return fallback;
+  }
+};
+
+number.defaultSettings = {} as NumberParserSettings;

package/src/parser/percent.ts

@@ -0,0 +1,11 @@
+import type { Maybe } from '../utils/types.js';
+
+import { type NumberParserSettings, number } from './number.js';
+
+export const percent = <TFallback = number>(
+  value: Maybe<string | number>,
+  maxValue?: Maybe<string | number>,
+  settings?: Maybe<NumberParserSettings<TFallback>>,
+) => {
+  return number<TFallback>((Number(value) / Number(maxValue)) * 100, settings);
+};

package/src/parser/string.ts

@@ -0,0 +1,29 @@
+import { typeGuard } from '../type-guard/index.js';
+import type { Maybe } from '../utils/types.js';
+
+export interface StringParserSettings<TFallback = string> {
+  fallback?: TFallback;
+  prettyJson?: boolean;
+}
+
+export const string = <TFallback = string>(
+  input: Maybe<unknown>,
+  settings?: Maybe<StringParserSettings<TFallback>>,
+): string | TFallback => {
+  const fallback =
+    settings && 'fallback' in settings ? (settings.fallback as TFallback) : '';
+
+  if (input == null) {
+    return fallback;
+  }
+
+  if (typeGuard.isObject(input)) {
+    if (settings?.prettyJson) {
+      return JSON.stringify(input, null, 2);
+    }
+
+    return JSON.stringify(input);
+  }
+
+  return String(input);
+};

package/src/price.ts

@@ -0,0 +1,33 @@
+export interface PriceFormatOptions
+  extends Partial<Omit<Intl.NumberFormatOptions, 'currency'>> {
+  withoutSymbol?: boolean;
+  customSymbol?: string;
+}
+
+export const formatPrice = (
+  price: number,
+  locale: string,
+  currency?: string,
+  { withoutSymbol, customSymbol, ...options }: PriceFormatOptions = {},
+) => {
+  const priceFormatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+    currencyDisplay: 'narrowSymbol',
+    ...options,
+  });
+
+  const zeroPrice = priceFormatter.format(0);
+  const currencySymbol = zeroPrice.replace('0', '');
+  const rawPrice = priceFormatter.format(price);
+  const priceWithoutCurrency = rawPrice.replace(currencySymbol, '');
+
+  if (withoutSymbol) {
+    return priceWithoutCurrency;
+  }
+
+  return `${priceWithoutCurrency} ${
+    customSymbol ?? (currency === 'RUB' ? 'р' : currencySymbol)
+  }`.replace(/\s{2,}/, ' ');
+};

package/src/random.ts

@@ -0,0 +1,27 @@
+export const getRandomFloat = <T extends number = number>(
+  min = 0,
+  max = 1,
+): T => (Math.random() * (max - min) + min) as T;
+
+export const getRandomInt = <T extends number = number>(min = 0, max = 1): T =>
+  min === max ? (min as T) : (Math.round(getRandomFloat(min, max)) as T);
+
+export const getRandomChoice = <T>(arr: T[]): T =>
+  arr[getRandomInt(0, arr.length - 1)];
+
+export const getRandomSizeArray = (min = 0, max = 10) =>
+  Array.from({ length: getRandomInt(min, max) }).fill(null);
+
+export const getRandomBool = () => getRandomInt(0, 1) === 1;
+
+export const getMajorRandomBool = () => {
+  return getRandomInt(0, 10) <= 6;
+};
+
+export const getMinorRandomBool = () => {
+  return !getMajorRandomBool();
+};
+
+export const getFrequencyValue = (frequency: number) => {
+  return Math.random() < frequency;
+};

package/src/react/hooks/index.ts

@@ -0,0 +1,21 @@
+export * from './use-abort-controller.js';
+export * from './use-abort-signal.js';
+export * from './use-click-outside.js';
+export * from './use-constant.js';
+export * from './use-define-ref.js';
+export * from './use-element-ref.js';
+export * from './use-event.js';
+export * from './use-event-listener.js';
+export * from './use-flag.js';
+export * from './use-force-update.js';
+export * from './use-initial-height.js';
+export * from './use-instance.js';
+export * from './use-intersection-observer.js';
+export * from './use-last-defined-value.js';
+export * from './use-last-value-ref.js';
+export * from './use-life-cycle.js';
+export * from './use-resize-observer.js';
+export * from './use-sync-ref.js';
+export * from './use-toggle.js';
+export * from './use-value.js';
+export * from './use-visibility-state.js';

package/src/react/hooks/use-abort-controller.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+import { useConstant } from './use-constant.js';
+
+export const useAbortController = () => {
+  const controller = useConstant(() => new AbortController());
+
+  useEffect(() => {
+    return () => {
+      controller.abort();
+    };
+  }, []);
+
+  return controller;
+};

package/src/react/hooks/use-abort-signal.ts

@@ -0,0 +1,5 @@
+import { useAbortController } from './use-abort-controller.js';
+
+export const useAbortSignal = () => {
+  return useAbortController().signal;
+};

package/src/react/hooks/use-click-outside.ts

@@ -0,0 +1,27 @@
+import type { MutableRefObject } from 'react';
+import { useEventListener } from './use-event-listener.js';
+
+type ClickOutsideInput = {
+  contentRef: MutableRefObject<HTMLElement | null>;
+  onClick: VoidFunction;
+  options?: AddEventListenerOptions;
+};
+
+export const useClickOutside = ({
+  contentRef,
+  onClick,
+  options,
+}: ClickOutsideInput) => {
+  useEventListener({
+    event: 'mousedown',
+    handler: (event) => {
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node)
+      ) {
+        onClick();
+      }
+    },
+    options,
+  });
+};

package/{dist/react/hooks/use-constant.js → src/react/hooks/use-constant.ts}

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+
 /**
  * React hook for creating a value exactly once.
  * useMemo doesn't give this guarantee unfortunately -
@@ -6,10 +7,12 @@ import { useRef } from 'react';
  * https://reactjs.org/docs/hooks-reference.html#usememo
  * @param defineValue Function which returns defined value.
  */
-export const useConstant = (defineValue) => {
-    const ref = useRef();
-    if (!ref.current) {
-        ref.current = { value: defineValue() };
-    }
-    return ref.current.value;
+export const useConstant = <T>(defineValue: () => T): T => {
+  const ref = useRef<{ value: T }>();
+
+  if (!ref.current) {
+    ref.current = { value: defineValue() };
+  }
+
+  return ref.current.value;
 };

package/{dist/react/hooks/use-define-ref.js → src/react/hooks/use-define-ref.ts}

@@ -1,4 +1,5 @@
-import { useRef } from 'react';
+import { type MutableRefObject, useRef } from 'react';
+
 /**
  * React hook for creating a value exactly once.
  * useMemo doesn't give this guarantee unfortunately -
@@ -6,10 +7,12 @@ import { useRef } from 'react';
  * https://reactjs.org/docs/hooks-reference.html#usememo
  * @param defineFn Function which returns defined value.
  */
-export const useDefineRef = (defineFn) => {
-    const ref = useRef(void 0);
-    if (!ref.current) {
-        ref.current = defineFn();
-    }
-    return ref;
+export const useDefineRef = <T>(defineFn: () => T): MutableRefObject<T> => {
+  const ref = useRef<T>(void 0 as T);
+
+  if (!ref.current) {
+    ref.current = defineFn();
+  }
+
+  return ref;
 };

package/src/react/hooks/use-element-ref.ts

@@ -0,0 +1,11 @@
+import { useLayoutEffect, useRef } from 'react';
+
+export const useElementRef = <T extends HTMLElement>(selector: () => T) => {
+  const ref = useRef<T>();
+
+  useLayoutEffect(() => {
+    ref.current = selector();
+  }, []);
+
+  return ref;
+};

package/src/react/hooks/use-event-listener.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useEffect } from 'react';
+import { useSyncRef } from './use-sync-ref.js';
+
+export const useEventListener = <EventName extends keyof HTMLElementEventMap>({
+  event,
+  handler,
+  options,
+  deps = [],
+  node = document,
+}: {
+  event: EventName;
+  handler: (e: HTMLElementEventMap[EventName]) => void;
+  options?: boolean | AddEventListenerOptions;
+  deps?: unknown[];
+  node?: HTMLElement | Document | Window;
+}) => {
+  const handlerRef = useSyncRef(handler);
+
+  useEffect(() => {
+    const handleEvent = (e: HTMLElementEventMap[EventName]) =>
+      handlerRef.current(e);
+
+    // @ts-expect-error
+    node.addEventListener(event, handleEvent, options);
+    // @ts-expect-error
+    return () => node.removeEventListener(event, handleEvent, options);
+  }, deps);
+};

package/src/react/hooks/use-event.ts

@@ -0,0 +1,23 @@
+/**
+ * A Hook to define an event handler with an always-stable function identity.
+ *
+ * borrowed from @gaeron
+ * https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
+ */
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import type { AnyFunction } from '../../utils/types.js';
+
+export const useEvent = <H extends AnyFunction>(handler: H): H => {
+  const handlerRef = useRef<H>(handler);
+
+  // In a real implementation, this would run before layout effects
+  useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+
+  return useCallback((...args: unknown[]) => {
+    // In a real implementation, this would throw if called during render
+    const fn = handlerRef.current as AnyFunction;
+    return fn(...args);
+  }, []) as unknown as H;
+};