From 5b506b12608061bd5876ff3acd1122baba61ab08 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 11 May 2022 15:21:52 -0600
Subject: [PATCH 01/54] adding Tailwind E2E tests with Playwright

---
 .../e2e/fixtures/tailwindcss/astro.config.mjs |  12 ++
 .../e2e/fixtures/tailwindcss/package.json     |   9 +
 .../fixtures/tailwindcss/postcss.config.js    |   9 +
 .../tailwindcss/src/components/Button.astro   |  10 +
 .../tailwindcss/src/components/Complex.astro  |   1 +
 .../tailwindcss/src/pages/index.astro         |  18 ++
 .../tailwindcss/src/pages/markdown-page.md    |  11 +
 .../fixtures/tailwindcss/tailwind.config.js   |  14 ++
 packages/astro/e2e/tailwindcss.test.js        |  98 +++++++++
 packages/astro/e2e/test-utils.js              | 202 ++++++++++++++++++
 packages/astro/package.json                   |   6 +-
 11 files changed, 388 insertions(+), 2 deletions(-)
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/package.json
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/postcss.config.js
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/src/components/Complex.astro
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/src/pages/index.astro
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/src/pages/markdown-page.md
 create mode 100644 packages/astro/e2e/fixtures/tailwindcss/tailwind.config.js
 create mode 100644 packages/astro/e2e/tailwindcss.test.js
 create mode 100644 packages/astro/e2e/test-utils.js

diff --git a/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs b/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs
new file mode 100644
index 000000000000..473be9666e1e
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs
@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [tailwind()],
+	vite: {
+		build: {
+			assetsInlineLimit: 0,
+		},
+	},
+});
diff --git a/packages/astro/e2e/fixtures/tailwindcss/package.json b/packages/astro/e2e/fixtures/tailwindcss/package.json
new file mode 100644
index 000000000000..4bcc5687273e
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/e2e-tailwindcss",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/tailwind": "workspace:*"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/tailwindcss/postcss.config.js b/packages/astro/e2e/fixtures/tailwindcss/postcss.config.js
new file mode 100644
index 000000000000..7df5ecb39683
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/postcss.config.js
@@ -0,0 +1,9 @@
+const path = require('path');
+module.exports = {
+	plugins: {
+		tailwindcss: {
+			config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs!
+		},
+		autoprefixer: {}
+	},
+};
diff --git a/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro b/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro
new file mode 100644
index 000000000000..6e0872173994
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro
@@ -0,0 +1,10 @@
+---
+let { type = 'button' } = Astro.props;
+---
+
+<button
+	class="py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+	{type}
+>
+	<slot />
+</button>
diff --git a/packages/astro/e2e/fixtures/tailwindcss/src/components/Complex.astro b/packages/astro/e2e/fixtures/tailwindcss/src/components/Complex.astro
new file mode 100644
index 000000000000..bd30373c8e09
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/src/components/Complex.astro
@@ -0,0 +1 @@
+<div id="complex" class="w-10/12 2xl:w-[80%]"></div>
diff --git a/packages/astro/e2e/fixtures/tailwindcss/src/pages/index.astro b/packages/astro/e2e/fixtures/tailwindcss/src/pages/index.astro
new file mode 100644
index 000000000000..d901b4233a9c
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/src/pages/index.astro
@@ -0,0 +1,18 @@
+---
+// Component Imports
+import Button from '../components/Button.astro';
+import Complex from '../components/Complex.astro';
+---
+
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<title>Astro + TailwindCSS</title>
+	</head>
+
+	<body class="bg-dawn text-midnight">
+		<Button>I’m a Tailwind Button!</Button>
+		<Complex />
+	</body>
+</html>
diff --git a/packages/astro/e2e/fixtures/tailwindcss/src/pages/markdown-page.md b/packages/astro/e2e/fixtures/tailwindcss/src/pages/markdown-page.md
new file mode 100644
index 000000000000..e4c6b6bc9d66
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/src/pages/markdown-page.md
@@ -0,0 +1,11 @@
+---
+title: "Markdown + Tailwind"
+setup: |
+    import Button from '../components/Button.astro';
+    import Complex from '../components/Complex.astro';
+---
+
+<div class="grid place-items-center h-screen content-center">
+    <Button>Tailwind Button in Markdown!</Button>
+    <Complex />
+</div>
\ No newline at end of file
diff --git a/packages/astro/e2e/fixtures/tailwindcss/tailwind.config.js b/packages/astro/e2e/fixtures/tailwindcss/tailwind.config.js
new file mode 100644
index 000000000000..7aeb483c1e36
--- /dev/null
+++ b/packages/astro/e2e/fixtures/tailwindcss/tailwind.config.js
@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = {
+	content: [path.join(__dirname, 'src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}')],
+	theme: {
+		extend: {
+			colors: {
+				dawn: '#f3e9fa',
+				dusk: '#514375',
+				midnight: '#31274a',
+			}
+		}
+	}
+};
diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
new file mode 100644
index 000000000000..bb2c7abba6f0
--- /dev/null
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -0,0 +1,98 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({ }, use) => {
+		const fixture = await loadFixture({ root: './fixtures/tailwindcss/' });
+		await use(fixture);
+	},
+});
+
+test.describe('dev', () => {
+	let devServer;
+
+	test.beforeAll(async ({ astro }) => {
+		devServer = await astro.startDevServer();
+	});
+
+	test.afterAll(async ({ astro }) => {
+		await devServer.stop();
+	});
+
+	test('Tailwind CSS', async ({ page }) => {
+		await page.goto(`localhost:${devServer.address.port}/`);
+
+		await test.step('body', async () => {
+			const body = page.locator('body');
+
+			await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
+			await expect(body, 'should have background color').toHaveCSS(
+				'background-color',
+				'rgb(243, 233, 250)'
+			);
+			await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
+		});
+
+		await test.step('button', async () => {
+			const button = page.locator('button');
+
+			await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
+			await expect(button, 'should have background color').toHaveCSS(
+				'background-color',
+				'rgb(147, 51, 234)'
+			);
+
+			await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
+			await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
+			await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
+
+			await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
+			await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
+		});
+	});
+});
+
+test.describe('build', () => {
+	let previewServer;
+
+	test.beforeAll(async ({ astro }) => {
+		await astro.build();
+		previewServer = await astro.preview();
+	});
+
+	test.afterAll(async ({ astro }) => {
+		await previewServer.stop();
+	})
+
+	test('Tailwind CSS', async ({ page }) => {
+		await page.goto(`localhost:3000/`);
+
+		await test.step('body', async () => {
+			const body = page.locator('body');
+
+			await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
+			await expect(body, 'should have background color').toHaveCSS(
+				'background-color',
+				'rgb(243, 233, 250)'
+			);
+			await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
+		});
+
+		await test.step('button', async () => {
+			const button = page.locator('button');
+
+			await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
+			await expect(button, 'should have background color').toHaveCSS(
+				'background-color',
+				'rgb(147, 51, 234)'
+			);
+
+			await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
+			await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
+			await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
+
+			await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
+			await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
+		});
+	});
+});
diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
new file mode 100644
index 000000000000..460b3185f087
--- /dev/null
+++ b/packages/astro/e2e/test-utils.js
@@ -0,0 +1,202 @@
+import { execa } from 'execa';
+import { polyfill } from '@astrojs/webapi';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { resolveConfig, loadConfig } from '../dist/core/config.js';
+import dev from '../dist/core/dev/index.js';
+import build from '../dist/core/build/index.js';
+import preview from '../dist/core/preview/index.js';
+import { nodeLogDestination } from '../dist/core/logger/node.js';
+import os from 'os';
+import stripAnsi from 'strip-ansi';
+
+// polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
+polyfill(globalThis, {
+	exclude: 'window document',
+});
+
+/**
+ * @typedef {import('node-fetch').Response} Response
+ * @typedef {import('../src/core/dev/index').DevServer} DevServer
+ * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
+ * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
+ * @typedef {import('../src/core/app/index').App} App
+ *
+ *
+ * @typedef {Object} Fixture
+ * @property {typeof build} build
+ * @property {(url: string, opts: any) => Promise<Response>} fetch
+ * @property {(path: string) => Promise<string>} readFile
+ * @property {(path: string) => Promise<string[]>} readdir
+ * @property {() => Promise<DevServer>} startDevServer
+ * @property {() => Promise<PreviewServer>} preview
+ * @property {() => Promise<void>} clean
+ * @property {() => Promise<App>} loadTestAdapterApp
+ */
+
+/**
+ * Load Astro fixture
+ * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
+ * @returns {Promise<Fixture>} The fixture. Has the following properties:
+ *   .config     - Returns the final config. Will be automatically passed to the methods below:
+ *
+ *   Build
+ *   .build()          - Async. Builds into current folder (will erase previous build)
+ *   .readFile(path)   - Async. Read a file from the build.
+ *
+ *   Dev
+ *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
+ *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
+ *
+ *   Preview
+ *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
+ *
+ *   Clean-up
+ *   .clean()          - Async. Removes the project’s dist folder.
+ */
+export async function loadFixture(inlineConfig) {
+	if (!inlineConfig || !inlineConfig.root)
+		throw new Error("Must provide { root: './fixtures/...' }");
+
+	// load config
+	let cwd = inlineConfig.root;
+	delete inlineConfig.root;
+	if (typeof cwd === 'string') {
+		try {
+			cwd = new URL(cwd.replace(/\/?$/, '/'));
+		} catch (err1) {
+			cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
+		}
+	}
+	// Load the config.
+	let config = await loadConfig({ cwd: fileURLToPath(cwd) });
+	config = merge(config, { ...inlineConfig, root: cwd });
+
+	// Note: the inline config doesn't run through config validation where these normalizations usually occur
+	if (typeof inlineConfig.site === 'string') {
+		config.site = new URL(inlineConfig.site);
+	}
+	if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
+		config.base = inlineConfig.base + '/';
+	}
+
+	/** @type {import('../src/core/logger/core').LogOptions} */
+	const logging = {
+		dest: nodeLogDestination,
+		level: 'error',
+	};
+
+	/** @type {import('@astrojs/telemetry').AstroTelemetry} */
+	const telemetry = {
+		record() {
+			return Promise.resolve();
+		},
+	};
+
+	return {
+		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
+		startDevServer: async (opts = {}) => {
+			const devResult = await dev(config, { logging, telemetry, ...opts });
+			config.server.port = devResult.address.port; // update port
+			return devResult;
+		},
+		config,
+		fetch: (url, init) =>
+			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
+		preview: async (opts = {}) => {
+			const previewServer = await preview(config, { logging, telemetry, ...opts });
+			return previewServer;
+		},
+		readFile: (filePath) =>
+			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
+		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
+		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
+		loadTestAdapterApp: async () => {
+			const url = new URL('./server/entry.mjs', config.outDir);
+			const { createApp } = await import(url);
+			return createApp();
+		},
+	};
+}
+
+/**
+ * Basic object merge utility. Returns new copy of merged Object.
+ * @param {Object} a
+ * @param {Object} b
+ * @returns {Object}
+ */
+function merge(a, b) {
+	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+	const c = {};
+	for (const k of allKeys) {
+		const needsObjectMerge =
+			typeof a[k] === 'object' &&
+			typeof b[k] === 'object' &&
+			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
+			!Array.isArray(a[k]) &&
+			!Array.isArray(b[k]);
+		if (needsObjectMerge) {
+			c[k] = merge(a[k] || {}, b[k] || {});
+			continue;
+		}
+		c[k] = a[k];
+		if (b[k] !== undefined) c[k] = b[k];
+	}
+	return c;
+}
+
+const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
+
+/** Returns a process running the Astro CLI. */
+export function cli(/** @type {string[]} */ ...args) {
+	const spawned = execa('node', [cliPath, ...args]);
+
+	spawned.stdout.setEncoding('utf8');
+
+	return spawned;
+}
+
+export async function parseCliDevStart(proc) {
+	let stdout = '';
+	let stderr = '';
+
+	for await (const chunk of proc.stdout) {
+		stdout += chunk;
+		if (chunk.includes('Local')) break;
+	}
+	if (!stdout) {
+		for await (const chunk of proc.stderr) {
+			stderr += chunk;
+			break;
+		}
+	}
+
+	proc.kill();
+	stdout = stripAnsi(stdout);
+	stderr = stripAnsi(stderr);
+
+	if (stderr) {
+		throw new Error(stderr);
+	}
+
+	const messages = stdout
+		.split('\n')
+		.filter((ln) => !!ln.trim())
+		.map((ln) => ln.replace(/[🚀┃]/g, '').replace(/\s+/g, ' ').trim());
+
+	return { messages };
+}
+
+export async function cliServerLogSetup(flags = [], cmd = 'dev') {
+	const proc = cli(cmd, ...flags);
+
+	const { messages } = await parseCliDevStart(proc);
+
+	const local = messages.find((msg) => msg.includes('Local'))?.replace(/Local\s*/g, '');
+	const network = messages.find((msg) => msg.includes('Network'))?.replace(/Network\s*/g, '');
+
+	return { local, network };
+}
+
+export const isWindows = os.platform() === 'win32';
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 86939565e7e0..c4d266a5d21c 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -72,7 +72,8 @@
     "postbuild": "astro-scripts copy \"src/**/*.astro\"",
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
     "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js",
-    "test:match": "mocha --timeout 20000 -g"
+    "test:match": "mocha --timeout 20000 -g",
+    "test:e2e": "playwright test e2e"
   },
   "dependencies": {
     "@astrojs/compiler": "^0.14.2",
@@ -134,7 +135,8 @@
     "zod": "^3.16.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.17.10",
+    "@babel/types": "^7.17.0",
+    "@playwright/test": "^1.21.1",
     "@types/babel__core": "^7.1.19",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.17.1",

From 4199c8a7b8662fac7897ce36f3a78e7e28b98abc Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 11 May 2022 15:22:01 -0600
Subject: [PATCH 02/54] package.json updates

---
 package.json   |   1 +
 pnpm-lock.yaml | 332 ++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 331 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b1ca3d673bf5..9508c7b0b833 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "test:templates": "turbo run test --filter=create-astro --concurrency=1",
     "test:smoke": "node scripts/smoke/index.js",
     "test:vite-ci": "turbo run test --no-deps --scope=astro --concurrency=1",
+    "test:e2e": "cd packages/astro && pnpm run test:e2e",
     "benchmark": "turbo run benchmark --scope=astro",
     "lint": "eslint \"packages/**/*.ts\"",
     "format": "prettier -w .",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f81977c745a..b9b082a7f6e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -659,6 +659,14 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
+  packages/astro/e2e/fixtures/basic:
+    specifiers:
+      '@astrojs/tailwind': workspace:*
+      astro: workspace:*
+    dependencies:
+      '@astrojs/tailwind': link:../../../../integrations/tailwind
+      astro: link:../../..
+
   packages/astro/test/fixtures/0-css:
     specifiers:
       '@astrojs/react': workspace:*
@@ -3160,6 +3168,23 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /@babel/preset-typescript/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/helper-validator-option': 7.16.7
+      '@babel/plugin-transform-typescript': 7.16.8_@babel+core@7.16.12
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/runtime/7.17.9:
     resolution: {integrity: sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==}
     engines: {node: '>=6.9.0'}
@@ -3771,6 +3796,51 @@ packages:
       '@octokit/openapi-types': 11.2.0
     dev: true
 
+  /@playwright/test/1.21.1:
+    resolution: {integrity: sha512-XkkTXl5gvEm4fciqeHvY5IuSS/OfQef0MO6RpBNmtm6EuYSdtUvP/sDVuWRKsDqyVdB3WSA0az7iSw79f2//JQ==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-dynamic-import': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-export-namespace-from': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-logical-assignment-operators': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-numeric-separator': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.16.12
+      '@babel/plugin-proposal-private-property-in-object': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.12
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.12
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.16.12
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.12
+      '@babel/plugin-transform-modules-commonjs': 7.16.8_@babel+core@7.16.12
+      '@babel/preset-typescript': 7.16.7_@babel+core@7.16.12
+      colors: 1.4.0
+      commander: 8.3.0
+      debug: 4.3.3
+      expect: 27.2.5
+      jest-matcher-utils: 27.2.5
+      json5: 2.2.1
+      mime: 3.0.0
+      minimatch: 3.0.4
+      ms: 2.1.3
+      open: 8.4.0
+      pirates: 4.0.4
+      playwright-core: 1.21.1
+      rimraf: 3.0.2
+      source-map-support: 0.4.18
+      stack-utils: 2.0.5
+      yazl: 2.5.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /@polka/url/1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
@@ -4054,6 +4124,22 @@ packages:
       ci-info: 3.3.1
     dev: true
 
+  /@types/istanbul-lib-coverage/2.0.4:
+    resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
+    dev: true
+
+  /@types/istanbul-lib-report/3.0.0:
+    resolution: {integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+    dev: true
+
+  /@types/istanbul-reports/3.0.1:
+    resolution: {integrity: sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==}
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.0
+    dev: true
+
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -4216,6 +4302,10 @@ packages:
       '@types/node': 17.0.32
     dev: true
 
+  /@types/stack-utils/2.0.1:
+    resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
+    dev: true
+
   /@types/tailwindcss/3.0.10:
     resolution: {integrity: sha512-1UnZIHO0NOPyPlPFV0HuMjki2SHkvG9uBA1ZehWj/OQMSROk503nuNyyfmJSIT289yewxTbKoPG+KLxYRvfIIg==}
     dev: true
@@ -4739,6 +4829,11 @@ packages:
     dependencies:
       color-convert: 2.0.1
 
+  /ansi-styles/5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ansi-styles/6.1.0:
     resolution: {integrity: sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==}
     engines: {node: '>=12'}
@@ -5036,7 +5131,6 @@ packages:
 
   /buffer-crc32/0.2.13:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
-    dev: false
 
   /buffer-from/1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
@@ -5328,6 +5422,11 @@ packages:
     resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
     dev: true
 
+  /colors/1.4.0:
+    resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==}
+    engines: {node: '>=0.1.90'}
+    dev: true
+
   /comma-separated-tokens/2.0.2:
     resolution: {integrity: sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==}
 
@@ -5335,6 +5434,11 @@ packages:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
+  /commander/8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: true
+
   /common-ancestor-path/1.0.1:
     resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
     dev: false
@@ -5574,6 +5678,11 @@ packages:
     dependencies:
       clone: 1.0.4
 
+  /define-lazy-prop/2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+    dev: true
+
   /define-properties/1.1.4:
     resolution: {integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==}
     engines: {node: '>= 0.4'}
@@ -5659,6 +5768,11 @@ packages:
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  /diff-sequences/27.5.1:
+    resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
   /diff/5.0.0:
     resolution: {integrity: sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==}
     engines: {node: '>=0.3.1'}
@@ -6023,6 +6137,11 @@ packages:
     resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
     engines: {node: '>=0.8.0'}
 
+  /escape-string-regexp/2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+    dev: true
+
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -6265,6 +6384,18 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /expect/27.2.5:
+    resolution: {integrity: sha512-ZrO0w7bo8BgGoP/bLz+HDCI+0Hfei9jUSZs5yI/Wyn9VkG9w8oJ7rHRgYj+MA7yqqFa0IwHA3flJzZtYugShJA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      ansi-styles: 5.2.0
+      jest-get-type: 27.5.1
+      jest-matcher-utils: 27.2.5
+      jest-message-util: 27.5.1
+      jest-regex-util: 27.5.1
+    dev: true
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=}
     engines: {node: '>=0.10.0'}
@@ -6288,6 +6419,20 @@ packages:
       tmp: 0.0.33
     dev: true
 
+  /extract-zip/2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+    dependencies:
+      debug: 4.3.4
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -6326,6 +6471,12 @@ packages:
     dependencies:
       reusify: 1.0.4
 
+  /fd-slicer/1.1.0:
+    resolution: {integrity: sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=}
+    dependencies:
+      pend: 1.2.0
+    dev: true
+
   /fetch-blob/3.1.5:
     resolution: {integrity: sha512-N64ZpKqoLejlrwkIAnb9iLSA3Vx/kjgzpcDhygcqJ2KKjky8nCgUQ+dzXtbrLaWZGZNmNfQTsiQ0weZ1svglHg==}
     engines: {node: ^12.20 || >= 14.13}
@@ -6550,6 +6701,13 @@ packages:
     resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
     dev: true
 
+  /get-stream/5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+    dependencies:
+      pump: 3.0.0
+    dev: true
+
   /get-stream/6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -6912,6 +7070,16 @@ packages:
       - supports-color
     dev: true
 
+  /https-proxy-agent/5.0.0:
+    resolution: {integrity: sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /https-proxy-agent/5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -7321,6 +7489,51 @@ packages:
       minimatch: 3.1.2
     dev: true
 
+  /jest-diff/27.5.1:
+    resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 27.5.1
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-get-type/27.5.1:
+    resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
+  /jest-matcher-utils/27.2.5:
+    resolution: {integrity: sha512-qNR/kh6bz0Dyv3m68Ck2g1fLW5KlSOUNcFQh87VXHZwWc/gY6XwnKofx76Qytz3x5LDWT09/2+yXndTkaG4aWg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 27.5.1
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-message-util/27.5.1:
+    resolution: {integrity: sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@jest/types': 27.5.1
+      '@types/stack-utils': 2.0.1
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      micromatch: 4.0.5
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      stack-utils: 2.0.5
+    dev: true
+
+  /jest-regex-util/27.5.1:
+    resolution: {integrity: sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
   /jest-worker/26.6.2:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
@@ -7335,6 +7548,10 @@ packages:
     hasBin: true
     dev: true
 
+  /jpeg-js/0.4.3:
+    resolution: {integrity: sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==}
+    dev: true
+
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -8103,7 +8320,6 @@ packages:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
     hasBin: true
-    dev: false
 
   /mimic-fn/2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
@@ -8122,6 +8338,12 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
+  /minimatch/3.0.4:
+    resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -8517,6 +8739,15 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
+  /open/8.4.0:
+    resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
   /optionator/0.8.3:
     resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
     engines: {node: '>= 0.8.0'}
@@ -8767,6 +8998,10 @@ packages:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
 
+  /pend/1.2.0:
+    resolution: {integrity: sha1-elfrVQpng/kRUzH89GY9XI4AelA=}
+    dev: true
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -8778,6 +9013,18 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
+  /pirates/4.0.4:
+    resolution: {integrity: sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /pixelmatch/5.2.1:
+    resolution: {integrity: sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==}
+    hasBin: true
+    dependencies:
+      pngjs: 4.0.1
+    dev: true
+
   /pkg-dir/4.2.0:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
@@ -8936,6 +9183,15 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: true
 
+  /pretty-format/27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+    dev: true
+
   /pretty-format/3.8.0:
     resolution: {integrity: sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=}
     dev: false
@@ -8947,6 +9203,11 @@ packages:
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
+  /progress/2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   /prompts/2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -8955,6 +9216,14 @@ packages:
       sisteransi: 1.0.5
     dev: false
 
+  /proper-lockfile/4.1.2:
+    resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
+    dependencies:
+      graceful-fs: 4.2.10
+      retry: 0.12.0
+      signal-exit: 3.0.7
+    dev: true
+
   /property-information/6.1.1:
     resolution: {integrity: sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==}
 
@@ -9050,6 +9319,10 @@ packages:
       react: 18.1.0
       scheduler: 0.22.0
 
+  /react-is/17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    dev: true
+
   /react/17.0.2:
     resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
     engines: {node: '>=0.10.0'}
@@ -9367,6 +9640,11 @@ packages:
       unified: 10.1.2
     dev: false
 
+  /retry/0.12.0:
+    resolution: {integrity: sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=}
+    engines: {node: '>= 4'}
+    dev: true
+
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -9664,6 +9942,17 @@ packages:
       - supports-color
     dev: true
 
+  /socks-proxy-agent/6.1.1:
+    resolution: {integrity: sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==}
+    engines: {node: '>= 10'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.4
+      socks: 2.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /socks/2.6.2:
     resolution: {integrity: sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==}
     engines: {node: '>= 10.13.0', npm: '>= 3.0.0'}
@@ -9696,6 +9985,12 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map-support/0.4.18:
+    resolution: {integrity: sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==}
+    dependencies:
+      source-map: 0.5.7
+    dev: true
+
   /source-map-support/0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
     dependencies:
@@ -9766,6 +10061,13 @@ packages:
     resolution: {integrity: sha512-JWp4cG2eybkvKA1QUHGoNK6JDEYcOnSuhzNGjZuYUPqXreDl/VkkvP2sZW7Rmh+icuCttrR9ccb2WPIazyM/Cw==}
     dev: true
 
+  /stack-utils/2.0.5:
+    resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==}
+    engines: {node: '>=10'}
+    dependencies:
+      escape-string-regexp: 2.0.0
+    dev: true
+
   /statuses/2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -11149,6 +11451,19 @@ packages:
   /wrappy/1.0.2:
     resolution: {integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=}
 
+  /ws/8.4.2:
+    resolution: {integrity: sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /xregexp/2.0.0:
     resolution: {integrity: sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM=}
     dev: true
@@ -11238,6 +11553,19 @@ packages:
       yargs-parser: 20.2.4
     dev: true
 
+  /yauzl/2.10.0:
+    resolution: {integrity: sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=}
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+    dev: true
+
+  /yazl/2.5.1:
+    resolution: {integrity: sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==}
+    dependencies:
+      buffer-crc32: 0.2.13
+    dev: true
+
   /yocto-queue/0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}

From 29cc61cb3c8f999b6b35140a70ad6d51b7a11364 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 11 May 2022 15:38:19 -0600
Subject: [PATCH 03/54] adding e2e tests to CI workflow

---
 .github/workflows/ci.yml | 42 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bb9d6cbd864c..16791b110060 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -153,6 +153,48 @@ jobs:
       - name: Test
         run: pnpm run test
 
+  e2e:
+    name: 'E2E: ${{ matrix.os }} (node@${{ matrix.node_version }})'
+    runs-on: ${{ matrix.os }}
+    env:
+      ASTRO_TELEMETRY_DISABLED: true
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node_version: [14, 16]
+        include:
+          - os: windows-latest
+            node_version: 16
+          - os: macos-latest
+            node_version: 16
+      fail-fast: false
+    needs:
+      - build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.1
+
+      - name: Setup node@${{ matrix.node_version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: 'pnpm'
+
+      - name: Download Build Artifacts
+        uses: actions/download-artifact@v3
+
+      - name: Extract Artifacts
+        run: ./.github/extract-artifacts.sh
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Test
+        run: pnpm run test:e2e
+
   smoke:
     name: 'Test (Smoke) ${{ matrix.os }}'
     runs-on: ${{ matrix.os }}

From e105bacea954582a1dfe518bafd17d2cd8add277 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 11 May 2022 15:39:53 -0600
Subject: [PATCH 04/54] using e2e for dev tests, mocha for build tests

---
 packages/astro/e2e/tailwindcss.test.js  | 107 +++++++-----------------
 packages/astro/test/tailwindcss.test.js |  46 ----------
 2 files changed, 30 insertions(+), 123 deletions(-)

diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index bb2c7abba6f0..8d643e7749ce 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -2,97 +2,50 @@ import { test as base, expect } from '@playwright/test';
 import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
-	astro: async ({ }, use) => {
+	astro: async ({}, use) => {
 		const fixture = await loadFixture({ root: './fixtures/tailwindcss/' });
 		await use(fixture);
 	},
 });
 
-test.describe('dev', () => {
-	let devServer;
+let devServer;
 
-	test.beforeAll(async ({ astro }) => {
-		devServer = await astro.startDevServer();
-	});
-
-	test.afterAll(async ({ astro }) => {
-		await devServer.stop();
-	});
-
-	test('Tailwind CSS', async ({ page }) => {
-		await page.goto(`localhost:${devServer.address.port}/`);
-
-		await test.step('body', async () => {
-			const body = page.locator('body');
-
-			await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
-			await expect(body, 'should have background color').toHaveCSS(
-				'background-color',
-				'rgb(243, 233, 250)'
-			);
-			await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
-		});
-
-		await test.step('button', async () => {
-			const button = page.locator('button');
-
-			await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
-			await expect(button, 'should have background color').toHaveCSS(
-				'background-color',
-				'rgb(147, 51, 234)'
-			);
-
-			await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
-			await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
-			await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
-
-			await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
-			await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
-		});
-	});
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
 });
 
-test.describe('build', () => {
-	let previewServer;
-
-	test.beforeAll(async ({ astro }) => {
-		await astro.build();
-		previewServer = await astro.preview();
-	});
-
-	test.afterAll(async ({ astro }) => {
-		await previewServer.stop();
-	})
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
 
-	test('Tailwind CSS', async ({ page }) => {
-		await page.goto(`localhost:3000/`);
+test('Tailwind CSS', async ({ page }) => {
+	await page.goto(`localhost:${devServer.address.port}/`);
 
-		await test.step('body', async () => {
-			const body = page.locator('body');
+	await test.step('body', async () => {
+		const body = page.locator('body');
 
-			await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
-			await expect(body, 'should have background color').toHaveCSS(
-				'background-color',
-				'rgb(243, 233, 250)'
-			);
-			await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
-		});
+		await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
+		await expect(body, 'should have background color').toHaveCSS(
+			'background-color',
+			'rgb(243, 233, 250)'
+		);
+		await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
+	});
 
-		await test.step('button', async () => {
-			const button = page.locator('button');
+	await test.step('button', async () => {
+		const button = page.locator('button');
 
-			await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
-			await expect(button, 'should have background color').toHaveCSS(
-				'background-color',
-				'rgb(147, 51, 234)'
-			);
+		await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
+		await expect(button, 'should have background color').toHaveCSS(
+			'background-color',
+			'rgb(147, 51, 234)'
+		);
 
-			await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
-			await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
-			await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
+		await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
+		await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
+		await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
 
-			await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
-			await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
-		});
+		await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
+		await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
 	});
 });
diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js
index c8fad9f4ca37..2facca9e4c56 100644
--- a/packages/astro/test/tailwindcss.test.js
+++ b/packages/astro/test/tailwindcss.test.js
@@ -70,50 +70,4 @@ describe('Tailwind', () => {
 			expect(bundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/);
 		});
 	});
-
-	// with "build" handling CSS checking, the dev tests are mostly testing the paths resolve in dev
-	describe('dev', () => {
-		let devServer;
-		let $;
-
-		before(async () => {
-			devServer = await fixture.startDevServer();
-			const html = await fixture.fetch('/').then((res) => res.text());
-			$ = cheerio.load(html);
-		});
-
-		after(async () => {
-			devServer && (await devServer.stop());
-		});
-
-		it('resolves CSS in src/styles', async () => {
-			const bundledCSSHREF = $('link[rel=stylesheet]').attr('href');
-			const res = await fixture.fetch(bundledCSSHREF);
-			expect(res.status).to.equal(200);
-
-			const text = await res.text();
-			expect(text, 'includes used component classes').to.match(/\.bg-purple-600/);
-
-			// tests a random tailwind class that isn't used on the page
-			expect(text, 'purges unused classes').not.to.match(/\.bg-blue-600/);
-
-			// tailwind escapes colons, `lg:py-3` compiles to `lg\:py-3`
-			expect(text, 'includes responsive classes').to.match(/\.lg\\\\:py-3/);
-
-			// tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]`
-			expect(text, 'supports arbitrary value classes').to.match(/.font-\\[900\\]/);
-
-			// custom theme colors were included
-			expect(text, 'includes custom theme colors').to.match(/\.text-midnight/);
-			expect(text, 'includes custom theme colors').to.match(/\.bg-dawn/);
-		});
-
-		it('maintains classes in HTML', async () => {
-			const button = $('button');
-
-			expect(button.hasClass('text-white'), 'basic class').to.be.true;
-			expect(button.hasClass('lg:py-3'), 'responsive class').to.be.true;
-			expect(button.hasClass('font-[900]', 'arbitrary value')).to.be.true;
-		});
-	});
 });

From c854dffda706cc76c6628ee6ec8e52af1f1d8e51 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 11 May 2022 15:51:53 -0600
Subject: [PATCH 05/54] refactor: sharing test-utils helpers

---
 packages/astro/e2e/test-utils.js  | 203 +----------------------------
 packages/astro/test-utils.js      | 204 ++++++++++++++++++++++++++++++
 packages/astro/test/test-utils.js | 136 +-------------------
 pnpm-lock.yaml                    |   2 +-
 4 files changed, 209 insertions(+), 336 deletions(-)
 create mode 100644 packages/astro/test-utils.js

diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 460b3185f087..158a61d5dd3c 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -1,202 +1,3 @@
-import { execa } from 'execa';
-import { polyfill } from '@astrojs/webapi';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { resolveConfig, loadConfig } from '../dist/core/config.js';
-import dev from '../dist/core/dev/index.js';
-import build from '../dist/core/build/index.js';
-import preview from '../dist/core/preview/index.js';
-import { nodeLogDestination } from '../dist/core/logger/node.js';
-import os from 'os';
-import stripAnsi from 'strip-ansi';
+import { createFixtureLoader } from '../test-utils.js';
 
-// polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
-polyfill(globalThis, {
-	exclude: 'window document',
-});
-
-/**
- * @typedef {import('node-fetch').Response} Response
- * @typedef {import('../src/core/dev/index').DevServer} DevServer
- * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
- * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
- * @typedef {import('../src/core/app/index').App} App
- *
- *
- * @typedef {Object} Fixture
- * @property {typeof build} build
- * @property {(url: string, opts: any) => Promise<Response>} fetch
- * @property {(path: string) => Promise<string>} readFile
- * @property {(path: string) => Promise<string[]>} readdir
- * @property {() => Promise<DevServer>} startDevServer
- * @property {() => Promise<PreviewServer>} preview
- * @property {() => Promise<void>} clean
- * @property {() => Promise<App>} loadTestAdapterApp
- */
-
-/**
- * Load Astro fixture
- * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
- * @returns {Promise<Fixture>} The fixture. Has the following properties:
- *   .config     - Returns the final config. Will be automatically passed to the methods below:
- *
- *   Build
- *   .build()          - Async. Builds into current folder (will erase previous build)
- *   .readFile(path)   - Async. Read a file from the build.
- *
- *   Dev
- *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
- *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
- *
- *   Preview
- *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
- *
- *   Clean-up
- *   .clean()          - Async. Removes the project’s dist folder.
- */
-export async function loadFixture(inlineConfig) {
-	if (!inlineConfig || !inlineConfig.root)
-		throw new Error("Must provide { root: './fixtures/...' }");
-
-	// load config
-	let cwd = inlineConfig.root;
-	delete inlineConfig.root;
-	if (typeof cwd === 'string') {
-		try {
-			cwd = new URL(cwd.replace(/\/?$/, '/'));
-		} catch (err1) {
-			cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
-		}
-	}
-	// Load the config.
-	let config = await loadConfig({ cwd: fileURLToPath(cwd) });
-	config = merge(config, { ...inlineConfig, root: cwd });
-
-	// Note: the inline config doesn't run through config validation where these normalizations usually occur
-	if (typeof inlineConfig.site === 'string') {
-		config.site = new URL(inlineConfig.site);
-	}
-	if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
-		config.base = inlineConfig.base + '/';
-	}
-
-	/** @type {import('../src/core/logger/core').LogOptions} */
-	const logging = {
-		dest: nodeLogDestination,
-		level: 'error',
-	};
-
-	/** @type {import('@astrojs/telemetry').AstroTelemetry} */
-	const telemetry = {
-		record() {
-			return Promise.resolve();
-		},
-	};
-
-	return {
-		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
-		startDevServer: async (opts = {}) => {
-			const devResult = await dev(config, { logging, telemetry, ...opts });
-			config.server.port = devResult.address.port; // update port
-			return devResult;
-		},
-		config,
-		fetch: (url, init) =>
-			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
-		preview: async (opts = {}) => {
-			const previewServer = await preview(config, { logging, telemetry, ...opts });
-			return previewServer;
-		},
-		readFile: (filePath) =>
-			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
-		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
-		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
-		loadTestAdapterApp: async () => {
-			const url = new URL('./server/entry.mjs', config.outDir);
-			const { createApp } = await import(url);
-			return createApp();
-		},
-	};
-}
-
-/**
- * Basic object merge utility. Returns new copy of merged Object.
- * @param {Object} a
- * @param {Object} b
- * @returns {Object}
- */
-function merge(a, b) {
-	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
-	const c = {};
-	for (const k of allKeys) {
-		const needsObjectMerge =
-			typeof a[k] === 'object' &&
-			typeof b[k] === 'object' &&
-			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
-			!Array.isArray(a[k]) &&
-			!Array.isArray(b[k]);
-		if (needsObjectMerge) {
-			c[k] = merge(a[k] || {}, b[k] || {});
-			continue;
-		}
-		c[k] = a[k];
-		if (b[k] !== undefined) c[k] = b[k];
-	}
-	return c;
-}
-
-const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
-
-/** Returns a process running the Astro CLI. */
-export function cli(/** @type {string[]} */ ...args) {
-	const spawned = execa('node', [cliPath, ...args]);
-
-	spawned.stdout.setEncoding('utf8');
-
-	return spawned;
-}
-
-export async function parseCliDevStart(proc) {
-	let stdout = '';
-	let stderr = '';
-
-	for await (const chunk of proc.stdout) {
-		stdout += chunk;
-		if (chunk.includes('Local')) break;
-	}
-	if (!stdout) {
-		for await (const chunk of proc.stderr) {
-			stderr += chunk;
-			break;
-		}
-	}
-
-	proc.kill();
-	stdout = stripAnsi(stdout);
-	stderr = stripAnsi(stderr);
-
-	if (stderr) {
-		throw new Error(stderr);
-	}
-
-	const messages = stdout
-		.split('\n')
-		.filter((ln) => !!ln.trim())
-		.map((ln) => ln.replace(/[🚀┃]/g, '').replace(/\s+/g, ' ').trim());
-
-	return { messages };
-}
-
-export async function cliServerLogSetup(flags = [], cmd = 'dev') {
-	const proc = cli(cmd, ...flags);
-
-	const { messages } = await parseCliDevStart(proc);
-
-	const local = messages.find((msg) => msg.includes('Local'))?.replace(/Local\s*/g, '');
-	const network = messages.find((msg) => msg.includes('Network'))?.replace(/Network\s*/g, '');
-
-	return { local, network };
-}
-
-export const isWindows = os.platform() === 'win32';
+export const loadFixture = createFixtureLoader('e2e');
diff --git a/packages/astro/test-utils.js b/packages/astro/test-utils.js
new file mode 100644
index 000000000000..0268925591c1
--- /dev/null
+++ b/packages/astro/test-utils.js
@@ -0,0 +1,204 @@
+import { execa } from 'execa';
+import { polyfill } from '@astrojs/webapi';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { resolveConfig, loadConfig } from './dist/core/config.js';
+import dev from './dist/core/dev/index.js';
+import build from './dist/core/build/index.js';
+import preview from './dist/core/preview/index.js';
+import { nodeLogDestination } from './dist/core/logger/node.js';
+import os from 'os';
+import stripAnsi from 'strip-ansi';
+
+// polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
+polyfill(globalThis, {
+	exclude: 'window document',
+});
+
+/**
+ * @typedef {import('node-fetch').Response} Response
+ * @typedef {import('../src/core/dev/index').DevServer} DevServer
+ * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
+ * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
+ * @typedef {import('../src/core/app/index').App} App
+ *
+ *
+ * @typedef {Object} Fixture
+ * @property {typeof build} build
+ * @property {(url: string, opts: any) => Promise<Response>} fetch
+ * @property {(path: string) => Promise<string>} readFile
+ * @property {(path: string) => Promise<string[]>} readdir
+ * @property {() => Promise<DevServer>} startDevServer
+ * @property {() => Promise<PreviewServer>} preview
+ * @property {() => Promise<void>} clean
+ * @property {() => Promise<App>} loadTestAdapterApp
+ */
+
+export function createFixtureLoader(root) {
+	/**
+	 * Load Astro fixture
+	 * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
+	 * @returns {Promise<Fixture>} The fixture. Has the following properties:
+	 *   .config     - Returns the final config. Will be automatically passed to the methods below:
+	 *
+	 *   Build
+	 *   .build()          - Async. Builds into current folder (will erase previous build)
+	 *   .readFile(path)   - Async. Read a file from the build.
+	 *
+	 *   Dev
+	 *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
+	 *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
+	 *
+	 *   Preview
+	 *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
+	 *
+	 *   Clean-up
+	 *   .clean()          - Async. Removes the project’s dist folder.
+	 */
+	return async function loadFixture(inlineConfig) {
+		if (!inlineConfig || !inlineConfig.root)
+			throw new Error("Must provide { root: './fixtures/...' }");
+
+		// load config
+		let cwd = path.join(root, inlineConfig.root);
+		delete inlineConfig.root;
+		if (typeof cwd === 'string') {
+			try {
+				cwd = new URL(cwd.replace(/\/?$/, '/'));
+			} catch (err1) {
+				cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
+			}
+		}
+		// Load the config.
+		let config = await loadConfig({ cwd: fileURLToPath(cwd) });
+		config = merge(config, { ...inlineConfig, root: cwd });
+
+		// Note: the inline config doesn't run through config validation where these normalizations usually occur
+		if (typeof inlineConfig.site === 'string') {
+			config.site = new URL(inlineConfig.site);
+		}
+		if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
+			config.base = inlineConfig.base + '/';
+		}
+
+		/** @type {import('../src/core/logger/core').LogOptions} */
+		const logging = {
+			dest: nodeLogDestination,
+			level: 'error',
+		};
+
+		/** @type {import('@astrojs/telemetry').AstroTelemetry} */
+		const telemetry = {
+			record() {
+				return Promise.resolve();
+			},
+		};
+
+		return {
+			build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
+			startDevServer: async (opts = {}) => {
+				const devResult = await dev(config, { logging, telemetry, ...opts });
+				config.server.port = devResult.address.port; // update port
+				return devResult;
+			},
+			config,
+			fetch: (url, init) =>
+				fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
+			preview: async (opts = {}) => {
+				const previewServer = await preview(config, { logging, telemetry, ...opts });
+				return previewServer;
+			},
+			readFile: (filePath) =>
+				fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
+			readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
+			clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
+			loadTestAdapterApp: async () => {
+				const url = new URL('./server/entry.mjs', config.outDir);
+				const { createApp } = await import(url);
+				return createApp();
+			},
+		};
+	}
+}
+
+/**
+ * Basic object merge utility. Returns new copy of merged Object.
+ * @param {Object} a
+ * @param {Object} b
+ * @returns {Object}
+ */
+function merge(a, b) {
+	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+	const c = {};
+	for (const k of allKeys) {
+		const needsObjectMerge =
+			typeof a[k] === 'object' &&
+			typeof b[k] === 'object' &&
+			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
+			!Array.isArray(a[k]) &&
+			!Array.isArray(b[k]);
+		if (needsObjectMerge) {
+			c[k] = merge(a[k] || {}, b[k] || {});
+			continue;
+		}
+		c[k] = a[k];
+		if (b[k] !== undefined) c[k] = b[k];
+	}
+	return c;
+}
+
+const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
+
+/** Returns a process running the Astro CLI. */
+export function cli(/** @type {string[]} */ ...args) {
+	const spawned = execa('node', [cliPath, ...args]);
+
+	spawned.stdout.setEncoding('utf8');
+
+	return spawned;
+}
+
+export async function parseCliDevStart(proc) {
+	let stdout = '';
+	let stderr = '';
+
+	for await (const chunk of proc.stdout) {
+		stdout += chunk;
+		if (chunk.includes('Local')) break;
+	}
+	if (!stdout) {
+		for await (const chunk of proc.stderr) {
+			stderr += chunk;
+			break;
+		}
+	}
+
+	proc.kill();
+	stdout = stripAnsi(stdout);
+	stderr = stripAnsi(stderr);
+
+	if (stderr) {
+		throw new Error(stderr);
+	}
+
+	const messages = stdout
+		.split('\n')
+		.filter((ln) => !!ln.trim())
+		.map((ln) => ln.replace(/[🚀┃]/g, '').replace(/\s+/g, ' ').trim());
+
+	return { messages };
+}
+
+export async function cliServerLogSetup(flags = [], cmd = 'dev') {
+	const proc = cli(cmd, ...flags);
+
+	const { messages } = await parseCliDevStart(proc);
+
+	const local = messages.find((msg) => msg.includes('Local'))?.replace(/Local\s*/g, '');
+	const network = messages.find((msg) => msg.includes('Network'))?.replace(/Network\s*/g, '');
+
+	return { local, network };
+}
+
+export const isWindows = os.platform() === 'win32';
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 267e4039f62c..c3c5146a8aba 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -1,12 +1,8 @@
 import { execa } from 'execa';
 import { polyfill } from '@astrojs/webapi';
-import fs from 'fs';
 import { fileURLToPath } from 'url';
-import { resolveConfig, loadConfig } from '../dist/core/config.js';
-import dev from '../dist/core/dev/index.js';
 import build from '../dist/core/build/index.js';
-import preview from '../dist/core/preview/index.js';
-import { nodeLogDestination } from '../dist/core/logger/node.js';
+import { createFixtureLoader } from '../test-utils.js';
 import os from 'os';
 import stripAnsi from 'strip-ansi';
 
@@ -15,135 +11,7 @@ polyfill(globalThis, {
 	exclude: 'window document',
 });
 
-/**
- * @typedef {import('node-fetch').Response} Response
- * @typedef {import('../src/core/dev/index').DevServer} DevServer
- * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
- * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
- * @typedef {import('../src/core/app/index').App} App
- *
- *
- * @typedef {Object} Fixture
- * @property {typeof build} build
- * @property {(url: string, opts: any) => Promise<Response>} fetch
- * @property {(path: string) => Promise<string>} readFile
- * @property {(path: string) => Promise<string[]>} readdir
- * @property {() => Promise<DevServer>} startDevServer
- * @property {() => Promise<PreviewServer>} preview
- * @property {() => Promise<void>} clean
- * @property {() => Promise<App>} loadTestAdapterApp
- */
-
-/**
- * Load Astro fixture
- * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
- * @returns {Promise<Fixture>} The fixture. Has the following properties:
- *   .config     - Returns the final config. Will be automatically passed to the methods below:
- *
- *   Build
- *   .build()          - Async. Builds into current folder (will erase previous build)
- *   .readFile(path)   - Async. Read a file from the build.
- *
- *   Dev
- *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
- *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
- *
- *   Preview
- *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
- *
- *   Clean-up
- *   .clean()          - Async. Removes the project’s dist folder.
- */
-export async function loadFixture(inlineConfig) {
-	if (!inlineConfig || !inlineConfig.root)
-		throw new Error("Must provide { root: './fixtures/...' }");
-
-	// load config
-	let cwd = inlineConfig.root;
-	delete inlineConfig.root;
-	if (typeof cwd === 'string') {
-		try {
-			cwd = new URL(cwd.replace(/\/?$/, '/'));
-		} catch (err1) {
-			cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
-		}
-	}
-	// Load the config.
-	let config = await loadConfig({ cwd: fileURLToPath(cwd) });
-	config = merge(config, { ...inlineConfig, root: cwd });
-
-	// Note: the inline config doesn't run through config validation where these normalizations usually occur
-	if (typeof inlineConfig.site === 'string') {
-		config.site = new URL(inlineConfig.site);
-	}
-	if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
-		config.base = inlineConfig.base + '/';
-	}
-
-	/** @type {import('../src/core/logger/core').LogOptions} */
-	const logging = {
-		dest: nodeLogDestination,
-		level: 'error',
-	};
-
-	/** @type {import('@astrojs/telemetry').AstroTelemetry} */
-	const telemetry = {
-		record() {
-			return Promise.resolve();
-		},
-	};
-
-	return {
-		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
-		startDevServer: async (opts = {}) => {
-			const devResult = await dev(config, { logging, telemetry, ...opts });
-			config.server.port = devResult.address.port; // update port
-			return devResult;
-		},
-		config,
-		fetch: (url, init) =>
-			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
-		preview: async (opts = {}) => {
-			const previewServer = await preview(config, { logging, telemetry, ...opts });
-			return previewServer;
-		},
-		readFile: (filePath) =>
-			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
-		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
-		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
-		loadTestAdapterApp: async () => {
-			const url = new URL('./server/entry.mjs', config.outDir);
-			const { createApp } = await import(url);
-			return createApp();
-		},
-	};
-}
-
-/**
- * Basic object merge utility. Returns new copy of merged Object.
- * @param {Object} a
- * @param {Object} b
- * @returns {Object}
- */
-function merge(a, b) {
-	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
-	const c = {};
-	for (const k of allKeys) {
-		const needsObjectMerge =
-			typeof a[k] === 'object' &&
-			typeof b[k] === 'object' &&
-			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
-			!Array.isArray(a[k]) &&
-			!Array.isArray(b[k]);
-		if (needsObjectMerge) {
-			c[k] = merge(a[k] || {}, b[k] || {});
-			continue;
-		}
-		c[k] = a[k];
-		if (b[k] !== undefined) c[k] = b[k];
-	}
-	return c;
-}
+export const loadFixture = createFixtureLoader('test');
 
 const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9b082a7f6e9..79c2f69f1f89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -659,7 +659,7 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
-  packages/astro/e2e/fixtures/basic:
+  packages/astro/e2e/fixtures/tailwindcss:
     specifiers:
       '@astrojs/tailwind': workspace:*
       astro: workspace:*

From 400d1b8dc070b7e4fc17abf447f68172c38df4f1 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 11 May 2022 15:53:32 -0600
Subject: [PATCH 06/54] chore: update lockfile

---
 pnpm-lock.yaml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79c2f69f1f89..7c45bb4d0e38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5595,6 +5595,18 @@ packages:
       ms: 2.1.3
     dev: false
 
+  /debug/4.3.3:
+    resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
   /debug/4.3.3_supports-color@8.1.1:
     resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
     engines: {node: '>=6.0'}

From 4512765213f57e0f39bb2e742eacd803d309835d Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Thu, 12 May 2022 14:36:12 -0600
Subject: [PATCH 07/54] Adding contributing docs

---
 CONTRIBUTING.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9ff3bae3a120..b325fc8d1e02 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -59,6 +59,24 @@ pnpm run test
 pnpm run test:match "$STRING_MATCH"
 ```
 
+#### E2E tests
+
+Certain features, like HMR and client hydration, need end-to-end tests to verify functionality in the dev server. [Playwright](https://playwright.dev/) is used to test against the dev server.
+
+```shell
+# run this in the top-level project root to run all E2E tests
+pnpm run test:e2e
+# run only a few tests, great for working on a single feature
+# (example - `pnpm run test:e2e:match "Tailwind CSS" runs `tailwindcss.test.js`)
+pnpm run test:e2e:match "$STRING_MATCH"
+```
+
+**When should you add E2E tests?**
+
+Any tests for `astro build` output should use the main `mocha` tests rather than E2E - these tests will run faster than having Playwright start the `astro preview` server.
+
+If a test needs to validate what happens on the page after it's loading in the browser, that's a perfect use for E2E dev server tests, i.e. to verify that hot-module reloading works in `astro dev` or that components were client hydrated and are interactive.
+
 ### Other useful commands
 
 ```shell

From 85172f7d5d2d3091b71707f4bdefe46389c61087 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Thu, 12 May 2022 14:36:34 -0600
Subject: [PATCH 08/54] Revert "refactor: sharing test-utils helpers"

This reverts commit 48496f43bc99eab30747baf6e83041ba4932e786.
---
 packages/astro/e2e/test-utils.js  | 203 ++++++++++++++++++++++++++++-
 packages/astro/test-utils.js      | 204 ------------------------------
 packages/astro/test/test-utils.js | 136 +++++++++++++++++++-
 pnpm-lock.yaml                    |   2 +-
 4 files changed, 336 insertions(+), 209 deletions(-)
 delete mode 100644 packages/astro/test-utils.js

diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 158a61d5dd3c..460b3185f087 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -1,3 +1,202 @@
-import { createFixtureLoader } from '../test-utils.js';
+import { execa } from 'execa';
+import { polyfill } from '@astrojs/webapi';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { resolveConfig, loadConfig } from '../dist/core/config.js';
+import dev from '../dist/core/dev/index.js';
+import build from '../dist/core/build/index.js';
+import preview from '../dist/core/preview/index.js';
+import { nodeLogDestination } from '../dist/core/logger/node.js';
+import os from 'os';
+import stripAnsi from 'strip-ansi';
 
-export const loadFixture = createFixtureLoader('e2e');
+// polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
+polyfill(globalThis, {
+	exclude: 'window document',
+});
+
+/**
+ * @typedef {import('node-fetch').Response} Response
+ * @typedef {import('../src/core/dev/index').DevServer} DevServer
+ * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
+ * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
+ * @typedef {import('../src/core/app/index').App} App
+ *
+ *
+ * @typedef {Object} Fixture
+ * @property {typeof build} build
+ * @property {(url: string, opts: any) => Promise<Response>} fetch
+ * @property {(path: string) => Promise<string>} readFile
+ * @property {(path: string) => Promise<string[]>} readdir
+ * @property {() => Promise<DevServer>} startDevServer
+ * @property {() => Promise<PreviewServer>} preview
+ * @property {() => Promise<void>} clean
+ * @property {() => Promise<App>} loadTestAdapterApp
+ */
+
+/**
+ * Load Astro fixture
+ * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
+ * @returns {Promise<Fixture>} The fixture. Has the following properties:
+ *   .config     - Returns the final config. Will be automatically passed to the methods below:
+ *
+ *   Build
+ *   .build()          - Async. Builds into current folder (will erase previous build)
+ *   .readFile(path)   - Async. Read a file from the build.
+ *
+ *   Dev
+ *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
+ *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
+ *
+ *   Preview
+ *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
+ *
+ *   Clean-up
+ *   .clean()          - Async. Removes the project’s dist folder.
+ */
+export async function loadFixture(inlineConfig) {
+	if (!inlineConfig || !inlineConfig.root)
+		throw new Error("Must provide { root: './fixtures/...' }");
+
+	// load config
+	let cwd = inlineConfig.root;
+	delete inlineConfig.root;
+	if (typeof cwd === 'string') {
+		try {
+			cwd = new URL(cwd.replace(/\/?$/, '/'));
+		} catch (err1) {
+			cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
+		}
+	}
+	// Load the config.
+	let config = await loadConfig({ cwd: fileURLToPath(cwd) });
+	config = merge(config, { ...inlineConfig, root: cwd });
+
+	// Note: the inline config doesn't run through config validation where these normalizations usually occur
+	if (typeof inlineConfig.site === 'string') {
+		config.site = new URL(inlineConfig.site);
+	}
+	if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
+		config.base = inlineConfig.base + '/';
+	}
+
+	/** @type {import('../src/core/logger/core').LogOptions} */
+	const logging = {
+		dest: nodeLogDestination,
+		level: 'error',
+	};
+
+	/** @type {import('@astrojs/telemetry').AstroTelemetry} */
+	const telemetry = {
+		record() {
+			return Promise.resolve();
+		},
+	};
+
+	return {
+		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
+		startDevServer: async (opts = {}) => {
+			const devResult = await dev(config, { logging, telemetry, ...opts });
+			config.server.port = devResult.address.port; // update port
+			return devResult;
+		},
+		config,
+		fetch: (url, init) =>
+			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
+		preview: async (opts = {}) => {
+			const previewServer = await preview(config, { logging, telemetry, ...opts });
+			return previewServer;
+		},
+		readFile: (filePath) =>
+			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
+		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
+		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
+		loadTestAdapterApp: async () => {
+			const url = new URL('./server/entry.mjs', config.outDir);
+			const { createApp } = await import(url);
+			return createApp();
+		},
+	};
+}
+
+/**
+ * Basic object merge utility. Returns new copy of merged Object.
+ * @param {Object} a
+ * @param {Object} b
+ * @returns {Object}
+ */
+function merge(a, b) {
+	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+	const c = {};
+	for (const k of allKeys) {
+		const needsObjectMerge =
+			typeof a[k] === 'object' &&
+			typeof b[k] === 'object' &&
+			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
+			!Array.isArray(a[k]) &&
+			!Array.isArray(b[k]);
+		if (needsObjectMerge) {
+			c[k] = merge(a[k] || {}, b[k] || {});
+			continue;
+		}
+		c[k] = a[k];
+		if (b[k] !== undefined) c[k] = b[k];
+	}
+	return c;
+}
+
+const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
+
+/** Returns a process running the Astro CLI. */
+export function cli(/** @type {string[]} */ ...args) {
+	const spawned = execa('node', [cliPath, ...args]);
+
+	spawned.stdout.setEncoding('utf8');
+
+	return spawned;
+}
+
+export async function parseCliDevStart(proc) {
+	let stdout = '';
+	let stderr = '';
+
+	for await (const chunk of proc.stdout) {
+		stdout += chunk;
+		if (chunk.includes('Local')) break;
+	}
+	if (!stdout) {
+		for await (const chunk of proc.stderr) {
+			stderr += chunk;
+			break;
+		}
+	}
+
+	proc.kill();
+	stdout = stripAnsi(stdout);
+	stderr = stripAnsi(stderr);
+
+	if (stderr) {
+		throw new Error(stderr);
+	}
+
+	const messages = stdout
+		.split('\n')
+		.filter((ln) => !!ln.trim())
+		.map((ln) => ln.replace(/[🚀┃]/g, '').replace(/\s+/g, ' ').trim());
+
+	return { messages };
+}
+
+export async function cliServerLogSetup(flags = [], cmd = 'dev') {
+	const proc = cli(cmd, ...flags);
+
+	const { messages } = await parseCliDevStart(proc);
+
+	const local = messages.find((msg) => msg.includes('Local'))?.replace(/Local\s*/g, '');
+	const network = messages.find((msg) => msg.includes('Network'))?.replace(/Network\s*/g, '');
+
+	return { local, network };
+}
+
+export const isWindows = os.platform() === 'win32';
diff --git a/packages/astro/test-utils.js b/packages/astro/test-utils.js
deleted file mode 100644
index 0268925591c1..000000000000
--- a/packages/astro/test-utils.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { execa } from 'execa';
-import { polyfill } from '@astrojs/webapi';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { resolveConfig, loadConfig } from './dist/core/config.js';
-import dev from './dist/core/dev/index.js';
-import build from './dist/core/build/index.js';
-import preview from './dist/core/preview/index.js';
-import { nodeLogDestination } from './dist/core/logger/node.js';
-import os from 'os';
-import stripAnsi from 'strip-ansi';
-
-// polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
-polyfill(globalThis, {
-	exclude: 'window document',
-});
-
-/**
- * @typedef {import('node-fetch').Response} Response
- * @typedef {import('../src/core/dev/index').DevServer} DevServer
- * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
- * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
- * @typedef {import('../src/core/app/index').App} App
- *
- *
- * @typedef {Object} Fixture
- * @property {typeof build} build
- * @property {(url: string, opts: any) => Promise<Response>} fetch
- * @property {(path: string) => Promise<string>} readFile
- * @property {(path: string) => Promise<string[]>} readdir
- * @property {() => Promise<DevServer>} startDevServer
- * @property {() => Promise<PreviewServer>} preview
- * @property {() => Promise<void>} clean
- * @property {() => Promise<App>} loadTestAdapterApp
- */
-
-export function createFixtureLoader(root) {
-	/**
-	 * Load Astro fixture
-	 * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
-	 * @returns {Promise<Fixture>} The fixture. Has the following properties:
-	 *   .config     - Returns the final config. Will be automatically passed to the methods below:
-	 *
-	 *   Build
-	 *   .build()          - Async. Builds into current folder (will erase previous build)
-	 *   .readFile(path)   - Async. Read a file from the build.
-	 *
-	 *   Dev
-	 *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
-	 *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
-	 *
-	 *   Preview
-	 *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
-	 *
-	 *   Clean-up
-	 *   .clean()          - Async. Removes the project’s dist folder.
-	 */
-	return async function loadFixture(inlineConfig) {
-		if (!inlineConfig || !inlineConfig.root)
-			throw new Error("Must provide { root: './fixtures/...' }");
-
-		// load config
-		let cwd = path.join(root, inlineConfig.root);
-		delete inlineConfig.root;
-		if (typeof cwd === 'string') {
-			try {
-				cwd = new URL(cwd.replace(/\/?$/, '/'));
-			} catch (err1) {
-				cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
-			}
-		}
-		// Load the config.
-		let config = await loadConfig({ cwd: fileURLToPath(cwd) });
-		config = merge(config, { ...inlineConfig, root: cwd });
-
-		// Note: the inline config doesn't run through config validation where these normalizations usually occur
-		if (typeof inlineConfig.site === 'string') {
-			config.site = new URL(inlineConfig.site);
-		}
-		if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
-			config.base = inlineConfig.base + '/';
-		}
-
-		/** @type {import('../src/core/logger/core').LogOptions} */
-		const logging = {
-			dest: nodeLogDestination,
-			level: 'error',
-		};
-
-		/** @type {import('@astrojs/telemetry').AstroTelemetry} */
-		const telemetry = {
-			record() {
-				return Promise.resolve();
-			},
-		};
-
-		return {
-			build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
-			startDevServer: async (opts = {}) => {
-				const devResult = await dev(config, { logging, telemetry, ...opts });
-				config.server.port = devResult.address.port; // update port
-				return devResult;
-			},
-			config,
-			fetch: (url, init) =>
-				fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
-			preview: async (opts = {}) => {
-				const previewServer = await preview(config, { logging, telemetry, ...opts });
-				return previewServer;
-			},
-			readFile: (filePath) =>
-				fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
-			readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
-			clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
-			loadTestAdapterApp: async () => {
-				const url = new URL('./server/entry.mjs', config.outDir);
-				const { createApp } = await import(url);
-				return createApp();
-			},
-		};
-	}
-}
-
-/**
- * Basic object merge utility. Returns new copy of merged Object.
- * @param {Object} a
- * @param {Object} b
- * @returns {Object}
- */
-function merge(a, b) {
-	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
-	const c = {};
-	for (const k of allKeys) {
-		const needsObjectMerge =
-			typeof a[k] === 'object' &&
-			typeof b[k] === 'object' &&
-			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
-			!Array.isArray(a[k]) &&
-			!Array.isArray(b[k]);
-		if (needsObjectMerge) {
-			c[k] = merge(a[k] || {}, b[k] || {});
-			continue;
-		}
-		c[k] = a[k];
-		if (b[k] !== undefined) c[k] = b[k];
-	}
-	return c;
-}
-
-const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
-
-/** Returns a process running the Astro CLI. */
-export function cli(/** @type {string[]} */ ...args) {
-	const spawned = execa('node', [cliPath, ...args]);
-
-	spawned.stdout.setEncoding('utf8');
-
-	return spawned;
-}
-
-export async function parseCliDevStart(proc) {
-	let stdout = '';
-	let stderr = '';
-
-	for await (const chunk of proc.stdout) {
-		stdout += chunk;
-		if (chunk.includes('Local')) break;
-	}
-	if (!stdout) {
-		for await (const chunk of proc.stderr) {
-			stderr += chunk;
-			break;
-		}
-	}
-
-	proc.kill();
-	stdout = stripAnsi(stdout);
-	stderr = stripAnsi(stderr);
-
-	if (stderr) {
-		throw new Error(stderr);
-	}
-
-	const messages = stdout
-		.split('\n')
-		.filter((ln) => !!ln.trim())
-		.map((ln) => ln.replace(/[🚀┃]/g, '').replace(/\s+/g, ' ').trim());
-
-	return { messages };
-}
-
-export async function cliServerLogSetup(flags = [], cmd = 'dev') {
-	const proc = cli(cmd, ...flags);
-
-	const { messages } = await parseCliDevStart(proc);
-
-	const local = messages.find((msg) => msg.includes('Local'))?.replace(/Local\s*/g, '');
-	const network = messages.find((msg) => msg.includes('Network'))?.replace(/Network\s*/g, '');
-
-	return { local, network };
-}
-
-export const isWindows = os.platform() === 'win32';
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index c3c5146a8aba..267e4039f62c 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -1,8 +1,12 @@
 import { execa } from 'execa';
 import { polyfill } from '@astrojs/webapi';
+import fs from 'fs';
 import { fileURLToPath } from 'url';
+import { resolveConfig, loadConfig } from '../dist/core/config.js';
+import dev from '../dist/core/dev/index.js';
 import build from '../dist/core/build/index.js';
-import { createFixtureLoader } from '../test-utils.js';
+import preview from '../dist/core/preview/index.js';
+import { nodeLogDestination } from '../dist/core/logger/node.js';
 import os from 'os';
 import stripAnsi from 'strip-ansi';
 
@@ -11,7 +15,135 @@ polyfill(globalThis, {
 	exclude: 'window document',
 });
 
-export const loadFixture = createFixtureLoader('test');
+/**
+ * @typedef {import('node-fetch').Response} Response
+ * @typedef {import('../src/core/dev/index').DevServer} DevServer
+ * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
+ * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
+ * @typedef {import('../src/core/app/index').App} App
+ *
+ *
+ * @typedef {Object} Fixture
+ * @property {typeof build} build
+ * @property {(url: string, opts: any) => Promise<Response>} fetch
+ * @property {(path: string) => Promise<string>} readFile
+ * @property {(path: string) => Promise<string[]>} readdir
+ * @property {() => Promise<DevServer>} startDevServer
+ * @property {() => Promise<PreviewServer>} preview
+ * @property {() => Promise<void>} clean
+ * @property {() => Promise<App>} loadTestAdapterApp
+ */
+
+/**
+ * Load Astro fixture
+ * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
+ * @returns {Promise<Fixture>} The fixture. Has the following properties:
+ *   .config     - Returns the final config. Will be automatically passed to the methods below:
+ *
+ *   Build
+ *   .build()          - Async. Builds into current folder (will erase previous build)
+ *   .readFile(path)   - Async. Read a file from the build.
+ *
+ *   Dev
+ *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
+ *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
+ *
+ *   Preview
+ *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
+ *
+ *   Clean-up
+ *   .clean()          - Async. Removes the project’s dist folder.
+ */
+export async function loadFixture(inlineConfig) {
+	if (!inlineConfig || !inlineConfig.root)
+		throw new Error("Must provide { root: './fixtures/...' }");
+
+	// load config
+	let cwd = inlineConfig.root;
+	delete inlineConfig.root;
+	if (typeof cwd === 'string') {
+		try {
+			cwd = new URL(cwd.replace(/\/?$/, '/'));
+		} catch (err1) {
+			cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
+		}
+	}
+	// Load the config.
+	let config = await loadConfig({ cwd: fileURLToPath(cwd) });
+	config = merge(config, { ...inlineConfig, root: cwd });
+
+	// Note: the inline config doesn't run through config validation where these normalizations usually occur
+	if (typeof inlineConfig.site === 'string') {
+		config.site = new URL(inlineConfig.site);
+	}
+	if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
+		config.base = inlineConfig.base + '/';
+	}
+
+	/** @type {import('../src/core/logger/core').LogOptions} */
+	const logging = {
+		dest: nodeLogDestination,
+		level: 'error',
+	};
+
+	/** @type {import('@astrojs/telemetry').AstroTelemetry} */
+	const telemetry = {
+		record() {
+			return Promise.resolve();
+		},
+	};
+
+	return {
+		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
+		startDevServer: async (opts = {}) => {
+			const devResult = await dev(config, { logging, telemetry, ...opts });
+			config.server.port = devResult.address.port; // update port
+			return devResult;
+		},
+		config,
+		fetch: (url, init) =>
+			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
+		preview: async (opts = {}) => {
+			const previewServer = await preview(config, { logging, telemetry, ...opts });
+			return previewServer;
+		},
+		readFile: (filePath) =>
+			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
+		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
+		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
+		loadTestAdapterApp: async () => {
+			const url = new URL('./server/entry.mjs', config.outDir);
+			const { createApp } = await import(url);
+			return createApp();
+		},
+	};
+}
+
+/**
+ * Basic object merge utility. Returns new copy of merged Object.
+ * @param {Object} a
+ * @param {Object} b
+ * @returns {Object}
+ */
+function merge(a, b) {
+	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+	const c = {};
+	for (const k of allKeys) {
+		const needsObjectMerge =
+			typeof a[k] === 'object' &&
+			typeof b[k] === 'object' &&
+			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
+			!Array.isArray(a[k]) &&
+			!Array.isArray(b[k]);
+		if (needsObjectMerge) {
+			c[k] = merge(a[k] || {}, b[k] || {});
+			continue;
+		}
+		c[k] = a[k];
+		if (b[k] !== undefined) c[k] = b[k];
+	}
+	return c;
+}
 
 const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c45bb4d0e38..462527438f77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -659,7 +659,7 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
-  packages/astro/e2e/fixtures/tailwindcss:
+  packages/astro/e2e/fixtures/basic:
     specifiers:
       '@astrojs/tailwind': workspace:*
       astro: workspace:*

From 4ae372eeda94fc7441b1cc29ba9693a29c52a098 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Thu, 12 May 2022 14:42:49 -0600
Subject: [PATCH 09/54] refactor: simpler solution to resolving e2e test
 fixtures

---
 packages/astro/e2e/test-utils.js | 185 ++-----------------------------
 pnpm-lock.yaml                   |   2 +-
 2 files changed, 9 insertions(+), 178 deletions(-)

diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 460b3185f087..19a83b844462 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -1,39 +1,4 @@
-import { execa } from 'execa';
-import { polyfill } from '@astrojs/webapi';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { resolveConfig, loadConfig } from '../dist/core/config.js';
-import dev from '../dist/core/dev/index.js';
-import build from '../dist/core/build/index.js';
-import preview from '../dist/core/preview/index.js';
-import { nodeLogDestination } from '../dist/core/logger/node.js';
-import os from 'os';
-import stripAnsi from 'strip-ansi';
-
-// polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
-polyfill(globalThis, {
-	exclude: 'window document',
-});
-
-/**
- * @typedef {import('node-fetch').Response} Response
- * @typedef {import('../src/core/dev/index').DevServer} DevServer
- * @typedef {import('../src/@types/astro').AstroConfig} AstroConfig
- * @typedef {import('../src/core/preview/index').PreviewServer} PreviewServer
- * @typedef {import('../src/core/app/index').App} App
- *
- *
- * @typedef {Object} Fixture
- * @property {typeof build} build
- * @property {(url: string, opts: any) => Promise<Response>} fetch
- * @property {(path: string) => Promise<string>} readFile
- * @property {(path: string) => Promise<string[]>} readdir
- * @property {() => Promise<DevServer>} startDevServer
- * @property {() => Promise<PreviewServer>} preview
- * @property {() => Promise<void>} clean
- * @property {() => Promise<App>} loadTestAdapterApp
- */
+import { loadFixture as baseLoadFixture } from '../test/test-utils.js';
 
 /**
  * Load Astro fixture
@@ -55,148 +20,14 @@ polyfill(globalThis, {
  *   Clean-up
  *   .clean()          - Async. Removes the project’s dist folder.
  */
-export async function loadFixture(inlineConfig) {
+export function loadFixture(inlineConfig) {
 	if (!inlineConfig || !inlineConfig.root)
 		throw new Error("Must provide { root: './fixtures/...' }");
 
-	// load config
-	let cwd = inlineConfig.root;
-	delete inlineConfig.root;
-	if (typeof cwd === 'string') {
-		try {
-			cwd = new URL(cwd.replace(/\/?$/, '/'));
-		} catch (err1) {
-			cwd = new URL(cwd.replace(/\/?$/, '/'), import.meta.url);
-		}
-	}
-	// Load the config.
-	let config = await loadConfig({ cwd: fileURLToPath(cwd) });
-	config = merge(config, { ...inlineConfig, root: cwd });
-
-	// Note: the inline config doesn't run through config validation where these normalizations usually occur
-	if (typeof inlineConfig.site === 'string') {
-		config.site = new URL(inlineConfig.site);
-	}
-	if (inlineConfig.base && !inlineConfig.base.endsWith('/')) {
-		config.base = inlineConfig.base + '/';
-	}
-
-	/** @type {import('../src/core/logger/core').LogOptions} */
-	const logging = {
-		dest: nodeLogDestination,
-		level: 'error',
-	};
-
-	/** @type {import('@astrojs/telemetry').AstroTelemetry} */
-	const telemetry = {
-		record() {
-			return Promise.resolve();
-		},
-	};
-
-	return {
-		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
-		startDevServer: async (opts = {}) => {
-			const devResult = await dev(config, { logging, telemetry, ...opts });
-			config.server.port = devResult.address.port; // update port
-			return devResult;
-		},
-		config,
-		fetch: (url, init) =>
-			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
-		preview: async (opts = {}) => {
-			const previewServer = await preview(config, { logging, telemetry, ...opts });
-			return previewServer;
-		},
-		readFile: (filePath) =>
-			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
-		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
-		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
-		loadTestAdapterApp: async () => {
-			const url = new URL('./server/entry.mjs', config.outDir);
-			const { createApp } = await import(url);
-			return createApp();
-		},
-	};
-}
-
-/**
- * Basic object merge utility. Returns new copy of merged Object.
- * @param {Object} a
- * @param {Object} b
- * @returns {Object}
- */
-function merge(a, b) {
-	const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
-	const c = {};
-	for (const k of allKeys) {
-		const needsObjectMerge =
-			typeof a[k] === 'object' &&
-			typeof b[k] === 'object' &&
-			(Object.keys(a[k]).length || Object.keys(b[k]).length) &&
-			!Array.isArray(a[k]) &&
-			!Array.isArray(b[k]);
-		if (needsObjectMerge) {
-			c[k] = merge(a[k] || {}, b[k] || {});
-			continue;
-		}
-		c[k] = a[k];
-		if (b[k] !== undefined) c[k] = b[k];
-	}
-	return c;
-}
-
-const cliPath = fileURLToPath(new URL('../astro.js', import.meta.url));
-
-/** Returns a process running the Astro CLI. */
-export function cli(/** @type {string[]} */ ...args) {
-	const spawned = execa('node', [cliPath, ...args]);
-
-	spawned.stdout.setEncoding('utf8');
-
-	return spawned;
-}
-
-export async function parseCliDevStart(proc) {
-	let stdout = '';
-	let stderr = '';
-
-	for await (const chunk of proc.stdout) {
-		stdout += chunk;
-		if (chunk.includes('Local')) break;
-	}
-	if (!stdout) {
-		for await (const chunk of proc.stderr) {
-			stderr += chunk;
-			break;
-		}
-	}
-
-	proc.kill();
-	stdout = stripAnsi(stdout);
-	stderr = stripAnsi(stderr);
-
-	if (stderr) {
-		throw new Error(stderr);
-	}
-
-	const messages = stdout
-		.split('\n')
-		.filter((ln) => !!ln.trim())
-		.map((ln) => ln.replace(/[🚀┃]/g, '').replace(/\s+/g, ' ').trim());
-
-	return { messages };
-}
-
-export async function cliServerLogSetup(flags = [], cmd = 'dev') {
-	const proc = cli(cmd, ...flags);
-
-	const { messages } = await parseCliDevStart(proc);
-
-	const local = messages.find((msg) => msg.includes('Local'))?.replace(/Local\s*/g, '');
-	const network = messages.find((msg) => msg.includes('Network'))?.replace(/Network\s*/g, '');
-
-	return { local, network };
+	// resolve the relative root (i.e. "./fixtures/tailwindcss") to a full filepath
+	// without this, the main `loadFixture` helper will resolve relative to `packages/astro/test`
+	return baseLoadFixture({
+		...inlineConfig,
+		root: new URL(inlineConfig.root, import.meta.url).toString()
+	})
 }
-
-export const isWindows = os.platform() === 'win32';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 462527438f77..7c45bb4d0e38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -659,7 +659,7 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
-  packages/astro/e2e/fixtures/basic:
+  packages/astro/e2e/fixtures/tailwindcss:
     specifiers:
       '@astrojs/tailwind': workspace:*
       astro: workspace:*

From aa2910030bafad9e0dfa08f37c65a8ec469359b7 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Thu, 12 May 2022 14:46:46 -0600
Subject: [PATCH 10/54] chore: updating lockfile

---
 pnpm-lock.yaml | 449 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 448 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c45bb4d0e38..497caf7305db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -469,7 +469,8 @@ importers:
       '@babel/generator': ^7.17.10
       '@babel/parser': ^7.17.10
       '@babel/traverse': ^7.17.10
-      '@babel/types': ^7.17.10
+      '@babel/types': ^7.17.0
+      '@playwright/test': ^1.21.1
       '@proload/core': ^0.3.2
       '@proload/plugin-tsm': ^0.2.1
       '@types/babel__core': ^7.1.19
@@ -603,6 +604,7 @@ importers:
       zod: 3.16.0
     devDependencies:
       '@babel/types': 7.17.10
+      '@playwright/test': 1.21.1
       '@types/babel__core': 7.1.19
       '@types/babel__generator': 7.6.4
       '@types/babel__traverse': 7.17.1
@@ -1878,6 +1880,29 @@ packages:
     resolution: {integrity: sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/core/7.16.12:
+    resolution: {integrity: sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.17.10
+      '@babel/helper-compilation-targets': 7.17.10_@babel+core@7.16.12
+      '@babel/helper-module-transforms': 7.17.7
+      '@babel/helpers': 7.17.9
+      '@babel/parser': 7.17.10
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.17.10
+      '@babel/types': 7.17.10
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      semver: 6.3.0
+      source-map: 0.5.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/core/7.17.10:
     resolution: {integrity: sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==}
     engines: {node: '>=6.9.0'}
@@ -1922,6 +1947,22 @@ packages:
       '@babel/types': 7.17.10
     dev: true
 
+  /@babel/helper-compilation-targets/7.17.10_@babel+core@7.16.12:
+    resolution: {integrity: sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/compat-data': 7.17.10
+      '@babel/core': 7.16.12
+      '@babel/helper-validator-option': 7.16.7
+      browserslist: 4.20.3
+      semver: 6.3.0
+    dev: true
+
   /@babel/helper-compilation-targets/7.17.10_@babel+core@7.17.10:
     resolution: {integrity: sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==}
     engines: {node: '>=6.9.0'}
@@ -1937,6 +1978,27 @@ packages:
       browserslist: 4.20.3
       semver: 6.3.0
 
+  /@babel/helper-create-class-features-plugin/7.17.9_@babel+core@7.16.12:
+    resolution: {integrity: sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-annotate-as-pure': 7.16.7
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-function-name': 7.17.9
+      '@babel/helper-member-expression-to-functions': 7.17.7
+      '@babel/helper-optimise-call-expression': 7.16.7
+      '@babel/helper-replace-supers': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helper-create-class-features-plugin/7.17.9_@babel+core@7.17.10:
     resolution: {integrity: sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==}
     engines: {node: '>=6.9.0'}
@@ -2198,6 +2260,22 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-class-properties/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-create-class-features-plugin': 7.17.9_@babel+core@7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-class-properties/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==}
     engines: {node: '>=6.9.0'}
@@ -2231,6 +2309,20 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-dynamic-import/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.12
+    dev: true
+
   /@babel/plugin-proposal-dynamic-import/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==}
     engines: {node: '>=6.9.0'}
@@ -2245,6 +2337,20 @@ packages:
       '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.17.10
     dev: true
 
+  /@babel/plugin-proposal-export-namespace-from/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.12
+    dev: true
+
   /@babel/plugin-proposal-export-namespace-from/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==}
     engines: {node: '>=6.9.0'}
@@ -2273,6 +2379,20 @@ packages:
       '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.17.10
     dev: true
 
+  /@babel/plugin-proposal-logical-assignment-operators/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.12
+    dev: true
+
   /@babel/plugin-proposal-logical-assignment-operators/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==}
     engines: {node: '>=6.9.0'}
@@ -2287,6 +2407,20 @@ packages:
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.17.10
     dev: true
 
+  /@babel/plugin-proposal-nullish-coalescing-operator/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.12
+    dev: true
+
   /@babel/plugin-proposal-nullish-coalescing-operator/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==}
     engines: {node: '>=6.9.0'}
@@ -2301,6 +2435,20 @@ packages:
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.17.10
     dev: true
 
+  /@babel/plugin-proposal-numeric-separator/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.12
+    dev: true
+
   /@babel/plugin-proposal-numeric-separator/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==}
     engines: {node: '>=6.9.0'}
@@ -2346,6 +2494,21 @@ packages:
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.17.10
     dev: true
 
+  /@babel/plugin-proposal-optional-chaining/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.16.0
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.12
+    dev: true
+
   /@babel/plugin-proposal-optional-chaining/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==}
     engines: {node: '>=6.9.0'}
@@ -2361,6 +2524,22 @@ packages:
       '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.17.10
     dev: true
 
+  /@babel/plugin-proposal-private-methods/7.16.11_@babel+core@7.16.12:
+    resolution: {integrity: sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-create-class-features-plugin': 7.17.9_@babel+core@7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-private-methods/7.16.11_@babel+core@7.17.10:
     resolution: {integrity: sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==}
     engines: {node: '>=6.9.0'}
@@ -2377,6 +2556,24 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-private-property-in-object/7.16.7_@babel+core@7.16.12:
+    resolution: {integrity: sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-annotate-as-pure': 7.16.7
+      '@babel/helper-create-class-features-plugin': 7.17.9_@babel+core@7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.12
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-private-property-in-object/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==}
     engines: {node: '>=6.9.0'}
@@ -2409,6 +2606,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.16.12:
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.17.10:
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
@@ -2446,6 +2655,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
@@ -2458,6 +2679,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
@@ -2470,6 +2703,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     peerDependencies:
@@ -2494,6 +2739,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
 
+  /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.16.12:
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.17.10:
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -2506,6 +2763,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
@@ -2518,6 +2787,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.16.12:
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.17.10:
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
@@ -2530,6 +2811,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
@@ -2542,6 +2835,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
@@ -2554,6 +2859,18 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.16.12:
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.17.10:
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
@@ -2566,6 +2883,19 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.16.12:
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.17.10:
     resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
     engines: {node: '>=6.9.0'}
@@ -2592,6 +2922,19 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-typescript/7.17.10_@babel+core@7.16.12:
+    resolution: {integrity: sha512-xJefea1DWXW09pW4Tm9bjwVlPDyYA2it3fWlmEjpYz6alPvTUjL0EOzNzI/FEOyI3r4/J7uVH5UqKgl1TQ5hqQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
   /@babel/plugin-transform-arrow-functions/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==}
     engines: {node: '>=6.9.0'}
@@ -2808,6 +3151,24 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-modules-commonjs/7.16.8_@babel+core@7.16.12:
+    resolution: {integrity: sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-module-transforms': 7.17.7
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/helper-simple-access': 7.17.7
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-modules-commonjs/7.17.9_@babel+core@7.17.10:
     resolution: {integrity: sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==}
     engines: {node: '>=6.9.0'}
@@ -3037,6 +3398,23 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-transform-typescript/7.16.8_@babel+core@7.16.12:
+    resolution: {integrity: sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-create-class-features-plugin': 7.17.9_@babel+core@7.16.12
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-typescript': 7.17.10_@babel+core@7.16.12
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-unicode-escapes/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==}
     engines: {node: '>=6.9.0'}
@@ -3517,6 +3895,17 @@ packages:
       - supports-color
     dev: true
 
+  /@jest/types/27.5.1:
+    resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 17.0.32
+      '@types/yargs': 16.0.4
+      chalk: 4.1.2
+    dev: true
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -4324,6 +4713,20 @@ packages:
     resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
     dev: true
 
+  /@types/yargs/16.0.4:
+    resolution: {integrity: sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==}
+    dependencies:
+      '@types/yargs-parser': 21.0.0
+    dev: true
+
+  /@types/yauzl/2.10.0:
+    resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
+    requiresBuild: true
+    dependencies:
+      '@types/node': 17.0.32
+    dev: true
+    optional: true
+
   /@typescript-eslint/eslint-plugin/5.23.0_c63nfttrfhylg3zmgcxfslaw44:
     resolution: {integrity: sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -9043,6 +9446,45 @@ packages:
     dependencies:
       find-up: 4.1.0
 
+  /playwright-core/1.21.1:
+    resolution: {integrity: sha512-SbK5dEsai9ZUKlxcinqegorBq4GnftXd4/GfW+pLsdQIQWrLCM/JNh6YQ2Rf2enVykXCejtoXW8L5vJXBBVSJQ==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      colors: 1.4.0
+      commander: 8.3.0
+      debug: 4.3.3
+      extract-zip: 2.0.1
+      https-proxy-agent: 5.0.0
+      jpeg-js: 0.4.3
+      mime: 3.0.0
+      pixelmatch: 5.2.1
+      pngjs: 6.0.0
+      progress: 2.0.3
+      proper-lockfile: 4.1.2
+      proxy-from-env: 1.1.0
+      rimraf: 3.0.2
+      socks-proxy-agent: 6.1.1
+      stack-utils: 2.0.5
+      ws: 8.4.2
+      yauzl: 2.10.0
+      yazl: 2.5.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /pngjs/4.0.1:
+    resolution: {integrity: sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==}
+    engines: {node: '>=8.0.0'}
+    dev: true
+
+  /pngjs/6.0.0:
+    resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==}
+    engines: {node: '>=12.13.0'}
+    dev: true
+
   /postcss-js/4.0.0_postcss@8.4.13:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -10010,6 +10452,11 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /source-map/0.5.7:
+    resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}

From b7db93ccc33866c44cc39d3999b53f8ba084f73c Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Thu, 12 May 2022 14:57:45 -0600
Subject: [PATCH 11/54] refactor: cleaning up how URLs are resolved in e2e
 tests

---
 packages/astro/e2e/tailwindcss.test.js |  4 ++--
 packages/astro/e2e/test-utils.js       | 20 --------------------
 packages/astro/test/test-utils.js      |  6 +++++-
 3 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index 8d643e7749ce..e156a7be7f11 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -18,8 +18,8 @@ test.afterAll(async ({ astro }) => {
 	await devServer.stop();
 });
 
-test('Tailwind CSS', async ({ page }) => {
-	await page.goto(`localhost:${devServer.address.port}/`);
+test('Tailwind CSS', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
 
 	await test.step('body', async () => {
 		const body = page.locator('body');
diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 19a83b844462..e2552042c9ee 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -1,25 +1,5 @@
 import { loadFixture as baseLoadFixture } from '../test/test-utils.js';
 
-/**
- * Load Astro fixture
- * @param {AstroConfig} inlineConfig Astro config partial (note: must specify `root`)
- * @returns {Promise<Fixture>} The fixture. Has the following properties:
- *   .config     - Returns the final config. Will be automatically passed to the methods below:
- *
- *   Build
- *   .build()          - Async. Builds into current folder (will erase previous build)
- *   .readFile(path)   - Async. Read a file from the build.
- *
- *   Dev
- *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
- *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
- *
- *   Preview
- *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
- *
- *   Clean-up
- *   .clean()          - Async. Removes the project’s dist folder.
- */
 export function loadFixture(inlineConfig) {
 	if (!inlineConfig || !inlineConfig.root)
 		throw new Error("Must provide { root: './fixtures/...' }");
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 267e4039f62c..bc7ff3f0b2ac 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -25,6 +25,7 @@ polyfill(globalThis, {
  *
  * @typedef {Object} Fixture
  * @property {typeof build} build
+ * @property {(url: string) => string} resolveUrl
  * @property {(url: string, opts: any) => Promise<Response>} fetch
  * @property {(path: string) => Promise<string>} readFile
  * @property {(path: string) => Promise<string[]>} readdir
@@ -93,6 +94,8 @@ export async function loadFixture(inlineConfig) {
 		},
 	};
 
+	const resolveUrl = (url) => `http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`;
+
 	return {
 		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
 		startDevServer: async (opts = {}) => {
@@ -101,8 +104,9 @@ export async function loadFixture(inlineConfig) {
 			return devResult;
 		},
 		config,
+		resolveUrl,
 		fetch: (url, init) =>
-			fetch(`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`, init),
+			fetch(resolveUrl(url), init),
 		preview: async (opts = {}) => {
 			const previewServer = await preview(config, { logging, telemetry, ...opts });
 			return previewServer;

From ee16c1469719f38e6466c86a55ee3f20a134c416 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Thu, 12 May 2022 15:17:02 -0600
Subject: [PATCH 12/54] install playwright deps in CI

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 16791b110060..a88a27121636 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -190,7 +190,7 @@ jobs:
         run: ./.github/extract-artifacts.sh
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install && pnpx playwright install-deps
 
       - name: Test
         run: pnpm run test:e2e

From 0b3c6c2a0e183f2deba684ad4c4f71cd7f260c6b Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 14:46:39 -0600
Subject: [PATCH 13/54] ensure playwright deps are installed during CI

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a88a27121636..2b5b1c79bbeb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -190,7 +190,7 @@ jobs:
         run: ./.github/extract-artifacts.sh
 
       - name: Install dependencies
-        run: pnpm install && pnpx playwright install-deps
+        run: pnpm install && pnpx playwright install
 
       - name: Test
         run: pnpm run test:e2e

From c0bd9da29132a530de37d7113dca8c31fa09e3f4 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 12:08:47 -0600
Subject: [PATCH 14/54] adding a basic HMR test for tailwind styles

---
 packages/astro/e2e/tailwindcss.test.js   | 25 +++++++++++++++++++++++-
 packages/astro/e2e/test-utils.js         |  4 ++++
 packages/astro/src/runtime/client/hmr.ts |  8 ++++++--
 packages/astro/test/test-utils.js        | 18 ++++++++++++++++-
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index e156a7be7f11..0de09e855924 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture } from './test-utils.js';
+import { loadFixture, onAfterHMR } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -18,6 +18,10 @@ test.afterAll(async ({ astro }) => {
 	await devServer.stop();
 });
 
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
 test('Tailwind CSS', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
@@ -48,4 +52,23 @@ test('Tailwind CSS', async ({ page, astro }) => {
 		await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
 		await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
 	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		await astro.writeFile(
+			'src/components/Button.astro',
+			(original) => original.replace('bg-purple-600', 'bg-purple-400')
+		);
+
+		await afterHMR;
+
+		const button = page.locator('button');
+		
+		await expect(button, 'should have bg-purple-400').toHaveClass(/bg-purple-400/);
+		await expect(button, 'should have background color').toHaveCSS(
+			'background-color',
+			'rgb(192, 132, 252)'
+		);
+	});
 });
diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index e2552042c9ee..614491401fb2 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -11,3 +11,7 @@ export function loadFixture(inlineConfig) {
 		root: new URL(inlineConfig.root, import.meta.url).toString()
 	})
 }
+
+export function onAfterHMR(page) {
+	return page.waitForEvent('console', message => message.text() === 'astro:hmr:after')
+}
diff --git a/packages/astro/src/runtime/client/hmr.ts b/packages/astro/src/runtime/client/hmr.ts
index 7cd7732569df..119ba8754623 100644
--- a/packages/astro/src/runtime/client/hmr.ts
+++ b/packages/astro/src/runtime/client/hmr.ts
@@ -14,7 +14,11 @@ if (import.meta.hot) {
 				root.innerHTML = current?.innerHTML;
 			}
 		}
-		return diff(document, doc);
+		const result = diff(document, doc);
+
+		// event used for synchronizing E2E tests
+		console.log('astro:hmr:after');
+		return result;
 	}
 	async function updateAll(files: any[]) {
 		let hasAstroUpdate = false;
@@ -31,7 +35,7 @@ if (import.meta.hot) {
 			}
 		}
 		if (hasAstroUpdate) {
-			return updatePage();
+			return await updatePage();
 		}
 	}
 	import.meta.hot.on('vite:beforeUpdate', async (event) => {
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index bc7ff3f0b2ac..c351b0dfaaf1 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -28,6 +28,7 @@ polyfill(globalThis, {
  * @property {(url: string) => string} resolveUrl
  * @property {(url: string, opts: any) => Promise<Response>} fetch
  * @property {(path: string) => Promise<string>} readFile
+ * @property {(path: string, updater: (content: string) => string) => Promise<void>} writeFile
  * @property {(path: string) => Promise<string[]>} readdir
  * @property {() => Promise<DevServer>} startDevServer
  * @property {() => Promise<PreviewServer>} preview
@@ -96,6 +97,17 @@ export async function loadFixture(inlineConfig) {
 
 	const resolveUrl = (url) => `http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`;
 
+	let cleanupCallbacks = [];
+
+	async function writeFile(filePath, updater) {
+		const pathname = new URL(filePath.replace(/^\//, ''), config.root);
+		const initial = await fs.promises.readFile(pathname, 'utf8');
+		
+		await fs.promises.writeFile(pathname, updater(initial), 'utf-8');
+
+		cleanupCallbacks.push(() => fs.promises.writeFile(pathname, initial, 'utf-8'));
+	}
+
 	return {
 		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
 		startDevServer: async (opts = {}) => {
@@ -113,8 +125,12 @@ export async function loadFixture(inlineConfig) {
 		},
 		readFile: (filePath) =>
 			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
+		writeFile,
 		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
-		clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
+		clean: async () => {
+			await fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true });
+			await Promise.all(cleanupCallbacks.map(cb => cb()));
+		},
 		loadTestAdapterApp: async () => {
 			const url = new URL('./server/entry.mjs', config.outDir);
 			const { createApp } = await import(url);

From fe5bb8c50c2513457110b7c5a28f54c3e1a17423 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 12:12:59 -0600
Subject: [PATCH 15/54] using @e2e for playwright test packages

---
 .changeset/config.json                               | 2 +-
 packages/astro/e2e/fixtures/tailwindcss/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index 8292fbe07858..41ec3ec864fa 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@example/*", "@test/*"]
+  "ignore": ["@example/*", "@test/*", "@e2e/*"]
 }
diff --git a/packages/astro/e2e/fixtures/tailwindcss/package.json b/packages/astro/e2e/fixtures/tailwindcss/package.json
index 4bcc5687273e..f06e3ea91a86 100644
--- a/packages/astro/e2e/fixtures/tailwindcss/package.json
+++ b/packages/astro/e2e/fixtures/tailwindcss/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@test/e2e-tailwindcss",
+  "name": "@e2e/e2e-tailwindcss",
   "version": "0.0.0",
   "private": true,
   "dependencies": {

From 8e5f0d2bd146efa8769b4ec08929410b5774d59d Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 13:00:53 -0600
Subject: [PATCH 16/54] adding react hydration and HMR tests

---
 package.json                                  |   1 +
 .../astro/e2e/fixtures/react/astro.config.mjs |   7 ++
 .../astro/e2e/fixtures/react/package.json     |  11 ++
 .../fixtures/react/src/components/Counter.css |  11 ++
 .../fixtures/react/src/components/Counter.jsx |  19 +++
 .../react/src/components/JSXComponent.jsx     |   5 +
 .../e2e/fixtures/react/src/pages/index.astro  |  29 +++++
 packages/astro/e2e/react.test.js              | 109 ++++++++++++++++++
 packages/astro/package.json                   |   3 +-
 pnpm-lock.yaml                                |  12 ++
 10 files changed, 206 insertions(+), 1 deletion(-)
 create mode 100644 packages/astro/e2e/fixtures/react/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/react/package.json
 create mode 100644 packages/astro/e2e/fixtures/react/src/components/Counter.css
 create mode 100644 packages/astro/e2e/fixtures/react/src/components/Counter.jsx
 create mode 100644 packages/astro/e2e/fixtures/react/src/components/JSXComponent.jsx
 create mode 100644 packages/astro/e2e/fixtures/react/src/pages/index.astro
 create mode 100644 packages/astro/e2e/react.test.js

diff --git a/package.json b/package.json
index 9508c7b0b833..b143a6f0a92a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "test:smoke": "node scripts/smoke/index.js",
     "test:vite-ci": "turbo run test --no-deps --scope=astro --concurrency=1",
     "test:e2e": "cd packages/astro && pnpm run test:e2e",
+    "test:e2e:match": "cd packages/astro && pnpm run test:e2e:match",
     "benchmark": "turbo run benchmark --scope=astro",
     "lint": "eslint \"packages/**/*.ts\"",
     "format": "prettier -w .",
diff --git a/packages/astro/e2e/fixtures/react/astro.config.mjs b/packages/astro/e2e/fixtures/react/astro.config.mjs
new file mode 100644
index 000000000000..8a6f1951c9c2
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [react()],
+});
diff --git a/packages/astro/e2e/fixtures/react/package.json b/packages/astro/e2e/fixtures/react/package.json
new file mode 100644
index 000000000000..f76cc192d8d6
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@e2e/react",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/react": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/react/src/components/Counter.css b/packages/astro/e2e/fixtures/react/src/components/Counter.css
new file mode 100644
index 000000000000..fb21044d78cc
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react/src/components/Counter.css
@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}
diff --git a/packages/astro/e2e/fixtures/react/src/components/Counter.jsx b/packages/astro/e2e/fixtures/react/src/components/Counter.jsx
new file mode 100644
index 000000000000..769e0cccf50c
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react/src/components/Counter.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import './Counter.css';
+
+export default function Counter({ children, count: initialCount, id }) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/react/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/react/src/components/JSXComponent.jsx
new file mode 100644
index 000000000000..90a4d7c4203f
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react/src/components/JSXComponent.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function({ id }) {
+	return <div id={id}>React client:only component</div>
+}
diff --git a/packages/astro/e2e/fixtures/react/src/pages/index.astro b/packages/astro/e2e/fixtures/react/src/pages/index.astro
new file mode 100644
index 000000000000..163618b13670
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react/src/pages/index.astro
@@ -0,0 +1,29 @@
+---
+import Counter from '../components/Counter.jsx';
+import ReactComponent from '../components/JSXComponent.jsx';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+
+		<ReactComponent id="client-only" client:only="react" />
+  </body>
+</html>
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
new file mode 100644
index 000000000000..0d6bc225b86e
--- /dev/null
+++ b/packages/astro/e2e/react.test.js
@@ -0,0 +1,109 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/react/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('React', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#counter-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('#counter-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('#counter-visible');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:only', async () => {
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('React client:only component');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('#counter-idle pre');
+		await expect(count).toHaveText('5');
+
+		// test 2: updating the react component
+		await astro.writeFile(
+			'src/components/JSXComponent.jsx',
+			(original) => original.replace('React client:only component', 'Updated react client:only component')
+		);
+
+		await afterHMR;
+
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('Updated react client:only component');
+
+		// test 3: updating imported CSS
+		await astro.writeFile(
+			'src/components/Counter.css',
+			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		);
+
+		await expect(count).toHaveCSS('font-size', '24px');
+	});
+});
diff --git a/packages/astro/package.json b/packages/astro/package.json
index c4d266a5d21c..bffad56637d7 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -73,7 +73,8 @@
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
     "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js",
     "test:match": "mocha --timeout 20000 -g",
-    "test:e2e": "playwright test e2e"
+    "test:e2e": "playwright test e2e",
+    "test:e2e:match": "playwright test e2e -g"
   },
   "dependencies": {
     "@astrojs/compiler": "^0.14.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 497caf7305db..7a1d78e6db3c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -661,6 +661,18 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
+  packages/astro/e2e/fixtures/react:
+    specifiers:
+      '@astrojs/react': workspace:*
+      astro: workspace:*
+      react: ^18.1.0
+      react-dom: ^18.1.0
+    dependencies:
+      '@astrojs/react': link:../../../../integrations/react
+      astro: link:../../..
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
+
   packages/astro/e2e/fixtures/tailwindcss:
     specifiers:
       '@astrojs/tailwind': workspace:*

From 91d802e73b78d743dba7b4a994013cd73b7dbb3a Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 13:03:58 -0600
Subject: [PATCH 17/54] adding hydration and HMR tests  for preact

---
 .../e2e/fixtures/preact/astro.config.mjs      |   7 ++
 .../astro/e2e/fixtures/preact/package.json    |  11 ++
 .../preact/src/components/Counter.css         |  11 ++
 .../preact/src/components/Counter.jsx         |  20 ++++
 .../preact/src/components/JSXComponent.jsx    |   5 +
 .../e2e/fixtures/preact/src/pages/index.astro |  29 +++++
 packages/astro/e2e/preact.test.js             | 109 ++++++++++++++++++
 pnpm-lock.yaml                                |  12 ++
 8 files changed, 204 insertions(+)
 create mode 100644 packages/astro/e2e/fixtures/preact/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/preact/package.json
 create mode 100644 packages/astro/e2e/fixtures/preact/src/components/Counter.css
 create mode 100644 packages/astro/e2e/fixtures/preact/src/components/Counter.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact/src/pages/index.astro
 create mode 100644 packages/astro/e2e/preact.test.js

diff --git a/packages/astro/e2e/fixtures/preact/astro.config.mjs b/packages/astro/e2e/fixtures/preact/astro.config.mjs
new file mode 100644
index 000000000000..08916b1fea78
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [preact()],
+});
diff --git a/packages/astro/e2e/fixtures/preact/package.json b/packages/astro/e2e/fixtures/preact/package.json
new file mode 100644
index 000000000000..07bb82299725
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@e2e/react",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/components/Counter.css b/packages/astro/e2e/fixtures/preact/src/components/Counter.css
new file mode 100644
index 000000000000..fb21044d78cc
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/src/components/Counter.css
@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/components/Counter.jsx b/packages/astro/e2e/fixtures/preact/src/components/Counter.jsx
new file mode 100644
index 000000000000..526f269639b5
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/src/components/Counter.jsx
@@ -0,0 +1,20 @@
+import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import './Counter.css';
+
+export default function Counter({ children, count: initialCount, id }) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx
new file mode 100644
index 000000000000..6cc7b7858c58
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function({ id }) {
+	return <div id={id}>Preact client:only component</div>
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
new file mode 100644
index 000000000000..e9c582ba5e66
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
@@ -0,0 +1,29 @@
+---
+import Counter from '../components/Counter.jsx';
+import PreactComponent from '../components/JSXComponent.jsx';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+
+		<PreactComponent id="client-only" client:only="preact" />
+  </body>
+</html>
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
new file mode 100644
index 000000000000..c64f4feefafe
--- /dev/null
+++ b/packages/astro/e2e/preact.test.js
@@ -0,0 +1,109 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/preact/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('Preact', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#counter-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('#counter-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('#counter-visible');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:only', async () => {
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('Preact client:only component');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('#counter-idle pre');
+		await expect(count).toHaveText('5');
+
+		// test 2: updating the react component
+		await astro.writeFile(
+			'src/components/JSXComponent.jsx',
+			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
+		);
+
+		await afterHMR;
+
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('Updated preact client:only component');
+
+		// test 3: updating imported CSS
+		await astro.writeFile(
+			'src/components/Counter.css',
+			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		);
+
+		await expect(count).toHaveCSS('font-size', '24px');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a1d78e6db3c..8fd816659c71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -661,6 +661,18 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
+  packages/astro/e2e/fixtures/preact:
+    specifiers:
+      '@astrojs/preact': workspace:*
+      astro: workspace:*
+      react: ^18.1.0
+      react-dom: ^18.1.0
+    dependencies:
+      '@astrojs/preact': link:../../../../integrations/preact
+      astro: link:../../..
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
+
   packages/astro/e2e/fixtures/react:
     specifiers:
       '@astrojs/react': workspace:*

From 08ae1c90db53cb3189ffad862c947bde8d935a50 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 13:16:15 -0600
Subject: [PATCH 18/54] adding svelte hydration and HMR tests

---
 .../astro/e2e/fixtures/preact/package.json    |  5 +-
 .../e2e/fixtures/svelte/astro.config.mjs      |  7 ++
 .../astro/e2e/fixtures/svelte/package.json    | 10 +++
 .../svelte/src/components/Counter.svelte      | 34 ++++++++
 .../e2e/fixtures/svelte/src/pages/index.astro | 26 ++++++
 packages/astro/e2e/preact.test.js             |  2 +-
 packages/astro/e2e/svelte.test.js             | 81 +++++++++++++++++++
 pnpm-lock.yaml                                | 16 +++-
 8 files changed, 173 insertions(+), 8 deletions(-)
 create mode 100644 packages/astro/e2e/fixtures/svelte/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/svelte/package.json
 create mode 100644 packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
 create mode 100644 packages/astro/e2e/fixtures/svelte/src/pages/index.astro
 create mode 100644 packages/astro/e2e/svelte.test.js

diff --git a/packages/astro/e2e/fixtures/preact/package.json b/packages/astro/e2e/fixtures/preact/package.json
index 07bb82299725..64658bf777b5 100644
--- a/packages/astro/e2e/fixtures/preact/package.json
+++ b/packages/astro/e2e/fixtures/preact/package.json
@@ -1,11 +1,10 @@
 {
-  "name": "@e2e/react",
+  "name": "@e2e/preact",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
     "@astrojs/preact": "workspace:*",
     "astro": "workspace:*",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "preact": "^10.7.2"
   }
 }
diff --git a/packages/astro/e2e/fixtures/svelte/astro.config.mjs b/packages/astro/e2e/fixtures/svelte/astro.config.mjs
new file mode 100644
index 000000000000..77fdcd1b9e48
--- /dev/null
+++ b/packages/astro/e2e/fixtures/svelte/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [svelte()],
+});
diff --git a/packages/astro/e2e/fixtures/svelte/package.json b/packages/astro/e2e/fixtures/svelte/package.json
new file mode 100644
index 000000000000..81ff2584431d
--- /dev/null
+++ b/packages/astro/e2e/fixtures/svelte/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@e2e/react",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/svelte": "workspace:*",
+    "astro": "workspace:*",
+    "svelte": "^3.48.0"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
new file mode 100644
index 000000000000..fb7e2aafcfb6
--- /dev/null
+++ b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
@@ -0,0 +1,34 @@
+<script>
+	export let id = undefined;
+  export let count = 0;
+
+  function add() {
+    count += 1;
+  }
+
+  function subtract() {
+    count -= 1;
+  }
+</script>
+
+<div class="counter" id={id}>
+  <button class="decrement" on:click={subtract}>-</button>
+  <pre>{ count }</pre>
+  <button class="increment" on:click={add}>+</button>
+</div>
+<div class="message">
+  <slot />
+</div>
+
+<style>
+  .counter{
+    display: grid;
+    font-size: 2em;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-top: 2em;
+    place-items: center;
+  }
+  .message {
+    text-align: center;
+  }
+</style>
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
new file mode 100644
index 000000000000..35a13e7f376a
--- /dev/null
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -0,0 +1,26 @@
+---
+import Counter from '../components/Counter.svelte';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+  </body>
+</html>
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index c64f4feefafe..a7db134526e9 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -85,7 +85,7 @@ test.only('Preact', async ({ page, astro }) => {
 		const count = page.locator('#counter-idle pre');
 		await expect(count).toHaveText('5');
 
-		// test 2: updating the react component
+		// test 2: updating the preact component
 		await astro.writeFile(
 			'src/components/JSXComponent.jsx',
 			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
new file mode 100644
index 000000000000..6732c363616a
--- /dev/null
+++ b/packages/astro/e2e/svelte.test.js
@@ -0,0 +1,81 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/svelte/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('Svelte', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#counter-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('#counter-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('#counter-visible');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('#counter-idle pre');
+		await expect(count).toHaveText('5');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8fd816659c71..b24296f10520 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -665,13 +665,11 @@ importers:
     specifiers:
       '@astrojs/preact': workspace:*
       astro: workspace:*
-      react: ^18.1.0
-      react-dom: ^18.1.0
+      preact: ^10.7.2
     dependencies:
       '@astrojs/preact': link:../../../../integrations/preact
       astro: link:../../..
-      react: 18.1.0
-      react-dom: 18.1.0_react@18.1.0
+      preact: 10.7.2
 
   packages/astro/e2e/fixtures/react:
     specifiers:
@@ -685,6 +683,16 @@ importers:
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
 
+  packages/astro/e2e/fixtures/svelte:
+    specifiers:
+      '@astrojs/svelte': workspace:*
+      astro: workspace:*
+      svelte: ^3.48.0
+    dependencies:
+      '@astrojs/svelte': link:../../../../integrations/svelte
+      astro: link:../../..
+      svelte: 3.48.0
+
   packages/astro/e2e/fixtures/tailwindcss:
     specifiers:
       '@astrojs/tailwind': workspace:*

From 2481a5a389029f07f61eb5a22aaa0567e7711b26 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 13:21:23 -0600
Subject: [PATCH 19/54] adding solid-js hydration and HMR tests

---
 .../astro/e2e/fixtures/solid/astro.config.mjs |  7 ++
 .../astro/e2e/fixtures/solid/package.json     | 10 +++
 .../fixtures/solid/src/components/Counter.css | 11 +++
 .../fixtures/solid/src/components/Counter.jsx | 19 ++++
 .../e2e/fixtures/solid/src/pages/index.astro  | 26 ++++++
 .../astro/e2e/fixtures/svelte/package.json    |  2 +-
 packages/astro/e2e/solid.test.js              | 89 +++++++++++++++++++
 pnpm-lock.yaml                                | 10 +++
 8 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 packages/astro/e2e/fixtures/solid/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/solid/package.json
 create mode 100644 packages/astro/e2e/fixtures/solid/src/components/Counter.css
 create mode 100644 packages/astro/e2e/fixtures/solid/src/components/Counter.jsx
 create mode 100644 packages/astro/e2e/fixtures/solid/src/pages/index.astro
 create mode 100644 packages/astro/e2e/solid.test.js

diff --git a/packages/astro/e2e/fixtures/solid/astro.config.mjs b/packages/astro/e2e/fixtures/solid/astro.config.mjs
new file mode 100644
index 000000000000..a6c39b8535d2
--- /dev/null
+++ b/packages/astro/e2e/fixtures/solid/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import solid from '@astrojs/solid-js';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [solid()],
+});
diff --git a/packages/astro/e2e/fixtures/solid/package.json b/packages/astro/e2e/fixtures/solid/package.json
new file mode 100644
index 000000000000..d95d4629f681
--- /dev/null
+++ b/packages/astro/e2e/fixtures/solid/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@e2e/solid",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/solid-js": "workspace:*",
+    "astro": "workspace:*",
+    "solid-js": "^1.3.17"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/solid/src/components/Counter.css b/packages/astro/e2e/fixtures/solid/src/components/Counter.css
new file mode 100644
index 000000000000..cffdbda7b65e
--- /dev/null
+++ b/packages/astro/e2e/fixtures/solid/src/components/Counter.css
@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 3em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}
diff --git a/packages/astro/e2e/fixtures/solid/src/components/Counter.jsx b/packages/astro/e2e/fixtures/solid/src/components/Counter.jsx
new file mode 100644
index 000000000000..e315033d3fe9
--- /dev/null
+++ b/packages/astro/e2e/fixtures/solid/src/components/Counter.jsx
@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js';
+import './Counter.css';
+
+export default function Counter({ children, id, count: initialCount = 0 }) {
+	const [count, setCount] = createSignal(initialCount);
+	const add = () => setCount(count() + 1);
+	const subtract = () => setCount(count() - 1);
+
+	return (
+		<>
+			<div id={id} class="counter">
+				<button class="decrement" onClick={subtract}>-</button>
+				<pre>{count()}</pre>
+				<button class="increment" onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/solid/src/pages/index.astro b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
new file mode 100644
index 000000000000..a49d4db255e1
--- /dev/null
+++ b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
@@ -0,0 +1,26 @@
+---
+import Counter from '../components/Counter.jsx';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+  </body>
+</html>
diff --git a/packages/astro/e2e/fixtures/svelte/package.json b/packages/astro/e2e/fixtures/svelte/package.json
index 81ff2584431d..80e0661f88e4 100644
--- a/packages/astro/e2e/fixtures/svelte/package.json
+++ b/packages/astro/e2e/fixtures/svelte/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/react",
+  "name": "@e2e/svelte",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
new file mode 100644
index 000000000000..0ce0731457a2
--- /dev/null
+++ b/packages/astro/e2e/solid.test.js
@@ -0,0 +1,89 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/solid/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('Solid', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#counter-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('#counter-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('#counter-visible');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('#counter-idle pre');
+		await expect(count).toHaveText('5');
+
+		// test 2: updating imported CSS
+		await astro.writeFile(
+			'src/components/Counter.css',
+			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		);
+
+		await expect(count).toHaveCSS('font-size', '24px');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b24296f10520..f0a004249af9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -683,6 +683,16 @@ importers:
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
 
+  packages/astro/e2e/fixtures/solid:
+    specifiers:
+      '@astrojs/solid-js': workspace:*
+      astro: workspace:*
+      solid-js: ^1.3.17
+    dependencies:
+      '@astrojs/solid-js': link:../../../../integrations/solid
+      astro: link:../../..
+      solid-js: 1.3.17
+
   packages/astro/e2e/fixtures/svelte:
     specifiers:
       '@astrojs/svelte': workspace:*

From 54e4ee2cd9a9f725f9e7ab96404bfe879eba4a25 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 14:00:56 -0600
Subject: [PATCH 20/54] adding solid hydration and HMR tests

---
 .../astro/e2e/fixtures/vue/astro.config.mjs   |  7 ++++
 packages/astro/e2e/fixtures/vue/package.json  | 10 +++++
 .../fixtures/vue/src/components/Counter.vue   | 40 +++++++++++++++++++
 .../e2e/fixtures/vue/src/pages/index.astro    | 26 ++++++++++++
 pnpm-lock.yaml                                | 10 +++++
 5 files changed, 93 insertions(+)
 create mode 100644 packages/astro/e2e/fixtures/vue/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/vue/package.json
 create mode 100644 packages/astro/e2e/fixtures/vue/src/components/Counter.vue
 create mode 100644 packages/astro/e2e/fixtures/vue/src/pages/index.astro

diff --git a/packages/astro/e2e/fixtures/vue/astro.config.mjs b/packages/astro/e2e/fixtures/vue/astro.config.mjs
new file mode 100644
index 000000000000..88193061246b
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [vue()],
+});
diff --git a/packages/astro/e2e/fixtures/vue/package.json b/packages/astro/e2e/fixtures/vue/package.json
new file mode 100644
index 000000000000..86b0c06731f3
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@e2e/vue",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*",
+    "vue": "^3.2.33"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
new file mode 100644
index 000000000000..d5d5215f721f
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="counter">
+		<button @click="subtract()">-</button>
+		<pre>{{ count }}</pre>
+		<button @click="add()">+</button>
+	</div>
+	<div class="counter-message">
+		<slot />
+	</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+export default {
+	setup() {
+		const count = ref(0);
+		const add = () => (count.value = count.value + 1);
+		const subtract = () => (count.value = count.value - 1);
+
+		return {
+			count,
+			add,
+			subtract,
+		};
+	},
+};
+</script>
+
+<style>
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+.counter-message {
+	text-align: center;
+}
+</style>
diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
new file mode 100644
index 000000000000..77327247b80d
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
@@ -0,0 +1,26 @@
+---
+import Counter from '../components/Counter.vue';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+  </body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f0a004249af9..422238ffb8ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -711,6 +711,16 @@ importers:
       '@astrojs/tailwind': link:../../../../integrations/tailwind
       astro: link:../../..
 
+  packages/astro/e2e/fixtures/vue:
+    specifiers:
+      '@astrojs/vue': workspace:*
+      astro: workspace:*
+      vue: ^3.2.33
+    dependencies:
+      '@astrojs/vue': link:../../../../integrations/vue
+      astro: link:../../..
+      vue: 3.2.33
+
   packages/astro/test/fixtures/0-css:
     specifiers:
       '@astrojs/react': workspace:*

From a934059a6e6c5e7daa9adfe1eb4212bcdafe69e5 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 14:24:01 -0600
Subject: [PATCH 21/54] adding vue hydration and HMR tests

---
 .../astro/e2e/fixtures/lit/astro.config.mjs   |  7 ++
 packages/astro/e2e/fixtures/lit/package.json  | 11 +++
 .../fixtures/lit/src/components/Counter.js    | 43 +++++++++
 .../e2e/fixtures/lit/src/pages/index.astro    | 26 ++++++
 .../fixtures/vue/src/components/Counter.vue   |  4 +-
 packages/astro/e2e/lit.test.js                | 88 +++++++++++++++++++
 packages/astro/e2e/vue.test.js                | 81 +++++++++++++++++
 pnpm-lock.yaml                                | 12 +++
 8 files changed, 270 insertions(+), 2 deletions(-)
 create mode 100644 packages/astro/e2e/fixtures/lit/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/lit/package.json
 create mode 100644 packages/astro/e2e/fixtures/lit/src/components/Counter.js
 create mode 100644 packages/astro/e2e/fixtures/lit/src/pages/index.astro
 create mode 100644 packages/astro/e2e/lit.test.js
 create mode 100644 packages/astro/e2e/vue.test.js

diff --git a/packages/astro/e2e/fixtures/lit/astro.config.mjs b/packages/astro/e2e/fixtures/lit/astro.config.mjs
new file mode 100644
index 000000000000..1eab8f9ab8be
--- /dev/null
+++ b/packages/astro/e2e/fixtures/lit/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import lit from '@astrojs/lit';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [lit()],
+});
diff --git a/packages/astro/e2e/fixtures/lit/package.json b/packages/astro/e2e/fixtures/lit/package.json
new file mode 100644
index 000000000000..6c2d78baf4c8
--- /dev/null
+++ b/packages/astro/e2e/fixtures/lit/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@e2e/svelte",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/lit": "workspace:*",
+    "astro": "workspace:*",
+    "@webcomponents/template-shadowroot": "^0.1.0",
+    "lit": "^2.2.3"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/lit/src/components/Counter.js b/packages/astro/e2e/fixtures/lit/src/components/Counter.js
new file mode 100644
index 000000000000..1bc78c244854
--- /dev/null
+++ b/packages/astro/e2e/fixtures/lit/src/components/Counter.js
@@ -0,0 +1,43 @@
+import { LitElement, html } from 'lit';
+
+export const tagName = 'my-counter';
+
+class Counter extends LitElement {
+	static get properties() {
+		return {
+			count: {
+				type: Number,
+			},
+			id: {
+				type: String,
+			}
+		};
+	}
+
+	constructor() {
+		super();
+		this.count = this.count || 0;
+	}
+
+	decrement() {
+		this.count--;
+	}
+
+	increment() {
+		this.count++;
+	}
+
+	render() {
+		return html`
+			<div id="${this.id}">
+				<button type="button" @click=${this.decrement}>-</button>
+
+				<p>Count: ${this.count}</p>
+
+				<button type="button" @click=${this.increment}>+</button>
+			</div>
+		`;
+	}
+}
+
+customElements.define(tagName, Counter);
diff --git a/packages/astro/e2e/fixtures/lit/src/pages/index.astro b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
new file mode 100644
index 000000000000..6bc21750539d
--- /dev/null
+++ b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
@@ -0,0 +1,26 @@
+---
+import '../components/Counter.js';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<my-counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</my-counter>
+
+		<my-counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</my-counter>
+
+    <my-counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</my-counter>
+  </body>
+</html>
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
index d5d5215f721f..e07f8f181340 100644
--- a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
+++ b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="counter">
-		<button @click="subtract()">-</button>
+		<button class="decrement" @click="subtract()">-</button>
 		<pre>{{ count }}</pre>
-		<button @click="add()">+</button>
+		<button class="increment" @click="add()">+</button>
 	</div>
 	<div class="counter-message">
 		<slot />
diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
new file mode 100644
index 000000000000..e6fc588081c9
--- /dev/null
+++ b/packages/astro/e2e/lit.test.js
@@ -0,0 +1,88 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/lit/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('Lit', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#counter-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('#counter-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('#counter-visible');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:only', async () => {
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('Preact client:only component');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('#counter-idle pre');
+		await expect(count).toHaveText('5');
+	});
+});
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
new file mode 100644
index 000000000000..1b2a78f0b5f0
--- /dev/null
+++ b/packages/astro/e2e/vue.test.js
@@ -0,0 +1,81 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/vue/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('Vue', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('astro-root:nth-of-type(1)');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('astro-root:nth-of-type(2)');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('astro-root:nth-of-type(3)');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('astro-root:nth-of-type(1) pre');
+		await expect(count).toHaveText('5');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 422238ffb8ee..2763f0ff956f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -661,6 +661,18 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
+  packages/astro/e2e/fixtures/lit:
+    specifiers:
+      '@astrojs/lit': workspace:*
+      '@webcomponents/template-shadowroot': ^0.1.0
+      astro: workspace:*
+      lit: ^2.2.3
+    dependencies:
+      '@astrojs/lit': link:../../../../integrations/lit
+      '@webcomponents/template-shadowroot': 0.1.0
+      astro: link:../../..
+      lit: 2.2.3
+
   packages/astro/e2e/fixtures/preact:
     specifiers:
       '@astrojs/preact': workspace:*

From c8aedf7ec7a712cb51473e07f3ea4fdf4d23e271 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 14:37:11 -0600
Subject: [PATCH 22/54] adding client:media tests

---
 .../e2e/fixtures/lit/src/pages/index.astro     |  4 ++++
 .../e2e/fixtures/preact/src/pages/index.astro  |  4 ++++
 .../e2e/fixtures/react/src/pages/index.astro   |  4 ++++
 .../e2e/fixtures/solid/src/pages/index.astro   |  4 ++++
 .../e2e/fixtures/svelte/src/pages/index.astro  |  4 ++++
 .../e2e/fixtures/vue/src/pages/index.astro     |  4 ++++
 packages/astro/e2e/lit.test.js                 | 18 ++++++++++++++++++
 packages/astro/e2e/preact.test.js              | 18 ++++++++++++++++++
 packages/astro/e2e/react.test.js               | 18 ++++++++++++++++++
 packages/astro/e2e/solid.test.js               | 18 ++++++++++++++++++
 packages/astro/e2e/svelte.test.js              | 18 ++++++++++++++++++
 packages/astro/e2e/vue.test.js                 | 18 ++++++++++++++++++
 12 files changed, 132 insertions(+)

diff --git a/packages/astro/e2e/fixtures/lit/src/pages/index.astro b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
index 6bc21750539d..5220080e7587 100644
--- a/packages/astro/e2e/fixtures/lit/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <my-counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</my-counter>
+
+		<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</my-counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
index e9c582ba5e66..597398500a68 100644
--- a/packages/astro/e2e/fixtures/preact/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
@@ -24,6 +24,10 @@ const someProps = {
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
+		<Counter id="counter-media" {...someProps}  client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
+
 		<PreactComponent id="client-only" client:only="preact" />
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/react/src/pages/index.astro b/packages/astro/e2e/fixtures/react/src/pages/index.astro
index 163618b13670..7a847044e56f 100644
--- a/packages/astro/e2e/fixtures/react/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react/src/pages/index.astro
@@ -24,6 +24,10 @@ const someProps = {
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
+
 		<ReactComponent id="client-only" client:only="react" />
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/solid/src/pages/index.astro b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
index a49d4db255e1..28d7368959b8 100644
--- a/packages/astro/e2e/fixtures/solid/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <Counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
+
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
index 35a13e7f376a..befd951c24f5 100644
--- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <Counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
+
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
index 77327247b80d..4115675623de 100644
--- a/packages/astro/e2e/fixtures/vue/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <Counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
+
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index e6fc588081c9..00720ecc3339 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -71,6 +71,24 @@ test.only('Lit', async ({ page, astro }) => {
 		await expect(label).toHaveText('Preact client:only component');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index a7db134526e9..9950d20352b2 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -64,6 +64,24 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('client:only', async () => {
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index 0d6bc225b86e..b1fcb1d2f4d6 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -64,6 +64,24 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('client:only', async () => {
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
index 0ce0731457a2..2ba4449e4fb5 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.js
@@ -64,6 +64,24 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index 6732c363616a..9c21c78eb003 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -64,6 +64,24 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
index 1b2a78f0b5f0..89acc4c58261 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue.test.js
@@ -64,6 +64,24 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('astro-root:nth-of-type(4)');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 

From e6f3dd57aa499d7c33d5851f08ce90f09c892f1c Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 10:36:01 -0500
Subject: [PATCH 23/54] fixing Lit hydration and HMR tests

---
 .../fixtures/lit/src/components/Counter.js    | 17 ++----
 .../e2e/fixtures/lit/src/pages/index.astro    |  4 --
 .../e2e/fixtures/lit/src/pages/media.astro    | 18 ++++++
 packages/astro/e2e/lit.test.js                | 59 ++++++++++---------
 4 files changed, 53 insertions(+), 45 deletions(-)
 create mode 100644 packages/astro/e2e/fixtures/lit/src/pages/media.astro

diff --git a/packages/astro/e2e/fixtures/lit/src/components/Counter.js b/packages/astro/e2e/fixtures/lit/src/components/Counter.js
index 1bc78c244854..3316a7342ccb 100644
--- a/packages/astro/e2e/fixtures/lit/src/components/Counter.js
+++ b/packages/astro/e2e/fixtures/lit/src/components/Counter.js
@@ -8,19 +8,12 @@ class Counter extends LitElement {
 			count: {
 				type: Number,
 			},
-			id: {
-				type: String,
-			}
 		};
 	}
 
 	constructor() {
 		super();
-		this.count = this.count || 0;
-	}
-
-	decrement() {
-		this.count--;
+		this.count = 0;
 	}
 
 	increment() {
@@ -29,12 +22,12 @@ class Counter extends LitElement {
 
 	render() {
 		return html`
-			<div id="${this.id}">
-				<button type="button" @click=${this.decrement}>-</button>
-
+			<div>
 				<p>Count: ${this.count}</p>
 
-				<button type="button" @click=${this.increment}>+</button>
+				<button type="button" @click=${this.increment}>Increment</button>
+
+				<slot />
 			</div>
 		`;
 	}
diff --git a/packages/astro/e2e/fixtures/lit/src/pages/index.astro b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
index 5220080e7587..6bc21750539d 100644
--- a/packages/astro/e2e/fixtures/lit/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
@@ -22,9 +22,5 @@ const someProps = {
     <my-counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</my-counter>
-
-		<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
-			<h1>Hello, client:media!</h1>
-		</my-counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/lit/src/pages/media.astro b/packages/astro/e2e/fixtures/lit/src/pages/media.astro
new file mode 100644
index 000000000000..732aa54ea94b
--- /dev/null
+++ b/packages/astro/e2e/fixtures/lit/src/pages/media.astro
@@ -0,0 +1,18 @@
+---
+import '../components/Counter.js';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</my-counter>
+  </body>
+</html>
diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index 00720ecc3339..8f5152a0021e 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -23,84 +23,85 @@ test.afterEach(async ({ astro }) => {
 });
 
 test.only('Lit', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
-
 	await test.step('client:idle', async () => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#counter-idle');
 		await expect(counter).toBeVisible();
 		
-		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
 
-		const inc = counter.locator('.increment');
+		const inc = counter.locator('button');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count).toHaveText('Count: 1');
 	});
 
 	await test.step('client:load', async () => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#counter-load');
 		await expect(counter).toBeVisible();
 		
-		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
 
-		const inc = counter.locator('.increment');
+		const inc = counter.locator('button');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count).toHaveText('Count: 1');
 	});
 
 	await test.step('client:visible', async () => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#counter-visible');
 		await expect(counter).toBeVisible();
 		
-		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
 
-		const inc = counter.locator('.increment');
+		const inc = counter.locator('button');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
-	});
-
-	await test.step('client:only', async () => {
-		const label = page.locator('#client-only');
-		await expect(label).toBeVisible();
-
-		await expect(label).toHaveText('Preact client:only component');
+		await expect(count).toHaveText('Count: 1');
 	});
 
 	await test.step('client:media', async () => {
+		await page.goto(astro.resolveUrl('/media'));
+	
 		const counter = page.locator('#counter-media');
 		await expect(counter).toBeVisible();
 		
-		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
 
 		// test 1: not hydrated on large screens
-		const inc = counter.locator('.increment');
+		const inc = counter.locator('button');
 		await inc.click();
-		await expect(count).toHaveText('0');
+		await expect(count).toHaveText('Count: 0');
 
 		// test 2: hydrated on mobile (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
 		await inc.click();
-		await expect(count).toHaveText('1');
+		await expect(count).toHaveText('Count: 1');
 	});
 
 	await test.step('HMR', async () => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const afterHMR = onAfterHMR(page);
 
 		// test 1: updating the page component
 		await astro.writeFile(
 			'src/pages/index.astro',
-			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
 		await afterHMR;
 
-		const count = page.locator('#counter-idle pre');
-		await expect(count).toHaveText('5');
+		const label = page.locator('#counter-idle h1');
+		await expect(label).toHaveText('Hello, updated client:idle!')
 	});
 });

From 7b85d40f25c2200ebc3d9fe06dc0f449f08db19a Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 12:14:09 -0500
Subject: [PATCH 24/54] fixing up the Vue e2e tests

---
 .../svelte/src/components/Counter.svelte      |  9 ++-
 .../e2e/fixtures/svelte/src/pages/index.astro | 18 +----
 .../astro/e2e/fixtures/vue/astro.config.mjs   |  8 ++-
 packages/astro/e2e/fixtures/vue/package.json  |  5 +-
 .../fixtures/vue/src/components/Counter.vue   | 71 ++++++++++---------
 .../fixtures/vue/src/components/Result.vue    | 16 +++++
 .../e2e/fixtures/vue/src/pages/index.astro    | 49 +++++++------
 packages/astro/e2e/vue.test.js                | 59 ++++++++++++---
 pnpm-lock.yaml                                |  2 -
 9 files changed, 146 insertions(+), 91 deletions(-)
 create mode 100644 packages/astro/e2e/fixtures/vue/src/components/Result.vue

diff --git a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
index fb7e2aafcfb6..2f4c07339060 100644
--- a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
+++ b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
@@ -1,6 +1,5 @@
 <script>
-	export let id = undefined;
-  export let count = 0;
+  let count = 0;
 
   function add() {
     count += 1;
@@ -11,10 +10,10 @@
   }
 </script>
 
-<div class="counter" id={id}>
-  <button class="decrement" on:click={subtract}>-</button>
+<div class="counter">
+  <button on:click={subtract}>-</button>
   <pre>{ count }</pre>
-  <button class="increment" on:click={add}>+</button>
+  <button on:click={add}>+</button>
 </div>
 <div class="message">
   <slot />
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
index befd951c24f5..92b8db23ee06 100644
--- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -11,20 +11,8 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
-		<Counter id="counter-idle" {...someProps} client:idle>
-			<h1>Hello, client:idle!</h1>
-		</Counter>
-
-		<Counter id="counter-load" {...someProps} client:load>
-			<h1>Hello, client:load!</h1>
-		</Counter>
-
-    <Counter id="counter-visible" {...someProps} client:visible>
-			<h1>Hello, client:visible!</h1>
-		</Counter>
-
-		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
-			<h1>Hello, client:media!</h1>
-		</Counter>
+		<Counter client:visible>
+				<h1>Hello, Svelte!</h1>
+			</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/vue/astro.config.mjs b/packages/astro/e2e/fixtures/vue/astro.config.mjs
index 88193061246b..94bdad87f189 100644
--- a/packages/astro/e2e/fixtures/vue/astro.config.mjs
+++ b/packages/astro/e2e/fixtures/vue/astro.config.mjs
@@ -3,5 +3,11 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [vue()],
+	integrations: [vue({
+		template: {
+			compilerOptions: {
+				isCustomElement: tag => tag.includes('my-button')
+			}
+		}
+	})],
 });
diff --git a/packages/astro/e2e/fixtures/vue/package.json b/packages/astro/e2e/fixtures/vue/package.json
index 86b0c06731f3..2322b5d2d85d 100644
--- a/packages/astro/e2e/fixtures/vue/package.json
+++ b/packages/astro/e2e/fixtures/vue/package.json
@@ -1,10 +1,9 @@
 {
-  "name": "@e2e/vue",
+  "name": "@test/vue-component",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
     "@astrojs/vue": "workspace:*",
-    "astro": "workspace:*",
-    "vue": "^3.2.33"
+    "astro": "workspace:*"
   }
 }
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
index e07f8f181340..6516d1ee55ad 100644
--- a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
+++ b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
@@ -1,40 +1,47 @@
 <template>
-	<div class="counter">
-		<button class="decrement" @click="subtract()">-</button>
-		<pre>{{ count }}</pre>
-		<button class="increment" @click="add()">+</button>
-	</div>
-	<div class="counter-message">
-		<slot />
-	</div>
+  <div :id="id" class="counter">
+    <h1><slot /></h1>
+    <button class="decrement" @click="subtract()">-</button>
+    <Result :value="count" />
+    <button class="increment" @click="add()">+</button>
+  </div>
 </template>
 
 <script>
 import { ref } from 'vue';
-export default {
-	setup() {
-		const count = ref(0);
-		const add = () => (count.value = count.value + 1);
-		const subtract = () => (count.value = count.value - 1);
 
-		return {
-			count,
-			add,
-			subtract,
-		};
-	},
+import Result from './Result.vue';
+
+export default {
+  components: {
+    Result
+  },
+  props: {
+		id: {
+			type: String,
+			required: true
+		},
+    start: {
+      type: String,
+      required: true
+    },
+    stepSize: {
+      type: String,
+      default: "1"
+    }
+  },
+  setup(props) {
+		const id = props.id;
+    const count = ref(parseInt(props.start))
+    const stepSize = ref(parseInt(props.stepSize))
+    const add = () => (count.value = count.value + stepSize.value);
+    const subtract = () => (count.value = count.value - stepSize.value);
+    return {
+      count,
+			id,
+      add,
+      subtract,
+    };
+  },
 };
 </script>
-
-<style>
-.counter {
-	display: grid;
-	font-size: 2em;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-	margin-top: 2em;
-	place-items: center;
-}
-.counter-message {
-	text-align: center;
-}
-</style>
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Result.vue b/packages/astro/e2e/fixtures/vue/src/components/Result.vue
new file mode 100644
index 000000000000..90bf218b2553
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/src/components/Result.vue
@@ -0,0 +1,16 @@
+<template>
+  <pre>{{ value }}</pre>
+  <my-button>Click Me</my-button>
+</template>
+
+<script>
+
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
index 4115675623de..40619841ff2b 100644
--- a/packages/astro/e2e/fixtures/vue/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
@@ -1,30 +1,33 @@
 ---
-import Counter from '../components/Counter.vue';
-
-const someProps = {
-	count: 0,
-};
+import Counter from '../components/Counter.vue'
 ---
-
-<html>
+<html lang="en">
   <head>
-    <!-- Head Stuff -->
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width"
+    />
+    <title>Vue component</title>
+    <style>
+      :global(:root) {
+        font-family: system-ui;
+        padding: 1em;
+      }
+    </style>
   </head>
   <body>
-		<Counter id="counter-idle" {...someProps} client:idle>
-			<h1>Hello, client:idle!</h1>
-		</Counter>
-
-		<Counter id="counter-load" {...someProps} client:load>
-			<h1>Hello, client:load!</h1>
-		</Counter>
-
-    <Counter id="counter-visible" {...someProps} client:visible>
-			<h1>Hello, client:visible!</h1>
-		</Counter>
-
-		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
-			<h1>Hello, client:media!</h1>
-		</Counter>
+    <main>
+      <Counter id="server-only" start="0">No Client</Counter>
+      <Counter id="client-load" start="0" client:load>Hello, client:load!</Counter>
+      <!-- Test island deduplication, i.e. same UID as the component above. -->
+      <Counter id="client-load-dup" start="0" client:load>Hello, client:load!</Counter>
+      <!-- Test island deduplication account for non-render affecting props. -->
+      <Counter id="client-load-step" start="0" step-size="2" client:load>Hello, client:load!</Counter>
+      <Counter id="client-idle" start="0" client:idle>Hello, client:idle!</Counter>
+      <!-- Test that two client:visibles have unique uids -->
+      <Counter id="client-visible" start="0" client:visible>Hello, client:visible!</Counter>
+      <Counter id="client-media" start="0" client:media="(max-width: 50rem)">Hello, client:media!</Counter>
+    </main>
   </body>
 </html>
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
index 89acc4c58261..7b55baf5ae15 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue.test.js
@@ -25,8 +25,8 @@ test.afterEach(async ({ astro }) => {
 test.only('Vue', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
-	await test.step('client:idle', async () => {
-		const counter = page.locator('astro-root:nth-of-type(1)');
+	await test.step('client:only', async () => {
+		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -35,11 +35,11 @@ test.only('Vue', async ({ page, astro }) => {
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count).toHaveText('0');
 	});
 
-	await test.step('client:load', async () => {
-		const counter = page.locator('astro-root:nth-of-type(2)');
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -51,9 +51,48 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:load', async () => {
+		const counter = page.locator('#client-load');
+		const counterDup = page.locator('#client-load-dup');
+		const counterStep = page.locator('#client-load-step');
+
+		await expect(counter).toBeVisible();
+		await expect(counterDup).toBeVisible();
+		await expect(counterStep).toBeVisible();
+		
+		const count = counter.locator('pre');
+		const countDup = counterDup.locator('pre');
+		const countStep = counterStep.locator('pre');
+
+		const countInc = counter.locator('.increment');
+		const countDupInc = counterDup.locator('.increment');
+		const countStepInc = counterStep.locator('.increment');
+
+		await countInc.click();
+
+		await expect(count).toHaveText('1');
+		await expect(countDup).toHaveText('0');
+		await expect(countStep).toHaveText('0');
+
+		await countDupInc.click();
+
+		await expect(count).toHaveText('1');
+		await expect(countDup).toHaveText('1');
+		await expect(countStep).toHaveText('0');
+
+		await countStepInc.click();
+		await countStepInc.click();
+
+		await expect(count).toHaveText('1');
+		await expect(countDup).toHaveText('1');
+		await expect(countStep).toHaveText('4');
+	});
+
 	await test.step('client:visible', async () => {
-		const counter = page.locator('astro-root:nth-of-type(3)');
+		const counter = page.locator('#client-visible');
 		await expect(counter).toBeVisible();
+
+		await counter.scrollIntoViewIfNeeded();
 		
 		const count = counter.locator('pre');
 		await expect(count).toHaveText('0');
@@ -65,7 +104,7 @@ test.only('Vue', async ({ page, astro }) => {
 	});
 
 	await test.step('client:media', async () => {
-		const counter = page.locator('astro-root:nth-of-type(4)');
+		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -88,12 +127,12 @@ test.only('Vue', async ({ page, astro }) => {
 		// test 1: updating the page component
 		await astro.writeFile(
 			'src/pages/index.astro',
-			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+			(original) => original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
 		);
 
 		await afterHMR;
 
-		const count = page.locator('astro-root:nth-of-type(1) pre');
-		await expect(count).toHaveText('5');
+		const label = page.locator('#client-visible h1');
+		await expect(label).toHaveText('Hello, updated client:visible!');
 	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2763f0ff956f..9b90f6e80c4f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -727,11 +727,9 @@ importers:
     specifiers:
       '@astrojs/vue': workspace:*
       astro: workspace:*
-      vue: ^3.2.33
     dependencies:
       '@astrojs/vue': link:../../../../integrations/vue
       astro: link:../../..
-      vue: 3.2.33
 
   packages/astro/test/fixtures/0-css:
     specifiers:

From 8326cfddf70530276c74e4f1accaa4a237f28be2 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 13:41:42 -0500
Subject: [PATCH 25/54] fixing up svelte tests

---
 .../svelte/src/components/Counter.svelte       | 12 +++++++-----
 .../e2e/fixtures/svelte/src/pages/index.astro  | 18 +++++++++++++++---
 packages/astro/e2e/svelte.test.js              |  6 +++---
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
index 2f4c07339060..264ec9dde4e9 100644
--- a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
+++ b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
@@ -1,4 +1,6 @@
-<script>
+<script lang="ts">
+	export let id: string;
+
   let count = 0;
 
   function add() {
@@ -10,12 +12,12 @@
   }
 </script>
 
-<div class="counter">
-  <button on:click={subtract}>-</button>
+<div {id} class="counter">
+  <button class="decrement" on:click={subtract}>-</button>
   <pre>{ count }</pre>
-  <button on:click={add}>+</button>
+  <button class="increment" on:click={add}>+</button>
 </div>
-<div class="message">
+<div id={`${id}-message`} class="message">
   <slot />
 </div>
 
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
index 92b8db23ee06..e44f4e7cc32f 100644
--- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -11,8 +11,20 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
-		<Counter client:visible>
-				<h1>Hello, Svelte!</h1>
-			</Counter>
+		<Counter id="counter-idle" client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+		<Counter id="counter-visible" client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+
+		<Counter id="counter-media" client:media="(max-width: 50rem)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index 9c21c78eb003..fdb47ab60fe9 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -88,12 +88,12 @@ test.only('Svelte', async ({ page, astro }) => {
 		// test 1: updating the page component
 		await astro.writeFile(
 			'src/pages/index.astro',
-			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
 		await afterHMR;
 
-		const count = page.locator('#counter-idle pre');
-		await expect(count).toHaveText('5');
+		const label = page.locator('#counter-idle-message');
+		await expect(label).toHaveText('Hello, updated client:idle!');
 	});
 });

From 31bcd811014a253528e37d5c199076f9c123b963 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 13:57:22 -0500
Subject: [PATCH 26/54] chore: test cleanup

---
 .../e2e/fixtures/preact/src/pages/index.astro      |  4 ++++
 .../astro/e2e/fixtures/react/src/pages/index.astro |  4 ++++
 .../astro/e2e/fixtures/solid/src/pages/index.astro |  4 ++++
 .../e2e/fixtures/svelte/src/pages/index.astro      |  4 ++++
 packages/astro/e2e/lit.test.js                     |  1 +
 packages/astro/e2e/preact.test.js                  | 14 ++++++++++++++
 packages/astro/e2e/react.test.js                   | 14 ++++++++++++++
 packages/astro/e2e/solid.test.js                   | 14 ++++++++++++++
 packages/astro/e2e/svelte.test.js                  | 14 ++++++++++++++
 packages/astro/e2e/vue.test.js                     |  3 ++-
 10 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
index 597398500a68..ab6c1e2a2d42 100644
--- a/packages/astro/e2e/fixtures/preact/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
@@ -12,6 +12,10 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
+		<Counter id="server-only" {...someProps}>
+			<h1>Hello, server!</h1>
+		</Counter>
+
 		<Counter id="counter-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
diff --git a/packages/astro/e2e/fixtures/react/src/pages/index.astro b/packages/astro/e2e/fixtures/react/src/pages/index.astro
index 7a847044e56f..d087be5bb333 100644
--- a/packages/astro/e2e/fixtures/react/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react/src/pages/index.astro
@@ -12,6 +12,10 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
+		<Counter id="server-only" {...someProps}>
+			<h1>Hello, server!</h1>
+		</Counter>
+
 		<Counter id="counter-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
diff --git a/packages/astro/e2e/fixtures/solid/src/pages/index.astro b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
index 28d7368959b8..70578fac5b00 100644
--- a/packages/astro/e2e/fixtures/solid/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
@@ -11,6 +11,10 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
+		<Counter id="server-only" {...someProps}>
+			<h1>Hello, server!</h1>
+		</Counter>
+
 		<Counter id="counter-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
index e44f4e7cc32f..d253fc1d76b0 100644
--- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -11,6 +11,10 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
+		<Counter id="server-only">
+			<h1>Hello, server!</h1>
+		</Counter>
+
 		<Counter id="counter-idle" client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index 8f5152a0021e..bf900a669296 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -57,6 +57,7 @@ test.only('Lit', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#counter-visible');
+		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('p');
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index 9950d20352b2..2e44b5761536 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -25,6 +25,19 @@ test.afterEach(async ({ astro }) => {
 test.only('Preact', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
+	await test.step('server only', async () => {
+		const counter = page.locator('#server-only');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('0');
+	});
+
 	await test.step('client:idle', async () => {
 		const counter = page.locator('#counter-idle');
 		await expect(counter).toBeVisible();
@@ -53,6 +66,7 @@ test.only('Preact', async ({ page, astro }) => {
 
 	await test.step('client:visible', async () => {
 		const counter = page.locator('#counter-visible');
+		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index b1fcb1d2f4d6..bcffdc57236a 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -25,6 +25,19 @@ test.afterEach(async ({ astro }) => {
 test.only('React', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
+	await test.step('server only', async () => {
+		const counter = page.locator('#server-only');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('0');
+	});
+
 	await test.step('client:idle', async () => {
 		const counter = page.locator('#counter-idle');
 		await expect(counter).toBeVisible();
@@ -53,6 +66,7 @@ test.only('React', async ({ page, astro }) => {
 
 	await test.step('client:visible', async () => {
 		const counter = page.locator('#counter-visible');
+		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
index 2ba4449e4fb5..4a0250c4cfb5 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.js
@@ -25,6 +25,19 @@ test.afterEach(async ({ astro }) => {
 test.only('Solid', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
+	await test.step('server only', async () => {
+		const counter = page.locator('#server-only');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('0');
+	});
+
 	await test.step('client:idle', async () => {
 		const counter = page.locator('#counter-idle');
 		await expect(counter).toBeVisible();
@@ -53,6 +66,7 @@ test.only('Solid', async ({ page, astro }) => {
 
 	await test.step('client:visible', async () => {
 		const counter = page.locator('#counter-visible');
+		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index fdb47ab60fe9..87bf16252666 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -25,6 +25,19 @@ test.afterEach(async ({ astro }) => {
 test.only('Svelte', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
+	await test.step('server only', async () => {
+		const counter = page.locator('#server-only');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('0');
+	});
+
 	await test.step('client:idle', async () => {
 		const counter = page.locator('#counter-idle');
 		await expect(counter).toBeVisible();
@@ -53,6 +66,7 @@ test.only('Svelte', async ({ page, astro }) => {
 
 	await test.step('client:visible', async () => {
 		const counter = page.locator('#counter-visible');
+		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
index 7b55baf5ae15..6389556c14ae 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue.test.js
@@ -25,7 +25,7 @@ test.afterEach(async ({ astro }) => {
 test.only('Vue', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
-	await test.step('client:only', async () => {
+	await test.step('server only', async () => {
 		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
@@ -90,6 +90,7 @@ test.only('Vue', async ({ page, astro }) => {
 
 	await test.step('client:visible', async () => {
 		const counter = page.locator('#client-visible');
+		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 
 		await counter.scrollIntoViewIfNeeded();

From 03e0318bf41e105d18f7115b3b10646310acdca8 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 13:58:22 -0500
Subject: [PATCH 27/54] chore: cleaning up test element IDs

---
 .../astro/e2e/fixtures/lit/src/pages/index.astro     |  6 +++---
 .../astro/e2e/fixtures/lit/src/pages/media.astro     |  2 +-
 .../astro/e2e/fixtures/preact/src/pages/index.astro  |  8 ++++----
 .../astro/e2e/fixtures/react/src/pages/index.astro   |  8 ++++----
 .../astro/e2e/fixtures/solid/src/pages/index.astro   |  8 ++++----
 .../astro/e2e/fixtures/svelte/src/pages/index.astro  |  8 ++++----
 packages/astro/e2e/lit.test.js                       | 10 +++++-----
 packages/astro/e2e/preact.test.js                    | 12 ++++++------
 packages/astro/e2e/react.test.js                     | 12 ++++++------
 packages/astro/e2e/solid.test.js                     | 12 ++++++------
 packages/astro/e2e/svelte.test.js                    | 10 +++++-----
 11 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/astro/e2e/fixtures/lit/src/pages/index.astro b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
index 6bc21750539d..48eb7d2f9372 100644
--- a/packages/astro/e2e/fixtures/lit/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
@@ -11,15 +11,15 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
-		<my-counter id="counter-idle" {...someProps} client:idle>
+		<my-counter id="client-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</my-counter>
 
-		<my-counter id="counter-load" {...someProps} client:load>
+		<my-counter id="client-load" {...someProps} client:load>
 			<h1>Hello, client:load!</h1>
 		</my-counter>
 
-    <my-counter id="counter-visible" {...someProps} client:visible>
+    <my-counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</my-counter>
   </body>
diff --git a/packages/astro/e2e/fixtures/lit/src/pages/media.astro b/packages/astro/e2e/fixtures/lit/src/pages/media.astro
index 732aa54ea94b..e54cec071e8b 100644
--- a/packages/astro/e2e/fixtures/lit/src/pages/media.astro
+++ b/packages/astro/e2e/fixtures/lit/src/pages/media.astro
@@ -11,7 +11,7 @@ const someProps = {
     <!-- Head Stuff -->
   </head>
   <body>
-		<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+		<my-counter id="client-media" {...someProps} client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</my-counter>
   </body>
diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
index ab6c1e2a2d42..946b90be0622 100644
--- a/packages/astro/e2e/fixtures/preact/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
@@ -16,19 +16,19 @@ const someProps = {
 			<h1>Hello, server!</h1>
 		</Counter>
 
-		<Counter id="counter-idle" {...someProps} client:idle>
+		<Counter id="client-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
 
-		<Counter id="counter-load" {...someProps} client:load>
+		<Counter id="client-load" {...someProps} client:load>
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-    <Counter id="counter-visible" {...someProps} client:visible>
+    <Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
-		<Counter id="counter-media" {...someProps}  client:media="(max-width: 50em)">
+		<Counter id="client-media" {...someProps}  client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
 
diff --git a/packages/astro/e2e/fixtures/react/src/pages/index.astro b/packages/astro/e2e/fixtures/react/src/pages/index.astro
index d087be5bb333..388fc1d988c0 100644
--- a/packages/astro/e2e/fixtures/react/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react/src/pages/index.astro
@@ -16,19 +16,19 @@ const someProps = {
 			<h1>Hello, server!</h1>
 		</Counter>
 
-		<Counter id="counter-idle" {...someProps} client:idle>
+		<Counter id="client-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
 
-		<Counter id="counter-load" {...someProps} client:load>
+		<Counter id="client-load" {...someProps} client:load>
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-    <Counter id="counter-visible" {...someProps} client:visible>
+    <Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
-		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
 
diff --git a/packages/astro/e2e/fixtures/solid/src/pages/index.astro b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
index 70578fac5b00..91013ad0e1cb 100644
--- a/packages/astro/e2e/fixtures/solid/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
@@ -15,19 +15,19 @@ const someProps = {
 			<h1>Hello, server!</h1>
 		</Counter>
 
-		<Counter id="counter-idle" {...someProps} client:idle>
+		<Counter id="client-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
 
-		<Counter id="counter-load" {...someProps} client:load>
+		<Counter id="client-load" {...someProps} client:load>
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-    <Counter id="counter-visible" {...someProps} client:visible>
+    <Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
-		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
   </body>
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
index d253fc1d76b0..3c8117124707 100644
--- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -15,19 +15,19 @@ const someProps = {
 			<h1>Hello, server!</h1>
 		</Counter>
 
-		<Counter id="counter-idle" client:idle>
+		<Counter id="client-idle" client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
 
-		<Counter id="counter-load" client:load>
+		<Counter id="client-load" client:load>
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-		<Counter id="counter-visible" client:visible>
+		<Counter id="client-visible" client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
-		<Counter id="counter-media" client:media="(max-width: 50rem)">
+		<Counter id="client-media" client:media="(max-width: 50rem)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
   </body>
diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index bf900a669296..0083ec9774de 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -26,7 +26,7 @@ test.only('Lit', async ({ page, astro }) => {
 	await test.step('client:idle', async () => {
 		await page.goto(astro.resolveUrl('/'));
 	
-		const counter = page.locator('#counter-idle');
+		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('p');
@@ -41,7 +41,7 @@ test.only('Lit', async ({ page, astro }) => {
 	await test.step('client:load', async () => {
 		await page.goto(astro.resolveUrl('/'));
 	
-		const counter = page.locator('#counter-load');
+		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('p');
@@ -56,7 +56,7 @@ test.only('Lit', async ({ page, astro }) => {
 	await test.step('client:visible', async () => {
 		await page.goto(astro.resolveUrl('/'));
 	
-		const counter = page.locator('#counter-visible');
+		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
@@ -72,7 +72,7 @@ test.only('Lit', async ({ page, astro }) => {
 	await test.step('client:media', async () => {
 		await page.goto(astro.resolveUrl('/media'));
 	
-		const counter = page.locator('#counter-media');
+		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('p');
@@ -102,7 +102,7 @@ test.only('Lit', async ({ page, astro }) => {
 
 		await afterHMR;
 
-		const label = page.locator('#counter-idle h1');
+		const label = page.locator('#client-idle h1');
 		await expect(label).toHaveText('Hello, updated client:idle!')
 	});
 });
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index 2e44b5761536..c477ce4f9ef0 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -39,7 +39,7 @@ test.only('Preact', async ({ page, astro }) => {
 	});
 
 	await test.step('client:idle', async () => {
-		const counter = page.locator('#counter-idle');
+		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -52,7 +52,7 @@ test.only('Preact', async ({ page, astro }) => {
 	});
 
 	await test.step('client:load', async () => {
-		const counter = page.locator('#counter-load');
+		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -65,7 +65,7 @@ test.only('Preact', async ({ page, astro }) => {
 	});
 
 	await test.step('client:visible', async () => {
-		const counter = page.locator('#counter-visible');
+		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
@@ -79,7 +79,7 @@ test.only('Preact', async ({ page, astro }) => {
 	});
 
 	await test.step('client:media', async () => {
-		const counter = page.locator('#counter-media');
+		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -109,12 +109,12 @@ test.only('Preact', async ({ page, astro }) => {
 		// test 1: updating the page component
 		await astro.writeFile(
 			'src/pages/index.astro',
-			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
 		await afterHMR;
 
-		const count = page.locator('#counter-idle pre');
+		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
 		// test 2: updating the preact component
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index bcffdc57236a..faa4a25a7f00 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -39,7 +39,7 @@ test.only('React', async ({ page, astro }) => {
 	});
 
 	await test.step('client:idle', async () => {
-		const counter = page.locator('#counter-idle');
+		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -52,7 +52,7 @@ test.only('React', async ({ page, astro }) => {
 	});
 
 	await test.step('client:load', async () => {
-		const counter = page.locator('#counter-load');
+		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -65,7 +65,7 @@ test.only('React', async ({ page, astro }) => {
 	});
 
 	await test.step('client:visible', async () => {
-		const counter = page.locator('#counter-visible');
+		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
@@ -79,7 +79,7 @@ test.only('React', async ({ page, astro }) => {
 	});
 
 	await test.step('client:media', async () => {
-		const counter = page.locator('#counter-media');
+		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -109,12 +109,12 @@ test.only('React', async ({ page, astro }) => {
 		// test 1: updating the page component
 		await astro.writeFile(
 			'src/pages/index.astro',
-			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
 		await afterHMR;
 
-		const count = page.locator('#counter-idle pre');
+		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
 		// test 2: updating the react component
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
index 4a0250c4cfb5..2f0457b978a2 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.js
@@ -39,7 +39,7 @@ test.only('Solid', async ({ page, astro }) => {
 	});
 
 	await test.step('client:idle', async () => {
-		const counter = page.locator('#counter-idle');
+		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -52,7 +52,7 @@ test.only('Solid', async ({ page, astro }) => {
 	});
 
 	await test.step('client:load', async () => {
-		const counter = page.locator('#counter-load');
+		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -65,7 +65,7 @@ test.only('Solid', async ({ page, astro }) => {
 	});
 
 	await test.step('client:visible', async () => {
-		const counter = page.locator('#counter-visible');
+		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
@@ -79,7 +79,7 @@ test.only('Solid', async ({ page, astro }) => {
 	});
 
 	await test.step('client:media', async () => {
-		const counter = page.locator('#counter-media');
+		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -102,12 +102,12 @@ test.only('Solid', async ({ page, astro }) => {
 		// test 1: updating the page component
 		await astro.writeFile(
 			'src/pages/index.astro',
-			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
 		await afterHMR;
 
-		const count = page.locator('#counter-idle pre');
+		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
 		// test 2: updating imported CSS
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index 87bf16252666..135d8f85513e 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -39,7 +39,7 @@ test.only('Svelte', async ({ page, astro }) => {
 	});
 
 	await test.step('client:idle', async () => {
-		const counter = page.locator('#counter-idle');
+		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -52,7 +52,7 @@ test.only('Svelte', async ({ page, astro }) => {
 	});
 
 	await test.step('client:load', async () => {
-		const counter = page.locator('#counter-load');
+		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -65,7 +65,7 @@ test.only('Svelte', async ({ page, astro }) => {
 	});
 
 	await test.step('client:visible', async () => {
-		const counter = page.locator('#counter-visible');
+		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
 		
@@ -79,7 +79,7 @@ test.only('Svelte', async ({ page, astro }) => {
 	});
 
 	await test.step('client:media', async () => {
-		const counter = page.locator('#counter-media');
+		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
 		const count = counter.locator('pre');
@@ -107,7 +107,7 @@ test.only('Svelte', async ({ page, astro }) => {
 
 		await afterHMR;
 
-		const label = page.locator('#counter-idle-message');
+		const label = page.locator('#client-idle-message');
 		await expect(label).toHaveText('Hello, updated client:idle!');
 	});
 });

From 59cfcddcd6bc199489d90b0df66968657966f1b5 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 14:02:23 -0500
Subject: [PATCH 28/54] chore: updating lock file

---
 packages/astro/e2e/fixtures/solid/package.json | 6 ++++--
 pnpm-lock.yaml                                 | 9 +++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/astro/e2e/fixtures/solid/package.json b/packages/astro/e2e/fixtures/solid/package.json
index d95d4629f681..d3e6b63e6672 100644
--- a/packages/astro/e2e/fixtures/solid/package.json
+++ b/packages/astro/e2e/fixtures/solid/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "dependencies": {
     "@astrojs/solid-js": "workspace:*",
-    "astro": "workspace:*",
-    "solid-js": "^1.3.17"
+    "astro": "workspace:*"
+  },
+  "devDependencies": {
+    "solid-js": "^1.4.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b90f6e80c4f..f035f5d69915 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -699,11 +699,12 @@ importers:
     specifiers:
       '@astrojs/solid-js': workspace:*
       astro: workspace:*
-      solid-js: ^1.3.17
+      solid-js: ^1.4.1
     dependencies:
       '@astrojs/solid-js': link:../../../../integrations/solid
       astro: link:../../..
-      solid-js: 1.3.17
+    devDependencies:
+      solid-js: 1.4.1
 
   packages/astro/e2e/fixtures/svelte:
     specifiers:
@@ -10480,6 +10481,10 @@ packages:
   /solid-js/1.3.17:
     resolution: {integrity: sha512-BFCosxa4hRm+LF7S+kBL5bNr4RtuZif6AaR5FdQkBpV1E6QNLAOFm4HWgEN8vL2aCWEKl384cT8Etw8ziW8aag==}
 
+  /solid-js/1.4.1:
+    resolution: {integrity: sha512-ts480PccmUW9WAludSXET2dbBevjv+l6XMmN/OyG/a/xA8ZQoX4hNBN3gGhW785ZZv90fowbUSuSQUwOISm3YA==}
+    dev: true
+
   /solid-nanostores/0.0.6:
     resolution: {integrity: sha512-iwbgdBzQSxBKoxkzaZgC9MGGUsHWJ74at9i7FF0naoqtwGuKdLYOgOJ9QRlA353DHDS/ttH2e0SRS6s3gz8NLQ==}
     dependencies:

From a84b5f4cb722923010b21699b65b18f378b5dbc6 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 14:07:32 -0500
Subject: [PATCH 29/54] chore: update lockfile after merge

---
 pnpm-lock.yaml | 191 +++++++++++++++++++++++++------------------------
 1 file changed, 98 insertions(+), 93 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4692e9e0acad..fbf0768fe127 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1938,7 +1938,7 @@ packages:
     resolution: {integrity: sha512-rgi3g078uAxdb8jg1A5U8sNWMUQq7UXwHT7qmPiGOeB+h5p+tzUFy/Awq2suv99Tq8efpn3HrAGTuDvxyvbwfg==}
     dependencies:
       svelte: 3.48.0
-      svelte2tsx: 0.5.10_wwvk7nlptlrqo2czohjtk6eiqm
+      svelte2tsx: 0.5.9_wwvk7nlptlrqo2czohjtk6eiqm
     transitivePeerDependencies:
       - typescript
     dev: false
@@ -3618,7 +3618,7 @@ packages:
     dependencies:
       '@lit-labs/ssr-client': 1.0.1
       '@lit/reactive-element': 1.3.2
-      '@types/node': 16.11.35
+      '@types/node': 16.11.34
       lit: 2.2.3
       lit-element: 3.2.0
       lit-html: 2.2.3
@@ -3641,7 +3641,7 @@ packages:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
       '@babel/runtime': 7.17.9
-      '@types/node': 12.20.52
+      '@types/node': 12.20.51
       find-up: 4.1.0
       fs-extra: 8.1.0
     dev: true
@@ -3891,7 +3891,7 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@rollup/plugin-babel/5.3.1_5ey36jajczjbmcqmomvpimwrdu:
+  /@rollup/plugin-babel/5.3.1_ddp4whfhauf2n5cf6yj7gaerwe:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -3906,8 +3906,8 @@ packages:
     dependencies:
       '@babel/core': 7.17.10
       '@babel/helper-module-imports': 7.16.7
-      '@rollup/pluginutils': 3.1.0_rollup@2.73.0
-      rollup: 2.73.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.72.1
+      rollup: 2.72.1
     dev: true
 
   /@rollup/plugin-inject/4.0.4_rollup@2.73.0:
@@ -3921,19 +3921,19 @@ packages:
       rollup: 2.73.0
     dev: true
 
-  /@rollup/plugin-node-resolve/11.2.1_rollup@2.73.0:
+  /@rollup/plugin-node-resolve/11.2.1_rollup@2.72.1:
     resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.73.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.72.1
       '@types/resolve': 1.17.1
       builtin-modules: 3.3.0
       deepmerge: 4.2.2
       is-module: 1.0.0
       resolve: 1.22.0
-      rollup: 2.73.0
+      rollup: 2.72.1
     dev: true
 
   /@rollup/plugin-node-resolve/13.3.0_rollup@2.73.0:
@@ -3951,14 +3951,14 @@ packages:
       rollup: 2.73.0
     dev: true
 
-  /@rollup/plugin-replace/2.4.2_rollup@2.73.0:
+  /@rollup/plugin-replace/2.4.2_rollup@2.72.1:
     resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.73.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.72.1
       magic-string: 0.25.9
-      rollup: 2.73.0
+      rollup: 2.72.1
     dev: true
 
   /@rollup/plugin-typescript/8.3.2_qvmxwb53ll4ofwdq3bekbs74hi:
@@ -3976,6 +3976,18 @@ packages:
       typescript: 4.6.4
     dev: true
 
+  /@rollup/pluginutils/3.1.0_rollup@2.72.1:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.72.1
+    dev: true
+
   /@rollup/pluginutils/3.1.0_rollup@2.73.0:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
@@ -4086,7 +4098,7 @@ packages:
   /@types/connect/3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: true
 
   /@types/debug/4.1.7:
@@ -4127,7 +4139,7 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 3.0.5
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: true
 
   /@types/hast/2.3.4:
@@ -4191,20 +4203,20 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
-  /@types/node/12.20.52:
-    resolution: {integrity: sha512-cfkwWw72849SNYp3Zx0IcIs25vABmFh73xicxhCkTcvtZQeIez15PpwQN8fY3RD7gv1Wrxlc9MEtfMORZDEsGw==}
+  /@types/node/12.20.51:
+    resolution: {integrity: sha512-anVDMfReTatfH8GVmHmaTZOL0jeTLNZ9wK9SSrQS3tMmn4vUc+9fVWlUzAieuQefWDyWUz4Z3aqXxDgO1VsYjg==}
     dev: true
 
   /@types/node/14.18.18:
     resolution: {integrity: sha512-B9EoJFjhqcQ9OmQrNorItO+OwEOORNn3S31WuiHvZY/dm9ajkB7AKD/8toessEtHHNL+58jofbq7hMMY9v4yig==}
     dev: true
 
-  /@types/node/16.11.35:
-    resolution: {integrity: sha512-QXu45LyepgnhUfnIAj/FyT4uM87ug5KpIrgXfQtUPNAlx8w5hmd8z8emqCLNvG11QkpRSCG9Qg2buMxvqfjfsQ==}
+  /@types/node/16.11.34:
+    resolution: {integrity: sha512-UrWGDyLAlQ2Z8bNOGWTsqbP9ZcBeTYBVuTRNxXTztBy5KhWUFI3BaeDWoCP/CzV/EVGgO1NTYzv9ZytBI9GAEw==}
     dev: false
 
-  /@types/node/17.0.33:
-    resolution: {integrity: sha512-miWq2m2FiQZmaHfdZNcbpp9PuXg34W5JZ5CrJ/BaS70VuhoJENBEQybeiYSaPBRNq6KQGnjfEnc/F3PN++D+XQ==}
+  /@types/node/17.0.32:
+    resolution: {integrity: sha512-eAIcfAvhf/BkHcf4pkLJ7ECpBAhh9kcxRBpip9cTiO+hf+aJrsxYxBeS6OXvOd9WqNAJmavXVpZvY1rBjNsXmw==}
 
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -4228,7 +4240,7 @@ packages:
   /@types/prompts/2.0.14:
     resolution: {integrity: sha512-HZBd99fKxRWpYCErtm2/yxUZv6/PBI9J7N4TNFffl5JbrYMHBwF25DjQGTW3b3jmXq+9P6/8fCIb2ee57BFfYA==}
     dependencies:
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: false
 
   /@types/prop-types/15.7.5:
@@ -4268,7 +4280,7 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 14.18.18
+      '@types/node': 17.0.32
     dev: true
 
   /@types/resolve/1.20.2:
@@ -4278,19 +4290,19 @@ packages:
     resolution: {integrity: sha512-F3OznnSLAUxFrCEu/L5PY8+ny8DtcFRjx7fZZ9bycvXRi3KPTRS9HOitGZwvPg0juRhXFWIeKX58cnX5YqLohQ==}
     dependencies:
       '@types/glob': 7.2.0
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: true
 
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: false
 
   /@types/sax/1.2.4:
     resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
     dependencies:
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: false
 
   /@types/scheduler/0.16.2:
@@ -4304,7 +4316,7 @@ packages:
     resolution: {integrity: sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==}
     dependencies:
       '@types/mime': 1.3.2
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
     dev: true
 
   /@types/tailwindcss/3.0.10:
@@ -4557,7 +4569,7 @@ packages:
       acorn: 8.7.1
       bindings: 1.5.0
       estree-walker: 2.0.2
-      glob: 7.2.3
+      glob: 7.2.0
       graceful-fs: 4.2.10
       micromatch: 4.0.5
       node-gyp-build: 4.4.0
@@ -4805,13 +4817,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /ansi-colors/4.1.2:
-    resolution: {integrity: sha512-cEG18jjLG0O74o/33eEfnmtXYDEY196ZjL0eQEISULF+Imi7vr25l6ntGYmqS5lIrQIEeze+CqUtPVItywE7ZQ==}
-    engines: {node: '>=6'}
-    dev: true
-
   /ansi-regex/2.1.1:
-    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
+    resolution: {integrity: sha1-w7M6te42DYbg5ijwRorn7yfWVN8=}
     engines: {node: '>=0.10.0'}
 
   /ansi-regex/5.0.1:
@@ -4895,7 +4902,7 @@ packages:
     dev: false
 
   /arrify/1.0.1:
-    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
+    resolution: {integrity: sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=}
     engines: {node: '>=0.10.0'}
     dev: true
 
@@ -4943,7 +4950,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.20.3
-      caniuse-lite: 1.0.30001341
+      caniuse-lite: 1.0.30001340
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -5075,7 +5082,7 @@ packages:
     dev: false
 
   /boolbase/1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    resolution: {integrity: sha1-aN/1++YMUes3cl6p4+0xDcwed24=}
 
   /boxen/6.2.1:
     resolution: {integrity: sha512-H4PEsJXfFI/Pt8sjDWbHlQPx4zL/bvSQjcilJmaulGt5mLDorHOHpmdXAJcBcmru7PhYSp/cDMWRko4ZUMFkSw==}
@@ -5124,14 +5131,14 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001341
+      caniuse-lite: 1.0.30001340
       electron-to-chromium: 1.4.137
       escalade: 3.1.1
       node-releases: 2.0.4
       picocolors: 1.0.0
 
   /buffer-crc32/0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+    resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
     dev: false
 
   /buffer-from/1.1.2:
@@ -5200,8 +5207,8 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
-  /caniuse-lite/1.0.30001341:
-    resolution: {integrity: sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==}
+  /caniuse-lite/1.0.30001340:
+    resolution: {integrity: sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==}
 
   /canvas-confetti/1.5.1:
     resolution: {integrity: sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==}
@@ -5282,7 +5289,7 @@ packages:
     dev: true
 
   /check-error/1.0.2:
-    resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
+    resolution: {integrity: sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=}
     dev: true
 
   /cheerio-select/1.6.0:
@@ -5584,11 +5591,6 @@ packages:
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
     dev: false
@@ -5861,7 +5863,7 @@ packages:
     resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
     engines: {node: '>=8.6'}
     dependencies:
-      ansi-colors: 4.1.2
+      ansi-colors: 4.1.1
     dev: true
 
   /entities/2.2.0:
@@ -6506,10 +6508,8 @@ packages:
     resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==}
     dev: true
 
-  /for-each/0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.4
+  /foreach/2.0.6:
+    resolution: {integrity: sha512-k6GAGDyqLe9JaebCsFCoudPPWfihKu8pylYXRlqP1J7ms39iPoTtk2fviNglIeQEwdh0bQeKJ01ZPyuyQvKzwg==}
     dev: false
 
   /formdata-polyfill/4.0.10:
@@ -6707,17 +6707,6 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
-    dev: true
-
-  /glob/7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
 
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -7378,14 +7367,14 @@ packages:
     dependencies:
       has-symbols: 1.0.3
 
-  /is-typed-array/1.1.9:
-    resolution: {integrity: sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==}
+  /is-typed-array/1.1.8:
+    resolution: {integrity: sha512-HqH41TNZq2fgtGT8WHVFVJhBVGuY3AnP3Q36K8JKXUxSxRgk/d+7NjmwG2vo2mYmXK8UYZKu0qH8bVP5gEisjA==}
     engines: {node: '>= 0.4'}
     dependencies:
       available-typed-arrays: 1.0.5
       call-bind: 1.0.2
       es-abstract: 1.20.0
-      for-each: 0.3.3
+      foreach: 2.0.6
       has-tostringtag: 1.0.0
     dev: false
 
@@ -7440,7 +7429,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 14.18.18
+      '@types/node': 17.0.32
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -8395,8 +8384,6 @@ packages:
       debug: 3.2.7
       iconv-lite: 0.4.24
       sax: 1.2.4
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /netmask/2.0.2:
@@ -8479,8 +8466,6 @@ packages:
       rimraf: 2.7.1
       semver: 5.7.1
       tar: 4.4.19
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /node-releases/2.0.4:
@@ -9500,13 +9485,25 @@ packages:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
     hasBin: true
     dependencies:
-      glob: 7.2.3
+      glob: 7.2.0
 
   /rimraf/3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
     dependencies:
-      glob: 7.2.3
+      glob: 7.2.0
+
+  /rollup-plugin-terser/7.0.2_rollup@2.72.1:
+    resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
+    peerDependencies:
+      rollup: ^2.0.0
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      jest-worker: 26.6.2
+      rollup: 2.72.1
+      serialize-javascript: 4.0.0
+      terser: 5.13.1
+    dev: true
 
   /rollup-plugin-terser/7.0.2_rollup@2.73.0:
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
@@ -9526,6 +9523,14 @@ packages:
       estree-walker: 0.6.1
     dev: false
 
+  /rollup/2.72.1:
+    resolution: {integrity: sha512-NTc5UGy/NWFGpSqF1lFY8z9Adri6uhyMLI6LvPAXdBKoPRFhIIiBUpt+Qg2awixqO3xvzSijjhnb4+QEZwJmxA==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /rollup/2.73.0:
     resolution: {integrity: sha512-h/UngC3S4Zt28mB3g0+2YCMegT5yoftnQplwzPqGZcKvlld5e+kT/QRmJiL+qxGyZKOYpgirWGdLyEO1b0dpLQ==}
     engines: {node: '>=10.0.0'}
@@ -9744,7 +9749,7 @@ packages:
     engines: {node: '>=12.0.0', npm: '>=5.6.0'}
     hasBin: true
     dependencies:
-      '@types/node': 17.0.33
+      '@types/node': 17.0.32
       '@types/sax': 1.2.4
       arg: 5.0.1
       sax: 1.2.4
@@ -9801,18 +9806,18 @@ packages:
       smart-buffer: 4.2.0
     dev: true
 
-  /solid-js/1.4.1:
-    resolution: {integrity: sha512-ts480PccmUW9WAludSXET2dbBevjv+l6XMmN/OyG/a/xA8ZQoX4hNBN3gGhW785ZZv90fowbUSuSQUwOISm3YA==}
+  /solid-js/1.3.17:
+    resolution: {integrity: sha512-BFCosxa4hRm+LF7S+kBL5bNr4RtuZif6AaR5FdQkBpV1E6QNLAOFm4HWgEN8vL2aCWEKl384cT8Etw8ziW8aag==}
+    dev: false
 
   /solid-js/1.4.1:
     resolution: {integrity: sha512-ts480PccmUW9WAludSXET2dbBevjv+l6XMmN/OyG/a/xA8ZQoX4hNBN3gGhW785ZZv90fowbUSuSQUwOISm3YA==}
-    dev: true
 
   /solid-nanostores/0.0.6:
     resolution: {integrity: sha512-iwbgdBzQSxBKoxkzaZgC9MGGUsHWJ74at9i7FF0naoqtwGuKdLYOgOJ9QRlA353DHDS/ttH2e0SRS6s3gz8NLQ==}
     dependencies:
       nanostores: 0.5.12
-      solid-js: 1.4.1
+      solid-js: 1.3.17
     dev: false
 
   /sorcery/0.10.0:
@@ -10157,8 +10162,8 @@ packages:
     resolution: {integrity: sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==}
     engines: {node: '>= 8'}
 
-  /svelte2tsx/0.5.10_wwvk7nlptlrqo2czohjtk6eiqm:
-    resolution: {integrity: sha512-nokQ0HTTWMcNX6tLrDLiOmJCuqjKZU9nCZ6/mVuCL3nusXdbp+9nv69VG2pCy7uQC66kV4Ls+j0WfvvJuGVnkg==}
+  /svelte2tsx/0.5.9_wwvk7nlptlrqo2czohjtk6eiqm:
+    resolution: {integrity: sha512-xTDASjlh+rKo4QRhTRYSH87sS7fRoyX67xhGIMPKa3FYqftRHRmMes6nVgEskiuhBovslNHYYpMMg5YM5n/STg==}
     peerDependencies:
       svelte: ^3.24
       typescript: ^4.1.2
@@ -10782,9 +10787,9 @@ packages:
       inherits: 2.0.4
       is-arguments: 1.1.1
       is-generator-function: 1.0.10
-      is-typed-array: 1.1.9
+      is-typed-array: 1.1.8
       safe-buffer: 5.2.1
-      which-typed-array: 1.1.8
+      which-typed-array: 1.1.7
     dev: false
 
   /uvu/0.5.3:
@@ -10849,7 +10854,7 @@ packages:
       debug: 4.3.4
       fast-glob: 3.2.11
       pretty-bytes: 5.6.0
-      rollup: 2.73.0
+      rollup: 2.72.1
       workbox-build: 6.5.3
       workbox-window: 6.5.3
     transitivePeerDependencies:
@@ -11059,16 +11064,16 @@ packages:
       load-yaml-file: 0.2.0
       path-exists: 4.0.0
 
-  /which-typed-array/1.1.8:
-    resolution: {integrity: sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==}
+  /which-typed-array/1.1.7:
+    resolution: {integrity: sha512-vjxaB4nfDqwKI0ws7wZpxIlde1XrLX5uB0ZjpfshgmapJMD7jJWhZI+yToJTqaFByF0eNBcYxbjmCzoRP7CfEw==}
     engines: {node: '>= 0.4'}
     dependencies:
       available-typed-arrays: 1.0.5
       call-bind: 1.0.2
       es-abstract: 1.20.0
-      for-each: 0.3.3
+      foreach: 2.0.6
       has-tostringtag: 1.0.0
-      is-typed-array: 1.1.9
+      is-typed-array: 1.1.8
     dev: false
 
   /which/1.3.1:
@@ -11088,7 +11093,7 @@ packages:
   /wide-align/1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
     dependencies:
-      string-width: 1.0.2
+      string-width: 4.2.3
 
   /widest-line/4.0.1:
     resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
@@ -11123,19 +11128,19 @@ packages:
       '@babel/core': 7.17.10
       '@babel/preset-env': 7.17.10_@babel+core@7.17.10
       '@babel/runtime': 7.17.9
-      '@rollup/plugin-babel': 5.3.1_5ey36jajczjbmcqmomvpimwrdu
-      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.73.0
-      '@rollup/plugin-replace': 2.4.2_rollup@2.73.0
+      '@rollup/plugin-babel': 5.3.1_ddp4whfhauf2n5cf6yj7gaerwe
+      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.72.1
+      '@rollup/plugin-replace': 2.4.2_rollup@2.72.1
       '@surma/rollup-plugin-off-main-thread': 2.2.3
       ajv: 8.11.0
       common-tags: 1.8.2
       fast-json-stable-stringify: 2.1.0
       fs-extra: 9.1.0
-      glob: 7.2.3
+      glob: 7.2.0
       lodash: 4.17.21
       pretty-bytes: 5.6.0
-      rollup: 2.73.0
-      rollup-plugin-terser: 7.0.2_rollup@2.73.0
+      rollup: 2.72.1
+      rollup-plugin-terser: 7.0.2_rollup@2.72.1
       source-map: 0.8.0-beta.0
       stringify-object: 3.3.0
       strip-comments: 2.0.1

From ed1bad9cbc870a08bf86adc6256f2ffe31f82da8 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 14:28:41 -0500
Subject: [PATCH 30/54] TEMP: disabling React e2e tests

---
 packages/astro/e2e/react.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index faa4a25a7f00..7812d052bc5a 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -22,7 +22,7 @@ test.afterEach(async ({ astro }) => {
 	astro.clean();
 });
 
-test.only('React', async ({ page, astro }) => {
+test.skip('React', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
 	await test.step('server only', async () => {

From fa5ff21dee083d7abb3ba751a4873579fbf9de05 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 16 May 2022 14:35:03 -0500
Subject: [PATCH 31/54] Revert "TEMP: disabling React e2e tests"

This reverts commit ed1bad9cbc870a08bf86adc6256f2ffe31f82da8.
---
 packages/astro/e2e/react.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index 7812d052bc5a..faa4a25a7f00 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -22,7 +22,7 @@ test.afterEach(async ({ astro }) => {
 	astro.clean();
 });
 
-test.skip('React', async ({ page, astro }) => {
+test.only('React', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
 	await test.step('server only', async () => {

From a2bc0650cf1e36700b06a8b4d25fc01d199bd667 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 17 May 2022 11:13:10 -0500
Subject: [PATCH 32/54] updating to use the new editFiles helper

---
 packages/astro/e2e/lit.test.js           | 10 ++++------
 packages/astro/e2e/preact.test.js        | 20 +++++++++-----------
 packages/astro/e2e/react.test.js         | 20 +++++++++-----------
 packages/astro/e2e/solid.test.js         | 16 ++++++++--------
 packages/astro/e2e/svelte.test.js        | 10 ++++------
 packages/astro/e2e/tailwindcss.test.js   | 10 ++++------
 packages/astro/e2e/test-utils.js         |  3 ---
 packages/astro/e2e/vue.test.js           | 10 ++++------
 packages/astro/src/runtime/client/hmr.ts |  6 +-----
 packages/astro/test/test-utils.js        | 18 ++++--------------
 10 files changed, 47 insertions(+), 76 deletions(-)

diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index 0083ec9774de..3aee984ed530 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -91,16 +91,14 @@ test.only('Lit', async ({ page, astro }) => {
 
 	await test.step('HMR', async () => {
 		await page.goto(astro.resolveUrl('/'));
-	
-		const afterHMR = onAfterHMR(page);
 
 		// test 1: updating the page component
-		await astro.writeFile(
-			'src/pages/index.astro',
+		await astro.editFile(
+			'./src/pages/index.astro',
 			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const label = page.locator('#client-idle h1');
 		await expect(label).toHaveText('Hello, updated client:idle!')
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index c477ce4f9ef0..08bc437f2fef 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -104,26 +104,24 @@ test.only('Preact', async ({ page, astro }) => {
 	});
 
 	await test.step('HMR', async () => {
-		const afterHMR = onAfterHMR(page);
-
 		// test 1: updating the page component
-		await astro.writeFile(
-			'src/pages/index.astro',
+		await astro.editFile(
+			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
 		// test 2: updating the preact component
-		await astro.writeFile(
-			'src/components/JSXComponent.jsx',
+		await astro.editFile(
+			'./src/components/JSXComponent.jsx',
 			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
@@ -131,8 +129,8 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(label).toHaveText('Updated preact client:only component');
 
 		// test 3: updating imported CSS
-		await astro.writeFile(
-			'src/components/Counter.css',
+		await astro.editFile(
+			'./src/components/Counter.css',
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index faa4a25a7f00..eb42dba5005b 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -104,26 +104,24 @@ test.only('React', async ({ page, astro }) => {
 	});
 
 	await test.step('HMR', async () => {
-		const afterHMR = onAfterHMR(page);
-
 		// test 1: updating the page component
-		await astro.writeFile(
-			'src/pages/index.astro',
+		await astro.editFile(
+			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
 		// test 2: updating the react component
-		await astro.writeFile(
-			'src/components/JSXComponent.jsx',
+		await astro.editFile(
+			'./src/components/JSXComponent.jsx',
 			(original) => original.replace('React client:only component', 'Updated react client:only component')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
@@ -131,8 +129,8 @@ test.only('React', async ({ page, astro }) => {
 		await expect(label).toHaveText('Updated react client:only component');
 
 		// test 3: updating imported CSS
-		await astro.writeFile(
-			'src/components/Counter.css',
+		await astro.editFile(
+			'./src/components/Counter.css',
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
index 2f0457b978a2..c63ba208344e 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -97,25 +97,25 @@ test.only('Solid', async ({ page, astro }) => {
 	});
 
 	await test.step('HMR', async () => {
-		const afterHMR = onAfterHMR(page);
-
 		// test 1: updating the page component
-		await astro.writeFile(
-			'src/pages/index.astro',
+		await astro.editFile(
+			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
 		// test 2: updating imported CSS
-		await astro.writeFile(
-			'src/components/Counter.css',
+		await astro.editFile(
+			'./src/components/Counter.css',
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
+		await astro.onNextChange();
+
 		await expect(count).toHaveCSS('font-size', '24px');
 	});
 });
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index 135d8f85513e..cbe15bf6d8ef 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -97,15 +97,13 @@ test.only('Svelte', async ({ page, astro }) => {
 	});
 
 	await test.step('HMR', async () => {
-		const afterHMR = onAfterHMR(page);
-
 		// test 1: updating the page component
-		await astro.writeFile(
-			'src/pages/index.astro',
+		await astro.editFile(
+			'./src/pages/index.astro',
 			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const label = page.locator('#client-idle-message');
 		await expect(label).toHaveText('Hello, updated client:idle!');
diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index 0de09e855924..f11931336b5f 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -54,14 +54,12 @@ test('Tailwind CSS', async ({ page, astro }) => {
 	});
 
 	await test.step('HMR', async () => {
-		const afterHMR = onAfterHMR(page);
-
-		await astro.writeFile(
-			'src/components/Button.astro',
+		await astro.editFile(
+			'./src/components/Button.astro',
 			(original) => original.replace('bg-purple-600', 'bg-purple-400')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const button = page.locator('button');
 		
diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 66eafa8fdbe0..5628bd575e21 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -12,6 +12,3 @@ export function loadFixture(inlineConfig) {
 	});
 }
 
-export function onAfterHMR(page) {
-	return page.waitForEvent('console', message => message.text() === 'astro:hmr:after')
-}
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
index 6389556c14ae..4a0fea47ceaa 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture, onAfterHMR } from './test-utils.js';
+import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -123,15 +123,13 @@ test.only('Vue', async ({ page, astro }) => {
 	});
 
 	await test.step('HMR', async () => {
-		const afterHMR = onAfterHMR(page);
-
 		// test 1: updating the page component
-		await astro.writeFile(
-			'src/pages/index.astro',
+		await astro.editFile(
+			'./src/pages/index.astro',
 			(original) => original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
 		);
 
-		await afterHMR;
+		await astro.onNextChange();
 
 		const label = page.locator('#client-visible h1');
 		await expect(label).toHaveText('Hello, updated client:visible!');
diff --git a/packages/astro/src/runtime/client/hmr.ts b/packages/astro/src/runtime/client/hmr.ts
index 119ba8754623..8a0512f26cea 100644
--- a/packages/astro/src/runtime/client/hmr.ts
+++ b/packages/astro/src/runtime/client/hmr.ts
@@ -14,11 +14,7 @@ if (import.meta.hot) {
 				root.innerHTML = current?.innerHTML;
 			}
 		}
-		const result = diff(document, doc);
-
-		// event used for synchronizing E2E tests
-		console.log('astro:hmr:after');
-		return result;
+		return diff(document, doc);
 	}
 	async function updateAll(files: any[]) {
 		let hasAstroUpdate = false;
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 30b4ebad5c46..7776a33c2376 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -97,17 +97,6 @@ export async function loadFixture(inlineConfig) {
 
 	const resolveUrl = (url) =>
 		`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`;
-
-	let cleanupCallbacks = [];
-
-	async function writeFile(filePath, updater) {
-		const pathname = new URL(filePath.replace(/^\//, ''), config.root);
-		const initial = await fs.promises.readFile(pathname, 'utf8');
-		
-		await fs.promises.writeFile(pathname, updater(initial), 'utf-8');
-
-		cleanupCallbacks.push(() => fs.promises.writeFile(pathname, initial, 'utf-8'));
-	}
 	
 	// A map of files that have been editted.
 	let fileEdits = new Map();
@@ -144,18 +133,16 @@ export async function loadFixture(inlineConfig) {
 		},
 		readFile: (filePath) =>
 			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
-		writeFile,
 		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
 		clean: async () => {
 			await fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true });
-			await Promise.all(cleanupCallbacks.map(cb => cb()));
 		},
 		loadTestAdapterApp: async () => {
 			const url = new URL('./server/entry.mjs', config.outDir);
 			const { createApp } = await import(url);
 			return createApp();
 		},
-		editFile: async (filePath, newContents) => {
+		editFile: async (filePath, newContentsOrCallback) => {
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
 			const reset = () => fs.writeFileSync(fileUrl, contents);
@@ -164,6 +151,9 @@ export async function loadFixture(inlineConfig) {
 			if (!fileEdits.has(fileUrl.toString())) {
 				fileEdits.set(fileUrl.toString(), reset);
 			}
+			const newContents = typeof newContentsOrCallback === 'function'
+				? newContentsOrCallback(contents)
+				: newContentsOrCallback;
 			await fs.promises.writeFile(fileUrl, newContents);
 			return reset;
 		},

From 6a629f7986d294f414568c1a0ff4a1134c223f38 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Wed, 18 May 2022 10:33:57 -0500
Subject: [PATCH 33/54] chore: updating lock file

---
 pnpm-lock.yaml | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e36c86f93685..9687984f65cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -671,7 +671,13 @@ importers:
       '@astrojs/lit': link:../../../../integrations/lit
       '@webcomponents/template-shadowroot': 0.1.0
       astro: link:../../..
-      lit: 2.2.3
+      lit: 2.2.4
+
+  packages/astro/e2e/fixtures/nested-styles:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
 
   packages/astro/e2e/fixtures/preact:
     specifiers:
@@ -3618,7 +3624,7 @@ packages:
       '@lit-labs/ssr-client': 1.0.1
       '@lit/reactive-element': 1.3.2
       '@types/node': 16.11.34
-      lit: 2.2.3
+      lit: 2.2.4
       lit-element: 3.2.0
       lit-html: 2.2.4
       node-fetch: 2.6.7
@@ -3890,7 +3896,7 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@rollup/plugin-babel/5.3.1_ddp4whfhauf2n5cf6yj7gaerwe:
+  /@rollup/plugin-babel/5.3.1_pyhastprz45ufttge6avwpm7iy:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -7372,7 +7378,7 @@ packages:
     dependencies:
       available-typed-arrays: 1.0.5
       call-bind: 1.0.2
-      es-abstract: 1.20.0
+      es-abstract: 1.20.1
       foreach: 2.0.6
       has-tostringtag: 1.0.0
     dev: false
@@ -11069,7 +11075,7 @@ packages:
     dependencies:
       available-typed-arrays: 1.0.5
       call-bind: 1.0.2
-      es-abstract: 1.20.0
+      es-abstract: 1.20.1
       foreach: 2.0.6
       has-tostringtag: 1.0.0
       is-typed-array: 1.1.8
@@ -11127,7 +11133,7 @@ packages:
       '@babel/core': 7.17.12
       '@babel/preset-env': 7.17.12_@babel+core@7.17.12
       '@babel/runtime': 7.17.9
-      '@rollup/plugin-babel': 5.3.1_ddp4whfhauf2n5cf6yj7gaerwe
+      '@rollup/plugin-babel': 5.3.1_pyhastprz45ufttge6avwpm7iy
       '@rollup/plugin-node-resolve': 11.2.1_rollup@2.72.1
       '@rollup/plugin-replace': 2.4.2_rollup@2.72.1
       '@surma/rollup-plugin-off-main-thread': 2.2.3

From 6e6253330ea2651b0bda276c405f8c585fa0361a Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 22:46:12 -0500
Subject: [PATCH 34/54] updating lock file

---
 pnpm-lock.yaml | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b68b740384dd..95dd166bd9b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3803,7 +3803,7 @@ packages:
   /@manypkg/find-root/1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
-      '@babel/runtime': 7.17.9
+      '@babel/runtime': 7.18.0
       '@types/node': 12.20.51
       find-up: 4.1.0
       fs-extra: 8.1.0
@@ -6088,7 +6088,7 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@rollup/plugin-babel/5.3.1_pyhastprz45ufttge6avwpm7iy:
+  /@rollup/plugin-babel/5.3.1_3gvlzenj6qraw2ojvkgevxalie:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -6185,7 +6185,7 @@ packages:
       rollup: 2.72.1
     dev: true
 
-  /@rollup/pluginutils/3.1.0_rollup@2.74.0:
+  /@rollup/pluginutils/3.1.0_rollup@2.74.1:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
@@ -7821,11 +7821,6 @@ packages:
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
     dev: false
@@ -10634,8 +10629,6 @@ packages:
       debug: 3.2.7
       iconv-lite: 0.4.24
       sax: 1.2.4
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /netmask/2.0.2:
@@ -10718,8 +10711,6 @@ packages:
       rimraf: 2.7.1
       semver: 5.7.1
       tar: 4.4.19
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /node-releases/2.0.4:
@@ -11814,8 +11805,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup/2.74.0:
-    resolution: {integrity: sha512-RRwXTX5+ObPJhcMV6zP3RdHvy90/lBOUfbzL7IKkFjMJGAqeBGZiv9nZWm/DoTESaTE3GBkkzbU9QVN2AuCkjw==}
+  /rollup/2.74.1:
+    resolution: {integrity: sha512-K2zW7kV8Voua5eGkbnBtWYfMIhYhT9Pel2uhBk2WO5eMee161nPze/XRfvEQPFYz7KgrCCnmh2Wy0AMFLGGmMA==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
@@ -13412,10 +13403,10 @@ packages:
     engines: {node: '>=10.0.0'}
     dependencies:
       '@apideck/better-ajv-errors': 0.3.3_ajv@8.11.0
-      '@babel/core': 7.17.12
-      '@babel/preset-env': 7.17.12_@babel+core@7.17.12
-      '@babel/runtime': 7.17.9
-      '@rollup/plugin-babel': 5.3.1_pyhastprz45ufttge6avwpm7iy
+      '@babel/core': 7.18.0
+      '@babel/preset-env': 7.18.0_@babel+core@7.18.0
+      '@babel/runtime': 7.18.0
+      '@rollup/plugin-babel': 5.3.1_3gvlzenj6qraw2ojvkgevxalie
       '@rollup/plugin-node-resolve': 11.2.1_rollup@2.72.1
       '@rollup/plugin-replace': 2.4.2_rollup@2.72.1
       '@surma/rollup-plugin-off-main-thread': 2.2.3

From 10861181c62e0413b49324a9ba29f0135b4c1989 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 22:48:41 -0500
Subject: [PATCH 35/54] updating lockfile

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01d92db52010..7589df19dc4f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9682,7 +9682,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 17.0.35
+      '@types/node': 17.0.32
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true

From 3e8db198173f071e8f37bebce41f3921851072d7 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:04:07 -0500
Subject: [PATCH 36/54] TEMP: watching for console logs

---
 packages/astro/e2e/solid.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
index c63ba208344e..9e8f49cbc7c6 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.js
@@ -23,6 +23,7 @@ test.afterEach(async ({ astro }) => {
 });
 
 test.only('Solid', async ({ page, astro }) => {
+	page.on('console', msg => console.log('Solid::', msg.text()));
 	await page.goto(astro.resolveUrl('/'));
 
 	await test.step('server only', async () => {

From 603fa289a93545412ec8eb449cf475c1e0e6923d Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:21:38 -0500
Subject: [PATCH 37/54] TEMP: testing typescript tests

---
 .../e2e/{solid.test.js => solid.test.ts}      | 35 +++++++++++--------
 packages/astro/package.json                   |  2 +-
 packages/astro/playwright.config.ts           | 16 +++++++++
 3 files changed, 37 insertions(+), 16 deletions(-)
 rename packages/astro/e2e/{solid.test.js => solid.test.ts} (80%)
 create mode 100644 packages/astro/playwright.config.ts

diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.ts
similarity index 80%
rename from packages/astro/e2e/solid.test.js
rename to packages/astro/e2e/solid.test.ts
index 9e8f49cbc7c6..e299b44ac383 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.ts
@@ -10,23 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test.only('Solid', async ({ page, astro }) => {
-	page.on('console', msg => console.log('Solid::', msg.text()));
-	await page.goto(astro.resolveUrl('/'));
+test.describe('Solid', () => {
+	test('server only', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
 
-	await test.step('server only', async () => {
 		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
@@ -39,7 +34,9 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('0');
 	});
 
-	await test.step('client:idle', async () => {
+	test('client:idle', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
@@ -52,7 +49,9 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:load', async () => {
+	test('client:load', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
@@ -65,7 +64,9 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:visible', async () => {
+	test('client:visible', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
@@ -79,7 +80,9 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:media', async () => {
+	test('client:media', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
@@ -97,7 +100,9 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
diff --git a/packages/astro/package.json b/packages/astro/package.json
index bd594a3625aa..b7b4e551b32f 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -73,7 +73,7 @@
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
     "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js --ignore **/errors.test.js && mocha --timeout 20000 **/lit-element.test.js && mocha --timeout 20000 **/errors.test.js",
     "test:match": "mocha --timeout 20000 -g",
-    "test:e2e": "playwright test e2e",
+    "test:e2e": "playwright test e2e/*.test.js",
     "test:e2e:match": "playwright test e2e -g"
   },
   "dependencies": {
diff --git a/packages/astro/playwright.config.ts b/packages/astro/playwright.config.ts
new file mode 100644
index 000000000000..5aff93bca9e8
--- /dev/null
+++ b/packages/astro/playwright.config.ts
@@ -0,0 +1,16 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	testMatch: 'e2e/*.test.ts',
+  projects: [
+    {
+      name: 'Chrome Stable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome',
+      },
+    },
+  ],
+};
+
+export default config;

From 7a5447139459eccc412279d8bcde37bb6e30f00e Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:25:55 -0500
Subject: [PATCH 38/54] updating test:e2e scripts for config file

---
 packages/astro/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/astro/package.json b/packages/astro/package.json
index b7b4e551b32f..709d6f21ff9c 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -73,8 +73,8 @@
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
     "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js --ignore **/errors.test.js && mocha --timeout 20000 **/lit-element.test.js && mocha --timeout 20000 **/errors.test.js",
     "test:match": "mocha --timeout 20000 -g",
-    "test:e2e": "playwright test e2e/*.test.js",
-    "test:e2e:match": "playwright test e2e -g"
+    "test:e2e": "playwright test",
+    "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
     "@astrojs/compiler": "^0.14.3",

From 8dd5b23181b385822bfb92bae3a1f8c6d81a531f Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:31:51 -0500
Subject: [PATCH 39/54] seems like it didn't find the config file?

---
 packages/astro/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/astro/package.json b/packages/astro/package.json
index 709d6f21ff9c..aba647857950 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -73,8 +73,8 @@
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
     "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js --ignore **/errors.test.js && mocha --timeout 20000 **/lit-element.test.js && mocha --timeout 20000 **/errors.test.js",
     "test:match": "mocha --timeout 20000 -g",
-    "test:e2e": "playwright test",
-    "test:e2e:match": "playwright test -g"
+    "test:e2e": "playwright test -c ./playwright.config.ts",
+    "test:e2e:match": "playwright test -c ./playwright.config.ts -g"
   },
   "dependencies": {
     "@astrojs/compiler": "^0.14.3",

From afd1b07a95aa1538639face2adec3cbf91f6aa0b Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:45:01 -0500
Subject: [PATCH 40/54] use a fresh dev server for each test

---
 packages/astro/e2e/lit.test.js                | 20 ++++------
 packages/astro/e2e/nested-styles.test.js      | 12 +++---
 packages/astro/e2e/preact.test.js             | 40 +++++++++++--------
 packages/astro/e2e/react.test.js              | 40 +++++++++++--------
 .../e2e/{solid.test.ts => solid.test.js}      |  0
 packages/astro/e2e/svelte.test.js             | 32 +++++++++------
 packages/astro/e2e/tailwindcss.test.js        | 20 +++++-----
 packages/astro/e2e/vue.test.js                | 32 +++++++++------
 packages/astro/package.json                   |  4 +-
 ...ywright.config.ts => playwright.config.js} |  6 +--
 10 files changed, 114 insertions(+), 92 deletions(-)
 rename packages/astro/e2e/{solid.test.ts => solid.test.js} (100%)
 rename packages/astro/{playwright.config.ts => playwright.config.js} (56%)

diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index 3aee984ed530..b34aaf4ca77b 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -10,20 +10,16 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test.only('Lit', async ({ page, astro }) => {
-	await test.step('client:idle', async () => {
+test.describe('Lit', () => {
+	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-idle');
@@ -38,7 +34,7 @@ test.only('Lit', async ({ page, astro }) => {
 		await expect(count).toHaveText('Count: 1');
 	});
 
-	await test.step('client:load', async () => {
+	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-load');
@@ -53,7 +49,7 @@ test.only('Lit', async ({ page, astro }) => {
 		await expect(count).toHaveText('Count: 1');
 	});
 
-	await test.step('client:visible', async () => {
+	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-visible');
@@ -69,7 +65,7 @@ test.only('Lit', async ({ page, astro }) => {
 		await expect(count).toHaveText('Count: 1');
 	});
 
-	await test.step('client:media', async () => {
+	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/media'));
 	
 		const counter = page.locator('#client-media');
@@ -89,7 +85,7 @@ test.only('Lit', async ({ page, astro }) => {
 		await expect(count).toHaveText('Count: 1');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		// test 1: updating the page component
diff --git a/packages/astro/e2e/nested-styles.test.js b/packages/astro/e2e/nested-styles.test.js
index 7c233d4cb7ad..f405d5a31928 100644
--- a/packages/astro/e2e/nested-styles.test.js
+++ b/packages/astro/e2e/nested-styles.test.js
@@ -10,18 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test('Loading styles that are nested', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
-
-	await test.step('header', async () => {
+test.describe('Loading styles that are nested', () => {
+	test('header', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const header = page.locator('header');
 
 		await expect(header, 'should have background color').toHaveCSS(
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index 08bc437f2fef..103349a0e4af 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -10,22 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test.only('Preact', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
-
-	await test.step('server only', async () => {
+test.describe('Preact', () => {
+	test('server only', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
@@ -38,7 +34,9 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('0');
 	});
 
-	await test.step('client:idle', async () => {
+	test('client:idle', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
@@ -51,7 +49,9 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:load', async () => {
+	test('client:load', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
@@ -64,7 +64,9 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:visible', async () => {
+	test('client:visible', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
@@ -78,7 +80,9 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:media', async () => {
+	test('client:media', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
@@ -96,14 +100,18 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:only', async () => {
+	test('client:only', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
 
 		await expect(label).toHaveText('Preact client:only component');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index eb42dba5005b..79f3f6df2a23 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -10,22 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test.only('React', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
-
-	await test.step('server only', async () => {
+test.describe('React', () => {
+	test('server only', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
@@ -38,7 +34,9 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('0');
 	});
 
-	await test.step('client:idle', async () => {
+	test('client:idle', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
@@ -51,7 +49,9 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:load', async () => {
+	test('client:load', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
@@ -64,7 +64,9 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:visible', async () => {
+	test('client:visible', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
@@ -78,7 +80,9 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:media', async () => {
+	test('client:media', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
@@ -96,14 +100,18 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:only', async () => {
+	test('client:only', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
 
 		await expect(label).toHaveText('React client:only component');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
diff --git a/packages/astro/e2e/solid.test.ts b/packages/astro/e2e/solid.test.js
similarity index 100%
rename from packages/astro/e2e/solid.test.ts
rename to packages/astro/e2e/solid.test.js
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index cbe15bf6d8ef..d5bce5fa2953 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -10,22 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test.only('Svelte', async ({ page, astro }) => {
+test.describe('Svelte', () => {
+	test('server only', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
-	await test.step('server only', async () => {
 		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
@@ -38,7 +34,9 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('0');
 	});
 
-	await test.step('client:idle', async () => {
+	test('client:idle', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
@@ -51,7 +49,9 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:load', async () => {
+	test('client:load', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-load');
 		await expect(counter).toBeVisible();
 		
@@ -64,7 +64,9 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:visible', async () => {
+	test('client:visible', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
@@ -78,7 +80,9 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:media', async () => {
+	test('client:media', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
@@ -96,7 +100,9 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index f11931336b5f..e71edcced68f 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -10,22 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test('Tailwind CSS', async ({ page, astro }) => {
+test.describe('Tailwind CSS', () => {
+	test('body', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
-	await test.step('body', async () => {
 		const body = page.locator('body');
 
 		await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
@@ -36,7 +32,9 @@ test('Tailwind CSS', async ({ page, astro }) => {
 		await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
 	});
 
-	await test.step('button', async () => {
+	test('button', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const button = page.locator('button');
 
 		await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
@@ -53,7 +51,9 @@ test('Tailwind CSS', async ({ page, astro }) => {
 		await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		await astro.editFile(
 			'./src/components/Button.astro',
 			(original) => original.replace('bg-purple-600', 'bg-purple-400')
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
index 4a0fea47ceaa..fd78e4e3b637 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue.test.js
@@ -10,22 +10,18 @@ const test = base.extend({
 
 let devServer;
 
-test.beforeAll(async ({ astro }) => {
+test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterAll(async ({ astro }) => {
+test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.afterEach(async ({ astro }) => {
-	astro.clean();
-});
-
-test.only('Vue', async ({ page, astro }) => {
+test.describe('Vue', () => {
+	test('server only', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
-	await test.step('server only', async () => {
 		const counter = page.locator('#server-only');
 		await expect(counter).toBeVisible();
 		
@@ -38,7 +34,9 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('0');
 	});
 
-	await test.step('client:idle', async () => {
+	test('client:idle', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-idle');
 		await expect(counter).toBeVisible();
 		
@@ -51,7 +49,9 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:load', async () => {
+	test('client:load', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-load');
 		const counterDup = page.locator('#client-load-dup');
 		const counterStep = page.locator('#client-load-step');
@@ -88,7 +88,9 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(countStep).toHaveText('4');
 	});
 
-	await test.step('client:visible', async () => {
+	test('client:visible', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
@@ -104,7 +106,9 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('client:media', async () => {
+	test('client:media', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		const counter = page.locator('#client-media');
 		await expect(counter).toBeVisible();
 		
@@ -122,7 +126,9 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
-	await test.step('HMR', async () => {
+	test('HMR', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
diff --git a/packages/astro/package.json b/packages/astro/package.json
index aba647857950..709d6f21ff9c 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -73,8 +73,8 @@
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
     "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js --ignore **/errors.test.js && mocha --timeout 20000 **/lit-element.test.js && mocha --timeout 20000 **/errors.test.js",
     "test:match": "mocha --timeout 20000 -g",
-    "test:e2e": "playwright test -c ./playwright.config.ts",
-    "test:e2e:match": "playwright test -c ./playwright.config.ts -g"
+    "test:e2e": "playwright test",
+    "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
     "@astrojs/compiler": "^0.14.3",
diff --git a/packages/astro/playwright.config.ts b/packages/astro/playwright.config.js
similarity index 56%
rename from packages/astro/playwright.config.ts
rename to packages/astro/playwright.config.js
index 5aff93bca9e8..ea5d91334f96 100644
--- a/packages/astro/playwright.config.ts
+++ b/packages/astro/playwright.config.js
@@ -1,7 +1,5 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-
-const config: PlaywrightTestConfig = {
-	testMatch: 'e2e/*.test.ts',
+const config = {
+	testMatch: 'e2e/*.test.js',
   projects: [
     {
       name: 'Chrome Stable',

From 4970a8093e5892f633fdb7442b66772c6edf9931 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:51:23 -0500
Subject: [PATCH 41/54] removing Lit tests for now

---
 packages/astro/e2e/lit.test.js | 102 ---------------------------------
 1 file changed, 102 deletions(-)
 delete mode 100644 packages/astro/e2e/lit.test.js

diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
deleted file mode 100644
index b34aaf4ca77b..000000000000
--- a/packages/astro/e2e/lit.test.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { test as base, expect } from '@playwright/test';
-import { loadFixture } from './test-utils.js';
-
-const test = base.extend({
-	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/lit/' });
-		await use(fixture);
-	},
-});
-
-let devServer;
-
-test.beforeEach(async ({ astro }) => {
-	devServer = await astro.startDevServer();
-});
-
-test.afterEach(async () => {
-	await devServer.stop();
-});
-
-test.describe('Lit', () => {
-	test('client:idle', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/'));
-	
-		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
-		
-		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
-
-		const inc = counter.locator('button');
-		await inc.click();
-
-		await expect(count).toHaveText('Count: 1');
-	});
-
-	test('client:load', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/'));
-	
-		const counter = page.locator('#client-load');
-		await expect(counter).toBeVisible();
-		
-		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
-
-		const inc = counter.locator('button');
-		await inc.click();
-
-		await expect(count).toHaveText('Count: 1');
-	});
-
-	test('client:visible', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/'));
-	
-		const counter = page.locator('#client-visible');
-		await counter.scrollIntoViewIfNeeded();
-		await expect(counter).toBeVisible();
-		
-		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
-
-		const inc = counter.locator('button');
-		await inc.click();
-
-		await expect(count).toHaveText('Count: 1');
-	});
-
-	test('client:media', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/media'));
-	
-		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
-		
-		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
-
-		// test 1: not hydrated on large screens
-		const inc = counter.locator('button');
-		await inc.click();
-		await expect(count).toHaveText('Count: 0');
-
-		// test 2: hydrated on mobile (max-width: 50rem)
-		await page.setViewportSize({ width: 414, height: 1124 });
-		await inc.click();
-		await expect(count).toHaveText('Count: 1');
-	});
-
-	test('HMR', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/'));
-
-		// test 1: updating the page component
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
-		);
-
-		await astro.onNextChange();
-
-		const label = page.locator('#client-idle h1');
-		await expect(label).toHaveText('Hello, updated client:idle!')
-	});
-});

From 69a78aecff1434ec1075b89b6b3f2fffe8ef5b99 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 20 May 2022 23:52:16 -0500
Subject: [PATCH 42/54] Revert "removing Lit tests for now"

This reverts commit 4970a8093e5892f633fdb7442b66772c6edf9931.
---
 packages/astro/e2e/lit.test.js | 102 +++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 packages/astro/e2e/lit.test.js

diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
new file mode 100644
index 000000000000..b34aaf4ca77b
--- /dev/null
+++ b/packages/astro/e2e/lit.test.js
@@ -0,0 +1,102 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/lit/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeEach(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterEach(async () => {
+	await devServer.stop();
+});
+
+test.describe('Lit', () => {
+	test('client:idle', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
+		const counter = page.locator('#client-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
+
+		const inc = counter.locator('button');
+		await inc.click();
+
+		await expect(count).toHaveText('Count: 1');
+	});
+
+	test('client:load', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
+		const counter = page.locator('#client-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
+
+		const inc = counter.locator('button');
+		await inc.click();
+
+		await expect(count).toHaveText('Count: 1');
+	});
+
+	test('client:visible', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+	
+		const counter = page.locator('#client-visible');
+		await counter.scrollIntoViewIfNeeded();
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
+
+		const inc = counter.locator('button');
+		await inc.click();
+
+		await expect(count).toHaveText('Count: 1');
+	});
+
+	test('client:media', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/media'));
+	
+		const counter = page.locator('#client-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('p');
+		await expect(count).toHaveText('Count: 0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('button');
+		await inc.click();
+		await expect(count).toHaveText('Count: 0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('Count: 1');
+	});
+
+	test('HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		// test 1: updating the page component
+		await astro.editFile(
+			'./src/pages/index.astro',
+			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
+		);
+
+		await astro.onNextChange();
+
+		const label = page.locator('#client-idle h1');
+		await expect(label).toHaveText('Hello, updated client:idle!')
+	});
+});

From 2505e6388e70934519e14aa040ed9d54a194cb48 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 00:03:04 -0500
Subject: [PATCH 43/54] updating test config for CI

---
 packages/astro/e2e/lit.test.js      |  4 +++-
 packages/astro/playwright.config.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index b34aaf4ca77b..4a9d15f94d0b 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -18,7 +18,9 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('Lit', () => {
+// TODO: configure playwright to handle web component APIs
+// https://github.com/microsoft/playwright/issues/14241
+test.describe.skip('Lit', () => {
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
diff --git a/packages/astro/playwright.config.js b/packages/astro/playwright.config.js
index ea5d91334f96..8c13d8ef9339 100644
--- a/packages/astro/playwright.config.js
+++ b/packages/astro/playwright.config.js
@@ -1,5 +1,32 @@
+import { devices } from '@playwright/test';
+
 const config = {
 	testMatch: 'e2e/*.test.js',
+	/* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Fail the build on CI if you accidentally left test in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
   projects: [
     {
       name: 'Chrome Stable',
@@ -9,6 +36,7 @@ const config = {
       },
     },
   ],
+
 };
 
 export default config;

From 71dc3e977f050c5fb748305ed9bda0b3b237bcca Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 17:17:56 -0500
Subject: [PATCH 44/54] WIP: disabling HMR tests to track down why they're
 unreliable

---
 packages/astro/e2e/{lit.test.js => lit-component.test.js}     | 2 +-
 .../astro/e2e/{preact.test.js => preact-component.test.js}    | 4 ++--
 packages/astro/e2e/{react.test.js => react-component.test.js} | 4 ++--
 packages/astro/e2e/{solid.test.js => solid-component.test.js} | 4 ++--
 .../astro/e2e/{svelte.test.js => svelte-component.test.js}    | 4 ++--
 packages/astro/e2e/{vue.test.js => vue-component.test.js}     | 4 ++--
 6 files changed, 11 insertions(+), 11 deletions(-)
 rename packages/astro/e2e/{lit.test.js => lit-component.test.js} (98%)
 rename packages/astro/e2e/{preact.test.js => preact-component.test.js} (97%)
 rename packages/astro/e2e/{react.test.js => react-component.test.js} (97%)
 rename packages/astro/e2e/{solid.test.js => solid-component.test.js} (97%)
 rename packages/astro/e2e/{svelte.test.js => svelte-component.test.js} (97%)
 rename packages/astro/e2e/{vue.test.js => vue-component.test.js} (97%)

diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit-component.test.js
similarity index 98%
rename from packages/astro/e2e/lit.test.js
rename to packages/astro/e2e/lit-component.test.js
index 4a9d15f94d0b..e498e420e030 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit-component.test.js
@@ -20,7 +20,7 @@ test.afterEach(async () => {
 
 // TODO: configure playwright to handle web component APIs
 // https://github.com/microsoft/playwright/issues/14241
-test.describe.skip('Lit', () => {
+test.describe.skip('Lit components', () => {
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact-component.test.js
similarity index 97%
rename from packages/astro/e2e/preact.test.js
rename to packages/astro/e2e/preact-component.test.js
index 103349a0e4af..30cd83bca909 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact-component.test.js
@@ -18,7 +18,7 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('Preact', () => {
+test.describe('Preact components', () => {
 	test('server only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
@@ -109,7 +109,7 @@ test.describe('Preact', () => {
 		await expect(label).toHaveText('Preact client:only component');
 	});
 
-	test('HMR', async ({ page, astro }) => {
+	test.skip('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		// test 1: updating the page component
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react-component.test.js
similarity index 97%
rename from packages/astro/e2e/react.test.js
rename to packages/astro/e2e/react-component.test.js
index 79f3f6df2a23..1be1aaf1776b 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -18,7 +18,7 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('React', () => {
+test.describe('React components', () => {
 	test('server only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
@@ -109,7 +109,7 @@ test.describe('React', () => {
 		await expect(label).toHaveText('React client:only component');
 	});
 
-	test('HMR', async ({ page, astro }) => {
+	test.skip('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		// test 1: updating the page component
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid-component.test.js
similarity index 97%
rename from packages/astro/e2e/solid.test.js
rename to packages/astro/e2e/solid-component.test.js
index e299b44ac383..6d9090877dae 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid-component.test.js
@@ -18,7 +18,7 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('Solid', () => {
+test.describe('Solid components', () => {
 	test('server only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
@@ -100,7 +100,7 @@ test.describe('Solid', () => {
 		await expect(count).toHaveText('1');
 	});
 
-	test('HMR', async ({ page, astro }) => {
+	test.skip('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		// test 1: updating the page component
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte-component.test.js
similarity index 97%
rename from packages/astro/e2e/svelte.test.js
rename to packages/astro/e2e/svelte-component.test.js
index d5bce5fa2953..9e1f7497d073 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte-component.test.js
@@ -18,7 +18,7 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('Svelte', () => {
+test.describe('Svelte components', () => {
 	test('server only', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
@@ -100,7 +100,7 @@ test.describe('Svelte', () => {
 		await expect(count).toHaveText('1');
 	});
 
-	test('HMR', async ({ page, astro }) => {
+	test.skip('HMR', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
 		// test 1: updating the page component
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue-component.test.js
similarity index 97%
rename from packages/astro/e2e/vue.test.js
rename to packages/astro/e2e/vue-component.test.js
index fd78e4e3b637..b64e3bf60509 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue-component.test.js
@@ -18,7 +18,7 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('Vue', () => {
+test.describe('Vue components', () => {
 	test('server only', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
@@ -126,7 +126,7 @@ test.describe('Vue', () => {
 		await expect(count).toHaveText('1');
 	});
 
-	test('HMR', async ({ page, astro }) => {
+	test.skip('HMR', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
 		// test 1: updating the page component

From 6a856bfb488d22e806fed986b4f100e4f233be75 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 17:21:09 -0500
Subject: [PATCH 45/54] TEMP: logging to debug HMR test

---
 packages/astro/test/test-utils.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 7fe2df4e33f1..59294e943191 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -111,7 +111,10 @@ export async function loadFixture(inlineConfig) {
 
 	// After each test, reset each of the edits to their original contents.
 	if (typeof afterEach === 'function') {
+		console.log('afterEach::resetAllFiles');
 		afterEach(resetAllFiles);
+	} else {
+		console.log('afterEach::not defined');
 	}
 	// Also do it on process exit, just in case.
 	process.on('exit', resetAllFiles);
@@ -146,6 +149,7 @@ export async function loadFixture(inlineConfig) {
 			return app;
 		},
 		editFile: async (filePath, newContentsOrCallback) => {
+			console.log('editFile::', filePath);
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
 			const reset = () => fs.writeFileSync(fileUrl, contents);
@@ -157,6 +161,7 @@ export async function loadFixture(inlineConfig) {
 			const newContents = typeof newContentsOrCallback === 'function'
 				? newContentsOrCallback(contents)
 				: newContentsOrCallback;
+			console.log('editFile::write', filePath);
 			await fs.promises.writeFile(fileUrl, newContents);
 			return reset;
 		},

From 21b9156a9a9cd3fd3147fe3f6184a27d090fba0d Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 17:28:55 -0500
Subject: [PATCH 46/54] afterEach isn't a global in Playwright

---
 packages/astro/e2e/tailwindcss.test.js | 2 +-
 packages/astro/test/test-utils.js      | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index e71edcced68f..17e1b96bbf73 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -52,7 +52,7 @@ test.describe('Tailwind CSS', () => {
 	});
 
 	test('HMR', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+	  await page.goto(astro.resolveUrl('/'));
 
 		await astro.editFile(
 			'./src/components/Button.astro',
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 59294e943191..2f44b992d619 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -111,10 +111,7 @@ export async function loadFixture(inlineConfig) {
 
 	// After each test, reset each of the edits to their original contents.
 	if (typeof afterEach === 'function') {
-		console.log('afterEach::resetAllFiles');
 		afterEach(resetAllFiles);
-	} else {
-		console.log('afterEach::not defined');
 	}
 	// Also do it on process exit, just in case.
 	process.on('exit', resetAllFiles);
@@ -152,7 +149,10 @@ export async function loadFixture(inlineConfig) {
 			console.log('editFile::', filePath);
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
-			const reset = () => fs.writeFileSync(fileUrl, contents);
+			const reset = () => {
+				console.log('reset::', fileUrl);
+				fs.writeFileSync(fileUrl, contents);
+			}
 			// Only save this reset if not already in the map, in case multiple edits happen
 			// to the same file.
 			if (!fileEdits.has(fileUrl.toString())) {
@@ -165,6 +165,7 @@ export async function loadFixture(inlineConfig) {
 			await fs.promises.writeFile(fileUrl, newContents);
 			return reset;
 		},
+		resetAllFiles,
 		onNextChange: () =>
 			devServer
 				? new Promise((resolve) => devServer.watcher.once('change', resolve))

From dca9ba86d4ff00354a5ed7381f698304df7a57bf Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 17:37:34 -0500
Subject: [PATCH 47/54] fix: the test's file reset helper was using a URL not
 filepath

---
 .../e2e/fixtures/{lit => lit-component}/astro.config.mjs      | 0
 .../astro/e2e/fixtures/{lit => lit-component}/package.json    | 2 +-
 .../fixtures/{lit => lit-component}/src/components/Counter.js | 0
 .../e2e/fixtures/{lit => lit-component}/src/pages/index.astro | 0
 .../e2e/fixtures/{lit => lit-component}/src/pages/media.astro | 0
 .../fixtures/{preact => preact-component}/astro.config.mjs    | 0
 .../e2e/fixtures/{preact => preact-component}/package.json    | 2 +-
 .../{preact => preact-component}/src/components/Counter.css   | 0
 .../{preact => preact-component}/src/components/Counter.jsx   | 0
 .../src/components/JSXComponent.jsx                           | 0
 .../{preact => preact-component}/src/pages/index.astro        | 0
 .../e2e/fixtures/{react => react-component}/astro.config.mjs  | 0
 .../e2e/fixtures/{react => react-component}/package.json      | 2 +-
 .../{react => react-component}/src/components/Counter.css     | 0
 .../{react => react-component}/src/components/Counter.jsx     | 0
 .../src/components/JSXComponent.jsx                           | 0
 .../fixtures/{react => react-component}/src/pages/index.astro | 0
 .../e2e/fixtures/{solid => solid-component}/astro.config.mjs  | 0
 .../e2e/fixtures/{solid => solid-component}/package.json      | 2 +-
 .../{solid => solid-component}/src/components/Counter.css     | 0
 .../{solid => solid-component}/src/components/Counter.jsx     | 0
 .../fixtures/{solid => solid-component}/src/pages/index.astro | 0
 .../fixtures/{svelte => svelte-component}/astro.config.mjs    | 0
 .../e2e/fixtures/{svelte => svelte-component}/package.json    | 2 +-
 .../src/components/Counter.svelte                             | 0
 .../{svelte => svelte-component}/src/pages/index.astro        | 0
 .../e2e/fixtures/{vue => vue-component}/astro.config.mjs      | 0
 .../astro/e2e/fixtures/{vue => vue-component}/package.json    | 0
 .../{vue => vue-component}/src/components/Counter.vue         | 0
 .../fixtures/{vue => vue-component}/src/components/Result.vue | 0
 .../e2e/fixtures/{vue => vue-component}/src/pages/index.astro | 0
 packages/astro/e2e/lit-component.test.js                      | 2 +-
 packages/astro/e2e/preact-component.test.js                   | 2 +-
 packages/astro/e2e/react-component.test.js                    | 2 +-
 packages/astro/e2e/solid-component.test.js                    | 2 +-
 packages/astro/e2e/svelte-component.test.js                   | 2 +-
 packages/astro/e2e/vue-component.test.js                      | 2 +-
 packages/astro/test/test-utils.js                             | 4 ++--
 38 files changed, 13 insertions(+), 13 deletions(-)
 rename packages/astro/e2e/fixtures/{lit => lit-component}/astro.config.mjs (100%)
 rename packages/astro/e2e/fixtures/{lit => lit-component}/package.json (86%)
 rename packages/astro/e2e/fixtures/{lit => lit-component}/src/components/Counter.js (100%)
 rename packages/astro/e2e/fixtures/{lit => lit-component}/src/pages/index.astro (100%)
 rename packages/astro/e2e/fixtures/{lit => lit-component}/src/pages/media.astro (100%)
 rename packages/astro/e2e/fixtures/{preact => preact-component}/astro.config.mjs (100%)
 rename packages/astro/e2e/fixtures/{preact => preact-component}/package.json (81%)
 rename packages/astro/e2e/fixtures/{preact => preact-component}/src/components/Counter.css (100%)
 rename packages/astro/e2e/fixtures/{preact => preact-component}/src/components/Counter.jsx (100%)
 rename packages/astro/e2e/fixtures/{preact => preact-component}/src/components/JSXComponent.jsx (100%)
 rename packages/astro/e2e/fixtures/{preact => preact-component}/src/pages/index.astro (100%)
 rename packages/astro/e2e/fixtures/{react => react-component}/astro.config.mjs (100%)
 rename packages/astro/e2e/fixtures/{react => react-component}/package.json (84%)
 rename packages/astro/e2e/fixtures/{react => react-component}/src/components/Counter.css (100%)
 rename packages/astro/e2e/fixtures/{react => react-component}/src/components/Counter.jsx (100%)
 rename packages/astro/e2e/fixtures/{react => react-component}/src/components/JSXComponent.jsx (100%)
 rename packages/astro/e2e/fixtures/{react => react-component}/src/pages/index.astro (100%)
 rename packages/astro/e2e/fixtures/{solid => solid-component}/astro.config.mjs (100%)
 rename packages/astro/e2e/fixtures/{solid => solid-component}/package.json (84%)
 rename packages/astro/e2e/fixtures/{solid => solid-component}/src/components/Counter.css (100%)
 rename packages/astro/e2e/fixtures/{solid => solid-component}/src/components/Counter.jsx (100%)
 rename packages/astro/e2e/fixtures/{solid => solid-component}/src/pages/index.astro (100%)
 rename packages/astro/e2e/fixtures/{svelte => svelte-component}/astro.config.mjs (100%)
 rename packages/astro/e2e/fixtures/{svelte => svelte-component}/package.json (81%)
 rename packages/astro/e2e/fixtures/{svelte => svelte-component}/src/components/Counter.svelte (100%)
 rename packages/astro/e2e/fixtures/{svelte => svelte-component}/src/pages/index.astro (100%)
 rename packages/astro/e2e/fixtures/{vue => vue-component}/astro.config.mjs (100%)
 rename packages/astro/e2e/fixtures/{vue => vue-component}/package.json (100%)
 rename packages/astro/e2e/fixtures/{vue => vue-component}/src/components/Counter.vue (100%)
 rename packages/astro/e2e/fixtures/{vue => vue-component}/src/components/Result.vue (100%)
 rename packages/astro/e2e/fixtures/{vue => vue-component}/src/pages/index.astro (100%)

diff --git a/packages/astro/e2e/fixtures/lit/astro.config.mjs b/packages/astro/e2e/fixtures/lit-component/astro.config.mjs
similarity index 100%
rename from packages/astro/e2e/fixtures/lit/astro.config.mjs
rename to packages/astro/e2e/fixtures/lit-component/astro.config.mjs
diff --git a/packages/astro/e2e/fixtures/lit/package.json b/packages/astro/e2e/fixtures/lit-component/package.json
similarity index 86%
rename from packages/astro/e2e/fixtures/lit/package.json
rename to packages/astro/e2e/fixtures/lit-component/package.json
index 6c2d78baf4c8..ea73f5982000 100644
--- a/packages/astro/e2e/fixtures/lit/package.json
+++ b/packages/astro/e2e/fixtures/lit-component/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/svelte",
+  "name": "@e2e/lit-component",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/astro/e2e/fixtures/lit/src/components/Counter.js b/packages/astro/e2e/fixtures/lit-component/src/components/Counter.js
similarity index 100%
rename from packages/astro/e2e/fixtures/lit/src/components/Counter.js
rename to packages/astro/e2e/fixtures/lit-component/src/components/Counter.js
diff --git a/packages/astro/e2e/fixtures/lit/src/pages/index.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/lit/src/pages/index.astro
rename to packages/astro/e2e/fixtures/lit-component/src/pages/index.astro
diff --git a/packages/astro/e2e/fixtures/lit/src/pages/media.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/lit/src/pages/media.astro
rename to packages/astro/e2e/fixtures/lit-component/src/pages/media.astro
diff --git a/packages/astro/e2e/fixtures/preact/astro.config.mjs b/packages/astro/e2e/fixtures/preact-component/astro.config.mjs
similarity index 100%
rename from packages/astro/e2e/fixtures/preact/astro.config.mjs
rename to packages/astro/e2e/fixtures/preact-component/astro.config.mjs
diff --git a/packages/astro/e2e/fixtures/preact/package.json b/packages/astro/e2e/fixtures/preact-component/package.json
similarity index 81%
rename from packages/astro/e2e/fixtures/preact/package.json
rename to packages/astro/e2e/fixtures/preact-component/package.json
index 64658bf777b5..8ee5c3a0a1dd 100644
--- a/packages/astro/e2e/fixtures/preact/package.json
+++ b/packages/astro/e2e/fixtures/preact-component/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/preact",
+  "name": "@e2e/preact-component",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/astro/e2e/fixtures/preact/src/components/Counter.css b/packages/astro/e2e/fixtures/preact-component/src/components/Counter.css
similarity index 100%
rename from packages/astro/e2e/fixtures/preact/src/components/Counter.css
rename to packages/astro/e2e/fixtures/preact-component/src/components/Counter.css
diff --git a/packages/astro/e2e/fixtures/preact/src/components/Counter.jsx b/packages/astro/e2e/fixtures/preact-component/src/components/Counter.jsx
similarity index 100%
rename from packages/astro/e2e/fixtures/preact/src/components/Counter.jsx
rename to packages/astro/e2e/fixtures/preact-component/src/components/Counter.jsx
diff --git a/packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/preact-component/src/components/JSXComponent.jsx
similarity index 100%
rename from packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx
rename to packages/astro/e2e/fixtures/preact-component/src/components/JSXComponent.jsx
diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact-component/src/pages/index.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/preact/src/pages/index.astro
rename to packages/astro/e2e/fixtures/preact-component/src/pages/index.astro
diff --git a/packages/astro/e2e/fixtures/react/astro.config.mjs b/packages/astro/e2e/fixtures/react-component/astro.config.mjs
similarity index 100%
rename from packages/astro/e2e/fixtures/react/astro.config.mjs
rename to packages/astro/e2e/fixtures/react-component/astro.config.mjs
diff --git a/packages/astro/e2e/fixtures/react/package.json b/packages/astro/e2e/fixtures/react-component/package.json
similarity index 84%
rename from packages/astro/e2e/fixtures/react/package.json
rename to packages/astro/e2e/fixtures/react-component/package.json
index f76cc192d8d6..9236558f023f 100644
--- a/packages/astro/e2e/fixtures/react/package.json
+++ b/packages/astro/e2e/fixtures/react-component/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/react",
+  "name": "@e2e/react-component",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/astro/e2e/fixtures/react/src/components/Counter.css b/packages/astro/e2e/fixtures/react-component/src/components/Counter.css
similarity index 100%
rename from packages/astro/e2e/fixtures/react/src/components/Counter.css
rename to packages/astro/e2e/fixtures/react-component/src/components/Counter.css
diff --git a/packages/astro/e2e/fixtures/react/src/components/Counter.jsx b/packages/astro/e2e/fixtures/react-component/src/components/Counter.jsx
similarity index 100%
rename from packages/astro/e2e/fixtures/react/src/components/Counter.jsx
rename to packages/astro/e2e/fixtures/react-component/src/components/Counter.jsx
diff --git a/packages/astro/e2e/fixtures/react/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/react-component/src/components/JSXComponent.jsx
similarity index 100%
rename from packages/astro/e2e/fixtures/react/src/components/JSXComponent.jsx
rename to packages/astro/e2e/fixtures/react-component/src/components/JSXComponent.jsx
diff --git a/packages/astro/e2e/fixtures/react/src/pages/index.astro b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/react/src/pages/index.astro
rename to packages/astro/e2e/fixtures/react-component/src/pages/index.astro
diff --git a/packages/astro/e2e/fixtures/solid/astro.config.mjs b/packages/astro/e2e/fixtures/solid-component/astro.config.mjs
similarity index 100%
rename from packages/astro/e2e/fixtures/solid/astro.config.mjs
rename to packages/astro/e2e/fixtures/solid-component/astro.config.mjs
diff --git a/packages/astro/e2e/fixtures/solid/package.json b/packages/astro/e2e/fixtures/solid-component/package.json
similarity index 84%
rename from packages/astro/e2e/fixtures/solid/package.json
rename to packages/astro/e2e/fixtures/solid-component/package.json
index d3e6b63e6672..5973f12fa7d5 100644
--- a/packages/astro/e2e/fixtures/solid/package.json
+++ b/packages/astro/e2e/fixtures/solid-component/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/solid",
+  "name": "@e2e/solid-component",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/astro/e2e/fixtures/solid/src/components/Counter.css b/packages/astro/e2e/fixtures/solid-component/src/components/Counter.css
similarity index 100%
rename from packages/astro/e2e/fixtures/solid/src/components/Counter.css
rename to packages/astro/e2e/fixtures/solid-component/src/components/Counter.css
diff --git a/packages/astro/e2e/fixtures/solid/src/components/Counter.jsx b/packages/astro/e2e/fixtures/solid-component/src/components/Counter.jsx
similarity index 100%
rename from packages/astro/e2e/fixtures/solid/src/components/Counter.jsx
rename to packages/astro/e2e/fixtures/solid-component/src/components/Counter.jsx
diff --git a/packages/astro/e2e/fixtures/solid/src/pages/index.astro b/packages/astro/e2e/fixtures/solid-component/src/pages/index.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/solid/src/pages/index.astro
rename to packages/astro/e2e/fixtures/solid-component/src/pages/index.astro
diff --git a/packages/astro/e2e/fixtures/svelte/astro.config.mjs b/packages/astro/e2e/fixtures/svelte-component/astro.config.mjs
similarity index 100%
rename from packages/astro/e2e/fixtures/svelte/astro.config.mjs
rename to packages/astro/e2e/fixtures/svelte-component/astro.config.mjs
diff --git a/packages/astro/e2e/fixtures/svelte/package.json b/packages/astro/e2e/fixtures/svelte-component/package.json
similarity index 81%
rename from packages/astro/e2e/fixtures/svelte/package.json
rename to packages/astro/e2e/fixtures/svelte-component/package.json
index 80e0661f88e4..2777c8ecd655 100644
--- a/packages/astro/e2e/fixtures/svelte/package.json
+++ b/packages/astro/e2e/fixtures/svelte-component/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/svelte",
+  "name": "@e2e/svelte-component",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte
similarity index 100%
rename from packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte
rename to packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/svelte/src/pages/index.astro
rename to packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro
diff --git a/packages/astro/e2e/fixtures/vue/astro.config.mjs b/packages/astro/e2e/fixtures/vue-component/astro.config.mjs
similarity index 100%
rename from packages/astro/e2e/fixtures/vue/astro.config.mjs
rename to packages/astro/e2e/fixtures/vue-component/astro.config.mjs
diff --git a/packages/astro/e2e/fixtures/vue/package.json b/packages/astro/e2e/fixtures/vue-component/package.json
similarity index 100%
rename from packages/astro/e2e/fixtures/vue/package.json
rename to packages/astro/e2e/fixtures/vue-component/package.json
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue b/packages/astro/e2e/fixtures/vue-component/src/components/Counter.vue
similarity index 100%
rename from packages/astro/e2e/fixtures/vue/src/components/Counter.vue
rename to packages/astro/e2e/fixtures/vue-component/src/components/Counter.vue
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Result.vue b/packages/astro/e2e/fixtures/vue-component/src/components/Result.vue
similarity index 100%
rename from packages/astro/e2e/fixtures/vue/src/components/Result.vue
rename to packages/astro/e2e/fixtures/vue-component/src/components/Result.vue
diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro
similarity index 100%
rename from packages/astro/e2e/fixtures/vue/src/pages/index.astro
rename to packages/astro/e2e/fixtures/vue-component/src/pages/index.astro
diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js
index e498e420e030..a5b5f0eaa6cb 100644
--- a/packages/astro/e2e/lit-component.test.js
+++ b/packages/astro/e2e/lit-component.test.js
@@ -3,7 +3,7 @@ import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/lit/' });
+		const fixture = await loadFixture({ root: './fixtures/lit-component/' });
 		await use(fixture);
 	},
 });
diff --git a/packages/astro/e2e/preact-component.test.js b/packages/astro/e2e/preact-component.test.js
index 30cd83bca909..728588525bbd 100644
--- a/packages/astro/e2e/preact-component.test.js
+++ b/packages/astro/e2e/preact-component.test.js
@@ -3,7 +3,7 @@ import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/preact/' });
+		const fixture = await loadFixture({ root: './fixtures/preact-component/' });
 		await use(fixture);
 	},
 });
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index 1be1aaf1776b..cf4564f9d904 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -3,7 +3,7 @@ import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/react/' });
+		const fixture = await loadFixture({ root: './fixtures/react-component/' });
 		await use(fixture);
 	},
 });
diff --git a/packages/astro/e2e/solid-component.test.js b/packages/astro/e2e/solid-component.test.js
index 6d9090877dae..c98df26499cc 100644
--- a/packages/astro/e2e/solid-component.test.js
+++ b/packages/astro/e2e/solid-component.test.js
@@ -3,7 +3,7 @@ import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/solid/' });
+		const fixture = await loadFixture({ root: './fixtures/solid-component/' });
 		await use(fixture);
 	},
 });
diff --git a/packages/astro/e2e/svelte-component.test.js b/packages/astro/e2e/svelte-component.test.js
index 9e1f7497d073..656f457bf702 100644
--- a/packages/astro/e2e/svelte-component.test.js
+++ b/packages/astro/e2e/svelte-component.test.js
@@ -3,7 +3,7 @@ import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/svelte/' });
+		const fixture = await loadFixture({ root: './fixtures/svelte-component/' });
 		await use(fixture);
 	},
 });
diff --git a/packages/astro/e2e/vue-component.test.js b/packages/astro/e2e/vue-component.test.js
index b64e3bf60509..435b71193cc1 100644
--- a/packages/astro/e2e/vue-component.test.js
+++ b/packages/astro/e2e/vue-component.test.js
@@ -3,7 +3,7 @@ import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/vue/' });
+		const fixture = await loadFixture({ root: './fixtures/vue-component/' });
 		await use(fixture);
 	},
 });
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 2f44b992d619..751f765672d4 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -150,8 +150,8 @@ export async function loadFixture(inlineConfig) {
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
 			const reset = () => {
-				console.log('reset::', fileUrl);
-				fs.writeFileSync(fileUrl, contents);
+				console.log('reset::', filePath);
+				fs.writeFileSync(filePath, contents);
 			}
 			// Only save this reset if not already in the map, in case multiple edits happen
 			// to the same file.

From 3b3c2d5efb27f19f2186adf85aca6917c0a34377 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 17:40:04 -0500
Subject: [PATCH 48/54] one last try, why is the HMR test hanging at cleanup?

---
 packages/astro/test/test-utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 751f765672d4..18b504957aea 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -150,8 +150,8 @@ export async function loadFixture(inlineConfig) {
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
 			const reset = () => {
-				console.log('reset::', filePath);
-				fs.writeFileSync(filePath, contents);
+				console.log('reset::', fileUrl.href);
+				fs.writeFileSync(fileUrl, contents);
 			}
 			// Only save this reset if not already in the map, in case multiple edits happen
 			// to the same file.

From 55f3f340d2b4e73888e9675f92a832a238c2a87c Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 17:44:31 -0500
Subject: [PATCH 49/54] resetting files after tailwind HMR test

---
 packages/astro/e2e/tailwindcss.test.js |  3 ++-
 packages/astro/test/test-utils.js      |  3 ++-
 pnpm-lock.yaml                         | 18 +++++++-----------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index 17e1b96bbf73..e29cb4870eb4 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -14,8 +14,9 @@ test.beforeEach(async ({ astro }) => {
 	devServer = await astro.startDevServer();
 });
 
-test.afterEach(async () => {
+test.afterEach(async ({ astro }) => {
 	await devServer.stop();
+	astro.resetAllFiles();
 });
 
 test.describe('Tailwind CSS', () => {
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 18b504957aea..997fd0c21cb8 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -150,8 +150,9 @@ export async function loadFixture(inlineConfig) {
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
 			const reset = () => {
-				console.log('reset::', fileUrl.href);
+				console.log('reset::', filePath);
 				fs.writeFileSync(fileUrl, contents);
+				console.log('reset::done', filePath);
 			}
 			// Only save this reset if not already in the map, in case multiple edits happen
 			// to the same file.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7589df19dc4f..df4c6e1a5f69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -661,7 +661,7 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
-  packages/astro/e2e/fixtures/lit:
+  packages/astro/e2e/fixtures/lit-component:
     specifiers:
       '@astrojs/lit': workspace:*
       '@webcomponents/template-shadowroot': ^0.1.0
@@ -679,7 +679,7 @@ importers:
     dependencies:
       astro: link:../../..
 
-  packages/astro/e2e/fixtures/preact:
+  packages/astro/e2e/fixtures/preact-component:
     specifiers:
       '@astrojs/preact': workspace:*
       astro: workspace:*
@@ -689,7 +689,7 @@ importers:
       astro: link:../../..
       preact: 10.7.2
 
-  packages/astro/e2e/fixtures/react:
+  packages/astro/e2e/fixtures/react-component:
     specifiers:
       '@astrojs/react': workspace:*
       astro: workspace:*
@@ -701,7 +701,7 @@ importers:
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
 
-  packages/astro/e2e/fixtures/solid:
+  packages/astro/e2e/fixtures/solid-component:
     specifiers:
       '@astrojs/solid-js': workspace:*
       astro: workspace:*
@@ -710,9 +710,9 @@ importers:
       '@astrojs/solid-js': link:../../../../integrations/solid
       astro: link:../../..
     devDependencies:
-      solid-js: 1.4.1
+      solid-js: 1.4.2
 
-  packages/astro/e2e/fixtures/svelte:
+  packages/astro/e2e/fixtures/svelte-component:
     specifiers:
       '@astrojs/svelte': workspace:*
       astro: workspace:*
@@ -730,7 +730,7 @@ importers:
       '@astrojs/tailwind': link:../../../../integrations/tailwind
       astro: link:../../..
 
-  packages/astro/e2e/fixtures/vue:
+  packages/astro/e2e/fixtures/vue-component:
     specifiers:
       '@astrojs/vue': workspace:*
       astro: workspace:*
@@ -12093,10 +12093,6 @@ packages:
     resolution: {integrity: sha512-BFCosxa4hRm+LF7S+kBL5bNr4RtuZif6AaR5FdQkBpV1E6QNLAOFm4HWgEN8vL2aCWEKl384cT8Etw8ziW8aag==}
     dev: false
 
-  /solid-js/1.4.1:
-    resolution: {integrity: sha512-ts480PccmUW9WAludSXET2dbBevjv+l6XMmN/OyG/a/xA8ZQoX4hNBN3gGhW785ZZv90fowbUSuSQUwOISm3YA==}
-    dev: true
-
   /solid-js/1.4.2:
     resolution: {integrity: sha512-IU5yKuT8P/n5F5g8j1rTXqxUdPYmoZDk/074TG94AEYf/nyXAeG82BSge4/lLIbCfUcnGUJ6DRdebIjujOAYyg==}
 

From 9d57c11133eb8b4df0ddb932a056f2e534626f98 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 22:50:41 -0500
Subject: [PATCH 50/54] create the onNextChange watcher before editFile is
 called

---
 packages/astro/e2e/tailwindcss.test.js | 4 +++-
 packages/astro/test/test-utils.js      | 4 ----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index e29cb4870eb4..1c0906309b74 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -55,12 +55,14 @@ test.describe('Tailwind CSS', () => {
 	test('HMR', async ({ page, astro }) => {
 	  await page.goto(astro.resolveUrl('/'));
 
+		const nextChange = astro.onNextChange();
+
 		await astro.editFile(
 			'./src/components/Button.astro',
 			(original) => original.replace('bg-purple-600', 'bg-purple-400')
 		);
 
-		await astro.onNextChange();
+		await nextChange;
 
 		const button = page.locator('button');
 		
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 997fd0c21cb8..1ea889f3ba10 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -146,13 +146,10 @@ export async function loadFixture(inlineConfig) {
 			return app;
 		},
 		editFile: async (filePath, newContentsOrCallback) => {
-			console.log('editFile::', filePath);
 			const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
 			const contents = await fs.promises.readFile(fileUrl, 'utf-8');
 			const reset = () => {
-				console.log('reset::', filePath);
 				fs.writeFileSync(fileUrl, contents);
-				console.log('reset::done', filePath);
 			}
 			// Only save this reset if not already in the map, in case multiple edits happen
 			// to the same file.
@@ -162,7 +159,6 @@ export async function loadFixture(inlineConfig) {
 			const newContents = typeof newContentsOrCallback === 'function'
 				? newContentsOrCallback(contents)
 				: newContentsOrCallback;
-			console.log('editFile::write', filePath);
 			await fs.promises.writeFile(fileUrl, newContents);
 			return reset;
 		},

From c71b267362792f400708370658bd7b51cf609f8e Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sat, 21 May 2022 23:04:16 -0500
Subject: [PATCH 51/54] moving the file changed sync into editFile()

---
 packages/astro/e2e/lit-component.test.js    |  2 --
 packages/astro/e2e/preact-component.test.js | 10 +++-------
 packages/astro/e2e/react-component.test.js  |  7 +------
 packages/astro/e2e/solid-component.test.js  |  6 +-----
 packages/astro/e2e/svelte-component.test.js |  6 ++----
 packages/astro/e2e/tailwindcss.test.js      |  4 ----
 packages/astro/e2e/vue-component.test.js    |  8 +++-----
 packages/astro/test/errors.test.js          |  2 --
 packages/astro/test/test-utils.js           | 13 ++++++++-----
 9 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js
index a5b5f0eaa6cb..72dd939f8014 100644
--- a/packages/astro/e2e/lit-component.test.js
+++ b/packages/astro/e2e/lit-component.test.js
@@ -96,8 +96,6 @@ test.describe.skip('Lit components', () => {
 			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
-		await astro.onNextChange();
-
 		const label = page.locator('#client-idle h1');
 		await expect(label).toHaveText('Hello, updated client:idle!')
 	});
diff --git a/packages/astro/e2e/preact-component.test.js b/packages/astro/e2e/preact-component.test.js
index 728588525bbd..97f4a5358712 100644
--- a/packages/astro/e2e/preact-component.test.js
+++ b/packages/astro/e2e/preact-component.test.js
@@ -109,17 +109,16 @@ test.describe('Preact components', () => {
 		await expect(label).toHaveText('Preact client:only component');
 	});
 
-	test.skip('HMR', async ({ page, astro }) => {
+	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
+
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		await astro.onNextChange();
-
 		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
@@ -129,11 +128,8 @@ test.describe('Preact components', () => {
 			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
 		);
 
-		await astro.onNextChange();
-
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
-
 		await expect(label).toHaveText('Updated preact client:only component');
 
 		// test 3: updating imported CSS
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index cf4564f9d904..d446f574fecb 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -109,7 +109,7 @@ test.describe('React components', () => {
 		await expect(label).toHaveText('React client:only component');
 	});
 
-	test.skip('HMR', async ({ page, astro }) => {
+	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		// test 1: updating the page component
@@ -118,8 +118,6 @@ test.describe('React components', () => {
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		await astro.onNextChange();
-
 		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
@@ -129,11 +127,8 @@ test.describe('React components', () => {
 			(original) => original.replace('React client:only component', 'Updated react client:only component')
 		);
 
-		await astro.onNextChange();
-
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
-
 		await expect(label).toHaveText('Updated react client:only component');
 
 		// test 3: updating imported CSS
diff --git a/packages/astro/e2e/solid-component.test.js b/packages/astro/e2e/solid-component.test.js
index c98df26499cc..89c48ed21a88 100644
--- a/packages/astro/e2e/solid-component.test.js
+++ b/packages/astro/e2e/solid-component.test.js
@@ -100,7 +100,7 @@ test.describe('Solid components', () => {
 		await expect(count).toHaveText('1');
 	});
 
-	test.skip('HMR', async ({ page, astro }) => {
+	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		// test 1: updating the page component
@@ -109,8 +109,6 @@ test.describe('Solid components', () => {
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		await astro.onNextChange();
-
 		const count = page.locator('#client-idle pre');
 		await expect(count).toHaveText('5');
 
@@ -120,8 +118,6 @@ test.describe('Solid components', () => {
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
-		await astro.onNextChange();
-
 		await expect(count).toHaveCSS('font-size', '24px');
 	});
 });
diff --git a/packages/astro/e2e/svelte-component.test.js b/packages/astro/e2e/svelte-component.test.js
index 656f457bf702..9f82cfb5b9d6 100644
--- a/packages/astro/e2e/svelte-component.test.js
+++ b/packages/astro/e2e/svelte-component.test.js
@@ -100,8 +100,8 @@ test.describe('Svelte components', () => {
 		await expect(count).toHaveText('1');
 	});
 
-	test.skip('HMR', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+	test('HMR', async ({ page, astro }) => {
+	  await page.goto(astro.resolveUrl('/'));
 
 		// test 1: updating the page component
 		await astro.editFile(
@@ -109,8 +109,6 @@ test.describe('Svelte components', () => {
 			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
-		await astro.onNextChange();
-
 		const label = page.locator('#client-idle-message');
 		await expect(label).toHaveText('Hello, updated client:idle!');
 	});
diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index 1c0906309b74..9b04127416da 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -55,15 +55,11 @@ test.describe('Tailwind CSS', () => {
 	test('HMR', async ({ page, astro }) => {
 	  await page.goto(astro.resolveUrl('/'));
 
-		const nextChange = astro.onNextChange();
-
 		await astro.editFile(
 			'./src/components/Button.astro',
 			(original) => original.replace('bg-purple-600', 'bg-purple-400')
 		);
 
-		await nextChange;
-
 		const button = page.locator('button');
 		
 		await expect(button, 'should have bg-purple-400').toHaveClass(/bg-purple-400/);
diff --git a/packages/astro/e2e/vue-component.test.js b/packages/astro/e2e/vue-component.test.js
index 435b71193cc1..12dfadfaa7af 100644
--- a/packages/astro/e2e/vue-component.test.js
+++ b/packages/astro/e2e/vue-component.test.js
@@ -126,17 +126,15 @@ test.describe('Vue components', () => {
 		await expect(count).toHaveText('1');
 	});
 
-	test.skip('HMR', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
-
+	test('HMR', async ({ page, astro }) => {
+	  await page.goto(astro.resolveUrl('/'));
+		
 		// test 1: updating the page component
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
 		);
 
-		await astro.onNextChange();
-
 		const label = page.locator('#client-visible h1');
 		await expect(label).toHaveText('Hello, updated client:visible!');
 	});
diff --git a/packages/astro/test/errors.test.js b/packages/astro/test/errors.test.js
index 7391d363e89e..2c5dbdbf35c2 100644
--- a/packages/astro/test/errors.test.js
+++ b/packages/astro/test/errors.test.js
@@ -52,9 +52,7 @@ describe('Error display', () => {
 			expect($('.statusMessage').text()).to.equal('Internal Error');
 
 			// 2. Edit the file, fixing the error
-			let changeOccured = fixture.onNextChange();
 			await fixture.editFile('./src/components/SvelteSyntaxError.svelte', `<h1>No mismatch</h1>`);
-			await changeOccured;
 
 			// 3. Verify that the file is fixed.
 			html = await fixture.fetch('/svelte-syntax-error').then((res) => res.text());
diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js
index 1ea889f3ba10..8fd5393c0184 100644
--- a/packages/astro/test/test-utils.js
+++ b/packages/astro/test/test-utils.js
@@ -109,6 +109,11 @@ export async function loadFixture(inlineConfig) {
 		fileEdits.clear();
 	};
 
+	const onNextChange = () =>
+		devServer
+			? new Promise((resolve) => devServer.watcher.once('change', resolve))
+			: Promise.reject(new Error('No dev server running'))
+
 	// After each test, reset each of the edits to their original contents.
 	if (typeof afterEach === 'function') {
 		afterEach(resetAllFiles);
@@ -159,14 +164,12 @@ export async function loadFixture(inlineConfig) {
 			const newContents = typeof newContentsOrCallback === 'function'
 				? newContentsOrCallback(contents)
 				: newContentsOrCallback;
+			const nextChange = onNextChange();
 			await fs.promises.writeFile(fileUrl, newContents);
+			await nextChange;
 			return reset;
 		},
-		resetAllFiles,
-		onNextChange: () =>
-			devServer
-				? new Promise((resolve) => devServer.watcher.once('change', resolve))
-				: Promise.reject(new Error('No dev server running')),
+		resetAllFiles
 	};
 }
 

From 7f9d4d782a29395d1f6febf7b0c59f05231f298d Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 22 May 2022 10:59:01 -0500
Subject: [PATCH 52/54] code refactor + Astro Component HMR test

---
 packages/astro/e2e/astro-component.test.js    | 38 +++++++++++
 .../fixtures/astro-component/astro.config.mjs |  4 ++
 .../e2e/fixtures/astro-component/package.json |  8 +++
 .../src/components/Counter.css                | 11 +++
 .../src/components/Counter.jsx                | 20 ++++++
 .../astro-component/src/components/Hero.astro | 25 +++++++
 .../src/components/JSXComponent.jsx           |  5 ++
 .../astro-component/src/pages/index.astro     | 16 +++++
 packages/astro/e2e/lit-component.test.js      | 38 ++++++-----
 packages/astro/e2e/preact-component.test.js   | 57 ++++++++--------
 packages/astro/e2e/react-component.test.js    | 58 ++++++++--------
 packages/astro/e2e/solid-component.test.js    | 48 ++++++-------
 packages/astro/e2e/svelte-component.test.js   | 67 +++++++++----------
 packages/astro/e2e/vue-component.test.js      | 58 ++++++++--------
 pnpm-lock.yaml                                |  6 ++
 15 files changed, 301 insertions(+), 158 deletions(-)
 create mode 100644 packages/astro/e2e/astro-component.test.js
 create mode 100644 packages/astro/e2e/fixtures/astro-component/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/astro-component/package.json
 create mode 100644 packages/astro/e2e/fixtures/astro-component/src/components/Counter.css
 create mode 100644 packages/astro/e2e/fixtures/astro-component/src/components/Counter.jsx
 create mode 100644 packages/astro/e2e/fixtures/astro-component/src/components/Hero.astro
 create mode 100644 packages/astro/e2e/fixtures/astro-component/src/components/JSXComponent.jsx
 create mode 100644 packages/astro/e2e/fixtures/astro-component/src/pages/index.astro

diff --git a/packages/astro/e2e/astro-component.test.js b/packages/astro/e2e/astro-component.test.js
new file mode 100644
index 000000000000..0fcc2e205b62
--- /dev/null
+++ b/packages/astro/e2e/astro-component.test.js
@@ -0,0 +1,38 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/astro-component/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeEach(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterEach(async () => {
+	await devServer.stop();
+});
+
+test.describe('Astro components', () => {
+	test('HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		// 1: Verify the initial styles are loaded
+		const hero = page.locator('section');
+		await expect(hero).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+		await expect(hero).toHaveCSS('color', 'rgb(0, 0, 0)');
+
+		// 2: Edit the Hero component with a new background color
+		await astro.editFile('./src/components/Hero.astro', (content) =>
+			content.replace('background: white', 'background: rgb(230, 230, 230)')
+		);
+
+		// 3: Verify the background color was updated in the browser window
+		await expect(hero).toHaveCSS('background-color', 'rgb(230, 230, 230)');
+	});
+});
diff --git a/packages/astro/e2e/fixtures/astro-component/astro.config.mjs b/packages/astro/e2e/fixtures/astro-component/astro.config.mjs
new file mode 100644
index 000000000000..882e6515a67e
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/astro.config.mjs
@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});
diff --git a/packages/astro/e2e/fixtures/astro-component/package.json b/packages/astro/e2e/fixtures/astro-component/package.json
new file mode 100644
index 000000000000..33a3778344a2
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@e2e/astro-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/astro-component/src/components/Counter.css b/packages/astro/e2e/fixtures/astro-component/src/components/Counter.css
new file mode 100644
index 000000000000..fb21044d78cc
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/src/components/Counter.css
@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}
diff --git a/packages/astro/e2e/fixtures/astro-component/src/components/Counter.jsx b/packages/astro/e2e/fixtures/astro-component/src/components/Counter.jsx
new file mode 100644
index 000000000000..526f269639b5
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/src/components/Counter.jsx
@@ -0,0 +1,20 @@
+import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import './Counter.css';
+
+export default function Counter({ children, count: initialCount, id }) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/astro-component/src/components/Hero.astro b/packages/astro/e2e/fixtures/astro-component/src/components/Hero.astro
new file mode 100644
index 000000000000..680a5f639d74
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/src/components/Hero.astro
@@ -0,0 +1,25 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<section>
+	<h1>{title}</h1>
+	<slot />
+</section>
+
+<style>
+section {
+	width: 100%;
+	height: 80vh;
+	background: white;
+	color: black;
+}
+
+h1 {
+	text-align: center;
+}
+</style>
diff --git a/packages/astro/e2e/fixtures/astro-component/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/astro-component/src/components/JSXComponent.jsx
new file mode 100644
index 000000000000..6cc7b7858c58
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/src/components/JSXComponent.jsx
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function({ id }) {
+	return <div id={id}>Preact client:only component</div>
+}
diff --git a/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro b/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro
new file mode 100644
index 000000000000..a52ee713f244
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import Hero from '../components/Hero.astro';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<main>
+			<Hero title="Astro Components">
+				Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+			</Hero>
+		</main>
+  </body>
+</html>
diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js
index 72dd939f8014..5f40dbd81ea0 100644
--- a/packages/astro/e2e/lit-component.test.js
+++ b/packages/astro/e2e/lit-component.test.js
@@ -25,78 +25,80 @@ test.describe.skip('Lit components', () => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
+		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
 		const inc = counter.locator('button');
 		await inc.click();
 
-		await expect(count).toHaveText('Count: 1');
+		await expect(count, 'count incremented by 1').toHaveText('Count: 1');
 	});
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-load');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
+		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
 		const inc = counter.locator('button');
 		await inc.click();
 
-		await expect(count).toHaveText('Count: 1');
+		await expect(count, 'count incremented by 1').toHaveText('Count: 1');
 	});
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
+		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
+		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
 		const inc = counter.locator('button');
 		await inc.click();
 
-		await expect(count).toHaveText('Count: 1');
+		await expect(count, 'count incremented by 1').toHaveText('Count: 1');
 	});
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/media'));
 	
 		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('p');
-		await expect(count).toHaveText('Count: 0');
+		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
-		// test 1: not hydrated on large screens
 		const inc = counter.locator('button');
 		await inc.click();
-		await expect(count).toHaveText('Count: 0');
 
-		// test 2: hydrated on mobile (max-width: 50rem)
+		await expect(count, 'component not hydrated yet').toHaveText('Count: 0');
+
+		// Reset the viewport to hydrate the component (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
+
 		await inc.click();
-		await expect(count).toHaveText('Count: 1');
+		await expect(count, 'count incremented by 1').toHaveText('Count: 1');
 	});
 
 	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		// test 1: updating the page component
+		const label = page.locator('#client-idle h1');
+
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
-		const label = page.locator('#client-idle h1');
-		await expect(label).toHaveText('Hello, updated client:idle!')
+		await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!')
 	});
 });
diff --git a/packages/astro/e2e/preact-component.test.js b/packages/astro/e2e/preact-component.test.js
index 97f4a5358712..429d7cc1f0c3 100644
--- a/packages/astro/e2e/preact-component.test.js
+++ b/packages/astro/e2e/preact-component.test.js
@@ -23,121 +23,122 @@ test.describe('Preact components', () => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#server-only');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('0');
+		await expect(count, 'count incremented by 1').toHaveText('0');
 	});
 
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-load');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
+		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
-		// test 1: not hydrated on large screens
 		const inc = counter.locator('.increment');
 		await inc.click();
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated yet').toHaveText('0');
 
-		// test 2: hydrated on mobile (max-width: 50rem)
+		// Reset the viewport to hydrate the component (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
 		await inc.click();
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const label = page.locator('#client-only');
-		await expect(label).toBeVisible();
+		await expect(label, 'component is visible').toBeVisible();
 
-		await expect(label).toHaveText('Preact client:only component');
+		await expect(label, 'slot text is visible').toHaveText('Preact client:only component');
 	});
 
 	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
+		const count = page.locator('#client-idle pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
-		// test 1: updating the page component
+		// Edit the component's initial count prop
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		const count = page.locator('#client-idle pre');
-		await expect(count).toHaveText('5');
+		await expect(count, 'count prop updated').toHaveText('5');
 
-		// test 2: updating the preact component
+		// Edit the component's slot text
 		await astro.editFile(
 			'./src/components/JSXComponent.jsx',
 			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
 		);
 
 		const label = page.locator('#client-only');
-		await expect(label).toBeVisible();
-		await expect(label).toHaveText('Updated preact client:only component');
+		await expect(label, 'client:only component is visible').toBeVisible();
+		await expect(label, 'client:only slot text is visible').toHaveText('Updated preact client:only component');
 
-		// test 3: updating imported CSS
+		// Edit the imported CSS file
 		await astro.editFile(
 			'./src/components/Counter.css',
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
-		await expect(count).toHaveCSS('font-size', '24px');
+		await expect(count, 'imported styles updated').toHaveCSS('font-size', '24px');
 	});
 });
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index d446f574fecb..38fac4828e19 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -23,120 +23,122 @@ test.describe('React components', () => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#server-only');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated').toHaveText('0');
 	});
 
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-load');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
+		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
-		// test 1: not hydrated on large screens
 		const inc = counter.locator('.increment');
 		await inc.click();
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated yet').toHaveText('0');
 
-		// test 2: hydrated on mobile (max-width: 50rem)
+		// Reset the viewport to hydrate the component (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
 		await inc.click();
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 	
 		const label = page.locator('#client-only');
-		await expect(label).toBeVisible();
+		await expect(label, 'component is visible').toBeVisible();
 
-		await expect(label).toHaveText('React client:only component');
+		await expect(label, 'slot text is visible').toHaveText('React client:only component');
 	});
 
 	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
+
+		const count = page.locator('#client-idle pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
 	
-		// test 1: updating the page component
+		// Edit the component's initial count prop
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		const count = page.locator('#client-idle pre');
-		await expect(count).toHaveText('5');
+		await expect(count, 'count prop updated').toHaveText('5');
 
-		// test 2: updating the react component
+		// Edit the component's slot text
 		await astro.editFile(
 			'./src/components/JSXComponent.jsx',
 			(original) => original.replace('React client:only component', 'Updated react client:only component')
 		);
 
 		const label = page.locator('#client-only');
-		await expect(label).toBeVisible();
-		await expect(label).toHaveText('Updated react client:only component');
+		await expect(label, 'client:only component is visible').toBeVisible();
+		await expect(label, 'client:only slot text is visible').toHaveText('Updated react client:only component');
 
-		// test 3: updating imported CSS
+		// Edit the imported CSS file
 		await astro.editFile(
 			'./src/components/Counter.css',
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
-		await expect(count).toHaveCSS('font-size', '24px');
+		await expect(count, 'imported CSS updated').toHaveCSS('font-size', '24px');
 	});
 });
diff --git a/packages/astro/e2e/solid-component.test.js b/packages/astro/e2e/solid-component.test.js
index 89c48ed21a88..907c467c40cd 100644
--- a/packages/astro/e2e/solid-component.test.js
+++ b/packages/astro/e2e/solid-component.test.js
@@ -23,101 +23,103 @@ test.describe('Solid components', () => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#server-only');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated').toHaveText('0');
 	});
 
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-load');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
+		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
-		// test 1: not hydrated on large screens
 		const inc = counter.locator('.increment');
 		await inc.click();
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated yet').toHaveText('0');
 
-		// test 2: hydrated on mobile (max-width: 50rem)
+		// Reset the viewport to hydrate the component (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
 		await inc.click();
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		// test 1: updating the page component
+		const count = page.locator('#client-idle pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		// Edit the component's initial count prop
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
-		const count = page.locator('#client-idle pre');
-		await expect(count).toHaveText('5');
+		await expect(count, 'count prop updated').toHaveText('5');
 
-		// test 2: updating imported CSS
+		// Edit the imported CSS
 		await astro.editFile(
 			'./src/components/Counter.css',
 			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
-		await expect(count).toHaveCSS('font-size', '24px');
+		await expect(count, 'imported CSS updated').toHaveCSS('font-size', '24px');
 	});
 });
diff --git a/packages/astro/e2e/svelte-component.test.js b/packages/astro/e2e/svelte-component.test.js
index 9f82cfb5b9d6..65d9ea68ef5a 100644
--- a/packages/astro/e2e/svelte-component.test.js
+++ b/packages/astro/e2e/svelte-component.test.js
@@ -20,96 +20,95 @@ test.afterEach(async () => {
 
 test.describe('Svelte components', () => {
 	test('server only', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#server-only');
-		await expect(counter).toBeVisible();
-		
+		await expect(counter, 'component is visible').toBeVisible();
+
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated').toHaveText('0');
 	});
 
 	test('client:idle', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
-		
+		await expect(counter, 'component is visible').toBeVisible();
+
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:load', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-load');
-		await expect(counter).toBeVisible();
-		
+		await expect(counter, 'component is visible').toBeVisible();
+
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:visible', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
+		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
-		await expect(counter).toBeVisible();
-		
+		await expect(counter, 'component is visible').toBeVisible();
+
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:media', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
-		
+		await expect(counter, 'component is visible').toBeVisible();
+
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
-		// test 1: not hydrated on large screens
 		const inc = counter.locator('.increment');
 		await inc.click();
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated yet').toHaveText('0');
 
-		// test 2: hydrated on mobile (max-width: 50rem)
+		// Reset the viewport to hydrate the component (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
 		await inc.click();
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('HMR', async ({ page, astro }) => {
-	  await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
-		// test 1: updating the page component
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
+		// Edit the component's slot text
+		await astro.editFile('./src/pages/index.astro', (original) =>
+			original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
 		const label = page.locator('#client-idle-message');
-		await expect(label).toHaveText('Hello, updated client:idle!');
+		await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!');
 	});
 });
diff --git a/packages/astro/e2e/vue-component.test.js b/packages/astro/e2e/vue-component.test.js
index 12dfadfaa7af..2ec4a4c10d95 100644
--- a/packages/astro/e2e/vue-component.test.js
+++ b/packages/astro/e2e/vue-component.test.js
@@ -23,35 +23,36 @@ test.describe('Vue components', () => {
 	await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#server-only');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated').toHaveText('0');
 	});
 
 	test('client:idle', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-idle');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:load', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
+		// Multiple counters on the page to verify islands aren't sharing state
 		const counter = page.locator('#client-load');
 		const counterDup = page.locator('#client-load-dup');
 		const counterStep = page.locator('#client-load-step');
@@ -68,74 +69,77 @@ test.describe('Vue components', () => {
 		const countDupInc = counterDup.locator('.increment');
 		const countStepInc = counterStep.locator('.increment');
 
+		// Should only increment the first counter
 		await countInc.click();
 
-		await expect(count).toHaveText('1');
-		await expect(countDup).toHaveText('0');
-		await expect(countStep).toHaveText('0');
+		await expect(count, 'intial count is 1').toHaveText('1');
+		await expect(countDup, 'initial count is 0').toHaveText('0');
+		await expect(countStep, 'initial count is 0').toHaveText('0');
 
+		// Should only increment the second counter
 		await countDupInc.click();
 
-		await expect(count).toHaveText('1');
-		await expect(countDup).toHaveText('1');
-		await expect(countStep).toHaveText('0');
+		await expect(count, "count didn't change").toHaveText('1');
+		await expect(countDup, 'count incremented by 1').toHaveText('1');
+		await expect(countStep, "count didn't change").toHaveText('0');
 
+		// Should only increment the third counter
+		// Expecting an increase of 4 becasuse the component's
+		// step is set to 2
 		await countStepInc.click();
 		await countStepInc.click();
 
-		await expect(count).toHaveText('1');
-		await expect(countDup).toHaveText('1');
-		await expect(countStep).toHaveText('4');
+		await expect(count, "count didn't change").toHaveText('1');
+		await expect(countDup, "count didn't change").toHaveText('1');
+		await expect(countStep, 'count incremented by 4').toHaveText('4');
 	});
 
 	test('client:visible', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
+		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
-
-		await counter.scrollIntoViewIfNeeded();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
 		const inc = counter.locator('.increment');
 		await inc.click();
 
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('client:media', async ({ page, astro }) => {
 	await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-media');
-		await expect(counter).toBeVisible();
+		await expect(counter, 'component is visible').toBeVisible();
 		
 		const count = counter.locator('pre');
-		await expect(count).toHaveText('0');
+		await expect(count, 'initial count is 0').toHaveText('0');
 
-		// test 1: not hydrated on large screens
 		const inc = counter.locator('.increment');
 		await inc.click();
-		await expect(count).toHaveText('0');
+		await expect(count, 'component not hydrated yet').toHaveText('0');
 
-		// test 2: hydrated on mobile (max-width: 50rem)
+		// Reset the viewport to hydrate the component (max-width: 50rem)
 		await page.setViewportSize({ width: 414, height: 1124 });
 		await inc.click();
-		await expect(count).toHaveText('1');
+		await expect(count, 'count incremented by 1').toHaveText('1');
 	});
 
 	test('HMR', async ({ page, astro }) => {
 	  await page.goto(astro.resolveUrl('/'));
 		
-		// test 1: updating the page component
+		// Edit the component's slot text
 		await astro.editFile(
 			'./src/pages/index.astro',
 			(original) => original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
 		);
 
 		const label = page.locator('#client-visible h1');
-		await expect(label).toHaveText('Hello, updated client:visible!');
+		await expect(label, 'slotted text updated').toHaveText('Hello, updated client:visible!');
 	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df4c6e1a5f69..5a0ab26f1134 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -661,6 +661,12 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
+  packages/astro/e2e/fixtures/astro-component:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/e2e/fixtures/lit-component:
     specifiers:
       '@astrojs/lit': workspace:*

From c93691b7af7e11ce27f2652cac1abc224dc884ee Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 22 May 2022 11:05:18 -0500
Subject: [PATCH 53/54] chore: lint fixes

---
 packages/astro/e2e/astro-component.test.js  | 16 +++++---
 packages/astro/e2e/lit-component.test.js    | 23 ++++++-----
 packages/astro/e2e/nested-styles.test.js    |  2 +-
 packages/astro/e2e/preact-component.test.js | 41 ++++++++++----------
 packages/astro/e2e/react-component.test.js  | 43 ++++++++++-----------
 packages/astro/e2e/solid-component.test.js  | 20 +++++-----
 packages/astro/e2e/tailwindcss.test.js      | 13 +++----
 packages/astro/e2e/test-utils.js            |  1 -
 packages/astro/e2e/vue-component.test.js    | 29 +++++++-------
 9 files changed, 92 insertions(+), 96 deletions(-)

diff --git a/packages/astro/e2e/astro-component.test.js b/packages/astro/e2e/astro-component.test.js
index 0fcc2e205b62..65499499f791 100644
--- a/packages/astro/e2e/astro-component.test.js
+++ b/packages/astro/e2e/astro-component.test.js
@@ -22,17 +22,21 @@ test.describe('Astro components', () => {
 	test('HMR', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		// 1: Verify the initial styles are loaded
 		const hero = page.locator('section');
-		await expect(hero).toHaveCSS('background-color', 'rgb(255, 255, 255)');
-		await expect(hero).toHaveCSS('color', 'rgb(0, 0, 0)');
+		await expect(hero, 'hero has background: white').toHaveCSS(
+			'background-color',
+			'rgb(255, 255, 255)'
+		);
+		await expect(hero, 'hero has color: black').toHaveCSS('color', 'rgb(0, 0, 0)');
 
-		// 2: Edit the Hero component with a new background color
+		// Edit the Hero component with a new background color
 		await astro.editFile('./src/components/Hero.astro', (content) =>
 			content.replace('background: white', 'background: rgb(230, 230, 230)')
 		);
 
-		// 3: Verify the background color was updated in the browser window
-		await expect(hero).toHaveCSS('background-color', 'rgb(230, 230, 230)');
+		await expect(hero, 'background color updated').toHaveCSS(
+			'background-color',
+			'rgb(230, 230, 230)'
+		);
 	});
 });
diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js
index 5f40dbd81ea0..b3f48a3af304 100644
--- a/packages/astro/e2e/lit-component.test.js
+++ b/packages/astro/e2e/lit-component.test.js
@@ -23,10 +23,10 @@ test.afterEach(async () => {
 test.describe.skip('Lit components', () => {
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-idle');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('p');
 		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
@@ -38,10 +38,10 @@ test.describe.skip('Lit components', () => {
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-load');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('p');
 		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
@@ -53,12 +53,12 @@ test.describe.skip('Lit components', () => {
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('p');
 		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
@@ -70,10 +70,10 @@ test.describe.skip('Lit components', () => {
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/media'));
-	
+
 		const counter = page.locator('#client-media');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('p');
 		await expect(count, 'initial count is 0').toHaveText('Count: 0');
 
@@ -94,11 +94,10 @@ test.describe.skip('Lit components', () => {
 
 		const label = page.locator('#client-idle h1');
 
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
+		await astro.editFile('./src/pages/index.astro', (original) =>
+			original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
 		);
 
-		await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!')
+		await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!');
 	});
 });
diff --git a/packages/astro/e2e/nested-styles.test.js b/packages/astro/e2e/nested-styles.test.js
index f405d5a31928..ff7dbac30a8f 100644
--- a/packages/astro/e2e/nested-styles.test.js
+++ b/packages/astro/e2e/nested-styles.test.js
@@ -21,7 +21,7 @@ test.afterEach(async () => {
 test.describe('Loading styles that are nested', () => {
 	test('header', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const header = page.locator('header');
 
 		await expect(header, 'should have background color').toHaveCSS(
diff --git a/packages/astro/e2e/preact-component.test.js b/packages/astro/e2e/preact-component.test.js
index 429d7cc1f0c3..7eca69044f72 100644
--- a/packages/astro/e2e/preact-component.test.js
+++ b/packages/astro/e2e/preact-component.test.js
@@ -21,10 +21,10 @@ test.afterEach(async () => {
 test.describe('Preact components', () => {
 	test('server only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#server-only');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -36,10 +36,10 @@ test.describe('Preact components', () => {
 
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-idle');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -51,10 +51,10 @@ test.describe('Preact components', () => {
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-load');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -66,12 +66,12 @@ test.describe('Preact components', () => {
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -83,10 +83,10 @@ test.describe('Preact components', () => {
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-media');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -102,7 +102,7 @@ test.describe('Preact components', () => {
 
 	test('client:only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const label = page.locator('#client-only');
 		await expect(label, 'component is visible').toBeVisible();
 
@@ -116,27 +116,26 @@ test.describe('Preact components', () => {
 		await expect(count, 'initial count is 0').toHaveText('0');
 
 		// Edit the component's initial count prop
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
+		await astro.editFile('./src/pages/index.astro', (original) =>
+			original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
 		await expect(count, 'count prop updated').toHaveText('5');
 
 		// Edit the component's slot text
-		await astro.editFile(
-			'./src/components/JSXComponent.jsx',
-			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
+		await astro.editFile('./src/components/JSXComponent.jsx', (original) =>
+			original.replace('Preact client:only component', 'Updated preact client:only component')
 		);
 
 		const label = page.locator('#client-only');
 		await expect(label, 'client:only component is visible').toBeVisible();
-		await expect(label, 'client:only slot text is visible').toHaveText('Updated preact client:only component');
+		await expect(label, 'client:only slot text is visible').toHaveText(
+			'Updated preact client:only component'
+		);
 
 		// Edit the imported CSS file
-		await astro.editFile(
-			'./src/components/Counter.css',
-			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		await astro.editFile('./src/components/Counter.css', (original) =>
+			original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
 		await expect(count, 'imported styles updated').toHaveCSS('font-size', '24px');
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index 38fac4828e19..2dded1e6d0a9 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -21,10 +21,10 @@ test.afterEach(async () => {
 test.describe('React components', () => {
 	test('server only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#server-only');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -36,10 +36,10 @@ test.describe('React components', () => {
 
 	test('client:idle', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-idle');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -51,10 +51,10 @@ test.describe('React components', () => {
 
 	test('client:load', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-load');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -66,12 +66,12 @@ test.describe('React components', () => {
 
 	test('client:visible', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -83,10 +83,10 @@ test.describe('React components', () => {
 
 	test('client:media', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const counter = page.locator('#client-media');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -102,7 +102,7 @@ test.describe('React components', () => {
 
 	test('client:only', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
-	
+
 		const label = page.locator('#client-only');
 		await expect(label, 'component is visible').toBeVisible();
 
@@ -114,29 +114,28 @@ test.describe('React components', () => {
 
 		const count = page.locator('#client-idle pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
-	
+
 		// Edit the component's initial count prop
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
+		await astro.editFile('./src/pages/index.astro', (original) =>
+			original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
 		await expect(count, 'count prop updated').toHaveText('5');
 
 		// Edit the component's slot text
-		await astro.editFile(
-			'./src/components/JSXComponent.jsx',
-			(original) => original.replace('React client:only component', 'Updated react client:only component')
+		await astro.editFile('./src/components/JSXComponent.jsx', (original) =>
+			original.replace('React client:only component', 'Updated react client:only component')
 		);
 
 		const label = page.locator('#client-only');
 		await expect(label, 'client:only component is visible').toBeVisible();
-		await expect(label, 'client:only slot text is visible').toHaveText('Updated react client:only component');
+		await expect(label, 'client:only slot text is visible').toHaveText(
+			'Updated react client:only component'
+		);
 
 		// Edit the imported CSS file
-		await astro.editFile(
-			'./src/components/Counter.css',
-			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		await astro.editFile('./src/components/Counter.css', (original) =>
+			original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
 		await expect(count, 'imported CSS updated').toHaveCSS('font-size', '24px');
diff --git a/packages/astro/e2e/solid-component.test.js b/packages/astro/e2e/solid-component.test.js
index 907c467c40cd..f02b76f65081 100644
--- a/packages/astro/e2e/solid-component.test.js
+++ b/packages/astro/e2e/solid-component.test.js
@@ -24,7 +24,7 @@ test.describe('Solid components', () => {
 
 		const counter = page.locator('#server-only');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -39,7 +39,7 @@ test.describe('Solid components', () => {
 
 		const counter = page.locator('#client-idle');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -54,7 +54,7 @@ test.describe('Solid components', () => {
 
 		const counter = page.locator('#client-load');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -71,7 +71,7 @@ test.describe('Solid components', () => {
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -86,7 +86,7 @@ test.describe('Solid components', () => {
 
 		const counter = page.locator('#client-media');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -107,17 +107,15 @@ test.describe('Solid components', () => {
 		await expect(count, 'initial count is 0').toHaveText('0');
 
 		// Edit the component's initial count prop
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
+		await astro.editFile('./src/pages/index.astro', (original) =>
+			original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
 		);
 
 		await expect(count, 'count prop updated').toHaveText('5');
 
 		// Edit the imported CSS
-		await astro.editFile(
-			'./src/components/Counter.css',
-			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		await astro.editFile('./src/components/Counter.css', (original) =>
+			original.replace('font-size: 2em;', 'font-size: 24px;')
 		);
 
 		await expect(count, 'imported CSS updated').toHaveCSS('font-size', '24px');
diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js
index 9b04127416da..acfa9b724cac 100644
--- a/packages/astro/e2e/tailwindcss.test.js
+++ b/packages/astro/e2e/tailwindcss.test.js
@@ -21,7 +21,7 @@ test.afterEach(async ({ astro }) => {
 
 test.describe('Tailwind CSS', () => {
 	test('body', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const body = page.locator('body');
 
@@ -34,7 +34,7 @@ test.describe('Tailwind CSS', () => {
 	});
 
 	test('button', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const button = page.locator('button');
 
@@ -53,15 +53,14 @@ test.describe('Tailwind CSS', () => {
 	});
 
 	test('HMR', async ({ page, astro }) => {
-	  await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
-		await astro.editFile(
-			'./src/components/Button.astro',
-			(original) => original.replace('bg-purple-600', 'bg-purple-400')
+		await astro.editFile('./src/components/Button.astro', (original) =>
+			original.replace('bg-purple-600', 'bg-purple-400')
 		);
 
 		const button = page.locator('button');
-		
+
 		await expect(button, 'should have bg-purple-400').toHaveClass(/bg-purple-400/);
 		await expect(button, 'should have background color').toHaveCSS(
 			'background-color',
diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 5628bd575e21..71d8a26fa45c 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -11,4 +11,3 @@ export function loadFixture(inlineConfig) {
 		root: new URL(inlineConfig.root, import.meta.url).toString(),
 	});
 }
-
diff --git a/packages/astro/e2e/vue-component.test.js b/packages/astro/e2e/vue-component.test.js
index 2ec4a4c10d95..28b5e3fd0439 100644
--- a/packages/astro/e2e/vue-component.test.js
+++ b/packages/astro/e2e/vue-component.test.js
@@ -20,11 +20,11 @@ test.afterEach(async () => {
 
 test.describe('Vue components', () => {
 	test('server only', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#server-only');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -35,11 +35,11 @@ test.describe('Vue components', () => {
 	});
 
 	test('client:idle', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-idle');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -50,7 +50,7 @@ test.describe('Vue components', () => {
 	});
 
 	test('client:load', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		// Multiple counters on the page to verify islands aren't sharing state
 		const counter = page.locator('#client-load');
@@ -60,7 +60,7 @@ test.describe('Vue components', () => {
 		await expect(counter).toBeVisible();
 		await expect(counterDup).toBeVisible();
 		await expect(counterStep).toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		const countDup = counterDup.locator('pre');
 		const countStep = counterStep.locator('pre');
@@ -95,13 +95,13 @@ test.describe('Vue components', () => {
 	});
 
 	test('client:visible', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		// Make sure the component is on screen to trigger hydration
 		const counter = page.locator('#client-visible');
 		await counter.scrollIntoViewIfNeeded();
 		await expect(counter).toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -112,11 +112,11 @@ test.describe('Vue components', () => {
 	});
 
 	test('client:media', async ({ page, astro }) => {
-	await page.goto(astro.resolveUrl('/'));
+		await page.goto(astro.resolveUrl('/'));
 
 		const counter = page.locator('#client-media');
 		await expect(counter, 'component is visible').toBeVisible();
-		
+
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
@@ -131,12 +131,11 @@ test.describe('Vue components', () => {
 	});
 
 	test('HMR', async ({ page, astro }) => {
-	  await page.goto(astro.resolveUrl('/'));
-		
+		await page.goto(astro.resolveUrl('/'));
+
 		// Edit the component's slot text
-		await astro.editFile(
-			'./src/pages/index.astro',
-			(original) => original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
+		await astro.editFile('./src/pages/index.astro', (original) =>
+			original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
 		);
 
 		const label = page.locator('#client-visible h1');

From a0c9cb5a6e86d3661ac82658297a66a1748b1af8 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 22 May 2022 11:28:38 -0500
Subject: [PATCH 54/54] adding a test suite for the framework-multiple example
 app

---
 .../multiple-frameworks/astro.config.mjs      |  12 ++
 .../fixtures/multiple-frameworks/package.json |  24 +++
 .../src/components/A.astro                    |   7 +
 .../src/components/B.astro                    |   7 +
 .../src/components/LitCounter.js              |  33 ++++
 .../src/components/PreactCounter.tsx          |  19 +++
 .../src/components/ReactCounter.jsx           |  19 +++
 .../src/components/SolidCounter.tsx           |  19 +++
 .../src/components/SvelteCounter.svelte       |  29 ++++
 .../src/components/VueCounter.vue             |  34 +++++
 .../src/components/index.ts                   |   2 +
 .../multiple-frameworks/src/pages/index.astro |  50 +++++++
 .../multiple-frameworks/src/styles/global.css |  21 +++
 .../astro/e2e/multiple-frameworks.test.js     | 141 ++++++++++++++++++
 pnpm-lock.yaml                                |  35 +++++
 15 files changed, 452 insertions(+)
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/package.json
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/A.astro
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/B.astro
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/LitCounter.js
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/SolidCounter.tsx
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/SvelteCounter.svelte
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/VueCounter.vue
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/components/index.ts
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/pages/index.astro
 create mode 100644 packages/astro/e2e/fixtures/multiple-frameworks/src/styles/global.css
 create mode 100644 packages/astro/e2e/multiple-frameworks.test.js

diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs b/packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs
new file mode 100644
index 000000000000..4b50887cd70c
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs
@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+
+// https://astro.build/config
+export default defineConfig({
+	// Enable many frameworks to support all different kinds of components.
+	integrations: [preact(), react(), svelte(), vue(), solid()],
+});
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/package.json b/packages/astro/e2e/fixtures/multiple-frameworks/package.json
new file mode 100644
index 000000000000..ab0dd06bc348
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@e2e/multiple-frameworks",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@astrojs/lit": "^0.1.3",
+    "@astrojs/preact": "^0.1.2",
+    "@astrojs/react": "^0.1.2",
+    "@astrojs/solid-js": "^0.1.2",
+    "@astrojs/svelte": "^0.1.3",
+    "@astrojs/vue": "^0.1.4",
+    "astro": "^1.0.0-beta.31"
+  },
+  "dependencies": {
+    "@webcomponents/template-shadowroot": "^0.1.0",
+    "lit": "^2.2.4",
+    "preact": "^10.7.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "solid-js": "^1.4.2",
+    "svelte": "^3.48.0",
+    "vue": "^3.2.34"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/A.astro b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/A.astro
new file mode 100644
index 000000000000..b2c223a292b2
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/A.astro
@@ -0,0 +1,7 @@
+---
+const { id } = Astro.props
+---
+
+<div id={id} class="children">
+	<h1>Hello Astro (A)</h1>
+</div>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/B.astro b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/B.astro
new file mode 100644
index 000000000000..339f63735a22
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/B.astro
@@ -0,0 +1,7 @@
+---
+const { id } = Astro.props
+---
+
+<div id={id} class="children">
+	<h1>Hello Astro (B)</h1>
+</div>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/LitCounter.js b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/LitCounter.js
new file mode 100644
index 000000000000..883a7581da9a
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/LitCounter.js
@@ -0,0 +1,33 @@
+import { LitElement, html } from 'lit';
+
+export const tagName = 'my-counter';
+
+class Counter extends LitElement {
+	static get properties() {
+		return {
+			count: {
+				type: Number,
+			},
+		};
+	}
+
+	constructor() {
+		super();
+		this.count = 0;
+	}
+
+	increment() {
+		this.count++;
+	}
+
+	render() {
+		return html`
+			<div>
+				<p>Count: ${this.count}</p>
+				<button type="button" @click=${this.increment}>Increment</button>
+			</div>
+		`;
+	}
+}
+
+customElements.define(tagName, Counter);
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx
new file mode 100644
index 000000000000..af2258fdfe8f
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx
@@ -0,0 +1,19 @@
+import { useState } from 'preact/hooks';
+
+/** a counter written in Preact */
+export function PreactCounter({ children, id }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} class="counter">
+				<button class="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button class="increment" onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx
new file mode 100644
index 000000000000..02eb1953907d
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+/** a counter written in React */
+export function Counter({ children, id }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SolidCounter.tsx b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SolidCounter.tsx
new file mode 100644
index 000000000000..689c5222ce97
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SolidCounter.tsx
@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js';
+
+/** a counter written with Solid */
+export default function SolidCounter({ children, id }) {
+	const [count, setCount] = createSignal(0);
+	const add = () => setCount(count() + 1);
+	const subtract = () => setCount(count() - 1);
+
+	return (
+		<>
+			<div id={id} class="counter">
+				<button class="decrement" onClick={subtract}>-</button>
+				<pre>{count()}</pre>
+				<button class="increment" onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SvelteCounter.svelte
new file mode 100644
index 000000000000..ab13b9c71f6b
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/SvelteCounter.svelte
@@ -0,0 +1,29 @@
+
+<script>
+	export let id;
+  let children;
+  let count = 0;
+
+  function add() {
+		count += 1;
+	}
+
+  function subtract() {
+		count -= 1;
+	}
+</script>
+
+<div {id} class="counter">
+  <button class="decrement" on:click={subtract}>-</button>
+  <pre>{ count }</pre>
+  <button class="increment" on:click={add}>+</button>
+</div>
+<div class="counter-message">
+  <slot />
+</div>
+
+<style>
+	.counter {
+		background: white;
+	}
+</style>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/VueCounter.vue
new file mode 100644
index 000000000000..4861511c8c8a
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/VueCounter.vue
@@ -0,0 +1,34 @@
+<template>
+	<div :id="id" class="counter">
+		<button class="decrement" @click="subtract()">-</button>
+		<pre>{{ count }}</pre>
+		<button class="increment" @click="add()">+</button>
+	</div>
+	<div class="counter-message">
+		<slot />
+	</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+export default {
+	props: {
+		id: {
+			type: String,
+			required: true
+		}
+  },
+	setup(props) {
+		const count = ref(0);
+		const add = () => (count.value = count.value + 1);
+		const subtract = () => (count.value = count.value - 1);
+
+		return {
+			id: props.id,
+			count,
+			add,
+			subtract,
+		};
+	},
+};
+</script>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/components/index.ts b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/index.ts
new file mode 100644
index 000000000000..4077dcacd90e
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/components/index.ts
@@ -0,0 +1,2 @@
+export { default as A } from './A.astro';
+export { default as B } from './B.astro';
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/pages/index.astro b/packages/astro/e2e/fixtures/multiple-frameworks/src/pages/index.astro
new file mode 100644
index 000000000000..a30688bca8ae
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/pages/index.astro
@@ -0,0 +1,50 @@
+---
+// Style Imports
+import '../styles/global.css';
+// Component Imports
+import { A, B as Renamed } from '../components';
+import * as react from '../components/ReactCounter.jsx';
+import { PreactCounter } from '../components/PreactCounter.tsx';
+import SolidCounter from '../components/SolidCounter.tsx';
+import VueCounter from '../components/VueCounter.vue';
+import SvelteCounter from '../components/SvelteCounter.svelte';
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+	</head>
+	<body>
+		<main>
+			<react.Counter id="react-counter" client:idle>
+				<h1>Hello React!</h1>
+				<p>What's up?</p>
+			</react.Counter>
+
+			<PreactCounter id="preact-counter" client:idle>
+				<h1>Hello Preact!</h1>
+			</PreactCounter>
+
+			<SolidCounter id="solid-counter" client:idle>
+				<h1>Hello Solid!</h1>
+			</SolidCounter>
+
+			<VueCounter id="vue-counter" client:idle>
+				<h1>Hello Vue!</h1>
+			</VueCounter>
+
+			<SvelteCounter id="svelte-counter" client:idle>
+				<h1>Hello Svelte!</h1>
+			</SvelteCounter>
+
+			<A id="astro-a" />
+
+			<Renamed id="astro-b" />
+		</main>
+	</body>
+</html>
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/src/styles/global.css b/packages/astro/e2e/fixtures/multiple-frameworks/src/styles/global.css
new file mode 100644
index 000000000000..4912b4c399a4
--- /dev/null
+++ b/packages/astro/e2e/fixtures/multiple-frameworks/src/styles/global.css
@@ -0,0 +1,21 @@
+html,
+body {
+	font-family: system-ui;
+	margin: 0;
+}
+
+body {
+	padding: 2rem;
+}
+
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}
diff --git a/packages/astro/e2e/multiple-frameworks.test.js b/packages/astro/e2e/multiple-frameworks.test.js
new file mode 100644
index 000000000000..6f3906400ae6
--- /dev/null
+++ b/packages/astro/e2e/multiple-frameworks.test.js
@@ -0,0 +1,141 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/multiple-frameworks/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeEach(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterEach(async () => {
+	await devServer.stop();
+});
+
+test.describe('Multiple frameworks', () => {
+	test('React counter', async ({ astro, page }) => {
+		await page.goto('/');
+
+		const counter = await page.locator('#react-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Preact counter', async ({ astro, page }) => {
+		await page.goto('/');
+
+		const counter = await page.locator('#preact-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Solid counter', async ({ astro, page }) => {
+		await page.goto('/');
+
+		const counter = await page.locator('#solid-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Vue counter', async ({ astro, page }) => {
+		await page.goto('/');
+
+		const counter = await page.locator('#vue-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Svelte counter', async ({ astro, page }) => {
+		await page.goto('/');
+
+		const counter = await page.locator('#svelte-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Astro components', async ({ astro, page }) => {
+		await page.goto('/');
+
+		const aComponent = await page.locator('#astro-a');
+		await expect(aComponent, 'component is visible').toBeVisible();
+		await expect(aComponent, 'component text is visible').toHaveText('Hello Astro (A)');
+
+
+		const bComponent = await page.locator('#astro-b');
+		await expect(bComponent, 'component is visible').toBeVisible();
+		await expect(bComponent, 'component text is visible').toHaveText('Hello Astro (B)');
+	});
+
+	test('HMR', async ({ astro, page }) => {
+		await page.goto('/');
+
+		// 1: updating the page template
+		const preactSlot = page.locator('#preact-counter + .counter-message');
+		await expect(preactSlot, 'initial slot content').toHaveText('Hello Preact!');
+
+		await astro.editFile('./src/pages/index.astro', (content) =>
+			content.replace('Hello Preact!', 'Hello Preact, updated!')
+		);
+
+		await expect(preactSlot, 'slot content updated').toHaveText('Hello Preact, updated!');
+
+		// Edit the react component
+		await astro.editFile('./src/components/ReactCounter.jsx', (content) =>
+			content.replace('useState(0)', 'useState(5)')
+		);
+
+		const reactCount = await page.locator('#react-counter pre');
+		await expect(reactCount, 'initial count updated to 5').toHaveText('5');
+
+		// Edit the svelte component's style
+		const svelteCounter = page.locator('#svelte-counter');
+		await expect(svelteCounter, 'initial background is white').toHaveCSS('background-color', 'rgb(255, 255, 255)');
+
+		await astro.editFile('./src/components/SvelteCounter.svelte', (content) =>
+			content.replace('background: white', 'background: rgb(230, 230, 230)')
+		);
+
+		await expect(svelteCounter, 'background color updated').toHaveCSS('background-color', 'rgb(230, 230, 230)');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a0ab26f1134..3ef4e700146f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -679,6 +679,41 @@ importers:
       astro: link:../../..
       lit: 2.2.4
 
+  packages/astro/e2e/fixtures/multiple-frameworks:
+    specifiers:
+      '@astrojs/lit': ^0.1.3
+      '@astrojs/preact': ^0.1.2
+      '@astrojs/react': ^0.1.2
+      '@astrojs/solid-js': ^0.1.2
+      '@astrojs/svelte': ^0.1.3
+      '@astrojs/vue': ^0.1.4
+      '@webcomponents/template-shadowroot': ^0.1.0
+      astro: ^1.0.0-beta.31
+      lit: ^2.2.4
+      preact: ^10.7.2
+      react: ^18.1.0
+      react-dom: ^18.1.0
+      solid-js: ^1.4.2
+      svelte: ^3.48.0
+      vue: ^3.2.34
+    dependencies:
+      '@webcomponents/template-shadowroot': 0.1.0
+      lit: 2.2.4
+      preact: 10.7.2
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
+      solid-js: 1.4.2
+      svelte: 3.48.0
+      vue: 3.2.34
+    devDependencies:
+      '@astrojs/lit': link:../../../../integrations/lit
+      '@astrojs/preact': link:../../../../integrations/preact
+      '@astrojs/react': link:../../../../integrations/react
+      '@astrojs/solid-js': link:../../../../integrations/solid
+      '@astrojs/svelte': link:../../../../integrations/svelte
+      '@astrojs/vue': link:../../../../integrations/vue
+      astro: link:../../..
+
   packages/astro/e2e/fixtures/nested-styles:
     specifiers:
       astro: workspace:*