Svelte: Remaining tutorial issues

[Rich-Harris]

Post-#2132, a few tutorial-related items still outstanding:

Blog posts

• [ ] 'Svelte for new developers' assuming no knowledge beyond HTML, CSS and JS (i.e. CLI, Node and npm, degit, build tools)
• [ ] How to set up an editor for syntax highlighting.

Remaining chapters

Stores

• [x] custom stores
• [x] bind:value={$foo}
• [x] $foo += 1 (if we implement it)
• [ ] Adapting Immer, Redux, Microstates, xstate etc

Transitions

• [x] Local transitions

Animations

• [x] animate:flip

use: directive

• [ ] use:foo={bar} (struggling to think of a non-contrived use case)

There's also a couple of TODOs or TKs left in the content, I think.

Tutorial functionality

• [ ] add an 'open this in REPL' button that takes you to the full REPL
• [x] figure out wtf to do on mobile
• [x] https://svelte.dev/tutorial/svelte-options flash doesn't work on Firefox

REPL stuff

• [x] Add the rest of the compiler options

[matt3224]

I flagged this on discord but will do so here too

In Safari (at-least) the dropdown in the sidebar at the top to change section needs:
-webkit-appearance: none applied to the select element as the click area is not tall enough

[tgecho]

Not sure if you're trying to collect these little things in one place, but on https://v3.svelte.technology/tutorial/animate

When I add import { flip } from 'svelte/animate'; (or even just click the "SHOW ME" link) I get an "Unexpected token (Note that you need plugins to import files that are not JavaScript)" error.

Tried in Firefox/Chrome/Safari

[Conduitry]

I'm unable to reproduce that behavior in the animate tutorial.

[Rich-Harris]

A previous beta didn't include the animate.mjs file, which results in that issue. unpkg can be slow to update tagged package versions, I've found

[tgecho]

It works now. Sorry for the false/stale alarm!

[joshas]

In https://svelte.dev/tutorial/svelte-options tutorial background flash effect doesn't work on Firefox, when adding new items.

[gottlike]

Also, just a reminder that custom elements docs are still marked as todo: https://svelte.dev/docs#Custom_element_API

[rob-balfre]

Maybe remove the link to 'Svelte for new developers' as it's been 'coming soon' since April. Is there a draft version somewhere? I'd be happy to help out.

I'm currently onboarding a junior dev and they are going through the tutorial as I type this. They are going to make notes on sections they find difficult, could be useful feedback.

[pngwn]

There is a draft in my mind, if that is any use?

I'll try to put something down shortly if no-one beats me to it, at least a draft anyway.