@tempots/dom 21.0.0 → 22.1.0

package/package.json

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

package/renderable/bind.d.ts

@@ -1,6 +1,6 @@
 import { Prop } from '../std/signal';
 import { Renderable } from '../types/domain';
-import { on } from './handler';
+import { on } from './on';
 /**
  * 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,6 +1,6 @@
 import { Signal } from '../std/signal';
 import { Renderable, TNode } from '../types/domain';
-import { ElementPosition } from '../std/position';
+import { ElementPosition } from '../std/element-position';
 /**
  * Options for configuring a conjunction.
  * @public

package/renderable/foreach.d.ts

@@ -1,6 +1,6 @@
 import { TNode, Renderable } from '../types/domain';
 import { Signal } from '../std/signal';
-import { ElementPosition } from '../std/position';
+import { ElementPosition } from '../std/element-position';
 import { Value } from '../std/value';
 /**
  * Renders a list of items based on a signal of arrays.
@@ -12,4 +12,4 @@ import { Value } from '../std/value';
  * @returns - The renderable function that renders the list of items.
  * @public
  */
-export declare const ForEach: <T>(value: Value<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: ElementPosition) => TNode, separator?: (pos: ElementPosition) => TNode) => Renderable;

package/renderable/repeat.d.ts

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

package/renderable/when.d.ts

@@ -1,22 +1,38 @@
 import { Renderable, TNode } from '../types/domain';
 import { Value } from '../std/value';
 /**
- * Renders the `then` node if the `condition` is true, otherwise renders the `otherwise` node.
- *
- * @param condition - The condition to evaluate.
- * @param then - The node to render if the condition is true.
- * @param otherwise - The node to render if the condition is false.
- * @returns The rendered node.
+ * Renders content conditionally based on a boolean value.
+ * @param condition - The condition to evaluate
+ * @param then - Content to render if condition is true
+ * @param otherwise - Optional content to render if condition is false
+ * @returns Renderable content
  * @public
  */
 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.
- *
- * @param condition - The Signal representing the condition to evaluate.
- * @param then - The TNode to execute if the condition is `false`.
- * @param otherwise - The optional TNode to execute if the condition is `true`.
- * @returns The result of executing the `then` or `otherwise` TNode based on the condition.
+ * Lazily renders content based on a boolean condition.
+ * @param condition - The condition to evaluate
+ * @param then - Function returning content to render if condition is true
+ * @param otherwise - Optional function returning content to render if condition is false
+ * @returns Renderable content
+ * @public
+ */
+export declare const LazyWhen: (condition: Value<boolean>, then: () => TNode, otherwise?: () => TNode) => Renderable;
+/**
+ * Renders content when a condition is false.
+ * @param condition - The condition to evaluate
+ * @param then - Content to render if condition is false
+ * @param otherwise - Optional content to render if condition is true
+ * @returns Renderable content
  * @public
  */
 export declare const Unless: (condition: Value<boolean>, then: TNode, otherwise?: TNode) => Renderable;
+/**
+ * Lazily renders content when a condition is false.
+ * @param condition - The condition to evaluate
+ * @param then - Function returning content to render if condition is false
+ * @param otherwise - Optional function returning content to render if condition is true
+ * @returns Renderable content
+ * @public
+ */
+export declare const LazyUnless: (condition: Value<boolean>, then: () => TNode, otherwise?: () => TNode) => Renderable;

package/std/{position.d.ts → element-position.d.ts}

@@ -1,9 +1,11 @@
+import { Signal } from './signal';
 /**
  * Represents the position of an element in a collection.
  *
  * @public
  */
 export declare class ElementPosition {
+    #private;
     /**
      * The index of the element.
      */
@@ -11,7 +13,26 @@ export declare class ElementPosition {
     /**
      * The total number of elements in the collection.
      */
-    readonly total: number;
+    readonly total: Signal<number>;
+    /**
+     * The counter of the element starting from 1.
+     */
+    readonly counter: number;
+    /**
+     * Checks if the element is the first element in the collection.
+     * @returns `true` if the element is the first element, `false` otherwise.
+     */
+    readonly isFirst: boolean;
+    /**
+     * Checks if the counter of the element is even.
+     * @returns `true` if the counter is even, `false` otherwise.
+     */
+    readonly isEven: boolean;
+    /**
+     * Checks if the counter of the element is odd.
+     * @returns `true` if the counter is odd, `false` otherwise.
+     */
+    readonly isOdd: boolean;
     /**
      * Creates a new instance of `ElementPosition`.
      * @param index - The index of the element.
@@ -25,29 +46,11 @@ export declare class ElementPosition {
     /**
      * The total number of elements in the collection.
      */
-    total: number);
-    /**
-     * Gets the counter of the element.
-     */
-    get counter(): number;
-    /**
-     * Checks if the element is the first element in the collection.
-     * @returns `true` if the element is the first element, `false` otherwise.
-     */
-    get isFirst(): boolean;
+    total: Signal<number>);
     /**
      * Checks if the element is the last element in the collection.
      * @returns `true` if the element is the last element, `false` otherwise.
      */
-    get isLast(): boolean;
-    /**
-     * Checks if the counter of the element is even.
-     * @returns `true` if the counter is even, `false` otherwise.
-     */
-    get isEven(): boolean;
-    /**
-     * Checks if the counter of the element is odd.
-     * @returns `true` if the counter is odd, `false` otherwise.
-     */
-    get isOdd(): boolean;
+    get isLast(): Signal<boolean>;
+    readonly dispose: () => void;
 }

package/std/value.d.ts

@@ -50,6 +50,13 @@ export declare const Value: {
      * @returns A function to remove the listener.
      */
     on: <T>(value: Value<T>, listener: (value: T) => void) => (() => void);
+    /**
+     * Disposes of a value or a Signal.
+     * If the value is a Signal, it disposes of the Signal.
+     * If the value is not a Signal, it does nothing.
+     * @param value - The value or Signal instance to dispose of.
+     */
+    dispose: <T>(value: Value<T>) => void;
 };
 /**
  * Creates a computed signal that depends on other signals or literal values and updates when any of the dependencies change.

package/types/domain.d.ts

@@ -1,5 +1,4 @@
 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.
@@ -60,7 +59,7 @@ export type NValue<T> = Value<T> | Value<T | null> | Value<T | undefined> | Valu
  * Otherwise, it returns the type itself.
  * @public
  */
-export type GetValueType<T> = T extends Signal<infer V> ? V : T;
+export type GetValueType<T> = T extends Value<infer V> ? V : T;
 /**
  * Gets the value types of a given array of Value types.
  * @public