@webkrafters/react-observable-context 4.7.7 → 5.0.0-rc.1

package/dist/constants.d.ts

@@ -1,9 +1,2 @@
-export const CLEAR_TAG: "@@CLEAR";
-export const DELETE_TAG: "@@DELETE";
-export const FULL_STATE_SELECTOR: "@@STATE";
-export const MOVE_TAG: "@@MOVE";
-export const NULL_STATE_SELECTOR: "";
-export const PUSH_TAG: "@@PUSH";
-export const REPLACE_TAG: "@@REPLACE";
-export const SET_TAG: "@@SET";
-export const SPLICE_TAG: "@@SPLICE";
+export { CLEAR_TAG, DELETE_TAG, GLOBAL_SELECTOR, MOVE_TAG, NULL_SELECTOR, PUSH_TAG, REPLACE_TAG, SET_TAG, SPLICE_TAG, Tag } from '@webkrafters/auto-immutable';
+export declare const FULL_STATE_SELECTOR = "@@STATE";

package/dist/constants.js

@@ -1,23 +1,68 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPLICE_TAG = exports.SET_TAG = exports.REPLACE_TAG = exports.PUSH_TAG = exports.NULL_STATE_SELECTOR = exports.MOVE_TAG = exports.FULL_STATE_SELECTOR = exports.DELETE_TAG = exports.CLEAR_TAG = void 0;
-var CLEAR_TAG = '@@CLEAR';
-exports.CLEAR_TAG = CLEAR_TAG;
-var DELETE_TAG = '@@DELETE';
-exports.DELETE_TAG = DELETE_TAG;
-var FULL_STATE_SELECTOR = '@@STATE';
-exports.FULL_STATE_SELECTOR = FULL_STATE_SELECTOR;
-var MOVE_TAG = '@@MOVE';
-exports.MOVE_TAG = MOVE_TAG;
-var NULL_STATE_SELECTOR = '';
-exports.NULL_STATE_SELECTOR = NULL_STATE_SELECTOR;
-var PUSH_TAG = '@@PUSH';
-exports.PUSH_TAG = PUSH_TAG;
-var REPLACE_TAG = '@@REPLACE';
-exports.REPLACE_TAG = REPLACE_TAG;
-var SET_TAG = '@@SET';
-exports.SET_TAG = SET_TAG;
-var SPLICE_TAG = '@@SPLICE';
-exports.SPLICE_TAG = SPLICE_TAG;
+exports.FULL_STATE_SELECTOR = exports.Tag = exports.SPLICE_TAG = exports.SET_TAG = exports.REPLACE_TAG = exports.PUSH_TAG = exports.NULL_SELECTOR = exports.MOVE_TAG = exports.GLOBAL_SELECTOR = exports.DELETE_TAG = exports.CLEAR_TAG = void 0;
+var auto_immutable_1 = require("@webkrafters/auto-immutable");
+Object.defineProperty(exports, "CLEAR_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.CLEAR_TAG;
+  }
+});
+Object.defineProperty(exports, "DELETE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.DELETE_TAG;
+  }
+});
+Object.defineProperty(exports, "GLOBAL_SELECTOR", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.GLOBAL_SELECTOR;
+  }
+});
+Object.defineProperty(exports, "MOVE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.MOVE_TAG;
+  }
+});
+Object.defineProperty(exports, "NULL_SELECTOR", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.NULL_SELECTOR;
+  }
+});
+Object.defineProperty(exports, "PUSH_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.PUSH_TAG;
+  }
+});
+Object.defineProperty(exports, "REPLACE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.REPLACE_TAG;
+  }
+});
+Object.defineProperty(exports, "SET_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.SET_TAG;
+  }
+});
+Object.defineProperty(exports, "SPLICE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.SPLICE_TAG;
+  }
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return auto_immutable_1.Tag;
+  }
+});
+exports.FULL_STATE_SELECTOR = '@@STATE';

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+import type { ComponentType, Context, ForwardRefExoticComponent, MemoExoticComponent, NamedExoticComponent, ReactNode, PropsWithoutRef, RefAttributes } from 'react';
+import type { Changes as BaseChanges, Connection, Immutable, Value } from '@webkrafters/auto-immutable';
+import { FULL_STATE_SELECTOR } from './constants';
+export type { BaseType, ClearCommand, KeyType, MoveCommand, PushCommand, ReplaceCommand, SetCommand, SpliceCommand, TagCommand, TagType, UpdateStats, UpdatePayload, UpdatePayloadArray } from '@webkrafters/auto-immutable';
+export type State = Value;
+export type ObservableContext<T extends State> = IObservableContext<T> | PublicObservableContext<T>;
+export type PublicObservableContext<T extends State> = WithObservableProvider<Context<Store<T>>, T>;
+export type IObservableContext<T extends State> = WithObservableProvider<Context<IStore>, T>;
+export type WithObservableProvider<LOCAL_DATA extends Record<any, any> = {}, T extends State = State> = LOCAL_DATA & {
+    Provider: ObservableProvider<T>;
+};
+export type ObservableProvider<T extends State> = ForwardRefExoticComponent<ProviderProps<T> & RefAttributes<StoreRef<T>>>;
+export interface ProviderProps<T extends State> {
+    children?: ReactNode;
+    prehooks?: Prehooks<T>;
+    storage?: IStorage<T>;
+    value: PartialState<T>;
+}
+export type ConnectProps<OWNPROPS extends OwnProps = IProps, STATE extends State = State, SELECTOR_MAP extends SelectorMap = SelectorMap> = {
+    [K in keyof Store<STATE, SELECTOR_MAP>]: Store<STATE, SELECTOR_MAP>[K];
+} & Omit<OWNPROPS, "ref"> & RefAttributes<OWNPROPS["ref"]>;
+export type ConnectedComponent<P extends OwnProps = IProps> = MemoExoticComponent<ForwardRefExoticComponent<PropsWithoutRef<Omit<P, "ref">> & RefAttributes<P["ref"]>>>;
+export type PropsExtract<C, STATE extends State, SELECTOR_MAP extends SelectorMap> = C extends ComponentType<ConnectProps<infer U, STATE, SELECTOR_MAP>> ? U extends OwnProps ? U : IProps : C extends NamedExoticComponent<ConnectProps<infer U, STATE, SELECTOR_MAP>> ? U extends OwnProps ? U : IProps : IProps;
+export type InjectedProps<P extends IProps = IProps> = {
+    [K in keyof P]: P[K];
+};
+export interface IProps {
+    ref?: unknown;
+}
+export type OwnProps = IProps & Record<any, any>;
+export type Text = string | number;
+export type FullStateSelector = typeof FULL_STATE_SELECTOR;
+export type ObjectSelector = Record<Text, Text | FullStateSelector>;
+export type ArraySelector = Array<Text | FullStateSelector>;
+export type SelectorMap = ObjectSelector | ArraySelector | void;
+export type Data<SELECTOR_MAP extends SelectorMap> = (SELECTOR_MAP extends ObjectSelector ? {
+    [selectorKey in keyof SELECTOR_MAP]: Readonly<any>;
+} : SELECTOR_MAP extends ArraySelector ? {
+    [selectorKey: number]: Readonly<any>;
+} : never);
+export type Changes<T extends State = State> = BaseChanges<T>;
+export interface IStorage<T extends State = State> {
+    clone: (data: T) => T;
+    getItem: (key: string) => T;
+    removeItem: (key: string) => void;
+    setItem: (key: string, data: T) => void;
+}
+export type NonReactUsageReport = (...args: Array<unknown>) => void;
+export type Listener = <T extends State>(changes: Changes<T>) => void;
+export type PartialState<T extends State> = Partial<T>;
+export interface Prehooks<T extends State = State> {
+    resetState?: (resetData: PartialState<T>, state: {
+        current: T;
+        original: T;
+    }) => boolean;
+    setState?: (newChanges: Changes<T>) => boolean;
+}
+export type Unsubscribe = (...args: Array<unknown>) => void;
+export interface IStore {
+    resetState: Function;
+    setState: Function;
+}
+export interface IStoreInternal extends IStore {
+    subscribe: Function;
+}
+export interface Store<T extends State, SELECTOR_MAP extends SelectorMap = SelectorMap> extends IStore {
+    data: Data<SELECTOR_MAP>;
+    resetState: (propertyPaths?: Array<string>) => void;
+    setState: (changes: Changes<T>) => void;
+}
+export interface StoreInternal<T extends State> extends IStoreInternal {
+    cache: Immutable<T>;
+    resetState: (connection: Connection<T>, propertyPaths?: Array<string>) => void;
+    setState: (connection: Connection<T>, changes: Changes<T>) => void;
+    subscribe: (listener: Listener) => Unsubscribe;
+}
+export interface StorePlaceholder extends IStoreInternal {
+    getState: NonReactUsageReport;
+    resetState: NonReactUsageReport;
+    setState: NonReactUsageReport;
+    subscribe: NonReactUsageReport;
+}
+export interface StoreRef<T extends State = State> extends StorePlaceholder {
+    getState: () => T;
+    resetState: (propertyPaths?: string[]) => void;
+    setState: (changes: Changes<T>) => void;
+    subscribe: (listener: Listener) => Unsubscribe;
+}
+export { CLEAR_TAG, DELETE_TAG, FULL_STATE_SELECTOR, MOVE_TAG, NULL_SELECTOR, PUSH_TAG, REPLACE_TAG, SET_TAG, SPLICE_TAG, Tag, } from './constants';
+export { connect, createContext, UsageError, useContext } from './main';

