@fozy-labs/rx-toolkit 0.4.18 → 0.5.0-rc.0

package/README.md

@@ -13,7 +13,7 @@ npm install @fozy-labs/rx-toolkit rxjs
 
 ## 🎯 Цель
 
-RxJS действительно мощный инструмент реактивного программирования, 
+RxJS действительно мощный инструмент реактивного программирования,
 он удобен когда мы работаем с потоком событий, но когда речь заходит о состоянии приложения,
 из-за асинхронной природы rx'а, его использование становится сложным и громоздким, не говоря уже о кешировании данных
 (хотя некоторые разработчики "продают" rxjs, как альтернативу Query библиотекам,
@@ -29,42 +29,42 @@ RxToolkit решает эти проблемы, предоставляя сво
 - 💾 **Кеш-менеджер** — Предоставляет Query реализацию для работы с данными.
 - 🔷 **TypeScript-first** — Полная типизация.
 - 🔗 **Интеграция с фреймворками** — Как и RxJS напрямую работает в Angular, Svelte и SolidJS.
- Поставляется с React-хуками из коробки.
+  Поставляется с React-хуками из коробки.
 
 ## 📚 Документация
 - [**RxSignals**](./docs/signals/README.md) - реактивные примитивы
 - [**RxQuery**](./docs/query/README.md) - кеш-менеджер для работы с данными
 - [**React**](./docs/usage/react/README.md) - интеграция с React
 - [**Devtools**](./docs/devtools/README.md) - инструменты разработчика
+- [**Changelog**](./docs/CHANGELOG.md) - история изменений
+- [**DefaultOptions**](./docs/options/README.md) - глобальные настройки
 
 ## 🌟 Примеры
 
 ###### Создаем сигнал
 ```typescript
 // Описываем логику в обычном JavaScript
-const store = {
-    count$: new Signal(0),
-    doubled$: new Computed(() => store.count$.value * 2),
-    increment: () => store.count$.value++,
-};
+const count$ = Signal.create(0);
+const doubled$ = Signal.compute(() => count$() * 2);
+const increment = () => count$.set(count$.peek() + 1);
 ```
 
 ###### Подключаем к фреймворку
 ```typescript
 // React
-const count = useSignal(store.count$);
+const count = useSignal(count$);
 
 // Angular signal
-count$ = toSignal(store.count$);
+public readonly count = toSignal(count$.obs);
 
 // Angular pipe
-{{ store.count$ | async }}
+{{ count$.obs | async }}
 
 // SolidJS
-const count$ = from(store.count$)
+const count = from(count$.obs)
 
 // Svelte
-$: count = store.count$;
+$: count = count$.obs;
 ```
 
 ###### Работаем с RxJS
@@ -79,20 +79,21 @@ const clicker$ = fromEvent(document, 'click').pipe(
 
 // Получаем сигнал из Observable
 const clickCount$ = signalize(clicker$);
-const doubled$ = new Computed(() => clickCount$.value * 2);
+const doubled$ = Signal.compute(() => clickCount$() * 2);
 
-console.log(doubled$.value); // Всегда актуальное значение
+console.log(doubled$.peek()); // Всегда актуальное значение
 
 // Или наоборот, получаем событие из сигнала
-const on10click$ = doubled$.pipe(
+const on10click$ = doubled$.obs.pipe(
     filter(value => value === 10),
     take(1)
 );
 
-on10click$.subscribe(() => {
+const sub = on10click$.subscribe(() => {
     console.log('Great! That you first reached 10 clicks!');
 });
-
+// Не забываем отписаться
+sub.unsubscribe();
 ```
 
 ###### RxQuery (Корзина покупок)
@@ -107,8 +108,8 @@ const toggleCardItem = createOperation({
         add({
             resource: getCart,
             forwardArgs: () => undefined,
-            optimisticUpdate: ({ draft, data, args }) => {
-                const item = draft.items.find(i => i.id === data.id);
+            optimisticUpdate: ({ draft, args }) => {
+                const item = draft.items.find(i => i.id === args.id);
                 if (!item) return;
                 item.enabled = args.enabled;
             }

package/dist/common/devtools/reduxDevtools.d.ts

@@ -8,9 +8,26 @@ interface ReduxDevtoolsConnection {
     init(state: any): void;
     send(action: any, state: any): void;
 }
+/**
+ * Стратегия батчинга обновлений:
+ * - 'sync' - синхронное выполнение без батчинга (каждое обновление отправляется немедленно)
+ * - 'microtask' - пакование в микротаске (queueMicrotask), все обновления в текущем синхронном потоке объединяются
+ * - 'task' - пакование в макротаске (setTimeout), с настраиваемой задержкой
+ */
+export type BatchStrategy = 'sync' | 'microtask' | 'task';
 type Options = {
     name?: string;
     driver?: ReduxDevtoolsExtension;
+    /**
+     * Стратегия батчинга обновлений
+     * @default 'microtask'
+     */
+    batchStrategy?: BatchStrategy;
+    /**
+     * Задержка для стратегии 'task' (в миллисекундах)
+     * @default 0
+     */
+    taskDelay?: number;
 };
 export declare function reduxDevtools(options?: Options): DevtoolsLike;
 export {};

package/dist/common/devtools/reduxDevtools.js

@@ -1,38 +1,119 @@
 import { Batcher } from "../../signals";
+/**
+ * Создает планировщик обновлений с указанной стратегией батчинга.
+ *
+ * Планировщик гарантирует:
+ * - Объединение множественных обновлений в один вызов flush
+ * - Порядок: сначала все pending обновления, затем flush
+ * - Отмену запланированного flush при новых обновлениях (для task стратегии)
+ */
+function createBatchScheduler(strategy, taskDelay) {
+    // Для sync режима используем Batcher.scheduler(Infinity),
+    // чтобы обновления devtools происходили в конце батча сигналов
+    const batcherScheduler = Batcher.scheduler(Infinity);
+    let isPending = false;
+    let timeoutId = null;
+    let pendingFlush = null;
+    const executePending = () => {
+        isPending = false;
+        timeoutId = null;
+        if (pendingFlush) {
+            const fn = pendingFlush;
+            pendingFlush = null;
+            fn();
+        }
+    };
+    const scheduleExecution = () => {
+        if (isPending)
+            return; // Уже запланировано
+        isPending = true;
+        switch (strategy) {
+            case 'sync':
+                // Используем Batcher — выполнится в конце текущего батча сигналов
+                // или сразу, если батч не активен
+                batcherScheduler.schedule(executePending);
+                break;
+            case 'microtask':
+                queueMicrotask(executePending);
+                break;
+            case 'task':
+                timeoutId = setTimeout(executePending, taskDelay);
+                break;
+        }
+    };
+    return {
+        /**
+         * Планирует выполнение flush функции.
+         * Множественные вызовы schedule до выполнения батча объединяются в один flush.
+         */
+        schedule(flushFn) {
+            pendingFlush = flushFn;
+            scheduleExecution();
+        },
+        /**
+         * Отменяет запланированный flush (полезно при cleanup)
+         */
+        cancel() {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            isPending = false;
+            pendingFlush = null;
+        },
+        /**
+         * Принудительно выполняет pending flush синхронно
+         */
+        flush() {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            if (pendingFlush) {
+                isPending = false;
+                const fn = pendingFlush;
+                pendingFlush = null;
+                fn();
+            }
+        }
+    };
+}
 export function reduxDevtools(options = {}) {
     const devtools = options.driver ?? window.__REDUX_DEVTOOLS_EXTENSION__;
     if (!devtools) {
         throw new Error('Redux Devtools extension is not installed');
     }
+    const batchStrategy = options.batchStrategy ?? 'microtask';
+    const taskDelay = options.taskDelay ?? 0;
     let state = {};
-    const reduxDevtools = devtools.connect({ name: options.name ?? 'RxToolkit' });
-    reduxDevtools.init(state);
-    const scheduler = Batcher.scheduler(Infinity);
-    let isCreated = false;
-    const updateFn = () => {
-        reduxDevtools.send({ type: isCreated ? 'create' : 'update' }, state);
-        isCreated = false;
-    };
-    const clearFn = () => {
-        reduxDevtools.send({ type: 'clear' }, state);
-    };
-    const createFn = () => {
-        isCreated = true;
-        return updateFn;
+    const connection = devtools.connect({ name: options.name ?? 'RxToolkit' });
+    connection.init(state);
+    const scheduler = createBatchScheduler(batchStrategy, taskDelay);
+    // Отслеживаем тип последнего действия для правильного action type в devtools
+    let pendingActionType = 'update';
+    const flushToDevtools = () => {
+        connection.send({ type: pendingActionType }, state);
+        pendingActionType = 'update'; // Сбрасываем на дефолт после отправки
     };
     return {
         state(name, initState) {
             const keys = name.split('/');
             state = applyState(keys, initState, state);
-            scheduler.schedule(createFn());
+            pendingActionType = 'create';
+            scheduler.schedule(flushToDevtools);
             return (newState) => {
                 if (newState === '$COMPLETED' || newState === '$CLEANED') {
                     state = deleteState(keys, state);
-                    clearFn();
+                    pendingActionType = 'clear';
+                    scheduler.schedule(flushToDevtools);
                     return;
                 }
                 state = applyState(keys, newState, state);
-                scheduler.schedule(updateFn);
+                // Не перезаписываем 'create' на 'update' если create еще не отправлен
+                if (pendingActionType !== 'create') {
+                    pendingActionType = 'update';
+                }
+                scheduler.schedule(flushToDevtools);
             };
         }
     };

package/dist/common/devtools/types.d.ts

@@ -8,4 +8,5 @@ export type StateDevtoolsOptions = {
     isDisabled?: boolean;
     name?: string;
     base?: string;
+    _skipValues?: any[];
 } | string;

package/dist/common/options/DefaultOptions.d.ts

@@ -1,10 +1,8 @@
 import type { DevtoolsLike } from "../../common/devtools";
-import { Observable } from "rxjs";
 type Update = Partial<{
     DEVTOOLS: DevtoolsLike | null;
     onQueryError: (error: unknown) => void;
     getScopeName: () => string | null;
-    getScopeDestroyed$: () => Observable<void> | null;
 }>;
 export declare class DefaultOptions {
     static update(part: Update): void;

package/dist/common/options/DefaultOptions.js

@@ -7,7 +7,5 @@ export class DefaultOptions {
             SharedOptions.onQueryError = part.onQueryError;
         if (part.getScopeName !== undefined)
             SharedOptions.getScopeName = part.getScopeName;
-        if (part.getScopeDestroyed$ !== undefined)
-            SharedOptions.getScopeDestroyed$ = part.getScopeDestroyed$;
     }
 }

package/dist/common/options/SharedOptions.d.ts

@@ -1,10 +1,8 @@
-import { Observable } from "rxjs";
 import { DevtoolsLike } from "../../common/devtools";
 import { shallowEqual } from "../../common/utils";
 export declare class SharedOptions {
     static DEVTOOLS: DevtoolsLike | null;
     static onQueryError: ((error: unknown) => void) | null;
     static getScopeName: (() => string | null) | null;
-    static getScopeDestroyed$: (() => Observable<void> | null) | null;
     static defaultCompareArgs: typeof shallowEqual;
 }

package/dist/common/options/SharedOptions.js

@@ -3,6 +3,5 @@ export class SharedOptions {
     static DEVTOOLS = null;
     static onQueryError = null;
     static getScopeName = null;
-    static getScopeDestroyed$ = null;
     static defaultCompareArgs = shallowEqual;
 }

package/dist/query/api/resetAllQueriesCache.d.ts

@@ -0,0 +1 @@
+export declare function resetAllQueriesCache(): void;

package/dist/query/api/resetAllQueriesCache.js

@@ -0,0 +1,4 @@
+import { ResetAllQueriesSignal } from "../core/ResetAllQueriesSignal";
+export function resetAllQueriesCache() {
+    ResetAllQueriesSignal.clean();
+}

package/dist/query/core/Opertation/Operation.js

@@ -3,7 +3,7 @@ import { Batcher } from "../../../signals";
 import { QueriesCache } from "../QueriesCache";
 import { QueriesLifetimeHooks } from "../QueriesLifetimeHooks";
 import { OperationAgent } from "./OperationAgent";
-import { CleanAllQueriesSignal } from "../../../query/core/CleanAllQueriesSignal";
+import { ResetAllQueriesSignal } from "../../../query/core/ResetAllQueriesSignal";
 class OperationQueryState {
     static create() {
         return {
@@ -66,8 +66,11 @@ export class Operation {
             devtoolsName: _options.devtoolsName,
         });
         this._createLinks();
-        CleanAllQueriesSignal.clean$.subscribe(() => {
-            this._queriesCache.clear();
+        ResetAllQueriesSignal.clean$.subscribe(() => {
+            const caches = Array.from(this._queriesCache.values());
+            caches.forEach((cache) => {
+                cache.next(OperationQueryState.create());
+            });
         });
     }
     _createLinks() {
@@ -99,7 +102,7 @@ export class Operation {
         return cache;
     }
     initiate(args, options) {
-        return Batcher.batch(() => this._initiate(args, options));
+        return Batcher.run(() => this._initiate(args, options));
     }
     _initiate(args, options) {
         let cache = options?.cache ?? this.getQueryCache(args);
@@ -129,7 +132,7 @@ export class Operation {
         });
         query
             .then((result) => {
-            Batcher.batch(() => {
+            Batcher.run(() => {
                 const data = this._options.select ? this._options.select(result) : result;
                 cache.next(OperationQueryState.success(state, data));
                 /**
@@ -160,7 +163,7 @@ export class Operation {
             });
         })
             .catch((error) => {
-            Batcher.batch(() => {
+            Batcher.run(() => {
                 cache.next(OperationQueryState.error(state, error));
                 /**
                  * Обновляем связанные ресурсы
@@ -186,7 +189,7 @@ export class Operation {
     mutate(args) {
         const cache = this.initiate(args);
         const resolver = new PromiseResolver();
-        const subscription = cache.value$.subscribe((state) => {
+        const subscription = cache.value$.obs.subscribe((state) => {
             if (!state.isInitiated || state.isLoading || state.isRepeating)
                 return;
             if (state.isError) {

package/dist/query/core/Opertation/OperationAgent.d.ts

@@ -4,7 +4,6 @@ import type { Operation } from "./Operation";
 export declare class OperationAgent<D extends OperationDefinition> implements OperationAgentInstanse<D> {
     private _operation;
     private _operations$;
-    private _effect;
     state$: Computed<{
         isLoading: boolean;
         isDone: boolean;
@@ -18,5 +17,4 @@ export declare class OperationAgent<D extends OperationDefinition> implements Op
     private _next;
     initiate(args: D["Args"]): void;
     createAgent(): OperationAgentInstanse<D>;
-    complete(): void;
 }

package/dist/query/core/Opertation/OperationAgent.js

@@ -1,24 +1,12 @@
-import { Computed, Effect, Signal } from "../../../signals";
+import { Computed, Signal } from "../../../signals";
 export class OperationAgent {
     _operation;
     _operations$ = new Signal({
         current$: null,
     }, { isDisabled: true });
-    _effect = new Effect(() => {
-        const current$ = this._operations$.value.current$;
-        // Если ресурс который мы слушаем очистился, то инициируем его заново с теми же аргументами
-        const sub = current$?.onClean$.subscribe(() => {
-            this._operations$.next({
-                current$: null,
-            });
-        });
-        return () => {
-            sub?.unsubscribe();
-        };
-    });
     state$ = new Computed(() => {
-        const operations = this._operations$.value;
-        const currState = operations.current$?.value$.value;
+        const operations = this._operations$.get();
+        const currState = operations.current$?.value$.get();
         // Нет текущего состояния — дефолт
         if (!currState) {
             return {
@@ -45,7 +33,7 @@ export class OperationAgent {
         this._operation = _operation;
     }
     _next(newCache) {
-        this._operations$.next({
+        this._operations$.set({
             current$: newCache,
         });
     }
@@ -63,9 +51,4 @@ export class OperationAgent {
     createAgent() {
         return new OperationAgent(this._operation);
     }
-    complete() {
-        this._effect.complete();
-        this._operations$.complete();
-        this.state$.complete();
-    }
 }

package/dist/query/core/QueriesCache.d.ts

@@ -6,5 +6,5 @@ export declare class QueriesCache<KEY, VALUE> {
     constructor(_cacheLifeTime?: number | false, compareArgsFn?: typeof shallowEqual);
     getQueryCache(args: KEY): ReactiveCache<VALUE> | undefined;
     createQueryCache(args: KEY, initialState: VALUE): ReactiveCache<VALUE>;
-    clear(): void;
+    values(): MapIterator<ReactiveCache<VALUE>>;
 }

package/dist/query/core/QueriesCache.js

@@ -22,11 +22,7 @@ export class QueriesCache {
         this._cache.set(args, cache);
         return cache;
     }
-    clear() {
-        // Делаем именно так, тк при очистке могут синхронно добавляться новые кеши
-        const values = Array.from(this._cache.values);
-        values.forEach(c => {
-            c.complete();
-        });
+    values() {
+        return this._cache.values();
     }
 }

package/dist/query/core/{CleanAllQueriesSignal.d.ts → ResetAllQueriesSignal.d.ts}

@@ -1,5 +1,5 @@
 import { Subject } from "rxjs";
-export declare class CleanAllQueriesSignal {
+export declare class ResetAllQueriesSignal {
     private static subject$;
     static clean$: Subject<void>;
     static clean(): void;

package/dist/query/core/ResetAllQueriesSignal.js

@@ -0,0 +1,11 @@
+import { Subject } from "rxjs";
+import { Batcher } from "../../signals";
+export class ResetAllQueriesSignal {
+    static subject$ = new Subject();
+    static clean$ = ResetAllQueriesSignal.subject$;
+    static clean() {
+        Batcher.run(() => {
+            ResetAllQueriesSignal.subject$.next();
+        });
+    }
+}

package/dist/query/core/Resource/Resource.js

@@ -1,7 +1,7 @@
 import { SharedOptions } from "../../../common/options/SharedOptions";
 import { QueriesCache } from "../QueriesCache";
 import { QueriesLifetimeHooks } from "../QueriesLifetimeHooks";
-import { CleanAllQueriesSignal } from "../CleanAllQueriesSignal";
+import { ResetAllQueriesSignal } from "../ResetAllQueriesSignal";
 import { ResourceAgent } from "./ResourceAgent";
 import { ResourceRef } from "./ResourceRef";
 class ResourceQueryState {
@@ -117,8 +117,12 @@ export class Resource {
             devtoolsName: _options.devtoolsName,
         });
         this._queriesCache = new QueriesCache(_options.cacheLifetime ?? this._DEFAULT_CACHE_LIFETIME);
-        CleanAllQueriesSignal.clean$.subscribe(() => {
-            this._queriesCache.clear();
+        ResetAllQueriesSignal.clean$.subscribe(() => {
+            const caches = Array.from(this._queriesCache.values());
+            caches.forEach((cache) => {
+                cache.value.abortController?.abort();
+                cache.next(ResourceQueryState.create(cache.value.args));
+            });
         });
     }
     createAgent = () => {

package/dist/query/core/Resource/ResourceAgent.d.ts

@@ -1,10 +1,9 @@
 import { Computed } from "../../../signals";
-import { ResourceAgentInstance, ResourceDefinition } from "../../../query/types";
+import { ResourceAgentInstance, ResourceDefinition, ResourceQueryState } from "../../../query/types";
 import type { Resource } from "./Resource";
 export declare class ResourceAgent<D extends ResourceDefinition> implements ResourceAgentInstance<D> {
     private _resource;
     private _resources$;
-    private _effect;
     state$: Computed<{
         isInitiated: boolean;
         isLoading: boolean;
@@ -31,8 +30,8 @@ export declare class ResourceAgent<D extends ResourceDefinition> implements Reso
         args: NonNullable<D["Args"]> | undefined;
     }>;
     constructor(_resource: Resource<D>);
+    getState(values: D["Args"]): ResourceQueryState<D>;
     initiate(args: D["Args"], force?: boolean): void;
     compareArgs(args: D["Args"], otherArgs: D["Args"]): boolean;
-    complete(): void;
     private _next;
 }

package/dist/query/core/Resource/ResourceAgent.js

@@ -1,29 +1,35 @@
-import { Computed, Effect, Signal } from "../../../signals";
+import { Computed, Signal } from "../../../signals";
 export class ResourceAgent {
     _resource;
     _resources$ = new Signal({
         previous$: null,
         current$: null,
     }, { isDisabled: true });
-    _effect = new Effect(() => {
-        const current$ = this._resources$.value.current$;
-        const args = current$?.value.args;
-        // Если ресурс который мы слушаем очистился, то инициируем его заново с теми же аргументами
-        const sub = current$?.onClean$.subscribe(() => {
-            this._resources$.next({
-                previous$: null,
-                current$: null,
-            });
-            this.initiate(args);
-        });
-        return () => {
-            sub?.unsubscribe();
-        };
-    });
     state$ = new Computed(() => {
-        const resources = this._resources$.value;
+        const resources = this._resources$.get();
         let prevState;
-        const currState = resources.current$?.value$.value;
+        const currState = resources.current$?.value$.get();
+        // Отлавливаем кейс, когда ресурс был спрошен.
+        // На данные момент единсвенная причина сброса - resetAllQueriesCache(),
+        //  но в будущем могут быть и другие причины, что потребует доработку.
+        if (currState && !currState.isInitiated) {
+            this._resource.initiate(currState.args, { cache: resources.current$ });
+            return {
+                isInitiated: true,
+                isLoading: true,
+                isInitialLoading: true,
+                isDone: false,
+                isSuccess: false,
+                isError: false,
+                isReloading: false,
+                error: undefined,
+                data: undefined,
+                // TODO вообще нет точного представлния, как блокировака доложна работать.
+                //  Мб тут стоит брать currState.isLocked.
+                isLocked: false,
+                args: currState.args,
+            };
+        }
         if (!currState?.isDone) {
             prevState = resources.previous$?.value;
         }
@@ -62,8 +68,40 @@ export class ResourceAgent {
     constructor(_resource) {
         this._resource = _resource;
     }
+    getState(values) {
+        const cache = this._resource.getQueryCache(values);
+        if (!cache) {
+            return {
+                isInitiated: false,
+                isLoading: false,
+                isInitialLoading: false,
+                isDone: false,
+                isSuccess: false,
+                isError: false,
+                isLocked: false,
+                isReloading: false,
+                error: undefined,
+                data: undefined,
+                args: undefined,
+            };
+        }
+        const state = cache.value;
+        return {
+            isInitiated: state.isInitiated,
+            isLoading: state.isLoading,
+            isInitialLoading: state.isLoading && !state.isDone,
+            isDone: state.isDone,
+            isSuccess: state.isSuccess,
+            isError: state.isError,
+            isLocked: state.isLocked,
+            isReloading: state.isReloading,
+            error: state.error ?? undefined,
+            data: state.data ?? undefined,
+            args: state.args ?? undefined,
+        };
+    }
     initiate(args, force = false) {
-        const current = this._resources$.value.current$;
+        const current = this._resources$.peek().current$;
         const cache = this._resource.getQueryCache(args);
         if (!cache) {
             const newCache = this._resource.initiate(args);
@@ -80,28 +118,23 @@ export class ResourceAgent {
     compareArgs(args, otherArgs) {
         return this._resource.compareArgs(args, otherArgs);
     }
-    complete() {
-        this._effect.complete();
-        this.state$.complete();
-        this._resources$.complete();
-    }
     _next(newCache) {
-        const { previous$, current$ } = this._resources$.value;
+        const { previous$, current$ } = this._resources$.peek();
         if (!current$) {
-            this._resources$.next({
+            this._resources$.set({
                 previous$: null,
                 current$: newCache,
             });
             return;
         }
-        if (!current$.value.isDone && previous$?.value.isDone) {
-            this._resources$.next({
+        if (!current$.value$.peek().isDone && previous$?.value$.peek().isDone) {
+            this._resources$.set({
                 previous$: previous$,
                 current$: newCache,
             });
             return;
         }
-        this._resources$.next({
+        this._resources$.set({
             previous$: current$,
             current$: newCache,
         });