Enable Alpine.data() to accept an array/object

[bones-1]

Disclaimer, I am learning, so pardon any "why the hell did he do that" that you see. That said, how about adding an overload to Alpine.data , so that it allows to easily use multiple module objects (from app.js/ts). I have included an example in the picture below:

Imagine it being called like Alpine.data(["database", "notes"]); is. I beleive this that this will lead to cleaner code with little readability tradeoff

[ekwoka]

What would you expect Alpine.data(["database", "notes"]); to do?

[bones-1]

Well, functionally, it would it would still be the same, but for teams that heavily uses classes or exported objects, I think that the former would look better than the latter:

The main motivation behind this to enable Dry'er code

[ekwoka]

But how does Alpine know what to do with the string 'class1' here? What is the expected behavior?

Like that seems too "magical". I have no idea how it's expected to know what to do.

If anything, I'd be in favor of implementing a base class or interface so that you could do just Alpine.data(MyClass) and it can get the name off of that and automatically call it's constructor.

like maybe if it implements [Symbol.toStringTag] properly then that can be used as the thing.

so then it's like

class Counter {
  [Symbol.toStringTag]() {
    return 'Counter'
  }
  count = 0;
  constructor() {}
}

Alpine.data(Counter)

and then you just do <div x-data="Counter"> And alpine properly does the new classcomponent on it.

One thing that you can do though, is just do, in your case

Alpine.data('class1', Class1)

you just need to make sure to do new class1 in the data expressions...

Maybe that could be auto recognized in a safe way, like when it resolves to a function to call, it can see if its a constructor or not....but I think that's undetectable...

[ekwoka]

Additionally, most of the time, I would do separating out parts into modules that just export a PluginCallback so you can do

import thing from './thing.js'
import other from './other.js'

Alpine.plugin([thing, other])