Getting started

Install

npm install @thewebformula/lithe

Routing

Lithe provides 2 methods for route configurations. Both methods can be used together.

Routing documentation

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/* (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/*

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

index.html

<!doctype html>
  <html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- overridden by page titles -->
    <title>Default Title</title>
    
    <!-- app.js will automatically be updated to match bundle outputs -->
    <script src="/app.js" type="module"></script>

    <!-- If you configure 'entryPointCSS' with build, app.css will automatically be updated to match bundle outputs -->
    <link href="/app.css" rel="stylesheet">
  </head>
  
  <body>
    <!-- page template render into this element -->
    <div id="page-content"></div>
  </body>
</html>

Main application file

app.js

Required: Automatically uses app.js as entry file for bundling

/* app.js
* Import pages and code
*/

import someModule from './someModule.js';

import './routes/index/index.js';
import './routes/page-two/index.js';

App Styles

You can configure an app css file that will be bundled into a single file

// build.js
build({
  entryPointCSS: 'app/app.css' // undefined by default
});

<!-- the link import will be automatically updated to match output filename
  If you do not add a link tag, once will be added
-->
<link href="/app.css" rel="stylesheet">

Page

page.js and page.html

import { Component, Signal, html } from '@thewebformula/lithe';
import htmlTemplate from './page.html'; // automatically bundles

class PageComponent extends Component {
  // html page title
  static title = 'Page';

  /**
    * Pass in HTML string. Use for imported .HTML
    * Supports template literals: <div>${this.var}</div>
    * @type {String}
    */
  static htmlTemplate = htmlTemplate;

  someVar = new Signal('Some var');
  clickIt_bound = this.clickIt.bind(this);
  
  
  constructor() {
    super();
  }
  
  connectedCallback() {
    console.log(this.urlParameters); // { id: 'value' }
    console.log(this.searchParameters); // { id: 'value' }
  }
  
  disconnectedCallback() { }
  
  // not called on initial render
  beforeRender() { }
  
  afterEnder() {
    this.querySelector('#event-listener-button')
      .addEventListener('click', this.clickIt_bound);
  }
  
  clickIt() {
    console.log('clicked it!');
  }
  
  changeValue() {
    this.someVar.value = 'Value updated';
  }
  
  /**
  * Alternative method for html templates, instead of importing html file
  */
  template() {
    return html`
      <div>Page Content</div>
      <div>${this.someVar}</div>

      ${
        // nested html
        this.show ? html`<div>Showing</div>` : ''
      }

      <!--
        You can comment out expressions
        text
      -->
      
      <!-- "page" will reference the current page class -->
      <button onclick="page.clickIt()">Click Method</button>
      <button id="event-listener-button">Event listener</button>
      <button onclick="page.changeValue()">Change value</button>
    `;
  }
}

// Define page component
customElements.define('page-component-name', PageComponent);

Build app

build.js

No need for webpack or other bundlers. ESbuild is packed in and pre configured.

Build config

import build from '@thewebformula/lithe/build';

/**
* runs dev server by default on port 3000 with livereload
* basedir defaults to 'app/'
*/
build({ basedir: 'app/' });