@tempots/dom 35.0.4 → 36.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/dom",
-  "version": "35.0.4",
+  "version": "36.0.0",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -14,7 +14,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@tempots/core": "^2.0.4"
+    "@tempots/core": "^2.1.0",
+    "@tempots/render": "^0.0.1"
   },
   "description": "Fully-typed frontend framework alternative to React and Angular",
   "keywords": [

package/renderable/async.d.ts

@@ -1,36 +1,2 @@
-import { Renderable, TNode } from '../types/domain';
-/**
- * Options for the `Async` component.
- * @typeParam T - The type of the value.
- * @public
- */
-export type AsyncOptions<T> = {
-    /**
-     * The node to render while the promise is pending.
-     */
-    pending?: () => TNode;
-    /**
-     * The node to render when the promise is resolved.
-     *
-     * @param value - The value returned by the promise.
-     * @returns The node to render.
-     */
-    then: (value: T) => TNode;
-    /**
-     * The node to render when the promise is rejected.
-     *
-     * @param error - The error returned by the promise.
-     * @returns The node to render.
-     */
-    error?: (error: unknown) => TNode;
-};
-/**
- * Creates a renderable asynchronous task that wraps a promise.
- *
- * @typeParam T - The type of the value returned by the promise.
- * @param promise - The promise to wrap.
- * @param options - The options for the asynchronous task.
- * @returns The renderable asynchronous task.
- * @public
- */
-export declare const Async: <T>(promise: Promise<T>, options: AsyncOptions<T> | ((value: T) => TNode)) => Renderable;
+export { Async } from './shared';
+export type { AsyncOptions } from '@tempots/render';

package/renderable/conjunction.d.ts

@@ -1,25 +1,2 @@
-import { Signal, ElementPosition } from '@tempots/core';
-import { Renderable, TNode } from '../types/domain';
-/**
- * Options for configuring a conjunction.
- * @public
- */
-export type ConjunctionOptions = {
-    /**
-     * The separator to use for the last element.
-     */
-    lastSeparator?: () => TNode;
-    /**
-     * The separator to use for the first element.
-     */
-    firstSeparator?: () => TNode;
-};
-/**
- * Creates a Renderable that returns the appropriate separator based on the element position.
- *
- * @param separator - The default separator to use.
- * @param options - The options for configuring the conjunction.
- * @returns A function that returns the appropriate separator based on the element position.
- * @public
- */
-export declare const Conjunction: (separator: () => TNode, options?: ConjunctionOptions) => (pos: Signal<ElementPosition>) => Renderable;
+export { Conjunction } from './shared';
+export type { ConjunctionOptions } from '@tempots/render';

package/renderable/element.d.ts

@@ -1,12 +1,6 @@
 import { TNode, Renderable } from '../types/domain';
-import { DOMContext } from '../dom/dom-context';
-/**
- * Converts a TNode into a Renderable.
- * @param child - The TNode to convert.
- * @returns The corresponding Renderable.
- * @public
- */
-export declare const renderableOfTNode: <T extends DOMContext>(child: TNode<T>) => Renderable<T>;
+import { renderableOfTNode } from './shared';
+export { renderableOfTNode };
 /**
  * Creates a Renderable that represents an HTML element.
  *

package/renderable/empty.d.ts

@@ -1,7 +1 @@
-import { Renderable } from '../types/domain';
-/**
- * Represents an empty renderable object.
- * @returns A renderable object that does nothing.
- * @public
- */
-export declare const Empty: Renderable;
+export { Empty } from './shared';

package/renderable/ensure.d.ts

@@ -1,90 +1,2 @@
-import { TNode, Renderable } from '../types/domain';
-import { Signal, Value } from '@tempots/core';
-export type NillifyValue<T> = Value<T | null | undefined> | Value<T | undefined> | Value<T | null>;
-export type Id<T> = {} & {
-    [P in keyof T]: T[P];
-};
-export type Merge<A, B> = Id<A & B>;
-export type NonNillable<T> = Merge<T, {}>;
-/**
- * Conditionally renders content based on whether a value is non-null/non-undefined.
- *
- * This function provides a type-safe way to handle nullable values in your UI. It only
- * renders the `then` content when the value is not null or undefined, and optionally
- * renders alternative content when the value is null/undefined.
- *
- * @example
- * ```typescript
- * // With a signal that might be null
- * const user = prop<User | null>(null)
- *
- * Ensure(user,
- *   (userSignal) => html.div('Welcome, ', userSignal.map(u => u.name)),
- *   () => html.div('Please log in')
- * )
- * ```
- *
- * @example
- * ```typescript
- * // With a literal value
- * const maybeData = getData() // returns string | null
- *
- * Ensure(maybeData,
- *   (dataSignal) => html.div('Data: ', dataSignal),
- *   () => html.div('No data available')
- * )
- * ```
- *
- * @typeParam T - The type of the value when it's not null/undefined
- * @param value - A signal or literal value that may be null or undefined
- * @param then - Function that receives a signal of the non-nullable value and returns content to render
- * @param otherwise - Optional function that returns content to render when value is null/undefined
- * @returns A renderable that conditionally displays content based on the value's nullability
- * @public
- */
-export declare const Ensure: <T>(value: NillifyValue<T>, then: (value: Signal<NonNillable<T>>) => TNode, otherwise?: () => TNode) => Renderable;
-/**
- * Conditionally renders content only when ALL provided values are non-null/non-undefined.
- *
- * This function is useful when you need multiple values to be present before rendering content.
- * It waits for all values to be non-null/non-undefined before calling the callback function.
- * If any value becomes null/undefined, it will render the `otherwise` content instead.
- *
- * @example
- * ```typescript
- * const user = prop<User | null>(null)
- * const profile = prop<Profile | null>(null)
- * const settings = prop<Settings | null>(null)
- *
- * EnsureAll(user, profile, settings)(
- *   (userSignal, profileSignal, settingsSignal) => html.div(
- *     html.h1('Dashboard'),
- *     html.div('User: ', userSignal.map(u => u.name)),
- *     html.div('Profile: ', profileSignal.map(p => p.bio)),
- *     html.div('Theme: ', settingsSignal.map(s => s.theme))
- *   ),
- *   () => html.div('Loading user data...')
- * )
- * ```
- *
- * @example
- * ```typescript
- * // Mix of signals and literal values
- * const apiData = prop<Data | null>(null)
- * const staticConfig = { theme: 'dark' }
- *
- * EnsureAll(apiData, staticConfig)(
- *   (dataSignal, configSignal) => html.div(
- *     'Data loaded with theme: ',
- *     configSignal.map(c => c.theme)
- *   ),
- *   () => html.div('Waiting for data...')
- * )
- * ```
- *
- * @typeParam T - Tuple type representing the types of all input values
- * @param signals - Variable number of values (signals or literals) that may be null/undefined
- * @returns A function that takes a callback and optional otherwise function, returning a renderable
- * @public
- */
-export declare const EnsureAll: <T extends readonly Value<any>[]>(...signals: { [K in keyof T]: NillifyValue<T[K]>; }) => (callback: (...values: { [K in keyof T]: Signal<NonNillable<T[K] extends Value<infer U> ? U : never>>; }) => TNode, otherwise?: () => TNode) => Renderable;
+export { Ensure, EnsureAll } from './shared';
+export type { NillifyValue, NonNillable, Id, Merge } from '@tempots/render';

package/renderable/foreach.d.ts

@@ -1,63 +1 @@
-import { TNode, Renderable } from '../types/domain';
-import { Signal, Value, ElementPosition } from '@tempots/core';
-/**
- * Efficiently renders a dynamic list of items from an array signal.
- *
- * This function creates a reactive list that automatically updates when the source array changes.
- * Each item in the array gets its own signal that tracks changes to that specific item.
- * The list efficiently handles additions, removals, and modifications to the array.
- *
- * @example
- * ```typescript
- * const todos = prop([
- *   { id: 1, text: 'Learn Tempo', done: false },
- *   { id: 2, text: 'Build an app', done: false }
- * ])
- *
- * ForEach(todos,
- *   (todoSignal, position) => html.div(
- *     html.input(
- *       attr.type('checkbox'),
- *       attr.checked(todoSignal.map(t => t.done))
- *     ),
- *     html.span(todoSignal.map(t => t.text)),
- *     html.small(`Item ${position.index + 1}`)
- *   )
- * )
- * ```
- *
- * @example
- * ```typescript
- * // With separators between items
- * const items = prop(['apple', 'banana', 'cherry'])
- *
- * ForEach(items,
- *   (itemSignal) => html.span(itemSignal),
- *   () => html.span(', ') // Separator between items
- * )
- * // Renders: apple, banana, cherry
- * ```
- *
- * @example
- * ```typescript
- * // Using position information
- * const numbers = prop([10, 20, 30])
- *
- * ForEach(numbers,
- *   (numberSignal, position) => html.div(
- *     `Position ${position.index}: `,
- *     numberSignal,
- *     position.isFirst ? ' (first)' : '',
- *     position.isLast ? ' (last)' : ''
- *   )
- * )
- * ```
- *
- * @typeParam T - The type of items in the array
- * @param value - A signal or literal array to iterate over
- * @param item - Function that renders each item, receives the item signal and position info
- * @param separator - Optional function that renders content between items
- * @returns A renderable that displays the dynamic list
- * @public
- */
-export declare const ForEach: <T>(value: Value<T[]>, item: (value: Signal<T>, position: ElementPosition) => TNode, separator?: (pos: ElementPosition) => TNode) => Renderable;
+export { ForEach } from './shared';

package/renderable/fragment.d.ts

@@ -1,14 +1 @@
-import { TNode, Renderable } from '../types/domain';
-import { DOMContext } from '../dom/dom-context';
-/**
- * Creates a fragment renderable that represents a collection of child renderables.
- *
- * The Fragment itself does not render any DOM elements. Instead, it renders the child renderables in the given DOM context.
- *
- * It can be used any time a single Renderable/TNode is expected, but multiple renderables are needed.
- *
- * @param children - The child renderables to include in the fragment.
- * @returns A renderable object that renders the child renderables in the given DOM context.
- * @public
- */
-export declare const Fragment: <T extends DOMContext>(...children: TNode<T>[]) => Renderable<T>;
+export { Fragment } from './shared';

package/renderable/map-signal.d.ts

@@ -1,18 +1 @@
-import { Renderable, TNode } from '../types/domain';
-import { Value } from '@tempots/core';
-/**
- * Maps the values emitted by a signal to a renderable function and returns a new renderable function.
- *
- * While it is tempting to use MapSignal for its simplicity, it is important to remember that the
- * renderable function returned by MapSignal will be re-rendered every time the signal emits a new value.
- *
- * In other contexts link `Ensure` or `OneOf`, the renderable function is only re-rendered when the signal
- * changes to a state that requires a different renderable function.
- *
- * @typeParam T - The type of values emitted by the signal.
- * @param vlaue - The signal or value to map.
- * @param fn - The function to map the signal values to a renderable/TNode.
- * @returns - A new renderable function that represents the mapped signal.
- * @public
- */
-export declare const MapSignal: <T>(value: Value<T>, fn: (value: T) => TNode) => Renderable;
+export { MapSignal } from './shared';

package/renderable/not-empty.d.ts

@@ -1,15 +1 @@
-import { Signal, Value } from '@tempots/core';
-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
- * otherwise.
- *
- * @typeParam T - The type of elements in 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>(value: Value<T[]>, display: (value: Signal<T[]>) => Renderable, whenEmpty?: () => Renderable) => Renderable;
+export { NotEmpty } from './shared';

package/renderable/on-dispose.d.ts

@@ -1,13 +1,13 @@
-import { Renderable } from '../types/domain';
 import { DOMContext } from '../dom/dom-context';
-export type DisposeCallback = (removeTree: boolean, ctx: DOMContext) => void;
-export type WithDispose = {
-    dispose: DisposeCallback;
-};
+import { DisposeCallback as BaseDisposeCallback, WithDispose as BaseWithDispose } from '@tempots/render';
+export { OnDispose } from './shared';
 /**
- * Creates a renderable object that will be called when the component is unmounted.
- * @param fns - The function(s) to be called when the component is unmounted.
- * @returns A renderable object that takes a DOMContext and returns a function that takes a boolean indicating whether to remove the tree.
+ * Callback invoked on dispose, specialized for DOMContext.
  * @public
  */
-export declare const OnDispose: (...fns: (DisposeCallback | WithDispose)[]) => Renderable;
+export type DisposeCallback = BaseDisposeCallback<DOMContext>;
+/**
+ * Object with a dispose method, specialized for DOMContext.
+ * @public
+ */
+export type WithDispose = BaseWithDispose<DOMContext>;

package/renderable/oneof.d.ts

@@ -1,153 +1,2 @@
-import { Signal, Value } from '@tempots/core';
-import { Renderable, TNode } from '../types/domain';
-/**
- * Represents a set of options for a one-of type.
- * @typeParam T - The type of the options.
- * @public
- */
-export type OneOfOptions<T extends Record<string, unknown>> = {
-    [KK in keyof T]: (value: Signal<T[KK]>) => TNode;
-};
-/**
- * Converts an object to a union of its keys.
- * @typeParam T - The type of the object.
- * @public
- */
-export type ObjectToUnion<T> = {
-    [K in keyof T]: {
-        [P in K]: T[K];
-    };
-}[keyof T];
-/**
- * Creates a renderable function that renders different components based on the value of a signal.
- *
- * 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 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: Value<T>, cases: OneOfOptions<T>) => Renderable;
-/**
- * Represents the options for a one-of field.
- *
- * @typeParam T - The type containing the one-of field.
- * @typeParam K - The key of the one-of field in the type.
- * @public
- */
-export type OneOfFieldOptions<T extends {
-    [_ in K]: string;
-}, K extends string> = {
-    [KK in T[K]]: (value: Signal<T extends {
-        [_ in K]: KK;
-    } ? T : never>) => TNode;
-};
-/**
- * Creates a renderable that renders different components based on the value of the specified field.
- *
- * @typeParam T - The type containing the one-of field.
- * @typeParam K - The type of the one-of field key.
- * @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: Value<T>, field: K, cases: OneOfFieldOptions<T, K>) => Renderable;
-/**
- * The options for a one-of kind field.
- *
- * @typeParam T - The type that contains the `kind` property.
- * @public
- */
-export type OneOfKindOptions<T extends {
-    kind: string;
-}> = {
-    [KK in T['kind']]: (value: Signal<T extends {
-        kind: KK;
-    } ? T : never>) => TNode;
-};
-/**
- * Creates a renderable field that matches the value of the `kind` property in the provided `match` signal.
- *
- * It uses the `cases` object to determine the appropriate field to render based on the value of `kind`.
- *
- * @typeParam T - The type of the object with a `kind` property.
- * @param match - The signal containing the object to match against.
- * @param cases - The object containing the cases to match against.
- * @returns - The renderable field that matches the value of `kind`.
- * @public
- */
-export declare const OneOfKind: <T extends {
-    kind: string;
-}>(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`.
- *
- * @typeParam T - The union type of keys.
- * @typeParam V - The type of the value accepted by the functions.
- * @public
- */
-export type OneOfTupleOptions<T extends string, V> = {
-    [KK in T]: (value: Signal<V>) => TNode;
-};
-/**
- * Creates a tuple-based one-of component that matches a signal value with a set of cases.
- *
- * The signal value should be a tuple with the first element being the key to match against.
- *
- * @param match - The signal containing the value to match.
- * @param cases - The options for the one-of component.
- * @returns The result of matching the signal value with the cases.
- * @public
- */
-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.
- * @public
- */
-export type OneOfTypeOptions<T extends {
-    type: string;
-}> = {
-    [KK in T['type']]: (value: Signal<T extends {
-        type: KK;
-    } ? T : never>) => TNode;
-};
-/**
- * Creates a field that renders one of the provided cases based on the value of the `type` property.
- *
- * It uses the `cases` object to determine the appropriate field to render based on the value of `type`.
- *
- * @typeParam T - The type of the object with a `type` property.
- * @param match - The signal that contains the object with the `type` property.
- * @param cases - The options for rendering each case based on the `type` property.
- * @returns - The rendered field.
- * @public
- */
-export declare const OneOfType: <T extends {
-    type: string;
-}>(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.
- * @public
- */
-export type OneOfValueOptions<T extends symbol | number | string> = {
-    [KK in T]: () => TNode;
-};
-/**
- * Creates a renderable value that represents one of the provided cases based on the given match signal.
- *
- * The match signal should emit a value that matches one of the keys in the `cases` object.
- *
- * @typeParam T - The type of the match signal value.
- * @param match - The match signal.
- * @param cases - The options for the one-of value.
- * @returns - The renderable value representing one of the cases.
- * @public
- */
-export declare const OneOfValue: <T extends symbol | number | string>(match: Value<T>, cases: OneOfValueOptions<T>) => Renderable;
+export { OneOf, OneOfField, OneOfKind, OneOfType, OneOfValue, OneOfTuple, } from './shared';
+export type { OneOfOptions, ObjectToUnion, OneOfFieldOptions, OneOfKindOptions, OneOfTupleOptions, OneOfTypeOptions, OneOfValueOptions, } from '@tempots/render';