Comments (16)
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.
from alpine-magic-helpers.
We've been talking about creating a new repo for v3 items and leave this one locked to V2. What helpers are you using?
from alpine-magic-helpers.
I think the README should have a warning that this projet is not compatible with v3. Thanks!
from alpine-magic-helpers.
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
from alpine-magic-helpers.
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.
from alpine-magic-helpers.
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.
from alpine-magic-helpers.
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.
from alpine-magic-helpers.
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!
from alpine-magic-helpers.
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
from alpine-magic-helpers.
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!
from alpine-magic-helpers.
I would really appreciate if someone could help me understand how to replace
$component
in v3. So far I'm doingdocument.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)
from alpine-magic-helpers.
@HugoDF That's why a $component
magic helper could still be useful. It would relegate all the ugliness out of my code! 😂
from alpine-magic-helpers.
@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!
from alpine-magic-helpers.
@pascalandy sounds like a good idea, do you mind sending a PR? Thanks
from alpine-magic-helpers.
@SimoTod done :)
from alpine-magic-helpers.
@SimoTod done :)
Thanks @pascalandy
from alpine-magic-helpers.
Related Issues (20)
- $get and $post are not defined HOT 2
- autoIntervalTest in $interval doesn't resume/restart properly HOT 11
- Test failing with latest Alpine version HOT 3
- Using $parent in for loop data that has been fetched (to be eventually used in an interval) HOT 9
- iterator not working in table? HOT 2
- $parent not working with x-for HOT 6
- Problem using $scroll with $watch
- RFC: Adding a $select magic helper HOT 4
- Scroll not working when loaded from another livewire component HOT 3
- Seems like $scroll smooth is not smooth anymore? HOT 4
- Missing source of script tag in installation-guide? HOT 1
- scroll not working in alpine.js v3 HOT 1
- $scroll produces promise error HOT 2
- [Question] Finding unused translations HOT 1
- Fallback for missing translations HOT 4
- Installation suggestion is incorrect
- [V3] Installation suggestion incorrect? HOT 1
- Cannot install HOT 1
- Installing doesn't work in V3 – callback is not a function HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alpine-magic-helpers.