svelte-filerouter
Sapper router.
Minimalist file router inspired byTo install
npm i -D svelte-filerouter
<!--App.svelte-->
// rollup.config.js... plugins: ...
fileRouter accepters the following parameters:
appFile: path/to/App.svelte
(Defaults to ./src/App.svelte)
pages: path/to/pages
(Defaults to ./src/pages)
ignore: ['widget.svelte']
(Files and dirs. Can be string or array. Interpreted as regular expression)
unknownPropWarnings: true
(Defaults to true. Disable to hide warnings about props passed by filerouter)
Guide
File scheme
Basic
src/pages/about.svelte
corresponds to /about
Parameters
src/pages/admin/[business].svelte
corresponds to /admin/:business
To exclude
src/admin/_navbar.svelte
corresponds to nothing as _prefixed files are ignored.
Layouts
Layout files are named _layout.svelte
and apply to all adjacent and nested svelte files. A file can have multiple layouts if multiple layouts are recursively present in parent folders.
Resets
Reset files are named _reset.svelte
. They function exactly like layout files, but do no inherit parent layouts.
404 and fallbacks
404s can be caught with _fallback.svelte. The first _fallback.svelte that's found while traversing back through parent folders will be used.
Accessing route and parameters
Examples below is reactive
<!-- src/pages/admin/[business]/[project].svelte--> go somewhere Business: {route.params.business}Project: {route.params.project}
route(s) can also be accessed like this
import { route, routes } from "svelte-filerouter"
(route
is reactive)
Props
Props can be passed through the scopes
prop.
<!-- src/pages/posts/_layout.svelte -->
Props passed through scopes
are available to all nested components served by the router. Props can be accessed directly or through the scoped
prop.
<!-- src/pages/posts/[postId]/index.svelte -->{post.title}{post.body}
Helpers
url ( path, params )
Can be imported with export let url
.
path:string -
An absolute, relative or named path. Parameters are prefixed with colon. Absolute paths starts with /
. Relative paths starts with ./
or ../
. Paths that aren't prefixed we be considered named paths. A route is named by it's parent dir and filename (without extension). E.g. the file src/pages/companies/[companyId]/index.svelte
will have the name companyId/index
params:object - Parameters. If parameters already exist within the current route, these are merged. Therefore, parameters included in the current route, do not need to be specified again.
Examples
<!-- src/pages/companies/[companyId]/index.svelte --> <!-- absolute routes -->FrontpageCompany indexCurrent company/pageProductsProduct no. 123Different company <!-- relative routes -->FrontpageCompany indexCurrent company/pageProductsProduct no. 123Different company <!-- named routes -->FrontpageCompany indexCurrent company/pageProductsProduct no. 123Different company
Examples
https://github.com/jakobrosenberg/svelte-filerouter-example
Notes
<a href="my/path">
tags are handled by svelte-router
Roadmap
<link path="pathname" params={params}>
or similar for normalized link handling. As well as helper script to generate url from pathname and parameters.- Example project
Caveats
Restart of Rollup is required to update the routes map.
Issues
Feel free to open an issue or a pull request, if there's anything you think could be improved.