@cleanweb/react 1.0.6 → 1.0.7

package/build/base/merged-state.d.ts

@@ -1,12 +1,11 @@
 declare class MergedState<TState extends object> {
-    static refresh<TState extends object>(this: MergedState<TState>): void;
+    static useRefresh<TState extends object>(this: MergedState<TState>): void;
     reservedKeys: string[];
     valueKeys: string[];
     private _initialValues_;
     private _values_;
     private setState;
     private _setters_;
-    private useRetrieveState;
     get put(): { [Key in keyof TState]: (value: TState[Key]) => void; };
     get initialState(): TState;
     constructor(initialState: TState);

package/build/base/merged-state.js

@@ -19,10 +19,6 @@ var MergedState = /** @class */ (function () {
         this._initialValues_ = {};
         this._values_ = {};
         this._setters_ = {};
-        this.useRetrieveState = function () {
-            var _a;
-            _a = (0, react_1.useState)(_this.initialState), _this._values_ = _a[0], _this.setState = _a[1];
-        };
         this.putMany = function (newValues) {
             _this.setState(__assign(__assign({}, _this._values_), newValues));
         };
@@ -52,8 +48,9 @@ var MergedState = /** @class */ (function () {
             });
         });
     }
-    MergedState.refresh = function () {
-        this.useRetrieveState();
+    MergedState.useRefresh = function () {
+        var _a;
+        _a = (0, react_1.useState)(this.initialState), this._values_ = _a[0], this.setState = _a[1];
     };
     Object.defineProperty(MergedState.prototype, "put", {
         get: function () {
@@ -73,7 +70,7 @@ var MergedState = /** @class */ (function () {
 }());
 var useMergedState = function (initialState) {
     var cleanState = (0, react_1.useMemo)(function () { return new MergedState(initialState); }, []);
-    MergedState.refresh.call(cleanState);
+    MergedState.useRefresh.call(cleanState);
     return cleanState;
 };
 exports.useMergedState = useMergedState;

package/build/base/state.d.ts

@@ -1,24 +1,16 @@
-type TUseStateArray<TState extends object> = [
-    val: TState[keyof TState],
-    setter: (val: TState[keyof TState]) => void
-];
-type TUseStateResponses<TState extends object> = {
-    [Key in keyof TState]: TUseStateArray<TState>;
-};
 declare class CleanStateBase<TState extends object> {
-    static update: ICleanStateClass['update'];
     reservedKeys: string[];
     valueKeys: string[];
     private _values_;
+    private _initialValues_;
     private _setters_;
+    constructor(initialState: TState);
+    static update: <TState_1 extends object>(this: CleanStateBase<TState_1>) => void;
     get put(): { [Key in keyof TState]: (value: TState[Key]) => void; };
-    constructor();
+    get initialState(): TState;
     putMany: (newValues: Partial<TState>) => void;
 }
 type TCleanStateInstance<TState extends object> = TState & CleanStateBase<TState>;
-interface ICleanStateClass {
-    update: <TState extends object>(this: CleanStateBase<TState>, stateAndSetters: TUseStateResponses<TState>) => void;
-}
 export type TCleanState<TState extends object> = TCleanStateInstance<TState>;
 type Func = (...params: any[]) => any;
 type UseCleanState = <TState extends object, TProps extends object = object>(_initialState: ((props?: TProps) => TState) | TState, // TStateObjOrFactory,

package/build/base/state.js

@@ -14,9 +14,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMountState = exports.useCleanState = void 0;
 var react_1 = require("react");
 var CleanStateBase = /** @class */ (function () {
-    function CleanStateBase() {
+    function CleanStateBase(initialState) {
         var _this = this;
-        this.valueKeys = [];
         this._values_ = {};
         this._setters_ = {};
         this.putMany = function (newValues) {
@@ -26,22 +25,20 @@ var CleanStateBase = /** @class */ (function () {
             });
         };
         this.reservedKeys = Object.keys(this);
-    }
-    Object.defineProperty(CleanStateBase.prototype, "put", {
-        get: function () {
-            return __assign({}, this._setters_);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CleanStateBase.update = function update(stateAndSetters) {
-        var _this = this;
-        Object.entries(stateAndSetters).forEach(function (_a) {
-            var key = _a[0], responseFromUseState = _a[1];
+        /**
+         * The keys from the initial state object.
+         * By capturing and storing the value once, we ensure that any potential changes to the object,
+         * or irregularities in the order of keys returned by Object.keys,
+         * will not affect the order of subsequent useState calls.
+         * Only keys provided on the initial call will be recognized,
+         * since CleanState is instantiated only once with useMemo,
+         * and they will always be processed in a consistent order during rerenders.
+         */
+        this.valueKeys = Object.keys(initialState);
+        this._initialValues_ = __assign({}, initialState);
+        this.valueKeys.forEach(function (key) {
             if (_this.reservedKeys.includes(key))
                 throw new Error("The name \"".concat(key, "\" is reserved by CleanState and cannot be used to index state variables. Please use a different key."));
-            _this.valueKeys.push(key);
-            _this._values_[key] = responseFromUseState[0], _this._setters_[key] = responseFromUseState[1];
             var self = _this;
             Object.defineProperty(_this, key, {
                 get: function () {
@@ -53,39 +50,52 @@ var CleanStateBase = /** @class */ (function () {
                 enumerable: true,
             });
         });
+    }
+    Object.defineProperty(CleanStateBase.prototype, "put", {
+        get: function () {
+            return __assign({}, this._setters_);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CleanStateBase.prototype, "initialState", {
+        get: function () {
+            return __assign({}, this._initialValues_);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CleanStateBase.update = function update() {
+        var _this = this;
+        if (!(this instanceof CleanState))
+            throw new Error('CleanState.update must be called with `this` value set to a CleanState instance. Did you forget to use `.call` or `.apply`? Example: CleanState.update.call(cleanState);');
+        /**
+         * Linters complain about the use of a React hook within a loop because:
+         * > By following this rule, you ensure that Hooks are called in the same order each time a component renders.
+         * > That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
+         * To resolve this, we're calling `useState` via an alias `retrieveState`.
+         * Bypassing this rule is safe here because `useCleanState` is a special case,
+         * and it guarantees that the same useState calls will be made on every render in the exact same order.
+         * Therefore, it is safe to silence the linters, and required for this implementation to work smoothly.
+         */
+        var retrieveState = react_1.useState;
+        this.valueKeys.forEach(function (key) {
+            var _a;
+            _a = retrieveState(_this.initialState[key]), _this._values_[key] = _a[0], _this._setters_[key] = _a[1];
+        });
+        /* Object.entries<TUseStateArray<TState>>(stateAndSetters).forEach(([key, responseFromUseState]) => {
+            [this._values_[key], this._setters_[key]] = responseFromUseState;
+        }); */
         // return this;
     };
     return CleanStateBase;
 }());
 ;
-var a;
 var CleanState = CleanStateBase;
-var na = new CleanState();
-/**
- * Linters complain about the use of a React hook within a loop because:
- * > By following this rule, you ensure that Hooks are called in the same order each time a component renders.
- * > That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
- * To resolve this, we're calling `useState` via an alias `retrieveState`.
- * Bypassing this rule is safe here because `useCleanState` is a special case,
- * and it guarantees that the same useState calls will be made on every render in the exact same order.
- * Therefore, it is safe to silence the linters, and required for this implementation to work smoothly.
- */
-var retrieveState = react_1.useState;
 var useCleanState = function (_initialState, props) {
-    var initialState = typeof _initialState === 'function' ? _initialState(props) : _initialState;
-    // props?.s
-    var cleanState = (0, react_1.useMemo)(function () { return new CleanState(); }, []);
-    var stateKeys = Object.keys(initialState);
-    var initialCount = (0, react_1.useState)(stateKeys.length)[0];
-    if (stateKeys.length !== initialCount) {
-        throw new Error('The keys in your state object must be consistent throughout your components lifetime. Look up "rules of hooks" for more context.');
-    }
-    var stateAndSetters = {};
-    for (var _i = 0, stateKeys_1 = stateKeys; _i < stateKeys_1.length; _i++) {
-        var key = stateKeys_1[_i];
-        stateAndSetters[key] = retrieveState(initialState[key]);
-    }
-    CleanState.update.call(cleanState, stateAndSetters);
+    var initialState = typeof _initialState === 'function' ? (0, react_1.useMemo)(function () { return _initialState(props); }, []) : _initialState;
+    var cleanState = (0, react_1.useMemo)(function () { return new CleanState(initialState); }, []);
+    CleanState.update.call(cleanState);
     return cleanState;
 };
 exports.useCleanState = useCleanState;

package/build/index.js

@@ -17,13 +17,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./classy"), exports);
 // PS: Document component inheritance pattern with lifecycle callback arrays and namespaces.
 // Due to react's remounting behaviour, components must externally track when some logic has run, if it really really must only ever run once per mounted instance. Tricky to get right for components that may have multiple instance rendered simultaneously at different parts of a page.
-// Note: There is an alternative clean-state implementation that uses a single useState call and passes the clean state instance.
-// Then when a state setter is used, it mutates the cleanstate object, then calls setState on the updated cleanstate.
-// But setState might ignore calls with the same object ref as the existing state value, so perhaps create a new cleanstate
-// instance instead, spreading existing values with the changed values, and call setState with that.
-// It could be more performant as it would remove the need for looping over Object.keys in useCleanState.
-// Investigate this for a potential minor version update.
-// useCleanState => useState
+// useCleanState => useState, separate call for each key
+// useMergedState => useState, same call for all keys
 // useMethods => useCallback
 // useLogic => useCallback + all other hook calls.
 // useInstance => useLogic + lifecycle methods.
+/*
+- Write usage doc
+- Push to git and publish to site
+    - Follow-up personal post on class component inheritance can be published on GH Pages from profile repo.
+- Publish to NPM
+- Finalize package and repo names, then post to Twitter.
+*/
+/*
+withFetchApi(baseUrl); To mimic axios.get and axios.post type calls.
+@cleanweb/mem-store - Release global-store package here.
+Use mem-store to cache requests in createApi(); Use md5 hashed url as key.
+@todo Add simple persistence layer with indexed db.
+@cleanweb/subscribable - To publish changes in the data to subscribers.
+@cleanweb/reactive-data - To combine all 4.
+*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleanweb/react",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"
@@ -20,6 +20,7 @@
     "./base": "./build/base/index.js",
     "./classy": "./build/classy/index.js",
     "./state": "./build/base/state.js",
+    "./state/merged": "./build/base/merged-state.js",
     "./methods": "./build/base/methods.js",
     "./logic": "./build/classy/logic.js",
     "./instance": "./build/classy/instance.js",