@fozy-labs/rx-toolkit 0.4.1 → 0.4.2

package/README.md

@@ -27,14 +27,15 @@ RxToolkit решает эти проблемы, предоставляя сво
 - 🔧 **Framework-agnostic** — Стройте систему и описывайте логику в изолированном месте.
 - ⚡ **Built on RxJS** — Наследует всю мощь RxJS.
 - 💾 **Кеш-менеджер** — Предоставляет Query реализацию для работы с данными.
-- 🔷 **TypeScript-first** — Полная типизация из коробки.
-- 🔗 **Интеграция с фреймворками** — Как и RxJS напрямую работает в Angular, Svelte и SolidJS. 
-Для React предоставляет хуки из коробки.
+- 🔷 **TypeScript-first** — Полная типизация.
+- 🔗 **Интеграция с фреймворками** — Как и RxJS напрямую работает в Angular, Svelte и SolidJS.
+ Поставляется с React-хуками из коробки.
 
 ## 📚 Документация
 - [**RxSignals**](./docs/signals/README.md) - реактивные примитивы
 - [**RxQuery**](./docs/query/README.md) - кеш-менеджер для работы с данными
 - [**React**](./docs/usage/react/README.md) - интеграция с React
+- [**Devtools**](./docs/devtools/README.md) - инструменты разработчика
 
 ## 🌟 Примеры
 
@@ -59,20 +60,26 @@ count$ = toSignal(store.count$);
 // Angular pipe
 {{ store.count$ | async }}
 
+// SolidJS
+const count$ = from(store.count$)
+
 // Svelte
 $: count = store.count$;
 ```
 
 ###### Работаем с RxJS
+
 ```typescript
 // Создаем Observable
+
 const clicker$ = fromEvent(document, 'click').pipe(
     debounceTime(300),
-    scan(count => count + 1, 0)
+    scan(count => count + 1, 0),
+    startWith(0),
 );
 
 // Получаем сигнал из Observable
-const clickCount$ = new ReadonlySignal(clicker$);
+const clickCount$ = signalize(clicker$);
 const doubled$ = new Computed(() => clickCount$.value * 2);
 
 console.log(doubled$.value); // Всегда актуальное значение
