@tempots/dom 31.4.0 → 31.6.0

package/package.json

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

package/renderable/attribute.d.ts

@@ -119,6 +119,7 @@ export declare const attr: {
     popovertargetaction: (value: SplitNValue<"toggle" | "hide" | "show">) => Renderable;
     poster: (value: SplitNValue<string>) => Renderable;
     preload: (value: SplitNValue<string>) => Renderable;
+    property: (value: SplitNValue<string>) => Renderable;
     radiogroup: (value: SplitNValue<string>) => Renderable;
     readonly: (value: SplitNValue<boolean>) => Renderable;
     referrerpolicy: (value: SplitNValue<"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">) => Renderable;
@@ -161,6 +162,8 @@ export declare const attr: {
     innerText: (value: SplitNValue<string>) => Renderable;
     innerHTML: (value: SplitNValue<string>) => Renderable;
     outerHTML: (value: SplitNValue<string>) => Renderable;
+} & {
+    set: (name: string, value: SplitNValue<string>) => Renderable;
 };
 /**
  * The `data` object allows to create any `data-` attributes. Either a literal value
@@ -176,6 +179,8 @@ export declare const attr: {
  */
 export declare const dataAttr: {
     [x: string]: (value: Value<string>) => Renderable;
+} & {
+    set: (name: string, value: Value<string>) => Renderable;
 };
 /**
  * An object that provides a convenient way to create mountable attributes for ARIA properties.
@@ -246,6 +251,8 @@ export declare const aria: {
     valuemin: (value: SplitNValue<number>) => Renderable;
     valuenow: (value: SplitNValue<number>) => Renderable;
     valuetext: (value: SplitNValue<string>) => Renderable;
+} & {
+    set: (name: string, value: Value<string>) => Renderable;
 };
 /**
  * An object that provides a convenient way to create mountable attributes for
@@ -535,6 +542,8 @@ export declare const svgAttr: {
     yChannelSelector: (value: SplitNValue<"R" | "G" | "B" | "A">) => Renderable;
     z: (value: SplitNValue<string | number>) => Renderable;
     zoomAndPan: (value: SplitNValue<"disable" | "magnify">) => Renderable;
+} & {
+    set: (name: string, value: Value<string>) => Renderable;
 };
 /**
  * An object that provides attribute functions for MathML tags.

package/renderable/utils.d.ts

@@ -0,0 +1,30 @@
+import { Clear, TNode } from '../types/domain';
+import { DOMContext } from '../dom/dom-context';
+import { Signal } from '../std/signal';
+import { Value } from '../std/value';
+/**
+ * Helper function to handle a value that could be either a Signal or a static value.
+ * Delegates to the appropriate handler based on whether the value is a Signal.
+ *
+ * @param value - The value to check (could be Signal<T> or T)
+ * @param onSignal - Handler function to call if value is a Signal
+ * @param onStatic - Handler function to call if value is static
+ * @returns The result from the appropriate handler
+ * @internal
+ */
+export declare const handleValueOrSignal: <T, R>(value: Value<T>, onSignal: (signal: Signal<T>) => R, onStatic: (literal: T) => R) => R;
+/**
+ * Creates a reactive renderable that updates when a signal changes.
+ * This helper consolidates the common pattern of:
+ * - Creating a new context reference
+ * - Setting up a signal listener that re-renders on changes
+ * - Properly cleaning up the old render before creating a new one
+ * - Disposing the signal listener and context on cleanup
+ *
+ * @param ctx - The parent DOM context
+ * @param signal - The signal to watch for changes
+ * @param render - Function that takes the signal value and returns content to render
+ * @returns A Clear function that cleans up the reactive renderable
+ * @internal
+ */
+export declare const createReactiveRenderable: <T>(ctx: DOMContext, signal: Signal<T>, render: (value: T) => TNode) => Clear;

package/std/signal-utils.d.ts

@@ -30,8 +30,9 @@ export declare class MemoryStore {
 export type StoredPropOptions<T> = {
     /**
      * The key to use for storing and retrieving the value.
+     * Can be a static string or a reactive signal that changes over time.
      */
-    key: string;
+    key: Value<string>;
     /**
      * The default value to use if the value is not found in the store.
      * This can be a value of type `T` or a function that returns a value of type `T`.
@@ -79,6 +80,13 @@ export type StoredPropOptions<T> = {
      * Whether to sync the value across tabs. Defaults to `true`.
      */
     syncTabs?: boolean;
+    /**
+     * Strategy for handling key changes when using a reactive key.
+     * - 'load' (default): Load value from new key, the current state is already stored at this point
+     * - 'migrate': Move current value to new key and continue with current value
+     * - 'keep': Keep current value without loading from new key
+     */
+    onKeyChange?: 'load' | 'migrate' | 'keep';
 };
 /**
  * Creates a stored property that persists its value in a storage mechanism.
@@ -88,7 +96,7 @@ export type StoredPropOptions<T> = {
  * @returns - The created stored property.
  * @public
  */
-export declare const storedProp: <T>({ key, defaultValue, store, serialize, deserialize, equals, onLoad, syncTabs, }: StoredPropOptions<T>) => Prop<T>;
+export declare const storedProp: <T>({ key, defaultValue, store, serialize, deserialize, equals, onLoad, syncTabs, onKeyChange, }: StoredPropOptions<T>) => Prop<T>;
 /**
  * Represents the properties required for storing and retrieving a value of type `T`.
  *
@@ -98,8 +106,9 @@ export declare const storedProp: <T>({ key, defaultValue, store, serialize, dese
 export type StorageOptions<T> = {
     /**
      * The key to use for storing and retrieving the value.
+     * Can be a static string or a reactive signal that changes over time.
      */
-    key: string;
+    key: Value<string>;
     /**
      * The default value to use if the value is not found in the store.
      * This can be a value of type `T` or a function that returns a value of type `T`.
@@ -130,6 +139,13 @@ export type StorageOptions<T> = {
      * Whether to sync the value across tabs. Defaults to `true`.
      */
     syncTabs?: boolean;
+    /**
+     * Strategy for handling key changes when using a reactive key.
+     * - 'load' (default): Load value from new key, the current state is already stored at this point
+     * - 'migrate': Move current value to new key and continue with current value
+     * - 'keep': Keep current value without loading from new key
+     */
+    onKeyChange?: 'load' | 'migrate' | 'keep';
 };
 /**
  * Creates a prop that is backed by the localStorage or a MemoryStore.

package/types/html-attributes.d.ts

@@ -107,6 +107,7 @@ export type HTMLAttributes = {
     popovertargetaction: 'hide' | 'show' | 'toggle';
     poster: string;
     preload: string;
+    property: string;
     radiogroup: string;
     readonly: boolean;
     referrerpolicy: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';