package/dist/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useContext = exports.UsageError = exports.createContext = exports.connect = exports.Tag = exports.SPLICE_TAG = exports.SET_TAG = exports.REPLACE_TAG = exports.PUSH_TAG = exports.NULL_SELECTOR = exports.MOVE_TAG = exports.FULL_STATE_SELECTOR = exports.DELETE_TAG = exports.CLEAR_TAG = void 0;
+;
+;
+;
+;
+;
+;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "CLEAR_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.CLEAR_TAG;
+  }
+});
+Object.defineProperty(exports, "DELETE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.DELETE_TAG;
+  }
+});
+Object.defineProperty(exports, "FULL_STATE_SELECTOR", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.FULL_STATE_SELECTOR;
+  }
+});
+Object.defineProperty(exports, "MOVE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.MOVE_TAG;
+  }
+});
+Object.defineProperty(exports, "NULL_SELECTOR", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.NULL_SELECTOR;
+  }
+});
+Object.defineProperty(exports, "PUSH_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.PUSH_TAG;
+  }
+});
+Object.defineProperty(exports, "REPLACE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.REPLACE_TAG;
+  }
+});
+Object.defineProperty(exports, "SET_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.SET_TAG;
+  }
+});
+Object.defineProperty(exports, "SPLICE_TAG", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.SPLICE_TAG;
+  }
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return constants_1.Tag;
+  }
+});
+var main_1 = require("./main");
+Object.defineProperty(exports, "connect", {
+  enumerable: true,
+  get: function get() {
+    return main_1.connect;
+  }
+});
+Object.defineProperty(exports, "createContext", {
+  enumerable: true,
+  get: function get() {
+    return main_1.createContext;
+  }
+});
+Object.defineProperty(exports, "UsageError", {
+  enumerable: true,
+  get: function get() {
+    return main_1.UsageError;
+  }
+});
+Object.defineProperty(exports, "useContext", {
+  enumerable: true,
+  get: function get() {
+    return main_1.useContext;
+  }
+});

