@cleanweb/react 2.0.1-beta.0 → 2.1.0-beta.0

package/build/base/index.d.ts

@@ -1,2 +1,3 @@
 export * from './state';
 export * from './methods';
+export * from './merged-state';

package/build/base/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./state"), exports);
 __exportStar(require("./methods"), exports);
+__exportStar(require("./merged-state"), exports);

package/build/base/state/hook-types.d.ts

@@ -2,6 +2,7 @@ import { CleanStateBase } from './class';
 export type TStateData = object & {
     [Key in keyof CleanStateBase<{}>]?: never;
 };
+/** @see https://github.com/cleanjsweb/neat-react#clean-state */
 export type TCleanState<TState extends TStateData> = (CleanStateBase<TState> & Omit<TState, keyof CleanStateBase<{}>>);
 export type ExtractCleanStateData<YourCleanState extends CleanStateBase<{}>> = Omit<YourCleanState, keyof CleanStateBase<{}>>;
 type StateInitFunction = (...args: any[]) => object;

package/build/base/state/hooks.d.ts

@@ -1,9 +1,4 @@
 import { TUseCleanState } from './hook-types';
-/**
- * Returns a value that is false before the component has been mounted,
- * then true during all subsequent rerenders.
- */
-export declare const useMountState: () => boolean;
 /**
  * Creates a state object, which includes the provided values, and helper methods for
  * updating those values and automatically rerendering your component's UI accordingly.

package/build/base/state/hooks.js

@@ -1,26 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCleanState = exports.useMountState = void 0;
+exports.useCleanState = void 0;
 var react_1 = require("react");
 var class_1 = require("./class");
-/**
- * Returns a value that is false before the component has been mounted,
- * then true during all subsequent rerenders.
- */
-var useMountState = function () {
-    /**
-     * This must not be a stateful value. It should not be the cause of a rerender.
-     * It merely provides information about the render count,
-     * without influencing that count itself.
-     * So `mounted` should never be set with `useState`.
-     */
-    var mounted = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
-        mounted.current = true;
-    }, []);
-    return mounted.current;
-};
-exports.useMountState = useMountState;
 /**
  * Creates a state object, which includes the provided values, and helper methods for
  * updating those values and automatically rerendering your component's UI accordingly.

package/build/base/state/index.d.ts

@@ -1,4 +1,4 @@
 import '../../globals';
 export { CleanState } from './class';
-export { useCleanState, useMountState } from './hooks';
+export { useCleanState } from './hooks';
 export type { TCleanState, TStateData, ExtractCleanStateData } from './hook-types';

package/build/base/state/index.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMountState = exports.useCleanState = exports.CleanState = void 0;
+exports.useCleanState = exports.CleanState = void 0;
 require("../../globals");
 var class_1 = require("./class");
 Object.defineProperty(exports, "CleanState", { enumerable: true, get: function () { return class_1.CleanState; } });
 var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useCleanState", { enumerable: true, get: function () { return hooks_1.useCleanState; } });
-Object.defineProperty(exports, "useMountState", { enumerable: true, get: function () { return hooks_1.useMountState; } });

package/build/classy/class/index.d.ts

@@ -1,7 +1,5 @@
-import type { TStateData } from '../../base';
 import type { Extractor } from './types/extractor';
 import { ComponentInstance } from '../instance';
-type o = object;
 /**
  * A superset of {@link ComponentInstance} that allows defining your
  * component's JSX template directly inside the class.
@@ -10,7 +8,7 @@ type o = object;
  * making it easier to migrate older class components to the newer hooks-based system
  * with little to no changes to their existing semantics/implementation.
  */
