totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-19 22:05:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch to using [param].html style filenames

Browse Source
This commit is contained in:
Rich Harris
2017-12-11 17:04:21 -05:00
parent 727782aca2
commit 642c2904df
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@@ -44,13 +44,13 @@ Like Next, routes are defined by the project directory structure, but with some
* Files with an `.html` extension are treated as Svelte components. The `routes/about.html` (or `routes/about/index.html`) would create the `/about` route. * Files with an `.html` extension are treated as Svelte components. The `routes/about.html` (or `routes/about/index.html`) would create the `/about` route.
* Files with a `.js` or `.mjs` extension are more generic route handlers. These files should export functions corresponding to the HTTP methods they support (example below). * Files with a `.js` or `.mjs` extension are more generic route handlers. These files should export functions corresponding to the HTTP methods they support (example below).
* Instead of route masking, we embed parameters in the filename. For example `post/%id%.html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter. * Instead of route masking, we embed parameters in the filename. For example `post/[id].html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter.
* Nested routes (read [this article](https://joshduff.com/2015-06-why-you-need-a-state-router.md)) can be handled by creating a file that matches the subroute — for example, `routes/app/settings/%submenu%.html` would match `/app/settings/profile` *and* `app/settings`, but in the latter case the `submenu` parameter would be `null`. * Nested routes (read [this article](https://joshduff.com/2015-06-why-you-need-a-state-router.md)) can be handled by creating a file that matches the subroute — for example, `routes/app/settings/[submenu].html` would match `/app/settings/profile` *and* `app/settings`, but in the latter case the `submenu` parameter would be `null`.
An example of a generic route: An example of a generic route:
```js ```js
// routes/api/post/%id%.js // routes/api/post/[id].js
export async function get(req, res) { export async function get(req, res) {
try { try {
const data = await getPostFromDatabase(req.params.id); const data = await getPostFromDatabase(req.params.id);
@@ -71,7 +71,7 @@ export async function get(req, res) {
Or, if you omit the `res` argument, it can use the return value: Or, if you omit the `res` argument, it can use the return value:
```js ```js
// routes/api/post/%id%.js // routes/api/post/[id].js
export async function get(req) { export async function get(req) {
return await getPostFromDatabase(req.params.id); return await getPostFromDatabase(req.params.id);
} }
@@ -121,10 +121,10 @@ function navigate(url) {
import('/index.js').then(render); import('/index.js').then(render);
} else if (match = /^\/post\/([^\/]+)$/.exec(url.pathname)) { } else if (match = /^\/post\/([^\/]+)$/.exec(url.pathname)) {
params.id = match[1]; params.id = match[1];
import('/post/%id%.html').then(render); import('/post/[id].html').then(render);
} else if (match = /^\/([^\/]+)$/.exec(url.pathname)) { } else if (match = /^\/([^\/]+)$/.exec(url.pathname)) {
params.wildcard = match[1]; params.wildcard = match[1];
import('/%wildcard%.html').then(render); import('/[wildcard].html').then(render);
} }
return true; return true;

4
utils/create_matchers.js
View File

@@ -7,11 +7,11 @@ module.exports = function create_matchers(files) {
if (parts[parts.length - 1] === 'index') parts.pop(); if (parts[parts.length - 1] === 'index') parts.pop();
const dynamic = parts const dynamic = parts
.filter(part => part[0] === '%') .filter(part => part[0] === '[')
.map(part => part.slice(1, -1)); .map(part => part.slice(1, -1));
const pattern = new RegExp( const pattern = new RegExp(
`^\\/${parts.map(p => p[0] === '%' ? '([^/]+)' : p).join('\\/')}$` `^\\/${parts.map(p => p[0] === '[' ? '([^/]+)' : p).join('\\/')}$`
); );
const test = url => pattern.test(url); const test = url => pattern.test(url);