diff --git a/.changeset/serious-elephants-dress.md b/.changeset/serious-elephants-dress.md new file mode 100644 index 000000000000..557cd17335ba --- /dev/null +++ b/.changeset/serious-elephants-dress.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +apply updated `props.page` when update or goto page diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 6789ccd3965f..287295d0d601 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -27,6 +27,8 @@ const routes = parse(components, dictionary, matchers); const default_layout = components[0](); const default_error = components[1](); +const root_stuff = {}; + // We track the scroll position associated with each history entry in sessionStorage, // rather than on history.state itself, because when navigation is driven by // popstate it's too late to update the scroll position associated with the @@ -86,10 +88,12 @@ export function create_client({ target, session, base, trailing_slash }) { /** @type {import('./types').NavigationState} */ let current = { - // @ts-ignore - we need the initial value to be null - url: null, + branch: [], + error: null, session_id: 0, - branch: [] + stuff: root_stuff, + // @ts-ignore - we need the initial value to be null + url: null }; let started = false; @@ -364,7 +368,7 @@ export function create_client({ target, session, base, trailing_slash }) { * stuff: Record; * branch: Array; * status: number; - * error?: Error; + * error: Error | null; * routeId: string | null; * }} opts */ @@ -387,6 +391,8 @@ export function create_client({ target, session, base, trailing_slash }) { url, params, branch, + error, + stuff, session_id }, props: { @@ -399,7 +405,13 @@ export function create_client({ target, session, base, trailing_slash }) { result.props[`props_${i}`] = loaded ? await loaded.props : null; } - if (!current.url || url.href !== current.url.href) { + const page_changed = + !current.url || + url.href !== current.url.href || + current.error !== error || + current.stuff !== stuff; + + if (page_changed) { result.props.page = { error, params, routeId, status, stuff, url }; // TODO remove this for 1.0 @@ -583,14 +595,14 @@ export function create_client({ target, session, base, trailing_slash }) { let branch = []; /** @type {Record} */ - let stuff = {}; + let stuff = root_stuff; let stuff_changed = false; /** @type {number | undefined} */ let status = 200; - /** @type {Error | undefined} */ - let error; + /** @type {Error | null} */ + let error = null; // preload modules a.forEach((loader) => loader()); diff --git a/packages/kit/src/runtime/client/types.d.ts b/packages/kit/src/runtime/client/types.d.ts index 93582054d5c3..4f5f6647bd38 100644 --- a/packages/kit/src/runtime/client/types.d.ts +++ b/packages/kit/src/runtime/client/types.d.ts @@ -68,8 +68,10 @@ export type BranchNode = { }; export type NavigationState = { - url: URL; - params: Record; branch: Array; + error: Error | null; + params: Record; session_id: number; + stuff: Record; + url: URL; }; diff --git a/packages/kit/test/apps/basics/src/routes/store/stuff/__error.svelte b/packages/kit/test/apps/basics/src/routes/store/stuff/__error.svelte index 6bfa44ac72ed..30e4eac8f3e1 100644 --- a/packages/kit/test/apps/basics/src/routes/store/stuff/__error.svelte +++ b/packages/kit/test/apps/basics/src/routes/store/stuff/__error.svelte @@ -9,3 +9,10 @@ }; } + + + + diff --git a/packages/kit/test/apps/basics/src/routes/store/stuff/__layout.svelte b/packages/kit/test/apps/basics/src/routes/store/stuff/__layout.svelte index 37307d9844c6..8d1245976f1d 100644 --- a/packages/kit/test/apps/basics/src/routes/store/stuff/__layout.svelte +++ b/packages/kit/test/apps/basics/src/routes/store/stuff/__layout.svelte @@ -15,6 +15,6 @@
{JSON.stringify($page.stuff)}
- + diff --git a/packages/kit/test/apps/basics/src/routes/store/stuff/foo.svelte b/packages/kit/test/apps/basics/src/routes/store/stuff/foo.svelte new file mode 100644 index 000000000000..d20811df79c4 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/store/stuff/foo.svelte @@ -0,0 +1,27 @@ + + + + +

stuff - foo

+

Number prop: {number}

+store diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js index ff7162177670..9766729ba0e6 100644 --- a/packages/kit/test/apps/basics/test/test.js +++ b/packages/kit/test/apps/basics/test/test.js @@ -1590,11 +1590,11 @@ test.describe.parallel('$app/stores', () => { await page.goto('/store'); expect(await page.textContent('h1')).toBe('Test'); - expect(await page.textContent('h2')).toBe('Calls: 1'); + expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 2' : 'Calls: 1'); await clicknav('a[href="/store/result"]'); expect(await page.textContent('h1')).toBe('Result'); - expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 1' : 'Calls: 0'); + expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 2' : 'Calls: 0'); const oops = await page.evaluate(() => window.oops); expect(oops).toBeUndefined(); @@ -1623,6 +1623,26 @@ test.describe.parallel('$app/stores', () => { ); }); + test('should load stuff after reloading by goto', async ({ + page, + clicknav, + javaScriptEnabled + }) => { + const stuff1 = JSON.stringify({ name: 'SvelteKit', value: 789, error: 'uh oh' }); + const stuff2 = JSON.stringify({ name: 'SvelteKit', value: 123, foo: true }); + await page.goto('/store/stuff/www'); + + await clicknav('a[href="/store/stuff/foo"]'); + expect(await page.textContent('#store-stuff')).toBe(stuff1); + + await clicknav('#reload-button'); + expect(await page.textContent('#store-stuff')).toBe(javaScriptEnabled ? stuff2 : stuff1); + + await clicknav('a[href="/store/stuff/zzz"]'); + await clicknav('a[href="/store/stuff/foo"]'); + expect(await page.textContent('#store-stuff')).toBe(stuff2); + }); + test('navigating store contains from and to', async ({ app, page, javaScriptEnabled }) => { await page.goto('/store/navigating/a');