Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add trigger 'htmx:sseClose' to sse close event #31

Merged
merged 7 commits into from
Jul 12, 2024

Conversation

sondalex
Copy link
Contributor

This PR adds a new trigger, "htmx:sseClose", which is emitted when an SSE closing message is received.

Copy link

netlify bot commented Jun 15, 2024

Deploy Preview for htmx-extensions canceled.

Name Link
🔨 Latest commit 2e4cb17
🔍 Latest deploy log https://app.netlify.com/sites/htmx-extensions/deploys/669034daa46ca3000875236e

@Telroshan
Copy link
Collaborator

Hey, while I like the idea, it seems you aren't firing this event in all cases where a source might be closed, was it intended?
For ex I can see those places in the code where you didn't apply it:

if (internalData.sseEventSource) {
internalData.sseEventSource.close()
}

if (source != undefined) {
source.close()
// source = null
return true
}

Also, do you think that, on error, a sseClose event should also be fired? (since it can close the event source, cf the reconnection algorithm)

Also, to accept this PR it'd be good to add the following :

@sondalex
Copy link
Contributor Author

Hi, thank you for the review and recommendations! I understand your concerns about not firing the htmx:sseClose event in all cases where a source might be closed.

Initially, I intended to trigger the event only when a closing message is received, not when the connection is closed due to the removal of the element containing sse-connect. However, I see the value in firing the event in all closing situations.

Regarding your suggestion to fire the same event for all closing connections, I'm open to implementing htmx:sseClose for all cases. Alternatively, I could introduce separate events, such as htmx:sseNodeClose for node replacement and htmx:sseMessageClose for closing messages. What are your thoughts on this ?

@Telroshan
Copy link
Collaborator

Oh I see, makes sense! I think a parameter could make more sense? An enum-like value in the event's details that lets the user know, if it matters to them, what was the reason of this sse close. So that if someone just wants to bind some logic upon a sse connection closing, they don't have to bind 3 different events, and if they need to differentiate the scenarios, they may simply use if/else or a switch statement

@Telroshan Telroshan added the enhancement New feature or request label Jul 9, 2024
@sondalex
Copy link
Contributor Author

sondalex commented Jul 9, 2024

Hi @Telroshan , I have added test cases and implemented the close types in the event details. Thank you for the recommendation.

Users can access the sseClose details as follow:

document.body.addEventListener('htmx:sseClose', function (e) {
    const reason = e.detail.type
    switch(reason) {
        case "nodeMissing":
            // Parent node is missing and therefore connection was closed
            ...
        case "nodeReplaced":
            // Parent node replacement caused closing of connection 
            ...
        case "message":
            // connection was closed due to reception of message sse-close 
            ...
    }
})

@Telroshan
Copy link
Collaborator

Looks good @sondalex, thanks!
Last request before we can merge this ; could you please remove the formatting changes? To concentrate the diff on the actual code changes

@Telroshan Telroshan mentioned this pull request Jul 10, 2024
@sondalex
Copy link
Contributor Author

Sure @Telroshan , I have just fixed it.

@Telroshan Telroshan merged commit c328002 into bigskysoftware:main Jul 12, 2024
5 checks passed
@Telroshan
Copy link
Collaborator

Perfect, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants