datastar/ds_lustre
This module provides functions to add Datastar data attributes to html elements as shown here https://data-star.dev/reference/attributes
Values
pub fn data_attr(
key: String,
expression: String,
) -> attribute.Attribute(a)Sets the value of any HTML attribute to an expression, and keeps it in sync.
See https://data-star.dev/reference/attributes#data-attr.
e.g.
div([ds_lustre.data_attr("title", "$foo")], [])
<div data-attr-title="$foo"></div>
pub fn data_attrs(
pairs: List(#(String, String)),
) -> attribute.Attribute(a)Similar to data_attr but sets multiple attrs at once.
See https://data-star.dev/reference/attributes#data-attr
e.g.
<div data-attr="{title: $foo, disabled: $bar}"></div>
pub fn data_bind(value: String) -> attribute.Attribute(a)Creates a signal and sets up two-way data binding. This takes the name of a signal (without the $).
See https://data-star.dev/reference/attributes#data-bind
ds_lustre.data_bind("first_name")
<input data-bind="first_name" />
pub fn data_class(
key: String,
expression: String,
) -> attribute.Attribute(a)Adds or removes a class.
See https://data-star.dev/reference/attributes#data-class
The first value is the class name.
The second value is an expression. e.g. a signal $selected or a complex expression
pub fn data_classes(
pairs: List(#(String, String)),
) -> attribute.Attribute(a)Control multiple classes at once
pub fn data_computed(
key: String,
value: String,
) -> attribute.Attribute(a)Creates a signal that is computed based on an expression.
See https://data-star.dev/reference/attributes#data-computed
pub fn data_effect(expression: String) -> attribute.Attribute(a)Executes an expression on page load and whenever any signals in the expression change.
pub fn data_indicator(signal: String) -> attribute.Attribute(a)pub fn data_init(expression: String) -> attribute.Attribute(a)Runs an expression when the attribute is initialized. This can happen on page load, when an element is patched into the DOM, and any time the attribute is modified (via a backend action or otherwise).
data_init("$count = 1")
pub fn data_json_signals(
include: String,
exclude: String,
) -> attribute.Attribute(a)Sets the text content of an element to a reactive JSON stringified version of signals
data_json_signals(include: "^app", exclude: "temp$") //use regexp
See https://data-star.dev/reference/attributes#data-json-signals
pub fn data_on(
event: String,
expression: String,
) -> attribute.Attribute(a)Attaches an event listener to an element.
pub fn data_on_click(
expression: String,
) -> attribute.Attribute(a)Shorcut for data_on("click", _).
pub fn data_on_intersect(
expression: String,
) -> attribute.Attribute(a)Runs an expression when the element intersects with the viewport.
data_on_intersect("$intersected = true")
<div data-on-intersect="$intersected = true"></div>
See https://data-star.dev/reference/attributes#data-on-intersect
pub fn data_on_interval(
expression: String,
duration: Int,
) -> attribute.Attribute(a)Runs an expression at a regular interval.
data_on_interval("$count++", 1000) //milliseconds
<div data-on-interval="$count++"></div>
See https://data-star.dev/reference/attributes#data-on-interval
pub fn data_on_signal_patch(
expression: String,
) -> attribute.Attribute(a)Runs an expression whenever any signals are patched. This is useful for tracking changes, updating computed values, or triggering side effects when data updates.
data_on_signal_patch("console.log('A signal changed!', patch)")
<div data-on-signal-patch="console.log('Signal patch:', patch)"></div>
See https://data-star.dev/reference/attributes#data-on-signal-patch
pub fn data_on_signal_patch_filter(
include: String,
exclude: String,
) -> attribute.Attribute(a)Filters which signals to watch when using the data-on-signal-patch attribute.
data_on_signal_patch_filter(include: "user|name", exclude: "password") //use regexp
<div data-on-signal-patch-filter="{include: /user|name/, exclude: /password/}"></div>
See https://data-star.dev/reference/attributes#data-on-signal-patch-filter
pub fn data_on_submit(
expression: String,
) -> attribute.Attribute(a)Shorcut for data_on("submit", _).
This prevents the default submission behavior of forms.
pub fn data_persist(
include: String,
exclude: String,
) -> attribute.Attribute(a)The signals to be persisted can be filtered by providing a value that is an object with include and/or exclude properties that are regular expressions.
data_persist(include: "foo|bar", exclude: "baz") //use regexp
<div data-persist="{include: /foo/, exclude: /bar/}"></div>
pub fn data_preserve_attr(
value: String,
) -> attribute.Attribute(a)Preserves the value of an attribute when morphing DOM elements.
data_preserve_attr("open class")
<details open class="foo" data-preserve-attr="open class">
...
</details>
See https://data-star.dev/reference/attributes#data-preserve-attr
pub fn data_ref(value: String) -> attribute.Attribute(a)Creates a signal that is a reference to this DOM element.
pub fn data_show(value: String) -> attribute.Attribute(a)Show or hides an element based on an expression.
pub fn data_signal(
signal: String,
value: String,
) -> attribute.Attribute(a)Patches one signals into the existing signals.
pub fn data_signals(
signals: List(#(String, json.Json)),
) -> attribute.Attribute(a)Merges one or more signals into the existing signals.
pub fn data_text(value: String) -> attribute.Attribute(a)Binds the text content of an element to an expression.
See https://data-star.dev/reference/attributes#data-text
e.g.
<div data-text="$foo"></div>