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

package/build/_cjs/helpers/use-component/types.d.ts

@@ -0,0 +1,22 @@
+interface HookWrapperProps<THookFunction extends AnyFunction> {
+    /**
+     * The React hook you which to consume.
+     * Render a separate instance of the `<Use />` component for each hook.
+     * You can also create a custom hook that combines multiple hooks,
+     * then use that wrapper hook with a single `<Use />` instance.
+     */
+    hook: THookFunction;
+    /**
+     * An array containing the list of arguments
+     * to be passed to your hook, in the right order.
+     */
+    argumentsList: Parameters<THookFunction>;
+    /**
+     * A callback that will be called with whatever value your hook returns.
+     * Use this to update your component's state with the value.
+     * This will allow your component to rerender whenever the hook returns a new value.
+     */
+    onUpdate: (output: ReturnType<THookFunction>) => void;
+}
+export type ClassComponentHookWrapper = <Hook extends AnyFunction>(props: HookWrapperProps<Hook>) => null;
+export {};

package/build/_cjs/helpers/use-component/types.js

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

package/build/_cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classy';
+export * from './base';
+export * from './helpers';

package/build/_cjs/index.js

@@ -0,0 +1,19 @@
+"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("./classy"), exports);
+__exportStar(require("./base"), exports);
+__exportStar(require("./helpers"), exports);

package/build/_cjs/slots/hook.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode, ReactPortal } from 'react';
+import type { IUseSlots, PotentialSlotComponent } from './types';
+export declare const isElementChild: (child: ReactNode) => child is ReactElement<any, any>;
+interface IGetSlotName {
+    (TargetComponent: PotentialSlotComponent, child?: ReactElement): string | undefined;
+}
+export declare const getComponentSlotName: IGetSlotName;
+export declare const isPortalChild: (child: ReactNode) => child is ReactPortal;
+/**
+ * Groups `children` prop into predefined slots.
+ *
+ * @returns A {@link TUseSlotsResult} array,
+ * which includes a `slotNodes` object that maps the keys from
+ * the predefined {@link Caller.slots} object to the corresponding
+ * React node(s) that were rendered for that slot.
+ *
+ * @see {@link SlotComponent} for more on how to use the returned slot nodes.
+ */
+export declare const useSlots: IUseSlots;
+export type { SlottedComponent, TSlotsRecord, SlotComponent, PotentialSlotComponent, } from './types';

package/build/_cjs/slots/hook.js

@@ -0,0 +1,143 @@
+"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 __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.useSlots = exports.isPortalChild = exports.getComponentSlotName = exports.isElementChild = void 0;
+const errors_1 = require("../helpers/errors");
+const react_1 = __importStar(require("react"));
+const isElementChild = (child) => {
+    if (child && typeof child === 'object' && 'type' in child) {
+        return true;
+    }
+    return false;
+};
+exports.isElementChild = isElementChild;
+const getComponentSlotName = (TargetComponent, child) => {
+    if (child) {
+        const keyTypes = ['string', 'number', 'symbol'];
+        const slotName = child.props['data-slot-name'];
+        if (keyTypes.includes(typeof slotName)) {
+            return slotName;
+        }
+    }
+    if (typeof TargetComponent === 'string') {
+        return TargetComponent;
+    }
+    else if ('slotName' in TargetComponent) {
+        return TargetComponent.slotName;
+    }
+    else if ('displayName' in TargetComponent) {
+        return TargetComponent.displayName;
+    }
+    return undefined;
+};
+exports.getComponentSlotName = getComponentSlotName;
+const isPortalChild = (child) => {
+    return (!!child
+        && typeof child === 'object'
+        && 'children' in child);
+};
+exports.isPortalChild = isPortalChild;
+/**
+ * Groups `children` prop into predefined slots.
+ *
+ * @returns A {@link TUseSlotsResult} array,
+ * which includes a `slotNodes` object that maps the keys from
+ * the predefined {@link Caller.slots} object to the corresponding
+ * React node(s) that were rendered for that slot.
+ *
+ * @see {@link SlotComponent} for more on how to use the returned slot nodes.
+ */
+const useSlots = (children, Caller) => {
+    const slotsAliasLookup = (0, react_1.useMemo)(() => {
+        const entries = Object.entries(Caller.Slots);
+        const aliasLookup = {};
+        entries.forEach(([alias, RegisteredSlotComponent]) => {
+            const slotName = (0, exports.getComponentSlotName)(RegisteredSlotComponent);
+            if (!slotName) {
+                (0, errors_1.throwDevError)(`A registered slot component did not have a slot name. All components registered as slots must either be a string tag-name or a React component with either "slotName" or "displayName". The affected component was: ${RegisteredSlotComponent}`);
+                return;
+            }
+            aliasLookup[slotName] = alias;
+        });
+        return aliasLookup;
+    }, [Caller.Slots]);
+    // @todo Expose original source order of `children` with respect to slot aliases.
+    const result = (0, react_1.useMemo)(() => {
+        var _a;
+        const slotNodes = {};
+        const unmatchedChildren = [];
+        const invalidChildren = [];
+        const requiredSlotAliases = [
+            ...((_a = Caller.requiredSlotAliases) !== null && _a !== void 0 ? _a : [])
+        ];
+        react_1.default.Children.forEach(children, (_child) => {
+            var _a;
+            const child = _child;
+            if (!child) {
+                invalidChildren.push(child);
+                return;
+            }
+            if (!react_1.default.isValidElement(child)) {
+                console.warn(`Invalid node found in JSX children while parsing slots. Got: "${child}".`);
+                invalidChildren.push(child);
+                return;
+            }
+            ;
+            // @todo Check for fragment
+            if (!(0, exports.isElementChild)(child)) {
+                unmatchedChildren.push(child);
+                return;
+            }
+            const slotAlias = (() => {
+                var _a;
+                const slotName = (0, exports.getComponentSlotName)(child.type, child);
+                return slotName ? (_a = slotsAliasLookup[slotName]) !== null && _a !== void 0 ? _a : null : null;
+            })();
+            if (slotAlias) {
+                if (typeof Caller.Slots[slotAlias] !== 'string') {
+                    if ((_a = Caller.Slots[slotAlias]) === null || _a === void 0 ? void 0 : _a.isRequiredSlot) {
+                        requiredSlotAliases.push(slotAlias);
+                    }
+                }
+                if (slotNodes[slotAlias]) {
+                    slotNodes[slotAlias].push(child);
+                }
+                else {
+                    slotNodes[slotAlias] = [child];
+                }
+            }
+            else
+                unmatchedChildren.push(child);
+        });
+        requiredSlotAliases.forEach((slotAlias) => {
+            if (!slotNodes[slotAlias]) {
+                (0, errors_1.throwDevError)(`Missing required slot "${String(slotAlias)}".`);
+            }
+        });
+        return [slotNodes, unmatchedChildren, invalidChildren];
+    }, [children]);
+    return result;
+};
+exports.useSlots = useSlots;

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

@@ -0,0 +1 @@
+export * from './hook';

package/build/_cjs/slots/index.js

@@ -0,0 +1,17 @@
+"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("./hook"), exports);

package/build/_cjs/slots/types.d.ts

