fix: restart Vite if tutorial has a .env file (sveltejs#207)

* fix timed out error

* Revert "fix timed out error"

This reverts commit 3632ee6.

* add test for tutorial with a .env file

* fix: restart Vite if tutorial has a .env file

* Update index.js

---------

Co-authored-by: Rich Harris <[email protected]>

Author: tomoam

src/lib/client/adapters/webcontainer/index.js

@@ -116,6 +116,10 @@ export async function create(stubs, callback) {
 
 			let added_new_file = false;
 
+			const previous_env = /** @type {import('$lib/types').FileStub=} */ (
+				current_stubs.get('/.env')
+			);
+
 			/** @type {import('$lib/types').Stub[]} */
 			const to_write = [];
 
@@ -175,6 +179,15 @@ export async function create(stubs, callback) {
 				await vm.fs.rm(file, { force: true, recursive: true });
 			}
 
+			// Adding a `.env` file does not restart Vite, but environment variables from `.env`
+			// are not available until Vite is restarted. By creating a dummy `.env` file, it will
+			// be recognized as changed when the real `.env` file is loaded into the Webcontainer.
+			// This will invoke a restart of Vite. Hacky but it works.
+			// TODO: remove when https://github.com/vitejs/vite/issues/12127 is closed
+			if (!previous_env && current_stubs.has('/.env')) {
+				await vm.run({ command: 'touch', args: ['.env']});
+			}
+
 			await vm.loadFiles(convert_stubs_to_tree(to_write));
 			await promise;
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar

tests/env_file.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test, chromium } from '@playwright/test';
+
+const chromium_flags = ['--enable-features=SharedArrayBuffer'];
+
+const iframe_selector = 'iframe[src*="webcontainer.io/"]';
+
+test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async () => {
+	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
+	const page = context.pages()[0];
+	await page.bringToFront();
+
+	await page.goto('/tutorial/welcome-to-svelte');
+
+	const iframe_locator = page.frameLocator(iframe_selector);
+
+	// wait for the iframe to load
+	await iframe_locator.getByText('Welcome!').waitFor();
+
+	// switch to another tutorial with a .env file
+	await page.click('header > h1', { delay: 200 });
+	await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200});
+	await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200});
+	await page.locator('a', { hasText: '$env/static/private' }).click({ delay: 200});
+
+	// wait for the iframe to load
+	await iframe_locator.getByText('enter the passphrase').waitFor();
+
+	// wait for a bit, because when Vite dev server is restarted, learn.svelte.dev
+	// will wait for 10 seconds, after which time a timeout error will occur.
+	await page.waitForTimeout(11000);
+
+	// expect no timeout error
+	await expect(page.getByText('Yikes!')).toBeHidden();
+	await expect(iframe_locator.getByText('enter the passphrase')).toBeVisible();
+
+	await context.close();
+});
+
+test('.env file: environment variables are available when switching a tutorial without a .env file to one with it', async () => {
+	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
+	const page = context.pages()[0];
+	await page.bringToFront();
+
+	await page.goto('/tutorial/welcome-to-svelte');
+
+	const iframe_locator = page.frameLocator(iframe_selector);
+
+	// wait for the iframe to load
+	await iframe_locator.getByText('Welcome!').waitFor();
+
+	// switch to another tutorial with a .env file
+	await page.click('header > h1', { delay: 200 });
+	await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200});
+	await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200});
+	await page.locator('a', { hasText: '$env/dynamic/private' }).click({ delay: 200});
+
+	// wait for the iframe to load
+	await iframe_locator.getByText('enter the passphrase').waitFor();
+	await iframe_locator.locator('input[name="passphrase"]').waitFor();
+
+	await page.waitForTimeout(500);
+
+	// login
+	// 'open sesame' is the environment variables loaded from `.env` file
+	await iframe_locator.locator('input[name="passphrase"]').fill('open sesame');
+	await page.keyboard.press('Enter', { delay: 200 });
+
+	// expect to be able to login.
+	// Being able to log in means that environment variables are loaded.
+	await expect(iframe_locator.getByText('wrong passphrase!')).toBeHidden();
+	await expect(iframe_locator.locator('button', { hasText: 'log out'})).toBeEnabled();
+
+	await context.close();
+});