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 <svelte:window> but with less boilerplate 🎁 docs svelte.dev/docs/svelte/... 🎁 demo svelte.dev/playground/8... - ThreadSky

svelte.dev • 189 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

Comments

dyviknilsen.no•178 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•188 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•188 days ago

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

reinhold.is•188 days ago

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

svelte.dev•188 days ago

because you're not serializing (aka turning something into a string of bytes). SvelteKit is doing that part. you're just giving it something it _can_ serialize.

also, encode/decode are shorter

reinhold.is•188 days ago

Ah that's a fair point. Makes sense.

itsdaniel.bsky.social•188 days ago

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

matsimon.dev•188 days ago

In load functions you can only return simple types for the data to be transmitted. If you try to use an object like a class, SvelteKit was not able to serialize that object. You needed to serialize the data yourself and then deserialize. Now you can just "transfer" a class via the data object.

itsdaniel.bsky.social•188 days ago

Ahh, so it's the actual class instance, not just an JSON-stringified object. I have to try that out, thanks Mat!

matsimon.dev•188 days ago

Yes exactly! In your client data object you'll have an actual instance of your class (with all potential $state properties) instead of a simple JS object.

svelte.dev•187 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

tolin.ski•187 days ago

This rules. Thank you team.

ismailzouaoui.com•187 days ago

Very useful, Thank you 🧡

coryty.com•187 days ago

Could this be used with VSCode instructions?

ryanatkn.com•186 days ago

even with its knowledge cutoff of April 2024, Claude 3.5 Sonnet (new) is pleased

svelte.dev•186 days ago

Day 14 — if you need to programmatically mount and unmount a component, you can now pass an `outro: true` option to `unmount` to play transitions before it is removed from the DOM

🎁 docs https://svelte.dev/docs/svelte/imperative-component-api#unmount
🎁 demo https://svelte.dev/playground/a4ca332691204ccd887ec7b1df818182?version=5.13.0

jazzxp.bsky.social•185 days ago

OMG THANK YOU! I always understood why, but it was always frustrating.

svelte.dev•185 days ago

Day 15 — the new `$inspect.trace(...)` rune gives you debugging superpowers. Add it to a function that runs inside a derived or effect, and you'll see detailed information about what caused it to re-run

🎁 docs https://svelte.dev/docs/svelte/$inspect#$inspect.trace()
🎁 demo https://svelte.dev/playground/d135c6f00beb4fa391725e59d8061604?version=5.14.0

louisbuilds.bsky.social•184 days ago

You folks have been absolutely killing it this advent, great stuff!

xeho91.dev•185 days ago

Bait: React developers, have fun with your "why-did-you-render".

jonathonrp.github.io•185 days ago

I've been needing this! I was just about to start using console.trace() today 🤣

svelte.dev•184 days ago

Day 16 — `$app/state`, a modern Svelte 5 state-based replacement for SvelteKit's `$app/stores` module. No more clunky `$` prefix when reading values, just fine-grained state that works everywhere, even outside component files!

🎁 docs https://svelte.dev/docs/kit/$app-state
🎁 tutorial https://svelte.dev/tutorial/kit/page-state

mrwokkel.bsky.social•183 days ago

Love it! 🙌 And still 🙏 every day for the style binding miracle like CSS modules...

ramilkarimov.me•183 days ago

Your stores are living on a farm $app/state now

skyfall.dev•183 days ago

Svelte I love you :D

bladebarringer.com•184 days ago

Love this! Any guidance on how to mock these for unit tests? I had to do some pretty hacky stuff for the stores version, and am hoping for a simpler solution for this.

svelte.dev•184 days ago

note: you can migrate automatically using the following command

npx sv migrate app-state

fubits.dev•187 days ago

omg yesss. @bolt.new please add support for this 🙏 and I’ll switch to the yearly plan.

richperez.dev•189 days ago

👏🏽 This is awesome 👏🏽

Comments

Posting Rules

Reply