-export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState extends TStateData = WeakEmptyObject> extends ComponentInstance<TProps, TState> {
+export declare class ClassComponent<TProps extends object = WeakEmptyObject> extends ComponentInstance<TProps> {
     /**
      * Analogous to {@link React.Component.render}. A function that returns
      * your component's JSX template.
@@ -28,7 +26,7 @@ export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState e
      *
      * ******
      *
-     * @example < caption>Using a template function that returns JSX.</ caption>
+     * @example <caption>Using a template function that returns JSX.</caption>
      *
      * ```tsx
      * template = () => {
@@ -42,7 +40,7 @@ export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState e
      * }
      * ```
      */
-    template: (context: this['templateContext']) => (React.JSX.Element | null);
+    template: (context: this['templateContext']) => JSX.Element | null;
     /**
      * Manually trigger a rerender of your component.
      * You should rarely ever need this. But if you are migrating
@@ -83,20 +81,3 @@ export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState e
     static readonly FC: Extractor;
 }
 export { ClassComponent as Component };
-/** /
-testing: {
-    const a: object = {b: ''};
-
-    type t = keyof typeof a;
-
-    class MyComponentLogic extends ClassComponent<{}, {a: ''}> {
-        static getInitialState = () => ({a: '' as const});
-        // a = () => this.hooks.a = '';
-
-        useHooks = () => {
-            this.state.a;
-        };
-    };
-
-    const Template = MyComponentLogic.FC();
-}/**/

package/build/classy/class/index.js

@@ -49,7 +49,7 @@ var ClassComponent = /** @class */ (function (_super) {
          *
          * ******
          *
-         * @example < caption>Using a template function that returns JSX.</ caption>
+         * @example <caption>Using a template function that returns JSX.</caption>
          *
          * ```tsx
          * template = () => {
@@ -97,7 +97,7 @@ var ClassComponent = /** @class */ (function (_super) {
     ClassComponent.extract = function FC(_Component) {
         var Component = _Component !== null && _Component !== void 0 ? _Component : this;
         var isClassComponentType = Component.prototype instanceof _a;
-        if (!Component.getInitialState || !isClassComponentType)
+        if (!isClassComponentType)
             throw new Error('Attempted to initialize ClassComponent with invalid Class type. Either pass a class that extends ClassComponent to FC (e.g `export FC(MyComponent);`), or ensure it is called as a method on a ClassComponent constructor type (e.g `export MyComponent.FC()`).');
         /*************************************
          *    Begin Function Component       *
@@ -128,20 +128,22 @@ var ClassComponent = /** @class */ (function (_super) {
 }(instance_1.ComponentInstance));
 exports.ClassComponent = ClassComponent;
 exports.Component = ClassComponent;
-/** /
+/**/
 testing: {
-    const a: object = {b: ''};
-
-    type t = keyof typeof a;
-
-    class MyComponentLogic extends ClassComponent<{}, {a: ''}> {
-        static getInitialState = () => ({a: '' as const});
-        // a = () => this.hooks.a = '';
-
-        useHooks = () => {
-            this.state.a;
-        };
-    };
-
-    const Template = MyComponentLogic.FC();
-}/**/
+    var a = { b: '' };
+    var MyComponentLogic = /** @class */ (function (_super) {
+        __extends(MyComponentLogic, _super);
+        function MyComponentLogic() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.getInitialState = function () { return ({ a: '' }); };
+            // a = () => this.hooks.a = '';
+            _this.useHooks = function () {
+                _this.state.a;
+            };
+            return _this;
+        }
+        return MyComponentLogic;
+    }(ClassComponent));
+    ;
+    var Template = MyComponentLogic.FC();
+} /**/

package/build/classy/class/types/extractor.d.ts

@@ -1,6 +1,5 @@
 import type { VoidFunctionComponent } from 'react';
-import type { BaseClassComponent } from './class/instance';
-import type { IClassComponentConstructor } from './class/static';
-type BaseCCConstructor = IClassComponentConstructor<BaseClassComponent>;
-export type Extractor = <TComponent extends BaseCCConstructor>(this: TComponent & IClassComponentConstructor<InstanceType<TComponent>>, Component?: TComponent & IClassComponentConstructor<InstanceType<TComponent>>) => VoidFunctionComponent<InstanceType<TComponent>['props']>;
+import type { ClassComponent } from '..';
+type BaseCCConstructor = typeof ClassComponent<object>;
+export type Extractor = <TComponentClass extends BaseCCConstructor>(this: TComponentClass, Component?: TComponentClass) => VoidFunctionComponent<InstanceType<TComponentClass>['props']>;
 export {};

package/build/classy/class/utils/rerender.js

@@ -1,11 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerender = void 0;
+var mount_state_1 = require("../../../helpers/mount-state");
 var react_1 = require("react");
 var useRerender = function () {
+    var isMounted = (0, mount_state_1.useMountState)();
     // Skip the value, we don't need it. Grab just the setter function.
     var _a = (0, react_1.useState)(Date.now()), _forceRerender = _a[1];
-    var rerender = function () { return _forceRerender(Date.now()); };
+    var rerender = function () {
+        if (isMounted()) {
+            _forceRerender(Date.now());
+            return;
+        }
+        setTimeout(function () {
+            if (!isMounted())
+                return;
+            _forceRerender(Date.now());
+        }, 1000);
+    };
     return rerender;
 };
 exports.useRerender = useRerender;

package/build/classy/instance/index.d.ts

@@ -1,37 +1,36 @@
-import type { TStateData } from '../../base';
 import type { UseInstance } from './types/hook';
-import type { CIBaseType, IComponentInstance } from './types/instance';
-import type { IComponentInstanceClass } from './types/static';
 import { ComponentLogic } from '../../classy/logic';
 type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction>;
-type o = object;
 /** An empty function. It returns (void) without performing any operations. */
 export declare const noOp: () => void;
 /**
  * A superset of {@link ComponentLogic} that adds support for lifecycle methods.
  * This provides a declarative API for working with your React function component's lifecycle,
  * a simpler alternative to the imperative approach with `useEffect` and/or `useMemo`.
+ *
+ * @see https://github.com/cleanjsweb/neat-react#lifecycle-useinstance
  */
-export declare class ComponentInstance<TProps extends o = {}, TState extends TStateData = WeakEmptyObject> extends ComponentLogic.Class<TProps, TState> {
+export declare class ComponentInstance<TProps extends object = {}> extends ComponentLogic<TProps> {
     /**
-     * Runs only _before_ first render, i.e before the component instance is mounted.
-     * Useful for logic that is involved in determining what to render.
+     * Runs only _before_ first render,
+     * i.e before the component instance is mounted.
      *
-     * Updating local state from in here will abort the render cycle early, before changes are committed to the DOM,
-     * and prompt React to immediately rerender the component with the updated state value(s).
+     * It is ignored on subsequent rerenders.
      *
-     * Ignored on subsequent rerenders.
+     * PS: You can conditionally update state from here, but with certain caveats.
+     * {@link https://react.dev/reference/react/useState#storing-information-from-previous-renders | See the React docs for more details}.
      */
     beforeMount: IVoidFunction;
     /**
      * Runs only **_after_** first render, i.e after the component instance is mounted.
+     * It is ignored on subsequent rerenders.
      *
      * Should usually only be used for logic that does not directly take part in determining what to render, like
      * synchronize your component with some external system.
      *
-     * Ignored on subsequent rerenders.
+     * @returns A cleanup function.
      *
-     * Returns a cleanup function.
+     * Uses `useEffect()` under the hood.
      */
     onMount: AsyncAllowedEffectCallback;
     private _templateContext;
@@ -40,8 +39,8 @@ export declare class ComponentInstance<TProps extends o = {}, TState extends TSt
      * Runs _before_ every render cycle, including the first.
      * Useful for logic that is involved in determining what to render.
      *
-     * Updating local state from in here will abort the render cycle early, before changes are committed to the DOM,
-     * and prompt React to immediately rerender the component with the updated state value(s).
+     * PS: You can conditionally update state from here, but with certain caveats.
+     * {@link https://react.dev/reference/react/useState#storing-information-from-previous-renders | See the React docs for more details}.
      */
     beforeRender: () => object | void;
     /**
@@ -50,6 +49,8 @@ export declare class ComponentInstance<TProps extends o = {}, TState extends TSt
      * Should usually only be used for logic that does not directly take part in determining what to render, like
      * synchronize your component with some external system.
      *
+     * Uses `useEffect()` under the hood.
+     *
      * Returns a cleanup function.
      */
     onRender: AsyncAllowedEffectCallback;
@@ -60,35 +61,4 @@ export declare class ComponentInstance<TProps extends o = {}, TState extends TSt
     cleanUp: IVoidFunction;
 }
 export declare const useInstance: UseInstance;
-export declare namespace ComponentInstance {
-    class Class<TProps extends object = {}, TState extends TStateData = WeakEmptyObject> extends ComponentInstance<TProps, TState> {
-    }
-    type Instance<Instance extends CIBaseType = Class> = IComponentInstance<Instance>;
-    type ClassType<Instance extends CIBaseType = Class> = IComponentInstanceClass<Instance>;
-}
 export {};
-/** /
-testing: {
-    class A extends ComponentInstance<{}, {}> {
-        static getInitialState: (p?: object) => ({putan: ''});
-        // k = this.props.o
-        a = this.state['_initialValues_'];
-
-        beforeRender = () => '';
-
-        useHooks = () => {
-            type a = typeof this._templateContext;
-        };
-        // hard empty has every key
-        // weak empty has no key
-        // weak empty is not assignable to hard empty
-    }
-
-    const a = useInstance(A, {o: ''});
-    a.a;
-
-    // a.props['o'];
-    type bbbb = A['state'];
-    type ttt = bbbb['put'];
-}
-/**/

package/build/classy/instance/index.js

@@ -26,38 +26,41 @@ exports.noOp = noOp;
  * A superset of {@link ComponentLogic} that adds support for lifecycle methods.
  * This provides a declarative API for working with your React function component's lifecycle,
  * a simpler alternative to the imperative approach with `useEffect` and/or `useMemo`.
+ *
+ * @see https://github.com/cleanjsweb/neat-react#lifecycle-useinstance
  */
 var ComponentInstance = /** @class */ (function (_super) {
     __extends(ComponentInstance, _super);
     function ComponentInstance() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         /**
-         * Runs only _before_ first render, i.e before the component instance is mounted.
-         * Useful for logic that is involved in determining what to render.
+         * Runs only _before_ first render,
+         * i.e before the component instance is mounted.
          *
-         * Updating local state from in here will abort the render cycle early, before changes are committed to the DOM,
-         * and prompt React to immediately rerender the component with the updated state value(s).
+         * It is ignored on subsequent rerenders.
          *
-         * Ignored on subsequent rerenders.
+         * PS: You can conditionally update state from here, but with certain caveats.
+         * {@link https://react.dev/reference/react/useState#storing-information-from-previous-renders | See the React docs for more details}.
          */
         _this.beforeMount = function () { };
         /**
          * Runs only **_after_** first render, i.e after the component instance is mounted.
+         * It is ignored on subsequent rerenders.
          *
          * Should usually only be used for logic that does not directly take part in determining what to render, like
          * synchronize your component with some external system.
          *
-         * Ignored on subsequent rerenders.
+         * @returns A cleanup function.
          *
-         * Returns a cleanup function.
+         * Uses `useEffect()` under the hood.
          */
         _this.onMount = function () { return exports.noOp; };
         /**
          * Runs _before_ every render cycle, including the first.
          * Useful for logic that is involved in determining what to render.
          *
-         * Updating local state from in here will abort the render cycle early, before changes are committed to the DOM,
-         * and prompt React to immediately rerender the component with the updated state value(s).
+         * PS: You can conditionally update state from here, but with certain caveats.
+         * {@link https://react.dev/reference/react/useState#storing-information-from-previous-renders | See the React docs for more details}.
          */
         _this.beforeRender = function () { };
         /**
@@ -66,6 +69,8 @@ var ComponentInstance = /** @class */ (function (_super) {
          * Should usually only be used for logic that does not directly take part in determining what to render, like
          * synchronize your component with some external system.
          *
+         * Uses `useEffect()` under the hood.
+         *
          * Returns a cleanup function.
          */
         _this.onRender = function () { return exports.noOp; };
@@ -84,7 +89,7 @@ var ComponentInstance = /** @class */ (function (_super) {
         configurable: true
     });
     return ComponentInstance;
-}(logic_1.ComponentLogic.Class));
+}(logic_1.ComponentLogic));
 exports.ComponentInstance = ComponentInstance;
 ;
 /*
@@ -143,39 +148,25 @@ var useInstance = function () {
     return instance;
 };
 exports.useInstance = useInstance;
-(function (ComponentInstance) {
-    var Class = /** @class */ (function (_super) {
-        __extends(Class, _super);
-        function Class() {
-            return _super !== null && _super.apply(this, arguments) || this;
+/**/
+testing: {
+    var A = /** @class */ (function (_super) {
+        __extends(A, _super);
+        function A() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.getInitialState = function (p) { return ({ putan: '' }); };
+            // k = this.props.o
+            _this.am = _this.state['_initialValues_'];
+            _this.k = _this.am.putan;
+            _this.beforeRender = function () { return ({ g: '' }); };
+            _this.useHooks = function () {
+                return { j: 9 };
+            };
+            return _this;
         }
-        return Class;
+        return A;
     }(ComponentInstance));
-    ComponentInstance.Class = Class;
-    ;
-})(ComponentInstance || (exports.ComponentInstance = ComponentInstance = {}));
-/** /
-testing: {
-    class A extends ComponentInstance<{}, {}> {
-        static getInitialState: (p?: object) => ({putan: ''});
-        // k = this.props.o
-        a = this.state['_initialValues_'];
-
-        beforeRender = () => '';
-
-        useHooks = () => {
-            type a = typeof this._templateContext;
-        };
-        // hard empty has every key
-        // weak empty has no key
-        // weak empty is not assignable to hard empty
-    }
-
-    const a = useInstance(A, {o: ''});
-    a.a;
-
-    // a.props['o'];
-    type bbbb = A['state'];
-    type ttt = bbbb['put'];
+    var a = (0, exports.useInstance)(A, {});
+    a.am;
 }
 /**/

package/build/classy/instance/mount-callbacks.d.ts

@@ -1,4 +1,4 @@
-import { CIBaseType, IComponentInstance } from './types/instance';
-type UseMountCallbacks = <TInstance extends IComponentInstance<CIBaseType>>(instance: TInstance) => void;
+import { ComponentInstance } from '.';
+type UseMountCallbacks = <TInstance extends ComponentInstance>(instance: TInstance) => void;
 export declare const useMountCallbacks: UseMountCallbacks;
 export {};

package/build/classy/instance/mount-callbacks.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMountCallbacks = void 0;
 var react_1 = require("react");
-var state_1 = require("../../base/state");
+var mount_state_1 = require("../../helpers/mount-state");
 var useMountCallbacks = function (instance) {
     var _a;
-    var mounted = (0, state_1.useMountState)();
-    if (!mounted)
+    var isMounted = (0, mount_state_1.useMountState)();
+    if (!isMounted())
         (_a = instance.beforeMount) === null || _a === void 0 ? void 0 : _a.call(instance);
     (0, react_1.useEffect)(function () {
         var _a;

package/build/classy/instance/types/hook.d.ts

@@ -1,16 +1,13 @@
-import type { CIBaseType, IComponentInstance } from './instance';
-import type { IComponentInstanceClass } from './static';
 import { ComponentInstance } from '..';
-type o = object;
-type UIClassParam = IComponentInstanceClass<IComponentInstance<CIBaseType>>;
-type UIProplessClassParam = IComponentInstanceClass<IComponentInstance<ComponentInstance<HardEmptyObject, o>>>;
+type UIClassParam = typeof ComponentInstance<object>;
+type UIProplessClassParam = typeof ComponentInstance<HardEmptyObject>;
 export type UseInstance = {
-    <Class extends UIProplessClassParam>(Methods: Class & Constructor<InstanceType<Class>>): InstanceType<Class>;
-    <Class extends UIClassParam>(Methods: Class & Constructor<InstanceType<Class>>, props: InstanceType<Class>['props']): InstanceType<Class>;
+    <Class extends UIProplessClassParam>(Methods: Class): InstanceType<Class>;
+    <Class extends UIClassParam>(Methods: Class, props: InstanceType<Class>['props']): InstanceType<Class>;
 };
 export type UIParams = [
-    Class: IComponentInstanceClass<IComponentInstance<CIBaseType>>,
+    Class: typeof ComponentInstance,
     props?: object
 ];
-export type UIReturn = CIBaseType;
+export type UIReturn = ComponentInstance;
 export {};

package/build/classy/logic/index.d.ts

@@ -1,6 +1,4 @@
-import type { TCleanState, TStateData } from '../../base/state';
-import type { IComponentLogicClass } from './types/static';
-import type { CLBaseType, IComponentLogic } from './types/instance';
+import type { TCleanState } from '../../base/state';
 import type { UseLogic } from './types/hook';
 export type HardEmpty = HardEmptyObject;
 export type WeakEmpty = WeakEmptyObject;
@@ -16,27 +14,35 @@ export type WeakEmpty = WeakEmptyObject;
  *
  * Call the {@link useLogic} hook inside your function component to instantiate the class.
  */
-export declare class ComponentLogic<TProps extends object = {}, TState extends TStateData = WeakEmpty> {
-    readonly state: TCleanState<TState>;
+export declare class ComponentLogic<TProps extends object = {}> {
+    /**
+     * A {@link TCleanState | `CleanState`} object.
+     * Holds all of your component's state,
+     * and methods for conveniently manipulating those values.
+     */
+    readonly state: TCleanState<ReturnType<this['getInitialState']>>;
+    /** The props pass into your component at the time of rendering. */
     readonly props: TProps;
+    /**
+     * Values received from the hooks your component consumes.
+     * This holds the latest copy of the object returned by
+     * {@link useHooks}.
+     */
     readonly hooks: ReturnType<this['useHooks']>;
     /**
      * Called before each instance of your component is mounted.
      * It receives the initial `props` object and should return
      * an object with the initial values for your component's state.
      */
-    static getInitialState: (p?: any) => object;
+    getInitialState: (props?: TProps) => object;
     /**
-     * Call React hooks and expose any values your component
-     * needs by returning an object with said values. The returned
-     * object will be accessible as `this.hooks`;
+     * Call React hooks from here. If your component needs
+     * access to values return from the hooks you call,
+     * expose those values by returning an object with said values.
+     *
+     * The returned object will be accessible as {@link hooks | `this.hooks`} within
+     * your component class.
      */
     useHooks: () => object | void;
 }
 export declare const useLogic: UseLogic;
-export declare namespace ComponentLogic {
-    class Class<TProps extends object = {}, TState extends TStateData = WeakEmpty> extends ComponentLogic<TProps, TState> {
-    }
-    type Instance<Instance extends CLBaseType = Class> = IComponentLogic<Instance>;
-    type ClassType<Instance extends CLBaseType = Class> = IComponentLogicClass<Instance>;
-}

package/build/classy/logic/index.js

@@ -33,20 +33,22 @@ var state_1 = require("../../base/state");
  */
 var ComponentLogic = /** @class */ (function () {
     function ComponentLogic() {
-        // * PS: `p?: object` wierdly causes TS error in v^5.5.4; object is not assignable to the component's TProps.
         /**
-         * Call React hooks and expose any values your component
-         * needs by returning an object with said values. The returned
-         * object will be accessible as `this.hooks`;
+         * Called before each instance of your component is mounted.
+         * It receives the initial `props` object and should return
+         * an object with the initial values for your component's state.
+         */
+        this.getInitialState = function (props) { return ({}); };
+        /**
+         * Call React hooks from here. If your component needs
+         * access to values return from the hooks you call,
+         * expose those values by returning an object with said values.
+         *
+         * The returned object will be accessible as {@link hooks | `this.hooks`} within
+         * your component class.
          */
         this.useHooks = function () { };
     }
-    /**
-     * Called before each instance of your component is mounted.
-     * It receives the initial `props` object and should return
-     * an object with the initial values for your component's state.
-     */
-    ComponentLogic.getInitialState = function (p) { return ({}); };
     return ComponentLogic;
 }());
 exports.ComponentLogic = ComponentLogic;
@@ -58,7 +60,6 @@ var useLogic = function () {
         args[_i] = arguments[_i];
     }
     var Logic = args[0], _b = args[1], props = _b === void 0 ? {} : _b;
-    var state = (0, state_1.useCleanState)(Logic.getInitialState, props);
     var self = (0, react_1.useRef)((0, react_1.useMemo)(function () {
         return new Logic();
     }, [])).current;
@@ -71,23 +72,12 @@ var useLogic = function () {
     // @ts-expect-error
     self.props = (_propsProxy_ = props);
     // @ts-expect-error
-    self.state = (_stateProxy_ = state);
+    self.state = (_stateProxy_ = (0, state_1.useCleanState)(self.getInitialState, props));
     // @ts-expect-error
     self.hooks = (_hooksProxy_ = (_a = self.useHooks()) !== null && _a !== void 0 ? _a : {});
     return self;
 };
 exports.useLogic = useLogic;
-(function (ComponentLogic) {
-    var Class = /** @class */ (function (_super) {
-        __extends(Class, _super);
-        function Class() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return Class;
-    }(ComponentLogic));
-    ComponentLogic.Class = Class;
-    ;
-})(ComponentLogic || (exports.ComponentLogic = ComponentLogic = {}));
 /**/
 testing: {
     var a = { b: '' };
@@ -95,26 +85,27 @@ testing: {
         __extends(MyComponentLogic, _super);
         function MyComponentLogic() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            // b = this.state.put[''] + this.props.b;
+            _this.getInitialState = function () { return ({ b: 7 }); };
+            _this.b = function () { return 8 + _this.state.b; };
             _this.useHooks = function () { return ({ a: 'undefined' }); };
             return _this;
         }
-        MyComponentLogic.getInitialState = function () { return ({ b: 7 }); };
         return MyComponentLogic;
-    }(ComponentLogic.Class));
+    }(ComponentLogic));
     ;
-    MyComponentLogic.getInitialState;
     var self_1 = (0, exports.useLogic)(MyComponentLogic);
     self_1.hooks;
     self_1.useHooks();
     var A = /** @class */ (function (_super) {
         __extends(C, _super);
         function C() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.getInitialState = function () { return ({ a: 'l' }); };
+            _this.a = function () { return _this.state.a = ''; };
+            return _this;
         }
         return C;
-    }(ComponentLogic.Class));
-    A.getInitialState();
+    }(ComponentLogic));
     // const oa = {['a' as unknown as symbol]: 'boo'};
     var oa = (_a = {}, _a['a'] = 'boo', _a);
     (0, exports.useLogic)(A, oa);

package/build/classy/logic/types/hook.d.ts

@@ -1,24 +1,17 @@
 import type { ComponentLogic } from '..';
-import type { CLBaseType, IComponentLogic } from './instance';
-import type { IComponentLogicClass } from './static';
-/*************************************
- *        # Utils                    *
-**************************************/
-/** */
-type o = object;
 /*************************************
  *        # Hooks                    *
 **************************************/
 /** */
-type ULClassParam = IComponentLogicClass<IComponentLogic<CLBaseType>>;
-type ULProplessClassParam = IComponentLogicClass<IComponentLogic<ComponentLogic<HardEmptyObject, o>>>;
+type ULClassParam = typeof ComponentLogic<object>;
+type ULProplessClassParam = typeof ComponentLogic<HardEmptyObject>;
 export type UseLogic = {
-    <Class extends ULProplessClassParam>(Methods: Class & Constructor<IComponentLogic<InstanceType<Class>>>): InstanceType<Class>;
-    <Class extends ULClassParam>(Methods: Class & Constructor<IComponentLogic<InstanceType<Class>>>, props: InstanceType<Class>['props']): InstanceType<Class>;
+    <Class extends ULProplessClassParam>(Methods: Class): InstanceType<Class>;
+    <Class extends ULClassParam>(Methods: Class, props: InstanceType<Class>['props']): InstanceType<Class>;
 };
 export type ULParams = [
-    Class: ComponentLogic.ClassType<ComponentLogic.Instance<CLBaseType>>,
+    Class: typeof ComponentLogic,
     props?: object
 ];
-export type ULReturn = CLBaseType;
+export type ULReturn = ComponentLogic;
 export {};

package/build/globals.d.ts

@@ -34,11 +34,37 @@ declare global {
     type AnyFunction = (...args: any) => any;
     type FunctionType = AnyFunction;
     type TFunction = AnyFunction;
+    /** @deprecated Use {@link NonNullish} */
     type NotNullish = {};
+    type NonNullish = {};
     type NonPrimitive = object;
+    /**
+     * Describes an object that has no keys,
+     * except for a secret unique symbol key,
+     * whose value type is the union `never | undefuned`.
+     *
+     * Having a single key allows the object to throw type errors
+     * of the form:
+     * ```
+     * Type `A` has no properties in common with `WeakEmptyObject`.
+     * ```
+     * This may provide a slightly stricter type checking than simply
+     * using the non-nullish (`{}`) or non-primitive (`object`)
+     * built-in types.
+     *
+     * Note: `WeakEmptyObject` is not assignable to `HardEmptyObject`
+     * because it has a key whose value type includes `undefined`,
+     * but `HardEmptyObject` keys can only have a type of `never`.
+     */
     interface WeakEmptyObject {
         [UniqueSecretSymbolKey]?: never;
     }
+    /**
+     * Describes an object that can have any key, but all keys have
+     * a type of `never`. This effectively prevents any value
+     * from ever being stored on the object. The object is therefore
+     * guaranteed to always be empty.
+     */
     interface HardEmptyObject {
         [key: keyof any]: never;
     }

package/build/helpers/index.d.ts

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

package/build/helpers/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./mount-state"), exports);

package/build/helpers/mount-state.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a value that is false before the component has been mounted,
+ * then true during all subsequent rerenders.
+ */
+export declare const useMountState: () => () => boolean;

package/build/helpers/mount-state.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMountState = void 0;
+var react_1 = require("react");
+/**
+ * Returns a value that is false before the component has been mounted,
+ * then true during all subsequent rerenders.
+ */
+var useMountState = function () {
+    /**
+     * This must not be a state value. It should not be the cause of a rerender.
+     * It merely provides information about the render count,
+     * without influencing that count itself.
+     * So `mounted` should never be set with `useState`.
+     */
+    var mounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        mounted.current = true;
+        return function () {
+            mounted.current = false;
+        };
+    }, []);
+    return function () { return mounted.current; };
+};
+exports.useMountState = useMountState;

package/build/index.d.ts

@@ -1 +1,3 @@
 export * from './classy';
+export * from './base';
+export * from './helpers';

package/build/index.js

@@ -15,25 +15,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 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.
-// 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.
-*/
+__exportStar(require("./base"), exports);
+__exportStar(require("./helpers"), exports);
 /*
 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.
+Use mem-store to cache requests in withFetchApi(); Use md5 hashed url+body 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": "2.0.1-beta.0",
+  "version": "2.1.0-beta.0",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"
@@ -16,18 +16,9 @@
   },
   "//type": "module",
   "exports": {
-    ".": "./build/index.js",
+    ".": "./build/classy/index.js",
     "./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/index.js",
-    "./logic/*": "./build/classy/logic/*.js",
-    "./instance": "./build/classy/instance/index.js",
-    "./instance/*": "./build/classy/instance/*.js",
-    "./class": "./build/classy/class/index.js",
-    "./class/*": "./build/classy/class/*.js"
+    "./helpers": "./build/helpers/index.js"
   },
   "scripts": {
     "prebuild": "rimraf ./build",

package/build/classy/class/types/class/instance.d.ts

@@ -1,12 +0,0 @@
-import type { ExtractCleanStateData } from '../../../../base';
-import type { InstanceOverrides as CIInstanceOverrides } from '../../../../classy/instance/types/instance';
-import { ClassComponent } from '../../../../classy/class';
-export type BaseClassComponent = ClassComponent<object, object>;
-export type CCBaseType = ClassComponent<object, object>;
-type CCFromSubType<SubType extends CCBaseType> = ClassComponent<SubType['props'], ExtractCleanStateData<SubType['state']>>;
-export interface InstanceOverrides<Instance extends CCBaseType = ClassComponent> extends CIInstanceOverrides<Instance> {
-}
-type BaseInstance<Instance extends CCBaseType = ClassComponent> = Omit<CCFromSubType<Instance>, keyof InstanceOverrides>;
-export interface IClassComponent<Instance extends CCBaseType = ClassComponent> extends BaseInstance<Instance>, InstanceOverrides<Instance> {
-}
-export {};

package/build/classy/class/types/class/instance.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/build/classy/class/types/class/static.d.ts

@@ -1,9 +0,0 @@
-import type { StaticOverrides as CIStaticOverrides } from '../../../../classy/instance/types/static';
-import type { CCBaseType } from './instance';
-import { ClassComponent } from '../..';
-export interface StaticOverrides<Instance extends CCBaseType = ClassComponent> extends CIStaticOverrides<Instance> {
-}
-type BaseStatics = Omit<typeof ClassComponent, 'prototype' | keyof StaticOverrides>;
-export interface IClassComponentConstructor<Instance extends CCBaseType = ClassComponent> extends BaseStatics, StaticOverrides<Instance> {
-}
-export {};

package/build/classy/class/types/class/static.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// type ComponentClassOwnStaticKeys = Exclude<
-// 	keyof typeof ClassComponent,
-// 	keyof IComponentInstanceClass
-// >;
-// type ComponentClassOwnStatics = {
-// 	[Key in ComponentClassOwnStaticKeys]: (typeof ClassComponent)[Key];
-// }
-// export interface ClassComponentConstructor<
-// 	Instance extends BaseClassComponent = ClassComponent
-// > extends Constructor<Instance>, ComponentClassOwnStatics, IComponentInstanceClass<Instance> {};

package/build/classy/instance/types/instance.d.ts

@@ -1,11 +0,0 @@
-import type { InstanceOverrides as CLInstanceOverrides } from '../../../classy/logic/types/instance';
-import type { ExtractCleanStateData } from '../../../base';
-import { ComponentInstance } from '../../../classy/instance';
-export type CIBaseType = Omit<ComponentInstance<object, object>, never>;
-type CIFromSubType<SubType extends CIBaseType> = ComponentInstance<SubType['props'], ExtractCleanStateData<SubType['state']>>;
-export interface InstanceOverrides<Instance extends CIBaseType = ComponentInstance> extends CLInstanceOverrides<Instance> {
-}
-type BaseInstance<Instance extends CIBaseType = ComponentInstance> = Omit<CIFromSubType<Instance>, keyof InstanceOverrides>;
-export interface IComponentInstance<Instance extends CIBaseType = ComponentInstance> extends BaseInstance<Instance>, InstanceOverrides<Instance> {
-}
-export {};

package/build/classy/instance/types/instance.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/build/classy/instance/types/static.d.ts

@@ -1,11 +0,0 @@
-import type { StaticOverrides as CLStaticOverrides } from '../../../classy/logic/types/static';
-import type { CIBaseType } from './instance';
-import { ComponentInstance } from '../../../classy/instance';
-/** */
-export interface StaticOverrides<Instance extends CIBaseType = ComponentInstance> extends CLStaticOverrides<Instance> {
-}
-type BaseStatics = Omit<typeof ComponentInstance, 'prototype' | keyof StaticOverrides>;
-export interface IComponentInstanceClass<Instance extends CIBaseType = ComponentInstance> extends BaseStatics, StaticOverrides<Instance> {
-}
-export {};
-/** */

package/build/classy/instance/types/static.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/** */
-// type ComponentInstanceOwnStaticKeys = Exclude<
-// 	keyof typeof ComponentInstance,
-// 	keyof ComponentLogic.ClassType
-// >;
-// type ComponentInstanceOwnStatics = {
-// 	[Key in ComponentInstanceOwnStaticKeys]: (typeof ComponentInstance)[Key];
-// }
-// export interface IComponentInstanceClass<
-// 	Instance extends ComponentInstance<o, o> = ComponentInstance,
-// > extends
-// 	Constructor<IComponentInstance<Instance>>,
-// 	ComponentInstanceOwnStatics,
-// 	ComponentLogic.ClassType<Instance>
-// {};

package/build/classy/logic/types/instance.d.ts

@@ -1,18 +0,0 @@
-import type { ExtractCleanStateData } from '../../../base';
-import type { ComponentLogic } from '../../../classy/logic';
-/*************************************
- *        # Utils                    *
-**************************************/
-/** */
-export type CLBaseType = ComponentLogic<object, object>;
-type CLFromSubType<SubType extends CLBaseType> = ComponentLogic<SubType['props'], ExtractCleanStateData<SubType['state']>>;
-/*************************************
- *        # Instance Type            *
-**************************************/
-/** */
-export interface InstanceOverrides<Instance extends CLBaseType = ComponentLogic> {
-}
-type BaseInstance<Instance extends CLBaseType = ComponentLogic> = Omit<CLFromSubType<Instance>, keyof InstanceOverrides>;
-export interface IComponentLogic<Instance extends CLBaseType = ComponentLogic> extends BaseInstance<Instance>, InstanceOverrides<Instance> {
-}
-export {};

package/build/classy/logic/types/instance.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/build/classy/logic/types/static.d.ts

@@ -1,17 +0,0 @@
-import type { ExtractCleanStateData } from '../../../base';
-import type { ComponentLogic } from '../../../classy/logic';
-import type { CLBaseType } from './instance';
-/*************************************
- *        # Utils                    *
-**************************************/
-type o = object;
-/*************************************
- *        # Class Static Side        *
-**************************************/
-export interface StaticOverrides<Instance extends CLBaseType = ComponentLogic> extends Constructor<Instance> {
-    getInitialState: (props?: Instance['props']) => ExtractCleanStateData<Instance['state']>;
-}
-type BaseStatics = Omit<typeof ComponentLogic, 'prototype' | keyof StaticOverrides>;
-export interface IComponentLogicClass<Instance extends ComponentLogic<o, o> = ComponentLogic> extends BaseStatics, StaticOverrides<Instance> {
-}
-export {};

package/build/classy/logic/types/static.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });