@tempots/dom 20.0.1 → 21.0.0

package/package.json

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

package/renderable/attribute.d.ts

@@ -1,4 +1,5 @@
-import { NValue, Renderable, Value } from '../types/domain';
+import { NValue, Renderable } from '../types/domain';
+import { Value } from '../std/value';
 /**
  * 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/ensure.d.ts

@@ -1,13 +1,14 @@
 import { TNode, Renderable } from '../types/domain';
 import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 /**
  * Represents a function that ensures a signal has a value before rendering a TNode.
  *
  * @typeParam T - The type of the signal value.
- * @param signal - The signal to ensure has a value.
+ * @param value - The signal or literal that may hold a value of type T or null or undefined.
  * @param then - The function that returns a TNode when the signal has a value. It takes a signal of the non-nullable type of T.
  * @param otherwise - The function that returns a TNode when the signal does not have a value.
  * @returns A renderable function that ensures the signal has a value before rendering a TNode.
  * @public
  */
-export declare const Ensure: <T>(signal: Signal<T | null> | Signal<T | undefined> | Signal<T | null | undefined>, then: (value: Signal<NonNullable<T>>) => TNode, otherwise?: () => TNode) => Renderable;
+export declare const Ensure: <T>(value: Value<T | null> | Value<T | undefined> | Value<T | null | undefined>, then: (value: Signal<NonNullable<T>>) => TNode, otherwise?: () => TNode) => Renderable;

package/renderable/foreach.d.ts

@@ -1,14 +1,15 @@
 import { TNode, Renderable } from '../types/domain';
 import { Signal } from '../std/signal';
 import { ElementPosition } from '../std/position';
+import { Value } from '../std/value';
 /**
  * Renders a list of items based on a signal of arrays.
  *
  * @typeParam T - The type of items in the array.
- * @param signal - The signal of arrays to iterate over.
+ * @param value - The signal of arrays to iterate over.
  * @param item - The function that renders each item in the array.
  * @param separator - The function that renders the separator between items.
  * @returns - The renderable function that renders the list of items.
  * @public
  */
-export declare const ForEach: <T>(signal: Signal<T[]>, item: (value: Signal<T>, position: Signal<ElementPosition>) => TNode, separator?: (pos: Signal<ElementPosition>) => TNode) => Renderable;
+export declare const ForEach: <T>(value: Value<T[]>, item: (value: Signal<T>, position: Signal<ElementPosition>) => TNode, separator?: (pos: Signal<ElementPosition>) => TNode) => Renderable;

package/renderable/map-signal.d.ts

@@ -1,5 +1,5 @@
 import { Renderable } from '../types/domain';
-import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 /**
  * Maps the values emitted by a signal to a renderable function and returns a new renderable function.
  *
@@ -10,9 +10,9 @@ import { Signal } from '../std/signal';
  * changes to a state that requires a different renderable function.
  *
  * @typeParam T - The type of values emitted by the signal.
- * @param signal - The signal to map.
+ * @param vlaue - The signal or value to map.
  * @param fn - The function to map the signal values to renderable functions.
  * @returns - A new renderable function that represents the mapped signal.
  * @public
  */
-export declare const MapSignal: <T>(signal: Signal<T>, fn: (value: T) => Renderable) => Renderable;
+export declare const MapSignal: <T>(value: Value<T>, fn: (value: T) => Renderable) => Renderable;

package/renderable/not-empty.d.ts

@@ -1,4 +1,4 @@
-import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 import { Renderable } from '../types/domain';
 /**
  * Returns a renderable component that displays the given `display` component
@@ -6,10 +6,10 @@ import { Renderable } from '../types/domain';
  * otherwise.
  *
  * @typeParam T - The type of elements in the array.
- * @param signal - The signal containing the array.
+ * @param value - The signal or literal containing the array.
  * @param display - The component to display when the array is non-empty.
  * @param whenEmpty- The component to display when the array is empty.
  * @returns - The renderable component.
  * @public
  */
-export declare const NotEmpty: <T>(signal: Signal<T[]>, display: Renderable, whenEmpty?: Renderable) => Renderable;
+export declare const NotEmpty: <T>(value: Value<T[]>, display: Renderable, whenEmpty?: Renderable) => Renderable;

package/renderable/oneof.d.ts

@@ -1,4 +1,5 @@
 import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 import { Renderable, TNode } from '../types/domain';
 /**
  * Represents a set of options for a one-of type.
@@ -14,12 +15,12 @@ export type OneOfOptions<T extends Record<string, unknown>> = {
  * The signal value should be an object with a single key that matches one of the keys in the `cases` object.
  *
  * @typeParam T - The type of the signal value.
- * @param match - The signal to match against.
+ * @param match - The signal or value to match against.
  * @param cases - An object containing the different cases to render based on the signal value.
  * @returns A renderable function that renders the appropriate component based on the signal value.
  * @public
  */
-export declare const OneOf: <T extends Record<string, unknown>>(match: Signal<T>, cases: OneOfOptions<T>) => Renderable;
+export declare const OneOf: <T extends Record<string, unknown>>(match: Value<T>, cases: OneOfOptions<T>) => Renderable;
 /**
  * Represents the options for a one-of field.
  *
@@ -39,13 +40,13 @@ export type OneOfFieldOptions<T extends {
  *
  * @typeParam T - The type containing the one-of field.
  * @typeParam K - The type of the one-of field key.
- * @param match - The signal that emits the object containing the one-of field.
+ * @param match - The signal or value that emits the object containing the one-of field.
  * @param field - The key of the one-of field.
  * @param cases - The options for the different cases of rendering based on the one-of field value.
  * @returns - The renderable field representing the one-of field.
  * @public
  */
-export declare const OneOfField: <T extends { [_ in K]: string; }, K extends string>(match: Signal<T>, field: K, cases: OneOfFieldOptions<T, K>) => Renderable;
+export declare const OneOfField: <T extends { [_ in K]: string; }, K extends string>(match: Value<T>, field: K, cases: OneOfFieldOptions<T, K>) => Renderable;
 /**
  * The options for a one-of kind field.
  *
@@ -72,7 +73,7 @@ export type OneOfKindOptions<T extends {
  */
 export declare const OneOfKind: <T extends {
     kind: string;
-}>(match: Signal<T>, cases: OneOfKindOptions<T>) => Renderable;
+}>(match: Value<T>, cases: OneOfKindOptions<T>) => Renderable;
 /**
  * Represents a mapping of keys to functions that accept a value of type `Signal<V>`
  * and return a `TNode`.
@@ -94,7 +95,7 @@ export type OneOfTupleOptions<T extends string, V> = {
  * @returns The result of matching the signal value with the cases.
  * @public
  */
-export declare const OneOfTuple: <T extends string, V>(match: Signal<[T, V]>, cases: OneOfTupleOptions<T, V>) => Renderable;
+export declare const OneOfTuple: <T extends string, V>(match: Value<[T, V]>, cases: OneOfTupleOptions<T, V>) => Renderable;
 /**
  * Represents a mapping of types to rendering functions.
  * @typeParam T - The type that contains a `type` property.
@@ -120,7 +121,7 @@ export type OneOfTypeOptions<T extends {
  */
 export declare const OneOfType: <T extends {
     type: string;
-}>(match: Signal<T>, cases: OneOfTypeOptions<T>) => Renderable;
+}>(match: Value<T>, cases: OneOfTypeOptions<T>) => Renderable;
 /**
  * Represents a set of options for a one-of value.
  * @typeParam T - The type of the one-of value.
@@ -140,4 +141,4 @@ export type OneOfValueOptions<T extends symbol | number | string> = {
  * @returns - The renderable value representing one of the cases.
  * @public
  */
-export declare const OneOfValue: <T extends symbol | number | string>(match: Signal<T>, cases: OneOfValueOptions<T>) => Renderable;
+export declare const OneOfValue: <T extends symbol | number | string>(match: Value<T>, cases: OneOfValueOptions<T>) => Renderable;

package/renderable/repeat.d.ts

@@ -1,5 +1,6 @@
 import { ElementPosition } from '../std/position';
 import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 import { TNode, Renderable } from '../types/domain';
 /**
  * Creates a renderable function that repeats a given element a specified number of times.
@@ -10,4 +11,4 @@ import { TNode, Renderable } from '../types/domain';
  * @returns A renderable function that renders the repeated elements.
  * @public
  */
-export declare const Repeat: (times: Signal<number>, element: (index: Signal<ElementPosition>) => TNode, separator?: (pos: Signal<ElementPosition>) => TNode) => Renderable;
+export declare const Repeat: (times: Value<number>, element: (index: Signal<ElementPosition>) => TNode, separator?: (pos: Signal<ElementPosition>) => TNode) => Renderable;

package/renderable/text.d.ts

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

package/renderable/when.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, TNode } from '../types/domain';
-import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 /**
  * Renders the `then` node if the `condition` is true, otherwise renders the `otherwise` node.
  *
@@ -9,7 +9,7 @@ import { Signal } from '../std/signal';
  * @returns The rendered node.
  * @public
  */
-export declare const When: (condition: Signal<boolean>, then: TNode, otherwise?: TNode) => Renderable;
+export declare const When: (condition: Value<boolean>, then: TNode, otherwise?: TNode) => Renderable;
 /**
  * Executes the `then` TNode if the `condition` Signal evaluates to `false`, otherwise executes the `otherwise` TNode.
  *
@@ -19,4 +19,4 @@ export declare const When: (condition: Signal<boolean>, then: TNode, otherwise?:
  * @returns The result of executing the `then` or `otherwise` TNode based on the condition.
  * @public
  */
-export declare const Unless: (condition: Signal<boolean>, then: TNode, otherwise?: TNode) => Renderable;
+export declare const Unless: (condition: Value<boolean>, then: TNode, otherwise?: TNode) => Renderable;

package/std/position.d.ts

@@ -41,13 +41,13 @@ export declare class ElementPosition {
      */
     get isLast(): boolean;
     /**
-     * Checks if the index of the element is even.
-     * @returns `true` if the index is even, `false` otherwise.
+     * Checks if the counter of the element is even.
+     * @returns `true` if the counter is even, `false` otherwise.
      */
     get isEven(): boolean;
     /**
-     * Checks if the index of the element is odd.
-     * @returns `true` if the index is odd, `false` otherwise.
+     * Checks if the counter of the element is odd.
+     * @returns `true` if the counter is odd, `false` otherwise.
      */
     get isOdd(): boolean;
 }

package/std/signal-utils.d.ts

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

package/std/signal.d.ts

@@ -1,4 +1,3 @@
-import { GetValueTypes, Value } from '../types/domain';
 /**
  * Represents any type of signal.
  * It can be a Signal, Prop, or Computed.
@@ -39,46 +38,7 @@ export declare class Signal<T> {
      * @param value - The value to check.
      * @returns `true` if the value is a Signal, `false` otherwise.
      */
-    static readonly is: <O = unknown>(value: unknown) => value is Signal<O>;
-    /**
-     * Wraps a value or a Signal instance into a Signal.
-     * If the value is already a Signal, it returns the value itself.
-     * If the value is not a Signal, it creates a new Signal instance with the given value.
-     *
-     * @typeParam O - The type of the value.
-     * @param value - The value or Signal instance to wrap.
-     * @param equals - A function that determines if two values are equal. Defaults to strict equality (===).
-     * @returns A Signal instance.
-     */
-    static readonly wrap: <O>(value: O | Signal<O>, equals?: (a: O, b: O) => boolean) => Signal<O>;
-    /**
-     * Wraps a value in a `Signal` if it is not already a `Signal`.
-     * If the value is `null` or `undefined`, it returns `null` or `undefined` respectively.
-     * @param value - The value to wrap or check.
-     * @returns The wrapped value if it is not `null` or `undefined`, otherwise `null` or `undefined`.
-     */
-    static readonly maybeWrap: <O>(value: O | Signal<O> | null | undefined) => Signal<O> | undefined | null;
-    /**
-     * Unwraps a value from a `Signal` if it is a `Signal`, otherwise returns the value as is.
-     *
-     * @param value - The value to unwrap.
-     * @returns The unwrapped value.
-     */
-    static readonly unwrap: <O>(value: Signal<O> | O) => O;
-    /**
-     * Maps the value of a `Signal` or a regular value using the provided mapping function.
-     * If the input value is a `Signal`, the mapping function is applied to its value.
-     * If the input value is not a `Signal`, the mapping function is directly applied to the value.
-     *
-     * @param value - The input value to be mapped.
-     * @param fn - The mapping function to be applied to the value.
-     * @returns A new `Signal` with the mapped value if the input value is a `Signal`,
-     * otherwise, the result of applying the mapping function to the value.
-     *
-     * @typeParam N - The type of the input value.
-     * @typeParam O - The type of the mapped value.
-     */
-    static readonly map: <N, O>(value: Value<N>, fn: (value: N) => O) => Value<O>;
+    static readonly is: <O>(value: O | Signal<O>) => value is Signal<O>;
     /**
      * @internal
      */
