Alpine directives not evaluated within asynchronously added x-html

[liam-edwards]

I am facing an issue where Alpine directives within x-html that is fetched asynchronously are not evaluated. What I've resorted to doing is running Alpine.initTree on the component-editor class after the x-for and x-html render the added HTML. This has worked for the most part but it is not reliable. Below is a simplified version of my JavaScript and markup.

const Page = {
    components: [],
    async addComponent(component) {
        const response = await fetch(`/component/${component}`)
        const html = await response.text()
        this.__addNewComponent(html, component)
    },
    __addNewComponent(html: string, type: string) {
        const index = this.components.length
        this.components.push({
            index,
            html,
            type,
        })
        // function call that runs `Alpine.initTree` on `.component-editor` (ensures it only runs once per editor)
    },
}

window.Page = function() {
    return Page
}

<!-- All within the Page data: -->
<template x-for="(component, index) in components" :key="index">
    <!-- A little ways down the DOM -->
    <div class="component-editor" x-html="component.html"></div>
</template>

<!-- Elsewhere on the same page -->
<button @click="addComponent('{{ c.type }}')" type="button" class="..">..</button>

Up until recently, all the HTML that was added asynchronously had just been using x-bind and after the aforementioned Alpine.initTree, it would work, however a new one requires more complicated Alpine logic, including x-for, x-show, @click, and x-text. Simplifying it a bit:

<div class="..">
    <template x-for="(child, index) in component.children" :key="index">
        ..
    </template>
    <a class=".." x-text="'Add Item'" @click="component.addChild()"></a>
</div>

The x-text's purpose was simply to show that the Alpine directive wasn't evaluating, even with Alpine.initTree getting applied over this. See attached video for that. On a whim, I tried running Alpine.initTree on all the children of .component-editor as well, and remarkably, that fixes the button, however it breaks the initial x-for from the first markup snippet by making it render two items despite only one being in the array. Removing the Alpine.initTree on .component-editor and leaving it on the children fixes that new issue, but now the button is broken again.

All in all, there are a few issues here, but they all stem from Alpine directives within asynchronously added x-html not working.

alpine-strangeness.mp4

[liam-edwards]

Just an update, moving that button in the last snippet to above the x-for fixes it, however, that's not exactly where I want the button so the situation isn't ideal (though adding order CSS could be an interesting solution to that). Could this possibly be related to #1697?