JavaScript Router

Pico Library This library has less than 2 KBytes

The LemonadeJS Router, an MIT-licensed JavaScript plugin within the lightweight Pico Library (under 2 KBytes), facilitates content rendering based on routes. It smartly intercepts link clicks to display components according to set-up, all without extra dependencies.

Documentation

Installation

npm install @lemonadejs/router

Attributes

Router settings

Attribute	Description
animation?: Boolean	Enable the page change animation.
single?: Boolean	Single page on the DOM

Page settings

Attribute	Description
path: String	Route to execute this page. This should be a regular expression string.
controller: Component	Component name.
url?: String	URL to load a remote template.
preload?: Boolean	URL to load a remote template.

Events

Router events

Event	Description
onchangepage?: function	When the page changes. `onchangepage(newPage: Object, oldPage: Object, isNewPage: Boolean) => void;`
onbeforechangepage?: Function	Called before the page is changed. `onbeforechangepage(path: String, page: Object) => object \| boolean`
onbeforecreatepage?: Function	Before the page is created. `onbeforecreatepage(page: Object, html: String) => boolean \| void`

Page events

Event	Description
onenter?: function	When enters in the page. `onenter(newPage: Object, previousPage: Object) => void;`
onleave?: Function	When leaves a page. `onleave(currentPage: Object, newPage: Object) => void;`

Router SPA example

The router loads the page content from a remote HTML file in the following example.

<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
<meta name='format-detection' content = "telephone=no" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/router/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/toolbar/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Material+Icons" type="text/css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/router/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/toolbar/dist/index.min.js"></script>

<div id='root'></div>

<script>
function Home() {
    let self = this;

    self.onenter = function() {
        console.log('Enter home');
    }

    self.onleave = function() {
        console.log('Leave home');
    }

    return `<div>
        <h1>Home</h1>
        <p>This is home...</p>
    </div>`;
}

function Message () {
    let self = this;
    return `<div>
        <h1>New message</h1>
        <p>Second page...</p>
    </div>`;
}

function Profile () {
    let self = this;
    return `<div>
        <h1>Profile</h1>
        <p>Profile page</p>
    </div>`;
}

function App() {
    let self = this;

    self.test = function() {
        console.log(arguments)
    };

    return (render) => render`<>
        <Router :animation="true" :onchangepage="self.test">
            <Route path="/tests/home" :controller="${Home}" />
            <Route path="/tests/compose" :controller="${Message}" />
            <Route path="/tests/profile" :controller="${Profile}" />
        </Router>
        <Toolbar>
            <Icon content="inbox" title="Inbox" route="/tests/home" />
            <Icon content="create" title="New message" route="/tests/compose" />
            <Icon content="person" title="Profile" route="/tests/profile" />
        </Toolbar>
    </>`;
}

// Set the components
lemonade.setComponents({ Toolbar });
// Render
lemonade.render(App, document.getElementById('root'));
</script>

import Message from './Message';
import Profile from './Profile';
import Home from './Home';

export default function App() {
    let self = this;

    self.test = function () {
        console.log(arguments);
    };

    return (render) => render`<>
      <Router :animation="true" :onchangepage="self.test">
          <Route path="/tests/compose" :controller="${Message}" />
          <Route path="/tests/profile" :controller="${Profile}" />
          <Route path="(.*)" :controller="${Home}" />
      </Router>
      <Toolbar>
          <Icon content="inbox" title="Inbox" route="/tests/home" />
          <Icon content="create" title="New message" route="/tests/compose" />
          <Icon content="person" title="Profile" route="/tests/profile" />
      </Toolbar>
  </>`;
}

More resources

JavaScript Router Example on Stackblitz

Edit this page on GitHub

Jspreadsheet Pro