@@ -0,0 +1,131 @@
+import type { ReactElement, ReactNode, ComponentType, ReactPortal, JSX } from 'react';
+/** @todo ComponentType force children to be ReactNode, but custom components can have any children type. */
+type JSXTagLike = string | keyof JSX.IntrinsicElements | ComponentType<any>;
+/** This fixes overly narrow T type used by React's ComponentProps type. */
+export type ComponentProps<T extends JSXTagLike> = (T extends ComponentType<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {});
+export type TSlotName = keyof any;
+export type TSlotAlias = keyof any;
+/**
+ * A map of slot aliases to actual {@link SlotComponent}s.
+ *
+ * The `useSlots` hook will create a corresponding key for
+ * each alias in this record to hold any `ReactNode`s rendered for that slot.
+ */
+export type TSlotsRecord<TKey extends TSlotAlias = TSlotAlias> = {
+    [Key in TKey]: SlotComponent<string | ComponentType<any>>;
+};
+export type DisplayNamedComponent<TComponent extends ComponentType<any> = ComponentType<any>, TName extends string = string> = TComponent & {
+    displayName: TName;
+};
+interface ISlotConfig<TName> {
+    slotName: TName;
+    /**
+     * @deprecated The SlottedComponent should be responsible for indicating which slots it requires.
+     * Individual slot components may be reused by multiple slotted components with varying requirements.
+     */
+    isRequiredSlot?: boolean;
+}
+/**
+ * A child component used to insert content into a specific slot in the parent component.
+ * This can either be a string, or a React component with a `slotName` property.
+ *
+ * > `displayName` is no longer supported as a fallback for `slotName`.
+ *
+ * ### Strings
+ * For strings, they are treated by React a native tags. This lets you use custom strings
+ * as if you are rendering a custom Web Component, or simply handle specific HTML tags in a specific way.
+ *
+ * If using a custom string, you will want to handle it in the parent component by simply forwarding the slot's
+ * props to an actual element of your choice.
+ *
+ * So consumers may pass the following as `children`.
+ * ```jsx
+ * <option-slot>Click</option-slot>
+ * ```
+ * and you can map that to
+ * ```jsx
+ * <button
+ *     {...slotNodes.Option[0].props}
+ *     type="button"
+ * />
+ * ```
+ *
+ * ### React Components
+ * For slot components that are actual React components, the parent can simply
+ * render the slot node directly.
+ *
+ * So consumers may pass the following as `children`.
+ * ```jsx
+ * <Parent.Slots.Content>
+ *     Some awesome content.
+ * </Parent.Slots.Content>
+ * ```
+ * and you can map that to
+ * ```jsx
+ * return <>
+ *     <h1>Title</h1>
+ *     {slotNodes.Content}
+ *     <footer>Powered by oore</footer>
+ * </>
+ * ```
+ *
+ * This means `Parent.Slots.Content` must be defined as a proper React component
+ * and is solely responsible for doing something with the `"Some awesome content."`
+ * which was passed into it as children.
+ *
+ * This is unlike the string version where the parent component
+ * extracts the props passed to the slot and handles
+ * what the slot actually renders.
+ */
+export type SlotComponent<TComponent extends JSXTagLike = ComponentType<any>, TName extends TSlotName = TSlotName> = (TComponent extends string ? TComponent : TComponent & ISlotConfig<TName>);
+/**
+ * A parent component which accepts content that can be grouped into predefined slots.
+ * By convention, it should have a `slots` property which is a {@link TSlotsRecord}.
+ *
+ * This allows consumers access the predefined slot components
+ * directly from the parent component itself,
+ * through an alias that is easy to remember.
+ */
+export type SlottedComponent<TOwner extends object = ComponentType<any>, TSlots extends TSlotsRecord = TSlotsRecord> = TOwner & {
+    Slots: TSlots;
+    requiredSlotAliases?: Array<keyof TSlots>;
+};
+export type TypedNode<P, T extends JSXTagLike> = (ReactElement<P, T> | (ReactElement<P, T> & ReactPortal));
+export type TSlotNode<TSlotted extends SlottedComponent, Key extends keyof TSlotted['Slots'] = keyof TSlotted['Slots']> = (TypedNode<ComponentProps<TSlotted['Slots'][Key]>, TSlotted['Slots'][Key]>);
+/**
+ * A record of slot aliases mapped to the corresponding `ReactNode`(s)
+ * to be rendered for that slot.
+ */
+export type TSlotNodes<TSlotted extends SlottedComponent> = {
+    [Key in keyof TSlotted['Slots']]?: Array<TSlotNode<TSlotted, Key>>;
+};
+export type TUseSlotsResult<TSlotted extends SlottedComponent> = Readonly<[
+    /**
+     * A record of slot aliases to their corresponding React nodes.
+     * Each alias maps to an array of one or more React nodes that were passed
+     * as children for that slot.
+     *
+     * If a slot was not rendered in `children`, it's alias will be `undefined` in this object.
+     */
+    slotNodes: TSlotNodes<TSlotted>,
+    /**
+     * Valid React nodes passed as children which did not match any of the
+     * predefined slots.
+     */
+    unmatchedChildren: ReactNode[],
+    /**
+     * Items included in `children` which are not valid React nodes.
+     */
+    invalidChildren: any[]
+]>;
+export interface IUseSlots {
+    <TSlotted extends SlottedComponent>(
+    /**
+     * Your component's `children` prop.
+     * The nodes it contains will be categorized and
+     * grouped according to the predefined {@link slotComponents}.
+     */
+    children: ReactNode, Caller: TSlotted): TUseSlotsResult<TSlotted>;
+}
+export type PotentialSlotComponent = string | SlotComponent | ComponentType<any>;
+export {};

