intercooler-js/Lobby

intercooler & htmx discussion

oko-x

@oko-x

@chg20 will you create an Issue for that (or should I), so I can keep track :)

1cg

@1cg

@oko-x please do create an issue for it. Is there a way I can test if it performs well enough?

cscortes

@cscortes

@chg20 been thinking about the extension mechanism which a great idea. It seems to have some issues with the ajaxrequest call though.

I have written some psuedo code to start the discussion. I hope to start a dialog

// psuedo code approach 
function revisedajax() {

    // figure out what the "make 80% happy case is"  
    // or the "just works out of the box" case


    var ks;  // kitchensick

    // implement the 80% here, for example this is the "normal" case now

        // NORMALLY, we change verb to either "GET", "POST"
        xhrverb = "GET" or "POST" depending on verb 
        // so add both to kitchensink
        ks.verb = verb;
        ks.xhrverb = xhrverb;

        // NORMALLY, we change the url if GET
        xhrurl = url + urlencodedparameters
        // so add the original url and xhrurl
        ks.url = url 
        ks.xhrurl = xhrurl 

        // NORMALLY, we add parameters to the body if POST
        ks.xhrbody = create body with parameters if POST-like
        ks.parameters = parameters 

        // NORMALLY, we set the mimetype to texthtml
        ks.xhrMimeType = text/html

        // NORMALLY, we set the header content type 
        // like urlencode 
        ks.xhrHeaders = set content type to ... 

    // give extension writer change to deviate from NORM
    // the writer will know that changing variables that 
    // have xhr prefix will change 
    xhrchangeup( ks )

    var xhr =new XMLHttpRequest();

    // set xhr events (non changeable)

    setheaders( xhr, ks.xhrHeaders);
    if (ks.xhrMimeType) xhr.overrideMimeType( ks.xhrMimeType );
    xhr.open( ks.xhrVerb, ks.xhrUrl, true);
    xhr.send( ks.xhrBody);
}

define extension xhrchangeup( "json-enc", ks ) {

    ks.xhrHeaders = change content type to ...
    ks.xhrMimeType = ... 
    ks.xhrbody = encode parameters 

    // use original url 
    ks.xhrurl = ks.url 

}

// maybe 

define extension xhrchangeup( "actual-verb", ks ) {

    ks.xhrHeaders = change content type to ...

    // use the actual verb 
    ks.xhrverb = ks.verb 

}

1cg

@1cg

@cscortes let me get my feet under me (I was on vacation for a week) and consider

I think hyperscript should be available for a lot of request configuration directly in HTML

but I'm not sure about that yet

still need to see how hyperscript develops

but I expect a lot of plugins to be written in hyperscript :)

(or maybe not, to maximize their portability)

cscortes

@cscortes

1cg

@1cg

@cscortes did you see my feedback on your github pull request?

I think that the json-enc extension needs to have two parts to separate out the header setting early enough in the request cycle

cscortes

@cscortes

yes, commented on your comment. But your are correct -2 places with current design.

cscortes

@cscortes

@chg20 oops, -2 sounds bad -- i apologize for the miscommunication, hopefully my comments on github are better worded.

1cg

@1cg

No worries 😉

Htmx 0.1 should be going out next Friday

Ben Croker

@bencroker

Great!!

cscortes

@cscortes

