@cleanweb/react 2.1.0 → 2.1.1-beta.1

package/README.md

@@ -55,7 +55,7 @@ const Button = (props) => {
 
 > **Note:** Each top-level key in your initial state object gets a separate call to `React.useState`, and `state.put[key]()` is a proxy for the setter function returned from `useState`. So using this hook is fundamentally the same as calling `useState` directly for each value. What `useCleanState` provides is a way to unify those values and a convenient API for updating them.
 
-[Read the `useCleanState` docs]() for more details.
+[Read the `useCleanState` docs](https://cleanjsweb.github.io/neat-react) for more details.
 
 ### Methods
 The `useMethods` hook lets you manage the closures that your component uses in a separate class, keeping the body of the component clean and easier to read. With `useMethods`, your functions are not recreated on every render. Yet, every method of your component is guaranteed to always have access to the latest props and state without the need for a dependencty array.

package/build/base/merged-state.d.ts

@@ -12,5 +12,9 @@ declare class MergedState<TState extends object> {
     constructor(initialState: TState);
     putMany: (newValues: Partial<TState>) => void;
 }
+/**
+ * Similar to {@link useCleanState},
+ * but uses a single `useState` call for all keys.
+ */
 export declare const useMergedState: <TState extends object>(initialState: TState) => MergedState<TState> & TState;
 export {};

package/build/base/merged-state.js

@@ -70,6 +70,10 @@ var MergedState = /** @class */ (function () {
     });
     return MergedState;
 }());
+/**
+ * Similar to {@link useCleanState},
+ * but uses a single `useState` call for all keys.
+ */
 var useMergedState = function (initialState) {
     var cleanState = (0, react_1.useRef)((0, react_1.useMemo)(function () {
         return new MergedState(initialState);

package/build/base/methods.d.ts

@@ -1,6 +1,12 @@
+/**
+ * @module ComponentMethods
+ */
 import type { TCleanState, TStateData } from './state';
 /**
- * Base class for a class that holds methods intended for use in a function component.
+ * @summary
+ * Base class for a class that holds methods for a function component.
+ *
+ * @remarks
  * These methods will have access to the components state and props via
  * `this.state` and `this.props` respectively.
  *
@@ -8,18 +14,22 @@ import type { TCleanState, TStateData } from './state';
  */
 export declare class ComponentMethods<TProps extends object = {}, TState extends TStateData | null = null> {
     readonly props: TProps;
-    state: TState extends TStateData ? TCleanState<TState> : null;
+    readonly state: TState extends TStateData ? TCleanState<TState> : null;
+    _hmrPreserveKeys: Array<keyof this | (string & {})>;
+    _onHmrUpdate: <TInstance extends this>(oldInstance: TInstance) => void;
 }
 type UseMethods = {
     <Class extends typeof ComponentMethods<object, object>>(Methods: Class & Constructor<InstanceType<Class>>, props: InstanceType<Class>['props'], state: InstanceType<Class>['state']): InstanceType<Class>;
     <Class extends typeof ComponentMethods<object, null>>(Methods: Class & Constructor<InstanceType<Class>>, props: InstanceType<Class>['props'], state?: null): InstanceType<Class>;
-    <Class extends typeof ComponentMethods<HardEmptyObject, null>>(Methods: Class & Constructor<InstanceType<Class>>): InstanceType<Class>;
+    <Class extends typeof ComponentMethods<NeverObject, null>>(Methods: Class & Constructor<InstanceType<Class>>): InstanceType<Class>;
 };
 /**
+ * @summary
  * Returns an instance of the provided class,
  * with the state and props arguments added as instance members.
  *
- * `state` must be an instance of `CleanState` created with {@link useCleanState}.
+ * @remarks
+ * `state` should be an instance of `CleanState` created with {@link useCleanState}.
  */
 declare const useMethods: UseMethods;
 export { useMethods };
@@ -29,7 +39,7 @@ export { useMethods };
 
         type t = keyof typeof a;
 
-        class MyMethods extends ComponentMethods<WeakEmptyObject, null> {
+        class MyMethods extends ComponentMethods<EmptyObject, null> {
             // static getInitialState = () => ({});
         };
 

package/build/base/methods.js

@@ -1,10 +1,27 @@
 "use strict";
+/**
+ * @module ComponentMethods
+ */
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMethods = exports.ComponentMethods = void 0;
+// JSDoc references
+var helpers_1 = require("../helpers");
 // Values
 var react_1 = require("react");
 /**
- * Base class for a class that holds methods intended for use in a function component.
+ * @summary
+ * Base class for a class that holds methods for a function component.
+ *
+ * @remarks
  * These methods will have access to the components state and props via
  * `this.state` and `this.props` respectively.
  *
@@ -12,16 +29,19 @@ var react_1 = require("react");
  */
 var ComponentMethods = /** @class */ (function () {
     function ComponentMethods() {
+        this._hmrPreserveKeys = [];
     }
     return ComponentMethods;
 }());
 exports.ComponentMethods = ComponentMethods;
 ;
 /**
+ * @summary
  * Returns an instance of the provided class,
  * with the state and props arguments added as instance members.
  *
- * `state` must be an instance of `CleanState` created with {@link useCleanState}.
+ * @remarks
+ * `state` should be an instance of `CleanState` created with {@link useCleanState}.
  */
 var useMethods = function () {
     var args = [];
@@ -33,16 +53,59 @@ var useMethods = function () {
     // 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.
     // So those two are the only cross-render-persistence methods we can consider safe.
-    // @todo Provide a way for users to reflect updated methods code on the existing instance after HMR.
-    var methods = (0, react_1.useRef)((0, react_1.useMemo)(function () {
-        return new Methods();
-    }, [])).current;
-    /** A proxy variable to allow typechecking of the assignment to methods.props despite the need for "readonly" error suppression. */
-    var _propsProxy_;
+    // 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 = (0, react_1.useMemo)(function () { return new Methods(); }, [Methods]);
+    var instanceRef = (0, react_1.useRef)(latestInstance);
+    if (process.env.NODE_ENV === 'development') {
+        var rerender_1 = (0, helpers_1.useRerender)();
+        (0, react_1.useEffect)(function () {
+            var _a;
+            if (instanceRef.current === latestInstance)
+                return;
+            console.log([
+                'HMR-updated component class detected.',
+                'Creating a new instance with the updated class.',
+                'All stateful values will be copied over.\n\n',
+                'Note that this mechanism only works in the `development` environment during HMR.',
+                'In production, the class argument will be ignored after the first render.\n\n',
+                'If this wasn\'t an HMR update, you should refactor your code to make sure',
+                'all clean-react hooks receive the same class object on every render.'
+            ].join());
+            var oldInstance = instanceRef.current;
+            var hmrPreserveKeys = __spreadArray(__spreadArray([], ((_a = latestInstance._hmrPreserveKeys) !== null && _a !== void 0 ? _a : []), true), [
+                'state', 'props', 'hooks',
+            ], false);
+            hmrPreserveKeys.forEach(function (_key) {
+                var 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[key];
+            });
+            latestInstance._onHmrUpdate(oldInstance);
+            Reflect.ownKeys(oldInstance).forEach(function (_key) {
+                var key = _key;
+                delete oldInstance[key];
+            });
+            Object.setPrototypeOf(oldInstance, latestInstance);
+            instanceRef.current = latestInstance;
+            rerender_1();
+        });
+    }
+    var methods = instanceRef.current;
+    /**
+     * A proxy variable to allow typechecking of the assignment
+     * to a readonly property,
+     * despite the need for "readonly" error suppression.
+     */
+    var _propsProxy;
+    /** @see {@link _propsProxy} */
+    var _stateProxy;
+    // @ts-expect-error
+    methods.props = (_propsProxy = props);
     // @ts-expect-error
-    methods.props = (_propsProxy_ = props);
     if (state)
-        methods.state = state;
+        methods.state = (_stateProxy = state);
     return methods;
 };
 exports.useMethods = useMethods;
@@ -52,7 +115,7 @@ exports.useMethods = useMethods;
 
         type t = keyof typeof a;
 
-        class MyMethods extends ComponentMethods<WeakEmptyObject, null> {
+        class MyMethods extends ComponentMethods<EmptyObject, null> {
             // static getInitialState = () => ({});
         };
 

package/build/base/state/class.d.ts

@@ -1,4 +1,5 @@
 import { ICleanStateClass, ICleanStateConstructor, PutState } from './class-types';
+/** @internal */
 export declare class CleanStateBase<TState extends Record<string, any>> {
     readonly reservedKeys: string[];
     readonly valueKeys: string[];
@@ -11,4 +12,5 @@ export declare class CleanStateBase<TState extends Record<string, any>> {
     get initialState(): TState;
     readonly putMany: (newValues: Partial<TState>) => void;
 }
+/** @internal */
 export declare const CleanState: ICleanStateConstructor & ICleanStateClass;

package/build/base/state/class.js

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CleanState = exports.CleanStateBase = void 0;
 var react_1 = require("react");
+/** @internal */
 var CleanStateBase = /** @class */ (function () {
     function CleanStateBase(initialState) {
         var _this = this;
@@ -83,20 +84,16 @@ var CleanStateBase = /** @class */ (function () {
             var _a;
             // @todo Make state updates accessible immediately. Use state.staged to access the scheduled updates.
             var setter;
-            // @todo Support SetStateAction callback signature in state.put(...);
             _a = retrieveState(_this.initialState[key]), _this._values_[key] = _a[0], setter = _a[1];
             _this._setters_[key] = (function (valueOrCallback) {
                 // this._staged_[key] = value;
                 setter(valueOrCallback);
             });
         });
-        /* Object.entries<TUseStateArray<TState>>(stateAndSetters).forEach(([key, responseFromUseState]) => {
-            [this._values_[key], this._setters_[key]] = responseFromUseState;
-        }); */
-        // return this;
     };
     return CleanStateBase;
 }());
 exports.CleanStateBase = CleanStateBase;
 ;
+/** @internal */
 exports.CleanState = CleanStateBase;

package/build/base/state/hook-types.d.ts

@@ -1,12 +1,36 @@
 import { CleanStateBase } from './class';
+/**
+ * Base type for an `initialState` object.
+ * It is a regular object type, with some reserved keys excluded.
+ *
+ * @_category Types
+ */
 export type TStateData = object & {
     [Key in keyof CleanStateBase<{}>]?: never;
 };
-/** @see https://github.com/cleanjsweb/neat-react#clean-state */
+/**
+ * Describes a `CleanState` object instantiated with an `initialState`
+ * object of type `TState`.
+ *
+ * @typeParam TState - The type of your `initialState` object.
+ *
+ * @_category Types
+ */
 export type TCleanState<TState extends TStateData> = (CleanStateBase<TState> & Omit<TState, keyof CleanStateBase<{}>>);
+/**
+ * Takes a `TCleanState` type and returns the `initialState` type
+ * associated with the provided `TCleanState`.
+ *
+ * This is useful to isolated the type of your actual state data without
+ * any of the reserved keys provided by the Clean State utility.
+ */
 export type ExtractCleanStateData<YourCleanState extends CleanStateBase<{}>> = Omit<YourCleanState, keyof CleanStateBase<{}>>;
 type StateInitFunction = (...args: any[]) => object;
 type StateInit = object | StateInitFunction;
 export type TInitialState<Initializer extends StateInit> = Initializer extends (...args: any[]) => (infer TState extends object) ? TState : Initializer;
+/**
+ * @typeParam TInit - An initial state object, or a function that
+ * returns the initial state object.
+ */
 export type TUseCleanState = <TInit extends StateInit>(_initialState: TInit, ...props: TInit extends (...args: infer TProps extends any[]) => (infer TState extends object) ? TProps : []) => TCleanState<TInitialState<TInit>>;
 export {};

package/build/base/state/hooks.d.ts

@@ -1,6 +1,12 @@
 import { TUseCleanState } from './hook-types';
 /**
- * Creates a state object, which includes the provided values, and helper methods for
- * updating those values and automatically rerendering your component's UI accordingly.
+ * @summary
+ * Creates a state object, which includes the provided values,
+ * as well as helper methods for updating those values and automatically
+ * rerendering your component's UI to reflect said updates.
+ *
+ * @remarks
+ * Uses {@link React.useState} under the hook, with a separate call
+ * to `useState` for each top-level key in the provided object.
  */
 export declare const useCleanState: TUseCleanState;

package/build/base/state/hooks.js

@@ -4,8 +4,14 @@ exports.useCleanState = void 0;
 var react_1 = require("react");
 var class_1 = require("./class");
 /**
- * Creates a state object, which includes the provided values, and helper methods for
- * updating those values and automatically rerendering your component's UI accordingly.
+ * @summary
+ * Creates a state object, which includes the provided values,
+ * as well as helper methods for updating those values and automatically
+ * rerendering your component's UI to reflect said updates.
+ *
+ * @remarks
+ * Uses {@link React.useState} under the hook, with a separate call
+ * to `useState` for each top-level key in the provided object.
  */
 var useCleanState = function (_initialState) {
     var props = [];

package/build/base/state/index.d.ts

@@ -1,4 +1,8 @@
+/**
+ * @module CleanState
+ */
 import '../../globals';
 export { CleanState } from './class';
 export { useCleanState } from './hooks';
 export type { TCleanState, TStateData, ExtractCleanStateData } from './hook-types';
+export * as MergedState from '../../base/merged-state';

package/build/base/state/index.js

@@ -1,8 +1,35 @@
 "use strict";
+/**
+ * @module CleanState
+ */
+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.useCleanState = exports.CleanState = void 0;
+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.d.ts

@@ -1,14 +1,24 @@
 import type { Extractor } from './types/extractor';
 import { ComponentInstance } from '../instance';
+import { TPropsBase } from '../logic';
 /**
- * A superset of {@link ComponentInstance} that allows defining your
+ * @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.
  */
-export declare class ClassComponent<TProps extends object = WeakEmptyObject> extends ComponentInstance<TProps> {
+export declare class ClassComponent<TProps extends TPropsBase = null> extends ComponentInstance<TProps> {
     /**
      * Analogous to {@link React.Component.render}. A function that returns
      * your component's JSX template.
@@ -81,7 +91,7 @@ export declare class ClassComponent<TProps extends object = WeakEmptyObject> ext
     static readonly FC: Extractor;
 }
 export { ClassComponent as Component };
-export { Use } from './use-component';
+export { Use } from '../../helpers/use-component';
 /** /
 testing: {
     const a: object = {b: ''};

package/build/classy/class/index.js

@@ -21,9 +21,18 @@ var instance_1 = require("../instance");
 var function_name_1 = require("./utils/function-name");
 var rerender_1 = require("../../helpers/rerender");
 /**
- * A superset of {@link ComponentInstance} that allows defining your
+ * @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.
@@ -128,7 +137,7 @@ var ClassComponent = /** @class */ (function (_super) {
 }(instance_1.ComponentInstance));
 exports.ClassComponent = ClassComponent;
 exports.Component = ClassComponent;
-var use_component_1 = require("./use-component");
+var use_component_1 = require("../../helpers/use-component");
 Object.defineProperty(exports, "Use", { enumerable: true, get: function () { return use_component_1.Use; } });
 /** /
 testing: {

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

@@ -1,8 +1,6 @@
 import type { UseInstance } from './types/hook';
-import { ComponentLogic } from '../../classy/logic';
+import { ComponentLogic, type TPropsBase } from '../../classy/logic';
 type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction>;
-/** An empty function. It returns (void) without performing any operations. */
-export declare const noOp: () => 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,
@@ -10,7 +8,7 @@ export declare const noOp: () => void;
  *
  * @see https://github.com/cleanjsweb/neat-react#lifecycle-useinstance
  */
-export declare class ComponentInstance<TProps extends object = NonPrimitive> extends ComponentLogic<TProps> {
+export declare class ComponentInstance<TProps extends TPropsBase = null> extends ComponentLogic<TProps> {
     /**
      * Runs only _before_ first render,
      * i.e before the component instance is mounted.
@@ -60,11 +58,35 @@ export declare class ComponentInstance<TProps extends object = NonPrimitive> ext
      */
     cleanUp: IVoidFunction;
 }
+/**
+ * @summary
+ * Enables full separation of concerns between a React components template
+ * and all of the logic that drives it.
+ *
+ * Returns an instance that fully represents a logical instance
+ * of a rendered React component, with the exception of the JSX template itself.
+ *
+ * This means the all of your components logic and lifecycle handlers
+ * can be externalized from the function component itself,
+ * and defined in a separate class.
+ *
+ * @remarks
+ * The provided class should be a subclass of {@link ComponentInstance}.
+ *
+ * @privateRemarks
+ * To ensure successful type checking, the second parameter must be written with spread syntax.
+ * Likely because of the `exactOptionalPropertyTypes` config option turned on,
+ * and `UseInstance` using an empty tuple in its rest parameter type, attempting to simply
+ * retrieve the second argument directly causes an error when that argument is passed on to `useLogic`.
+ * But directly working with the rest array bypasses the problem. Also note that the issue persists even when
+ * the second param is given `{}` as a default follow to account for the empty tuple case. TypeScript
+ * just wants us to use the rest parameter explicitly by force.
+ */
 export declare const useInstance: UseInstance;
 export {};
 /** /
 testing: {
-    class A extends ComponentInstance<WeakEmptyObject> {
+    class A extends ComponentInstance<EmptyObject> {
         getInitialState = (p?: object) => ({putan: ''});
         // k = this.props.o
         am = this.state['_initialValues_'];

package/build/classy/instance/index.js

@@ -15,13 +15,11 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInstance = exports.ComponentInstance = exports.noOp = void 0;
+exports.useInstance = exports.ComponentInstance = void 0;
 var react_1 = require("react");
 var logic_1 = require("../../classy/logic");
 var mount_callbacks_1 = require("./mount-callbacks");
-/** An empty function. It returns (void) without performing any operations. */
-var noOp = function () { };
-exports.noOp = noOp;
+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,
@@ -54,7 +52,7 @@ var ComponentInstance = /** @class */ (function (_super) {
          *
          * Uses `useEffect()` under the hood.
          */
-        _this.onMount = function () { return exports.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.
@@ -73,7 +71,7 @@ var ComponentInstance = /** @class */ (function (_super) {
          *
          * Returns a cleanup function.
          */
-        _this.onRender = function () { return exports.noOp; };
+        _this.onRender = function () { return helpers_1.noOp; };
         /**
          * Runs when the component is unmounted.
          * It is called _after_ the cleanup function returned by onMount.
@@ -92,7 +90,22 @@ var ComponentInstance = /** @class */ (function (_super) {
 }(logic_1.ComponentLogic));
 exports.ComponentInstance = ComponentInstance;
 ;
-/*
+/**
+ * @summary
+ * Enables full separation of concerns between a React components template
+ * and all of the logic that drives it.
+ *
+ * Returns an instance that fully represents a logical instance
+ * of a rendered React component, with the exception of the JSX template itself.
+ *
+ * This means the all of your components logic and lifecycle handlers
+ * can be externalized from the function component itself,
+ * and defined in a separate class.
+ *
+ * @remarks
+ * The provided class should be a subclass of {@link ComponentInstance}.
+ *
+ * @privateRemarks
  * To ensure successful type checking, the second parameter must be written with spread syntax.
  * Likely because of the `exactOptionalPropertyTypes` config option turned on,
  * and `UseInstance` using an empty tuple in its rest parameter type, attempting to simply
@@ -150,7 +163,7 @@ var useInstance = function () {
 exports.useInstance = useInstance;
 /** /
 testing: {
-    class A extends ComponentInstance<WeakEmptyObject> {
+    class A extends ComponentInstance<EmptyObject> {
         getInitialState = (p?: object) => ({putan: ''});
         // k = this.props.o
         am = this.state['_initialValues_'];

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

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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMountCallbacks = void 0;
 var react_1 = require("react");
 var mount_state_1 = require("../../helpers/mount-state");
+/** @internal */
 var useMountCallbacks = function (instance) {
     var _a;
     var isMounted = (0, mount_state_1.useMountState)();

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

@@ -1,6 +1,7 @@
+import { TPropsBase } from '../../../classy/logic';
 import { ComponentInstance } from '..';
-type UIClassParam = typeof ComponentInstance<any>;
-type UIProplessClassParam = typeof ComponentInstance<HardEmptyObject>;
+type UIClassParam = typeof ComponentInstance<NonNullable<TPropsBase>>;
+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>;

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

@@ -1,7 +1,15 @@
 import type { TCleanState } from '../../base/state';
 import type { UseLogic } from './types/hook';
-export type HardEmpty = HardEmptyObject;
-export type WeakEmpty = WeakEmptyObject;
+/**
+ * The base type for the props type argument.
+ * This is not the type the `props` property itself.
+ * It merely defines the type constraint for the type argument
+ * passed when extending any of the advanced external classes.
+ *
+ * It differs from the type of the actual props object
+ * in that it accepts null for components that don't take any props.
+ */
+export type TPropsBase = NonPrimitive | null;
 /**
  * Base class for a class that holds methods intended for use in a function component,
  * as well as a static method for initializing state.
@@ -13,16 +21,22 @@ export type WeakEmpty = WeakEmptyObject;
  * React hooks within this class.
  *
  * Call the {@link useLogic} hook inside your function component to instantiate the class.
+ *
+ * @typeParam TProps - {@include ./types/tprops.md}
+ *
+ * @group ComponentLogic
+ * @_category External Classes
  */
-export declare class ComponentLogic<TProps extends object = NonPrimitive> {
+export declare class ComponentLogic<TProps extends TPropsBase = null> {
     /**
      * A {@link TCleanState | `CleanState`} object.
      * Holds all of your component's state,
      * and methods for conveniently manipulating those values.
+     * Initialiazed with the object returned from your `getInitialState` method.
      */
     readonly state: TCleanState<ReturnType<this['getInitialState']>>;
-    /** The props pass into your component at the time of rendering. */
-    readonly props: TProps;
+    /** The props passed into your component at the time of rendering. */
+    readonly props: TProps extends null ? EmptyObject : TProps;
     /**
      * Values received from the hooks your component consumes.
      * This holds the latest copy of the object returned by
@@ -34,7 +48,7 @@ export declare class ComponentLogic<TProps extends object = NonPrimitive> {
      * It receives the initial `props` object and should return
      * an object with the initial values for your component's state.
      */
-    getInitialState: (props?: TProps) => object;
+    getInitialState: (props?: this["props"]) => object;
     /**
      * Call React hooks from here. If your component needs
      * access to values return from the hooks you call,
@@ -44,7 +58,15 @@ export declare class ComponentLogic<TProps extends object = NonPrimitive> {
      * your component class.
      */
     useHooks: () => object | void;
+    _hmrPreserveKeys: Array<keyof this | (string & {})>;
+    _onHmrUpdate: <TInstance extends this>(oldInstance: TInstance) => void;
 }
+/**
+ * Returns an instance of the provided class, which holds methods for your component and
+ * encapsulates hook calls with the special {@link ComponentLogic.useHooks | `useHooks`} method.
+ *
+ * The class argument must be a subclass of {@link ComponentLogic}.
+ */
 export declare const useLogic: UseLogic;
 /** /
 testing: {

package/build/classy/logic/index.js

@@ -1,4 +1,13 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = exports.ComponentLogic = void 0;
 var react_1 = require("react");
@@ -14,6 +23,11 @@ var state_1 = require("../../base/state");
  * React hooks within this class.
  *
  * Call the {@link useLogic} hook inside your function component to instantiate the class.
+ *
+ * @typeParam TProps - {@include ./types/tprops.md}
+ *
+ * @group ComponentLogic
+ * @_category External Classes
  */
 var ComponentLogic = /** @class */ (function () {
     function ComponentLogic() {
@@ -32,11 +46,18 @@ var ComponentLogic = /** @class */ (function () {
          * your component class.
          */
         this.useHooks = function () { };
+        this._hmrPreserveKeys = [];
     }
     return ComponentLogic;
 }());
 exports.ComponentLogic = ComponentLogic;
 ;
+/**
+ * Returns an instance of the provided class, which holds methods for your component and
+ * encapsulates hook calls with the special {@link ComponentLogic.useHooks | `useHooks`} method.
+ *
+ * The class argument must be a subclass of {@link ComponentLogic}.
+ */
 var useLogic = function () {
     var _a;
     var args = [];
@@ -44,21 +65,57 @@ var useLogic = function () {
         args[_i] = arguments[_i];
     }
     var Logic = args[0], _b = args[1], props = _b === void 0 ? {} : _b;
-    var self = (0, react_1.useRef)((0, react_1.useMemo)(function () {
-        return new Logic();
-    }, [])).current;
-    /** A proxy variable to allow typechecking of the assignment to `self.props` despite the need for "readonly" error suppression. */
-    var _propsProxy_;
-    /** A proxy variable to allow typechecking of the assignment to `self.state` despite the need for "readonly" error suppression. */
-    var _stateProxy_;
-    /** A proxy variable to allow typechecking of the assignment to `self.hooks` despite the need for "readonly" error suppression. */
-    var _hooksProxy_;
+    // 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 = (0, react_1.useMemo)(function () { return new Logic(); }, [Logic]);
+    var instanceRef = (0, react_1.useRef)(latestInstance);
+    if (process.env.NODE_ENV === 'development') {
+        if (instanceRef.current !== latestInstance) {
+            console.log([
+                'HMR-updated component class detected.',
+                'Creating a new instance with the updated class.',
+                'All stateful values will be copied over.\n\n',
+                'Note that this mechanism only works in the `development` environment during HMR.',
+                'In production, the class argument will be ignored after the first render.\n\n',
+                'If this wasn\'t an HMR update, you should refactor your code to make sure',
+                'all clean-react hooks receive the same class object on every render.'
+            ].join());
+            var oldInstance_1 = instanceRef.current;
+            var hmrPreserveKeys = __spreadArray(__spreadArray([], latestInstance._hmrPreserveKeys, true), [
+                'state', 'props', 'hooks',
+            ], false);
+            hmrPreserveKeys.forEach(function (_key) {
+                var 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._onHmrUpdate(oldInstance_1);
+            instanceRef.current = latestInstance;
+            Reflect.ownKeys(oldInstance_1).forEach(function (_key) {
+                var key = _key;
+                delete oldInstance_1[key];
+            });
+            Object.setPrototypeOf(oldInstance_1, latestInstance);
+        }
+    }
+    var self = instanceRef.current;
+    /**
+     * A proxy variable to allow typechecking of the assignment
+     * to a readonly property,
+     * despite the need for "readonly" error suppression.
+     */
+    var _propsProxy;
+    /** @see {@link _propsProxy} */
+    var _stateProxy;
+    /** @see {@link _propsProxy} */
+    var _hooksProxy;
     // @ts-expect-error
-    self.props = (_propsProxy_ = props);
+    self.props = (_propsProxy = props);
     // @ts-expect-error
-    self.state = (_stateProxy_ = (0, state_1.useCleanState)(self.getInitialState, props));
+    self.state = (_stateProxy = (0, state_1.useCleanState)(self.getInitialState, props));
     // @ts-expect-error
-    self.hooks = (_hooksProxy_ = (_a = self.useHooks()) !== null && _a !== void 0 ? _a : {});
+    self.hooks = (_hooksProxy = (_a = self.useHooks()) !== null && _a !== void 0 ? _a : {});
     return self;
 };
 exports.useLogic = useLogic;

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

@@ -1,10 +1,9 @@
-import type { ComponentLogic } from '..';
+import type { ComponentLogic, TPropsBase } from '..';
 /*************************************
  *        # Hooks                    *
 **************************************/
-/** */
-type ULClassParam = typeof ComponentLogic<any>;
-type ULProplessClassParam = typeof ComponentLogic<HardEmptyObject>;
+type ULClassParam = typeof ComponentLogic<NonNullable<TPropsBase>>;
+type ULProplessClassParam = typeof ComponentLogic<null>;
 export type UseLogic = {
     <Class extends ULProplessClassParam>(Methods: Class): InstanceType<Class>;
     <Class extends ULClassParam>(Methods: Class, props: InstanceType<Class>['props']): InstanceType<Class>;

package/build/docs-src/api/base-classes.d.ts

@@ -0,0 +1,3 @@
+export { ComponentMethods } from '../../base/methods';
+export { ComponentLogic } from '../../classy/logic';
+export { ComponentInstance } from '../../classy/instance';

package/build/docs-src/api/base-classes.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentInstance = exports.ComponentLogic = exports.ComponentMethods = void 0;
+var methods_1 = require("../../base/methods");
+Object.defineProperty(exports, "ComponentMethods", { enumerable: true, get: function () { return methods_1.ComponentMethods; } });
+var logic_1 = require("../../classy/logic");
+Object.defineProperty(exports, "ComponentLogic", { enumerable: true, get: function () { return logic_1.ComponentLogic; } });
+var instance_1 = require("../../classy/instance");
+Object.defineProperty(exports, "ComponentInstance", { enumerable: true, get: function () { return instance_1.ComponentInstance; } });

package/build/docs-src/api/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * API Reference
+ * @module API
+ */
+export { useCleanState } from '../../base/state';
+export { useMethods } from '../../base/methods';
+export { useLogic } from '../../classy/logic';
+export { useInstance } from '../../classy/instance';
+export { ClassComponent } from '../../classy/class';
+/** @namespace */
+export * as BaseClasses from './base-classes';
+export * as Helpers from '../../helpers';
+export * as References from './references';

package/build/docs-src/api/index.js

@@ -0,0 +1,44 @@
+"use strict";
+/**
+ * API Reference
+ * @module API
+ */
+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.References = exports.Helpers = exports.BaseClasses = exports.ClassComponent = exports.useInstance = exports.useLogic = exports.useMethods = exports.useCleanState = void 0;
+var state_1 = require("../../base/state");
+Object.defineProperty(exports, "useCleanState", { enumerable: true, get: function () { return state_1.useCleanState; } });
+var methods_1 = require("../../base/methods");
+Object.defineProperty(exports, "useMethods", { enumerable: true, get: function () { return methods_1.useMethods; } });
+var logic_1 = require("../../classy/logic");
+Object.defineProperty(exports, "useLogic", { enumerable: true, get: function () { return logic_1.useLogic; } });
+var instance_1 = require("../../classy/instance");
+Object.defineProperty(exports, "useInstance", { enumerable: true, get: function () { return instance_1.useInstance; } });
+var class_1 = require("../../classy/class");
+Object.defineProperty(exports, "ClassComponent", { enumerable: true, get: function () { return class_1.ClassComponent; } });
+/** @namespace */
+exports.BaseClasses = __importStar(require("./base-classes"));
+exports.Helpers = __importStar(require("../../helpers"));
+exports.References = __importStar(require("./references"));

package/build/docs-src/api/references.d.ts

@@ -0,0 +1,5 @@
+export * as $CleanState from '../../base/state';
+export * as $ComponentMethods from '../../base/methods';
+export * as ComponentLogic from '../../classy/logic';
+export * as ComponentInstance from '../../classy/instance';
+export * as ClassComponent from '../../classy/class';

package/build/docs-src/api/references.js

@@ -0,0 +1,31 @@
+"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.ClassComponent = exports.ComponentInstance = exports.ComponentLogic = exports.$ComponentMethods = exports.$CleanState = void 0;
+exports.$CleanState = __importStar(require("../../base/state"));
+exports.$ComponentMethods = __importStar(require("../../base/methods"));
+exports.ComponentLogic = __importStar(require("../../classy/logic"));
+exports.ComponentInstance = __importStar(require("../../classy/instance"));
+exports.ClassComponent = __importStar(require("../../classy/class"));

package/build/globals.d.ts

@@ -8,7 +8,7 @@ declare const UniqueSecretSymbolKey: unique symbol;
         // '': '',
     }
 
-    let TT: WeakEmptyObject = {};
+    let TT: EmptyObject = {};
     TT = tt;
 }/**/
 declare global {
@@ -46,17 +46,17 @@ declare global {
      * Having a single key allows the object to throw type errors
      * of the form:
      * ```
-     * Type `A` has no properties in common with `WeakEmptyObject`.
+     * Type `A` has no properties in common with `EmptyObject`.
      * ```
      * This may provide a slightly stricter type checking than simply
      * using the non-nullish (`{}`) or non-primitive (`object`)
      * built-in types.
      *
-     * Note: `WeakEmptyObject` is not assignable to `HardEmptyObject`
+     * Note: `EmptyObject` is not assignable to `NeverObject`
      * because it has a key whose value type includes `undefined`,
-     * but `HardEmptyObject` keys can only have a type of `never`.
+     * but `NeverObject` keys can only have a type of `never`.
      */
-    interface WeakEmptyObject {
+    interface EmptyObject {
         [UniqueSecretSymbolKey]?: never;
     }
     /**
@@ -65,7 +65,7 @@ declare global {
      * from ever being stored on the object. The object is therefore
      * guaranteed to always be empty.
      */
-    interface HardEmptyObject {
+    interface NeverObject {
         [key: keyof any]: never;
     }
     type valueof<TObject> = TObject[keyof TObject];
@@ -77,6 +77,7 @@ declare global {
     }
     namespace NodeJS {
         interface ProcessEnv {
+            NODE_ENV: 'development' | 'production' | 'test';
         }
     }
 }

package/build/helpers/hmr.d.ts

@@ -0,0 +1,18 @@
+interface OoreInstanceForHMR {
+    hmrPreserveKeys?: Array<keyof this>;
+    hmrConstructorParams?: any[];
+    hmrWillUpdate: (newInstance: OoreInstanceForHMR) => void;
+    hmrDidUpdate: (oldInstance: OoreInstanceForHMR) => void;
+}
+interface OoreClassForHMR {
+    new (...params: any[]): OoreInstanceForHMR;
+    instances: InstanceType<OoreClassForHMR>[];
+}
+declare global {
+    interface Window {
+        handleOoreHmr: (Class: OoreClassForHMR, module: {
+            hot?: __WebpackModuleApi.Hot;
+        }, name?: string) => void;
+    }
+}
+export {};

package/build/helpers/hmr.js

@@ -0,0 +1,48 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// window.__OBJECT_ORIENTED_REACT__ = window.__OBJECT_ORIENTED_REACT__ || {};
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+    window.handleOoreHmr = function (Class, module, name) {
+        var _a, _b;
+        var classKey = name || Class.name;
+        (_a = module.hot) === null || _a === void 0 ? void 0 : _a.dispose(function (data) {
+            data.ooreClasses[classKey] = { instances: Class.instances };
+        });
+        console.log('New module instances:', Class.instances.length);
+        var Classes = (_b = module.hot) === null || _b === void 0 ? void 0 : _b.data.ooreClasses;
+        if (!Classes[classKey]) {
+            console.warn([
+                "New component \"".concat(Class.name, "\" detected.\n\nIf this"),
+                'component was renamed, oore will be unable to match it',
+                'with the previous name, and a reload may be necessary.',
+                'You can pass the name argument to the hmr handler',
+                'to ensure a consistent identifier for your component',
+                'class across renames and therefore bypass this issue.',
+            ].join(' '));
+            return;
+        }
+        var instances = Classes[classKey].instances;
+        instances.forEach(function (instance) {
+            var _a, _b, _c, _d;
+            var newInstance = new (Class.bind.apply(Class, __spreadArray([void 0], ((_a = instance.hmrConstructorParams) !== null && _a !== void 0 ? _a : []), false)))();
+            (_b = instance.hmrPreserveKeys) === null || _b === void 0 ? void 0 : _b.forEach(function (_key) {
+                var key = _key;
+                // @ts-expect-error Typescript doesn't realize that since both sides have the same key, the value type being assigned will always match the property type it's assigned to.
+                newInstance[key] = instance[key];
+            });
+            // instance.hotReplace(newInstance);
+            (_c = instance.hmrWillUpdate) === null || _c === void 0 ? void 0 : _c.call(instance, newInstance);
+            (_d = newInstance.hmrDidUpdate) === null || _d === void 0 ? void 0 : _d.call(newInstance, instance);
+        });
+        console.log('Updated module instances (max 3):', Class.instances.slice(0, 3));
+    };
+}

package/build/helpers/index.d.ts

@@ -1,2 +1,13 @@
+/**
+ * <!-- @ mergeModuleWith API -->
+ * @module Helpers
+ */
 export * from './mount-state';
 export * from './rerender';
+export * from './use-component';
+export * from './type-guards';
+/**
+ * An empty function.
+ * It returns (void) without performing any operations.
+ */
+export declare const noOp: () => void;

package/build/helpers/index.js

@@ -1,4 +1,8 @@
 "use strict";
+/**
+ * <!-- @ mergeModuleWith API -->
+ * @module Helpers
+ */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -14,5 +18,15 @@ 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 });
+exports.noOp = void 0;
 __exportStar(require("./mount-state"), exports);
 __exportStar(require("./rerender"), exports);
+__exportStar(require("./use-component"), exports);
+// export * from './hmr';
+__exportStar(require("./type-guards"), exports);
+/**
+ * An empty function.
+ * It returns (void) without performing any operations.
+ */
+var noOp = function () { };
+exports.noOp = noOp;

package/build/helpers/rerender.d.ts

@@ -1 +1,5 @@
+/**
+ * Returns a function that can be called to manually trigger
+ * a rerender of your component.
+ */
 export declare const useRerender: () => () => void;

package/build/helpers/rerender.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerender = void 0;
 var mount_state_1 = require("../helpers/mount-state");
 var react_1 = require("react");
+/**
+ * Returns a function that can be called to manually trigger
+ * a rerender of your component.
+ */
 var useRerender = function () {
     var isMounted = (0, mount_state_1.useMountState)();
     // Skip the value, we don't need it. Grab just the setter function.

package/build/helpers/type-guards.d.ts

@@ -0,0 +1 @@
+export declare const canIndex: (key: keyof any, targetObject: any) => key is keyof typeof targetObject;

package/build/helpers/type-guards.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canIndex = void 0;
+var canIndex = function (key, targetObject) {
+    return Reflect
+        .ownKeys(targetObject)
+        .includes(typeof key === 'number' ? "".concat(key) : key);
+};
+exports.canIndex = canIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleanweb/react",
-  "version": "2.1.0",
+  "version": "2.1.1-beta.1",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"
@@ -18,12 +18,15 @@
   "exports": {
     ".": "./build/classy/index.js",
     "./base": "./build/base/index.js",
-    "./helpers": "./build/helpers/index.js"
+    "./helpers": "./build/helpers/index.js",
+    "./all": "./build/index.js"
   },
   "scripts": {
     "prebuild": "rimraf ./build",
     "build": "tsc && tsc-alias",
+    "serve-docs": "serve docs",
     "postbuild": "copyfiles tsconfig.json build",
+    "build:docs": "typedoc",
     "_": "",
     "prepublishOnly": "npm run build",
     "publish:patch": "npm version patch && npm publish",
@@ -61,6 +64,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@types/node": "20.14.10",
     "@types/react": "^16",
+    "@types/webpack-env": "^1.18.8",
     "babel-preset-react-app": "^10.0.1",
     "copyfiles": "^2.4.1",
     "eslint": "^9.15.0",
@@ -68,7 +72,12 @@
     "eslint-plugin-react": "^7.37.2",
     "globals": "^15.12.0",
     "rimraf": "^6.0.1",
+    "serve": "^14.2.4",
     "tsc-alias": "1.8.10",
+    "typedoc": "latest",
+    "typedoc-plugin-coverage": "^3.4.1",
+    "typedoc-plugin-markdown": "^4.4.1",
+    "typedoc-plugin-mdn-links": "^4.0.13",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {