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

package/build/base/state/class.js

@@ -1,19 +1,10 @@
-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);
-};
-import { useState } from 'react';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CleanState = exports.CleanStateBase = void 0;
+const react_1 = require("react");
 /** @internal */
-var CleanStateBase = /** @class */ (function () {
-    function CleanStateBase(initialState) {
-        var _this = this;
+class CleanStateBase {
+    constructor(initialState) {
         this._values_ = {};
         this._setters_ = {};
         /**
@@ -69,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);
@@ -86,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 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 = 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);
-            });
+    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);
         });
-    };
-    return CleanStateBase;
-}());
-export { CleanStateBase };
+    });
+};
 ;
 /** @internal */
-export var CleanState = (CleanStateBase);
+exports.CleanState = (CleanStateBase);

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

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

package/build/base/state/hooks.js

@@ -1,5 +1,8 @@
-import { useMemo, useRef } from 'react';
-import { CleanState } from './class';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCleanState = void 0;
+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
@@ -10,21 +13,18 @@ import { CleanState } from './class';
  *
  * Discussion: [When to `useCleanState`](https://cleanjsweb.github.io/neat-react/documents/Clean_State.html).
  */
-export var useCleanState = function (_initialState) {
-    var props = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        props[_i - 1] = arguments[_i];
-    }
-    var initialState = typeof _initialState === 'function'
-        ? 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 = useRef(useMemo(function () {
-        return new CleanState(initialState);
+    const cleanState = (0, react_1.useRef)((0, react_1.useMemo)(() => {
+        return new class_1.CleanState(initialState);
     }, [])).current;
-    CleanState.update.call(cleanState);
+    class_1.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);

package/build/base/state/index.js

@@ -1,7 +1,35 @@
+"use strict";
 /**
  * @module CleanState
  */
-import '../../globals';
-export { CleanState } from './class';
-export { useCleanState } from './hooks';
-export * as MergedState from '../../base/merged-state';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MergedState = exports.useCleanState = exports.CleanState = void 0;
+require("../../globals");
+var class_1 = require("./class");
+Object.defineProperty(exports, "CleanState", { enumerable: true, get: function () { return class_1.CleanState; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useCleanState", { enumerable: true, get: function () { return hooks_1.useCleanState; } });
+exports.MergedState = __importStar(require("../../base/merged-state"));

package/build/classy/class/index.js

@@ -1,22 +1,11 @@
-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 __());
-    };
-})();
-import { useMemo } from 'react';
-import { ComponentInstance, useInstance } from '../instance';
-import { setFunctionName } from './utils/function-name';
-import { useRerender } from '../../helpers/rerender';
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Component = exports.ClassComponent = void 0;
+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
@@ -34,10 +23,9 @@ import { useRerender } from '../../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.
@@ -74,107 +62,99 @@ var ClassComponent = /** @class */ (function (_super) {
          * }
          * ```
          */
-        _this.template = function () { return null; };
-        return _this;
+        this.template = () => null;
     }
     /**
      * A standard React function component that works like any
      * other function component and can be rendered as JSX.
      * \`<MyComponent.FC />\`
      */
-    ClassComponent._FC = function (props) {
-        var _this = this;
-        var instance = useInstance(this, props);
-        var template = instance.template, templateContext = instance.templateContext;
-        var _forceUpdate;
+    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 = 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`.
+        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.
-        useMemo(function () {
-            setFunctionName(template, "".concat(_this.name, ".template"));
+        (0, react_1.useMemo)(() => {
+            (0, function_name_1.setFunctionName)(template, `${this.name}.template`);
         }, [template]);
         return template(templateContext);
-    };
+    }
     ;
-    Object.defineProperty(ClassComponent, "FC", {
-        get: function () {
-            if (this._BoundFC)
-                return this._BoundFC;
-            return this._BoundFC = this._FC.bind(this);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    var _a;
-    _a = ClassComponent;
-    (function () {
-        setFunctionName(_a._FC, "$".concat(_a.name, "$"));
-    })();
+    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()`).');
     /*************************************
-     *   Function Component Extractor    *
+     *    Begin Function Component       *
     **************************************/
-    /**
-     * 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) {
-        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 = 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 = 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.
-            useMemo(function () {
-                setFunctionName(template, "".concat(Component.name, ".template"));
-            }, [template]);
-            return template(templateContext);
-        };
-        /**************************************
-        *   👆🏼 End Function Component         *
-        **************************************/
-        setFunctionName(Wrapper, "$".concat(Component.name, "$"));
-        return Object.assign(Wrapper, properties);
+    /** 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);
     };
-    /**
-     * A standard React function component that works like any
-     * other function component and can be rendered as JSX.
-     * \`<MyComponent.RC />\`
-     */
-    ClassComponent.RC = _a.extract();
-    return ClassComponent;
-}(ComponentInstance));
-export { ClassComponent };
-export { ClassComponent as Component };
+    /**************************************
+    *   👆🏼 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/types/extractor.js

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

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

@@ -1,5 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFunctionName = void 0;
 /** Provide more useful stack traces for otherwise non-specific function names. */
-export 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', {
@@ -11,3 +14,4 @@ export var setFunctionName = function (func, newName) {
         console.warn(error);
     }
 };
+exports.setFunctionName = setFunctionName;

package/build/classy/index.js

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