diff --git a/README.md b/README.md index 22cdef7..2f0c954 100644 --- a/README.md +++ b/README.md @@ -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 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. -* 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`. +* 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`. An example of a generic route: ```js -// routes/api/post/%id%.js +// routes/api/post/[id].js export async function get(req, res) { try { 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: ```js -// routes/api/post/%id%.js +// routes/api/post/[id].js export async function get(req) { return await getPostFromDatabase(req.params.id); } @@ -121,10 +121,10 @@ function navigate(url) { import('/index.js').then(render); } else if (match = /^\/post\/([^\/]+)$/.exec(url.pathname)) { params.id = match[1]; - import('/post/%id%.html').then(render); + import('/post/[id].html').then(render); } else if (match = /^\/([^\/]+)$/.exec(url.pathname)) { params.wildcard = match[1]; - import('/%wildcard%.html').then(render); + import('/[wildcard].html').then(render); } return true; diff --git a/utils/create_matchers.js b/utils/create_matchers.js index 670ed77..525e772 100644 --- a/utils/create_matchers.js +++ b/utils/create_matchers.js @@ -7,11 +7,11 @@ module.exports = function create_matchers(files) { if (parts[parts.length - 1] === 'index') parts.pop(); const dynamic = parts - .filter(part => part[0] === '%') + .filter(part => part[0] === '[') .map(part => part.slice(1, -1)); const pattern = new RegExp( - `^\\/${parts.map(p => p[0] === '%' ? '([^/]+)' : p).join('\\/')}$` + `^\\/${parts.map(p => p[0] === '[' ? '([^/]+)' : p).join('\\/')}$` ); const test = url => pattern.test(url);