Does x-teleport.replace (or equivalent) exist?

[gjcourtney]

I've got a scenario where I've got an Alpine component making a fetch() request to get some HTML back from the server. Within my component, I'm using x-html to bind the returned HTML content into the UI where I want it. All good.

I would however, also like to update another section of my UI with some of the content that comes back in the HTML response. This is a totally separate fragment of my page, so isn't within the scope of the Alpine component that made the initial fetch() request. I could extract the DOM nodes from the HTML response and then $dispatch('update-my-fragment', {html: domNodes}) to send the HTML to another Alpine component, but that feels more clunky and labour intensive than I'd ideally like.

What ocurred to me was that I'm essentially looking to teleport the HTML to another part of my page. In my head I want to do something like x-teleport.replace="#fragment", however x-teleport appears only to be capable of appending and not replacing.

Before I work out how to raise a PR for the functionality I'm looking for, I wondered if others had an existing approach to what I'm describing, and also whether a PR for this is likely to be accepted?

[ekwoka]

So what is wrong with the appending in that case though?

You could also, since you have it, manually do it.

document.querySelector('#fragment').replaceWith(domstring)

[SimoTod]

With replace, you are going to lose the target and it could break the morph plugin (and livewire as well). Probably okay for your use case but if it breaks morph, it won't be merged in so you need to verify that.

[gjcourtney]

Cool, thanks for the tip about morph, wasn't aware of that. I might see if I can do something with it along the lines of <div x-init="Alpine.morph(document.getElementById('#fragment'), $el.outerHtml)">...</div>

[ekwoka]

That should work fine.

You could also make a custom directive, or simple function.

x-teleport.replace will still need to be written multiple times.

[walirazzaq]

@SimoTod I also came across somewhat similar use case where I needed to replace the contents of the target not replacing the whole target. Maybe an x-teleport.overwrite modifier would helpful another else if condition here and doing it like:

{
target.innerHTML = ''
target.appendChild(node)
}

Not sure if I am missing something because I don't have extensive knowledge about Alpines' morph.

[ekwoka]

target.replaceChildren(node)