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 svelte.dev/docs/kit/hoo... - ThreadSky

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

Comments

aubergene.com•170 days ago

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

jyc.dev•170 days ago

Hoooo, I know where I would use this ☺️

heygwangjin.com•170 days ago

Where we can use this?!

jyc.dev•170 days ago

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

kay.is•169 days ago

Can this be used together with the static adapter to allow multiple fallbacks? 🤔

svelte.dev•169 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•158 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•168 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•168 days ago

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

reinhold.is•168 days ago

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

svelte.dev•168 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•168 days ago

Ah that's a fair point. Makes sense.

itsdaniel.bsky.social•168 days ago

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

matsimon.dev•168 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•168 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•168 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•167 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•167 days ago

This rules. Thank you team.

ismailzouaoui.com•167 days ago

Very useful, Thank you 🧡

coryty.com•167 days ago

Could this be used with VSCode instructions?

ryanatkn.com•166 days ago

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

svelte.dev•166 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•165 days ago

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

svelte.dev•165 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•164 days ago

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

xeho91.dev•165 days ago

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

jonathonrp.github.io•165 days ago

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

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

fubits.dev•167 days ago

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

richperez.dev•169 days ago

👏🏽 This is awesome 👏🏽

tilo.one•170 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.

Comments

Posting Rules

Reply