On clone, magic helpers don't have access to the freshly cloned component

[KevinBatdorf]

Is there intent behind passing in the canonicalComponentElementReference to the magic helpers instead of passing in the freshly cloned component?

let canonicalComponentElementReference = componentForClone ? componentForClone.$el : this.$el
Object.entries(Alpine.magicProperties).forEach(([name, callback]) => {
  Object.defineProperty(dataExtras, `$${name}`, { get: function () { return callback(canonicalComponentElementReference) } });
})

See here: https://github.com/alpinejs/alpine/blob/master/src/component.js#L25

This limits magic helpers that add properties or keep track of components as only the component that's about to be destroyed is accessible.

@SimoTod ran a test on $wire with the following and says it works all the same.

Object.entries(Alpine.magicProperties).forEach(([name, callback]) => {
  Object.defineProperty(dataExtras, `$${name}`, { get: function () { return callback(this.$el) } });
})

If the canonicalComponentElementReference is required, we could pass this.$el in as a second param instead.

[calebporzio]

Can you paste in a bit of code that demonstrates why this is a hangup for you?

I believe I NEEDED to pass the canonical element reference, so that $wire could access the ACTUAL runtime Livewire component when an Alpine component is cloned for morphdom.

Has someone tested that passing just this.$el still works with Livewire's $wire across morphdom diffs?

[calebporzio]

Let's move this discussion to #859