@cleanweb/oore 2.0.0-alpha.15 → 2.0.0-alpha.18

package/build/base/state/class.js

@@ -1,22 +1,10 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CleanState = exports.CleanStateBase = void 0;
-var react_1 = require("react");
+const react_1 = require("react");
 /** @internal */
-var CleanStateBase = /** @class */ (function () {
-    function CleanStateBase(initialState) {
-        var _this = this;
+class CleanStateBase {
+    constructor(initialState) {
         this._values_ = {};
         this._setters_ = {};
         /**
@@ -72,10 +60,10 @@ var CleanStateBase = /** @class */ (function () {
          *     </>;
          * };
          */
-        this.putMany = function (newValues) {
-            Object.entries(newValues).forEach(function (entry) {
-                var _a = entry, key = _a[0], value = _a[1];
-                _this.put[key](value);
+        this.putMany = (newValues) => {
+            Object.entries(newValues).forEach((entry) => {
+                const [key, value] = entry;
+                this.put[key](value);
             });
         };
         this.reservedKeys = Object.keys(this);
@@ -89,64 +77,53 @@ var CleanStateBase = /** @class */ (function () {
          * and they will always be processed in a consistent order during rerenders.
          */
         this.valueKeys = Object.keys(initialState);
-        this._initialValues_ = __assign({}, initialState);
-        this.valueKeys.forEach(function (key) {
-            if (_this.reservedKeys.includes(key))
-                throw new Error("The name \"".concat(key, "\" is reserved by CleanState and cannot be used to index state variables. Please use a different key."));
-            var self = _this;
-            Object.defineProperty(_this, key, {
-                get: function () {
+        this._initialValues_ = Object.assign({}, initialState);
+        this.valueKeys.forEach((key) => {
+            if (this.reservedKeys.includes(key))
+                throw new Error(`The name "${key}" is reserved by CleanState and cannot be used to index state variables. Please use a different key.`);
+            const self = this;
+            Object.defineProperty(this, key, {
+                get() {
                     return self._values_[key];
                 },
-                set: function (value) {
+                set(value) {
                     self._setters_[key](value);
                 },
                 enumerable: true,
             });
         });
     }
-    Object.defineProperty(CleanStateBase.prototype, "put", {
-        get: function () {
-            return __assign({}, this._setters_);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CleanStateBase.prototype, "initialState", {
-        get: function () {
-            return __assign({}, this._initialValues_);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CleanStateBase.update = function update() {
-        var _this = this;
-        if (!(this instanceof 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:
-         * > By following this rule, you ensure that Hooks are called in the same order each time a component renders.
-         * > That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
-         * To resolve this, we're calling `useState` via an alias `retrieveState`.
-         * Bypassing this rule is safe here because `useCleanState` is a special case,
-         * and it guarantees that the same useState calls will be made on every render in the exact same order.
-         * Therefore, it is safe to silence the linters, and required for this implementation to work smoothly.
-         */
-        var retrieveState = react_1.useState;
-        this.valueKeys.forEach(function (key) {
-            var _a;
-            // @todo Make state updates accessible immediately. Use state.staged to access the scheduled updates.
-            var setter;
-            _a = retrieveState(_this.initialState[key]), _this._values_[key] = _a[0], setter = _a[1];
-            _this._setters_[key] = (function (valueOrCallback) {
-                // this._staged_[key] = value;
-                setter(valueOrCallback);
-            });
-        });
-    };
-    return CleanStateBase;
-}());
+    get put() {
+        return Object.assign({}, this._setters_);
+    }
+    get initialState() {
+        return Object.assign({}, this._initialValues_);
+    }
+}
 exports.CleanStateBase = CleanStateBase;
+CleanStateBase.update = function update() {
+    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:
+     * > By following this rule, you ensure that Hooks are called in the same order each time a component renders.
+     * > That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
+     * To resolve this, we're calling `useState` via an alias `retrieveState`.
+     * Bypassing this rule is safe here because `useCleanState` is a special case,
+     * and it guarantees that the same useState calls will be made on every render in the exact same order.
+     * Therefore, it is safe to silence the linters, and required for this implementation to work smoothly.
+     */
+    const retrieveState = react_1.useState;
+    this.valueKeys.forEach((key) => {
+        // @todo Make state updates accessible immediately. Use state.staged to access the scheduled updates.
+        let setter;
+        [this._values_[key], setter] = retrieveState(this.initialState[key]);
+        this._setters_[key] = ((valueOrCallback) => {
+            // this._staged_[key] = value;
+            setter(valueOrCallback);
+        });
+    });
+};
 ;
 /** @internal */
 exports.CleanState = (CleanStateBase);

package/build/base/state/hooks.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCleanState = void 0;
-var react_1 = require("react");
-var class_1 = require("./class");
+const react_1 = require("react");
+const class_1 = require("./class");
 /**
  * Creates a state object, which includes the provided values,
  * as well as helper methods for updating those values and automatically
@@ -13,16 +13,12 @@ var class_1 = require("./class");
  *
  * Discussion: [When to `useCleanState`](https://cleanjsweb.github.io/neat-react/documents/Clean_State.html).
  */
-var useCleanState = function (_initialState) {
-    var props = [];
-    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); }, [])
+const useCleanState = (_initialState, ...props) => {
+    const initialState = typeof _initialState === 'function'
+        ? (0, react_1.useMemo)(() => _initialState(...props), [])
         : _initialState;
     ;
-    var cleanState = (0, react_1.useRef)((0, react_1.useMemo)(function () {
+    const cleanState = (0, react_1.useRef)((0, react_1.useMemo)(() => {
         return new class_1.CleanState(initialState);
     }, [])).current;
     class_1.CleanState.update.call(cleanState);

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

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { TPropsBase } from '../logic';
 import type { Extractor } from './types/extractor';
 import { ComponentInstance } from '../instance';
@@ -65,6 +66,14 @@ export declare class ClassComponent<TProps extends TPropsBase = null> extends Co
      * Note that the callback argument is currently not supported.
      */
     readonly forceUpdate: VoidFunction;
+    /**
+     * A standard React function component that works like any
+     * other function component and can be rendered as JSX.
+     * \`<MyComponent.FC />\`
+     */
+    static _FC<T extends typeof ClassComponent>(this: T, props: InstanceType<T>['props']): JSX.Element | null;
+    static _BoundFC: typeof this._FC | undefined;
+    static get FC(): typeof ClassComponent._FC;
     /*************************************
      *   Function Component Extractor    *
     **************************************/
@@ -92,8 +101,12 @@ export declare class ClassComponent<TProps extends TPropsBase = null> extends Co
      * export default Button.RC;
      */
     static readonly extract: Extractor;
-    /** @see {@link ClassComponent.extract} */
-    static readonly FC: Extractor;
+    /**
+     * A standard React function component that works like any
+     * other function component and can be rendered as JSX.
+     * \`<MyComponent.RC />\`
+     */
+    static readonly RC: React.VoidFunctionComponent<object | EmptyObject>;
 }
 export { ClassComponent as Component };
 /** /

package/build/classy/class/index.js

@@ -1,25 +1,11 @@
 "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.Component = exports.ClassComponent = void 0;
-var react_1 = require("react");
-var instance_1 = require("../instance");
-var function_name_1 = require("./utils/function-name");
-var rerender_1 = require("../../helpers/rerender");
+const react_1 = require("react");
+const instance_1 = require("../instance");
+const function_name_1 = require("./utils/function-name");
+const rerender_1 = require("../../helpers/rerender");
 /**
  * @summary
  * A modern class component for React that is fully compatible with
@@ -37,10 +23,9 @@ var rerender_1 = require("../../helpers/rerender");
  * making it easier to migrate older class components to the newer hooks-based system
  * with little to no changes to their existing semantics/implementation.
  */
-var ClassComponent = /** @class */ (function (_super) {
-    __extends(ClassComponent, _super);
-    function ClassComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+class ClassComponent extends instance_1.ComponentInstance {
+    constructor() {
+        super(...arguments);
         /**
          * Analogous to {@link React.Component.render}. A function that returns
          * your component's JSX template.
@@ -77,71 +62,99 @@ var ClassComponent = /** @class */ (function (_super) {
          * }
          * ```
          */
-        _this.template = function () { return null; };
-        return _this;
+        this.template = () => null;
     }
-    var _a;
-    _a = ClassComponent;
-    /*************************************
-     *   Function Component Extractor    *
-    **************************************/
     /**
-     * Extract a Function Component (FC) which can be used to render
-     * your ClassComponent just like any other React component.
-     *
-     * Each JSX reference to the returned component will render with
-     * a separate instance of your class.
-     *
-     * So you only need to call `YourClassComponent.extract()` (or `*.FC()`) once,
-     * then use the returned function component as many times as you need.
-     *
-     * It is recommended to store this returned value as a static member of
-     * your ClassComponent. While this value may be given any name, the name
-     * RC (for "React Component") is the recommended convention.
-     *
-     * @example <caption>Calling `extract` in your ClassComponent</caption>
-     * class Button extends ClassComponent {
-     *     static readonly RC = this.extract(); // or this.FC();
-     *     // Because of the static keyword, `this` here refers to the class itself, same as calling `Button.extract()`.
-     * }
-     *
-     * // Render with `<Button.RC />`, or export RC to use the component in other files.
-     * export default Button.RC;
+     * A standard React function component that works like any
+     * other function component and can be rendered as JSX.
+     * \`<MyComponent.FC />\`
      */
-    ClassComponent.extract = function FC(_Component, properties) {
-        var Component = _Component !== null && _Component !== void 0 ? _Component : this;
-        var isClassComponentType = Component.prototype instanceof _a;
-        if (!isClassComponentType)
-            throw new Error('Attempted to initialize ClassComponent with invalid Class type. Either pass, as an argument to FC(), a class that extends ClassComponent (e.g `export FC(MyComponent);`), or ensure FC() is called as a method on a ClassComponent constructor type (e.g `export MyComponent.FC()`).');
-        /*************************************
-         *    Begin Function Component       *
-        **************************************/
-        /** A class-based, React function component created with `@cleanweb/oore`. {@link ClassComponent} */
-        var Wrapper = function (props) {
-            var instance = (0, instance_1.useInstance)(Component, props);
-            var template = instance.template, templateContext = instance.templateContext;
-            var _forceUpdate;
-            // @ts-expect-error (Cannot assign to 'forceUpdate' because it is a read-only property.ts(2540))
-            instance.forceUpdate = (_forceUpdate = (0, rerender_1.useRerender)() // Moved this to separate line to allow TS errors. Use proxy local variable to regain some type checking for the assignment to `instance.forceUpdate`.
-            );
-            // Add calling component name to template function name in stack traces.
-            (0, react_1.useMemo)(function () {
-                (0, function_name_1.setFunctionName)(template, "".concat(Component.name, ".template"));
-            }, [template]);
-            return template(templateContext);
-        };
-        /**************************************
-        *   👆🏼 End Function Component         *
-        **************************************/
-        (0, function_name_1.setFunctionName)(Wrapper, "$".concat(Component.name, "$"));
-        return Object.assign(Wrapper, properties);
-    };
-    /** @see {@link ClassComponent.extract} */
-    ClassComponent.FC = _a.extract;
-    return ClassComponent;
-}(instance_1.ComponentInstance));
+    static _FC(props) {
+        const instance = (0, instance_1.useInstance)(this, props);
+        const { template, templateContext } = instance;
+        let _forceUpdate;
+        // @ts-expect-error (Cannot assign to 'forceUpdate' because it is a read-only property.ts(2540))
+        instance.forceUpdate = (_forceUpdate = (0, rerender_1.useRerender)() // Moved this to separate line to allow TS errors. Use proxy local variable to regain some type checking for the assignment to `instance.forceUpdate`.
+        );
+        // Add calling component name to template function name in stack traces.
+        (0, react_1.useMemo)(() => {
+            (0, function_name_1.setFunctionName)(template, `${this.name}.template`);
+        }, [template]);
+        return template(templateContext);
+    }
+    ;
+    static get FC() {
+        if (this._BoundFC)
+            return this._BoundFC;
+        return this._BoundFC = this._FC.bind(this);
+    }
+}
 exports.ClassComponent = ClassComponent;
 exports.Component = ClassComponent;
+_a = ClassComponent;
+(() => {
+    (0, function_name_1.setFunctionName)(_a._FC, `$${_a.name}$`);
+})();
+/*************************************
+ *   Function Component Extractor    *
+**************************************/
+/**
+ * Extract a Function Component (FC) which can be used to render
+ * your ClassComponent just like any other React component.
+ *
+ * Each JSX reference to the returned component will render with
+ * a separate instance of your class.
+ *
+ * So you only need to call `YourClassComponent.extract()` (or `*.FC()`) once,
+ * then use the returned function component as many times as you need.
+ *
+ * It is recommended to store this returned value as a static member of
+ * your ClassComponent. While this value may be given any name, the name
+ * RC (for "React Component") is the recommended convention.
+ *
+ * @example <caption>Calling `extract` in your ClassComponent</caption>
+ * class Button extends ClassComponent {
+ *     static readonly RC = this.extract(); // or this.FC();
+ *     // Because of the static keyword, `this` here refers to the class itself, same as calling `Button.extract()`.
+ * }
+ *
+ * // Render with `<Button.RC />`, or export RC to use the component in other files.
+ * export default Button.RC;
+ */
+ClassComponent.extract = function FC(_Component, properties) {
+    const Component = _Component !== null && _Component !== void 0 ? _Component : this;
+    const isClassComponentType = Component.prototype instanceof _a;
+    if (!isClassComponentType)
+        throw new Error('Attempted to initialize ClassComponent with invalid Class type. Either pass, as an argument to FC(), a class that extends ClassComponent (e.g `export FC(MyComponent);`), or ensure FC() is called as a method on a ClassComponent constructor type (e.g `export MyComponent.FC()`).');
+    /*************************************
+     *    Begin Function Component       *
+    **************************************/
+    /** A class-based, React function component created with `@cleanweb/oore`. {@link ClassComponent} */
+    const Wrapper = (props) => {
+        const instance = (0, instance_1.useInstance)(Component, props);
+        const { template, templateContext } = instance;
+        let _forceUpdate;
+        // @ts-expect-error (Cannot assign to 'forceUpdate' because it is a read-only property.ts(2540))
+        instance.forceUpdate = (_forceUpdate = (0, rerender_1.useRerender)() // Moved this to separate line to allow TS errors. Use proxy local variable to regain some type checking for the assignment to `instance.forceUpdate`.
+        );
+        // Add calling component name to template function name in stack traces.
+        (0, react_1.useMemo)(() => {
+            (0, function_name_1.setFunctionName)(template, `${Component.name}.template`);
+        }, [template]);
+        return template(templateContext);
+    };
+    /**************************************
+    *   👆🏼 End Function Component         *
+    **************************************/
+    (0, function_name_1.setFunctionName)(Wrapper, `$${Component.name}$`);
+    return Object.assign(Wrapper, properties);
+};
+/**
+ * A standard React function component that works like any
+ * other function component and can be rendered as JSX.
+ * \`<MyComponent.RC />\`
+ */
+ClassComponent.RC = _a.extract();
 /** /
 testing: {
     const a: object = {b: ''};

package/build/classy/class/utils/function-name.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setFunctionName = void 0;
 /** Provide more useful stack traces for otherwise non-specific function names. */
-var setFunctionName = function (func, newName) {
+const setFunctionName = (func, newName) => {
     try {
         // Must use try block, as `name` is not configurable on older browsers, and may yield a TypeError.
         Object.defineProperty(func, 'name', {

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

@@ -1,7 +1,7 @@
 import type { UseInstance } from './types/hook';
 import type { TPropsBase } from '../../classy/logic';
 import { ComponentLogic } from '../../classy/logic';
-type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction>;
+type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction | 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,

package/build/classy/instance/index.js

@@ -1,25 +1,10 @@
 "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 __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInstance = exports.ComponentInstance = void 0;
-var react_1 = require("react");
-var logic_1 = require("../../classy/logic");
-var mount_callbacks_1 = require("./mount-callbacks");
-var helpers_1 = require("../../helpers");
+const react_1 = require("react");
+const logic_1 = require("../../classy/logic");
+const mount_callbacks_1 = require("./mount-callbacks");
+const helpers_1 = require("../../helpers");
 /**
  * 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,
@@ -27,10 +12,9 @@ var helpers_1 = require("../../helpers");
  *
  * @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;
+class ComponentInstance extends logic_1.ComponentLogic {
+    constructor() {
+        super(...arguments);
         /**
          * Runs only _before_ the first render,
          * i.e before the component instance is mounted.
@@ -41,7 +25,7 @@ var ComponentInstance = /** @class */ (function (_super) {
          * 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 details}.
          */
-        _this.beforeMount = function () { };
+        this.beforeMount = () => { };
         /**
          * Runs only **_after_** the first render, i.e after the component instance is mounted.
          * It is ignored on subsequent rerenders.
@@ -53,7 +37,7 @@ var ComponentInstance = /** @class */ (function (_super) {
          *
          * Uses `useEffect()` under the hood.
          */
-        _this.onMount = function () { return helpers_1.noOp; };
+        this.onMount = () => helpers_1.noOp;
         /**
          * Runs _before_ every render cycle, including the first.
          * Useful for logic that is involved in determining what to render.
@@ -69,7 +53,7 @@ var ComponentInstance = /** @class */ (function (_super) {
          * 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 details}.
          */
-        _this.beforeRender = function () { return ({}); };
+        this.beforeRender = () => ({});
         /**
          * Runs **_after_** every render cycle, including the first.
          *
@@ -80,55 +64,49 @@ var ComponentInstance = /** @class */ (function (_super) {
          *
          * @returns A cleanup function.
          */
-        _this.onRender = function () { return helpers_1.noOp; };
+        this.onRender = () => helpers_1.noOp;
         /**
          * Runs when the component is unmounted.
          * It is called _after_ the cleanup function returned by onMount.
          */
-        _this.cleanUp = function () { };
-        return _this;
+        this.cleanUp = () => { };
     }
-    Object.defineProperty(ComponentInstance.prototype, "templateContext", {
-        /**
-         * Exposes the object returned by {@link beforeRender}.
-         *
-         * This is useful when you need to render some state or props
-         * in a transformed format. Put the transformation logic
-         * in {@link beforeRender} to the keep the main
-         * function component body clean.
-         *
-         * ******
-         *
-         * @example <caption>Using `templateContext`.</caption>
-         *
-         * ```tsx
-         * class MyComponentLogic extends ComponentInstance {
-         *     beforeRender = () => {
-         *         const title = `My Site | ${this.props.title}`;
-         *         return { title };
-         *     }
-         * }
-         * const MyComponent = (props) => {
-         *     const self = useInstance(MyComponentLogic, props);
-         *     const { templateContext: ctx, state } = self;
-         *
-         *     return (
-         *         <h1>
-         *             {ctx.title}
-         *         </h1>
-         *         <p>{props.description}</p>
-         *     );
-         * }
-         * ```
-         */
-        get: function () {
-            return this._templateContext;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return ComponentInstance;
-}(logic_1.ComponentLogic));
+    /**
+     * Exposes the object returned by {@link beforeRender}.
+     *
+     * This is useful when you need to render some state or props
+     * in a transformed format. Put the transformation logic
+     * in {@link beforeRender} to the keep the main
+     * function component body clean.
+     *
+     * ******
+     *
+     * @example <caption>Using `templateContext`.</caption>
+     *
+     * ```tsx
+     * class MyComponentLogic extends ComponentInstance {
+     *     beforeRender = () => {
+     *         const title = `My Site | ${this.props.title}`;
+     *         return { title };
+     *     }
+     * }
+     * const MyComponent = (props) => {
+     *     const self = useInstance(MyComponentLogic, props);
+     *     const { templateContext: ctx, state } = self;
+     *
+     *     return (
+     *         <h1>
+     *             {ctx.title}
+     *         </h1>
+     *         <p>{props.description}</p>
+     *     );
+     * }
+     * ```
+     */
+    get templateContext() {
+        return this._templateContext;
+    }
+}
 exports.ComponentInstance = ComponentInstance;
 ;
 /**
@@ -144,15 +122,11 @@ exports.ComponentInstance = ComponentInstance;
  *
  * The provided class should be a subclass of {@link ComponentInstance}.
  */
-var useInstance = function () {
+const useInstance = (...args) => {
     var _a;
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    var Component = args[0], _b = args[1], props = _b === void 0 ? {} : _b;
+    const [Component, props = {}] = args;
     // useHooks.
-    var instance = (0, logic_1.useLogic)(Component, props);
+    const instance = (0, logic_1.useLogic)(Component, props);
     // beforeMount, onMount, cleanUp.
     (0, mount_callbacks_1.useMountCallbacks)(instance);
     // beforeRender.
@@ -160,20 +134,21 @@ var useInstance = function () {
      * A proxy variable to allow typechecking of the assignment
      * to `self.templateContext` despite the need for "readonly" error suppression.
      */
-    var _templateContextProxy_;
+    let _templateContextProxy_;
     // @ts-expect-error Assigning to a readonly property.
     instance._templateContext = (_templateContextProxy_ = (_a = instance.beforeRender) === null || _a === void 0 ? void 0 : _a.call(instance));
     // onRender.
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         var _a;
-        var cleanupAfterRerender = (_a = instance.onRender) === null || _a === void 0 ? void 0 : _a.call(instance);
-        return function () {
+        const cleanupAfterRerender = (_a = instance.onRender) === null || _a === void 0 ? void 0 : _a.call(instance);
+        return () => {
             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(); });
+                cleanupAfterRerender === null || cleanupAfterRerender === void 0 ? void 0 : cleanupAfterRerender.then((cleanUp) => cleanUp === null || cleanUp === void 0 ? void 0 : cleanUp());
         };
     });
+    // class FormValues<TValues> extends BrowserMemStore<TValues> {}
     return instance;
 };
 exports.useInstance = useInstance;