@thom1729/react-utils 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Thomas Smith
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/components/helpers.d.ts

@@ -0,0 +1,2 @@
+export type ExtendBuiltin<TElementName extends keyof JSX.IntrinsicElements, TAdditional extends object = {}, TOmit extends string = never> = TAdditional & Omit<JSX.IntrinsicElements[TElementName], keyof TAdditional | TOmit>;
+export declare function useWrappedHandler<TEvent, TReturn>(callback: undefined | ((value: TReturn) => void), convert: (event: TEvent) => TReturn, dependencies: readonly unknown[]): ((event: TEvent) => void) | undefined;

package/dist/esm/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './helpers.js';
+export * from './input.js';
+export * from './select.js';
+import { type FC } from 'react';
+import type { ExtendBuiltin } from './helpers.js';
+export declare const Button: FC<ExtendBuiltin<'button'>>;

package/dist/esm/components/input.d.ts

@@ -0,0 +1,18 @@
+import { type FC } from 'react';
+import { type ExtendBuiltin } from './helpers';
+export declare const TextInput: FC<ExtendBuiltin<'input', {
+    value: string;
+    onChange?: (value: string) => void;
+}>>;
+export declare const NumberInput: FC<ExtendBuiltin<'input', {
+    value: number;
+    onChange?: (value: number) => void;
+}>>;
+export declare const CheckboxInput: FC<ExtendBuiltin<'input', {
+    value: boolean;
+    onChange?: (value: boolean) => void;
+}, 'checked' | 'type'>>;
+export declare const Textarea: FC<ExtendBuiltin<'textarea', {
+    value: string;
+    onChange?: (value: string) => void;
+}>>;

package/dist/esm/components/select.d.ts

