Feat/hydrated

[jycouet]

Issue link: #4447

Adding:

import { hydrated } from '$app/environment';

To be able in a load function to know if the app was already hydrated or not.

---

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

🦋 Changeset detected

Latest commit: 9646f04

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for kit-demo ready!

Name	Link
🔨 Latest commit	9646f04
🔍 Latest deploy log	https://app.netlify.com/sites/kit-demo/deploys/6313e1a9e8d091000806a037
😎 Deploy Preview	https://deploy-preview-6555--kit-demo.netlify.app/build
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Rich-Harris]

Thank you. I'm not sure we really need this though — it's very easy to do in userland:

// src/lib/hydrated.js
export let hydrated = false

export function update() {
  hydrated = true;
}

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { update } from '$lib/hydrated.js';

  onMount(update);
</script>

Thereafter, any load function can access the value. Given how straightforward this is, and the general principle that we should avoid adding any non-essential API surface area, it doesn't feel justified to me. Am I missing something?

[jycouet]

Feedback

That's very straightforward for userland, I like it.

As a lib author, that means that we can't rely on a kit thing, and we have to teach our users to:

1. add a src/routes/+layout.svelte
2. init our lib (and do the hydrated logic there to rely on it later)

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { init } from 'MyLib';

  onMount(init);
</script>

These manual user steps are not ideal.

Our solution

Thx to @AlecAivazis vite plugin, we will be able to inject this bit of code without any manual action.
So I agree, let's not augment the API surface area.
Therefore I'll close this PR and the issue linked to it.

Side comments

• Great job, contributing to kit is very straightforward 🧡
• Turborepo is amazingly fast! ⚡⚡⚡
• My code almost made it!!! 😅 ^^

[lukaszpolowczyk]

@jycouet Could you show the code for this vite plugin that does exactly what Rich's code does with src/lib/hydrated.js and src/routes/+layout.svelte?

I need an example of such simple code to do something different, but which should initialize in the same way.

[jycouet]

This exact code is not done yet.
But it will be in Houdini's vite plugin (here)

Will you need this for a library?
Should we build an "injector vite plugin" to help others?

[lukaszpolowczyk]

I need this under a script that I only use during dev (replaces console.log with one with an additional function). Now I init it as in Rich's example.

I am always in favor of universal automation where possible.