@@ -363,7 +323,7 @@ export declare class Prop<T> extends Signal<T> {
      * @param value - The value to check.
      * @returns `true` if the value is a Prop, `false` otherwise.
      */
-    static is: <T_1 = unknown>(value: unknown) => value is Prop<T_1>;
+    static is: <T_1>(value: T_1 | Prop<T_1> | Signal<T_1> | Computed<T_1>) => value is Prop<T_1>;
     /**
      * @internal
      */
@@ -422,16 +382,6 @@ 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.
@@ -442,14 +392,6 @@ export declare const makeComputedOf: <T extends Value<unknown>[]>(...args: T) =>
  * @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/std/value.d.ts

@@ -0,0 +1,71 @@
+import { GetValueTypes } from '../types/domain';
+import { Signal } from './signal';
+/**
+ * Represents a value that can either be a `Signal<T>` or a generic type `T`.
+ *
+ * @public
+ */
+export type Value<T> = Signal<T> | T;
+export declare const Value: {
+    /**
+     * Maps a value or a Signal to a new value.
+     * If the value is a Signal, it returns a new Signal with the mapped value.
+     * If the value is not a Signal, it returns the mapped value.
+     *
+     * @typeParam T - The type of the value.
+     * @typeParam U - The type of the new value.
+     * @param value - The value or Signal to map.
+     * @param fn - The function to map the value.
+     * @returns The mapped value.
+     */
+    map: <T, U>(value: Value<T>, fn: (value: T) => U) => Value<U>;
+    /**
+     * Wraps a value or a Signal instance into a Signal.
+     * If the value is already a Signal, it returns the value itself.
+     * If the value is not a Signal, it creates a new Signal instance with the given value.
+     *
+     * @typeParam O - The type of the value.
+     * @param value - The value or Signal instance to wrap.
+     * @param equals - A function that determines if two values are equal. Defaults to strict equality (===).
+     * @returns A Signal instance.
+     */
+    toSignal: <T>(value: Value<T>, equals?: (a: T, b: T) => boolean) => Signal<T>;
+    /**
+     * Wraps a value in a `Signal` if it is not already a `Signal`.
+     * If the value is `null` or `undefined`, it returns `null` or `undefined` respectively.
+     * @param value - The value to wrap or check.
+     * @returns The wrapped value if it is not `null` or `undefined`, otherwise `null` or `undefined`.
+     */
+    maybeToSignal: <T>(value: Value<T> | undefined | null, equals?: (a: T, b: T) => boolean) => Signal<T> | undefined;
+    /**
+     * Gets the value from a `Signal` or the value itself if it is not a `Signal`.
+     * @param value - The value or Signal instance to get the value from.
+     * @returns The value.
+     */
+    get: <T>(value: Value<T>) => T;
+    /**
+     * Adds a listener to a `Signal` or calls the listener immediately if it is not a `Signal`.
+     * @param value - The value or Signal instance to add the listener to.
+     * @param listener - The listener to call when the value changes.
+     * @returns A function to remove the listener.
+     */
+    on: <T>(value: Value<T>, listener: (value: T) => void) => (() => void);
+};
+/**
+ * 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) => import('./signal').Computed<O>;
+/**
+ * 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;

package/types/domain.d.ts

@@ -1,5 +1,6 @@
 import { DOMContext } from '../dom/dom-context';
 import { Signal } from '../std/signal';
+import { Value } from '../std/value';
 /**
  * Represents a function that can be rendered in the DOM.
  * @param ctx - The DOM context for rendering.
@@ -47,12 +48,6 @@ export type Size = {
      */
     readonly height: number;
 };
-/**
- * Represents a value that can either be a `Signal<T>` or a generic type `T`.
- *
- * @public
- */
-export type Value<T> = Signal<T> | T;
 /**
  * Represents a nullable value or a signal of a nullable value.
  * @typeParam T - The type of the value.