Hi Support AlpineJS V3 alpine-collective..?

[EOM]

Hi Support AlpineJS V3 alpine-collective ..?

[KevinBatdorf]

We've been talking about creating a new repo for v3 items and leave this one locked to V2. What helpers are you using?

[EOM]

Yes good idea, I just wanted to know if it was compatible with the new version AlpineJS V3. At the moment I continue with the V2, but I will see to migrate to the V3 little by little.
Greetings

[PaulMorel]

Just to put my 2 cents in. I usually come and grab the $component/$parent helper, but from what I can see this isn't needed in v3 anymore. The other one I use is the $screen helper.

[KevinBatdorf]

The component helper would be replaced by Alpine.store() I think, and the parent helper will work without even using $parent or anything at all, just by pretending it's in the same scope.

There could be extreme edge cases where both would be useful though still, like if you need to access a parent prop that has the same name as the child component (maybe you can't control the incoming data), but not sure that's something anyone will use.

[colinaut]

The one I've been using is the $scroll helper. I made a quick version of it using the new v3 Alpine.magic which works without the smooth scroll polyfill. Should be easy enough to include the polyfill, though I've had other pressing dev concerns. It would be great if you roll out a new v3 of the helpers as the $fetch one I'd like to use in another project.

[pomartel]

I think $component would still be very useful. I also use the x-unsafe-html directive. I might try to pull the code in a custom directive since it looks a lot easier in v3!

[HugoDF]

I think with stores/reusable components, $component is a bit of an anti pattern now.

x-unsafe-html is probably reasonably easy to implement with the v3 plugin API

[pomartel]

I would really appreciate if someone could help me understand how to replace $component in v3. So far I'm doing document.getElementById('elementId')._x_dataStack[0] to retrieve a component from a different one which feels like a hack!

[HugoDF]

I would really appreciate if someone could help me understand how to replace $component in v3. So far I'm doing document.getElementById('elementId')._x_dataStack[0] to retrieve a component from a different one which feels like a hack!

that's probably the way to do it 😄 but it is now more hacky because there's now scopes that stack (for child to read/modify parent scope) and stores (for siblings components)

[pomartel]

@HugoDF That's why a $component magic helper could still be useful. It would relegate all the ugliness out of my code! 😂

[KevinBatdorf]

I would really appreciate if someone could help me understand how to replace $component in v3

You would put all the logic from component B into the store, then from component A and B you would use the store to access it. Putting it in the store allows you to access it from anywhere essentially.

It's not a drop in replacement for $component but a better pattern. When I wrote $component it was more so because I wanted $parent and the code was basically the same so I added it then because it was an easy win. It was probably better to use Spruce back then anyway.$component and $parent were definitely hacks though in the same sense you're describing.

But here you go

Alpine.magic('component', (el, { Alpine: { closestRoot } }) => {
  return (selector) => {
    const root = closestRoot(document.querySelector(selector))
    return root._x_dataStack[0]
  }
})

https://codepen.io/KevinBatdorf/pen/GRmJbNq?editors=1010

it's essentially what you are doing now, but has an extra check you're on the root (simply because the check was already in my clipboard 😎)

It doesn't have the added checks $component has to make sure everything is initialized, but that might not even be needed in v3. Not sure.

[pomartel]

@KevinBatdorf Thanks! 🙇‍♂️ I will use your snippet of code for now as I'm just trying to migrate to v3 without any regressions (so far so good!). But I do understand how a store is a better paradigm to share data while keeping components encapsulated. I will give it a go next week!

[pascalandy]

I think the README should have a warning that this projet is not compatible with v3. Thanks!

[SimoTod]

@pascalandy sounds like a good idea, do you mind sending a PR? Thanks

[pascalandy]

@SimoTod done :)

[SimoTod]

@SimoTod done :)

Thanks @pascalandy