@tempots/dom 19.3.1 → 20.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/dom",
-  "version": "19.3.1",
+  "version": "20.0.1",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/renderable/async.d.ts

@@ -1,5 +1,4 @@
 import { Renderable, TNode } from '../types/domain';
-
 /**
  * Options for the `Async` component.
  * @typeParam T - The type of the value.

package/renderable/attribute.d.ts

@@ -1,5 +1,4 @@
 import { NValue, Renderable, Value } from '../types/domain';
-
 /**
  * The `attr` object allows to create any HTML attribute. Either a literal value
  * or `Signal<?>` can be passed as a value. The type of the value is inferred

package/renderable/bind.d.ts

@@ -1,7 +1,6 @@
 import { Prop } from '../std/signal';
 import { Renderable } from '../types/domain';
 import { on } from './handler';
-
 /**
  * Binds a `Date` property to an input element. The binding is two-way.
  * Changes to the input element will update the property but will only be

package/renderable/conjunction.d.ts

@@ -1,7 +1,6 @@
 import { Signal } from '../std/signal';
 import { Renderable, TNode } from '../types/domain';
 import { ElementPosition } from '../std/position';
-
 /**
  * Options for configuring a conjunction.
  * @public

package/renderable/consumers.d.ts

@@ -1,5 +1,4 @@
 import { TNode, Renderable, ProviderMark } from '../types/domain';
-
 /**
  * Converts a tuple type `T` into an array of `ProviderMark` types.
  * If `T` is an empty tuple, returns an empty array.

package/renderable/domnode.d.ts

@@ -1,5 +1,4 @@
 import { Renderable } from '../types/domain';
-
 /**
  * Creates a renderable DOM node.
  *

package/renderable/element.d.ts

@@ -1,5 +1,4 @@
 import { TNode, Renderable } from '../types/domain';
-
 /**
  * Converts a TNode into a Renderable.
  * @param child - The TNode to convert.

package/renderable/empty.d.ts

@@ -1,5 +1,4 @@
 import { Renderable } from '../types/domain';
-
 /**
  * Represents an empty renderable function.
  * @returns A renderable function that does nothing.

package/renderable/ensure.d.ts

@@ -1,6 +1,5 @@
 import { TNode, Renderable } from '../types/domain';
 import { Signal } from '../std/signal';
-
 /**
  * Represents a function that ensures a signal has a value before rendering a TNode.
  *

package/renderable/foreach.d.ts

@@ -1,7 +1,6 @@
 import { TNode, Renderable } from '../types/domain';
 import { Signal } from '../std/signal';
 import { ElementPosition } from '../std/position';
-
 /**
  * Renders a list of items based on a signal of arrays.
  *

package/renderable/fragment.d.ts

@@ -1,5 +1,4 @@
 import { TNode, Renderable } from '../types/domain';
-
 /**
  * Creates a fragment renderable that represents a collection of child renderables.
  *

package/renderable/handler.d.ts

@@ -1,5 +1,4 @@
 import { Renderable } from '../types/domain';
-
 /**
  * Attaches an event handler to the 'click' event that triggers when a checkbox is checked or unchecked.
  * @param fn - The callback function to be executed when the checkbox is clicked.

package/renderable/map-signal.d.ts

@@ -1,6 +1,5 @@
 import { Renderable } from '../types/domain';
 import { Signal } from '../std/signal';
-
 /**
  * Maps the values emitted by a signal to a renderable function and returns a new renderable function.
  *

package/renderable/not-empty.d.ts

@@ -1,6 +1,5 @@
 import { Signal } from '../std/signal';
 import { Renderable } from '../types/domain';
-
 /**
  * Returns a renderable component that displays the given `display` component
  * when the `signal` contains a non-empty array, and the `whenEmpty` component

package/renderable/onctx.d.ts

@@ -1,6 +1,5 @@
 import { DOMContext } from '../dom/dom-context';
 import { Clear, Renderable } from '../types/domain';
-
 /**
  * Returns a renderable function that executes the given function with the current DOMContext as argument.
  *

package/renderable/oneof.d.ts

@@ -1,6 +1,5 @@
 import { Signal } from '../std/signal';
 import { Renderable, TNode } from '../types/domain';
-
 /**
  * Represents a set of options for a one-of type.
  * @typeParam T - The type of the options.

package/renderable/onmount.d.ts

@@ -1,5 +1,4 @@
 import { Clear, Renderable } from '../types/domain';
-
 /**
  * Executes a callback function when the parent element is mounted in the DOM.
  *

package/renderable/onunmount.d.ts

@@ -1,6 +1,5 @@
 import { Renderable } from '../types/domain';
 import { DOMContext } from '../dom/dom-context';
-
 /**
  * Creates a renderable function that will be called when the component is unmounted.
  * @param fn - The function to be called when the component is unmounted.

package/renderable/portal.d.ts

@@ -1,5 +1,4 @@
 import { Renderable, TNode } from '../types/domain';
-
 /**
  * Renders the given `node` into a DOM element selected by the provided `selector`.
  * Throws an error if the element cannot be found.

package/renderable/providers.d.ts

@@ -1,5 +1,4 @@
 import { TNode, Renderable, ProviderMark } from '../types/domain';
-
 /**
  * Represents a provider function that takes a `TNode` and returns a `Renderable`.
  * @param node - The node to be rendered.

package/renderable/render.d.ts

@@ -1,6 +1,5 @@
 import { Renderable } from '../types/domain';
 import { DOMContext } from '../dom/dom-context';
-
 /**
  * Renders the given `renderable` with the provided `ctx` DOM context.
  *

package/renderable/repeat.d.ts

@@ -1,7 +1,6 @@
 import { ElementPosition } from '../std/position';
 import { Signal } from '../std/signal';
 import { TNode, Renderable } from '../types/domain';
-
 /**
  * Creates a renderable function that repeats a given element a specified number of times.
  *

package/renderable/style.d.ts

@@ -1,5 +1,4 @@
 import { NValue, Renderable } from '../types/domain';
-
 /**
  * A collection of functions to create style renderables.
  * @public

package/renderable/task.d.ts

@@ -1,5 +1,4 @@
 import { TNode, Renderable } from '../types/domain';
-
 /**
  * Represents the options for a task.
  *

package/renderable/text.d.ts

@@ -1,6 +1,5 @@
 import { Renderable, Value } from '../types/domain';
 import { Signal } from '../std/signal';
-
 /**
  * @internal
  */