package/dist/main/hooks/use-prehooks-ref/index.d.ts

@@ -1,4 +1,4 @@
+/// <reference types="react" />
+import type { Prehooks, State } from '../../..';
+declare function usePrehooksRef<T extends State>(prehooks: Prehooks<T>): import("react").MutableRefObject<Prehooks<T>>;
 export default usePrehooksRef;
-export type Prehooks<T extends import("../../../types").State> = import("../../../types").Prehooks<T>;
-export type State = import("../../../types").State;
-declare function usePrehooksRef<T extends import("../../../types").State>(prehooks: Prehooks<T>): import("react").MutableRefObject<Prehooks<T>>;

package/dist/main/hooks/use-prehooks-ref/index.js

@@ -1,15 +1,15 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = require("react");
-var usePrehooksRef = function usePrehooksRef(prehooks) {
-  var prehooksRef = (0, _react.useRef)(prehooks);
-  (0, _react.useEffect)(function () {
+var react_1 = require("react");
+function usePrehooksRef(prehooks) {
+  var prehooksRef = (0, react_1.useRef)(prehooks);
+  (0, react_1.useEffect)(function () {
     prehooksRef.current = prehooks;
   }, [prehooks]);
   return prehooksRef;
-};
-var _default = usePrehooksRef;
-exports["default"] = _default;
+}
+;
+exports["default"] = usePrehooksRef;

package/dist/main/hooks/use-prehooks-ref/index.test.d.ts

@@ -0,0 +1 @@
+import '../../../test-artifacts/suppress-render-compat';

package/dist/main/hooks/use-prehooks-ref/index.test.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+require("../../../test-artifacts/suppress-render-compat");
+const _1 = __importDefault(require("."));
+describe('usePrehooksRef', () => {
+    test('retains prehooks prop in a `react-ref` object', () => {
+        const PREHOOK = 'PREHOOK_STUB';
+        const { result, rerender } = (0, react_1.renderHook)(_1.default, {
+            initialProps: PREHOOK
+        });
+        expect(result.current).toEqual({ current: PREHOOK });
+        const PREHOOK2 = 'PREHOOK2_STUB';
+        rerender(PREHOOK2);
+        expect(result.current).not.toEqual({ current: PREHOOK });
+        expect(result.current).toEqual({ current: PREHOOK2 });
+    });
+});

package/dist/main/hooks/use-render-key-provider/index.d.ts

@@ -1,6 +1,5 @@
+import type { ArraySelector, ObjectSelector, SelectorMap, Text } from '../../..';
+declare function useRenderKeyProvider(selectorMap: ArraySelector): Array<Text>;
+declare function useRenderKeyProvider(selectorMap: ObjectSelector): Array<Text>;
+declare function useRenderKeyProvider(selectorMap: SelectorMap): Array<Text>;
 export default useRenderKeyProvider;
-export type Provider<T extends import("../../../types").State, MAP extends BaseSelectorMap<T> = BaseSelectorMap<T>> = (selectorMap: SelectorMap<T, MAP>) => [string | keyof T];
-export type SelectorMap<STATE extends import("../../../types").State = import("../../../types").State, MAP extends BaseSelectorMap<STATE> = BaseSelectorMap<STATE>> = import("../../../types").SelectorMap<STATE>;
-export type BaseSelectorMap<STATE extends import("../../../types").State = import("../../../types").State> = import("../../../types").BaseSelectorMap<STATE>;
-export type State = import("../../../types").State;
-declare const useRenderKeyProvider: Provider<T, BaseSelectorMap<T>>;

package/dist/main/hooks/use-render-key-provider/index.js

@@ -1,15 +1,27 @@
 "use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = require("react");
-var getCurrKeys = function getCurrKeys(selectorMap) {
-  var currKeys = Object.values(selectorMap);
-  return currKeys.length ? Array.from(new Set(currKeys)) : [];
-};
-var useRenderKeyProvider = function useRenderKeyProvider(selectorMap) {
-  var renderKeys = (0, _react.useRef)([]);
+var react_1 = require("react");
+var lodash_isplainobject_1 = __importDefault(require("lodash.isplainobject"));
+function getCurrKeys(selectorMap) {
+  if ((0, lodash_isplainobject_1["default"])(selectorMap) || Array.isArray(selectorMap)) {
+    return Array.from(new Set(Object.values(selectorMap)));
+  }
+  if (typeof selectorMap === 'undefined' || selectorMap === null) {
+    return [];
+  }
+  throw new TypeError('Incompatible Selector Map type provided.');
+}
+;
+function useRenderKeyProvider(selectorMap) {
+  var renderKeys = (0, react_1.useRef)([]);
   var currKeys = getCurrKeys(selectorMap);
   if (renderKeys.current.length !== currKeys.length || renderKeys.current.some(function (k, i) {
     return k !== currKeys[i];
@@ -17,6 +29,6 @@ var useRenderKeyProvider = function useRenderKeyProvider(selectorMap) {
     renderKeys.current = currKeys;
   }
   return renderKeys.current;
-};
-var _default = useRenderKeyProvider;
-exports["default"] = _default;
+}
+;
+exports["default"] = useRenderKeyProvider;

package/dist/main/hooks/use-render-key-provider/index.test.d.ts

@@ -0,0 +1 @@
+import '../../../test-artifacts/suppress-render-compat';

package/dist/main/hooks/use-render-key-provider/index.test.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clone_total_1 = __importDefault(require("@webkrafters/clone-total"));
+const _1 = __importDefault(require("."));
+const react_1 = require("@testing-library/react");
+require("../../../test-artifacts/suppress-render-compat");
+describe('useRenderKeyProvider', () => {
+    let selectorMap;
+    beforeAll(() => { selectorMap = { _a: 'a', _b: 'b', _c: 'c' }; });
+    test('calculates new selectors for new selectorMap', () => {
+        const initialProps = (0, clone_total_1.default)(selectorMap);
+        const { result, rerender } = (0, react_1.renderHook)(_1.default, { initialProps });
+        const selectors = result.current;
+        const updateProps = { ...selectorMap, _y: 'y', _z: 'z' };
+        rerender(updateProps);
+        expect(result.current).toEqual(Object.values(updateProps));
+        expect(result.current).not.toEqual(selectors);
+        expect(result.current).not.toBe(selectors);
+    });
+    test('ensures no abrupt updates to selectors for new list with same selectorMap', () => {
+        const { result, rerender } = (0, react_1.renderHook)(_1.default, { initialProps: selectorMap });
+        const selectors = result.current;
+        rerender((0, clone_total_1.default)(selectorMap));
+        expect(result.current).toBe(selectors);
+    });
+    describe('productive call', () => {
+        let expected;
+        beforeAll(() => { expected = ['a', 'b', 'c']; });
+        test.each([
+            ['object', { _a: 'a', _b: 'b', _c: 'c' }],
+            ['array', ['a', 'b', 'c']]
+        ])('allows an %s type selectoMap', (label, value) => {
+            const { result } = (0, react_1.renderHook)(_1.default, { initialProps: value });
+            expect(result.current).toEqual(expected);
+        });
+    });
+    describe.each([
+        ['undefined', undefined],
+        ['null', null],
+        ['[]', []],
+        ['{}', {}]
+    ])('empty selectoMap = %s', (label, value) => {
+        test('returns empty renderKeys list', () => {
+            const { result } = (0, react_1.renderHook)(_1.default, { initialProps: value });
+            expect(result.current).toEqual([]);
+        });
+    });
+    describe.each([
+        ['string', 'abc'],
+        ['number', 22],
+        ['function', () => { }],
+        ['boolean', true],
+        ['Map', new Map()],
+        ['Set', new Set()],
+        ['Uint8Array', new Uint8Array()]
+    ])('incompatible selectorMap type = %s', (label, value) => {
+        test('throws Type error', () => {
+            try {
+                (0, react_1.renderHook)(_1.default, {
+                    initialProps: value
+                });
+            }
+            catch (e) {
+                expect(e.constructor.name).toEqual('TypeError');
+                expect(e.message).toEqual('Incompatible Selector Map type provided.');
+            }
+        });
+    });
+});

package/dist/main/hooks/use-store/index.d.ts

@@ -1,23 +1,10 @@
-export namespace deps {
-    export { _setState as setState };
-    export { v4 as uuid };
+import type { IStorage, PartialState, Prehooks, State, StoreInternal } from '../../..';
+export declare const deps: {
+    createStorageKey: () => string;
+};
+interface CurrentStorage<T extends State> extends IStorage<T> {
+    isKeyRequired?: boolean;
 }
+/** @param storage - is Closed to modification post-initialization */
+declare const useStore: <T extends import("@webkrafters/auto-immutable").Value>(prehooks: Prehooks<T>, value: PartialState<T>, storage?: CurrentStorage<T>) => StoreInternal<T>;
 export default useStore;
-export type IStorage<T extends import("../../../types").State> = import("../../../types").IStorage<T>;
-export type Changes<T extends import("../../../types").State> = import("../../../types").Changes<T>;
-export type PartialState<T extends import("../../../types").State> = import('../../../types').PartialState<T>;
-export type Prehooks<T extends import("../../../types").State> = import("../../../types").Prehooks<T>;
-export type StoreInternal<T extends import("../../../types").State> = import("../../../types").StoreInternal<T>;
-export type State = import("../../../types").State;
-export type MutableRefObject<T> = import('react').MutableRefObject<T>;
-import _setState from "../../set-state";
-declare function useStore<T extends import("../../../types").State>(prehooks: Prehooks<T>, value: T, storage?: IStorage<T>): {
-    getState: (clientId: string, ...propertyPaths?: string[]) => {
-        [propertyPaths: string]: Readonly<any>;
-    };
-    resetState: (propertyPaths?: string[]) => void;
-    setState: (changes: import("../../../types").Changes<T>) => void;
-    state: T;
-    subscribe: (listener: import("../../../types").Listener<T>) => VoidFunction;
-    unlinkCache: (clientId: string) => void;
-};