@agnos-ui/core 0.2.0 → 0.3.0

package/types.d.ts

@@ -75,10 +75,27 @@ export type WidgetProps<T extends {
     patch: (arg: Partial<infer U extends object>) => void;
 } ? U : never;
 export type WidgetFactory<W extends Widget> = (props?: PropsConfig<WidgetProps<W>>) => W;
-export type Directive<T = void> = (node: HTMLElement, args: T) => void | {
+/**
+ * Subset of HTMLElement that is available in a server side rendering context.
+ */
+export interface SSRHTMLElement extends Pick<HTMLElement, 'setAttribute' | 'removeAttribute'> {
+    /**
+     * Object allowing to manipulate the classes of the element.
+     */
+    classList: Pick<HTMLElement['classList'], 'add' | 'remove' | 'toggle'>;
+    /**
+     * Object allowing to manipulate the style of the element.
+     */
+    style: Partial<Record<StyleKey, StyleValue>>;
+}
+export type Directive<T = void, U extends SSRHTMLElement = SSRHTMLElement> = (node: U, args: T) => void | {
     update?: (args: T) => void;
     destroy?: () => void;
 };
+export type DirectiveAndParam<T, U extends SSRHTMLElement = SSRHTMLElement> = [Directive<T, U>, T];
+export type DirectivesAndOptParam<T extends any[], U extends SSRHTMLElement = SSRHTMLElement> = {
+    [K in keyof T]: Directive<void, U> | DirectiveAndParam<T[K], U>;
+};
 export type SlotContent<Props extends object = object> = undefined | null | string | ((props: Props) => string);
 export declare const INVALID_VALUE: unique symbol;
 export type NormalizeValue<T> = (value: T) => T | typeof INVALID_VALUE;
@@ -95,3 +112,6 @@ export interface WritableWithDefaultOptions<T> {
 export type ConfigValidator<T extends object> = {
     [K in keyof T]?: WritableWithDefaultOptions<T[K]>;
 };
+export type AttributeValue = string | number | boolean | undefined;
+export type StyleKey = Exclude<keyof CSSStyleDeclaration, 'length' | 'item' | 'parentRule' | 'getPropertyValue' | 'getPropertyPriority' | 'setProperty' | 'removeProperty' | typeof Symbol.iterator | number | 'cssText'>;
+export type StyleValue = string | undefined | null;

package/types.js

@@ -1,14 +1,12 @@
-/**
- * Extract actions, api, directives, state and stores from the widget to be passed to slots as context.
- *
- * @param w - the widget
- * @returns the slot context
- */
-export const toSlotContextWidget = (w) => ({
-    actions: w.actions,
-    api: w.api,
-    directives: w.directives,
-    state$: w.state$,
-    stores: w.stores,
+const toSlotContextWidget = (w) => ({
+  actions: w.actions,
+  api: w.api,
+  directives: w.directives,
+  state$: w.state$,
+  stores: w.stores
 });
-export const INVALID_VALUE = Symbol();
+const INVALID_VALUE = Symbol();
+export {
+  INVALID_VALUE,
+  toSlotContextWidget
+};

package/utils/directive.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@amadeus-it-group/tansu");
+require("esm-env");
+const utils_directive = require("../directive-BTSEYLF3.cjs");
+require("../func-Qd3cD9a3.cjs");
+require("./stores.cjs");
+exports.attributesData = utils_directive.attributesData;
+exports.bindDirective = utils_directive.bindDirective;
+exports.bindDirectiveNoArg = utils_directive.bindDirectiveNoArg;
+exports.browserDirective = utils_directive.browserDirective;
+exports.classDirective = utils_directive.classDirective;
+exports.createAttributesDirective = utils_directive.createAttributesDirective;
+exports.createBrowserStoreArrayDirective = utils_directive.createBrowserStoreArrayDirective;
+exports.createBrowserStoreDirective = utils_directive.createBrowserStoreDirective;
+exports.createStoreArrayDirective = utils_directive.createStoreArrayDirective;
+exports.createStoreDirective = utils_directive.createStoreDirective;
+exports.directiveAttributes = utils_directive.directiveAttributes;
+exports.directiveSubscribe = utils_directive.directiveSubscribe;
+exports.directiveUpdate = utils_directive.directiveUpdate;
+exports.isBrowserHTMLElement = utils_directive.isBrowserHTMLElement;
+exports.mapDirectiveArg = utils_directive.mapDirectiveArg;
+exports.mergeDirectives = utils_directive.mergeDirectives;
+exports.multiDirective = utils_directive.multiDirective;
+exports.registrationArray = utils_directive.registrationArray;
+exports.ssrAttributes = utils_directive.ssrAttributes;

package/utils/directive.d.ts

@@ -1,5 +1,18 @@
 import type { ReadableSignal } from '@amadeus-it-group/tansu';
-import type { Directive } from '../types';
+import type { AttributeValue, Directive, DirectivesAndOptParam, SSRHTMLElement, StyleKey, StyleValue } from '../types';
+/**
+ * On a browser environment, returns true if the given element is an HTMLElement.
+ * On a server environment, always returns false.
+ * @param element - The element to check.
+ * @returns true in a browser environment if the given element is an HTMLElement, otherwise false.
+ */
+export declare const isBrowserHTMLElement: (element: SSRHTMLElement) => element is HTMLElement;
+/**
+ * Creates a directive that wraps the provided directive to only run it in a browser environment (and not in a server-side rendering environment).
+ * @param directive - The directive to run only in a browser.
+ * @returns The wrapped directive.
+ */
+export declare const browserDirective: <T, U extends HTMLElement>(directive: Directive<T, U>) => Directive<T, SSRHTMLElement>;
 /**
  * Binds the given directive to a store that provides its argument.
  *
@@ -13,7 +26,7 @@ import type { Directive } from '../types';
  * @param directiveArg$ - store containing the argument of the directive
  * @returns The bound directive that can be used with no argument.
  */
-export declare const bindDirective: <T>(directive: Directive<T>, directiveArg$: ReadableSignal<T>) => Directive;
+export declare const bindDirective: <T, U extends SSRHTMLElement = SSRHTMLElement>(directive: Directive<T, U>, directiveArg$: ReadableSignal<T>) => Directive<void, U>;
 /**
  * Returns a directive that ignores any argument passed to it and calls the provided directive without any
  * argument.
@@ -21,7 +34,7 @@ export declare const bindDirective: <T>(directive: Directive<T>, directiveArg$:
  * @param directive - directive to wrap
  * @returns The resulting directive.
  */
-export declare const bindDirectiveNoArg: <T>(directive: Directive<void | T>) => Directive;
+export declare const bindDirectiveNoArg: <T, U extends SSRHTMLElement = SSRHTMLElement>(directive: Directive<T | void, U>) => Directive<void, U>;
 /**
  * Maps the argument to another argument of a directive using a provided function.
  *
@@ -29,7 +42,7 @@ export declare const bindDirectiveNoArg: <T>(directive: Directive<void | T>) =>
  * @param fn - The function to map the argument.
  * @returns A new directive that applies the mapping function to the argument.
  */
-export declare const mapDirectiveArg: <T, U>(directive: Directive<U>, fn: (arg: T) => U) => Directive<T>;
+export declare const mapDirectiveArg: <T, U, V extends SSRHTMLElement = SSRHTMLElement>(directive: Directive<U, V>, fn: (arg: T) => U) => Directive<T, V>;
 /**
  * Returns a directive that subscribes to the given store while it is used on a DOM element,
  * and that unsubscribes from it when it is no longer used.
@@ -60,6 +73,9 @@ export declare const registrationArray: <T>() => ReadableSignal<T[]> & {
  * currently used.
  *
  * @remarks
+ * It is the same as {@link createBrowserStoreArrayDirective}, but the returned directive is also executed in a server environment
+ * and the type of the elements is {@link SSRHTMLElement} instead of HTMLElement.
+ *
  * If the directive is intended to be used on a single element element, it may be more appropriate to use
  * {@link createStoreDirective} instead.
  *
@@ -69,6 +85,25 @@ export declare const registrationArray: <T>() => ReadableSignal<T[]> & {
  */
 export declare const createStoreArrayDirective: () => {
     directive: Directive;
+    elements$: ReadableSignal<SSRHTMLElement[]>;
+};
+/**
+ * Returns a directive and a store. The store contains at any time the array of all the DOM elements on which the directive is
+ * currently used.
+ *
+ * @remarks
+ * It is the same as {@link createStoreArrayDirective}, but the returned directive is only executed in a browser environment
+ * and the type of the elements is HTMLElement instead of {@link SSRHTMLElement}.
+ *
+ * If the directive is intended to be used on a single element element, it may be more appropriate to use
+ * {@link createBrowserStoreDirective} instead.
+ *
+ * @returns An object with two properties: the `directive` property that is the directive to use on some DOM elements,
+ * and the `elements$` property that is the store containing an array of all the elements on which the directive is currently
+ * used.
+ */
+export declare const createBrowserStoreArrayDirective: () => {
+    directive: Directive<void, SSRHTMLElement>;
     elements$: ReadableSignal<HTMLElement[]>;
 };
 /**
@@ -76,6 +111,9 @@ export declare const createStoreArrayDirective: () => {
  * When the directive is not used, the store contains null.
  *
  * @remarks
+ * It is the same as {@link createBrowserStoreDirective}, but the returned directive is also executed in a server environment
+ * and the type of the element is {@link SSRHTMLElement} instead of HTMLElement.
+ *
  * If the directive is used on more than one element, an error is displayed in the console and the element is ignored.
  * If the directive is intended to be used on more than one element, please use {@link createStoreArrayDirective} instead.
  *
@@ -85,6 +123,25 @@ export declare const createStoreArrayDirective: () => {
  */
 export declare const createStoreDirective: () => {
     directive: Directive;
+    element$: ReadableSignal<SSRHTMLElement | null>;
+};
+/**
+ * Returns a directive and a store. When the directive is used on a DOM element, the store contains that DOM element.
+ * When the directive is not used, the store contains null.
+ *
+ * @remarks
+ * It is the same as {@link createStoreDirective}, but the returned directive is only executed in a browser environment
+ * and the type of the element is HTMLElement instead of {@link SSRHTMLElement}.
+ *
+ * If the directive is used on more than one element, an error is displayed in the console and the element is ignored.
+ * If the directive is intended to be used on more than one element, please use {@link createStoreArrayDirective} instead.
+ *
+ * @returns An object with two properties: the `directive` property that is the directive to use on one DOM element,
+ * and the `element$` property that is the store containing the element on which the directive is currently used (or null
+ * if the store is not currently used).
+ */
+export declare const createBrowserStoreDirective: () => {
+    directive: Directive<void, SSRHTMLElement>;
     element$: ReadableSignal<HTMLElement | null>;
 };
 /**
@@ -100,4 +157,90 @@ export declare const createStoreDirective: () => {
  * @param args - directives to merge into a single directive.
  * @returns The resulting merged directive.
  */
-export declare const mergeDirectives: <T>(...args: (Directive | Directive<T>)[]) => Directive<T>;
+export declare const mergeDirectives: <T, U extends SSRHTMLElement = SSRHTMLElement>(...args: (Directive<T, U> | Directive<void, U>)[]) => Directive<T, U>;
+/**
+ * Directive that applies all the directives passed as arguments.
+ *
+ * @param element - the element to apply the directives to
+ * @param directives - the directives to apply
+ * @returns The directive instance.
+ */
+export declare const multiDirective: <T extends any[], U extends SSRHTMLElement = SSRHTMLElement>(element: U, directives: DirectivesAndOptParam<T, U>) => {
+    update: (directives: DirectivesAndOptParam<any[], U>) => void;
+    destroy: () => void;
+};
+/**
+ * Properties for configuring server-side rendering directives.
+ */
+export interface AttributesDirectiveProps {
+    /**
+     * Events to be attached to an HTML element.
+     * @remarks
+     * Key-value pairs where keys are event types and values are event handlers.
+     */
+    events?: Partial<{
+        [K in keyof HTMLElementEventMap]: {
+            handler: (this: HTMLElement, event: HTMLElementEventMap[K]) => void;
+            options?: boolean | AddEventListenerOptions;
+        } | ((this: HTMLElement, event: HTMLElementEventMap[K]) => void);
+    }>;
+    /**
+     * Attributes to be added to the provided node.
+     * @remarks
+     * The `style` attribute must be added separately.
+     */
+    attributes?: Record<string, AttributeValue | ReadableSignal<AttributeValue>>;
+    /**
+     * Styles to be added to an HTML element.
+     * @remarks
+     * Key-value pairs where keys are CSS style properties and values are style values.
+     */
+    styles?: Partial<Record<StyleKey, StyleValue | ReadableSignal<StyleValue>>>;
+    /**
+     * Class names to be added to an HTML element.
+     * @remarks
+     * Key-value pairs where keys are class names and values indicate whether the class should be added (true) or removed (false).
+     */
+    classNames?: Record<string, boolean | ReadableSignal<boolean>>;
+}
+/**
+ * Creates a directive for server-side rendering with bindable elements.
+ * This directive binds events, attributes, styles, and classNames to an HTML element.
+ *
+ * @param propsFn - A function that returns the AttributesDirectiveProps with the data to bind.
+ * This function can take an optional parameter that corrspond to the second parameter of the created directive.
+ * @returns A directive object with bound events, attributes, styles, and classNames.
+ */
+export declare const createAttributesDirective: <T = void>(propsFn: (arg: ReadableSignal<T>) => AttributesDirectiveProps) => Directive<T>;
+/**
+ * Returns an object with the attributes, style and class keys containing information derived from a list of directives.
+ *
+ *   - The `attributes` value is a JSON representation of key/value attributes, excepted for the `class` and `style` attributes
+ *   - The `classNames` value is an array of string representing the classes to be applied
+ *   - The `style` value is a JSON representation of the styles to be applied
+ *
+ * @param directives - List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
+ * @returns JSON object with the `attributes`, `class` and `style` keys.
+ */
+export declare const attributesData: <T extends any[]>(...directives: DirectivesAndOptParam<T>) => {
+    attributes: Record<string, string>;
+    classNames: string[];
+    style: Partial<Record<StyleKey, StyleValue>>;
+};
+/**
+ * Directive that takes as an argument a string containing CSS classes to be put on the HTML element.
+ */
+export declare const classDirective: Directive<string>;
+/**
+ * Returns JSON representation of the attributes to be applied derived from a list of directives.
+ *
+ * @param directives - List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
+ * @returns JSON object with name/value for the attributes
+ */
+export declare function directiveAttributes<T extends any[]>(...directives: DirectivesAndOptParam<T>): Record<string, string>;
+/**
+ * Same as {@link directiveAttributes}, but returns an empty object when run in a browser environement.
+ *
+ * @returns JSON object with name/value for the attributes
+ */
+export declare const ssrAttributes: (() => {}) | typeof directiveAttributes;

package/utils/directive.js

@@ -1,206 +1,26 @@
-import { asReadable, batch, readable, writable } from '@amadeus-it-group/tansu';
-import { noop } from './internal/func';
-/**
- * Binds the given directive to a store that provides its argument.
- *
- * @remarks
- *
- * The returned directive can be used without argument, it will ignore any argument passed to it
- * and will call the provided directive with the content of the provided store as its argument,
- * calling its update method when the content of the store changes.
- *
- * @param directive - directive to bind
- * @param directiveArg$ - store containing the argument of the directive
- * @returns The bound directive that can be used with no argument.
- */
-export const bindDirective = (directive, directiveArg$) => {
-    return (element) => {
-        let firstTime = true;
-        let instance;
-        const unsubscribe = directiveArg$.subscribe((value) => {
-            if (firstTime) {
-                firstTime = false;
-                instance = directive(element, value);
-            }
-            else {
-                instance?.update?.(value);
-            }
-        });
-        return {
-            destroy() {
-                instance?.destroy?.();
-                unsubscribe();
-            },
-        };
-    };
-};
-const noArg = readable(undefined);
-/**
- * Returns a directive that ignores any argument passed to it and calls the provided directive without any
- * argument.
- *
- * @param directive - directive to wrap
- * @returns The resulting directive.
- */
-export const bindDirectiveNoArg = (directive) => bindDirective(directive, noArg);
-/**
- * Maps the argument to another argument of a directive using a provided function.
- *
- * @param directive - The directive to be applied.
- * @param fn - The function to map the argument.
- * @returns A new directive that applies the mapping function to the argument.
- */
-export const mapDirectiveArg = (directive, fn) => (node, arg) => {
-    const instance = directive(node, fn(arg));
-    return {
-        update: (arg) => {
-            instance?.update?.(fn(arg));
-        },
-        destroy: () => instance?.destroy?.(),
-    };
-};
-/**
- * Returns a directive that subscribes to the given store while it is used on a DOM element,
- * and that unsubscribes from it when it is no longer used.
- *
- * @param store - store on which there will be an active subscription while the returned directive is used.
- * @param asyncUnsubscribe - true if unsubscribing from the store should be done asynchronously (which is the default), and
- * false if it should be done synchronously when the directive is destroyed
- * @returns The resulting directive.
- */
-export const directiveSubscribe = (store, asyncUnsubscribe = true) => () => {
-    const unsubscribe = store.subscribe(noop);
-    return {
-        destroy: async () => {
-            if (asyncUnsubscribe) {
-                await 0;
-            }
-            unsubscribe();
-        },
-    };
-};
-/**
- * Returns a directive that calls the provided function with the arguments passed to the directive
- * on initialization and each time they are updated.
- *
- * @param update - Function called with the directive argument when the directive is initialized and when its argument is updated.
- * @returns The resulting directive.
- */
-export const directiveUpdate = (update) => (element, arg) => {
-    update(arg);
-    return {
-        update,
-    };
-};
-const equalOption = { equal: Object.is };
-/**
- * Utility to create a store that contains an array of items.
- * @returns a store containing an array of items.
- */
-export const registrationArray = () => {
-    const elements$ = writable([], equalOption);
-    return asReadable(elements$, {
-        /**
-         * Add the given element to the array.
-         * @param element - Element to be added to the array.
-         * @returns A function to remove the element from the array.
-         */
-        register: (element) => {
-            let removed = false;
-            elements$.update((currentElements) => [...currentElements, element]);
-            return () => {
-                if (!removed) {
-                    removed = true;
-                    elements$.update((currentElements) => {
-                        const index = currentElements.indexOf(element);
-                        if (index > -1) {
-                            const copy = [...currentElements];
-                            copy.splice(index, 1);
-                            return copy;
-                        }
-                        return currentElements; // no change
-                    });
-                }
-            };
-        },
-    });
-};
-/**
- * Returns a directive and a store. The store contains at any time the array of all the DOM elements on which the directive is
- * currently used.
- *
- * @remarks
- * If the directive is intended to be used on a single element element, it may be more appropriate to use
- * {@link createStoreDirective} instead.
- *
- * @returns An object with two properties: the `directive` property that is the directive to use on some DOM elements,
- * and the `elements$` property that is the store containing an array of all the elements on which the directive is currently
- * used.
- */
-export const createStoreArrayDirective = () => {
-    const elements$ = registrationArray();
-    return {
-        elements$: asReadable(elements$),
-        directive: (element) => ({ destroy: elements$.register(element) }),
-    };
-};
-/**
- * Returns a directive and a store. When the directive is used on a DOM element, the store contains that DOM element.
- * When the directive is not used, the store contains null.
- *
- * @remarks
- * If the directive is used on more than one element, an error is displayed in the console and the element is ignored.
- * If the directive is intended to be used on more than one element, please use {@link createStoreArrayDirective} instead.
- *
- * @returns An object with two properties: the `directive` property that is the directive to use on one DOM element,
- * and the `element$` property that is the store containing the element on which the directive is currently used (or null
- * if the store is not currently used).
- */
-export const createStoreDirective = () => {
-    const element$ = writable(null, equalOption);
-    return {
-        element$: asReadable(element$),
-        directive: (element) => {
-            let valid = false;
-            element$.update((currentElement) => {
-                if (currentElement) {
-                    console.error('The directive cannot be used on multiple elements.', currentElement, element);
-                    return currentElement;
-                }
-                valid = true;
-                return element;
-            });
-            return valid
-                ? {
-                    destroy() {
-                        element$.update((currentElement) => (element === currentElement ? null : currentElement));
-                    },
-                }
-                : undefined;
-        },
-    };
-};
-/**
- * Merges multiple directives into a single directive that executes all of them when called.
- *
- * @remarks
- * All directives receive the same argument upon initialization and update.
- * Directives are created and updated in the same order as they appear in the arguments list,
- * they are destroyed in the reverse order.
- * All calls to the directives (to create, update and destroy them) are wrapped in a call to the
- * batch function of tansu
- *
- * @param args - directives to merge into a single directive.
- * @returns The resulting merged directive.
- */
-export const mergeDirectives = (...args) => (element, arg) => {
-    const instances = batch(() => args.map((directive) => directive(element, arg)));
-    return {
-        update(arg) {
-            batch(() => instances.forEach((instance) => instance?.update?.(arg)));
-        },
-        destroy() {
-            batch(() => instances.reverse().forEach((instance) => instance?.destroy?.()));
-        },
-    };
+import "@amadeus-it-group/tansu";
+import "esm-env";
+import { o, a, c, b, p, n, g, j, f, h, q, d, e, i, m, k, l, r, s } from "../directive-DCYlDznf.js";
+import "../func-DR0n-ShK.js";
+import "./stores.js";
+export {
+  o as attributesData,
+  a as bindDirective,
+  c as bindDirectiveNoArg,
+  b as browserDirective,
+  p as classDirective,
+  n as createAttributesDirective,
+  g as createBrowserStoreArrayDirective,
+  j as createBrowserStoreDirective,
+  f as createStoreArrayDirective,
+  h as createStoreDirective,
+  q as directiveAttributes,
+  d as directiveSubscribe,
+  e as directiveUpdate,
+  i as isBrowserHTMLElement,
+  m as mapDirectiveArg,
+  k as mergeDirectives,
+  l as multiDirective,
+  r as registrationArray,
+  s as ssrAttributes
 };

package/utils/internal/dom.d.ts

@@ -1,3 +1,5 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { AttributeValue, SSRHTMLElement, StyleKey, StyleValue } from '../../types';
 /**
  * Returns the common ancestor of the provided DOM elements.
  * @param elements - array of DOM elements
@@ -8,33 +10,70 @@ export declare const computeCommonAncestor: (elements: HTMLElement[]) => HTMLEle
  * Launch a reflow using a call to the provided html element getBoudingClientRect
  * @param element - the html element
  */
-export declare function reflow(element?: HTMLElement): void;
+export declare const reflow: (element?: SSRHTMLElement) => void;
 /**
  * Attach the given css classes to the element
  *
  * @param element - the HTML element
  * @param classes - the css lcasses
  */
-export declare const addClasses: (element: HTMLElement, classes?: string[]) => void;
+export declare const addClasses: (element: SSRHTMLElement, classes?: string[]) => void;
 /**
  * Remove the given css classes to the element
  *
  * @param element - the HTML element
  * @param classes - the css classes
  */
-export declare const removeClasses: (element: HTMLElement, classes?: string[]) => void;
+export declare const removeClasses: (element: SSRHTMLElement, classes?: string[]) => void;
 /**
  * Adds an event listener to the specified element.
  *
  * @param element - The HTML element to which the event listener will be added.
  * @param type - A string representing the event type to listen for.
  * @param fn - The event listener function or object.
+ * @param options - An options object that specifies characteristics about the event listener.
  * @returns A function that removes the event listener from the element.
  */
-export declare function addEvent<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, fn: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any): () => void;
+export declare function addEvent<K extends keyof HTMLElementEventMap, T extends HTMLElementEventMap[K]>(element: EventTarget, type: K, fn: (this: EventTarget, ev: T) => any, options?: boolean | AddEventListenerOptions): () => void;
 /**
  * Generates a unique ID with the format 'auId-[counter]'.
  *
  * @returns The generated ID.
  */
 export declare const generateId: () => string;
+/**
+ * Binds a value from a `ReadableSignal` to the specified attribute of an HTML element.
+ * When the value emitted by the signal changes, it updates the attribute accordingly.
+ * If the value is null, undefined or `false`, the attribute is removed from the element.
+ * An empty string or `true` will result in an attribute with an empty value
+ *
+ * @param node The HTML element to bind the attribute to.
+ * @param attributeName The name of the attribute to bind.
+ * @param value$ The `ReadableSignal` representing the value to bind to the attribute.
+ *
+ * @returns unsubscription method to remove the binding
+ */
+export declare function bindAttribute(node: SSRHTMLElement, attributeName: string, value$: ReadableSignal<AttributeValue>): import("@amadeus-it-group/tansu").UnsubscribeFunction & import("@amadeus-it-group/tansu").UnsubscribeObject;
+/**
+ * Binds a value from a `ReadableSignal` to the specified CSS style property of an HTML element.
+ * When the value emitted by the signal changes, it updates the style property accordingly.
+ * If the value is  null, undefined or an empty string, the style property is cleared.
+ *
+ * @param node The HTML element to bind the style property to.
+ * @param styleName The name of the CSS style property to bind.
+ * @param value$ The `ReadableSignal` representing the value to bind to the style property.
+ *
+ * @returns unsubscription method to remove the binding
+ */
+export declare function bindStyle(node: SSRHTMLElement, styleName: StyleKey, value$: ReadableSignal<StyleValue>): import("@amadeus-it-group/tansu").UnsubscribeFunction & import("@amadeus-it-group/tansu").UnsubscribeObject;
+/**
+ * Binds a `ReadableSignal` of boolean to the specified className of an HTML element.
+ * The className is added when the value is true, removed otherwise
+ *
+ * @param node - The HTML element to bind the style property to.
+ * @param className - The className to bind.
+ * @param value$ - The `ReadableSignal` representing the value to bind to the className.
+ *
+ * @returns unsubscription method to remove the binding
+ */
+export declare function bindClassName(node: SSRHTMLElement, className: string, value$: ReadableSignal<boolean>): () => void;

package/utils/internal/promise.d.ts

@@ -31,7 +31,7 @@ export declare const promiseStoreToPromiseStateStore: <T>(promiseStore$: Readabl
  * @param equal - an equal function to compare values
  * @returns the value store
  */
-export declare const promiseStateStoreToValueStore: <T>(store$: ReadableSignal<PromiseState<T>>, initialValue: T, equal?: ((a: T, b: T) => boolean) | undefined) => ReadableSignal<T>;
+export declare const promiseStateStoreToValueStore: <T>(store$: ReadableSignal<PromiseState<T>>, initialValue: T, equal?: (a: T, b: T) => boolean) => ReadableSignal<T>;
 /**
  * Create a value store from a promise store
  *
@@ -42,7 +42,7 @@ export declare const promiseStateStoreToValueStore: <T>(store$: ReadableSignal<P
  * @param equal - an equal function to compare values
  * @returns the value store
  */
-export declare const promiseStoreToValueStore: <T>(promiseStore$: ReadableSignal<T>, initialValue: Awaited<T>, equal?: ((a: Awaited<T>, b: Awaited<T>) => boolean) | undefined) => ReadableSignal<Awaited<T>>;
+export declare const promiseStoreToValueStore: <T>(promiseStore$: ReadableSignal<T>, initialValue: Awaited<T>, equal?: (a: Awaited<T>, b: Awaited<T>) => boolean) => ReadableSignal<Awaited<T>>;
 /**
  * Create a promise from a readable store and a fulfilled condition function.
  *

package/utils/internal/ssrHTMLElement.d.ts

@@ -0,0 +1,7 @@
+import type { SSRHTMLElement } from '../../types';
+export declare const ssrHTMLElementAttributesAndStyle: unique symbol;
+/**
+ * Create an SSRHTMLElement
+ * @returns the created SSRHTMLElement
+ */
+export declare const ssrHTMLElement: () => SSRHTMLElement;