block reactivity

Author: GauBen

packages/kit/src/runtime/client/client.js

@@ -2216,7 +2216,7 @@ export function pushState(url, state) {
 	history.pushState(opts, '', resolve_url(url));
 	has_navigated = true;
 
-	page.state = state;
+	page.state = unstringify(opts[STATES_KEY], app.hooks.transport);
 	root.$set({
 		// we need to assign a new page object so that subscribers are correctly notified
 		page: untrack(() => clone_page(page))
@@ -2250,7 +2250,7 @@ export function replaceState(url, state) {
 
 	history.replaceState(opts, '', resolve_url(url));
 
-	page.state = state;
+	page.state = unstringify(opts[STATES_KEY], app.hooks.transport);
 	root.$set({
 		page: untrack(() => clone_page(page))
 	});

packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/foo/+page.svelte

@@ -4,6 +4,21 @@
 	import { Foo } from '$lib';
 </script>
 
-<button onclick={() => pushState('', { foo: new Foo('it works?') })}>do the thing</button>
+<button
+	onclick={() => {
+		const state = $state({ foo: new Foo('it works?'), count: 0 });
+		pushState('', state);
+	}}>push state</button
+>
 
-<p>foo: {page.state.foo?.bar() ?? 'nope'}</p>
+<!-- Make sure that page.state.count loses its reactivity -->
+<button
+	onclick={() => {
+		page.state.count++;
+	}}
+>
+	bump count
+</button>
+
+<p data-testid="foo">foo: {page.state.foo?.bar() ?? 'nope'}</p>
+<p data-testid="count">count: {page.state.count ?? 'nope'}</p>

packages/kit/test/apps/basics/test/client.test.js

@@ -1624,13 +1624,20 @@ test.describe('Shallow routing', () => {
 
 	test('pushState properly serializes objects', async ({ page }) => {
 		await page.goto('/shallow-routing/push-state/foo');
-		await expect(page.locator('p')).toHaveText('foo: nope');
+		await expect(page.locator('[data-testid=foo]')).toHaveText('foo: nope');
+		await expect(page.locator('[data-testid=count]')).toHaveText('count: nope');
 
-		await page.locator('button').click();
-		await expect(page.locator('p')).toHaveText('foo: it works?!');
+		await page.getByText('push state').click();
+		await expect(page.locator('[data-testid=foo]')).toHaveText('foo: it works?!');
+		await expect(page.locator('[data-testid=count]')).toHaveText('count: 0');
+
+		await page.getByText('bump count').click();
+		await expect(page.locator('[data-testid=foo]')).toHaveText('foo: it works?!');
+		await expect(page.locator('[data-testid=count]')).toHaveText('count: 0'); // Ensure count is not bumped
 
 		await page.goBack();
 		await expect(page.locator('p')).toHaveText('foo: nope');
+		await expect(page.locator('[data-testid=count]')).toHaveText('count: nope');
 	});
 });