HUGE Documentation Improvement

[Mtillmann]

The "essentials > state > re-usable data" documentation has an example code block that will not under any circumstances work when alpine is included via <script> tag since it omits the alpine:init event handler.

The necessity of the handler is only revealed when you click "read more about...".

In my opinion this makes for an extremely frustrating experience because the essential way of using alpine does not work.

sadly I can't find the repo of the docs other I'd do a PR there.

[ekwoka]

The docs pages are all in this same repo, aside from the main page.

And I am not sure what exactly you mean.

What's the issue? Does it not work on the docs site?

[asbjornu]

The issue I think @Mtillmann has is that the Re-usable data example:

Alpine.data('dropdown', () => ({
    open: false,
 
    toggle() {
        this.open = ! this.open
    }
}))

Doesn't include the document.addEventListener('alpine:init', …) event handler required to invoke Alpine.data(…). But since Alpine can be used in different scenarios, I get why the code example is missing that bit of information. Not a huge deal, imho.

[Mtillmann]

Hi guys, sorry I had very low blood sugar when I wrote the issue. Yes - the missing alpine:init really tripped me up. I think it should be mentioned that it might be necessary in certain situations because it really isn't that obvious and it might turn people away from using the project. Hopefully this issue might be of help to someone who googles why his basic setup isnt't working

[ekwoka]

I don't know, it's covered in the essentials -> lifecycle

because the essential way of using alpine does not work.

Using it via a cdn tag is not the "essential" way though. It's just an option.

These kinds of documentation will always have some issue in regards to what assumptions do we make about the readers existing knowledge.

The way that the code you seem to be trying would fail, would also lead the errors that do actually point a bit to the issue.

I guess a link in the installation section for the CDN link to the lifecycle event handler would be appropriate.