Expose Alpine.data and Alpine.store objects

[dy]

Hello!

I'm transitioning from @preact/signals and preact world and having a hard time connecting alpine to external API, a bit puzzled with one moment.
I would expect Alpine.store('someStore', init) and Alpine.data('someData', init) to return some proxy object as result, to easily get access to component and to be able externally modify its state. Sort of

import { onAuthStateChanged } from 'firebase/auth';
const auth = Alpine.store('auth', { user: null });
onAuthStateChanged(user => auth.user = user);

That's can be naturally done with preact-signals or similar observable tool.

import {signal} from '@preact/signals';
const auth = signal({user:null});
onAuthStateChanged(user => auth.value = {user});

I wonder if that's something alpine developers intentionally went against?
What's the most expected way for an app to react on external API callbacks or update its state from outside? Passing changes through firing events on window seems cumbersome.

For now the only way I can see is hoisting API manually in init method:

let auth
Alpine.data('auth', {
  init() {auth=this},
  user: null
})
onAuthStateChanged(user => auth.user = user);

---

I had to come up with alternative implementation in sprae

[ekwoka]

Well, Alpine.data does not instantiate a component, so it has nothing to return.

Multiple components can use the same data and they get a unique context (that's why the data accepts a function that returns an object.

Alpine.store, after instantiation, if you only provide the key, it will return the reactive object you assigned before. This allows you to access it outside of the Alpine context.

It's a bit hacky, but, within a data object, you can assign it's context to a variable that is scoped outside of the component like window.myComp = this but that's a bit hacky, but it's allowed in JavaScript.

If all you want is a reactive object, you can use Alpine.reactive but this won't be naturally provided as a store or data context.

But mainly, it's normal in Alpine to do your listener for auth state changed INSIDE the relevant component.

You could put it inside the Stores init method, for example.

Like in Preact you do that code mostly inside the components, it's the same with Alpine.

[SimoTod]

onAuthStateChanged(user => Alpine.store('auth').user = user);

[dy]

I guess I only mean why 'Alpine.store('auth', init)' doesn't immediately return store object like 'Alpine.store('auth')'

[SimoTod]

The function call with 2 parameters is a setter and with one parameter is a getter. No real reason, it's just how the API is designed: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/store.js

[dy]

It makes me think constructor idiom would be more practically ubiquitous than a setter/getter - that's unlikely store is set many times during the app lifetime, is it?

[SimoTod]

Maybe, they look pretty much the same to me. The setter "could" return the proxy after it does all its stuff, but it doesn't. The maintainer (there's no Alpine team at the minute) designed the feature in that way and it works for the majority of people. 🤷

You can send a PR but changes based on personal preferences don't get approved really often unless they show a tangible benefit (fixing a bug, hugely improving performances, etc)