diff --git a/runtime/src/app/app.ts b/runtime/src/app/app.ts index 3f5e8e1fe..1e731fba1 100644 --- a/runtime/src/app/app.ts +++ b/runtime/src/app/app.ts @@ -292,11 +292,22 @@ export async function hydrate_target(target: Target): Promise<{ let l = 1; try { + const { pattern } = route; + const match = pattern.exec(page.path); let segment_dirty = false; branch = await Promise.all(route.parts.map(async (part, i) => { const segment = segments[i]; - if (current_branch[i] && current_branch[i].segment !== segment) segment_dirty = true; + if ( + current_branch[i] + && ( + current_branch[i].segment !== segment + || ( + current_branch[i].match + && JSON.stringify(current_branch[i].match.slice(1, i+2)) !== JSON.stringify(match.slice(1, i+2)) + ) + ) + ) segment_dirty = true; props.segments[l] = segments[i + 1]; // TODO make this less confusing if (!part) return { segment }; @@ -324,7 +335,7 @@ export async function hydrate_target(target: Target): Promise<{ preloaded = initial_data.preloaded[i + 1]; } - return (props[`level${j}`] = { component, props: preloaded, segment, part: part.i }); + return (props[`level${j}`] = { component, props: preloaded, segment, match, part: part.i }); })); } catch (error) { props.error = error; diff --git a/test/apps/basics/src/routes/[...rest]/deep.svelte b/test/apps/basics/src/routes/[...rest]/deep.svelte index 7b5ae6323..200d61b01 100644 --- a/test/apps/basics/src/routes/[...rest]/deep.svelte +++ b/test/apps/basics/src/routes/[...rest]/deep.svelte @@ -1,8 +1,18 @@ + +

{$page.params.rest.join(',')}

+

{rest.join(',')}

deep +back diff --git a/test/apps/basics/src/routes/[...rest]/index.svelte b/test/apps/basics/src/routes/[...rest]/index.svelte index be9494ace..4631dd348 100644 --- a/test/apps/basics/src/routes/[...rest]/index.svelte +++ b/test/apps/basics/src/routes/[...rest]/index.svelte @@ -1,8 +1,20 @@ + +

{$page.params.rest.join(',')}

+

{rest.join(',')}

deep +deep +deep +deep diff --git a/test/apps/basics/test.ts b/test/apps/basics/test.ts index 9f24a8c6b..1eb72d55d 100644 --- a/test/apps/basics/test.ts +++ b/test/apps/basics/test.ts @@ -1,7 +1,7 @@ import * as assert from 'assert'; import * as http from 'http'; -import { build } from '../../../api'; -import { AppRunner } from '../AppRunner'; +import {build} from '../../../api'; +import {AppRunner} from '../AppRunner'; declare let deleted: { id: number }; declare let el: any; @@ -27,13 +27,13 @@ function get(url: string, opts: http.RequestOptions = {}): Promise { }); } -describe('basics', function() { +describe('basics', function () { this.timeout(10000); let r: AppRunner; // hooks - before('build app', () => build({ cwd: __dirname })); + before('build app', () => build({cwd: __dirname})); before('start runner', async () => { r = await new AppRunner().start(__dirname); }); @@ -127,7 +127,7 @@ describe('basics', function() { // TODO equivalent test for a webpack app it('sets Content-Type, Link...modulepreload, and Cache-Control headers', async () => { - const { headers } = await get(r.base); + const {headers} = await get(r.base); assert.equal( headers['content-type'], @@ -267,7 +267,6 @@ describe('basics', function() { await r.sapper.start(); assert.equal(await r.text('h1'), 'foo'); - await r.page.click('[href="dirs/bar"]'); await r.wait(); assert.equal(await r.text('h1'), 'bar'); @@ -278,11 +277,26 @@ describe('basics', function() { await r.sapper.start(); assert.equal(await r.text('h1'), 'abc,xyz'); - + await r.page.click('[href="xyz/abc/def/ghi"]'); + await r.wait(); + assert.equal(await r.text('h1'), 'xyz,abc,def,ghi'); + assert.equal(await r.text('h2'), 'xyz,abc,def,ghi'); + await r.page.click('[href="xyz/abc/def"]'); + await r.wait(); + assert.equal(await r.text('h1'), 'xyz,abc,def'); + assert.equal(await r.text('h2'), 'xyz,abc,def'); + await r.page.click('[href="xyz/abc/def"]'); + await r.wait(); + assert.equal(await r.text('h1'), 'xyz,abc,def'); + assert.equal(await r.text('h2'), 'xyz,abc,def'); + await r.page.click('[href="xyz/abc"]'); + await r.wait(); + assert.equal(await r.text('h1'), 'xyz,abc'); + assert.equal(await r.text('h2'), 'xyz,abc'); await r.page.click('[href="xyz/abc/deep"]'); await r.wait(); assert.equal(await r.text('h1'), 'xyz,abc'); - + assert.equal(await r.text('h2'), 'xyz,abc'); await r.page.click('[href="xyz/abc/qwe/deep.json"]'); await r.wait(); assert.equal( diff --git a/test/apps/layout/src/routes/[x]/[y]/[z].svelte b/test/apps/layout/src/routes/[x]/[y]/[z].svelte index 85ebc8f75..699970959 100644 --- a/test/apps/layout/src/routes/[x]/[y]/[z].svelte +++ b/test/apps/layout/src/routes/[x]/[y]/[z].svelte @@ -16,4 +16,5 @@ z: {$page.params.z} {count} -click me \ No newline at end of file +goto foo/bar/qux +goto foo/abc/def \ No newline at end of file diff --git a/test/apps/layout/test.ts b/test/apps/layout/test.ts index 7f5740863..41bc08876 100644 --- a/test/apps/layout/test.ts +++ b/test/apps/layout/test.ts @@ -23,7 +23,8 @@ describe('layout', function() { assert.deepEqual(text1.split('\n').map(str => str.trim()).filter(Boolean), [ 'y: bar 1', 'z: baz 1', - 'click me', + 'goto foo/bar/qux', + 'goto foo/abc/def', 'child segment: baz' ]); @@ -32,7 +33,8 @@ describe('layout', function() { assert.deepEqual(text2.split('\n').map(str => str.trim()).filter(Boolean), [ 'y: bar 1', 'z: baz 1', - 'click me', + 'goto foo/bar/qux', + 'goto foo/abc/def', 'child segment: baz' ]); @@ -43,9 +45,22 @@ describe('layout', function() { assert.deepEqual(text3.split('\n').map(str => str.trim()).filter(Boolean), [ 'y: bar 1', 'z: qux 2', - 'click me', + 'goto foo/bar/qux', + 'goto foo/abc/def', 'child segment: qux' ]); + + await r.page.click('[href="foo/abc/def"]'); + await r.wait(); + + const text4 = await r.text('#sapper'); + assert.deepEqual(text4.split('\n').map(str => str.trim()).filter(Boolean), [ + 'y: abc 2', + 'z: def 3', + 'goto foo/bar/qux', + 'goto foo/abc/def', + 'child segment: def' + ]); }); it('survives the tests with no server errors', () => {