Fix DataStar v1 RC8 signal attribute incompatibilities

Two bugs that caused signals to not work on the frontend:

1. data-on-signal-change → data-on-signal-patch
   The data-on-signal-change attribute was removed in RC8.
   The replacement is data-on-signal-patch.

2. data-bind-newTodo="" → data-bind="newTodo"
   HTML normalises attribute names to lowercase at parse time, so
   data-bind-newTodo becomes data-bind-newtodo in the DOM. DataStar
   would then bind to signal $newtodo instead of $newTodo, breaking
   the two-way binding. The value syntax data-bind="newTodo" preserves
   the camelCase name correctly.

https://claude.ai/code/session_01JThiQbp3Bn9J1VhBpRuz4u
This commit is contained in:
Claude
2026-03-06 20:13:55 +00:00
parent 8535d39012
commit 6605bf452f
2 changed files with 9 additions and 6 deletions
+4 -3
View File
@@ -42,7 +42,8 @@ pub fn router(state: SharedState) -> Router {
///
/// DataStar v1 contract (verified against https://data-star.dev/reference):
/// - `data-signals` — initialize signals (JS object literal syntax)
/// - `data-on-signal-change` — fires when any signal changes
/// - `data-on-signal-patch` — fires when any signal is patched (renamed from
/// `data-on-signal-change` which was removed in RC8)
/// - `__debounce.300ms` — modifier: debounce 300ms
/// - `@post('/render')` — send all non-_ signals as JSON body
/// - `@get('/sse?conn=...')` — open long-lived SSE pipe
@@ -70,7 +71,7 @@ fn document_shell(conn_id: Uuid, initial_signals: &str, inner_html: &str) -> Str
<body>
<div id="app"
data-signals='{signals}'
data-on-signal-change__debounce.300ms="@post('/render')"
data-on-signal-patch__debounce.300ms="@post('/render')"
data-on-load="@get('/sse?conn={conn}')">
{inner}
</div>
@@ -210,7 +211,7 @@ async fn initial_about_load(State(state): State<SharedState>) -> impl IntoRespon
/// `POST /render` — Signal-triggered rerender.
///
/// DataStar sends all non-`_` signals as JSON body when any signal changes
/// (triggered by `data-on-signal-change` + `@post('/render')`).
/// (triggered by `data-on-signal-patch` + `@post('/render')`).
///
/// Returns `Content-Type: text/event-stream` with a single
/// `datastar-patch-elements` event containing the full page HTML.
+5 -3
View File
@@ -40,13 +40,15 @@ pub async fn todo_list(cx: &mut RenderContext) -> anyhow::Result<Markup> {
}
// Add todo form.
// data-bind-newTodo binds the input to the $newTodo signal.
// The button uses new_todo.val ("$newTodo") in a DataStar expression.
// data-bind="newTodo" binds the input to the $newTodo signal.
// Value syntax is used instead of data-bind-newTodo because HTML
// normalises attribute names to lowercase, which would corrupt the
// camelCase signal name (newTodo → newtodo).
div.add-form {
input
type="text"
placeholder="What needs to be done?"
data-bind-newTodo=""
data-bind="newTodo"
;
button
data-on-click="@post('/action/add_todo')"