fix: restart Vite if tutorial has a .env file

[tomoam]

fixes #206

There are two problems with #206.

For the first problem, as expected, learn.svelte.dev waits for Vite dev server to restart when a .dev file is also added, but Vite only restarts when the .env file is changed.

• Vite

https://github.com/vitejs/vite/blob/d953536aae448e2bea0f3a7cb3c0062b16d45597/packages/vite/src/node/server/index.ts#L486-L503

https://github.com/vitejs/vite/blob/d953536aae448e2bea0f3a7cb3c0062b16d45597/packages/vite/src/node/server/hmr.ts#L54-L72

• learn.svelte.dev

learn.svelte.dev/src/lib/client/adapters/webcontainer/index.js

Lines 235 to 243 in 1c3bebf

	function will_restart_vite_dev_server(stubs) {
	return stubs.some(
	(stub) =>
	stub.type === 'file' &&
	(stub.name === '/vite.config.js' ||
	stub.name === '/svelte.config.js' ||
	stub.name === '/.env')
	);
	}

So, you might assume that just make learn.svelte.dev not wait for Vite dev server to restart when a .env file is added, but that would not solve the second problem.

As for the second problem, it is due to Vite's behavior. That is, when a .env file is added, the Vite dev server must be restarted in order to make the environment variables loaded from the .env file available.

In other words, if switching to a tutorial with a . env file, the Vite dev server must be restarted. However, I looked through the Vite documentation and could not find a way to restart Vite.

This PR fix is hacky, but it solves both problems. Of course, if you have a better idea, I would like to do so.

[vercel]

@tomoam is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[tomoam]

Alternatives considered

• Add an blank .env file to the content/tutorial/common directory.

  • This will treat a .env files added as changed. This way we don't have to modify the code, but a .env file would appear in the SvelteKit tutorials, which may confuse the user who is trying to learn.

• Restart Vite dev server programatically.

  • When Switching from a tutorial without a .env to one with it, kill Vite dev server process and then restart Vite dev server with turbo run dev (see implementation example). This way seems a royal road, but has two problems: first, it is slow to start a tutorial when switching. and second, it relies heavily on the Webcontainer API, which is still in alpha.

[vercel]

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

Name	Status	Preview	Comments	Updated
learn-svelte-dev	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 15, 2023 at 1:15PM (UTC)

[Rich-Harris]

Thank you for the PR — brilliant sleuthing! I've opened an issue on Vite, hopefully we can remove this hack one day: vitejs/vite#12127