Router

Pico Library This library has less than 2 KBytes

The LemonadeJS router plugin is part of the official libraries and is distributed under the MIT. This controls which component is rendered and append to the page based on the route. This library is part of the PICO Library, which is a very smart and optimized library that does not require any external dependencies.

Documentation


Installation

npm install @lemonadejs/router

Attributes

Attribute Description
Router component
animation?: BooleanEnable the page change animation.
Route element
path: StringRoute to execute this page. This should be a regular expression string.
controller: ComponentComponent name.
url?: StringURL to load a remote template.
preload?: BooleanURL to load a remote template.


Events

Event Description
Router component
onchange?: functionExecute the page changes.
onchange(newPage: Object, oldPage: Object) => void;
Route element
onenter?: functionWhen enters in the page
onenter(page: Object) => void;



Router SPA example

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





Source code


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

<script 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/toolbar/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/navbar/dist/index.min.js"></script>

<div id='root'></div>
<script>
function List () {
    // Create one self for each interaction in the array
    const self = this;
    // Template
    return `<div class="form-group option" style="padding: 8px">
        <div class="option-image">
            <div class="option-badge solid"></div>
            <img src="/templates/default/img/nouser.png" />
        </div>
        <div class="option-header">
            <div class="option-name">{{self.name}}</div>
            <div class="option-small">{{self.message}}</div>
        </div>
        <div class="option-date prettydate">1 mon ago</div>
    </div>`;
}

function Home() {
    const self = this;

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

    self.data = [
        { name: 'Alexander Foster', message: 'Lorem Ipsum é...' },
        { name: 'Alfie Chapman', message: 'Lorem Ipsum é ...' },
        { name: 'Fabian Byrne', message: 'Lorem Ipsum é...' }
    ];

    return `<>
        <Navbar>
            <Icon href="/tests/home" icon="menu" />
            <Text title="Inbox"/>
            <Icon />
        </Navbar>
        <div class="block-title">Messages</div>
        <div class='section-container'>
            <div class="options"><List @loop="self.data" /></div>
        </div>
    </>`;
}

function App() {
    const self = this;

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

    return `<>
        <Router animation="true" onchange="{{self.test}}">
            <Route path="/tests/home" controller="Home" />
            <Route path="/tests/compose" url="/tests/compose/1" />
            <Route path="/tests/profile" url="/tests/profile/1" />
        </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({ Router, Toolbar, Home, Navbar, List });
// Render
lemonade.render(App, document.getElementById('root'));
</script>
</html>