@cleanweb/react 1.0.11 → 1.1.1-beta.0

package/build/base/merged-state.js

@@ -26,7 +26,8 @@ var MergedState = /** @class */ (function () {
         this.valueKeys = [];
         this._initialValues_ = __assign({}, initialState);
         this._values_ = __assign({}, initialState);
-        Object.keys(initialState).forEach(function (key) {
+        Object.keys(initialState).forEach(function (_key) {
+            var key = _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."));
             }

package/build/base/methods.d.ts

@@ -3,7 +3,6 @@ export declare class ComponentMethods<TState extends object, TProps extends obje
     state: TCleanState<TState>;
     props: TProps;
 }
-type ComponentMethodsConstructor = typeof ComponentMethods<any, any>;
-type UseMethods = <MethodsClass extends ComponentMethodsConstructor>(Methods: MethodsClass, state: InstanceType<MethodsClass>['state'], props: InstanceType<MethodsClass>['props']) => InstanceType<MethodsClass>;
+type UseMethods = <TMethods extends ComponentMethods<any, any>>(Methods: Constructor<TMethods>, state: TMethods['state'], props: TMethods['props']) => TMethods;
 export declare const useMethods: UseMethods;
 export {};

package/build/base/methods.js

@@ -14,10 +14,10 @@ var useMethods = function (Methods, state, props) {
     // causing the instance to be unexpectedly recreated in the middle of the components lifecycle.
     // But useRef and useState values appear to always be preserved whenever this happens.
     // So those two are the only cross-render-persistence methods we can consider safe.
-    var methods = (0, react_1.useMemo)(function () {
+    var methods = (0, react_1.useRef)((0, react_1.useMemo)(function () {
         // See useLogic implementation for a discussion of this type assertion.
         return new Methods();
-    }, []);
+    }, [])).current;
     methods.state = state;
     methods.props = props;
     return methods;

package/build/base/state.d.ts

@@ -1,4 +1,12 @@
-declare class CleanStateBase<TState extends object> {
+/**
+ * Returns a value that is false before the component has been mounted,
+ * then true during all subsequent rerenders.
+ */
+export declare const useMountState: () => boolean;
+type PutState<TState extends object> = {
+    [Key in keyof TState]: React.Dispatch<React.SetStateAction<TState[Key]>>;
+};
+declare class CleanStateBase<TState extends Record<string, any>> {
     reservedKeys: string[];
     valueKeys: string[];
     private _values_;
@@ -6,20 +14,16 @@ declare class CleanStateBase<TState extends object> {
     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; };
+    get put(): PutState<TState>;
     get initialState(): TState;
     putMany: (newValues: Partial<TState>) => void;
 }
 type TCleanStateInstance<TState extends object> = TState & CleanStateBase<TState>;
 export type TCleanState<TState extends object> = TCleanStateInstance<TState>;
-type TFunctionType = (...args: any) => object;
-type TInitialState<StateParamType> = StateParamType extends TFunctionType ? ReturnType<StateParamType> : StateParamType;
-type StateInitParameters<StateInitializer> = StateInitializer extends TFunctionType ? Parameters<StateInitializer> : [];
-type UseCleanState = <StateInitializer extends TFunctionType | object>(_initialState: StateInitializer, ...props: StateInitParameters<StateInitializer>) => TCleanStateInstance<TInitialState<StateInitializer>>;
-export declare const useCleanState: UseCleanState;
-/**
- * Returns a value that is false before the component has been mounted,
- * then true during all subsequent rerenders.
- */
-export declare const useMountState: () => boolean;
+export type TState<YourCleanState extends CleanStateBase<{}>> = Omit<YourCleanState, keyof CleanStateBase<{}>>;
+type StateInitFunction = (...args: any[]) => object;
+type StateInit = object | StateInitFunction;
+type TInitialState<Initializer extends StateInit> = Initializer extends (...args: any[]) => (infer TState extends object) ? TState : Initializer;
+type TUseCleanState = <TInit extends StateInit>(_initialState: TInit, ...props: TInit extends (...args: infer TProps extends any[]) => (infer TState extends object) ? TProps : []) => TCleanStateInstance<TInitialState<TInit>>;
+export declare const useCleanState: TUseCleanState;
 export {};

package/build/base/state.js

@@ -11,8 +11,26 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMountState = exports.useCleanState = void 0;
+exports.useCleanState = 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 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;
 var CleanStateBase = /** @class */ (function () {
     function CleanStateBase(initialState) {
         var _this = this;
@@ -81,7 +99,14 @@ var CleanStateBase = /** @class */ (function () {
         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];
+            // @todo Make state updates accessible immediately. Use state.staged to access the scheduled updates.
+            var setter;
+            // @todo Support SetStateAction callback signature in state.put(...);
+            _a = retrieveState(_this.initialState[key]), _this._values_[key] = _a[0], setter = _a[1];
+            _this._setters_[key] = (function (valueOrCallback) {
+                // this._staged_[key] = value;
+                setter(valueOrCallback);
+            });
         });
         /* Object.entries<TUseStateArray<TState>>(stateAndSetters).forEach(([key, responseFromUseState]) => {
             [this._values_[key], this._setters_[key]] = responseFromUseState;
@@ -97,27 +122,32 @@ var useCleanState = function (_initialState) {
     for (var _i = 1; _i < arguments.length; _i++) {
         props[_i - 1] = arguments[_i];
     }
-    var initialState = typeof _initialState === 'function' ? (0, react_1.useMemo)(function () { return _initialState.apply(void 0, props); }, []) : _initialState;
-    var cleanState = (0, react_1.useMemo)(function () { return new CleanState(initialState); }, []);
+    var mounted = (0, exports.useMountState)();
+    var initialState = typeof _initialState === 'function'
+        ? (0, react_1.useMemo)(function () { return _initialState.apply(void 0, props); }, [])
+        : _initialState;
+    ;
+    var freshInstance = {};
+    if (!mounted)
+        freshInstance = new CleanState(initialState);
+    if (!freshInstance.put)
+        throw new Error('useCleanState failed to initialized a state instance.');
+    var cleanState = (0, react_1.useRef)(freshInstance).current;
     CleanState.update.call(cleanState);
     return cleanState;
 };
 exports.useCleanState = useCleanState;
-/**
- * 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;
+// Should be valid.
+// useCleanState((a: number) => ({b: a.toString(), q: 1}), 6);
+// useCleanState((a: boolean) => ({b: a.toString()}), true);
+// useCleanState((a: number, c?: string) => ({ b: `${a}` }), 6);
+// useCleanState((a: number, c?: string) => ({ b: `${a}` }), 6, 'word');
+// useCleanState((a: number, c: string) => ({ b: a + c, f: true }), 6, 'text');
+// useCleanState({ d: 5000 });
+// Should fail.
+// useCleanState((a: number) => ({b: a.toString(), q: 1}), 6, false);
+// useCleanState((a: boolean) => ({b: a.toString()}));
+// useCleanState((a: number, c?: string) => ({ b: `${a}` }), '6');
+// useCleanState((a: number, c?: string) => ({ b: `${a}` }));
+// useCleanState((a: number, c: string) => ({ b: a + c, f: true }), 6, 7);
+// useCleanState({ d: 5000 }, true);

package/build/classy/class.d.ts

@@ -1,13 +1,12 @@
-import type { ReactElement } from 'react';
-import type { ComponentInstanceConstructor } from './instance';
+import type { VoidFunctionComponent } from 'react';
+import type { TComponentClass } from './logic';
 import { ComponentInstance } from './instance';
-type Obj = Record<string, any>;
-type IComponentConstructor = ComponentInstanceConstructor<any, any, any> & typeof ClassComponent<any, any, any>;
-export declare class ClassComponent<TState extends Obj, TProps extends Obj, THooks extends Obj> extends ComponentInstance<TState, TProps, THooks> {
-    Render: () => ReactElement<any, any> | null;
-    static FC: <IComponentType extends IComponentConstructor>(this: IComponentType, _Component?: IComponentType) => (props: InstanceType<IComponentType>["props"]) => ReactElement<any, any> | null;
+type Extractor = <TComponent extends ClassComponent<object, object, object>>(this: TComponentClass<TComponent, typeof ClassComponent>, _Component?: TComponentClass<TComponent, typeof ClassComponent>) => VoidFunctionComponent;
+export declare class ClassComponent<TState extends object = EmptyObject, TProps extends object = EmptyObject, THooks extends object = EmptyObject> extends ComponentInstance<TState, TProps, THooks> {
+    Render: VoidFunctionComponent<{}>;
+    static renderAs: 'component' | 'template';
+    static FC: Extractor;
 }
-type AnyFunction = (...args: any) => any;
 interface HookWrapperProps<THookFunction extends AnyFunction> {
     hook: THookFunction;
     argumentsList: Parameters<THookFunction>;

package/build/classy/class.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Use = exports.ClassComponent = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var instance_1 = require("./instance");
 /** Provide more useful stack traces for otherwise non-specific function names. */
@@ -31,37 +32,56 @@ var setFunctionName = function (func, newName) {
         console.warn(error);
     }
 };
+// eslint-enable no-use-before-define
 var ClassComponent = /** @class */ (function (_super) {
     __extends(ClassComponent, _super);
     function ClassComponent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    ClassComponent.renderAs = 'component';
     ClassComponent.FC = function FC(_Component) {
-        var Component = _Component || this;
+        var Component = _Component !== null && _Component !== void 0 ? _Component : this;
         var isClassComponentType = Component.prototype instanceof ClassComponent;
         if (!Component.getInitialState || !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()`).');
-        var Wrapper = function (props) {
+        var Wrapper = function (props, context) {
             var Render = (0, instance_1.useInstance)(Component, props).Render;
             // Add calling component name to Render function name in stack traces.
-            (0, react_1.useMemo)(function () { return setFunctionName(Render, "".concat(Component.name, " > Render")); }, [Render]);
+            (0, react_1.useMemo)(function () { return setFunctionName(Render, "".concat(Component.name, ".Render")); }, [Render]);
             /**
-             * It may be impossible to set state within the body of Render,
+             * Normally a component can update it's own state in the "before-render" stage to
+             * skip DOM updates and trigger and immediate rerun of the rendering with the new state.
+             *
+             * It may be impossible to do this within the body of Render, if we call it as JSX here,
              * since technically, the Wrapper component owns the state and not the Render component.
-             * Consider using this as a function call instead of JSX to avoid that.
-             */
-            // if (instance.renderAs === 'component') return <Render />;
-            return Render();
+             * Using it as JSX establishes a component boundary, and React will throw an error if we try to set
+             * state in the "before-render" stage of `Render`, since it will be attempting to update it's parent's
+             * state (i.e `Wrapper` component) rather than it's own state.
+             *
+             * Consider using this as a function call instead of JSX to avoid that. This way, we avoid
+             * establishing a component boundary between `Wrapper` and `Render`.
+             *
+             * Although, since beforeRender() is called earlier from a hook, this is probably
+             * a non-issue. It will only force users to move their logic into `beforeRender` instead
+             * of doing it directly in `Render`. This might mean cleaner Render functions,
+             * so there's probably no real value lost if we keep the component boundary.
+            **/
+            if (Component.renderAs === 'template')
+                return Render({}, context);
+            // With the existence of useContext(),
+            // what exactly does the context argument to FunctionComponent represent?
+            // Do we need to find a way to pass that context value to <Render /> here?
+            return (0, jsx_runtime_1.jsx)(Render, {});
         };
         // Include calling component name in wrapper function name on stack traces.
-        setFunctionName(Wrapper, "".concat(Component.name, " > ").concat(Wrapper.name));
+        setFunctionName(Wrapper, "".concat(Component.name, " < Wrapper")); // ${Wrapper.name}
         return Wrapper;
     };
     return ClassComponent;
 }(instance_1.ComponentInstance));
 exports.ClassComponent = ClassComponent;
-var Use = function (_a) {
-    var useGenericHook = _a.hook, argumentsList = _a.argumentsList, onUpdate = _a.onUpdate;
+var Use = function (params) {
+    var useGenericHook = params.hook, argumentsList = params.argumentsList, onUpdate = params.onUpdate;
     var output = useGenericHook.apply(void 0, argumentsList);
     (0, react_1.useEffect)(function () {
         onUpdate(output);

package/build/classy/instance.d.ts

@@ -1,9 +1,8 @@
-import type { ComponentLogicConstructor } from './logic';
+import type { TComponentClass } from './logic';
 import { ComponentLogic } from './logic';
-type Obj = Record<string, any>;
 type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction>;
 export declare const noOp: () => void;
-export declare class ComponentInstance<TState extends Obj = {}, TProps extends Obj = {}, THooks extends Obj = {}> extends ComponentLogic<TState, TProps, THooks> {
+export declare class ComponentInstance<TState extends object = EmptyObject, TProps extends object = EmptyObject, THooks extends object = EmptyObject> extends ComponentLogic<TState, TProps, THooks> {
     /**
      * Runs only _before_ first render, i.e before the component instance is mounted.
      * Useful for logic that is involved in determining what to render.
@@ -48,10 +47,17 @@ export declare class ComponentInstance<TState extends Obj = {}, TProps extends O
      */
     cleanUp: IVoidFunction;
 }
-type ComponentClassBaseType<TState extends Obj = {}, TProps extends Obj = {}, THooks extends Obj = {}> = ComponentLogicConstructor<TState, TProps, THooks> & Constructor<ComponentInstance<TState, TProps, THooks>>;
-export interface ComponentInstanceConstructor<TState extends Obj = {}, TProps extends Obj = {}, THooks extends Obj = {}> extends ComponentClassBaseType<TState, TProps, THooks> {
-}
-type UseInstance = <TClass extends ComponentInstanceConstructor>(Class: TClass, props: InstanceType<TClass>['props']) => InstanceType<TClass>;
-export declare const useMountCallbacks: <TInstance extends ComponentInstance<any, any, any>>(instance: TInstance) => void;
+type UseInstance = <TClass extends ComponentInstance<object, object, object>>(Class: TComponentClass<TClass>, ...props: valueof<TClass['props']> extends never ? ([] | [EmptyObject] | [TClass['props']]) : [TClass['props']]) => TClass;
+/**
+ * To ensure successful type checking, the second parameter must be written with spread syntax.
+ * Likely because of the `exactOptionalPropertyTypes` config option turned on,
+ * and `UseInstance` using an empty tuple in its rest parameter type, attempting to simply
+ * retrieve the second argument directly causes an error when that argument is passed on to `useLogic`.
+ * But directly working with the rest array bypasses the problem. Also note that the issue persists even when
+ * the second param is given `{}` as a default follow to account for the empty tuple case. TypeScript
+ * just wants us to use the rest parameter explicitly by force.
+ */
 export declare const useInstance: UseInstance;
+type UseMountCallbacks = <TInstance extends ComponentInstance<any, any, any>>(instance: TInstance) => void;
+export declare const useMountCallbacks: UseMountCallbacks;
 export {};

package/build/classy/instance.js

@@ -14,8 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInstance = exports.useMountCallbacks = exports.ComponentInstance = exports.noOp = void 0;
+exports.useMountCallbacks = exports.useInstance = exports.ComponentInstance = exports.noOp = void 0;
 var react_1 = require("react");
 var state_1 = require("../base/state");
 var logic_1 = require("./logic");
@@ -74,6 +83,56 @@ var ComponentInstance = /** @class */ (function (_super) {
 }(logic_1.ComponentLogic));
 exports.ComponentInstance = ComponentInstance;
 ;
+/**
+ * To ensure successful type checking, the second parameter must be written with spread syntax.
+ * Likely because of the `exactOptionalPropertyTypes` config option turned on,
+ * and `UseInstance` using an empty tuple in its rest parameter type, attempting to simply
+ * retrieve the second argument directly causes an error when that argument is passed on to `useLogic`.
+ * But directly working with the rest array bypasses the problem. Also note that the issue persists even when
+ * the second param is given `{}` as a default follow to account for the empty tuple case. TypeScript
+ * just wants us to use the rest parameter explicitly by force.
+ */
+var useInstance = function (Component) {
+    var _a;
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args[_i - 1] = arguments[_i];
+    }
+    // useHooks.
+    var instance = logic_1.useLogic.apply(void 0, __spreadArray([Component], args, false)); // Must spread rest parameter, rather than passing a single `props` argument directly.
+    /**
+     * Argument of type '
+        * [
+                (valueof<TClass["props"]> extends never
+                    ? [] | [CEmptyObject]
+                    : [ TClass["props"] ]
+                )[0]
+            ]
+        ' is not assignable to parameter of type '
+            valueof<TClass["props"]> extends never
+                ? [] | [CEmptyObject]       // | [undefined]
+                : [ TClass["props"] ]
+        '
+     */
+    // beforeMount, onMount, cleanUp.
+    // eslint-disable-next-line no-use-before-define
+    (0, exports.useMountCallbacks)(instance);
+    // beforeRender.
+    (_a = instance.beforeRender) === null || _a === void 0 ? void 0 : _a.call(instance);
+    // onRender.
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var cleanupAfterRerender = (_a = instance.onRender) === null || _a === void 0 ? void 0 : _a.call(instance);
+        return function () {
+            if (typeof cleanupAfterRerender === 'function')
+                cleanupAfterRerender();
+            else
+                cleanupAfterRerender === null || cleanupAfterRerender === void 0 ? void 0 : cleanupAfterRerender.then(function (cleanUp) { return cleanUp === null || cleanUp === void 0 ? void 0 : cleanUp(); });
+        };
+    });
+    return instance;
+};
+exports.useInstance = useInstance;
 var useMountCallbacks = function (instance) {
     var _a;
     var mounted = (0, state_1.useMountState)();
@@ -99,25 +158,3 @@ var useMountCallbacks = function (instance) {
     }, []);
 };
 exports.useMountCallbacks = useMountCallbacks;
-var useInstance = function (Component, props) {
-    var _a;
-    // useHooks.
-    var instance = (0, logic_1.useLogic)(Component, props);
-    // beforeMount, onMount, cleanUp.
-    (0, exports.useMountCallbacks)(instance);
-    // beforeRender.
-    (_a = instance.beforeRender) === null || _a === void 0 ? void 0 : _a.call(instance);
-    // onRender.
-    (0, react_1.useEffect)(function () {
-        var _a;
-        var cleanupAfterRerender = (_a = instance.onRender) === null || _a === void 0 ? void 0 : _a.call(instance);
-        return function () {
-            if (typeof cleanupAfterRerender === 'function')
-                cleanupAfterRerender();
-            else
-                cleanupAfterRerender === null || cleanupAfterRerender === void 0 ? void 0 : cleanupAfterRerender.then(function (cleanUp) { return cleanUp === null || cleanUp === void 0 ? void 0 : cleanUp(); });
-        };
-    });
-    return instance;
-};
-exports.useInstance = useInstance;

package/build/classy/logic.d.ts

@@ -1,13 +1,22 @@
-import type { TCleanState } from '../base/state';
-export declare class ComponentLogic<TState extends object, TProps extends object, THooks extends object> {
+import type { TCleanState, TState } from '../base/state';
+export declare class ComponentLogic<TState extends object = EmptyObject, TProps extends object = EmptyObject, THooks extends object = EmptyObject> {
     state: TCleanState<TState>;
     props: TProps;
     hooks: THooks;
+    static getInitialState: IComponentClass['getInitialState'];
     useHooks?: () => THooks;
 }
-export interface ComponentLogicConstructor<TState extends object, TProps extends object, THooks extends object> extends Constructor<ComponentLogic<TState, TProps, THooks>> {
-    getInitialState: (props?: TProps) => TState;
+type CnstPrm = ConstructorParameters<typeof ComponentLogic>;
+export interface IComponentClass<Instance extends ComponentLogic = ComponentLogic> {
+    new (...params: CnstPrm): Instance;
+    getInitialState: (props?: Instance['props']) => TState<Instance['state']>;
 }
-type UseLogic = <LogicClass extends ComponentLogicConstructor<{}, object, any>>(Methods: LogicClass, props?: InstanceType<LogicClass>['props']) => InstanceType<LogicClass>;
+export type ComponentClassStatics<Instance extends ComponentLogic<object, object, object>> = {
+    getInitialState: (props?: Instance['props']) => TState<Instance['state']>;
+};
+export type TComponentClass<Instance extends ComponentLogic<object, object, object>, Statics extends ComponentClassStatics<Instance> = ComponentClassStatics<Instance>, Params extends CnstPrm = CnstPrm> = Statics & Constructor<Instance, Params>;
+export interface IEmpty extends EmptyObject {
+}
+type UseLogic = <CLogic extends ComponentLogic<object, object, object>>(Methods: TComponentClass<CLogic>, ...props: valueof<CLogic['props']> extends never ? ([] | [EmptyObject] | [CLogic['props']]) : [CLogic['props']]) => CLogic;
 export declare const useLogic: UseLogic;
 export {};

package/build/classy/logic.js

@@ -1,4 +1,20 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = exports.ComponentLogic = void 0;
 var react_1 = require("react");
@@ -10,22 +26,42 @@ var ComponentLogic = /** @class */ (function () {
 }());
 exports.ComponentLogic = ComponentLogic;
 ;
+testing: {
+    var A = (_a = /** @class */ (function (_super) {
+            __extends(C, _super);
+            function C() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return C;
+        }(ComponentLogic)),
+        _a.getInitialState = function () { return ({}); },
+        _a);
+    A.getInitialState();
+}
+;
 var useLogic = function (Methods, props) {
-    var _a;
+    var _b;
     if (props === void 0) { props = {}; }
     var state = (0, state_1.useCleanState)(Methods.getInitialState, props);
-    // There's apparently a bug? with Typescript that pegs the return type of "new Methods()" to "ComponentLogic<{}, {}, {}>",
-    // completely ignoring the type specified for Methods in the function's type definition.
-    // `new Methods()` should return whatever the InstanceType of TClass is, as that is the type explicitly specified for Methods.
-    // Ignoring the specified type to gin up something else and then complain about it is quite weird.
-    // Regardless, even when `extends ComponentLogicConstructor<TState, TProps, THooks>` is specified using generics instead of a set type,
-    // the issue persists. Which is absurd since this should ensure that InstanceType<Class> should exactly match ComponentLogic<TState, TProps, THooks>
-    var methods = (0, react_1.useMemo)(function () {
+    var methods = (0, react_1.useRef)((0, react_1.useMemo)(function () {
         return new Methods();
-    }, []);
+    }, [])).current;
     methods.state = state;
     methods.props = props;
-    methods.hooks = ((_a = methods.useHooks) === null || _a === void 0 ? void 0 : _a.call(methods)) || {};
+    methods.hooks = ((_b = methods.useHooks) === null || _b === void 0 ? void 0 : _b.call(methods)) || {};
     return methods;
 };
 exports.useLogic = useLogic;
+testing: {
+    var a = { b: '' };
+    var MyComponentLogic = /** @class */ (function (_super) {
+        __extends(MyComponentLogic, _super);
+        function MyComponentLogic() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MyComponentLogic.getInitialState = function () { return ({}); };
+        return MyComponentLogic;
+    }(ComponentLogic));
+    ;
+    (0, exports.useLogic)(MyComponentLogic);
+}

package/build/globals.d.ts

@@ -1,56 +1,67 @@
-
-type Optional<
-			BaseType,
-			AllowNull extends boolean = true
-		> = (
-	AllowNull extends true
-		? BaseType | undefined | null
-		: BaseType | undefined
-)
-
-type Awaitable<Type> = Type | Promise<Type>;
-
-type Constructor<
-	TInstance extends any = any,
-	TParams extends any[] = never[]
-> = new (...args: TParams) => TInstance
-
-
 /**
+ * @file
+ * This file is an "Ambient declarations file". The types defined here are available globally.
+ * More info here: https://stackoverflow.com/a/73389225/985454
+ *
+ * Don't use `import` and `export` in this file directly! It breaks ambience.
+ * To import external types in an ambient declarations file (this file) use the following:
+ *
  * @example
- * ```js
- * const getNumber: AsyncFunction<number> = async () => {
- * 	return 5;
+ * declare type React = typeof import('react');
+ *
+ * To contribute ambient declarations from any file, even non-ambient ones, use this:
+ *
+ * @example
+ * declare global {
+ *   interface Window {
+ *     ethereum: any
+ *   }
  * }
- * ```
- */
-declare type AsyncFunction<
-	TReturnValue extends any = void,
-	Params extends any[] = never[]
-> = (...params: Params) => Promise<TReturnValue>
-
-/**
- * A function that takes no arguments and returns nothing.
- * Pass a type argument to set whether `async` and/or `sync` functions are allowed.
- */
-declare interface IVoidFunction<AsyncType extends 'async' | 'sync' | 'both' = 'both'> {
-	(): AsyncType extends 'async' ? Promise<void>
-		: AsyncType extends 'sync' ? void
-		: Promise<void> | void
-}
-
-declare type FunctionType = (...args: any) => any;
-
-
-declare interface Window {
-}
-
-declare namespace JSX {
-	interface IntrinsicElements {
-	}
-}
-
-declare namespace NodeJS {
-	interface ProcessEnv {
-	}
+**/
+/** */
+declare global {
+    type Optional<BaseType, AllowNull extends boolean = true> = (AllowNull extends true ? BaseType | undefined | null : BaseType | undefined);
+    type Awaitable<Type> = Type | Promise<Type>;
+    type Constructor<TInstance extends any = any, TParams extends any[] = never[]> = new (...args: TParams) => TInstance;
+    /**
+     * @example
+     * ```js
+     * const getNumber: AsyncFunction<number> = async () => {
+     * 	return 5;
+     * }
+     * ```
+     */
+    type AsyncFunction<TReturnValue extends any = void, Params extends any[] = never[]> = (...params: Params) => Promise<TReturnValue>;
+    /**
+     * A function that takes no arguments and returns nothing.
+     * Pass a type argument to set whether `async` and/or `sync` functions are allowed.
+     */
+    interface IVoidFunction<AsyncType extends 'async' | 'sync' | 'both' = 'both'> {
+        (): AsyncType extends 'async' ? Promise<void> : AsyncType extends 'sync' ? void : Promise<void> | void;
+    }
+    type AnyFunction = (...args: any) => any;
+    type FunctionType = AnyFunction;
+    type TFunction = AnyFunction;
+    interface Window {
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+        }
+    }
+    namespace NodeJS {
+        interface ProcessEnv {
+        }
+    }
+    type __FromPrivateHelpers = typeof import('./globals.private');
+    type TEmptyObject1 = {
+        ''?: never;
+    };
+    type TEmptyObject2 = Record<symbol, never>;
+    type EmptyObject = __FromPrivateHelpers['EmptyObject'];
+    type EmptyObject2 = __FromPrivateHelpers['EmptyObject2'];
+    type EmptyObject3 = __FromPrivateHelpers['EmptyObject3'];
+    type valueof<TObject> = TObject[keyof TObject];
+    interface T extends __FromPrivateHelpers {
+    }
 }
+export {};

package/build/globals.js

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * @file
+ * This file is an "Ambient declarations file". The types defined here are available globally.
+ * More info here: https://stackoverflow.com/a/73389225/985454
+ *
+ * Don't use `import` and `export` in this file directly! It breaks ambience.
+ * To import external types in an ambient declarations file (this file) use the following:
+ *
+ * @example
+ * declare type React = typeof import('react');
+ *
+ * To contribute ambient declarations from any file, even non-ambient ones, use this:
+ *
+ * @example
+ * declare global {
+ *   interface Window {
+ *     ethereum: any
+ *   }
+ * }
+**/
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/globals.private.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @file
+ * This file is created specifically to augment the declarations in
+ * [globals.d.ts]({@link ./globals.d.ts}).
+ *
+ * **You should not import this file directly.**
+ */
+/** */
+declare const UniqueSecretSymbolKey: unique symbol;
+declare class CEmptyObject {
+    [key: keyof any]: never;
+}
+declare class CEmptyObject2 {
+    [UniqueSecretSymbolKey]?: never;
+}
+declare class CEmptyObject3 {
+    /**
+     * It appears keys of the base `symbol` type are excluded from
+     * excess property checks. This is likely a bug in TypeScript.
+     * Even the "has no properties in common" error disappears if the
+     * value being placed into a variable has a key typed as `symbol`.
+     * This only applies to the base `symbol` type. Specifc `'unique symbol'`
+     * types are unaffected.
+     *
+     * @example
+     * // Consider the following object:
+     * const myUniqueSymbol = Symbol('lkjhgfc');
+     * let myObj = { [myUniqueSymbol]?: 'a string value' };
+     *
+     * // We can attempt to reassign `myObj` with the expectation that TS will
+     * // warn if any key other than `myUniqueSymbol` is used in the new object.
+     * // But this breaks in one specific scenario.
+     *
+     * // No excess property check when this is used as a key.
+     * // Error "no properties in common" also suppressed when this is used as a key.
+     * const differentBasicSymbol = Symbol('qwertiop[') as symbol;
+     * myObj = { [differentBasicSymbol]: 5 };
+     *
+     * // Errors emitted as expected when this is used as a key.
+     * const differentUniqueSymbol = Symbol('zxcvbnm');
+     * myObj = { [differentUniqueSymbol]: 5 };
+     */
+    [key: symbol]: never;
+}
+export declare const EmptyObject: CEmptyObject;
+export declare const EmptyObject2: CEmptyObject2;
+export declare const EmptyObject3: CEmptyObject3;
+export {};

package/build/globals.private.js

@@ -0,0 +1,40 @@
+"use strict";
+/**
+ * @file
+ * This file is created specifically to augment the declarations in
+ * [globals.d.ts]({@link ./globals.d.ts}).
+ *
+ * **You should not import this file directly.**
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyObject3 = exports.EmptyObject2 = exports.EmptyObject = void 0;
+/** */
+var UniqueSecretSymbolKey = Symbol('asdfghjkliuytrewqaxcvb,nb');
+var CEmptyObject = /** @class */ (function () {
+    function CEmptyObject() {
+    }
+    return CEmptyObject;
+}());
+var CEmptyObject2 = /** @class */ (function () {
+    function CEmptyObject2() {
+    }
+    return CEmptyObject2;
+}());
+var CEmptyObject3 = /** @class */ (function () {
+    function CEmptyObject3() {
+    }
+    return CEmptyObject3;
+}());
+exports.EmptyObject = new CEmptyObject();
+exports.EmptyObject2 = new CEmptyObject2();
+exports.EmptyObject3 = new CEmptyObject3();
+testing: {
+    var mySymbol = Symbol('asdfgh');
+    var tt = {
+    // [mySymbol]: '' as never,
+    // [UniqueSecretSymbolKey]: '',
+    // '': '',
+    };
+    var TT = new CEmptyObject();
+    TT = tt;
+}

package/build/tsconfig.json

@@ -28,10 +28,13 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"jsx": "react-jsx",
-		"strictNullChecks": true
+		"strictNullChecks": true,
+		"noImplicitAny": true,
+		"noUncheckedIndexedAccess": true,
+		"strictBindCallApply": true,
+		// "exactOptionalPropertyTypes": true
 	},
 	"include": [
-		"next-env.d.ts",
 		"**/*.ts",
 		"**/*.tsx"
 	],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleanweb/react",
-  "version": "1.0.11",
+  "version": "1.1.1-beta.0",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"
@@ -34,8 +34,17 @@
     "_": "",
     "prepublishOnly": "npm run build",
     "publish:patch": "npm version patch && npm publish",
+    "publish:minor": "npm version minor && npm publish",
+    "publish:major": "npm version major && npm publish",
+    "__": "/// Increment beta number for the current patch version. ///",
+    "publish:beta:current": "npm version prerelease --preid beta && npm publish --tag beta",
+    "___": "/// Create a beta.0 for a new patch/minor/major version ///",
+    "publish:beta:new-patch": "npm version prepatch --preid beta && npm publish --tag beta",
+    "publish:beta:new-minor": "npm version preminor --preid beta && npm publish --tag beta",
+    "publish:beta:new-major": "npm version premajor --preid beta && npm publish --tag beta",
+    "____": "",
     "//postpublish": "cd ./mirror-pkg && npm publish && cd ..",
-    "__": "",
+    "______": "",
     "test": "echo \"No tests ATM\""
   },
   "keywords": [
@@ -55,9 +64,16 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@types/node": "20.14.10",
     "@types/react": "^16",
+    "babel-preset-react-app": "^10.0.1",
     "copyfiles": "^2.4.1",
+    "eslint": "^9.15.0",
+    "eslint-plugin-jsdoc": "^50.5.0",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.12.0",
     "rimraf": "^6.0.1",
     "tsc-alias": "1.8.10",
     "typescript": "^5.6.2"