Update tutorial part 1

[Rich-Harris]

WIP. Effects is a TODO for now — I think we need it to be in this position, but I'm not sure what a good exercise would be (we should get rid of anything console based since we want to steer people towards $inspect). Struggling to think of examples that shouldn't just be event handlers

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
omnisite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 8, 2024 1:24pm

[dummdidumm]

Struggling to think of examples that shouldn't just be event handlers

Some canvas drawing that reacts to some interval at random? Well ... then you could also the interval directly ... huh.

Goes to show that $effect really is an escape hatch 😅

[Rich-Harris]

I added a setInterval exercise for $effect, I think it's as much as we can do.

Controversy alert: I removed the 'Lifecycle' section:

• While I'm not going to campaign to deprecate onMount, we should really view it as a buggier and less capable $effect. We don't need to scare people who are already familiar with it but I definitely don't think we should be encouraging newcomers to use it. The $effect exercise explains the lifecycle of a dependency-less effect, and I would argue that suffices.
• beforeUpdate and afterUpdate don't belong in the tutorial since they're deprecated (and the example is silly, it should be using a mutation observer)
• that just leaves tick, which is a weird thing to have here by itself — it's an advanced topic, so if it belongs anywhere it belongs in part 2

I also removed the 'Stores' section, because similarly we shouldn't be encouraging people to write new store code. This is obviously a little trickier for two reasons...

• SvelteKit
• spring and tweened, which don't yet have class-based replacements

...but I still don't think it belongs in part 1, and if we have a store tutorial in part 2 it should be brief.

Things are a bit lopsided now — the advanced section is much longer than the basic section. I think we could move some stuff (actions? etc) from part 2 to part 1.

[dummdidumm]

Good stuff! Agree that it's weird to have tweened etc as store versions without having stores explained anywhere. I also think that it's still worth it to have a section on stores in "advanced svelte" - it doesn't need to be as big as now, it's enough to explain the shorthand and that there's a store package. I'm ok with removing the life cycle part.

[dummdidumm]

the accompanying md file still has on:change in it

[dummdidumm]

Approving, assuming that stores will have a reduced version in the advanced section

[erickpaquin]

Hi guys. I'm not sure if I should be writing this here or not, but just wanted to let you know that in the "reactivity / state" part of the tutorial, this part doesn't look correct to me :

{count === 1 ? 'time' : 'times'}

it should say this instead :

{count <= 1 ? 'time' : 'times'}

Otherwise the button label prints "times" plural when the button initializes with 0.

Thanks.

[Rich-Harris]

Right, because '0 time' is wrong. You only use the singular when there's 1 of something. That's why it's called 'singular'

[erickpaquin]

My bad. I didn't know that zero was considered plural in the English language.