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?: Boolean Enable the page change animation.
Route element
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

Event Description
Router component
onchange?: function Execute the page changes.
onchange(newPage: Object, oldPage: Object) => void;
Route element
onenter?: function When 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.

LemonadeJS router example 
<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>

Edit this page on GitHub