Day 7 — the first of a few planned improvements to the site. A lot of you (rightly!) disliked the tutorial dropdown navigation, so we fixed it. You can even navigate the tutorial with JS disabled, if you're so inclined 🎁 svelte.dev/tutorial - ThreadSky

svelte.dev • 198 days ago

Day 7 — the first of a few planned improvements to the site. A lot of you (rightly!) disliked the tutorial dropdown navigation, so we fixed it. You can even navigate the tutorial with JS disabled, if you're so inclined

🎁 https://svelte.dev/tutorial

Comments

deerco.de•196 days ago

🙌

andokai.dev•197 days ago

Slight issue in Safari

lolouthefox.bsky.social•196 days ago

Why is safari always the one that doesn't render like the others 🥲

rchaoz.bsky.social•197 days ago

Not sure if intended, but you didn't update the blog page with day 7 - https://svelte.dev/blog/advent-of-svelte

stevealee.bsky.social•197 days ago

7 and 8 there now

samalrasmussen.bsky.social•197 days ago

Oh I'm relieved. I was worried you guys thought that native selector with a huge list was a good solution.

svelte.dev•196 days ago

Day 8 — we're calling this 'function bindings'. You know how you can do `bind:value={value}`? You can now do this...

bind:value={getValue, setValue}

...which lets you transform and validate data

🎁 docs https://svelte.dev/docs/svelte/bind#Function-bindings
🎁 demo https://svelte.dev/playground/1ddd82f573b94201b3c8fcab33bf0a46?version=5.9.0

ray-thurn-void.bsky.social•196 days ago

This and error boundaries are huge improvements to svelte, thanks!

paulosantosvieira.bsky.social•196 days ago

1/2 Huge new feature! But this definitely need more examples and clarification. For instance, it's not clear where the transformation/validation should be (it seems it can be in either "set" or "get", no?). It reminds of getters and setters in POJO, but the semantics seem to be different.

paulosantosvieira.bsky.social•196 days ago

2/2 I set up a simpler example in the playground with a text input, if anyone wants to play with it. And I'm still a bit confused... https://svelte.dev/playground/d6cbf0e915874c6c99c01b79c55dfc5e?version=5.9.0

paolo.ricciuti.me•196 days ago

Put very simply: svelte will call your get function when needs to read the value for that binding and will call your set function when needs to set the value of that binding. Does this help clarify it?

paulosantosvieira.bsky.social•196 days ago

1/2 That helps, thanks. It also helped to see the source of `$.bind_value`. What should be clarified are the use cases, in particular for "get".

Should "get" be used only for validation? Or is it ok to change its return value?

Should any mutation/coercion be done only in "set"?

paulosantosvieira.bsky.social•196 days ago

2/2 For anyone curious about how these get/set function bindings are called, see the source of `$.bind_value` here: https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/elements/bindings/input.js#L16-L75

This is for an `` but I assume it's similar for other elements.

stevealee.bsky.social•196 days ago

This is great but was not clear which "side" the get and set are with respect to; the attribute/property or the variable. Only the readonly example with no getter made it known.

stevealee.bsky.social•196 days ago

Should have said the example helps nail it!

chepulis.bsky.social•196 days ago

The example is white-on-white when in dark mode (Safari).

hanson190505.bsky.social•179 days ago

这非常酷

ryanatkn.com•196 days ago

lovely feature, and a great example of the design restraint that serves Svelte so well, in addressing this issue with extra power and elegant syntax - https://github.com/sveltejs/svelte/issues/3937

get/set continues to chalk up wins

samalrasmussen.bsky.social•196 days ago

I have wanted this for years! 🎉

svelte.dev•195 days ago

Day 9 — warnings and errors emitted by the compiler, or while your app is running, are now accompanied by links to the docs. Over time, we'll flesh out these docs with more details about what caused the error in question

🎁 demo https://svelte.dev/playground/8095884c1f5040ea846669b904083e25?version=5.10.0

svelte.dev•195 days ago

Day 10 — a lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an `init` function from `hooks.server.js` and `hooks.client.js` that will be awaited before any other stuff happens

🎁 docs https://svelte.dev/docs/kit/hooks#Shared-hooks-init

aubergene.com•194 days ago

ooh love this, thought I couldn't find it before, checks src, merged 2 hours ago!

jyc.dev•195 days ago

Hoooo, I know where I would use this ☺️

heygwangjin.com•195 days ago

Where we can use this?!

jyc.dev•195 days ago

In sveltekit projects 😉
To know if we are in SSR or CSR context 👍

svelte.dev•194 days ago

Day 11 — a whole new module, for getting reactive views of window properties like innerWidth, innerHeight, scrollX, scrollY and so on. Like the bindings on but with less boilerplate

🎁 docs https://svelte.dev/docs/svelte/svelte-reactivity-window
🎁 demo https://svelte.dev/playground/8ac86e10fdce485a99c29c95e0092df4?version=5.11.0

dyviknilsen.no•182 days ago

Does Svelte have a way of getting innerHeight, *ignoring* whether the address bar is visible or not in mobile browsers?

Yknow, the way svh and lvh should work. Except they don't in Firefox and many built-in browsers. Mayday!

(Context: https://github.com/mozilla-mobile/firefox-ios/issues/11574#issuecomment-2146095621)

@svelte.dev @rich-harris.dev

svelte.dev•193 days ago

Day 12 — send custom types across the network boundary in SvelteKit, whether it's a class containing reactive state, a class used by your database ORM library, or whatever. Just export a `transport` object from your `hooks.js`

🎁 docs https://svelte.dev/docs/kit/hooks#Universal-hooks-transport
🎁 demo https://stackblitz.com/edit/sveltejs-kit-template-default-b5zbxomg?file=src%2Fhooks.js

thiagolino8.bsky.social•192 days ago

The functionality is great, but there is still a lot of undocumented behavior.

reinhold.is•192 days ago

Why is this encode/decode and not serialize/deserialize like everyone else calls it?

itsdaniel.bsky.social•192 days ago

Obviously I'm missing something, but what exactly can be achieved with this feature?

svelte.dev•192 days ago

Day 13 — a gift for the robot friend in your life. We now publish llms.txt files containing up-to-the-minute documentation for Svelte, SvelteKit and the CLI in AI-digestible form

🎁 docs https://svelte.dev/docs/llms
🎁 demo (a snake game made by Sonnet 3.5) https://svelte.dev/playground/0de3c1c1a31d47bdbb7c4aa3477a6b46

richperez.dev•193 days ago

👏🏽 This is awesome 👏🏽

tilo.one•195 days ago

Now we need a `+loading.svelte` file to show a loading spinner 😬.

The same would be nice for `+page.js` and `+layout.ts` load functions.

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply