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

package/build/_cjs/classy/class/index.js

@@ -1,176 +0,0 @@
-"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/index.js");
-const function_name_1 = require("./utils/function-name.js");
-const rerender_1 = require("../../helpers/rerender.js");
-/**
- * @summary
- * A modern class component for React that is fully compatible with
- * React Hooks and all of React's latest features.
- *
- * It is a superset of {@link ComponentInstance} that allows defining your
- * component's JSX template directly inside the class.
- *
- * @remarks
- * In essence, this is a class wrapper around an underlying function component.
- * It acts as syntactic sugar, allowing you to create a regular function
- * component, while writing in an object-oriented format.
- *
- * This is designed to closely resemble the old {@link React.Component} class,
- * making it easier to migrate older class components to the newer hooks-based system
- * with little to no changes to their existing semantics/implementation.
- */
-class ClassComponent extends instance_1.ComponentInstance {
-    constructor() {
-        super(...arguments);
-        /**
-         * Analogous to {@link React.Component.render}. A function that returns
-         * your component's JSX template.
-         *
-         * ******
-         *
-         * Ideally the template method should only be concerned with defining the HTML/JSX structure of
-         * your component's UI.
-         *
-         * If you need to transform some data for display,
-         * do so in [beforeRender]({@link ComponentInstance.beforeRender}),
-         * and return an object with transformed data that can be rendered directly.
-         *
-         * The returned object will be passed to your template method
-         * as a `context` object.
-         *
-         * ******
-         *
-         * @example Using a template function that returns JSX.
-         *
-         * ```tsx
-         * beforeRender = () => {
-         *     return {
-         *         title: `My Site | ${this.props.title}`,
-         *     };
-         * }
-         * template = (ctx) => {
-         *     return (
-         *         <h1>
-         *             {ctx.title}
-         *         </h1>
-         *         <p>{this.props.description}</p>
-         *     );
-         * }
-         * ```
-         */
-        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 = (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 === _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();`).');
-    /*************************************
-     *    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: ''};
-
-    type t = keyof typeof a;
-
-    class MyComponentLogic extends ClassComponent<{a: ''}> {
-        getInitialState = () => ({a: '' as const});
-        // a = () => this.hooks.a = '';
-
-        useHooks = () => {
-            this.state.a;
-        };
-    };
-
-    const Template = MyComponentLogic.FC();
-}/**/

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

@@ -1,5 +0,0 @@
-import type { VoidFunctionComponent } from 'react';
-import type { ClassComponent } from '../index.js';
-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/_cjs/classy/class/types/extractor.js

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

package/build/_cjs/classy/class/utils/function-name.d.ts

@@ -1,2 +0,0 @@
-/** Provide more useful stack traces for otherwise non-specific function names. */
-export declare const setFunctionName: (func: FunctionType, newName: string) => void;

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

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

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

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

package/build/_cjs/classy/index.js

@@ -1,19 +0,0 @@
-"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/index.js"), exports);
-__exportStar(require("./instance/index.js"), exports);
-__exportStar(require("./class/index.js"), exports);

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

@@ -1,144 +0,0 @@
-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>;
-/**
- * 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,
- * a simpler alternative to the imperative approach with `useEffect` and/or `useMemo`.
- *
- * @see https://github.com/cleanjsweb/neat-react#lifecycle-useinstance
- */
-export declare class ComponentInstance<TProps extends TPropsBase = null> extends ComponentLogic<TProps> {
-    /**
-     * Runs only _before_ the first render,
-     * i.e before the component instance is mounted.
-     *
-     * It is ignored on subsequent rerenders.
-     * Uses `useMemo()` under the hood.
-     *
-     * 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}.
-     */
-    beforeMount: IVoidFunction;
-    /**
-     * Runs only **_after_** the first render, i.e after the component instance is mounted.
-     * It is ignored on subsequent rerenders.
-     *
-     * Should usually only be used for logic that does not directly take part in determining what to render, like
-     * logging and analytics.
-     *
-     * @returns A cleanup function.
-     *
-     * Uses `useEffect()` under the hood.
-     */
-    onMount: AsyncAllowedEffectCallback;
-    /**
-     * Stores the object returned by {@link beforeRender}.
-     * @see {@link templateContext}
-     */
-    private _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 templateContext(): ReturnType<this["beforeRender"]>;
-    /**
-     * Runs _before_ every render cycle, including the first.
-     * Useful for logic that is involved in determining what to render.
-     *
-     * It runs in the same way as logic placed directly into the
-     * function component body preceding the return statement.
-     *
-     * This is the ideal place to transform data for display.
-     * Return the transformed data in an object, and the object will
-     * availble as [`self.templateContext`]({@link templateContext})
-     * for use in your JSX template.
-     *
-     * 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}.
-     */
-    beforeRender: () => any;
-    /**
-     * Runs **_after_** every render cycle, including the first.
-     *
-     * Should usually only be used for logic that does not directly take part in determining what to render,
-     * like logging and analytics.
-     *
-     * Uses `useEffect()` under the hood.
-     *
-     * @returns A cleanup function.
-     */
-    onRender: AsyncAllowedEffectCallback;
-    /**
-     * Runs when the component is unmounted.
-     * It is called _after_ the cleanup function returned by onMount.
-     */
-    cleanUp: IVoidFunction;
-}
-/**
- * Enables full separation of concerns between a React component's template
- * and all of the logic that drives it.
- *
- * Returns an object that fully represents a logical instance
- * of the rendered React component, with the exception of the JSX template itself.
- *
- * This means that all of your component's logic and lifecycle handlers
- * can be externalized from the function component itself,
- * and defined in a separate class.
- *
- * The provided class should be a subclass of {@link ComponentInstance}.
- */
-export declare const useInstance: UseInstance;
-export {};
-/** /
-testing: {
-    class A extends ComponentInstance<EmptyObject> {
-        getInitialState = (p?: object) => ({putan: ''});
-        // k = this.props.o
-        am = this.state['_initialValues_'];
-        k = this.am.putan;
-
-        beforeRender = () => ({g: ''});
-
-        useHooks = () => {
-            return {j: 9};
-        };
-    }
-
-    const a = useInstance(A, {});
-    a.am;
-
-    // a.props['o'];
-    type bbbb = A['state'];
-    type ttt = bbbb['put'];
-}
-/**/

package/build/_cjs/classy/instance/index.js

@@ -1,177 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInstance = exports.ComponentInstance = void 0;
-const react_1 = require("react");
-const logic_1 = require("../../classy/logic/index.js");
-const mount_callbacks_1 = require("./mount-callbacks.js");
-const helpers_1 = require("../../helpers/index.js");
-/**
- * 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,
- * a simpler alternative to the imperative approach with `useEffect` and/or `useMemo`.
- *
- * @see https://github.com/cleanjsweb/neat-react#lifecycle-useinstance
- */
-class ComponentInstance extends logic_1.ComponentLogic {
-    constructor() {
-        super(...arguments);
-        /**
-         * Runs only _before_ the first render,
-         * i.e before the component instance is mounted.
-         *
-         * It is ignored on subsequent rerenders.
-         * Uses `useMemo()` under the hood.
-         *
-         * 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 = () => { };
-        /**
-         * Runs only **_after_** the first render, i.e after the component instance is mounted.
-         * It is ignored on subsequent rerenders.
-         *
-         * Should usually only be used for logic that does not directly take part in determining what to render, like
-         * logging and analytics.
-         *
-         * @returns A cleanup function.
-         *
-         * Uses `useEffect()` under the hood.
-         */
-        this.onMount = () => helpers_1.noOp;
-        /**
-         * Runs _before_ every render cycle, including the first.
-         * Useful for logic that is involved in determining what to render.
-         *
-         * It runs in the same way as logic placed directly into the
-         * function component body preceding the return statement.
-         *
-         * This is the ideal place to transform data for display.
-         * Return the transformed data in an object, and the object will
-         * availble as [`self.templateContext`]({@link templateContext})
-         * for use in your JSX template.
-         *
-         * 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 = () => ({});
-        /**
-         * Runs **_after_** every render cycle, including the first.
-         *
-         * Should usually only be used for logic that does not directly take part in determining what to render,
-         * like logging and analytics.
-         *
-         * Uses `useEffect()` under the hood.
-         *
-         * @returns A cleanup function.
-         */
-        this.onRender = () => helpers_1.noOp;
-        /**
-         * Runs when the component is unmounted.
-         * It is called _after_ the cleanup function returned by onMount.
-         */
-        this.cleanUp = () => { };
-    }
-    /**
-     * 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;
-;
-/**
- * Enables full separation of concerns between a React component's template
- * and all of the logic that drives it.
- *
- * Returns an object that fully represents a logical instance
- * of the rendered React component, with the exception of the JSX template itself.
- *
- * This means that all of your component's logic and lifecycle handlers
- * can be externalized from the function component itself,
- * and defined in a separate class.
- *
- * The provided class should be a subclass of {@link ComponentInstance}.
- */
-const useInstance = (...args) => {
-    var _a;
-    const [Component, props = {}] = args;
-    // useHooks.
-    const instance = (0, logic_1.useLogic)(Component, props);
-    // beforeMount, onMount, cleanUp.
-    (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_;
-    // @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)(() => {
-        var _a;
-        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((cleanUp) => 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> {
-        getInitialState = (p?: object) => ({putan: ''});
-        // k = this.props.o
-        am = this.state['_initialValues_'];
-        k = this.am.putan;
-
-        beforeRender = () => ({g: ''});
-
-        useHooks = () => {
-            return {j: 9};
-        };
-    }
-
-    const a = useInstance(A, {});
-    a.am;
-
-    // a.props['o'];
-    type bbbb = A['state'];
-    type ttt = bbbb['put'];
-}
-/**/

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

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

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

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

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

@@ -1,13 +0,0 @@
-import { ComponentInstance } from '../index.js';
-type UIClassParam = typeof ComponentInstance<NonNullable<any>>;
-type UIProplessClassParam = typeof ComponentInstance<null>;
-export type UseInstance = {
-    <Class extends UIProplessClassParam>(Methods: Class): InstanceType<Class>;
-    <Class extends UIClassParam>(Methods: Class, props: InstanceType<Class>['props']): InstanceType<Class>;
-};
-export type UIParams = [
-    Class: typeof ComponentInstance<any>,
-    props?: object
-];
-export type UIReturn = ComponentInstance<any>;
-export {};

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

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