attributesData<
T>(...directives):object
Returns an object with the attributes, style and class keys containing information derived from a list of directives.
attributes value is a JSON representation of key/value attributes, excepted for the class and style attributesclassNames value is an array of string representing the classes to be appliedstyle value is a JSON representation of the styles to be applied• T extends any[]
The type of the directives array.
• ...directives: DirectivesAndOptParam<T, SSRHTMLElement>
List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
object
JSON object with the attributes, class and style keys.
attributes:
Record<string,string>
classNames:
string[]
style:
Partial<Record<StyleKey,StyleValue>>
Properties for configuring server-side rendering directives.
optionalattributes:Record<string,AttributeValue|ReadableSignal<AttributeValue>>
Attributes to be added to the provided node.
The style attribute must be added separately.
optionalclassNames:Record<string,boolean|ReadableSignal<boolean>>
Class names to be added to an HTML element.
Key-value pairs where keys are class names and values indicate whether the class should be added (true) or removed (false).
optionalevents:Partial<object>
Events to be attached to an HTML element.
Key-value pairs where keys are event types and values are event handlers. xw
optionalstyles:Partial<Record<StyleKey,StyleValue|ReadableSignal<StyleValue>>>
Styles to be added to an HTML element.
Key-value pairs where keys are CSS style properties and values are style values.
bindDirective<
T,U>(directive,directiveArg$):Directive<void,U>
Binds the given directive to a store that provides its argument.
• T
The type of the directive argument.
• U extends SSRHTMLElement = SSRHTMLElement
The type of the SSRHTMLElement, defaults to SSRHTMLElement.
• directive: Directive<T, U>
The directive to bind to the element.
• directiveArg$: ReadableSignal<T>
The signal to subscribe to for directive updates.
Directive<void, U>
A directive that manages the lifecycle of the bound directive.
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.
bindDirectiveNoArg<
T,U>(directive):Directive<void,U>
Returns a directive that ignores any argument passed to it and calls the provided directive without any argument.
• T
The type of the directive's argument.
• U extends SSRHTMLElement = SSRHTMLElement
The type of the SSRHTMLElement, defaults to SSRHTMLElement.
• directive: Directive<T, U>
The directive to bind without arguments.
Directive<void, U>
A new directive that does not require any arguments.
browserDirective<
T,U>(directive):Directive<T,SSRHTMLElement>
A higher-order directive function that conditionally applies a directive based on the environment. If running in a browser environment, it applies the given directive to the node. If not in a browser environment, it returns a no-op function.
• T
The type of the directive's argument.
• U extends HTMLElement
The type of the HTML element the directive is applied to.
• directive: Directive<T, U>
The directive to be conditionally applied.
classDirective(
node,args):void|object
Directive that takes as an argument a string containing CSS classes to be put on the HTML element.
• node: SSRHTMLElement
• args: string
void | object
createAttributesDirective<
T>(propsFn):Directive<T>
Creates a directive that binds attributes, styles, class names, and events to a DOM node.
• T = void
The type of the arguments passed to the directive.
• propsFn
A function that takes a readable signal of type T and returns an object containing
attributes, styles, class names, and events to bind to the node.
Directive<T>
A directive function that can be used to bind the specified properties to a DOM node.
The returned directive function takes a DOM node and arguments of type T, and sets up the bindings
specified by the propsFn function. It returns an object with update and destroy methods:
update(args: T): Updates the arguments passed to the directive.destroy(): Cleans up all bindings and event listeners.createBrowserStoreArrayDirective():
object
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.
object
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.
directive:
Directive<void,SSRHTMLElement>
elements$:
ReadableSignal<HTMLElement[]>
It is the same as createStoreArrayDirective, but the returned directive is only executed in a browser environment and the type of the elements is HTMLElement instead of SSRHTMLElement.
If the directive is intended to be used on a single element element, it may be more appropriate to use createBrowserStoreDirective instead.
createBrowserStoreDirective():
object
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.
object
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).
directive:
Directive<void,SSRHTMLElement>
element$:
ReadableSignal<null|HTMLElement>
It is the same as createStoreDirective, but the returned directive is only executed in a browser environment and the type of the element is HTMLElement instead of 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 createStoreArrayDirective instead.
createStoreArrayDirective():
object
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.
object
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.
directive:
Directive
elements$:
ReadableSignal<SSRHTMLElement[]>
It is the same as createBrowserStoreArrayDirective, but the returned directive is also executed in a server environment and the type of the elements is SSRHTMLElement instead of HTMLElement.
If the directive is intended to be used on a single element element, it may be more appropriate to use createStoreDirective instead.
createStoreDirective():
object
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.
object
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).
directive:
Directive
element$:
ReadableSignal<null|SSRHTMLElement>
It is the same as createBrowserStoreDirective, but the returned directive is also executed in a server environment and the type of the element is 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 createStoreArrayDirective instead.
directiveAttributes<
T>(...directives):Record<string,any>
Returns an object with the key/value attributes for JSX, derived from a list of directives.
• T extends any[]
• ...directives: DirectivesAndOptParam<T, SSRHTMLElement>
List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
Record<string, any>
JSON object with key/value pairs to be applied on a JSX node.
directiveSubscribe(
store,asyncUnsubscribe):Directive
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.
• store: ReadableSignal<any>
store on which there will be an active subscription while the returned directive is used.
• asyncUnsubscribe: boolean = true
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
The resulting directive.
directiveUpdate<
T>(update):Directive<T>
Returns a directive that calls the provided function with the arguments passed to the directive on initialization and each time they are updated.
• T
The type of the argument that the update function accepts.
• update
Function called with the directive argument when the directive is initialized and when its argument is updated.
Directive<T>
The resulting directive.
isBrowserHTMLElement(
element):element is HTMLElement
On a browser environment, returns true if the given element is an HTMLElement. On a server environment, always returns false.
• element: SSRHTMLElement
The element to check.
element is HTMLElement
true in a browser environment if the given element is an HTMLElement, otherwise false.
mapDirectiveArg<
T,U,V>(directive,fn):Directive<T,V>
Maps the argument of a directive to a new value using a provided function.
• T
The type of the original argument.
• U
The type of the mapped argument.
• V extends SSRHTMLElement = SSRHTMLElement
The type of the SSRHTMLElement, defaults to SSRHTMLElement.
• directive: Directive<U, V>
The original directive to be mapped.
• fn
The function to map the original argument to the new argument.
Directive<T, V>
A new directive with the mapped argument.
mergeDirectives<
T,U>(...args):Directive<T,U>
Merges multiple directives into a single directive that executes all of them when called.
• T
The type of the argument passed to the directive.
• U extends SSRHTMLElement = SSRHTMLElement
The type of the SSRHTMLElement, defaults to SSRHTMLElement.
• ...args: (Directive<T, U> | Directive<void, U>)[]
The directives to merge.
Directive<T, U>
A new directive that applies all the given directives.
The returned directive has the following lifecycle methods:
update(arg): Updates all merged directives with the given argument.destroy(): Destroys all merged directives in reverse order.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
multiDirective<
T,U>(element,directives):object
Applies multiple directives to a given SSRHTMLElement and provides methods to update or destroy them.
• T extends any[]
A tuple type representing the arguments for each directive.
• U extends SSRHTMLElement = SSRHTMLElement
The type of the SSRHTMLElement, defaults to SSRHTMLElement.
• element: U
The SSRHTMLElement to which the directives will be applied.
• directives: DirectivesAndOptParam<T, U>
An array of directives and their optional parameters.
object
An object containing:
update: A function to update the directives with new parameters.destroy: A function to destroy all applied directives.destroy: () =>
void
void
update: (
directives) =>void
• directives: (Directive<void, U> | DirectiveAndParam<any, U>)[]
void
registrationArray<
T>():ReadableSignal<T[]> &object
Creates a registration array that allows elements to be added and removed.
• T
The type of elements in the array.
ReadableSignal<T[]> & object
An object that includes a readable signal of the array and a register function.
The returned object has the following properties:
register: A function to add an element to the array. It takes an element of type T as a parameter and returns a function to remove the element from the array.ssrAttributes<
T>(...directives):Record<string,any>
Same as directiveAttributes, but returns an empty object when run in a browser environement.
• T extends any[]
• ...directives: DirectivesAndOptParam<T, SSRHTMLElement>
List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
Record<string, any>
JSON object with name/value for the attributes
JSON object with key/value pairs to be applied on a JSX node.
The useDirective function.
Allows to attach a provided directive to the current react component.
the directive
the args to pass to the directive
useDirective(
directive):object
The useDirective function.
Allows to attach a provided directive to the current react component.
• directive: Directive
object
ref:
RefCallback<HTMLElement>
the directive
the args to pass to the directive
useDirective<
T>(directive,args):object
The useDirective function.
Allows to attach a provided directive to the current react component.
• T
• directive: Directive<T>
• args: T
object
ref:
RefCallback<HTMLElement>
the directive
the args to pass to the directive
useDirectives<
T>(...directives):object
The useDirectives function.
Allows to attach multiple directives to the current react component.
• T extends any[]
• ...directives: DirectivesAndOptParam<T, SSRHTMLElement>
directives
object
the ref callback
ref:
RefCallback<HTMLElement>