package/build/_cjs/slots/types.js

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

package/build/base/index.js

@@ -1,3 +1,19 @@
-export * from './state';
-export * from './methods';
-export * from './merged-state';
+"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("./state"), exports);
+__exportStar(require("./methods"), exports);
+__exportStar(require("./merged-state"), exports);

package/build/base/merged-state.js

@@ -1,80 +1,61 @@
-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 '../globals';
-import { useMemo, useRef, useState } from 'react';
-var MergedState = /** @class */ (function () {
-    function MergedState(initialState) {
-        var _this = this;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMergedState = void 0;
+require("../globals");
+const react_1 = require("react");
+class MergedState {
+    static useRefresh() {
+        [this._values_, this.setState] = (0, react_1.useState)(this.initialState);
+    }
+    get put() {
+        return Object.assign({}, this._setters_);
+    }
+    get initialState() {
+        return Object.assign({}, this._initialValues_);
+    }
+    constructor(initialState) {
         this._initialValues_ = {};
         this._values_ = {};
         this._setters_ = {};
-        this.putMany = function (newValues) {
-            _this.setState(__assign(__assign({}, _this._values_), newValues));
+        this.putMany = (newValues) => {
+            this.setState(Object.assign(Object.assign({}, this._values_), newValues));
         };
         this.reservedKeys = Object.keys(this);
         this.valueKeys = [];
-        this._initialValues_ = __assign({}, initialState);
-        this._values_ = __assign({}, initialState);
-        Object.keys(initialState).forEach(function (_key) {
-            var key = _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."));
+        this._initialValues_ = Object.assign({}, initialState);
+        this._values_ = Object.assign({}, initialState);
+        Object.keys(initialState).forEach((_key) => {
+            const key = _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.`);
             }
-            _this.valueKeys.push(key);
-            _this._setters_[key] = function (value) {
-                var _a;
+            this.valueKeys.push(key);
+            this._setters_[key] = (value) => {
                 // this._values_[key] = value;
-                _this.setState(__assign(__assign({}, _this._values_), (_a = {}, _a[key] = value, _a)));
+                this.setState(Object.assign(Object.assign({}, this._values_), { [key]: value }));
             };
-            var self = _this;
-            Object.defineProperty(_this, key, {
-                get: function () {
+            const self = this;
+            Object.defineProperty(this, key, {
+                get() {
                     return self._values_[key];
                 },
-                set: function (value) {
+                set(value) {
                     self._setters_[key](value);
                 },
                 enumerable: true,
             });
         });
     }
-    MergedState.useRefresh = function () {
-        var _a;
-        _a = useState(this.initialState), this._values_ = _a[0], this.setState = _a[1];
-    };
-    Object.defineProperty(MergedState.prototype, "put", {
-        get: function () {
-            return __assign({}, this._setters_);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MergedState.prototype, "initialState", {
-        get: function () {
-            return __assign({}, this._initialValues_);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return MergedState;
-}());
+}
 /**
  * Similar to {@link useCleanState},
  * but uses a single `useState` call for the entire state object.
  */
-export var useMergedState = function (initialState) {
-    var cleanState = useRef(useMemo(function () {
+const useMergedState = (initialState) => {
+    const cleanState = (0, react_1.useRef)((0, react_1.useMemo)(() => {
         return new MergedState(initialState);
     }, [])).current;
     MergedState.useRefresh.call(cleanState);
     return cleanState;
 };
+exports.useMergedState = useMergedState;

package/build/base/methods.js

@@ -1,8 +1,11 @@
+"use strict";
 /**
  * @module ComponentMethods
  */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMethods = exports.ComponentMethods = void 0;
 // Values
-import { useMemo, useRef } from 'react';
+const react_1 = require("react");
 /**
  * @summary
  * Base class for a class that holds methods for a function component.
@@ -13,8 +16,8 @@ import { useMemo, useRef } from 'react';
  *
  * Call the {@link useMethods} hook inside your function component to instantiate the class.
  */
-var ComponentMethods = /** @class */ (function () {
-    function ComponentMethods() {
+class ComponentMethods {
+    constructor() {
         /**
          * Persist class members during HMR. {@include ../classy/logic/hrm-preserve-keys.md}
          * @privateRemarks
@@ -22,9 +25,8 @@ var ComponentMethods = /** @class */ (function () {
          */
         this._hmrPreserveKeys = []; // @todo Keep undefined. Update to empty array after instantiation in dev env.
     }
-    return ComponentMethods;
-}());
-export { ComponentMethods };
+}
+exports.ComponentMethods = ComponentMethods;
 ;
 /**
  * Returns an instance of the provided class,
@@ -32,13 +34,9 @@ export { ComponentMethods };
  *
  * `state` should be an instance of `CleanState` created with {@link useCleanState}.
  */
-var useMethods = function () {
+const useMethods = (...args) => {
     var _a;
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    var Methods = args[0], _b = args[1], props = _b === void 0 ? {} : _b, state = args[2];
+    const [Methods, props = {}, state] = args;
     // Vite HMR seems to sometimes reinitialize useMemo calls after a hot update,
     // causing the instance to be unexpectedly recreated in the middle of the component's lifecycle.
     // But useRef and useState values appear to always be preserved whenever this happens.
@@ -46,9 +44,9 @@ var useMethods = function () {
     // In production, we only use the latestInstance the first time, and it's ignored every other time.
     // This means changing the class at runtime will have no effect in production.
     // latestInstance is only extracted into a separate variable for use in dev mode during HMR.
-    var latestInstance = useMemo(function () { return new Methods(); }, [Methods]);
-    var instanceRef = useRef(latestInstance);
-    var refreshState = function () {
+    const latestInstance = (0, react_1.useMemo)(() => new Methods(), [Methods]);
+    const instanceRef = (0, react_1.useRef)(latestInstance);
+    const refreshState = () => {
         // @ts-expect-error
         instanceRef.current.props = props;
         // @ts-expect-error
@@ -56,29 +54,29 @@ var useMethods = function () {
             instanceRef.current.state = state;
     };
     if (process.env.NODE_ENV === 'development' && instanceRef.current !== latestInstance) {
-        var oldInstance_1 = instanceRef.current;
-        latestInstance._hmrPreserveKeys.forEach(function (_key) {
-            var key = _key;
+        const oldInstance = instanceRef.current;
+        latestInstance._hmrPreserveKeys.forEach((_key) => {
+            const key = _key;
             // @ts-expect-error We're assigning to readonly properties. Also, Typescript doesn't know that the type of the left and right side will always match, due to the dynamic access.
-            latestInstance[key] = oldInstance_1[key];
+            latestInstance[key] = oldInstance[key];
         });
         // Ensure that any stale references to oldInstance within the app
         // will end up retrieving up-to-date values from latestInstance
         // through the prototype chain.
-        Reflect.ownKeys(oldInstance_1).forEach(function (_key) {
-            var key = _key;
-            delete oldInstance_1[key];
+        Reflect.ownKeys(oldInstance).forEach((_key) => {
+            const key = _key;
+            delete oldInstance[key];
         });
-        Object.setPrototypeOf(oldInstance_1, latestInstance);
+        Object.setPrototypeOf(oldInstance, latestInstance);
         instanceRef.current = latestInstance;
         refreshState();
-        (_a = latestInstance._onHmrUpdate) === null || _a === void 0 ? void 0 : _a.call(latestInstance, oldInstance_1);
+        (_a = latestInstance._onHmrUpdate) === null || _a === void 0 ? void 0 : _a.call(latestInstance, oldInstance);
     }
     else
         refreshState();
     return instanceRef.current;
 };
-export { useMethods };
+exports.useMethods = useMethods;
 /** /type_testing: {
     let a = async () => {
         const a: object = {b: ''};

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

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