@cleanweb/oore 2.0.0-alpha.34 → 2.0.0-alpha.36

package/build/classy/class/index.js

@@ -1,8 +1,25 @@
-var _a;
-import { useMemo } from 'react';
-import { ComponentInstance, useInstance } from '../instance/index.js';
-import { setFunctionName } from './utils/function-name.js';
-import { useRerender } from '../../helpers/rerender.js';
+"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.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");
 /**
  * @summary
  * A modern class component for React that is fully compatible with
@@ -20,9 +37,10 @@ import { useRerender } from '../../helpers/rerender.js';
  * making it easier to migrate older class components to the newer hooks-based system
  * with little to no changes to their existing semantics/implementation.
  */
-export class ClassComponent extends ComponentInstance {
-    constructor() {
-        super(...arguments);
+var ClassComponent = /** @class */ (function (_super) {
+    __extends(ClassComponent, _super);
+    function ClassComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         /**
          * Analogous to {@link React.Component.render}. A function that returns
          * your component's JSX template.
@@ -59,100 +77,71 @@ export class ClassComponent extends ComponentInstance {
          * }
          * ```
          */
-        this.template = () => null;
-    }
-    /**
-     * A standard React function component that works like any
-     * other function component and can be rendered as JSX.
-     * \`<MyComponent.FC />\`
-     */
-    static _FC(props) {
-        const instance = 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`.
-        );
-        // Add calling component name to template function name in stack traces.
-        useMemo(() => {
-            setFunctionName(template, `${this.name}.template`);
-        }, [template]);
-        return template(templateContext);
+        _this.template = function () { return null; };
+        return _this;
     }
-    ;
-    static get FC() {
-        if (this._BoundFC)
-            return this._BoundFC;
-        return this._BoundFC = this._FC.bind(this);
-    }
-}
-_a = ClassComponent;
-(() => {
-    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 === _a
-        || Component.prototype instanceof _a
-        || _a.isPrototypeOf(Component));
-    if (!isClassComponentType)
-        throw new Error('Attempted to initialize `ClassComponent` with an invalid Class type. Either call `extract()` with a class argument that extends ClassComponent (e.g `export default extract(MyComponent);`), or ensure `extract()` is called as a method on a ClassComponent constructor type (e.g `export default MyComponent.extract();`).');
+    var _a;
+    _a = ClassComponent;
     /*************************************
-     *    Begin Function Component       *
+     *   Function Component Extractor    *
     **************************************/
-    /** A class-based, React function component created with `@cleanweb/oore`. {@link ClassComponent} */
-    const Wrapper = (props) => {
-        const instance = 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 = 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(() => {
-            setFunctionName(template, `${Component.name}.template`);
-        }, [template]);
-        return template(templateContext);
+    /**
+     * 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 = (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);
     };
-    /**************************************
-    *   👆🏼 End Function Component         *
-    **************************************/
-    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();
-export { ClassComponent as Component };
+    /** @see {@link ClassComponent.extract} */
+    ClassComponent.FC = _a.extract;
+    return ClassComponent;
+}(instance_1.ComponentInstance));
+exports.ClassComponent = ClassComponent;
+exports.Component = ClassComponent;
 /** /
 testing: {
     const a: object = {b: ''};

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

@@ -1,5 +1,5 @@
 import type { VoidFunctionComponent } from 'react';
-import type { ClassComponent } from '../index.js';
+import type { ClassComponent } from '..';
 type BaseCCConstructor = typeof ClassComponent<object>;
 export type Extractor = <TComponentClass extends BaseCCConstructor, TProperties extends {} = {}>(this: TComponentClass, Component?: TComponentClass | null, properties?: TProperties) => NonNullable<TProperties> & VoidFunctionComponent<InstanceType<TComponentClass>['props']>;
 export {};

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 const setFunctionName = (func, newName) => {
+var setFunctionName = function (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 const setFunctionName = (func, newName) => {
         console.warn(error);
     }
 };
+exports.setFunctionName = setFunctionName;

package/build/classy/index.d.ts

@@ -1,3 +1,3 @@
-export * from './logic/index.js';
-export * from './instance/index.js';
-export * from './class/index.js';
+export * from './logic';
+export * from './instance';
+export * from './class';

package/build/classy/index.js

@@ -1,3 +1,19 @@
-export * from './logic/index.js';
-export * from './instance/index.js';
-export * from './class/index.js';
+"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);

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

@@ -1,7 +1,7 @@
-import type { UseInstance } from './types/hook.js';
-import type { TPropsBase } from '../../classy/logic/index.js';
-import { ComponentLogic } from '../../classy/logic/index.js';
-type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction | void>;
+import type { UseInstance } from './types/hook';
+import type { TPropsBase } from '../../classy/logic';
+import { ComponentLogic } from '../../classy/logic';
+type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction>;
 /**
  * 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,7 +1,25 @@
-import { useEffect } from 'react';
-import { ComponentLogic, useLogic } from '../../classy/logic/index.js';
-import { useMountCallbacks } from './mount-callbacks.js';
-import { noOp } from '../../helpers/index.js';
+"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");
 /**
  * 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,
@@ -9,9 +27,10 @@ import { noOp } from '../../helpers/index.js';
  *
  * @see https://github.com/cleanjsweb/neat-react#lifecycle-useinstance
  */
-export class ComponentInstance extends ComponentLogic {
-    constructor() {
-        super(...arguments);
+var ComponentInstance = /** @class */ (function (_super) {
+    __extends(ComponentInstance, _super);
+    function ComponentInstance() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         /**
          * Runs only _before_ the first render,
          * i.e before the component instance is mounted.
@@ -22,7 +41,7 @@ export class ComponentInstance extends ComponentLogic {
          * 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 = () => { };
+        _this.beforeMount = function () { };
         /**
          * Runs only **_after_** the first render, i.e after the component instance is mounted.
          * It is ignored on subsequent rerenders.
@@ -34,7 +53,7 @@ export class ComponentInstance extends ComponentLogic {
          *
          * Uses `useEffect()` under the hood.
          */
-        this.onMount = () => noOp;
+        _this.onMount = function () { return helpers_1.noOp; };
         /**
          * Runs _before_ every render cycle, including the first.
          * Useful for logic that is involved in determining what to render.
@@ -50,7 +69,7 @@ export class ComponentInstance extends ComponentLogic {
          * 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 = () => ({});
+        _this.beforeRender = function () { return ({}); };
         /**
          * Runs **_after_** every render cycle, including the first.
          *
@@ -61,49 +80,56 @@ export class ComponentInstance extends ComponentLogic {
          *
          * @returns A cleanup function.
          */
-        this.onRender = () => noOp;
+        _this.onRender = function () { return helpers_1.noOp; };
         /**
          * Runs when the component is unmounted.
          * It is called _after_ the cleanup function returned by onMount.
          */
-        this.cleanUp = () => { };
+        _this.cleanUp = function () { };
+        return _this;
     }
-    /**
-     * 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;
-    }
-}
+    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));
+exports.ComponentInstance = ComponentInstance;
 ;
 /**
  * Enables full separation of concerns between a React component's template
@@ -118,35 +144,39 @@ export class ComponentInstance extends ComponentLogic {
  *
  * The provided class should be a subclass of {@link ComponentInstance}.
  */
-export const useInstance = (...args) => {
+var useInstance = function () {
     var _a;
-    const [Component, props = {}] = args;
+    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;
     // useHooks.
-    const instance = useLogic(Component, props);
+    var instance = (0, logic_1.useLogic)(Component, props);
     // beforeMount, onMount, cleanUp.
-    useMountCallbacks(instance);
+    (0, mount_callbacks_1.useMountCallbacks)(instance);
     // beforeRender.
     /**
      * A proxy variable to allow typechecking of the assignment
      * to `self.templateContext` despite the need for "readonly" error suppression.
      */
-    let _templateContextProxy_;
+    var _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.
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         var _a;
-        const cleanupAfterRerender = (_a = instance.onRender) === null || _a === void 0 ? void 0 : _a.call(instance);
-        return () => {
+        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((cleanUp) => cleanUp === null || cleanUp === void 0 ? void 0 : cleanUp());
+                cleanupAfterRerender === null || cleanupAfterRerender === void 0 ? void 0 : cleanupAfterRerender.then(function (cleanUp) { return cleanUp === null || cleanUp === void 0 ? void 0 : cleanUp(); });
         };
     });
-    // class FormValues<TValues> extends BrowserMemStore<TValues> {}
     return instance;
 };
+exports.useInstance = useInstance;
 /** /
 testing: {
     class A extends ComponentInstance<EmptyObject> {

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

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

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

@@ -1,16 +1,19 @@
-import { useEffect } from 'react';
-import { useMountState } from '../../helpers/mount-state.js';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMountCallbacks = void 0;
+var react_1 = require("react");
+var mount_state_1 = require("../../helpers/mount-state");
 /** @internal */
-export const useMountCallbacks = (instance) => {
+var useMountCallbacks = function (instance) {
     var _a;
-    const isMounted = useMountState();
+    var isMounted = (0, mount_state_1.useMountState)();
     if (!isMounted())
         (_a = instance.beforeMount) === null || _a === void 0 ? void 0 : _a.call(instance);
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         var _a;
-        const mountHandlerCleanUp = (_a = instance.onMount) === null || _a === void 0 ? void 0 : _a.call(instance);
-        return () => {
-            const doCleanUp = (runMountCleaners) => {
+        var mountHandlerCleanUp = (_a = instance.onMount) === null || _a === void 0 ? void 0 : _a.call(instance);
+        return function () {
+            var doCleanUp = function (runMountCleaners) {
                 var _a;
                 runMountCleaners === null || runMountCleaners === void 0 ? void 0 : runMountCleaners();
                 (_a = instance.cleanUp) === null || _a === void 0 ? void 0 : _a.call(instance);
@@ -24,3 +27,4 @@ export const useMountCallbacks = (instance) => {
         };
     }, []);
 };
+exports.useMountCallbacks = useMountCallbacks;

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

@@ -1,4 +1,4 @@
-import { ComponentInstance } from '../index.js';
+import { ComponentInstance } from '..';
 type UIClassParam = typeof ComponentInstance<NonNullable<any>>;
 type UIProplessClassParam = typeof ComponentInstance<null>;
 export type UseInstance = {

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

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

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

@@ -1,5 +1,5 @@
-import type { TCleanState } from '../../base/state/index.js';
-import type { UseLogic } from './types/hook.js';
+import type { TCleanState } from '../../base/state';
+import type { UseLogic } from './types/hook';
 /**
  * The base type for the `props` type argument.
  *