Migrating from RC.5 to 1.0

Weave has upgraded its underlying Datastar library from v1.0.0-RC.5 to v1.0.1. This guide covers the changes you need to make in your application.

Attribute Delimiter: - to :

All Datastar attribute names now use a colon (:) instead of a hyphen (-) to separate the plugin name from the key.

Events

;; Before
[:button {:data-on-click (weave/handler [] ...)}]
[:form   {:data-on-submit (weave/handler [] ...)}]
[:select {:data-on-change (weave/handler [] ...)}]

;; After
[:button {:data-on:click (weave/handler [] ...)}]
[:form   {:data-on:submit (weave/handler [] ...)}]
[:select {:data-on:change (weave/handler [] ...)}]

Event modifiers stay the same with double underscores:

;; Before
[:button {:data-on-click__prevent (weave/handler [] ...)}]

;; After
[:button {:data-on:click__prevent (weave/handler [] ...)}]

Signals

;; Before
[:div {:data-signals-count "0"
       :data-signals-name ""}]

;; After
[:div {:data-signals:count "0"
       :data-signals:name ""}]

Bind

;; Before
[:input {:data-bind-username true}]

;; After
[:input {:data-bind:username true}]

Class

;; Before
[:div {:data-class-hidden "$showMenu"}]

;; After
[:div {:data-class:hidden "$showMenu"}]

Attr

;; Before
[:input {:data-attr-max "$maxAmount"}]

;; After
[:input {:data-attr:max "$maxAmount"}]

Call-With

;; Before
[:button {:data-call-with-user.id "42"
          :data-on-click (weave/handler [] ...)}]

;; After
[:button {:data-call-with:user.id "42"
          :data-on:click (weave/handler [] ...)}]

Compound plugins keep hyphens

Some plugins have multi-word names: on-interval, on-intersect, on-signal-patch. These are separate plugins from on, so they keep the hyphen — do not convert it to a colon:

;; WRONG — this listens for a non-existent "interval" DOM event
[:div {:data-on:interval__duration.5s "..."}]

;; CORRECT — invokes the on-interval plugin
[:div {:data-on-interval__duration.5s "..."}]

The same applies to data-on-intersect and data-on-signal-patch.

data-on-load renamed to data-init

If you use data-on-load directly in your views, rename it to data-init:

;; Before
[:div {:data-on-load "@get('/my-route')"}]

;; After
[:div {:data-init "@get('/my-route')"}]

Quick Search & Replace

For most projects, the migration can be done with a few search and replace operations across your source files:

Find	Replace
:data-on-click	:data-on:click
:data-on-submit	:data-on:submit
:data-on-change	:data-on:change
:data-on-load	:data-init
:data-signals-	:data-signals:
:data-bind-	:data-bind:
:data-attr-	:data-attr:
:data-class-	:data-class:
:data-call-with-	:data-call-with: