tests

packages/svelte/tests/runtime-legacy/shared.ts

@@ -403,6 +403,16 @@ async function run_test_variant(
 				throw new Error('Ensure dom mode is skipped');
 			};
 
+			const run_hydratables_init = () => {
+				if (variant !== 'hydrate') return;
+				const script = document.head
+					.querySelectorAll('script')
+					.values()
+					.find((script) => script.textContent.includes('(window.__svelte ??= {}).h'))?.textContent;
+				if (!script) return;
+				(0, eval)(script);
+			};
+
 			if (runes) {
 				props = proxy({ ...(config.props || {}) });
 
@@ -411,6 +421,7 @@ async function run_test_variant(
 
 				if (manual_hydrate && variant === 'hydrate') {
 					hydrate_fn = () => {
+						run_hydratables_init();
 						instance = hydrate(mod.default, {
 							target,
 							props,
@@ -419,6 +430,7 @@ async function run_test_variant(
 						});
 					};
 				} else {
+					run_hydratables_init();
 					const render = variant === 'hydrate' ? hydrate : mount;
 					instance = render(mod.default, {
 						target,
@@ -428,6 +440,7 @@ async function run_test_variant(
 					});
 				}
 			} else {
+				run_hydratables_init();
 				instance = createClassComponent({
 					component: mod.default,
 					props: config.props,

packages/svelte/tests/runtime-runes/samples/hydratable-custom-transport/_config.js

@@ -1,4 +1,3 @@
-import { tick } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -8,12 +7,14 @@ export default test({
 	ssrHtml: '<p>The current environment is: server</p>',
 
 	props: { environment: 'browser' },
-	html: '<p>The current environment is: server</p>',
 
-	async test({ assert, target }) {
-		await tick();
+	async test({ assert, target, variant }) {
 		const p = target.querySelector('p');
 		ok(p);
-		assert.htmlEqual(p.outerHTML, '<p>The current environment is: server</p>');
+		if (variant === 'hydrate') {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: server</p>');
+		} else {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: browser</p>');
+		}
 	}
 });

packages/svelte/tests/runtime-runes/samples/hydratable-custom-transport/main.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	let { environment }: { environment: 'server' | 'browser' } = $props();
+
+	const value = hydratable("environment", () => environment, {
+		transport: environment === 'server' ? {
+			encode: (val: string) => JSON.stringify([val])
+		} : {
+			decode: (val: [string]) => val[0]
+		}
+	})
+</script>
+
+<p>The current environment is: {value}</p>

packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing-imperative/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<p>The current environment is: server</p>',
+
+	props: { environment: 'browser' },
+
+	runtime_error: 'hydratable_missing_but_expected_e'
+});

packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing-imperative/main.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	let { environment }: { environment: 'server' | 'browser' } = $props();
+
+	let value;
+	if (environment === 'server') {
+		value = 'server';
+	} else {
+		value = hydratable.get("environment");
+	}
+</script>
+
+<p>The current environment is: {value}</p>

packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/_config.js

@@ -0,0 +1,12 @@
+import { ok, test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<p>The current environment is: server</p>',
+
+	props: { environment: 'browser' },
+
+	runtime_error: 'hydratable_missing_but_expected_e'
+});

packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/main.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	let { environment }: { environment: 'server' | 'browser' } = $props();
+
+	let value;
+	if (environment === 'server') {
+		value = 'server';
+	} else {
+		value = hydratable('environment', () => environment);
+	}
+</script>
+
+<p>The current environment is: {value}</p>

packages/svelte/tests/runtime-runes/samples/hydratable/_config.js

@@ -0,0 +1,20 @@
+import { ok, test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<p>The current environment is: server</p>',
+
+	props: { environment: 'browser' },
+
+	async test({ assert, target, variant }) {
+		const p = target.querySelector('p');
+		ok(p);
+		if (variant === 'hydrate') {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: server</p>');
+		} else {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: browser</p>');
+		}
+	}
+});

packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-imperative/_config.js

@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	error: 'hydratable_clobbering'
+});

packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-imperative/main.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { hydratable } from 'svelte';
+
+    hydratable.set('key', 'first');
+    hydratable.set('key', 'second');
+</script>

packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/_config.js

@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	error: 'hydratable_clobbering'
+});

packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/main.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { hydratable } from 'svelte';
+
+    hydratable('key', () => 'first');
+    hydratable('key', () => 'second');
+</script>

packages/svelte/tests/server-side-rendering/test.ts

@@ -81,7 +81,7 @@ const { test, run } = suite_with_variants<SSRTest, 'sync' | 'async', CompileOpti
 			rendered = is_async ? await render_result : render_result;
 		} catch (error) {
 			if (config.error) {
-				assert.deepEqual((error as Error).message, config.error);
+				assert.include((error as Error).message, config.error);
 				return;
 			} else {
 				throw error;