The great $ purge of 2024

README.md

@@ -16,7 +16,7 @@ Here’s what frontend reactivity looks like using Datastar:
 
 ```html
 <input data-bind="input" type="text">
-<div data-text="$input.toUpperCase()"></div>
+<div data-text="input.value.toUpperCase()"></div>
 <button data-on-click="sse('/endpoint', {method: 'post'})">Save</button>
 ```
 

code/go/site/routes_bundler.templ

@@ -39,7 +39,6 @@ templ PageBundler(r *http.Request, manifest PluginManifest, signals *BundlerSign
 						{{
 						signal := fmt.Sprintf("includedPlugins.%s", plugin.Key)
 						pluginDir := filepath.Dir(plugin.Path[11:])
-						// cls := fmt.Sprintf("{'bg-base-200':!$%s, 'bg-success text-success-content': $%s}", signal, signal)
 						}}
 						if currentPath != pluginDir {
 							<div class="divider w-full font-mono text-neutral">{ pluginDir }</div>

code/go/site/routes_examples_bulk_update.templ

@@ -45,7 +45,7 @@ templ bulkUpdateContacts(signals *BulkUpdateSelectionSignals, contacts []*Contac
 							class="checkbox"
 							type="checkbox"
 							data-bind="selections.all"
-							data-on-change="setAll('contact_', $selections.all)"
+							data-on-change="setAll('contact_', selections.value.all)"
 						/>
 					</th>
 					<th>Name</th>
@@ -61,14 +61,14 @@ templ bulkUpdateContacts(signals *BulkUpdateSelectionSignals, contacts []*Contac
 		</table>
 		<div class="flex gap-2">
 			<button
-				data-on-click="sse('/examples/bulk_update/data/activate'. {method:'put'}); $selections.all = false; setAll('contact_', $selections.all)"
+				data-on-click="sse('/examples/bulk_update/data/activate'. {method:'put'}); selections.value.all = false; setAll('contact_', selections.value.all)"
 				class="btn btn-success"
 			>
 				@icon("material-symbols:account-circle")
 				Activate
 			</button>
 			<button
-				data-on-click="sse('/examples/bulk_update/data/deactivate'. {method:'put'}); $selections.all = false; setAll('contact_', $selections.all)"
+				data-on-click="sse('/examples/bulk_update/data/deactivate'. {method:'put'}); selections.value.all = false; setAll('contact_', selections.value.all)"
 				class="btn btn-error"
 			>
 				@icon("material-symbols:account-circle-off")

code/go/site/routes_examples_click_to_load.templ

@@ -25,7 +25,7 @@ templ ClickToLoadMoreButton(input *ClickToLoadSignals) {
 		id="more_btn"
 		class="w-full btn btn-success"
 		data-on-click={ fmt.Sprintf(
-			"console.log('click to load more');$offset=%d; $limit=%d; sse('/examples/click_to_load/data', {method:'get',useViewTransitions:false})",
+			"console.log('click to load more');offset.value=%d; limit.value=%d; sse('/examples/click_to_load/data', {method:'get',useViewTransitions:false})",
 			input.Offset+input.Limit,input.Limit,
 			) }
 	>

code/go/site/routes_examples_dbmon.templ

@@ -15,7 +15,7 @@ templ pageDBmon(dbs []*DbmonDatabase, mutationRate float64, renderTime time.Dura
 	>
 		@dbmonFPS(renderTime)
 		<div style="display: flex;">
-			<label>mutations: <span data-text="$mutationRate"></span>%</label>
+			<label>mutations: <span data-text="mutationRate.value"></span>%</label>
 			<input
 				class="range"
 				type="range"

code/go/site/routes_examples_dialogs_browser.templ

@@ -12,7 +12,7 @@ templ DialogBrowserView(signals *DialogBrowserSignals) {
 		id="dialogs"
 		class="flex items-center btn btn-primary"
 		data-signals={ templ.JSONString(signals) }
-		data-on-click="$prompt = prompt('Enter a string',$prompt);$confirm = confirm('Are you sure?');$confirm && sse('/examples/dialogs_browser/sure')"
+		data-on-click="prompt.value = prompt('Enter a string',prompt.value);confirm.value = confirm('Are you sure?');confirm.value && sse('/examples/dialogs_browser/sure')"
 	>
 		Click Me
 		@icon("material-symbols:question-mark")

code/go/site/routes_examples_edit_row.templ

@@ -69,7 +69,7 @@ templ EditRowContact(contacts []*ContactEdit, i int, isEditingRow, isEditingAnyR
 				<button
 					class="btn btn-sm btn-accent"
 					data-on-click={ fmt.Sprintf(
-						"$editRowIndex = %d; %s", i,
+						"editRowIndex.value = %d; %s", i,
 						datastar.GetSSE("/examples/edit_row/edit"),
 					) }
 					data-testid={ contactKeyPrefix + "_edit" }

code/go/site/routes_examples_file_upload.templ

@@ -32,7 +32,7 @@ templ FileUploadView(signals *FileUploadSignals) {
 		<button
 			class="btn btn-primary"
 			data-on-click={ datastar.PostSSE("/examples/file_upload/upload") }
-			data-show="!!$files?.length"
+			data-show="!!files.value?.length"
 		>
 			Submit
 		</button>

code/go/site/routes_examples_infinite_scroll.templ

@@ -16,7 +16,7 @@ templ infiniteScrollMore(signals *infiniteScrollSignals) {
 		id="loading_message"
 		class="alert alert-info"
 		data-intersects={ fmt.Sprintf(
-			"$offset=%d;$limit=%d;%s",
+			"offset.value=%d;limit.value=%d;%s",
 			signals.Offset+signals.Limit,signals.Limit,
 			datastar.GetSSE("/examples/infinite_scroll/data"),
 		) }

code/go/site/routes_examples_lazy_tabs.templ

@@ -27,7 +27,7 @@ templ setupExamplesLazyTabsComponent(tabCount int, contents templ.Component, sig
 					role="tab"
 					class={ "tab", templ.KV("tab-active", i == signals.TabID) }
 					data-on-click={ fmt.Sprintf(
-						"$tabId=%d;%s", i,
+						"tabId.value=%d;%s", i,
 						datastar.GetSSE("/examples/lazy_tabs/data"),
 					) }
 					data-testid={ fmt.Sprintf("tab_%d", i) }

code/go/site/routes_examples_mousemove.templ

@@ -22,7 +22,7 @@ templ cursorSVG(cursors map[string]MouseXY) {
 		width="512"
 		height="512"
 		style="background-color: goldenrod"
-		data-on-mousemove="$x=evt.offsetX; $y=evt.offsetY"
+		data-on-mousemove="x.value=evt.offsetX; y.value=evt.offsetY"
 	>
 		for id, cursor := range cursors {
 			{{
@@ -42,7 +42,7 @@ templ cursorSVG(cursors map[string]MouseXY) {
 			</text>
 		}
 		<g id="myPosition">
-			<circle data-bind-cx="$x" data-bind-cy="$y" r="10" fill="red"></circle>
+			<circle data-bind-cx="x.value" data-bind-cy="y.value" r="10" fill="red"></circle>
 		</g>
 	</svg>
 }

code/go/site/routes_examples_quick_primer_go.templ

@@ -15,9 +15,9 @@ templ QuickPrimerGoView(signals *QuickPrimerGoSignals) {
 		<h2>Go Datastar Example</h2>
 		<main id="main" class="container flex flex-col gap-4">
 			<input type="text" class="input input-bordered" placeholder="Type here!" data-bind="input"/>
-			<div data-text="$input"></div>
-			<button class="btn btn-accent" data-on-click="$show = !$show">Toggle</button>
-			<div data-show="$show">
+			<div data-text="input.value"></div>
+			<button class="btn btn-accent" data-on-click="show.value = !show.value">Toggle</button>
+			<div data-show="show.value">
 				<span>Hello from Datastar!</span>
 			</div>
 			<div id="output">#output</div>

code/go/site/routes_examples_signals_ifmissing.go

@@ -27,7 +27,7 @@ func setupExamplesSignalsIfMissing(examplesRouter chi.Router) error {
 
 				switch i % 2 {
 				case 0:
-					fragment := fmt.Sprintf(`<div id="placeholder" data-signals.ifmissing=%q data-text="$id"></div>`, signals)
+					fragment := fmt.Sprintf(`<div id="placeholder" data-signals.ifmissing=%q data-text="id.value"></div>`, signals)
 					sse.MergeFragments(fragment, datastar.WithMergeUpsertAttributes())
 				case 1:
 					sse.MarshalAndMergeSignalsIfMissing(signals)

code/go/site/routes_examples_templ_counter.templ

@@ -28,11 +28,11 @@ templ templCounterExampleCounts() {
 	<div class="flex justify-around gap-4">
 		<div class="flex flex-col items-center gap-1">
 			<div class="text-lg font-bold">Global</div>
-			<div class="text-2xl" data-text="$global"></div>
+			<div class="text-2xl" data-text="global.value"></div>
 		</div>
 		<div class="flex flex-col items-center gap-1">
 			<div class="text-lg font-bold">User</div>
-			<div class="text-2xl" data-text="$user"></div>
+			<div class="text-2xl" data-text="user.value"></div>
 		</div>
 	</div>
 }

code/go/site/routes_examples_toggle_visibility.templ

@@ -12,11 +12,11 @@ templ ToggleVisibilityView(signals *ShowSignals) {
 	>
 		<button
 			class="btn btn-primary"
-			data-on-click="$bindBool=!$bindBool"
+			data-on-click="bindBool.value=!bindBool.value"
 		>
 			Toggle
 		</button>
-		<div data-show="$bindBool">
+		<div data-show="bindBool.value">
 			Hello!
 		</div>
 	</div>

code/go/site/routes_home.templ

@@ -268,9 +268,9 @@ templ TodoInput(i int) {
 		placeholder="What needs to be done?"
 		data-bind="input"
 		data-on-keypress={ fmt.Sprintf(`
-			if (event.key === 'Enter' && $input.trim().length) {
+			if (event.key === 'Enter' && input.value.trim().length) {
 				sse('/api/todos/%d/edit', {method:'put'});
-				$input = '';
+				input.value = '';
 			}
 		`, i) }
 		if i >= 0 {
@@ -318,7 +318,7 @@ templ TodoRow(mode TodoViewMode, todo *Todo, i int, isEditing bool) {
 				data-on-click={ datastar.DeleteSSE("/api/todos/%d", i) }
 				data-testid={ fmt.Sprintf("delete_todo%d", i) }
 				data-indicator={ fetchingSignalName }
-				data-disabled={ "$" + fetchingSignalName }
+				data-disabled={ "".value + fetchingSignalName }
 			>
 				@icon("material-symbols:close")
 			</button>

code/go/site/shared.templ

@@ -261,10 +261,10 @@ templ codeSnippetFragment(block CodeSnippetBlock) {
 					<button
 						class="btn join-item btn-lg flex items-center gap-2"
 						data-class={ fmt.Sprintf(
-							"{'btn-primary btn-outline z-0': $language == '%s'}",
+							"{'btn-primary btn-outline z-0': language.value == '%s'}",
 							snippet.Extension,
 						) }
-						data-on-click={ fmt.Sprintf("$language = '%s'", snippet.Extension) }
+						data-on-click={ fmt.Sprintf("language.value = '%s'", snippet.Extension) }
 					>
 						{ toolbelt.Upper( snippet.Extension) }
 						<iconify-icon icon={ snippet.Icon } class="text-4xl" noobserver></iconify-icon>
@@ -273,7 +273,7 @@ templ codeSnippetFragment(block CodeSnippetBlock) {
 			</div>
 		</div>
 		for _, snippet := range block.Snippets {
-			<div data-show={ fmt.Sprintf("$language == '%s'", snippet.Extension) }>
+			<div data-show={ fmt.Sprintf("language.value == '%s'", snippet.Extension) }>
 				{ snippet.Path.Snake }
 				@templ.Raw(snippet.ContentHighlighted)
 			</div>
@@ -288,5 +288,5 @@ templ templSignalsJSON() {
 }
 
 templ sseIndicator(signalName string) {
-	<div class="loading-dots text-primary" data-class={ fmt.Sprintf("{'loading ml-4': $%s}", signalName) }></div>
+	<div class="loading-dots text-primary" data-class={ fmt.Sprintf("{'loading ml-4': %s.value}", signalName) }></div>
 }

code/go/site/smoketests/disable_button_test.go

@@ -15,7 +15,7 @@ func TestExampleDisableButton(t *testing.T) {
 	t.Run("disabled button click", func(t *testing.T) {
 		btn := page.MustElement("#target")
 		initial := btn.MustAttribute("data-bind-disabled")
-		assert.Equal(t, "$shouldDisable", *initial)
+		assert.Equal(t, "shouldDisable.value", *initial)
 
 		btn.MustClick()
 		result := btn.MustAttribute("disabled")

code/go/site/static/md/examples/active_search.md

@@ -23,4 +23,4 @@ The interesting part is the input field:
 />
 ```
 
-The input issues a `GET` to `/active_search/data` with the input value bound to `$search`. The `debounce_1000ms` modifier ensures that the search is not issued on every keystroke, but only after the user has stopped typing for 1 second. This modifiers will be covered in more detail in the [reference section](/reference).
+The input issues a `GET` to `/active_search/data` with the input value bound to `search`. The `debounce_1000ms` modifier ensures that the search is not issued on every keystroke, but only after the user has stopped typing for 1 second. This modifiers will be covered in more detail in the [reference section](/reference).

code/go/site/static/md/examples/animations.md

@@ -67,7 +67,7 @@ Building on the last example, we can fade in the new content the same way, start
 One of the nice features for reactivity is to show a spinner when a request is in flight. On any element that is using backend actions you can add a `data-indicator` attribute to show a spinner when the request is in flight. This can be done like so:
 
 ```html
-<div data-show="$fetching">Spinner</div>
+<div data-show="fetching.value">Spinner</div>
 <button
   id="submit_request_in_flight"
   data-on-click="sse('/examples/animations/data/request_in_flight', {method:'post'})"

code/go/site/static/md/examples/bad_apple.md

@@ -16,13 +16,13 @@
             data-bind="percentage"
          />
         <div>
-            <span data-text="$percentage.toFixed(2)"></span>%
+            <span data-text="percentage.value.toFixed(2)"></span>%
         </div>
     </div>
     <div class="aspect-square font-mono font-bold text-[11px] leading-[0.25rem] flex justify-center items-center">
         <pre
             style="background-color: black"
-            data-text="$_contents"
+            data-text="_contents.value"
         ></pre>
     </div>
 </div>
@@ -43,10 +43,10 @@ We take the [already converted](https://github.com/trung-kieen/bad-apple-ascii)
 >
   <div>
     <input type="range" min="1" max="100" data-bind="percentage" disabled />
-    <div><span data-text="$percentage.toFixed(2)"></span>%</div>
+    <div><span data-text="percentage.value.toFixed(2)"></span>%</div>
   </div>
   <div>
-    <pre data-text="$_contents"></pre>
+    <pre data-text="_contents.value"></pre>
   </div>
 </div>
 ```

code/go/site/static/md/examples/classes.md

@@ -4,11 +4,11 @@
 
 <div
     data-signals="{count:0}"
-    data-on-raf.throttle_500ms="$count++"
-    data-computed-blinker="$count % 2 === 0"
+    data-on-raf.throttle_500ms="count.value++"
+    data-computed-blinker="count.value % 2 === 0"
 >
-    <div data-text="$count">Count</div>
-    <div data-class="{'text-primary':$blinker,'font-bold':$blinker}">
+    <div data-text="count.value">Count</div>
+    <div data-class="{'text-primary':blinker.value,'font-bold':blinker.value}">
         Remake blink tag
     </div>
 </div>
@@ -18,11 +18,11 @@
 ```html
 <div
     data-signals="{count:0}"
-    data-on-raf.throttle_500ms="$count++"
-    data-computed-blinker="$count % 2 === 0"
+    data-on-raf.throttle_500ms="count.value++"
+    data-computed-blinker="count.value % 2 === 0"
 >
-    <div data-text="$count">Count</div>
-    <div data-class="{'text-primary':$blinker,'font-bold':$blinker}">
+    <div data-text="count.value">Count</div>
+    <div data-class="{'text-primary':blinker.value,'font-bold':blinker.value}">
         Remake blink tag
     </div>
 </div>

code/go/site/static/md/examples/click_to_load.md

@@ -17,7 +17,7 @@ This example shows how to implement click-to-load the next page in a table of da
 ```html
 <button
   id="more_btn"
-  data-on-click="$offset=30; $limit=10; sse('/examples/click_to_load/data')"
+  data-on-click="offset.value=30; limit.value=10; sse('/examples/click_to_load/data')"
 >
   Load More
 </button>
@@ -31,7 +31,7 @@ event: datastar-merge-fragments id: 129804115990544446 data: mergeMode morph dat
 settleDuration 500 data: fragment
 <button
   id="more_btn"
-  data-on-click="$offset=20; $limit=10; sse('/examples/click_to_load/data')"
+  data-on-click="offset.value=20; limit.value=10; sse('/examples/click_to_load/data')"
 >
   Load More
 </button>

code/go/site/static/md/examples/custom_events.md

@@ -3,9 +3,9 @@
 ## Demo
 
 <div data-signals="{eventCount:0,eventDetails:''}">
-     <div id="foo" data-on-myevent="$eventDetails=evt.detail;$eventCount++">
-          <div>Event count: <span data-text="$eventCount">EventCount</span></div>
-          <div>Last Event Details: <span data-text="$eventDetails">EventTime</span></div>
+     <div id="foo" data-on-myevent="eventDetails.value=evt.detail;eventCount.value++">
+          <div>Event count: <span data-text="eventCount.value">EventCount</span></div>
+          <div>Last Event Details: <span data-text="eventDetails.value">EventTime</span></div>
      </div>
      <script>
           const foo = document.getElementById('foo');
@@ -23,10 +23,10 @@
 
 ```html
 <div data-signals="{eventCount:0,eventDetails:''}">
-  <div id="foo" data-on-myevent="$eventCount++; $eventDetails=evt.detail">
-    <div>Event count: <span data-text="$eventCount">EventCount</span></div>
+  <div id="foo" data-on-myevent="eventCount.value++; eventDetails.value=evt.detail">
+    <div>Event count: <span data-text="eventCount.value">EventCount</span></div>
     <div>
-      Last Event Details: <span data-text="$eventDetails">EventTime</span>
+      Last Event Details: <span data-text="eventDetails.value">EventTime</span>
     </div>
   </div>
   <script>

code/go/site/static/md/examples/debounce_and_throttle.md

@@ -4,33 +4,33 @@ Debouncing and throttling are two techniques to limit the number of times a func
 
 ## Throttling
 
-<div class="bg-secondary text-secondary-content p-8 rounded-box font-bold font-mono text-6xl" data-signals="{tick:0}" data-on-raf.throttle_500ms="$tick = (new Date()).getTime()">
-<div data-text="$tick">Text</div>
+<div class="bg-secondary text-secondary-content p-8 rounded-box font-bold font-mono text-6xl" data-signals="{tick:0}" data-on-raf.throttle_500ms="tick.value = (new Date()).getTime()">
+<div data-text="tick.value">Text</div>
 </div>
 
 ```html
 <div
     data-signals="{tick:0}"
-    data-on-raf.throttle_500ms="$tick = (new Date()).getTime()"
+    data-on-raf.throttle_500ms="tick.value = (new Date()).getTime()"
 >
-    <div data-text="$tick"></div>
+    <div data-text="tick.value"></div>
 </div>
 ```
 
 In the example above, the `data-on-raf.throttle_500ms` directive ensures that the `tick` value is updated at most once every 500ms. If the value is updated more frequently, the updates are ignored until the 500ms delay has passed.
 
 ### Debouncing
 
-<button class="btn btn-primary btn-lg" data-signals="{clicks:0}" data-on-click.debounce_500ms="$clicks++">Debounced button clicked<span data-text="$clicks"> times</span>
+<button class="btn btn-primary btn-lg" data-signals="{clicks:0}" data-on-click.debounce_500ms="clicks.value++">Debounced button clicked<span data-text="clicks.value"> times</span>
 </button>
 
 ```html
 <button
     data-signals="{clicks:0}"
-    data-on-click.debounce_500ms="$clicks++"
+    data-on-click.debounce_500ms="clicks.value++"
 >
     Debounced button clicked
-    <span data-text="$clicks"></span>
+    <span data-text="clicks.value"></span>
     times
 </button>
 ```