@fozy-labs/rx-toolkit 0.4.1 → 0.4.3

package/README.md

@@ -27,24 +27,25 @@ 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) - инструменты разработчика
 
 ## 🌟 Примеры
 
 ###### Создаем сигнал
 ```typescript
-// Описываете логику в обычном JavaScript
+// Описываем логику в обычном JavaScript
 const store = {
-  count$: new Signal(0),
-  doubled$: new Computed(() => store.count$.value * 2),
-  increment: () => store.count$.next(store.count$.value + 1)
+    count$: new Signal(0),
+    doubled$: new Computed(() => store.count$.value * 2),
+    increment: () => store.count$.value++,
 };
 ```
 
@@ -59,20 +60,25 @@ 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 +90,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 +98,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/common/devtools/combineDevtools.d.ts

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

package/dist/common/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/common/devtools/index.d.ts

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

package/dist/common/devtools/index.js

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

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

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

package/dist/common/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/common/devtools/types.d.ts

@@ -0,0 +1,6 @@
+export interface DevtoolsStateLike<T = any> {
+    (newState: T): void;
+}
+export interface DevtoolsLike {
+    state<T>(name: string, initState: T): DevtoolsStateLike<T>;
+}

package/dist/{query/api → common/options}/DefaultOptions.d.ts

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

package/dist/{query/api → common/options}/DefaultOptions.js

@@ -1,4 +1,4 @@
-import { SharedOptions } from "../../query/core/SharedOptions";
+import { SharedOptions } from "./SharedOptions";
 export class DefaultOptions {
     static update(part) {
         if (part.DEVTOOLS !== undefined)

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

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

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

@@ -0,0 +1 @@
+export * from './DefaultOptions';

package/dist/common/options/index.js

@@ -0,0 +1 @@
+export * from './DefaultOptions';

package/dist/{react-hooks → common/react}/index.d.ts

@@ -1,5 +1,4 @@
-export * from './useSignal';
+export * from './useConstant';
+export * from './useEventHandler';
 export * from './useObservable';
 export * from './useSyncObservable';
-export * from './useEventHandler';
-export * from './useConstant';

package/dist/{react-hooks → common/react}/index.js

@@ -1,5 +1,4 @@
-export * from './useSignal';
+export * from './useConstant';
+export * from './useEventHandler';
 export * from './useObservable';
 export * from './useSyncObservable';
-export * from './useEventHandler';
-export * from './useConstant';

package/dist/{react-hooks → common/react}/useObservable.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useEventHandler } from "../react-hooks/useEventHandler";
 import { BehaviorSubject } from 'rxjs';
-import { useConstant } from "../react-hooks/useConstant";
+import { useConstant } from "./useConstant";
+import { useEventHandler } from "./useEventHandler";
 const NONE = Symbol('NONE');
 /**
  * Hook for automatically subscribing and unsubscribing from an Observable.

package/dist/{react-hooks → common/react}/useSyncObservable.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
-import { useConstant, useEventHandler } from "../react-hooks";
+import { useConstant } from "./useConstant";
+import { useEventHandler } from "./useEventHandler";
 const NONE = Symbol('NONE');
 /**
  * Hook for automatically subscribing and unsubscribing from an Observable.

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -1,7 +1,3 @@
-import type { OperationCreateOptions, OperationDefinition } from "../../query/types/Operation.types";
+import type { OperationCreateOptions, OperationDefinition } from "../../query/types";
 import { Operation } from "../../query/core/Opertation/Operation";
 export declare const createOperation: <ARGS, RESULT, SELECTED = never>(options: OperationCreateOptions<OperationDefinition<ARGS, RESULT, SELECTED>>) => Operation<OperationDefinition<ARGS, RESULT, SELECTED>>;
-/**
- * @deprecated Use `createOperation` instead.
- */
-export declare const createMutationApi: <ARGS, RESULT, SELECTED = never>(options: OperationCreateOptions<OperationDefinition<ARGS, RESULT, SELECTED>>) => Operation<OperationDefinition<ARGS, RESULT, SELECTED>>;

package/dist/query/api/createOperation.js

@@ -1,6 +1,2 @@
 import { Operation } from "../../query/core/Opertation/Operation";
 export const createOperation = ((options) => new Operation(options));
-/**
- * @deprecated Use `createOperation` instead.
- */
-export const createMutationApi = createOperation;

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

@@ -1,3 +1,3 @@
-import type { ResourceCreateOptions, ResourceDefinition } from "../../query/types/Resource.types";
+import type { ResourceCreateOptions, ResourceDefinition } from "../../query/types";
 import { Resource } from "../../query/core/Resource/Resource";
 export declare const createResource: <ARGS, RESULT, SELECTED = never>(options: ResourceCreateOptions<ResourceDefinition<ARGS, RESULT, SELECTED>>) => Resource<ResourceDefinition<ARGS, RESULT, SELECTED>>;

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

@@ -1,6 +1,5 @@
-import { ReactiveCache } from "../../../query/lib/ReactiveCache";
-import { FallbackOnNever } from "../../../query/types/shared.types";
-import { OperationCreateOptions, OperationDefinition, OperationInstance } from "../../../query/types/Operation.types";
+import type { ReactiveCache } from "../../../query/lib/ReactiveCache";
+import type { FallbackOnNever, OperationCreateOptions, OperationDefinition, OperationInstance } from "../../../query/types";
 import { QueriesCache } from "../QueriesCache";
 import { OperationAgent } from "./OperationAgent";
 export type CoreOperationQueryState<D extends OperationDefinition> = {

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

@@ -1,5 +1,5 @@
+import { SharedOptions } from "../../../common/options/SharedOptions";
 import { QueriesCache } from "../QueriesCache";
-import { SharedOptions } from "../SharedOptions";
 import { OperationAgent } from "./OperationAgent";
 class OperationQueryState {
     static create() {
@@ -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 { OperationAgentInstanse, OperationDefinition } from "../../../query/types";
+import { Computed } from "../../../signals";
 import type { Operation } from "./Operation";
 export declare class OperationAgent<D extends OperationDefinition> implements OperationAgentInstanse<D> {
     private _operation;
@@ -10,7 +10,7 @@ export declare class OperationAgent<D extends OperationDefinition> implements Op
         isSuccess: boolean;
         isError: boolean;
         error: {} | undefined;
-        data: NonNullable<import("../../types/shared.types").FallbackOnNever<D["Selected"], D["Result"]>> | undefined;
+        data: NonNullable<import("../../../query/types").FallbackOnNever<D["Selected"], D["Result"]>> | undefined;
         args: D["Args"];
     }>;
     constructor(_operation: Operation<D>);

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,6 +1,7 @@
+import { SharedOptions } from "../../common/options/SharedOptions";
+import { Indexer } from "../../signals/base/Indexer";
 import { IndirectMap } from "../../query/lib/IndirectMap";
 import { ReactiveCache } from "../../query/lib/ReactiveCache";
-import { SharedOptions } from "./SharedOptions";
 export class QueriesCache {
     _logname;
     _cache = new IndirectMap();
@@ -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 { QueriesCache } from "../QueriesCache";
+import type { ResourceCreateOptions, ResourceDefinition, ResourceInstance, ResourceRefInstanse, ResourceTransaction } from "../../../query/types";
+import { QueriesCache } from "../../../query/core/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

@@ -1,10 +1,12 @@
-import { QueriesCache } from "../QueriesCache";
-import { SharedOptions } from "../SharedOptions";
+import { SharedOptions } from "../../../common/options/SharedOptions";
+import { QueriesCache } from "../../../query/core/QueriesCache";
 import { ResourceAgent } from "./ResourceAgent";
 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,5 +1,5 @@
-import { Computed } from "../../../signal";
-import { ResourceAgentInstance, ResourceDefinition } from "../../../query/types/Resource.types";
+import { Computed } from "../../../signals";
+import { ResourceAgentInstance, ResourceDefinition } from "../../../query/types";
 import type { Resource } from "./Resource";
 export declare class ResourceAgent<D extends ResourceDefinition> implements ResourceAgentInstance<D> {
     private _resource;

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 { ResourceDefinition, ResourceRefInstanse, ResourceTransaction } from "../../../query/types";
 import { Resource } from "./Resource";
-import { ResourceDefinition, ResourceRefInstanse } 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;
 }