Update start-here.md with gotchas on using x-for

[james2doyle]

The start here page section on x-for doesn't mention the fact that you must have only one root element in a loop. I ran into this gotcha when trying to convert some Vue code to Alpine. It is only mentioned in a block quote on the x-for page itself.

I added an additional block of content on this and also an incorrect example with instructions on how to fix it

[ekwoka]

This is covered on the x-for page, which is the appropriate place for it.

the get started can't have all the info about everything...

my opinion anyway.

[james2doyle]

I hear you. This issue inhibited me from getting started so I thought it would be helpful to have on the getting started section.

I also noticed that if you use Alpine from npm there is no debug logging, so that got me too. But that is a different issue.

I went to the docs to read more and had to eventually see the one line on the x-for page

[ekwoka]

there is no debug logging

What do you mean?

I went to the docs to read more and had to eventually see the one line on the x-for page

I think making it larger in x-for would be reasonable. But it seems like the nuances of nested x-for/x-if makes more sense in their respective pages, as it's not a general "this is the basics of alpine".

[SimoTod]

The debug logging is likely stripped out by whatever you use to bundle the script

[james2doyle]

@ekwoka I was seeing this when using Alpine is jsfiddle:

But when using Alpine in Vite through NPM, I wasn't getting the same logging info.

Back on topic, I see that the tone of the docs isn't really bad-to-good. So my contribution stands out a bit more than others

[ekwoka]

The code is the same for both. Your npm installed version may be just older than when the template root tag log was added.

But those logs do happen for sure.

And yeah, the docs could be improved some in many places. I'm just generally in favor of detailed info and gotchas focussed on the pages about that feature.

Getting started shouldn't be getting too in the weeds about these cases.

Maybe ensuring the sections in getting started also properly link to the relevant pages would be good.

[james2doyle]

Ah ok. I'll see if I can recreate the logging issues on a code sandbox or something.

Has the team considered a "common issues" section?

Or "coming from X framework" pages?

I was converting Vue code, which does allow loops and conditions on elements as well as multiple root elements.

Could be a better spot for some of these things as well as educational information

On Fri, May 31, 2024, 12:26 PM Eric Kwoka @.***> wrote:

The code is the same for both. Your npm installed version may be just older than when the template root tag log was added.

But those logs do happen for sure.

And yeah, the docs could be improved some in many places. I'm just generally in favor of detailed info and gotchas focussed on the pages about that feature.

Getting started shouldn't be getting too in the weeds about these cases.

Maybe ensuring the sections in getting started also properly link to the relevant pages would be good.

— Reply to this email directly, view it on GitHub https://github.com/alpinejs/alpine/pull/4245#issuecomment-2142861205, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAK37GDJWC6N5FOY6CG3DCDZFDFHJAVCNFSM6AAAAABIRLM4BWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBSHA3DCMRQGU . You are receiving this because you authored the thread.Message ID: @.***>

[SimoTod]

@ekwoka I was seeing this when using Alpine is jsfiddle:

But when using Alpine in Vite through NPM, I wasn't getting the same logging info.

Back on topic, I see that the tone of the docs isn't really bad-to-good. So my contribution stands out a bit more than others

As mentioned above, depending on your config, vite removes the console.log from the final bundled file.

But it's a fair point, people may not see those console log if they use the npm build with similar settings. Unfortunately there are a lot of things in the documentation and people should try to read the relevant sections, at least when they hit an unexpected behaviour.

You can imagine that if you start moving every note (you got stuck with that, other people may think another part deserves to be there, etc) to the 'start here' page, you'll end up with an endless page that it's too long to read and duplicates the rest of the docs.

That being said, Caleb is the maintainer. Just leave the pr open, he'll have a look and decide if it's worth adding it.

[calebporzio]

Agreed on all the above points. Thanks everyone for weighing in