@@ -0,0 +1,27 @@
+import { type ExtendBuiltin } from './helpers';
+export type SelectOptionLeaf<TValue> = {
+    value: TValue & (string | number);
+    key?: string | number;
+    label?: string;
+    children?: undefined;
+} | {
+    value: TValue;
+    key: string | number;
+    label: string;
+    children?: undefined;
+};
+export type SelectOption<TValue> = SelectOptionLeaf<TValue> | {
+    value?: undefined;
+    key: string | number;
+    label: string;
+    children: readonly SelectOption<TValue>[];
+};
+export declare function getSelectMaps<TValue>(options: readonly SelectOption<TValue>[]): {
+    keyToValue: Map<string | number, TValue | (TValue & (string | number))>;
+    valueToKey: Map<TValue | (TValue & (string | number)), string | number>;
+};
+export declare function Select<const TValue>({ options, value, onChange, ...rest }: ExtendBuiltin<'select', {
+    options: readonly SelectOption<TValue>[];
+    value: TValue;
+    onChange?: ((value: TValue) => void) | undefined;
+}, 'children'>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/hooks/index.d.ts

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

package/dist/esm/hooks/useEventListener.d.ts

@@ -0,0 +1,5 @@
+export type EventTypes<TTarget extends EventTarget> = {
+    [K in keyof TTarget as (K extends `on${infer Name}` ? Name : never)]: Exclude<TTarget[K], null | undefined> extends ((event: infer TEvent extends Event) => unknown) ? TEvent : never;
+};
+export declare function useEventListener<TTarget extends EventTarget, TEventType extends keyof EventTypes<TTarget>>(target: TTarget | undefined, type: TEventType, listener: ((event: EventTypes<TTarget>[TEventType]) => void) | undefined, dependencies: readonly unknown[]): void;
+export declare function useEventListener(target: EventTarget | undefined, type: string, listener: ((event: Event) => void) | undefined, dependencies: readonly unknown[]): void;

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './substate/index.js';

package/dist/esm/index.js

@@ -0,0 +1,266 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+
+function useWrappedHandler(callback, convert, dependencies) {
+    return useMemo(() => callback && ((event) => {
+        callback(convert(event));
+    }), [dependencies]);
+}
+
+const TextInput = ({ type = 'text', value, onChange, ...rest }) => {
+    const onChangeCallback = useWrappedHandler(onChange, event => event.currentTarget.value, [onChange]);
+    return jsx("input", { type: type, value: value, onChange: onChangeCallback, ...rest });
+};
+const NumberInput = ({ type = 'number', value, onChange, ...rest }) => {
+    const onChangeCallback = useWrappedHandler(onChange, event => event.currentTarget.valueAsNumber, [onChange]);
+    return jsx("input", { type: type, value: value, onChange: onChangeCallback, ...rest });
+};
+const CheckboxInput = ({ value, onChange, ...rest }) => {
+    const onChangeCallback = useWrappedHandler(onChange, event => event.currentTarget.checked, [onChange]);
+    return jsx("input", { type: 'checkbox', checked: value, onChange: onChangeCallback, ...rest });
+};
+const Textarea = ({ value, onChange, ...rest }) => {
+    const onChangeCallback = useWrappedHandler(onChange, event => event.currentTarget.value, [onChange]);
+    return jsx("textarea", { value: value, onChange: onChangeCallback, ...rest });
+};
+
+function* iterateOptions(options) {
+    for (const option of options) {
+        if (option.children !== undefined) {
+            yield* iterateOptions(option.children);
+        }
+        else {
+            yield option;
+        }
+    }
+}
+function getSelectMaps(options) {
+    const optionsArray = Array.from(iterateOptions(options));
+    return {
+        keyToValue: new Map(optionsArray.map(({ key, value }) => [key ?? value, value])),
+        valueToKey: new Map(optionsArray.map(({ key, value }) => [value, key ?? value])),
+    };
+}
+function Select({ options, value, onChange, ...rest }) {
+    const { keyToValue, valueToKey } = useMemo(() => getSelectMaps(options), [options]);
+    const onChangeCallback = useWrappedHandler(onChange, event => {
+        const result = keyToValue.get(event.currentTarget.value);
+        if (result === undefined)
+            throw new TypeError(typeof event.currentTarget.value);
+        return result;
+    }, [onChange, keyToValue]);
+    const selectedKey = valueToKey.get(value);
+    if (selectedKey === undefined)
+        throw new TypeError();
+    return jsx("select", { onChange: onChangeCallback, value: selectedKey, ...rest, children: jsx(SelectOptions, { options: options }) });
+}
+function SelectOptions({ options, }) {
+    return jsx(Fragment, { children: options.map(option => {
+            if (option.children !== undefined) {
+                return jsx("optgroup", { label: option.label, children: jsx(SelectOptions, { options: option.children }) }, option.key);
+            }
+            else {
+                return jsx("option", { value: option.key ?? option.value, children: option.label }, option.key ?? option.value);
+            }
+        }) });
+}
+
+const Button = ({ type = 'button', ...rest }) => jsx("button", { type: type, ...rest });
+
+function useEventListener(target, type, listener, dependencies) {
+    const callback = useMemo(() => listener, dependencies);
+    useEffect(() => {
+        if (target !== undefined && callback !== undefined) {
+            target.addEventListener(type, callback);
+            return () => { target.removeEventListener(type, callback); };
+        }
+    }, [target, type, callback]);
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+}
+function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function applyStateUpdater(value, prevState) {
+    if (typeof value === 'function') {
+        return value(prevState);
+    }
+    else {
+        return value;
+    }
+}
+function cached(originalMethod, context) {
+    const cacheProperty = Symbol(`__cache__${context.name.toString()}`);
+    context.addInitializer(function () {
+        this[cacheProperty] = new Map();
+    });
+    const wrappedName = `__wrapped__${context.name.toString()}`;
+    return {
+        [wrappedName](key) {
+            const cache = this[cacheProperty];
+            if (cache.has(key)) {
+                return cache.get(key);
+            }
+            else {
+                const result = originalMethod.call(this, key);
+                cache.set(key, result);
+                return result;
+            }
+        },
+    }[wrappedName];
+}
+let ObjectSubstateProvider = (() => {
+    let _instanceExtraInitializers = [];
+    let _set_decorators;
+    let _delete_decorators;
+    return class ObjectSubstateProvider {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _set_decorators = [cached];
+            _delete_decorators = [cached];
+            __esDecorate(this, null, _set_decorators, { kind: "method", name: "set", static: false, private: false, access: { has: obj => "set" in obj, get: obj => obj.set }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _delete_decorators, { kind: "method", name: "delete", static: false, private: false, access: { has: obj => "delete" in obj, get: obj => obj.delete }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        setState = __runInitializers(this, _instanceExtraInitializers);
+        constructor(setState) {
+            this.setState = setState;
+        }
+        set(key) {
+            return value => this.setState(prevState => ({
+                ...prevState,
+                [key]: applyStateUpdater(value, prevState[key]),
+            }));
+        }
+        delete(key) {
+            return () => this.setState(({ [key]: _, ...rest }) => rest);
+        }
+    };
+})();
+let ArraySubstateProvider = (() => {
+    let _instanceExtraInitializers = [];
+    let _set_decorators;
+    let _delete_decorators;
+    let _moveTo_decorators;
+    let _moveBy_decorators;
+    return class ArraySubstateProvider {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _set_decorators = [cached];
+            _delete_decorators = [cached];
+            _moveTo_decorators = [cached];
+            _moveBy_decorators = [cached];
+            __esDecorate(this, null, _set_decorators, { kind: "method", name: "set", static: false, private: false, access: { has: obj => "set" in obj, get: obj => obj.set }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _delete_decorators, { kind: "method", name: "delete", static: false, private: false, access: { has: obj => "delete" in obj, get: obj => obj.delete }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _moveTo_decorators, { kind: "method", name: "moveTo", static: false, private: false, access: { has: obj => "moveTo" in obj, get: obj => obj.moveTo }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _moveBy_decorators, { kind: "method", name: "moveBy", static: false, private: false, access: { has: obj => "moveBy" in obj, get: obj => obj.moveBy }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        setState = __runInitializers(this, _instanceExtraInitializers);
+        constructor(setState) {
+            this.setState = setState;
+        }
+        set(index) {
+            return value => this.setState(prevState => [
+                ...prevState.slice(0, index),
+                applyStateUpdater(value, prevState[index]),
+                ...prevState.slice(index + 1),
+            ]);
+        }
+        delete(index) {
+            return () => this.setState(prevState => [
+                ...prevState.slice(0, index),
+                ...prevState.slice(index + 1),
+            ]);
+        }
+        ;
+        moveTo(index) {
+            return (newIndex) => this.setState(prevState => {
+                const rest = [
+                    ...prevState.slice(0, index),
+                    ...prevState.slice(index + 1),
+                ];
+                return [
+                    ...rest.slice(0, newIndex),
+                    prevState[index],
+                    ...rest.slice(newIndex),
+                ];
+            });
+        }
+        ;
+        moveBy(index) {
+            const moveTo = this.moveTo(index);
+            return (diff) => moveTo(index + diff);
+        }
+        ;
+        prepend = value => this.setState(prevState => [
+            applyStateUpdater(value, prevState),
+            ...prevState,
+        ]);
+        append = value => this.setState(prevState => [
+            ...prevState,
+            applyStateUpdater(value, prevState),
+        ]);
+    };
+})();
+
+function useObjectSubstates(setState) {
+    return useMemo(() => new ObjectSubstateProvider(setState), [setState]);
+}
+function useArraySubstates(setState) {
+    return useMemo(() => new ArraySubstateProvider(setState), [setState]);
+}
+
+export { ArraySubstateProvider, Button, CheckboxInput, NumberInput, ObjectSubstateProvider, Select, TextInput, Textarea, applyStateUpdater, getSelectMaps, useArraySubstates, useEventListener, useObjectSubstates, useWrappedHandler };

package/dist/esm/substate/hooks.d.ts

@@ -0,0 +1,3 @@
+import { ObjectSubstateProvider, ArraySubstateProvider, type StateUpdater } from './providers.js';
+export declare function useObjectSubstates<TBase extends object>(setState: StateUpdater<TBase>): ObjectSubstateProvider<TBase>;
+export declare function useArraySubstates<TItem>(setState: StateUpdater<TItem[], readonly TItem[]>): ArraySubstateProvider<TItem>;

package/dist/esm/substate/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks.js';
+export * from './providers.js';

package/dist/esm/substate/providers.d.ts

@@ -0,0 +1,21 @@
+export type StateUpdater<TState, TPrevState = TState> = (value: TState | ((prevState: TPrevState) => TState)) => void;
+export declare function applyStateUpdater<TState, TPrevState>(value: TState | ((prevState: TPrevState) => void), prevState: TPrevState): TState;
+export type OptionalKeyOf<T extends object> = {
+    [K in keyof T]: T extends Record<K, T[K]> ? never : K;
+}[keyof T];
+export declare class ObjectSubstateProvider<TBase extends object> {
+    private readonly setState;
+    constructor(setState: StateUpdater<TBase>);
+    set<TKey extends keyof TBase>(key: TKey): StateUpdater<TBase[TKey]>;
+    delete(key: OptionalKeyOf<TBase>): () => void;
+}
+export declare class ArraySubstateProvider<TItem> {
+    private readonly setState;
+    constructor(setState: StateUpdater<TItem[], readonly TItem[]>);
+    set(index: number): StateUpdater<TItem>;
+    delete(index: number): () => void;
+    moveTo(index: number): (newIndex: number) => void;
+    moveBy(index: number): (diff: number) => void;
+    prepend: StateUpdater<TItem, readonly TItem[]>;
+    append: StateUpdater<TItem, readonly TItem[]>;
+}

package/dist/esm/substate/providers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/jest.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  "moduleNameMapper": {
+    "^(\\.\\.?\\/.+)\\.js$": "$1",
+  },
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@thom1729/react-utils",
+  "version": "0.0.2",
+  "description": "",
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "types": "dist/esm/index.d.js",
+  "scripts": {
+    "build": "rollup --config rollup.config.js",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Thom1729/react-utils.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Thom1729/react-utils/issues"
+  },
+  "homepage": "https://github.com/Thom1729/react-utils#readme",
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "jest": "^29.7.0",
+    "rollup": "^4.21.2",
+    "rollup-plugin-ts": "^3.4.5",
+    "ts-jest": "^29.1.3",
+    "typescript": "^5.6.2"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "tslib": "^2.7.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,16 @@
+import ts from '@rollup/plugin-typescript';
+
+export default [
+  {
+    input: ['src/index.ts'],
+    output: [
+      {
+        dir: 'dist/esm',
+        format: 'esm',
+      },
+    ],
+    plugins: [
+      ts(),
+    ],
+  },
+];

package/src/components/helpers.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+export type ExtendBuiltin<
+  TElementName extends keyof JSX.IntrinsicElements,
+  TAdditional extends object = {},
+  TOmit extends string = never,
+> = TAdditional & Omit<JSX.IntrinsicElements[TElementName], keyof TAdditional | TOmit>;
+
+export function useWrappedHandler<TEvent, TReturn>(
+  callback: undefined | ((value: TReturn) => void),
+  convert: (event: TEvent) => TReturn,
+  dependencies: readonly unknown[],
+) {
+  return useMemo(
+    () => callback && ((event: TEvent) => {
+      callback(convert(event));
+    }),
+    [dependencies], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+}

package/src/components/index.tsx

@@ -0,0 +1,11 @@
+export * from './helpers.js';
+export * from './input.js';
+export * from './select.js';
+
+import { type FC } from 'react';
+import type { ExtendBuiltin } from './helpers.js';
+
+export const Button: FC<ExtendBuiltin<'button'>> = ({
+  type = 'button',
+  ...rest
+}) => <button type={type} {...rest} />;

package/src/components/input.tsx

@@ -0,0 +1,95 @@
+import {
+  type FC,
+  type ChangeEvent,
+} from 'react';
+
+import { useWrappedHandler, type ExtendBuiltin } from './helpers';
+
+export const TextInput: FC<ExtendBuiltin<'input', {
+  value: string,
+  onChange?: (value: string) => void,
+}>> = ({
+  type = 'text',
+  value,
+  onChange,
+  ...rest
+}) => {
+  const onChangeCallback = useWrappedHandler<ChangeEvent<HTMLInputElement>, string>(
+    onChange,
+    event => event.currentTarget.value,
+    [onChange],
+  );
+
+  return <input
+    type={type}
+    value={value}
+    onChange={onChangeCallback}
+    {...rest}
+  />
+};
+
+export const NumberInput: FC<ExtendBuiltin<'input', {
+  value: number,
+  onChange?: (value: number) => void,
+}>> = ({
+  type = 'number',
+  value,
+  onChange,
+  ...rest
+}) => {
+  const onChangeCallback = useWrappedHandler<ChangeEvent<HTMLInputElement>, number>(
+    onChange,
+    event => event.currentTarget.valueAsNumber,
+    [onChange],
+  );
+
+  return <input
+    type={type}
+    value={value}
+    onChange={onChangeCallback}
+    {...rest}
+  />
+};
+
+export const CheckboxInput: FC<ExtendBuiltin<'input', {
+  value: boolean,
+  onChange?: (value: boolean) => void,
+}, 'checked' | 'type'>> = ({
+  value,
+  onChange,
+  ...rest
+}) => {
+  const onChangeCallback = useWrappedHandler<ChangeEvent<HTMLInputElement>, boolean>(
+    onChange,
+    event => event.currentTarget.checked,
+    [onChange],
+  );
+
+  return <input
+    type='checkbox'
+    checked={value}
+    onChange={onChangeCallback}
+    {...rest}
+  />
+};
+
+export const Textarea: FC<ExtendBuiltin<'textarea', {
+  value: string,
+  onChange?: (value: string) => void,
+}>> = ({
+  value,
+  onChange,
+  ...rest
+}) => {
+  const onChangeCallback = useWrappedHandler<ChangeEvent<HTMLTextAreaElement>, string>(
+    onChange,
+    event => event.currentTarget.value,
+    [onChange],
+  );
+
+  return <textarea
+    value={value}
+    onChange={onChangeCallback}
+    {...rest}
+  />
+};

package/src/components/select.tsx

@@ -0,0 +1,116 @@
+import {
+  useMemo,
+  type ChangeEvent,
+} from 'react';
+
+import { useWrappedHandler, type ExtendBuiltin } from './helpers';
+
+export type SelectOptionLeaf<TValue> =
+| {
+  value: TValue & (string | number),
+  key?: string | number,
+  label?: string,
+  children?: undefined,
+}
+| {
+  value: TValue,
+  key: string | number,
+  label: string,
+  children?: undefined,
+};
+
+export type SelectOption<TValue> =
+| SelectOptionLeaf<TValue>
+| {
+  value?: undefined,
+  key: string | number,
+  label: string,
+  children: readonly SelectOption<TValue>[],
+};
+
+function *iterateOptions<TValue>(
+  options: readonly SelectOption<TValue>[],
+): Iterable<SelectOptionLeaf<TValue>> {
+  for (const option of options) {
+    if (option.children !== undefined) {
+      yield* iterateOptions(option.children);
+    } else {
+      yield option;
+    }
+  }
+}
+
+export function getSelectMaps<TValue>(
+  options: readonly SelectOption<TValue>[],
+) {
+  const optionsArray = Array.from(iterateOptions(options));
+
+  return {
+    keyToValue: new Map(optionsArray.map(({ key, value }) => [key ?? (value as string | number), value])),
+    valueToKey: new Map(optionsArray.map(({ key, value }) => [value, key ?? (value as string | number)])),
+  };
+}
+
+export function Select<const TValue>({
+  options,
+  value,
+  onChange,
+  ...rest
+}: ExtendBuiltin<
+  'select',
+  {
+    options: readonly SelectOption<TValue>[],
+    value: TValue,
+    onChange?: ((value: TValue) => void) | undefined,
+  },
+  'children'
+>) {
+  const { keyToValue, valueToKey } = useMemo(() => getSelectMaps(options), [options]);
+
+  const onChangeCallback = useWrappedHandler<ChangeEvent<HTMLSelectElement>, TValue>(
+    onChange,
+    event => {
+      const result = keyToValue.get(event.currentTarget.value);
+      if (result === undefined) throw new TypeError(typeof event.currentTarget.value);
+      return result;
+    },
+    [onChange, keyToValue],
+  );
+
+  const selectedKey = valueToKey.get(value);
+  if (selectedKey === undefined) throw new TypeError();
+
+  return <select
+    onChange={onChangeCallback}
+    value={selectedKey}
+    {...rest}
+  >
+    <SelectOptions options={options} />
+  </select>;
+};
+
+function SelectOptions<TValue>({
+  options,
+}: {
+  options: readonly SelectOption<TValue>[],
+}) {
+  return <>
+    {options.map(option => {
+      if (option.children !== undefined) {
+        return <optgroup
+          key={option.key}
+          label={option.label}
+        >
+          <SelectOptions options={option.children}/>
+        </optgroup>
+      } else {
+        return <option
+          key={option.key ?? (option.value as string | number)}
+          value={option.key ?? (option.value as string | number)}
+        >
+          {option.label}
+        </option>;
+      }
+    })}
+  </>;
+}

package/src/hooks/index.ts

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

package/src/hooks/useEventListener.ts

@@ -0,0 +1,42 @@
+import { useMemo, useEffect } from 'react';
+
+export type EventTypes<TTarget extends EventTarget> = {
+  [K in keyof TTarget as (K extends `on${infer Name}` ? Name : never)]:
+    Exclude<TTarget[K], null | undefined> extends ((event: infer TEvent extends Event) => unknown)
+      ? TEvent
+      : never
+};
+
+export function useEventListener<
+  TTarget extends EventTarget,
+  TEventType extends keyof EventTypes<TTarget>
+>(
+  target: TTarget | undefined,
+  type: TEventType,
+  listener: ((event: EventTypes<TTarget>[TEventType]) => void) | undefined,
+  dependencies: readonly unknown[],
+): void;
+
+export function useEventListener(
+  target: EventTarget | undefined,
+  type: string,
+  listener: ((event: Event) => void) | undefined,
+  dependencies: readonly unknown[],
+): void;
+
+export function useEventListener(
+  target: EventTarget | undefined,
+  type: string,
+  listener: ((event: Event) => void) | undefined,
+  dependencies: readonly unknown[],
+) {
+  const callback = useMemo(() => listener, dependencies);
+
+  useEffect(() => {
+    if (target !== undefined && callback !== undefined) {
+      target.addEventListener(type, callback);
+
+      return () => { target.removeEventListener(type, callback) };
+    }
+  }, [target, type, callback]);
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './substate/index.js';

package/src/substate/hooks.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+import {
+  ObjectSubstateProvider, ArraySubstateProvider,
+  type StateUpdater,
+} from './providers.js';
+
+export function useObjectSubstates<TBase extends object>(
+  setState: StateUpdater<TBase>,
+) {
+  return useMemo(() => new ObjectSubstateProvider(setState), [setState]);
+}
+
+export function useArraySubstates<TItem>(
+  setState: StateUpdater<TItem[], readonly TItem[]>,
+) {
+  return useMemo(() => new ArraySubstateProvider(setState), [setState]);
+}

package/src/substate/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks.js';
+export * from './providers.js';

package/src/substate/providers.test.ts

@@ -0,0 +1,99 @@
+import type { SetStateAction } from 'react';
+import {
+  ObjectSubstateProvider, ArraySubstateProvider,
+  applyStateUpdater,
+} from './providers.js';
+
+class MockState<T> {
+  state: T;
+
+  constructor(state: T) {
+    this.state = state;
+  }
+
+  setState(action: SetStateAction<T>) {
+    this.state = applyStateUpdater(action, this.state);
+  };
+}
+
+describe(ObjectSubstateProvider, () => {
+  type State = {
+    string: string;
+    optional?: string;
+    number: number;
+  };
+
+  const initialState: State = {
+    string: 'a',
+    optional: 'a',
+    number: 1,
+  };
+
+  function setup() {
+    const mockState = new MockState(initialState);
+    const provider = new ObjectSubstateProvider(mockState.setState.bind(mockState));
+    return [mockState, provider] as const;
+  }
+
+  test('set', () => {
+    const [mockState, provider] = setup();
+
+    expect(provider.set('string')).toBe(provider.set('string'));
+
+    provider.set('string')('b');
+    expect(mockState.state).toStrictEqual({
+      string: 'b',
+      optional: 'a',
+      number: 1,
+    });
+  });
+
+  test('delete', () => {
+    const [mockState, provider] = setup();
+
+    expect(provider.delete('optional')).toBe(provider.delete('optional'));
+
+    provider.delete('optional')();
+    expect(mockState.state).not.toHaveProperty('optional');
+  });
+});
+
+describe(ArraySubstateProvider, () => {
+  function setup() {
+    const mockState = new MockState([0, 1, 2]);
+    const provider = new ArraySubstateProvider(mockState.setState.bind(mockState));
+    return [mockState, provider] as const;
+  }
+
+  test('set', () => {
+    const [mockState, provider] = setup();
+
+    expect(provider.set(0)).toBe(provider.set(0));
+
+    provider.set(0)(10);
+    expect(mockState.state).toStrictEqual([10, 1, 2]);
+  });
+
+  test('delete', () => {
+    const [mockState, provider] = setup();
+
+    expect(provider.delete(0)).toBe(provider.delete(0));
+
+    provider.delete(1)();
+    expect(mockState.state).toStrictEqual([0, 2]);
+  });
+
+  test('prepend', () => {
+    const [mockState, provider] = setup();
+
+    (provider.prepend)(-1);
+    expect(mockState.state).toStrictEqual([-1, 0, 1, 2]);
+  });
+
+  test('apppend', () => {
+    const [mockState, provider] = setup();
+
+    (provider.append)(3);
+    expect(mockState.state).toStrictEqual([0, 1, 2, 3]);
+  });
+});

package/src/substate/providers.ts

@@ -0,0 +1,126 @@
+export type StateUpdater<TState, TPrevState = TState> =
+  (value: TState | ((prevState: TPrevState) => TState)) => void;
+
+export function applyStateUpdater<TState, TPrevState>(
+  value: TState | ((prevState: TPrevState) => void),
+  prevState: TPrevState,
+) {
+  if (typeof value === 'function') {
+    return (value as (prevState: TPrevState) => TState)(prevState);
+  } else {
+    return value;
+  }
+}
+
+function cached<TThis, TKey, TReturn>(
+  originalMethod: (this: TThis, key: TKey) => TReturn,
+  context: ClassMethodDecoratorContext,
+): (this: TThis, key: TKey) => TReturn {
+  const cacheProperty = Symbol(`__cache__${context.name.toString()}`);
+  type HasCache = { [cacheProperty]: Map<TKey, TReturn> };
+
+  context.addInitializer(function() {
+    (this as HasCache)[cacheProperty] = new Map<TKey, TReturn>();
+  });
+
+  const wrappedName = `__wrapped__${context.name.toString()}`;
+
+  return {
+    [wrappedName](this: TThis, key: TKey): TReturn {
+      const cache = (this as HasCache)[cacheProperty];
+      if (cache.has(key)) {
+        return cache.get(key)!;
+      } else {
+        const result = originalMethod.call(this, key);
+        cache.set(key, result);
+        return result;
+      }
+    },
+  }[wrappedName];
+}
+
+export type OptionalKeyOf<T extends object> = {
+  [K in keyof T]: T extends Record<K, T[K]> ? never : K
+}[keyof T];
+
+export class ObjectSubstateProvider<TBase extends object> {
+  private readonly setState: StateUpdater<TBase>;
+
+  constructor(setState: StateUpdater<TBase>) {
+    this.setState = setState;
+  }
+
+  @cached
+  set<TKey extends keyof TBase>(key: TKey): StateUpdater<TBase[TKey]> {
+    return value => this.setState(prevState => ({
+      ...prevState,
+      [key]: applyStateUpdater(value, prevState[key]),
+    }));
+  }
+
+  @cached
+  delete(key: OptionalKeyOf<TBase>) {
+    return () => this.setState(({
+      [key]: _,
+      ...rest
+    }) => rest as TBase);
+  }
+}
+
+export class ArraySubstateProvider<TItem> {
+  private readonly setState: StateUpdater<TItem[], readonly TItem[]>;
+  
+  constructor(setState: StateUpdater<TItem[], readonly TItem[]>) {
+    this.setState = setState;
+  }
+
+  @cached
+  set(index: number): StateUpdater<TItem> {
+    return value => this.setState(prevState => [
+      ...prevState.slice(0, index),
+      applyStateUpdater(value, prevState[index]),
+      ...prevState.slice(index + 1),
+    ]);
+  }
+
+  @cached
+  delete (index: number) {
+    return () => this.setState(prevState => [
+      ...prevState.slice(0, index),
+      ...prevState.slice(index + 1),
+    ])
+  };
+
+  @cached
+  moveTo(index: number) {
+    return (newIndex: number) => this.setState(prevState => {
+      const rest = [
+        ...prevState.slice(0, index),
+        ...prevState.slice(index + 1),
+      ];
+      return [
+        ...rest.slice(0, newIndex),
+        prevState[index],
+        ...rest.slice(newIndex),
+      ];
+    });
+  };
+
+  @cached
+  moveBy(index: number) {
+    const moveTo = this.moveTo(index);
+    return (diff: number) => moveTo(index + diff);
+  };
+
+  prepend: StateUpdater<TItem, readonly TItem[]> =
+    value => this.setState(prevState => [
+      applyStateUpdater(value, prevState),
+      ...prevState,
+    ]);
+
+  append: StateUpdater<TItem, readonly TItem[]> =
+    value => this.setState(prevState => [
+      ...prevState,
+      applyStateUpdater(value, prevState),
+    ]);
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "lib": ["es2022", "DOM"],
+    "target": "es2022",
+    "declaration": true,
+    "declarationDir": "./dist/esm",
+
+    "module": "esnext",
+    "moduleResolution": "bundler",
+
+    "jsx": "react-jsx",
+
+    "paths": {
+      "@": ["src"],
+      "@/*": ["src/*"],
+    },
+    "forceConsistentCasingInFileNames": true,
+
+    "strict": true
+  },
+}