package/renderable/when.d.ts

@@ -1,6 +1,5 @@
 import { Renderable, TNode } from '../types/domain';
 import { Signal } from '../std/signal';
-
 /**
  * Renders the `then` node if the `condition` is true, otherwise renders the `otherwise` node.
  *

package/std/signal-utils.d.ts

@@ -1,6 +1,5 @@
 import { RemoveSignals, Value } from '../types/domain';
 import { AnySignal, Computed, Prop, Signal } from './signal';
-
 /**
  * Represents a memory store that stores key-value pairs.
  *

package/std/signal.d.ts

@@ -1,5 +1,4 @@
-import { Value } from '../types/domain';
-
+import { GetValueTypes, Value } from '../types/domain';
 /**
  * Represents any type of signal.
  * It can be a Signal, Prop, or Computed.
@@ -190,10 +189,14 @@ export declare class Signal<T> {
      */
     readonly at: <K extends keyof T>(key: K) => Signal<T[K]>;
     /**
-     * Represents a collection of signals for each key in the value of the signal.
+     * @internal
+     */
+    private _$;
+    /**
+     * Represents a collection of signals mapping to each key/field in the wrapped value.
      * @typeParam T - The type of the signals.
      */
-    readonly $: AtGetter<T>;
+    get $(): AtGetter<T>;
     readonly filter: (fn: (value: T) => boolean, startValue?: T) => Computed<T>;
     /**
      * Returns a new Computed object that applies the provided mapping function to the value of this Signal,
@@ -419,6 +422,16 @@ export declare class Prop<T> extends Signal<T> {
  * @public
  */
 export declare const makeComputed: <T>(fn: () => T, dependencies: Array<AnySignal>, equals?: (a: T, b: T) => boolean) => Computed<T>;
+/**
+ * Creates a computed signal that depends on other signals or literal values and updates when any of the dependencies change.
+ *
+ * @typeParam T - The type of the argument values.
+ * @param fn - The function that computes the value.
+ * @param equals - The equality function used to compare the previous and current computed values.
+ * @returns - The computed signal.
+ * @public
+ */
+export declare const makeComputedOf: <T extends Value<unknown>[]>(...args: T) => <O>(fn: (...args: GetValueTypes<T>) => O, equals?: (a: O, b: O) => boolean) => Computed<O>;
 /**
  * Executes the provided function `fn` whenever any of the signals in the `signals` array change.
  * Returns a disposable object that can be used to stop the effect.
@@ -429,6 +442,14 @@ export declare const makeComputed: <T>(fn: () => T, dependencies: Array<AnySigna
  * @public
  */
 export declare const makeEffect: (fn: () => void, signals: Array<AnySignal>) => () => void;
+/**
+ * Creates an effect that depends on other signals or literal values and updates when any of the dependencies change.
+ *
+ * @param args - The array of signals or literal values that the effect depends on.
+ * @returns A disposable object that can be used to stop the effect.
+ * @public
+ */
+export declare const makeEffectOf: <T extends Value<unknown>[]>(...args: T) => (fn: (...args: GetValueTypes<T>) => void) => void;
 /**
  * Creates a new Prop object with the specified value and equality function.
  *

package/types/domain.d.ts

@@ -1,6 +1,5 @@
 import { DOMContext } from '../dom/dom-context';
 import { Signal } from '../std/signal';
-
 /**
  * Represents a function that can be rendered in the DOM.
  * @param ctx - The DOM context for rendering.
@@ -67,6 +66,13 @@ export type NValue<T> = Value<T> | Value<T | null> | Value<T | undefined> | Valu
  * @public
  */
 export type GetValueType<T> = T extends Signal<infer V> ? V : T;
