chore: ensure full page reloads between SvelteKit tutorial and other pages (and vice versa)

[dummdidumm]

Rather than having to ensure for every other page that loading images etc plays nice with the restrictive origin headers we set for the tutorial, we make navigations from/to the SvelteKit tutorial a full page reload. In practise you'll rarely cross this border, from my testing it's also barely noticeable. So the tiny drawback this has is worth the increased stability of the rest of the page to me.

WIP, this still needs to set the headers in dev and prod correctly - I'm not 100% sure how to do that since the URLs don't contain any info about sveltekit. The two approaches I see:

• a) have some script that runs and infers the slugs from the file system
• b) instead of being /tutorial/<slug of page> we make it /tutorial/<svelte or sveltekit, depending on which part you're on>/<slug of page>

Any opinions on which way to go? Also, objections to the overall approach?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
omnisite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 9, 2024 8:03pm

[Rich-Harris]

I think this is probably the right thing to do, yeah.

In terms of implementation could it be as simple as this, in +layout.svelte...

function needs_isolation(url: URL) {
  return $page.data.needs_isolation.includes(url.pathname);
}

beforeNavigate(({ from, to }) => {
  if (needs_isolation(from.url) !== needs_isolation(to.url)) {
    location.reload();
  }
});

...where $page.data.needs_isolation looks like this?

['/tutorial/introducing-sveltekit', '/tutorial/pages', '/tutorial/layouts', ...]

[trueadm]

b) instead of being /tutorial/ we make it /tutorial/<svelte or sveltekit, depending on which part you're on>/

This sounds good to me.

[dummdidumm]

In terms of implementation could it be as simple as this

I already implemented a client-side reload mechanism. The problem is the headers we need to set for the Vercel deployment. The tutorial is prerendered, therefore if you come from Google and directly visit the tutorial you'll get a prerendered shell, and the handle hook has no say in setting headers there, so it needs to be handled by either vercel.json or middleware.js. It would also be good to replicate this functionality very closely at dev time, which means having the same logic in the server middleware inside vite.config.js. In none of these situations do we have any other information besides the URL. That's why we need either a) or b):

• a) would solve it by traversing contents/tutorial/<sveltekit parts> and infering the URLs from that, and then feed that to the Vercel and Vite config somehow
• b) would solve it simpler by being able to just matching for /tutorial/sveltekit/*

[Rich-Harris]

Ah, gotcha. Then yeah, I think /tutorial/svelte/... and /tutorial/kit/... is the way to go (i'd go with kit over sveltekit for consistency with the docs)

[Rich-Harris]

I'm still confused about the afterNavigate. Right now every onward navigation from a SvelteKit tutorial page causes a full reload, which means we have to go through the whole webcontainer startup rigamarole, and appending data-sveltekit-reload attributes to the DOM feels very hacky. Why aren't we using beforeNavigate instead? Opened #308

[dummdidumm]

The logic worked prior to the tutorial slug change, and of course it can be vastly simplified now - I just didn't get around to that yet.