@cleanweb/react 1.1.1-beta.8 → 2.0.1-beta.0

package/README.old.md

@@ -0,0 +1,342 @@
+# Structured & Cleaner React Function Components
+
+## Quick Start
+This package provides a suite of tools for writing cleaner React function components. It is particularly useful for larger components with lots of state variables and multiple closure functions that need to access those variables. The most likely use cases will use one of the three main exported members.
+
+> The following sections will use examples to demonstrate how each tool can be used. These example are intended to be read as a before and after comparison. They are all based on the same "before" code, which is shown below:
+
+
+### Our Sample React Function Component
+```jsx
+const Footer = (props) => {
+	const [state1, setState1] = useState(props.defaultValue);
+	const [state2, setState2] = useState();
+	const [label, setLabel] = useState('Click me');
+	const [submitted, setSubmitted] = useState(false);
+
+	const [store, updateStore] = useGlobalStore();
+
+	const { param } = props;
+
+
+	// Required to run once *before* the component mounts.
+	const paragraphs = useMemo(() => getValue(param), [param]);
+
+
+	/** @todo Use `useSyncExternalStore`. */
+	const subscribeToExternalDataSource = useCallback(() => {
+		externalDataSource.subscribe((data) => {
+			setLabel(data.label);
+		});
+	}, [setLabel]);
+
+	// Required to run once *after* the component mounts.
+	useEffect(subscribeToExternalDataSource, []);
+	useEffect(() => {
+		const onWindowResize = () => {};
+		window.addEventListener('resize', onWindowResize);
+
+		return () => {
+			window.removeEventListener('resize', onWindowResize);
+		};
+	}, []);
+
+	// Run *after* every render.
+	useEffect(() => {
+		doSomething();
+		return () => {};
+	})
+
+	const submit = useCallback(() => {
+		sendData(state1, state2);
+		setSubmitted(true);
+	}, [state1]); // Notice how `state2` above could easily be stale by the time the callback runs.
+
+
+	// Run before every render.
+	const text = `${label}, please.`;
+
+	return (
+		<footer>
+			{paragraphs ? paragraphs.map((copy) => (
+				<p>{copy}</p>
+			)) : null}
+
+			<button onClick={submit}>
+				{text}
+			</button>
+		</footer>
+	);
+};
+
+export default Footer;
+// Or use in JSX as `<Footer />`.
+```
+
+
+### A Cleaner State Management API
+The `useCleanState` hook provides a cleaner API for working with state, particularly in components with a relatively high number of state variables. It allows you to manage multiple state variables as a single unit. You will likely find this cleaner to work with than having multiple local variables for each state. The example below demonstrates the use of this hook.
+
+
+### Extracting and Structuring Component Logic
+The `useLogic` hook allows you to write your component's logic outside the function component's body, and helps you keep them all better organized. It also provides a much cleaner API for working with multiple state variables. Here's what a function component looks like with the `useLogic` hook.
+
+**Before**
+[See the "before" code above](#our-sample-react-function-component).
+
+**After**
+```jsx
+class FooterLogic {
+	static getInitialState = (props) => {
+		return {
+			state1: props.defaultValue,
+			state2: undefined,
+			label: 'Click me',
+			submitted: false,
+		};
+	};
+
+	subscribeToExternalDataSource = () => {
+		externalDataSource.subscribe((data) => {
+			this.state.label = data.label;
+		});
+	}
+
+	useHooks = () => {
+		const [store, updateStore] = useGlobalStore();
+		const { param } = this.props;
+
+		// Required to run once *before* the component mounts.
+		const paragraphs = useMemo(() => getValue(param), [param]);
+
+		// Required to run once *after* the component mounts.
+		useEffect(this.subscribeToExternalDataSource, []);
+		useEffect(() => {
+			const onWindowResize = () => {};
+			window.addEventListener('resize', onWindowResize);
+
+			return () => {
+				window.removeEventListener('resize', onWindowResize);
+			};
+		}, []);
+
+		// Run *after* every render.
+		useEffect(() => {
+			doSomething();
+			return () => {};
+		});
+
+		return {
+			store,
+			updateStore,
+			paragraphs,
+		};
+	};
+
+	submit = () => {
+		const { state1, state2 } = this.state;
+		sendData(state1, state2);
+		this.state.submitted = true;
+	}; // `state2` is never stale. All `state` and `props` references return the latest value. No extra steps required.
+}
+
+// Footer Template
+const Footer = (props) => {
+	const self = useLogic(FooterLogic, props);
+
+	const { paragraphs } = self.hooks;
+	const { state } = self;
+
+	// Run before every render.
+	const text = `${state.label}, please.`;
+
+	return (
+		<footer>
+			{paragraphs ? paragraphs.map((copy) => (
+				<p>{copy}</p>
+			)) : null}
+
+			<button onClick={self.submit}>
+				{text}
+			</button>
+		</footer>
+	);
+};
+
+export default Footer;
+// Or use in JSX as `<Footer />`.
+```
+
+The `useLogic` hook combines the functionality of two base hooks which can also be used directly. They are [`useCleanState`](https://cleanjsweb.github.io/neat-react/clean-state/index) and [`useMethods`](https://cleanjsweb.github.io/neat-react/methods/index). `useCleanState` can be used independently if you only want a cleaner state management API. `useMethods` is designed to be used together with `useCleanState`, but rather than calling both individually, you may find it more convenient to use `useLogic`, which combines both as well as the added functionality of the `useHooks` method.
+
+> It is possible to have multiple calls to `useLogic` in the same component. This allows your function component template to consume state and logic from multiple sources, or it can simply be used to group distinct pieces of related logic into separate classes.
+
+For a fuller discussion of how `useLogic` works, start at the [clean-state documentation](https://cleanjsweb.github.io/neat-react/clean-state/index).    
+For an API reference, see the [API reference](https://cleanjsweb.github.io/neat-react/logic/api).
+
+
+### Working With Lifecycle, and Migrating From a React.Component Class to a Function Component
+In addition to having cleaner and more structured component logic, you can also simplify the process of working with your component's lifecycle with the final two exported members. The `useInstance` hook builds on the functionality of `useLogic` and adds lifecyle methods to the class. This means the class can now be thought of as truly representing a single instance of a React component. The `ClassComponent` class extends this to its fullest by allowing you to write the function component itself as a method within the class, and removing the need to explicitly call `useInstance`.
+
+**Before**
+[See the "before" code above](#our-sample-react-function-component).
+
+**After**
+```jsx
+class Footer extends ClassComponent {
+	// Call the static method extract() to retrieve the renderer for your class.
+	// This is a function that you can render like any other function component.
+	// Each instance of the renderer in your component tree will create its own instance of the class.
+	static readonly RC = Button.extract();
+
+	static getInitialState = (props) => {
+		return {
+			state1: props.defaultValue,
+			state2: undefined,
+			label: 'Click me',
+			submitted: false,
+		};
+	};
+
+	useHooks = () => {
+		const [store, updateStore] = useGlobalStore();
+		return { store, updateStore };
+	}
+
+	/***************************
+	 *  New Lifecycle Methods  *
+	 ***************************/
+
+	beforeMount = () => {
+		this.paragraphs = getValue();
+	}
+
+	// Run after the component is mounted.
+	onMount = () => {
+		this.subscribeToExternalDataSource();
+		window.addEventListener('resize', this.onWindowResize);
+
+		// Return cleanup callback.
+		return () => {
+			window.removeEventListener('resize', this.onWindowResize);
+		};
+	}
+
+	beforeRender = () => {
+		this.text = `${label}, please.`;
+	}
+
+	// Run after every render.
+	onRender = () => {
+		doSomething();
+
+		// Return cleanup callback.
+		return () => {};
+	}
+
+	cleanUp = () => {
+		// Run some non-mount-related cleanup when the component dismounts.
+		// onMount (and onRender) returns its own cleanup function.
+	}
+
+	/***************************
+	 * [End] Lifecycle Methods *
+	 ***************************/
+
+	submit = () => {
+		// Methods are guaranteed to have access to the most recent state values.
+		const { state1, state2 } = this.state;
+
+		sendData(state1, state2);
+
+		// CleanState uses JavaScript's getters and setters, allowing you to assign state values directly.
+		// The effect is the same as if you called the setter function, which is available through `state.put.submitted(true)`.
+		this.state.submitted = true;
+	}
+
+	onWindowResize = () => {};
+
+	subscribeToExternalDataSource = () => {
+		const unsubscribe = externalDataSource.subscribe((data) => {
+			this.state.label = data.label;
+		});
+
+		return unsubscribe;
+	}
+
+	/** You can also separate out discreet chunks of your UI template. */
+	Paragraphs = () => {
+		if (!this.paragraphs) return null;
+
+		return this.paragraphs.map((content, index) => (
+			<p key={index}>
+				{content || this.state.label}
+			</p>
+		));
+	}
+
+	/** Button Template */
+	template = () => {
+		const { Paragraphs, submit, state } = this;
+
+		return (
+			<Fragment>
+				<Paragraphs />
+
+				{/* You can access the setter functions returned from useState through the state.put object. */}
+				{/* This is more convenient than the assignment approach if you need to pass a setter as a callback. */}
+				{/* Use state.putMany to set multiple values at once. It works just like setState in React.Component classes. */}
+				{/* e.g state.inputValue = 'foo', or state.put.inputValue('foo'), or state.putMany({ inputValue: 'foo' }) */}
+				<CustomInput setValue={state.put.inputValue} />
+
+				<button onClick={submit}>
+					{this.text}
+				</button>
+			</Fragment>
+		);
+	}
+}
+
+// Can also be used directly in JSX as `<Button.RC />`.
+export default Button.RC;
+```
+
+> If you would like to keep the actual function component separate and call `useInstance` directly, see the [`useInstance` docs](https://cleanjsweb.github.io/neat-react/instance/index) for more details and examples.
+
+At its core, any component you write with `ClassComponent` is still just a React function component, with some supporting logic around it. This has the added advantage of making it significantly easier to migrate class components written with `React.Component` to the newer hooks-based function components, while still maintaining the overall structure of a class component, and the advantages that the class component approach provided.
+
+For a fuller discussion of how this works, start at the [`useInstance` documentation](https://cleanjsweb.github.io/neat-react/instance/index).    
+For more details on the lifecycle methods and other API reference, see the [`ClassComponent` API docs](https://cleanjsweb.github.io/neat-react/class-component/api).
+
+### The `<Use>` Component
+If you only want to use hooks in your `React.Component` class without having to refactor anything, use the [`Use` component](https://cleanjsweb.github.io/neat-react/class-component/index#the-use-component).
+
+```jsx
+class Button extends React.Component {
+	handleGlobalStore = ([store, updateStore]) => {
+		this.setState({ userId: store.userId });
+		this.store = store;
+		this.updateStore = updateStore;
+	}
+
+	UseHooks = () => {
+		return <>
+			<Use hook={useGlobalStore}
+				onUpdate={handleGlobalStore}
+				argumentsList={[]}
+				key="useGlobalStore"
+			/>
+		</>;
+	}
+
+	render() {
+		const { UseHooks } = this;
+
+		return <>
+			<UseHooks />
+
+			<button>Click me</button>
+		</>;
+	}
+}
+```

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

@@ -1,3 +1,4 @@
+import '../globals';
 declare class MergedState<TState extends object> {
     static useRefresh<TState extends object>(this: MergedState<TState>): void;
     reservedKeys: string[];

package/build/base/merged-state.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMergedState = void 0;
+require("../globals");
 var react_1 = require("react");
 var MergedState = /** @class */ (function () {
     function MergedState(initialState) {
@@ -70,9 +71,9 @@ var MergedState = /** @class */ (function () {
     return MergedState;
 }());
 var useMergedState = function (initialState) {
-    var cleanState = (0, react_1.useMemo)(function () {
+    var cleanState = (0, react_1.useRef)((0, react_1.useMemo)(function () {
         return new MergedState(initialState);
-    }, []);
+    }, [])).current;
     MergedState.useRefresh.call(cleanState);
     return cleanState;
 };

package/build/base/methods.d.ts

@@ -1,8 +1,41 @@
-import type { TCleanState } from './state';
-export declare class ComponentMethods<TProps extends object, TState extends object> {
-    props: TProps;
-    state: TCleanState<TState>;
+import type { TCleanState, TStateData } from './state';
+/**
+ * Base class for a class that holds methods intended for use in a function component.
+ * These methods will have access to the components state and props via
+ * `this.state` and `this.props` respectively.
+ *
+ * Call the {@link useMethods} hook inside your function component to instantiate the class.
+ */
+export declare class ComponentMethods<TProps extends object = {}, TState extends TStateData | null = null> {
+    readonly props: TProps;
+    state: TState extends TStateData ? TCleanState<TState> : null;
 }
-type UseMethods = <Class extends typeof ComponentMethods<object, object>>(Methods: Class & Constructor<InstanceType<Class>>, props: InstanceType<Class>['props'], state: InstanceType<Class>['state']) => InstanceType<Class>;
-export declare const useMethods: UseMethods;
-export {};
+type UseMethods = {
+    <Class extends typeof ComponentMethods<object, object>>(Methods: Class & Constructor<InstanceType<Class>>, props: InstanceType<Class>['props'], state: InstanceType<Class>['state']): InstanceType<Class>;
+    <Class extends typeof ComponentMethods<object, null>>(Methods: Class & Constructor<InstanceType<Class>>, props: InstanceType<Class>['props'], state?: null): InstanceType<Class>;
+    <Class extends typeof ComponentMethods<HardEmptyObject, null>>(Methods: Class & Constructor<InstanceType<Class>>): InstanceType<Class>;
+};
+/**
+ * Returns an instance of the provided class,
+ * with the state and props arguments added as instance members.
+ *
+ * `state` must be an instance of `CleanState` created with {@link useCleanState}.
+ */
+declare const useMethods: UseMethods;
+export { useMethods };
+/** /testing: {
+    let a = async () => {
+        const a: object = {b: ''};
+
+        type t = keyof typeof a;
+
+        class MyMethods extends ComponentMethods<WeakEmptyObject, null> {
+            // static getInitialState = () => ({});
+        };
+
+        const { useCleanState } = (await import('./state.js'));
+
+        const self = useMethods(MyMethods, {});
+        self.state;
+    }
+}/**/

package/build/base/methods.js

@@ -1,58 +1,15 @@
 "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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMethods = exports.ComponentMethods = void 0;
+// Values
 var react_1 = require("react");
+/**
+ * Base class for a class that holds methods intended for use in a function component.
+ * These methods will have access to the components state and props via
+ * `this.state` and `this.props` respectively.
+ *
+ * Call the {@link useMethods} hook inside your function component to instantiate the class.
+ */
 var ComponentMethods = /** @class */ (function () {
     function ComponentMethods() {
     }
@@ -60,41 +17,48 @@ var ComponentMethods = /** @class */ (function () {
 }());
 exports.ComponentMethods = ComponentMethods;
 ;
-var useMethods = function (Methods, props, state) {
-    // @todo Switch to useRef. Vite HMR seems to sometimes reinitialize useMemo calls after a hot update,
-    // causing the instance to be unexpectedly recreated in the middle of the components lifecycle.
+/**
+ * Returns an instance of the provided class,
+ * with the state and props arguments added as instance members.
+ *
+ * `state` must be an instance of `CleanState` created with {@link useCleanState}.
+ */
+var useMethods = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var Methods = args[0], _a = args[1], props = _a === void 0 ? {} : _a, state = args[2];
+    // Vite HMR seems to sometimes reinitialize useMemo calls after a hot update,
+    // causing the instance to be unexpectedly recreated in the middle of the component's 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.
+    // @todo Provide a way for users to reflect updated methods code on the existing instance after HMR.
     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.props = props;
-    methods.state = state;
+    /** A proxy variable to allow typechecking of the assignment to methods.props despite the need for "readonly" error suppression. */
+    var _propsProxy_;
+    // @ts-expect-error
+    methods.props = (_propsProxy_ = props);
+    if (state)
+        methods.state = state;
     return methods;
 };
 exports.useMethods = useMethods;
-testing: {
-    var a = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var a, MyMethods, useCleanState, self;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    a = { b: '' };
-                    MyMethods = /** @class */ (function (_super) {
-                        __extends(MyMethods, _super);
-                        function MyMethods() {
-                            return _super !== null && _super.apply(this, arguments) || this;
-                        }
-                        return MyMethods;
-                    }(ComponentMethods));
-                    ;
-                    return [4 /*yield*/, import('./state.js')];
-                case 1:
-                    useCleanState = (_a.sent()).useCleanState;
-                    self = (0, exports.useMethods)(MyMethods, {}, useCleanState({}));
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-}
+/** /testing: {
+    let a = async () => {
+        const a: object = {b: ''};
+
+        type t = keyof typeof a;
+
+        class MyMethods extends ComponentMethods<WeakEmptyObject, null> {
+            // static getInitialState = () => ({});
+        };
+
+        const { useCleanState } = (await import('./state.js'));
+
+        const self = useMethods(MyMethods, {});
+        self.state;
+    }
+}/**/

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

@@ -0,0 +1,17 @@
+import { CleanStateBase } from './class';
+import { TCleanState } from './hook-types';
+export type TCleanStateBase = typeof CleanStateBase;
+export type TCleanStateBaseKeys = keyof TCleanStateBase;
+export type PutState<TState extends object> = {
+    [Key in keyof TState]: React.Dispatch<React.SetStateAction<TState[Key]>>;
+};
+export interface ICleanStateConstructor {
+    new <TState extends object>(...args: ConstructorParameters<typeof CleanStateBase>): TCleanState<TState>;
+}
+type T = {
+    new <TState extends object>(...args: ConstructorParameters<typeof CleanStateBase>): TCleanState<TState>;
+};
+export type ICleanStateClass = T & {
+    [Key in TCleanStateBaseKeys]: (typeof CleanStateBase)[Key];
+};
+export {};

package/build/base/state/class-types.js

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

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

@@ -0,0 +1,14 @@
+import { ICleanStateClass, ICleanStateConstructor, PutState } from './class-types';
+export declare class CleanStateBase<TState extends Record<string, any>> {
+    readonly reservedKeys: string[];
+    readonly valueKeys: string[];
+    private _values_;
+    private _initialValues_;
+    private _setters_;
+    constructor(initialState: TState);
+    static update: <TState_1 extends object>(this: CleanStateBase<TState_1>) => void;
+    get put(): PutState<TState>;
+    get initialState(): TState;
+    readonly putMany: (newValues: Partial<TState>) => void;
+}
+export declare const CleanState: ICleanStateConstructor & ICleanStateClass;

package/build/base/{state.js → state/class.js}

@@ -11,26 +11,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCleanState = exports.useMountState = void 0;
+exports.CleanState = exports.CleanStateBase = 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;
@@ -85,7 +67,7 @@ var CleanStateBase = /** @class */ (function () {
     });
     CleanStateBase.update = function update() {
         var _this = this;
-        if (!(this instanceof CleanState))
+        if (!(this instanceof exports.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:
@@ -115,39 +97,6 @@ var CleanStateBase = /** @class */ (function () {
     };
     return CleanStateBase;
 }());
+exports.CleanStateBase = CleanStateBase;
 ;
-var CleanState = CleanStateBase;
-var useCleanState = function (_initialState) {
-    var props = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        props[_i - 1] = arguments[_i];
-    }
-    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;
-// 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);
+exports.CleanState = CleanStateBase;