Looks like you're doing that with YoYo; although I don't quite grok the structure yet.

ie, when you update the component server-side, it propagates to client side

Something like ... https://v3.vuejs.org/guide/component-basics.html but server-side.

I created an HTMX extension for Yoyo that automatically routes all requests to a specific route. So if I have

hx-get="increment"

that triggers a request to

/yoyo?index.php?component=counter/increment

. Then on the server side I use the

component

parameter to figure out which component needs to be re-rendered.

So the

/yoyo

route is just for updating individual components.

The extension also gets the component name

counter

from the HTML markup

yoyo:name="counter"

so it can include it in the request URL.

I get a http status 204 (no content) and because I do a full refresh of the page get all blank, how avoid it?

Do you have to return a 204?

I get this from other service that proxy (cloudflare)

is there a way to do something like

<button hx-get="#template">Click me</button>

where template is

<template id="template"><div>hello world</div></template>

?

or maybe

<button hx-select="#template">Click me</button>

i guess, this might be out of scope, could be hyperscript related

Yeah, a little out of scope, but we have talked about making hx-get support

javascript:

@User we should be ignoring a 204

now that i think about this, it could just be an extension

doesn't need to be in core

@User look like is correct. I was looking at the old htmx

the master version look like have some fixes I was not aware!

I will check if this work now

@User Is there a way to make the

beforeend

swap only append when the ID isn't already there? If it's there then it swaps the existing element? A use-case for this would be for modals where you have a list of items with edit buttons. You click one button, it appends the modal HTML to the body using htmx. Then you close the modal, click another button and instead of appending a new modal, it re-uses the existing one based on the existing ID attribute. Or maybe there's a more practical way to do this? The reason why I want to append the modal to begin with, instead of just having a div there on page load, is because I may not have control over the entire page.

hmmm

I could always use Javascript 🤯 to append an element with a known ID to the body on load and use that one.

I was just wondering what others do in this case.

I also looked at the extension system for this, but couldn't find a simple way to do it.

Ok, so I solved it using the

htmx:processedNode

event. Read

hx-target

value there. If it's an ID (e.g.

#some-id

), then find the element and create if it's not already there.

excellent!

You can pretty much do anything with the events system 🙂

that's the idea!