Routing
Lithe provides 2 methods for route configurations. Both methods can be used together.
Directory based routes
Routes a based on the folder names inside the routes/ folder. Routes are only added if the page components are imported
Route components
Routes are based on the li-route components added to the index.html. These will take precedence over directory routes
/* routes/page-name/index.js
* This will automatically be added as a route (assuming you import this file)
*/
import { Component } from '@thewebformula/lithe';
import htmlTemplate from './page.html';
class PageClassName extends Component {
static title = 'Page title';
static htmlTemplate = htmlTemplate;
constructor() {
super();
}
connectedCallback() {
// one[id] one/:id one/value
console.log(this.urlParameters); // { id: 'value' }
// two[...rest] two/*rest two/a/b
console.log(this.urlParameters); // { rest: 'a/b' }
// get search parameters
console.log(this.searchParameters);
}
}
customElements.define('page-component-name', PageClassName);
/* app.js
* Import route to add it to app
*/
import './routes/page-name/index.js';
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lithe</title>
<script type="module" src="/app.js"></script>
</head>
<body>
<!-- You can add / override a page using the li-route component.
Set path, set component to the customElement defined name -->
<li-route path="/some-path" component="page-component-name"></li-route>
<div id="page-content"></div>
</body>
</html>
Directory routes
Directory routes are automatically added to the app, as long as the files are imported. All routes go in a routes folder.
app/
└── routes/
├── index/
│ └── index.js # /
├── 404/
│ └── index.js # /404 (or any url that is not found)
├── one/
│ └── index.js # one/
├── two[id?]/
│ └── index.js # two/:id?
├── three/
│ └── [id]/
│ └── index.js # three/:id
└── four/
└── [...all]/
└── index.js # four/*all (four/a/b/)
app/routes/index/index.js → /
app/routes/one/index.js → one
app/routes/two[id?]/index.js → two/:id?
app/routes/three/[id]/index.js → three/:id
app/routes/four/[...rest]/index.js →
four/*rest
Directory route details
routes/index/index.js Root page (/)
routes/404/index.js Not found page. Auto redirect on non
matching routes
index.js Route component file
[id] Directory that represents a url parameter
[id?] Directory that represents an options url parameter
name[id?] Inline url parameter to avoid sub folder
[...rest] Directory that represents catch-all route
[...rest?] Directory that represents optional catch-all
route
Component routes
Component routes allow you to manually set the path for routes. These will take precedence over directory routes.
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lithe</title>
<script type="module" src="/app.js"></script>
</head>
<body>
<!-- You can add / override a page using the li-route component.
Set path, set component to the customElement defined name -->
<li-route path="/some-path" component="page-component-name"></li-route>
<div id="page-content"></div>
</body>
</html>
Page
Accessing url parameters
import { Component } from '@thewebformula/lithe';
import htmlTemplate from './page.html'; // automatically bundles
class PageClassName extends Component {
// html page title
static title = 'Page title';
// hook up imported html. Supports template literals (${this.someVar})
static htmlTemplate = htmlTemplate;
constructor() {
super();
}
connectedCallback() {
// one[id] one/:id one/value
console.log(this.urlParameters); // { id: 'value' }
// two[...rest] two/*rest two/a/b
console.log(this.urlParameters); // { rest: 'a/b' }
// get search parameters
console.log(this.searchParameters);
}
}
customElements.define('page-component-name', PageClassName);