View transitions API demo doesn't transition (#502)

Fixes #501
starfederation · Jan 20, 2025 · 7c8e255 · 7c8e255
1 parent 2e2ef7d
commit 7c8e255
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/library/src/plugins/official/browser/attributes/viewTransition.ts b/library/src/plugins/official/browser/attributes/viewTransition.ts
@@ -14,7 +14,7 @@ const VIEW_TRANSITION = 'view-transition'
 
 export const ViewTransition: AttributePlugin = {
   type: PluginType.Attribute,
-  name: VIEW_TRANSITION,
+  name: 'viewTransition',
   keyReq: Requirement.Denied,
   valReq: Requirement.Must,
   onGlobalInit() {

diff --git a/site/routes_examples_view_transition_api.go b/site/routes_examples_view_transition_api.go
@@ -12,22 +12,20 @@ func setupExamplesViewTransitionAPI(examplesRouter chi.Router) error {
 
 	examplesRouter.Get("/view_transition_api/watch", func(w http.ResponseWriter, r *http.Request) {
 		// You can comment out the below block and still persist the session
+		transition := r.URL.Query().Get("transition")
+		useSlide := transition == "slide"
 
-		signals := &viewTransitionAPISignals{}
-		if err := datastar.ReadSignals(r, signals); err != nil {
-			http.Error(w, err.Error(), http.StatusBadRequest)
-			return
-		}
-
+		vt := datastar.WithUseViewTransitions(true)
 		sse := datastar.NewSSE(w, r)
-		sse.MergeFragmentTempl(viewTransitionAPIUpdate(signals.UseSlide))
+		sse.MergeFragmentTempl(viewTransitionAPIUpdate(useSlide), vt)
+
 		t := time.NewTicker(time.Second)
 		for {
 			select {
 			case <-r.Context().Done():
 				return
 			case <-t.C:
-				sse.MergeFragmentTempl(viewTransitionAPIUpdate(signals.UseSlide))
+				sse.MergeFragmentTempl(viewTransitionAPIUpdate(useSlide), vt)
 			}
 		}
 	})

diff --git a/site/routes_examples_view_transition_api.templ b/site/routes_examples_view_transition_api.templ
@@ -2,10 +2,6 @@ package site
 
 import "time"
 
-type viewTransitionAPISignals struct {
-	UseSlide bool `json:"useSlide"`
-}
-
 templ viewTransitionAPIUpdate(useSlide bool) {
 	<div
 		id="stuff"

diff --git a/site/static/md/examples/view_transition_api.md b/site/static/md/examples/view_transition_api.md
@@ -36,16 +36,16 @@ animation-duration: 0.5s;
 
 ## Demo
 
-<div class="flex flex-col gap-4" data-signals="{supportsViewTransitionAPI:!!document.startViewTransition, useSlide: false}">
-<div data-text="`View Transition API supported in browser? ${$supportsViewTransitionAPI}`"></div>
-<div id="stuff" class="flex gap-4">
-<button class="btn btn-accent" data-show="$supportsViewTransitionAPI" data-on-click="@get('/examples/view_transition_api/watch')">
-    Fade transition
-</button>
-<button class="btn btn-accent" data-show="$supportsViewTransitionAPI" data-on-click="$useSlide = true; @get('/examples/view_transition_api/watch')">
-    Slide transition
-</button>
-</div>
+<div class="flex flex-col gap-4" data-signals="{supportsViewTransitionAPI:!!document.startViewTransition}">
+  <div data-text="`View Transition API supported in browser? ${$supportsViewTransitionAPI}`"></div>
+  <div id="stuff" class="flex gap-4" data-show="$supportsViewTransitionAPI">
+    <button class="btn btn-accent" data-on-click="@get('/examples/view_transition_api/watch')">
+      Fade transition
+    </button>
+    <button class="btn btn-accent" data-on-click="@get('/examples/view_transition_api/watch?transition=slide')">
+      Slide transition
+    </button>
+  </div>
 </div>
 
 ## Explanation
@@ -58,7 +58,7 @@ Datastar automatically adds the proper `<meta/>` tags to properly transition ful
 
 ## Inter-page transitions
 
-By default, if `docuument.startViewTransition` exists each SSE fragment update will be wrapped in a `startViewTransition` async call. This will automatically fade in/out. If you want custom animation, such as
+By default, if `docuument.startViewTransition` exists and incoming SSE fragment has [data: useViewTransition true](https://data-star.dev/reference/sse_events#event-types) update will be wrapped in a `startViewTransition` async call. This will automatically fade in/out. If you want custom animation, such as
 
 ```html
 <style>