lemonadejs

Lemonade is a lightweight, micro reactive vanilla javascript library to create quick and reusable JS components without dependencies.

2.2.3
Source
npm

Version published: 3 years ago

Maintainers: 1

Created: 4 years ago

Source

Lemonadejs: Reactive micro library

Create amazing web-based interfaces with Lemonade v2

Lemonadejs is a super lightweight reactive vanilla javascript micro-library (5Kb). It aims to help the integration between the JavaScript (controllers) and the HTML (view). It supports two-way binding and integrates natively with jSuites to help to create amazing interfaces quicker.

It would help you deliver reusable components and does not require transpilers, babel, or hundreds of other dependencies. It works just fine in any javascript dev environment. LemonadeJS has a quick learning curve and keeps coding fun and very close to native JS.

Make rich and user-friendly web interfaces and applications
Handle complicated data inputs with ease and convenience
Improve the software user experience
Create rich CRUDS and beautiful UI
Highly flexible and customizable
Lightweight and simple to use

Examples

Node

Build modern applications with lemonadeJS and node.

See this example on codesandbox

import lemonade from "lemonadejs";
import Hello from "./Hello";
export default function App() {
  let self = {};
  self.count = 1;
  let template = `<div>
        <div><Hello /></div>
        <p>You clicked {{self.count}} times</p>
        <button onclick="self.count++;">Click me</button>
    </div>`;
 
  return lemonade.element(template, self, { Hello });
}

Browser

Simplicity to run in the browser without dependencies, servers, transpilers.

<html>
<script src="https://lemonadejs.net/v1/lemonade.js"></script>

<div id="root"></div>

<script>
function Hello() {
    let self = {};
    let template = `<h1>Hello World</h1>`;

    return lemonade.element(template, self);
}


function App() {
  let self = {};
  self.count = 1;
  let template = `<div>
        <div><Hello /></div>
        <p>You clicked {{self.count}} times</p>
        <button onclick="self.count++;">Click me</button>
    </div>`;

    return lemonade.element(template, self, { Hello });
}

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

Creating a table from an array of objects

import lemonade from "lemonadejs";
 
export default function Component() {
    let self = {};
 
    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.
    let template = `<table cellpadding="6">
            <thead><tr><th>Title</th><th>Description</th></th></thead>
            <tbody @loop="self.rows">
                <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
            </tbody>
        </table>`;
 
    return lemonade.element(template, self);
}

Installation

% npm install lemonadejs

License

This software is free to use and it is distributed under the MIT license.

Other tools

https://jsuites.net
https://jspreadsheet.com
https://bossanova.uk/jspreadsheet

Keywords

FAQs

What is lemonadejs?

Is lemonadejs well maintained?

Package last updated on 15 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install