HLive - Diff Apply

Overview

HLive's WebSocket render sends a diff down to the browser, but a handler doesn't normally know when — or whether — that diff has actually been applied to the real DOM. hlivekit.OnDiffApply binds a special client-side event that fires the moment the browser finishes applying a diff containing the element it's attached to, closing that loop.

Because the event fires on the very diff that adds the attribute, it also fires the first time the element itself is created — useful for triggering a CSS transition on a freshly inserted node once it's guaranteed to exist in the DOM.

API

hlivekit.OnDiffApply(handler l.EventHandler) *l.ElementGroup — fires handler every time a diff touching this element is applied.
hlivekit.OnDiffApplyOnce(handler l.EventHandler) *l.ElementGroup — fires once, then removes itself.

Use case

Chaining together a continuously running animation: each frame's diff apply callback computes the next frame and renders it, one step at a time, with the browser itself pacing the loop instead of a server-side timer racing ahead of what's actually on screen. See the Animation example.

Code sample

Adapted from the Diff Apply example:

container := l.NewComponent("code")

Button("Trigger", l.On("click", func(ctx context.Context, e l.Event) {
	container.Add(P("Click"))

	container.Add(
		hlivekit.OnDiffApply(func(ctx context.Context, e l.Event) {
			container.Add(P("Diff Applied"))
			// Remove the binding so it doesn't fire on unrelated renders.
			container.RemoveEventBinding(e.Binding.ID)
		}),
	)
}))

← Focus Element Visibility →