Module

Mastering LemonadeJS integration is straightforward when using it as an ES6 module in the browser. This modern approach leverages the import statement, allowing for a more organized and maintainable codebase. Below is an example of how to include LemonadeJS in your project using module syntax:

Example

<html>
<div id='root'></div>
<script type="module">
import lemonade from 'https://unpkg.com/lemonadejs@3/dist/index.js';

function Component() {
    const self = this;

    self.rows = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bind', description: 'The microsoft search engine...' },
        { title:'Duckduckgo', description: 'Privacy in the first place...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return `<table cellpadding="6">
        <thead><tr><th>Title</th><th>Description</th></tr></thead>
        <tbody :loop="self.rows">
        <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
        </tbody>
    </table>`;
}

lemonade.render(Component, document.getElementById('root'));
</script>
</html>