+/**
+ * Gets the value types of a given array of Value types.
+ * @public
+ */
+export type GetValueTypes<T extends Value<unknown>[]> = {
+    [K in keyof T]: GetValueType<T[K]>;
+};
 /**
  * Removes signals from a given object type and returns a new object type
  * with only the non-signal properties.

package/dom/animatable.d.ts

@@ -1,79 +0,0 @@
-export type AnimatableProps = {
-    width?: number;
-    maxWidth?: number;
-    minWidth?: number;
-    height?: number;
-    maxHeight?: number;
-    minHeight?: number;
-    lineHeight?: number;
-    opacity?: number;
-    top?: number;
-    left?: number;
-    right?: number;
-    bottom?: number;
-    padding?: number;
-    paddingTop?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
-    paddingRight?: number;
-    margin?: number;
-    marginTop?: number;
-    marginBottom?: number;
-    marginLeft?: number;
-    marginRight?: number;
-    fontSize?: number;
-    letterSpacing?: number;
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    borderWidth?: number;
-    borderRadius?: number;
-    boxShadow?: string;
-    textShadow?: string;
-    outlineWidth?: number;
-    outlineColor?: string;
-    translateX?: number;
-    translateY?: number;
-    translateZ?: number;
-    rotateX?: number;
-    rotateY?: number;
-    rotateZ?: number;
-    scaleX?: number;
-    scaleY?: number;
-    scaleZ?: number;
-    skewX?: number;
-    skewY?: number;
-    grayScale?: number;
-    sepia?: number;
-    saturate?: number;
-    hueRotate?: number;
-    invert?: number;
-    brightness?: number;
-    contrast?: number;
-    blur?: number;
-};
-export type ColorChannels = [
-    number,
-    number,
-    number,
-    number,
-    'rgba' | 'hex' | 'hsla'
-];
-export declare const parseColorChannels: (color: string) => ColorChannels;
-export interface BoxShadow {
-    inset: boolean;
-    x: number;
-    y: number;
-    blur: number;
-    spread: number;
-    color: string;
-}
-export declare const colorChannelsToString: (channels: ColorChannels) => string;
-export declare const interpolateColor: (startColor: string, endColor: string) => ((t: number) => string);
-export declare const interpolateShadow: (startShadow: string, endShadow: string) => ((t: number) => string);
-export declare const getComputedAnimatableProp: (styles: CSSStyleDeclaration, key: keyof AnimatableProps) => AnimatableProps[typeof key];
-export declare const getComputedAnimatable: (el: HTMLElement, styles: AnimatableProps) => AnimatableProps;
-export declare const applyAnimatableProp: (el: HTMLElement, key: keyof AnimatableProps, value: AnimatableProps[typeof key]) => void;
-export declare const applyInterpolatedAnimatableProp: (el: HTMLElement, key: keyof AnimatableProps, from: AnimatableProps[typeof key], to: AnimatableProps[typeof key], progress: number) => void;
-export declare const applyInterpolatedAnimatable: (el: HTMLElement, from: AnimatableProps, to: AnimatableProps, progress: number) => void;
-export declare const applyAnimatable: (el: HTMLElement, styles: AnimatableProps) => void;

package/dom/handle-anchor-click.d.ts

@@ -1,25 +0,0 @@
-/**
- * Options for handling anchor click events.
- * @public
- */
-export type HandleAnchorClickOptions = {
-    /**
-     * A boolean indicating whether to check the anchor's href for a file extension.
-     */
-    checkExtension?: boolean | string[];
-    /**
-     * A boolean indicating whether to check if the anchor's href points to an external URL.
-     */
-    checkExternalUrl?: boolean;
-};
-/**
- * Handles anchor click events, optionally checking for external URLs and file extensions.
- *
- * @param callback - A function that is called when the anchor click should be handled. The function should return a boolean indicating whether the default anchor click behavior should be prevented.
- * @param options - An optional object with the following properties:
- *   - `checkExtension`: A boolean indicating whether to check the anchor's href for a file extension. Defaults to `true`.
- *   - `checkExternalUrl`: A boolean indicating whether to check if the anchor's href points to an external URL. Defaults to `true`.
- * @returns A function that handles the anchor click event, calling the provided callback and preventing the default behavior if the callback returns `true`.
- * @public
- */
-export declare const handleAnchorClick: (callback: () => boolean, { checkExtension, checkExternalUrl, }?: HandleAnchorClickOptions) => (e: MouseEvent) => void;