@chg20 I wrote a sample sse example with a flask server. I make the following change to:

        function processSSETrigger(elt, verb, path, sseEventName) {
            var sseSourceElt = getClosestMatch(elt, function (parent) {
                return getInternalData(parent).sseEventSource != null;
            });
            if (sseSourceElt) {
                var sseEventSource = getInternalData(sseSourceElt).sseEventSource;

                var sseListener = function (event) {
                    if (!maybeCloseSSESource(sseSourceElt)) {
                        if (bodyContains(elt)) {
                            getInternalData(elt).sseEvent = event;
                            issueAjaxRequest(elt, verb, path);
                        } else {
                            sseEventSource.removeEventListener(sseEventName, sseListener);
                        }
                    }

noticed I assigned the event to internal data of the element, this may not be the best way to do it.
Can you make some recommendations?

1cg

@1cg

can you show me a diff?

cscortes

@cscortes

Yes, but its been a while since I made this change, don't know how much sense it will make.

@chg20 here you go:

795c787,788
<                 var sseListener = function () {
---
>                 
>                 var sseListener = function (event) {
797a791
>                             getInternalData(elt).sseEvent = event;

1cg

@1cg

hmm

storing the event in the internal data seems a little strange, what's the need?

cscortes

@cscortes

I use that internal data later in my cusotm sse-body extension I was developing.

like so:

htmx.defineExtension('sse-body', {
    encodeParameters : function(headers, parameters, elt) {
        headers["Content-Type"] = "application/json";
        return elt["htmx-internal-data"].sseEvent.data;
    }
});

1cg

@1cg

@cscortes there is a bug around SSE and using the event content here: bigskysoftware/htmx#66

Would you like to implement this change?

I have a suggested syntax:

<ol hx-sse="swap on eventName" hx-swap="beforeend">Loading list...</ol>

from what I can tell, what you are trying to do in a plugin would be better done internally

cscortes

@cscortes

ok. my code looks similar. but it is more verbose with the extension.

I have a second ajax call to a routine that "handles" the sse data returned. I assumed it wasn't going to be html -- because some streams aren't.

1cg

@1cg

as much as possible if it can pass through the normal response handling, that would give us the maximum flexbility

cscortes

@cscortes

this is what that looks like:

   <body id="thebody" hx-sse="connect /news_updates">

        <h1>Receiving Messages:</h1>
        <div id="sselist" hx-trigger="sse:new_news" hx-ext="sse-body" 
        hx-post="/news" hx-target="#nid" hx-swap="beforeend">
            <ul id="nid">
            </ul>
        </div>

    </body>

1cg

@1cg

nice

that looks not bad

but I think it should be folded into the main htmx code

SSE should work when there is content in the event

I didn't do that in intercooler, but that was a mistake I believe now

cscortes

@cscortes

The extra call just give the developer a chance to format data that may not be what you expect either text or html, For example, json. But it does require an extra call back to the server. The decoupling though allows to hit a different server possibly for the sse event. I personally don't like to extra call for efficency reasons. To answer the first question, yes I can take a look at the code to make the changes for your recommendation. I will generate a pull request.

1cg

@1cg

:thumbsup:

1cg

@1cg

<button hx-get="/test" _="on afterSettle.htmx add .myClass">
    Click Me!
</button>

cscortes

@cscortes

@chg20 pull request created for sse data being passed along to the ajax call. works for my example -- let me know if this is what you were thinking.


    <body id="thebody" hx-sse="connect /news_updates">

        <h1>Receiving Messages:</h1>
        <ol hx-trigger="sse:new_news" hx-get="/news" hx-swap="beforeend">
            loading list ... 
        </ol>

    </body>

Keyur Shah

@keyurshah

hey carson, would you consider adding htmx features to be available from javascript as an api. for example, if i needed to programatically create an ajax request from somewhere else. similar to unpoly's up.request() feature. something like hx.post(). thanks!

1cg

@1cg

@keyurshah that’s what I’m intending hyperscript for

Keyur Shah

@keyurshah

That would be great to call hyperscript as a function.

1cg

@1cg

I intend to add functions to the language soon, so it will be invokable from javascript, but I want to make sure I get the semantics correct enough that I don't embarass myself :)

Edouard

@inouire_twitter

Hi Carson, what's the current status of hyperscript project? FYI the demos don't work on y side https://hyperscript, hyperscript.js is not found

36864

@36864

Well, the latest github commit is 0.0.1-alpha1 release. That's pretty alpha.

Has anyone tried using select2 with htmx, specifically triggering content loads based on a select2 value change? I can't get the event to trigger properly.

Where communities thrive

People

Repo info

Activity