Fix morph when x-for is used inside x-teleport

The Problem

Morphing the following HTML to itself (like in the case of refreshing a Livewire component) doesn't work and throws an error:

<div>
    <template x-teleport="body">
        <div>
            <template x-for="item in 3" :key="item">
                <span x-text="item"></span>
            </template>
        </div>
    </template>
</div>

The 3 errors: Uncaught ReferenceError: item is not defined

It's worth noting that without the <template x-teleport="body"> element, this works fine.

The explanation

Generally speaking, when Alpine morphs, it walks the live tree and the reference tree element by element. Along the way, "cloning" (initializing) the reference tree as it goes and comparing the given elements for differences. If it finds one, it mutates the live DOM and keeps going.

Then, at the end of this process, the Alpine's mutation observer will pick up any mutations and handle them.

In this case, the error is being thrown by the mutation observer. It is errantly picking up extra <span x-text="item"> elements, not finding scope to initialize them, and throwing an error.

To understand the problem, we need to go through each step of the morph/clone phase to understand at what point, extra elements are added to the live DOM that shouldn't be.

Let's go through it:

Understanding morph/clone

Brief reminder: The morph algo will compare two HTML trees (a live one and a reference one) element by element. As it goes it will initialize the "reference" elements using state from the live tree so that it is a fair comparison.

Now that you're fresh on the basic algorithm, let's walk this tree element by element and talk through each step:

<div> -> <div>
- Nothing to compare
<template x-teleport="body" data-teleport-template="true"> -> <template x-teleport="body">
- Alpine will try to "initialize" the new x-teleport element. It will basically initialize it as normal, except it can't teleport anywhere, so it teleports itself to a container element that is disconnected from the document

We don't need to explore this understanding any further because I found the issue:

At this point (Initializing x-teleport in the clone tree), Alpine will append the x-teleport contents to a disconnected container node AND intiailize that node in-place.

This means that it will be DOUBLE initialized, because morph will try to initialize it as it's walking the tree.

This completely explains why we're getting a Uncaught ReferenceError: item is not defined. It's because there is are double the spawned <span> elements from x-for.

The Solution

The solution is simple: skip initializing the x-teleport tree during the clone phase (just like we do for x-for)

alpinejs / alpine