Datastar SSE support?

[chadams]

I'm trying to think about how I might use SSE Events for use with Datastar.

Perhaps, a way to run the resulting HTML through a function that divides nodes into data: fragments or something? This might even make realtime updates easier....

[benallfree]

There is someone else asking about Datastar, or are you the same person?

Check out https://pocketpages.dev/docs/context-api/send and https://github.com/benallfree/pocketpages/blob/main/starters/htmx/pb_hooks/pages/api/chat.ejs.

You’ll need to author a Datastar provider something similar to https://github.com/benallfree/pocketbase-htmx-ext-sse. I adapted that from the official sse package and made it work with PocketBase. Check out the commit history to see the modifications I made, Datastar will need something very similar.

[chadams]

different person :) but thanks, I'll take a look

[zivbk1]

I'm working on it a long with esenc on Discord.
I have it working 90% without an adapter. I think it's possible with a little more code client side.

[benallfree]

If I remember correctly, datastar wants a separate sse connection for each watcher. Whereas PocketBase multiplexes all sse on one connection. Does that sound right?

[zivbk1]

Datastar is looking for signal and element patch events to be sent from the server through the connection that it establishes. I think what is missing at the moment is for events/updates from Pocketbase to be sent to the Datastar connection with the signal/element data for the UI updates. I think there needs to be an 'interpreter' that takes the information from the Pocketbase SSE event, converts that into the appropriate patch event data, and sends it to the open connection.

I am still looking into it, so there might be something that I am missing that resolves this whole thing easily.

[benallfree]

I've created a datastar starter project. Basic datastar backend actions (@get etc) work with text/html content types https://github.com/benallfree/pocketpages/blob/data-star/packages/starters/data-star/pb_hooks/pages/(site)/index.ejs#L81

SSE is more involved.

Easy SSE: Respond with a bunch of updates in SSE format

This is just answering with text/event-stream and using the Datastar SSE format (https://data-star.dev/reference/sse_events) in the reply. When you're done, you end the request and the stream closes.

That's super easy.

Hard SSE: Open a stream to receive realtime updates from external events (not user-initiated)

It's not apparent to me that Datastar foresaw this need. Its SSE support seems to be tied to responses from user-initiated actions. For a realtime system like a chat app, it's not as clear what to do. I had to write an htmx plugin for similar reasons.

I looked through the Datastar reference and I don't see that it provides programmatic means of mutating DOM elements even if you had the data to do it.

[benallfree]

https://x.com/benallfree/status/1948501908567826529

[zivbk1]

Maybe we have a custom event that signals an update to the subscription connection?

Then use data-on to listen to that event and use the information passed through the event to update the signals/elements?

[benallfree]

I’m in the Datastar Discord asking what to do.

[zivbk1]

I had this old question from a while ago. https://discord.com/channels/1296224603642925098/1366504349882388551

[bwklein]

@benallfree this works well when you make an endpoint that responds with SSE.
https://gitlab.com/guemesmarket/site/-/blob/main/pb_hooks/pages/xapi/chatsse.ejs

You can call it like this and update the DOM with signals and elements from the SSE response:
https://gitlab.com/guemesmarket/site/-/blob/main/pb_hooks/pages/(site)/chat/index.ejs#L23

[benallfree]

Yep I think the tricky part is listening for incoming messages from the other party. Working on it

[benallfree]

Implemented https://pocketpages.dev/docs/plugins/datastar

https://www.reddit.com/r/pocketbase/comments/1m9tyv3/datastar_support_added_to_pocketpages/