-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(routing): decode pathname early, don't decode
params
(#12079)
* feat(routing): decode pathname early * linting * Update packages/astro/src/core/fs/index.ts Co-authored-by: Bjorn Lu <[email protected]> * address feedback * Update .changeset/wet-foxes-walk.md Co-authored-by: Bjorn Lu <[email protected]> * fix changeset --------- Co-authored-by: Bjorn Lu <[email protected]>
- Loading branch information
Showing
10 changed files
with
182 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
'astro': major | ||
--- | ||
|
||
`params` passed in `getStaticPaths` are no longer automatically decoded. | ||
|
||
### [changed]: `params` aren't decoded anymore. | ||
In Astro v4.x, `params` in ` were automatically decoded using `decodeURIComponent`. | ||
|
||
Astro v5.0 doesn't automatically decode `params` in `getStaticPaths` anymore, so you'll need to manually decode them yourself if needed | ||
|
||
#### What should I do? | ||
If you were relying on the automatic decode, you'll need to manually decode it using `decodeURI`. | ||
|
||
Note that the use of [`decodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent)) is discouraged for `getStaticPaths` because it decodes more characters than it should, for example `/`, `?`, `#` and more. | ||
|
||
```diff | ||
--- | ||
export function getStaticPaths() { | ||
return [ | ||
+ { params: { id: decodeURI("%5Bpage%5D") } }, | ||
- { params: { id: "%5Bpage%5D" } }, | ||
] | ||
} | ||
|
||
const { id } = Astro.params; | ||
--- | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
packages/astro/test/fixtures/ssr-params/src/pages/[category].astro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
packages/astro/test/fixtures/ssr-params/src/pages/東西/[category].astro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
import assert from 'node:assert/strict'; | ||
import { before, describe, it } from 'node:test'; | ||
import * as cheerio from 'cheerio'; | ||
import testAdapter from './test-adapter.js'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
describe('Astro.params in SSR', () => { | ||
/** @type {import('./test-utils.js').Fixture} */ | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ | ||
root: './fixtures/ssr-params/', | ||
adapter: testAdapter(), | ||
output: 'server', | ||
base: '/users/houston/', | ||
}); | ||
await fixture.build(); | ||
}); | ||
|
||
it('Params are passed to component', async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/food'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), 'food'); | ||
}); | ||
|
||
describe('Non-english characters in the URL', () => { | ||
it('Params are passed to component', async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/東西/food'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), 'food'); | ||
}); | ||
}); | ||
|
||
it('It uses encodeURI/decodeURI to decode parameters', async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/[page]'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '[page]'); | ||
}); | ||
|
||
it('It accepts encoded URLs, and the params decoded', async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/%5Bpage%5D'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '[page]'); | ||
}); | ||
|
||
it("It doesn't encode/decode URI characters such as %23 (#)", async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/%23something'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '%23something'); | ||
}); | ||
it("It doesn't encode/decode URI characters such as %2F (/)", async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/%2Fsomething'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '%2Fsomething'); | ||
}); | ||
|
||
it("It doesn't encode/decode URI characters such as %3F (?)", async () => { | ||
const app = await fixture.loadTestAdapterApp(); | ||
const request = new Request('http://example.com/users/houston/%3Fsomething'); | ||
const response = await app.render(request); | ||
assert.equal(response.status, 200); | ||
const html = await response.text(); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '%3Fsomething'); | ||
}); | ||
}); | ||
|
||
describe('Astro.params in static mode', () => { | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ | ||
root: './fixtures/ssr-params/', | ||
}); | ||
await fixture.build(); | ||
}); | ||
|
||
it('It creates files that have square brackets in their URL', async () => { | ||
const html = await fixture.readFile(encodeURI('/[page]/index.html')); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '[page]'); | ||
}); | ||
|
||
it("It doesn't encode/decode URI characters such as %23 (#)", async () => { | ||
const html = await fixture.readFile(encodeURI('/%23something/index.html')); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '%23something'); | ||
}); | ||
|
||
it("It doesn't encode/decode URI characters such as %2F (/)", async () => { | ||
const html = await fixture.readFile(encodeURI('/%2Fsomething/index.html')); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '%2Fsomething'); | ||
}); | ||
|
||
it("It doesn't encode/decode URI characters such as %3F (?)", async () => { | ||
const html = await fixture.readFile(encodeURI('/%3Fsomething/index.html')); | ||
const $ = cheerio.load(html); | ||
assert.equal($('.category').text(), '%3Fsomething'); | ||
}); | ||
}); |
This file was deleted.
Oops, something went wrong.