@@ -84,7 +91,7 @@ const on10click$ = doubled$.pipe(
 );
 
 on10click$.subscribe(() => {
-    console.log('Great! That you first reached 10 clicks');
+    console.log('Great! That you first reached 10 clicks!');
 });
 
 ```
@@ -92,40 +99,39 @@ on10click$.subscribe(() => {
 ###### RxQuery (Корзина покупок)
 ```tsx
 const getCart = createResource({
-  queryFn: fetchCart,
+    queryFn: fetchCart,
 });
 
 const toggleCardItem = createOperation({
-    queryFn: fetchToggleItem,
-  link(add) {
-      add({
-          resource: getCart,
-          forwardArgs: () => undefined,
-          optimisticUpdate: ({ draft, data, args }) => {
-              const item = draft.items.find(i => i.id === data.id);
-              if (!item) return;
-              item.enabled = args.enabled;
-          }
-      })
-  }  
+    queryFn: fetchToggleCardItem,
+    link(add) {
+        add({
+            resource: getCart,
+            forwardArgs: () => undefined,
+            optimisticUpdate: ({ draft, data, args }) => {
+                const item = draft.items.find(i => i.id === data.id);
+                if (!item) return;
+                item.enabled = args.enabled;
+            }
+        })
+    }
 });
 
 function ShoppingCart() {
-  const cartQuery = useResourceAgent(getCart);
-  const [toggleItem] = useOperationAgent(toggleCardItem);
-  const cart = cartQuery.data;
-  
-  return (
-    <Container isLoading={cartQuery.isLoading}>
-      {cart?.items.map(item => (
-        <CartItem 
-          key={item.id}
-          item={item}
-          onToggle={() => toggleItem({ id: item.id, enabled: !item.enabled })}
-        />
-      ))}
-      <Total amount={cart?.total} />
-    </Container>
-  );
+    const cartQuery = useResourceAgent(getCart);
+    const [toggleItem] = useOperationAgent(toggleCardItem);
+    const cart = cartQuery.data;
+
+    return (
+        <Container isLoading={cartQuery.isLoading}>
+            {cart?.items.map(item => (
+                <CartItem
+                    key={item.id}
+                    item={item}
+                    onToggle={() => toggleItem({ id: item.id, enabled: !item.enabled })}
+                />
+            ))}
+        </Container>
+    );
 }
 ```

package/dist/devtools/combineDevtools.d.ts

@@ -0,0 +1,2 @@
+import { DevtoolsLike } from "../query/types/devtools";
+export declare function combineDevtools(...devtools: DevtoolsLike[]): DevtoolsLike;

package/dist/devtools/combineDevtools.js

@@ -0,0 +1,10 @@
+export function combineDevtools(...devtools) {
+    return {
+        state(name, initState) {
+            const updaters = devtools.map(d => d.state(name, initState));
+            return (newState) => {
+                updaters.forEach(update => update(newState));
+            };
+        }
+    };
+}

package/dist/devtools/index.d.ts

@@ -0,0 +1,2 @@
+export * from './reduxDevtools';
+export * from './combineDevtools';

package/dist/devtools/index.js

@@ -0,0 +1,2 @@
+export * from './reduxDevtools';
+export * from './combineDevtools';

package/dist/devtools/reduxDevtools.d.ts

@@ -0,0 +1,2 @@
+import { DevtoolsLike } from "../query/types/devtools";
+export declare function reduxDevtools(): DevtoolsLike;

package/dist/devtools/reduxDevtools.js

@@ -0,0 +1,24 @@
+import { Batcher } from "../signals";
+export function reduxDevtools() {
+    let state = {};
+    // @ts-ignore
+    const reduxDevtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({ name: 'RxToolkit' });
+    reduxDevtools.init(state);
+    const scheduler = Batcher.scheduler(Infinity);
+    const updateFn = () => {
+        reduxDevtools.send({ type: 'update' }, state);
+    };
+    const createFn = () => {
+        reduxDevtools.send({ type: 'create' }, state);
+    };
+    return {
+        state(name, initState) {
+            state = { ...state, [name]: initState };
+            scheduler.schedule(createFn);
+            return (newState) => {
+                state = { ...state, [name]: newState };
+                scheduler.schedule(updateFn);
+            };
+        }
+    };
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './query';
-export * from './signal';
+export * from './signals';
 export * from './react-hooks';
+export * from './devtools';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './query';
-export * from './signal';
+export * from './signals';
 export * from './react-hooks';
+export * from './devtools';

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

@@ -1,6 +1,6 @@
-import { Devtools } from "@reatom/devtools";
+import { DevtoolsLike } from "../../query/types/devtools";
 type Update = Partial<{
-    DEVTOOLS: Devtools | null;
+    DEVTOOLS: DevtoolsLike | null;
     onError: (error: unknown) => void;
 }>;
 export declare class DefaultOptions {

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

@@ -50,7 +50,7 @@ class OperationQueryState {
 }
 export class Operation {
     _options;
-    _queriesCache = new QueriesCache('opr');
+    _queriesCache = new QueriesCache('Operation');
     _links = [];
     constructor(_options) {
         this._options = _options;
@@ -89,7 +89,7 @@ export class Operation {
                 state.unlocker = ref.lock();
             }
             if (link.optimisticUpdate && ref.has) {
-                state.patch = ref.update((draft) => {
+                state.patch = ref.patch((draft) => {
                     return link.optimisticUpdate({ draft, args });
                 });
             }
@@ -102,7 +102,7 @@ export class Operation {
             /**
              * Обновляем связанные ресурсы
              */
-            linksMeta.forEach(({ link, ref }) => {
+            linksMeta.forEach(({ link, ref, state }) => {
                 if (link.update && ref.has) {
                     ref.update((draft) => {
                         return link.update({ draft, args, data });
@@ -111,6 +111,7 @@ export class Operation {
                 if (link.create && !ref.has) {
                     ref.create(link.create({ args, data }));
                 }
+                state.patch?.commit();
             });
         })
             .catch((error) => {
@@ -120,7 +121,7 @@ export class Operation {
              * Обновляем связанные ресурсы
              */
             linksMeta.forEach(({ state }) => {
-                state.patch?.rollback();
+                state.patch?.abort();
             });
         })
             .finally(() => {

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

@@ -1,5 +1,5 @@
-import { Computed } from "../../../signal";
 import { OperationAgentInstanse, OperationDefinition } from "../../../query/types/Operation.types";
+import { Computed } from "../../../signals";
 import type { Operation } from "./Operation";
 export declare class OperationAgent<D extends OperationDefinition> implements OperationAgentInstanse<D> {
     private _operation;

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

@@ -1,9 +1,9 @@
-import { Computed, Signal } from "../../../signal";
+import { Computed, Signal } from "../../../signals";
 export class OperationAgent {
     _operation;
     _operations$ = new Signal({
         current$: null,
-    });
+    }, { disableDevtools: true });
     state$ = new Computed(() => {
         const operations = this._operations$.value;
         const currState = operations.current$?.value;
@@ -28,7 +28,7 @@ export class OperationAgent {
             data: currState.data ?? undefined,
             args: currState.arg,
         };
-    });
+    }, { disableDevtools: true });
     constructor(_operation) {
         this._operation = _operation;
     }

package/dist/query/core/QueriesCache.js

@@ -1,5 +1,6 @@
 import { IndirectMap } from "../../query/lib/IndirectMap";
 import { ReactiveCache } from "../../query/lib/ReactiveCache";
+import { Indexer } from "../../signals/base/Indexer";
 import { SharedOptions } from "./SharedOptions";
 export class QueriesCache {
     _logname;
@@ -14,12 +15,17 @@ export class QueriesCache {
         const cache = new ReactiveCache({
             initialState,
         });
-        const devtoolsState = SharedOptions.DEVTOOLS?.state;
-        if (devtoolsState) {
-            const randomId = Math.random().toString(36).substring(2, 16);
-            const key = `rxt:${this._logname}:${JSON.stringify(args)}:${randomId}`;
+        const stateDevtools = SharedOptions.DEVTOOLS?.state;
+        if (stateDevtools) {
+            const key = `${this._logname}:${JSON.stringify(args)}:i=${Indexer.getIndex()}`;
+            let devtools = stateDevtools(key, initialState);
             cache.spy$.subscribe((state) => {
-                devtoolsState(key, state);
+                if (state === initialState)
+                    return;
+                devtools(state);
+            });
+            cache.onClean$.subscribe(() => {
+                devtools('$CLEANED');
             });
         }
         cache.onClean$.subscribe(() => {

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

@@ -1,10 +1,12 @@
 import { ReactiveCache } from "../../../query/lib/ReactiveCache";
-import type { ResourceCreateOptions, ResourceDefinition, ResourceInstance, ResourceRefInstanse } from "../../../query/types/Resource.types";
+import type { ResourceCreateOptions, ResourceDefinition, ResourceInstance, ResourceRefInstanse, ResourceTransaction } from "../../../query/types/Resource.types";
 import { QueriesCache } from "../QueriesCache";
 import { ResourceAgent } from "./ResourceAgent";
 export type CoreResourceQueryState<D extends ResourceDefinition> = {
+    transactions: ResourceTransaction[] | null;
     abortController: AbortController | null;
     args: D['Args'] | null;
+    savedData: D['Data'] | null;
     data: D['Data'] | null;
     error: unknown | null;
     isError: boolean;
@@ -31,7 +33,17 @@ export declare class Resource<D extends ResourceDefinition> implements ResourceI
     decrementLock(args: D['Args'], options?: {
         cache?: CoreResourceQueryCache<D>;
     }): CoreResourceQueryCache<D> | null;
-    updateData(args: D['Args'], updateFn: (data: D['Data']) => D['Data'], options?: {
+    /**
+     * @deprecated
+     */
+    updateData_legacy(args: D['Args'], updateFn: (data: D['Data']) => D['Data'], options?: {
+        cache?: CoreResourceQueryCache<D>;
+    }): CoreResourceQueryCache<D> | null;
+    update(args: D['Args'], updateFn: (data: D['Data'], savedData: D['Data'] | null, transactions: ResourceTransaction[] | null) => {
+        data: D['Data'];
+        transactions: ResourceTransaction[] | null;
+        savedData: D['Data'] | null;
+    }, options?: {
         cache?: CoreResourceQueryCache<D>;
     }): CoreResourceQueryCache<D> | null;
     initiate(args: D['Args'], options?: {

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

@@ -5,6 +5,8 @@ import { ResourceRef } from "./ResourceRef";
 class ResourceQueryState {
     static create() {
         return {
+            transactions: null,
+            savedData: null,
             abortController: null,
             args: null,
             data: null,
@@ -31,6 +33,8 @@ class ResourceQueryState {
     static success(state, data) {
         return {
             ...state,
+            savedData: null,
+            transactions: null,
             data,
             isLoading: false,
             isReloading: false,
@@ -67,16 +71,28 @@ class ResourceQueryState {
             lockCount
         };
     }
+    static update(state, data, savedData, transactions) {
+        return {
+            ...state,
+            transactions,
+            savedData,
+            data
+        };
+    }
+    /**
+     * @deprecated
+     */
     static setData(state, data) {
         return {
             ...state,
+            transactions: null,
             data
         };
     }
 }
 export class Resource {
     _options;
-    _queriesCache = new QueriesCache('res');
+    _queriesCache = new QueriesCache('Resource');
     constructor(_options) {
         this._options = _options;
     }
@@ -108,7 +124,10 @@ export class Resource {
         cache.next(ResourceQueryState.decrementLock(cache.value));
         return cache;
     }
-    updateData(args, updateFn, options) {
+    /**
+     * @deprecated
+     */
+    updateData_legacy(args, updateFn, options) {
         let cache = options?.cache ?? this.getQueryCache(args);
         if (!cache) {
             return null;
@@ -121,6 +140,19 @@ export class Resource {
         cache.next(ResourceQueryState.setData(cache.value, newData));
         return cache;
     }
+    update(args, updateFn, options) {
+        let cache = options?.cache ?? this.getQueryCache(args);
+        if (!cache) {
+            return null;
+        }
+        const cacheValue = cache.value;
+        if (!cacheValue.isDone) {
+            return cache;
+        }
+        const { data, transactions, savedData } = updateFn(cacheValue.data, cacheValue.savedData, cacheValue.transactions);
+        cache.next(ResourceQueryState.update(cache.value, data, savedData, transactions));
+        return cache;
+    }
     initiate(args, options) {
         let cache = options?.cache ?? this._queriesCache.getQueryCache(args);
         const state = ResourceQueryState.load(cache?.value, args);

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

@@ -1,4 +1,4 @@
-import { Computed } from "../../../signal";
+import { Computed } from "../../../signals";
 import { ResourceAgentInstance, ResourceDefinition } from "../../../query/types/Resource.types";
 import type { Resource } from "./Resource";
 export declare class ResourceAgent<D extends ResourceDefinition> implements ResourceAgentInstance<D> {

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

@@ -1,10 +1,10 @@
-import { Computed, Signal } from "../../../signal";
+import { Computed, Signal } from "../../../signals";
 export class ResourceAgent {
     _resource;
     _resources$ = new Signal({
         previous$: null,
         current$: null,
-    });
+    }, { disableDevtools: true });
     state$ = new Computed(() => {
         const resources = this._resources$.value;
         let prevState;
@@ -41,7 +41,7 @@ export class ResourceAgent {
             data: isShowPrev ? prevState.data ?? undefined : currState.data ?? undefined,
             args: currState.args ?? undefined,
         };
-    });
+    }, { disableDevtools: true });
     constructor(_resource) {
         this._resource = _resource;
     }

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

@@ -1,5 +1,5 @@
 import { Resource } from "./Resource";
-import { ResourceDefinition, ResourceRefInstanse } from "../../types/Resource.types";
+import { ResourceDefinition, ResourceRefInstanse, ResourceTransaction } from "../../types/Resource.types";
 export declare class ResourceRef<D extends ResourceDefinition> implements ResourceRefInstanse<D> {
     private readonly _resource;
     private readonly _args;
@@ -13,6 +13,7 @@ export declare class ResourceRef<D extends ResourceDefinition> implements Resour
     update(updateFn: (data: D["Data"]) => D["Data"]): {
         rollback: () => void;
     };
+    patch(patchFn: (data: D["Data"]) => void): ResourceTransaction | null;
     create(data: D["Data"]): void;
     invalidate(): void;
 }

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

@@ -1,3 +1,5 @@
+import { applyPatches, enablePatches, produceWithPatches } from "immer";
+enablePatches();
 export class ResourceRef {
     _resource;
     _args;
@@ -36,13 +38,105 @@ export class ResourceRef {
             };
         }
         const value = cacheItem.value;
-        this._resource.updateData(this._args, updateFn, { cache: cacheItem });
+        this._resource.updateData_legacy(this._args, updateFn, { cache: cacheItem });
         return {
             rollback: () => {
-                this._resource.updateData(this._args, () => value.data, { cache: cacheItem });
+                this._resource.updateData_legacy(this._args, () => value.data, { cache: cacheItem });
             }
         };
     }
+    patch(patchFn) {
+        let isSkipped = true;
+        const reapplyFn = (data, savedData, transactions) => {
+            if (!transactions || transactions.length === 0) {
+                return { data, transactions, savedData };
+            }
+            // Все валидные committed - пропускаем и убираем из очереди
+            // Все aborted - применяем и убираем из очереди
+            // Все pending - применяем и оставляем в очереди
+            // Все commited (которые после pending) - применяем, но оставляем в очереди
+            // Все aborted (которые после pending) - откатываем, но оставляем в очереди
+            // Те после применения всех транзакций, очередь должна начинаться с первой pending транзакции (если есть), включая все, что после неё.
+            let newSavedData = savedData ?? data;
+            let currentData = savedData ?? data;
+            const remainingTransactions = [];
+            let foundPending = false;
+            transactions.forEach((transaction) => {
+                if (transaction.status === 'pending') {
+                    foundPending = true;
+                    // Применяем pending транзакцию и оставляем в очереди
+                    currentData = applyPatches(currentData, transaction.patches);
+                    remainingTransactions.push(transaction);
+                }
+                else if (foundPending) {
+                    // После pending транзакции
+                    if (transaction.status === 'committed') {
+                        // Применяем и оставляем в очереди
+                        currentData = applyPatches(currentData, transaction.patches);
+                        remainingTransactions.push(transaction);
+                    }
+                    else if (transaction.status === 'aborted') {
+                        // Откатываем и оставляем в очереди
+                        currentData = applyPatches(currentData, transaction.inversePatches);
+                        remainingTransactions.push(transaction);
+                    }
+                }
+                else {
+                    // До первой pending транзакции
+                    if (transaction.status === 'committed') {
+                        // Применяем и убираем из очереди
+                        const patches = transaction.patches;
+                        currentData = applyPatches(currentData, patches);
+                        newSavedData = currentData;
+                    }
+                }
+            });
+            const hasTransactions = remainingTransactions.length > 0;
+            return {
+                data: currentData,
+                transactions: hasTransactions ? remainingTransactions : null,
+                savedData: hasTransactions ? newSavedData : null,
+            };
+        };
+        const reapplyTransactions = () => {
+            this._resource.update(this._args, reapplyFn, { cache: this._cacheItem ?? undefined });
+        };
+        const transaction = {
+            patches: [],
+            inversePatches: [],
+            status: 'pending',
+            abort() {
+                if (this.status !== 'pending')
+                    return;
+                this.status = 'aborted';
+                reapplyTransactions();
+            },
+            commit() {
+                if (this.status !== 'pending')
+                    return;
+                this.status = 'committed';
+                reapplyTransactions();
+            }
+        };
+        const updateFn = (data, savedData, transactions) => {
+            isSkipped = false;
+            const [newData, patches, inversePatches] = produceWithPatches(data, (draft) => patchFn(draft));
+            transaction.patches = patches;
+            transaction.inversePatches = inversePatches;
+            const newTransactions = [...(transactions ?? [])];
+            newTransactions.push(transaction);
+            return {
+                data: newData,
+                transactions: newTransactions,
+                savedData: savedData ?? data,
+            };
+        };
+        this._cacheItem = this._resource.update(this._args, updateFn, { cache: this._cacheItem ?? undefined });
+        if (isSkipped) {
+            return null;
+        }
+        return transaction;
+    }
     create(data) {
         throw new Error("Method not implemented.");
     }

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

@@ -1,5 +1,5 @@
-import { Devtools } from '@reatom/devtools';
+import { DevtoolsLike } from "../../query/types/devtools";
 export declare class SharedOptions {
-    static DEVTOOLS: Devtools | null;
+    static DEVTOOLS: DevtoolsLike | null;
     static onError: ((error: unknown) => void) | null;
 }

package/dist/query/index.d.ts

@@ -1,7 +1,7 @@
 export * from './api/createResource';
 export * from './api/createOperation';
 export * from './api/DefaultOptions';
-export * from './api/createDevtools';
 export * from './SKIP_TOKEN';
 export * from './react/useResourceAgent';
+export * from './react/useResourceRef';
 export * from './react/useOperationAgent';

package/dist/query/index.js

@@ -1,7 +1,7 @@
 export * from './api/createResource';
 export * from './api/createOperation';
 export * from './api/DefaultOptions';
-export * from './api/createDevtools';
 export * from './SKIP_TOKEN';
 export * from './react/useResourceAgent';
+export * from './react/useResourceRef';
 export * from './react/useOperationAgent';

package/dist/query/lib/ReactiveCache.js

@@ -1,5 +1,5 @@
 import { finalize, ReplaySubject, share, Subject, takeUntil, timer } from "rxjs";
-import { Signal } from "../../signal";
+import { Signal } from "../../signals";
 /**
  * Класс `ReactiveCache` представляет собой реактивный кэш,
  * который позволяет управлять состоянием и временем жизни кэшированных данных.
@@ -44,7 +44,7 @@ export class ReactiveCache {
      */
     constructor(options) {
         this._cacheLifeTime = options.cacheLifeTime || 60_000;
-        this._state$ = new Signal(options.initialState);
+        this._state$ = new Signal(options.initialState, { disableDevtools: true });
         this._value = options.initialState;
         this.spy$ = this._state$.pipe(takeUntil(this.onClean$));
         this.value$ = this._state$.pipe(finalize(() => {

package/dist/query/react/useResourceRef.d.ts

@@ -0,0 +1,6 @@
+import { SKIP } from "../../query/SKIP_TOKEN";
+import { ResourceDefinition, ResourceInstance, ResourceRefInstanse } from "../../query/types/Resource.types";
+import { Prettify } from "../../query/types/shared.types";
+type Result<D extends ResourceDefinition> = Prettify<ResourceRefInstanse<D>> | null;
+export declare function useResourceRef<D extends ResourceDefinition>(res: ResourceInstance<D>, ...argss: D['Args'] extends void ? [] | [typeof SKIP] : [D['Args'] | typeof SKIP]): Result<D>;
+export {};

package/dist/query/react/useResourceRef.js

@@ -0,0 +1,8 @@
+import { SKIP } from "../../query/SKIP_TOKEN";
+import React from "react";
+export function useResourceRef(res, ...argss) {
+    const args = (argss[0] === SKIP ? SKIP : argss[0]);
+    return React.useMemo(() => {
+        return res.createRef(args);
+    }, [args]);
+}