tests

packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/_config.js

@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['async-server', 'hydrate'],
+
+	server_props: { environment: 'server' },
+	ssrHtml:
+		'<div>did you ever hear the tragedy of darth plagueis the wise?</div><div>Loading...</div>',
+
+	test_ssr({ assert, warnings }) {
+		assert.strictEqual(warnings.length, 1);
+		// for some strange reason we trim the error code off the beginning of warnings so I can't actually assert it
+		assert.include(warnings[0], 'A `hydratable` value with key `partially_used`');
+	},
+
+	async test({ assert, target }) {
+		// make sure the hydratable promise on the client has a chance to run and reject (it shouldn't, because the server data should be used)
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div>did you ever hear the tragedy of darth plagueis the wise?</div><div>no, sith daddy, please tell me</div>'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/main.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	const { environment } = $props();
+
+	const partially_used_hydratable = hydratable(
+		"partially_used",
+		() => {
+			return {
+				used: new Promise(
+					(res, rej) => environment === 'server' ? setTimeout(() => res('did you ever hear the tragedy of darth plagueis the wise?'), 0) : rej('should not run')
+				),
+				unused: new Promise(
+					(res, rej) => environment === 'server' ? setTimeout(() => res('no, sith daddy, please tell me'), 0) : rej('should not run')
+				),
+			}
+		}
+	);
+</script>
+
+<div>{await partially_used_hydratable.used}</div>
+<svelte:boundary>
+	<div>{await partially_used_hydratable.unused}</div>
+	{#snippet pending()}
+		<div>Loading...</div>
+	{/snippet}
+</svelte:boundary>