Lithe
Welcome Getting started Routing Build Signals and binding Web component Templates View transitions Fetcher Multiple languages github-circle-black-transparent GitHub github-circle-black-transparent Example app

Getting started

Build a basic web application

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);
          
menu