Fix datastar examples (#3814)

Author: 987Nabil

docs/reference/datastar-sdk/index.md

@@ -107,7 +107,7 @@ import zio.http.template2._
 import zio.http.endpoint.Endpoint
 
 body(
-  dataOnLoad := Js("@get('/hello-world')"),
+  dataOnLoad := js"@get('/hello-world')",
   dataOn.load := Endpoint(Method.GET / "hello-world").out[String].datastarRequest(()),
   div(
     className := "container",
@@ -237,7 +237,7 @@ div(
   h1("👋 Greeting Form 👋"),
   form(
     id("greetingForm"),
-    dataOn.submit := Js("@get('/greet', {contentType: 'form'})"),
+    dataOn.submit := js"@get('/greet', {contentType: 'form'})",
     label(`for`("name"), "What's your name?"),
     input(`type`("text"), id("name"), name("name"), placeholder("Enter your name!"), required, autofocus),
     button(`type`("submit"), "Greet me!"),
@@ -281,7 +281,7 @@ Assume you call the `/hello-world` endpoint that streams a "Hello, World!" messa
 
 ```scala mdoc:compile-only
 body(
-  dataOn.load := Js("@get('/hello-world')"),
+  dataOn.load := js"@get('/hello-world')",
   div(
     className := "container",
     h1("Hello World Example"),
@@ -563,7 +563,7 @@ utils.printSource("zio-http-example/src/main/scala/example/datastar/ServerTimeEx
 
 **How it works:**
 
-The page displays a time value using `dataText := Js("$currentTime")`, which binds the text content of a span element to the `currentTime` signal. The signal is declared with `dataSignals(Signal[String]("currentTime"))` and initialized to an empty string. When the page loads (`dataOn.load := Js("@get('/server-time')")`), it establishes an SSE connection to the `/server-time` endpoint.
+The page displays a time value using `dataText := $currentTime)`, which binds the text content of a span element to the `currentTime` signal. The signal is declared with `dataSignals(Signal[String]("currentTime"))` and initialized to an empty string. When the page loads (`dataOn.load := Js("@get('/server-time')")`), it establishes an SSE connection to the `/server-time` endpoint.
 
 The server handler uses ZIO's scheduling capabilities to create a repeating effect that runs every second. Each second, the server:
 1. Gets the current time from the clock
@@ -583,22 +583,17 @@ utils.printSource("zio-http-example/src/main/scala/example/datastar/GreetingForm
 
 **How it works:**
 
-The page contains a form with an input field for the user's name. The form uses `dataOn.submit := Js("@get('/greet', {contentType: 'form'})")` to intercept the submit event and send a GET request with the form data. The `{contentType: 'form'}` option tells Datastar to serialize the form fields as query parameters.
+The page contains a form with an input field for the user's name. The form uses `dataOn.submit := js"@get('/greet', {contentType: 'form'})"` to intercept the submit event and send a GET request with the form data. The `{contentType: 'form'}` option tells Datastar to serialize the form fields as query parameters.
 
 Unlike the streaming examples, the server responds with a single HTML fragment (not SSE):
 
 ```scala
-Response(
-  headers = Headers(Header.ContentType(MediaType.text.`html`)),
-  body = Body.fromCharSequence(
-    div(id("greeting"), p(s"Hello ${req.queryParam("name").getOrElse("Guest")}")).render
-  )
-)
+event(handler((_: Request) => DatastarEvent.patchElements(indexPage)))
 ```
 
 The response is a `text/html` fragment containing a div with `id="greeting"`. Datastar automatically finds the existing `<div id="greeting">` in the DOM and morphs it with the new content, displaying the personalized greeting.
 
-The interaction is smooth and partial—only the greeting div updates, not the entire page. This pattern is useful for traditional CRUD operations where you don't need continuous streaming but want the benefits of hypermedia-driven updates.
+The interaction is smooth and partial—only the greeting div updates, not the entire page.
 
 ### Fruit Explorer Example
 
@@ -612,7 +607,7 @@ utils.printSource("zio-http-example/src/main/scala/example/datastar/FruitExplore
 
 The page contains a single input field with two key attributes:
 1. `dataBind("query")` - Binds the input value to a `$query` signal
-2. `dataOn.input.debounce(300.millis) := Js("@get('/search?q=' + $query)")` - Triggers a search request 300ms after the user stops typing
+2. `dataOn.input.debounce(300.millis) := js"@get('/search?q=' + ${$query})"` - Triggers a search request 300ms after the user stops typing
 
 The debouncing prevents excessive server requests while typing. Each keystroke updates the `$query` signal, but the search only fires after a 300ms pause, reducing server load and providing a smoother UX.
 

zio-http-example/src/main/scala/example/datastar/FruitExplorerExample.scala

@@ -57,11 +57,8 @@ object FruitExplorerExample extends ZIOAppDefault {
         meta(charset("UTF-8")),
         meta(name("viewport"), content("width=device-width, initial-scale=1.0")),
         title("Fruit Explorer Example - ZIO HTTP Datastar"),
-        script(
-          `type` := "module",
-          src    := "https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js",
-        ),
-        style.inlineCss("""
+        datastarScript,
+        style.inlineCss(css"""
           ::view-transition-old(root),
           ::view-transition-new(root) {
               animation-duration: 0.8s;
@@ -162,7 +159,7 @@ object FruitExplorerExample extends ZIOAppDefault {
               name                              := "query",
               dataSignals($query)               := "",
               dataBind($query.name),
-              dataOn.input.debounce(300.millis) := Js("@get('/search?q=' + $query)"),
+              dataOn.input.debounce(300.millis) := js"@get('/search?q=' + ${$query})",
               autofocus,
             )
           },

zio-http-example/src/main/scala/example/datastar/GreetingFormExample.scala

@@ -9,26 +9,17 @@ import zio.http.template2._
 object GreetingFormExample extends ZIOAppDefault {
 
   val routes: Routes[Any, Response] = Routes(
-    Method.GET / ""      -> handler {
-      Response(
-        headers = Headers(
-          Header.ContentType(MediaType.text.html),
-        ),
-        body = Body.fromCharSequence(indexPage.render),
-      )
-    },
-    Method.GET / "greet" -> handler { (req: Request) =>
-      Response(
-        headers = Headers(
-          Header.ContentType(MediaType.text.`html`),
-        ),
-        body = Body.fromCharSequence(
+    Method.GET / ""      ->
+      event(handler((_: Request) => DatastarEvent.patchElements(indexPage))),
+    Method.GET / "greet" -> event {
+      handler { (req: Request) =>
+        DatastarEvent.patchElements(
           div(
             id("greeting"),
             p(s"Hello ${req.queryParam("name").getOrElse("Guest")}"),
-          ).render,
-        ),
-      )
+          ),
+        )
+      }
     } @@ Middleware.debug,
   )
 
@@ -37,10 +28,7 @@ object GreetingFormExample extends ZIOAppDefault {
       meta(charset("UTF-8")),
       meta(name("viewport"), content("width=device-width, initial-scale=1.0")),
       title("Greeting Form - ZIO HTTP Datastar"),
-      script(
-        `type` := "module",
-        src    := "https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js",
-      ),
+      datastarScript,
       style.inlineCss(css),
     ),
     body(
@@ -49,7 +37,7 @@ object GreetingFormExample extends ZIOAppDefault {
         h1("👋 Greeting Form 👋"),
         form(
           id("greetingForm"),
-          dataOn.submit := Js("@get('/greet', {contentType: 'form'})"),
+          dataOn.submit := js"@get('/greet', {contentType: 'form'})",
           label(
             `for`("name"),
             "What's your name?",

zio-http-example/src/main/scala/example/datastar/HelloWorldWithCustomDelayExample.scala

@@ -57,10 +57,7 @@ object HelloWorldWithCustomDelayExample extends ZIOAppDefault {
         meta(charset("UTF-8")),
         meta(name("viewport"), content("width=device-width, initial-scale=1.0")),
         title("Datastar Hello World - ZIO HTTP Datastar"),
-        script(
-          `type` := "module",
-          src    := "https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js",
-        ),
+        datastarScript,
         style.inlineCss(css),
       ),
       body(
@@ -87,7 +84,7 @@ object HelloWorldWithCustomDelayExample extends ZIOAppDefault {
       .serve(routes)
       .provide(Server.default)
 
-  val css = """
+  val css = css"""
     body {
       display: flex;
       flex-direction: row;

zio-http-example/src/main/scala/example/datastar/ServerTimeExample.scala

@@ -14,12 +14,9 @@ object ServerTimeExample extends ZIOAppDefault {
   val timeHTML = html(
     head(
       title("Server Time - Datastar"),
-      script(
-        `type` := "module",
-        src    := "https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js",
-      ),
+      datastarScript,
       style.inlineCss(
-        """
+        css"""
         body {
           display: flex;
           justify-content: center;
@@ -111,14 +108,10 @@ object ServerTimeExample extends ZIOAppDefault {
     }
 
   val routes = Routes(
-    Method.GET / Root          -> handler(
-      Response(
-        status = Status.Ok,
-        headers = Headers(Header.ContentType(MediaType.text.html)),
-        body = Body.fromString(timeHTML.render),
-      ),
-    ),
-    Method.GET / "server-time" -> serverTimeHandler,
+    Method.GET / Root          ->
+      event(handler((_: Request) => DatastarEvent.patchElements(timeHTML))),
+    Method.GET / "server-time" ->
+      serverTimeHandler,
   )
 
   override def run =

zio-http-example/src/main/scala/example/datastar/SimpleHelloWorldExample.scala

@@ -56,7 +56,7 @@ object SimpleHelloWorldExample extends ZIOAppDefault {
       .serve(routes)
       .provide(Server.default)
 
-  val css = """
+  val css = css"""
     body {
       display: flex;
       flex-direction: column;

zio-http/shared/src/main/scala-2/zio/http/template2/JSInterpolatorMacros.scala

@@ -58,6 +58,10 @@ object JSInterpolatorMacros {
     val trimmed = js.trim
     if (trimmed.isEmpty) return true
 
+    // Check for Datastar expressions (e.g., @get('url'), @post('url'), etc.)
+    val datastarPattern = """@[a-zA-Z_][a-zA-Z0-9_]*\s*\([^)]*\)""".r
+    if (datastarPattern.findFirstMatchIn(trimmed).isDefined) return true
+
     // Basic JavaScript validation patterns
     val jsKeywords = Set(
       "var",
@@ -104,6 +108,6 @@ object JSInterpolatorMacros {
 
     validJsPatterns.exists(_.findFirstMatchIn(trimmed).isDefined) ||
     jsKeywords.exists(keyword => trimmed.contains(keyword)) ||
-    """^[a-zA-Z0-9_$\s.(){}\[\];:,'"+-=<>!&|*/%]+$""".r.findFirstMatchIn(trimmed).isDefined
+    """^[a-zA-Z0-9_$\s.(){}\[\];:,'"+-=<>!&|*/%@]+$""".r.findFirstMatchIn(trimmed).isDefined
   }
 }

zio-http/shared/src/main/scala-3/zio/http/template2/JsInterpolatorMacros.scala

@@ -51,6 +51,10 @@ object JsInterpolatorMacros {
     val trimmed = js.trim
     if (trimmed.isEmpty) return true
 
+    // Check for Datastar expressions (e.g., @get('url'), @post('url'), etc.)
+    val datastarPattern = """@[a-zA-Z_][a-zA-Z0-9_]*\s*\([^)]*\)""".r
+    if (datastarPattern.matches(trimmed) || datastarPattern.findFirstMatchIn(trimmed).isDefined) return true
+
     // Basic JavaScript validation patterns
     val jsKeywords = Set(
       "var", "let", "const", "function", "if", "else", "for", "while", "do", "switch", "case",
@@ -70,6 +74,6 @@ object JsInterpolatorMacros {
 
     validJsPatterns.exists(_.matches(trimmed)) ||
     jsKeywords.exists(keyword => trimmed.contains(keyword)) ||
-    trimmed.matches("""^[a-zA-Z0-9_$\s.(){}\[\];:,'"+-=<>!&|*/%]+$""")
+    trimmed.matches("""^[a-zA-Z0-9_$\s.(){}\[\];:,'"+-=<>!&|*/%@]+$""")
   }
 }

zio-http/shared/src/main/scala/zio/http/template2/Css.scala

@@ -5,6 +5,4 @@ sealed abstract case class Css(value: String) {
   def stripMargin: Css          = Css(value.stripMargin)
 }
 
-object Css {
-  private[template2] def apply(value: String): Css = new Css(value) {}
-}
+object Css { def apply(value: String): Css = new Css(value) {} }