Teleported x-data using async alpine broken on Alpine ^v3.14.4 #4467
-
|
Hi i'm using async alpine and after Alpine.js ^v3.14.4 it broke the teleported here's the minimal bug reproduction: index.html (try change to alpine version ^v3.14.4 to v3.14.3 then see the console) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/async-alpine.script.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center w-full h-dvh">
<div x-data="{ open: false }">
<button type="button" x-on:click="open = !open">Toggle</button>
<template x-teleport="body">
<div
class="h-dvh fixed inset-0 z-50 w-full bg-slate-950/50 flex items-center justify-center"
x-show="open"
x-cloak
x-on:click="open =! open"
>
<div x-load x-load-src="async-alpine.js" x-ignore x-data="asyncAlpineData" class="bg-pink-500 text-white"></div>
<div
x-data="{
init(){
console.log('inline alpine data')
}
}"
></div>
</div>
</template>
</div>
</body>
</html>async-alpine.js export default function asyncAlpineData() {
return {
init() {
this.$root.innerHTML = "foo";
console.log("hello");
},
};
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 21 replies
-
|
fixed in #4450 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I think I may be that other user, I reported this here. We have an internal package that does similar things to Async Alpine: lazy-loading, etc. I’m also wondering what the purpose of that It would be great to find a way to resolve the conflict between those two lines. |
Beta Was this translation helpful? Give feedback.
-
|
So x-teleport used to be the portal plugin. When it was a plugin, it did not have the ignore bit which was added when converted to a core directive here: #2431 Unfortunately, there's no context in that PR or in any of the commits and I don't think it's covered by test so it's not easy to predict what it would break if your remove that line. I suspect it's safe to remove since Alpine now marks elements that have already been processed so they don't get initialised twice so there's no point in ignoring the element after initTree but I can't be 100% sure. |
Beta Was this translation helpful? Give feedback.
-
|
Did some more testing today and I can actually run into this issue without lazy-loading or calling Elements added to teleport targets after they’ve been cloned can’t initialize. Below is a link to a minimal repro using https://awesomealpine.com/play?share=RqrQ3-jaU_H7 @ekwoka I wonder if this is somehow related to the issue reported in #4461? I know this example is contrived but this is actually something I’m running into in real-life code. |
Beta Was this translation helpful? Give feedback.
-
|
I had a look this with Caleb on our call this morning and we think the teleport So I've submitted an Alpine PR #4469 with it removed and a Livewire PR livewire/livewire#9072 with the Alpine fix and both test suites are passing. |
Beta Was this translation helpful? Give feedback.
-
|
fixed in latest version, thanks @joshhanley ! |
Beta Was this translation helpful? Give feedback.
-
|
@danie-ramdhani thanks for confirming 🙂 The fix is in v3.14.7 incase anyone else comes across this. |
Beta Was this translation helpful? Give feedback.
-
|
Fixed for me too, thanks @joshhanley! |
Beta Was this translation helpful? Give feedback.
I had a look this with Caleb on our call this morning and we think the teleport
clone._x_ignore = truewas something for Livewire. But we're not 100% on that. Caleb said to just try removing it and see if both test suites pass.So I've submitted an Alpine PR #4469 with it removed and a Livewire PR livewire/livewire#9072 with the Alpine fix and both test suites are passing.