Skip to content

Improve HtmlFlow-Datastar integration documentation #148

Description

@PauloCarvalho13

Improve the HtmlFlow-Datastar integration documentation to clarify how nested signals and non-primitive values work.
HtmlFlow-Datastar examples illustrating the expected Datastar output:

data class Person(
    val name: String,
    val age: Int,
)

div {
    val (person) = dataSignals(
        "person" to Person("John Doe", 18),
    )

    input {
        dataBind(person.on(Person::name))
    }

    p {
        dataText { +person.on(Person::age) }
    }
}

This should initialize person as an object, equivalent to:

<div data-signals="{person: {name: 'John Doe', age: 18}}">
  <input data-bind="person.name">
  <p data-text="$person.age"></p>
</div>

A string that looks like an object must remain a string:

div {
    dataSignals(
        "person" to "{name: 'John Doe', age: 18}",
    )
}

This is equivalent to a string-valued signal, not a nested object:

<div data-signals="{person: '{name: \'John Doe\', age: 18}'}"></div>

It should therefore not be used with nested bindings such as dataBind("person.name").
Object assignments should follow the same value semantics as initialization:

data class Person(
    val name: String,
    val age: Int,
)

div {
    val (person, otherPerson) = dataSignals(
        "person" to Person("John Doe", 18),
        "otherPerson" to Person("Jane Doe", 21),
    )

    button {
        dataOn(Click) {
            person.setValue(Person("Jane Doe", 21))
        }
        text("Replace with a value")
    }

    button {
        dataOn(Click) {
            person.setValue(otherPerson)
        }
        text("Copy from another signal")
    }
}

The first assignment represents a literal object value:

$person = {name: 'Jane Doe', age: 21}

The second represents an expression evaluated by Datastar:

$person = $otherPerson

The documentation should explicitly cover this distinction, including nested objects, arrays, null, and correctly escaped strings.
Related integration issues:

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions