Micro-reactive library

This library is about 4 KBytes compressed.

LemonadeJS is a free reactive javascript micro-library. It supports two-way data binding and helps you to deliver modern reusable components.

No dependencies or transpile is require.

Modern interfaces

Build modern application using webpack or run directly in the browser.

See this example on codesandbox

import lemonade from "lemonadejs";
import Hello from "./Hello";

// Register the dependencies to be used across the render
lemonade.setComponents({ Hello });

// Create the component
export default function App() {
    const self = this;
    self.count = 1;
    return `<>
        <Hello number="{{self.count}}" />
        <button onclick="self.count++;">Click me</button>
    </>`;
}

Simplicity

Code directly in your browser without dependencies or transpiling.

Flexibility

Integrate LemonadeJS on top of any existing application.
Adopt LemonadeJS to specific sections of an existing applications.
Create two-way data binding sections to specific block of the DOM.

Properties

Two-way data binding
Lightweight (4KB compressed)
Reactive interfaces
Great user experience
Webpack or directly in the browser
No dependencies

See this example on jsfiddle

<html>
<script src="https://lemonadejs.net/v3/lemonade.js"></script>
<div id="root"></div>
<script>
function Hello() {
    const self = this;
    return `<div>You clicked {{self.number}} times</div>`;
}

function App() {
    const self = this;
    self.count = 0;
    // Number is a reference to count in this scope
    return `<>
        <Hello number="{{self.count}}" />
        <button onclick="self.count++;">Click me</button>
    </>`;
}

// Register the dependencies to be used across the application
lemonade.setComponents({ Hello });
// Render the component
lemonade.render(App, document.getElementById('root'));
</script>
</html>

Installation

% npm install lemonadejs

Or download from our Github Official

Utilities

Unit Tests

The LemonadeJS tester helps to create component unit testing.

The Pico Library

The Pico Library brings javascript common components. Each component in the library does not require any dependency and has a limit of 2 kBytes each.

Sugar (Super Global Artifacts)

The LemonadeJS Sugar is a common global container that makes easier communication between different components.

History

LemonadeJS v3.0.0

Partial properties value update, for example: class="something {{self.somethingElse}}"
Better deal with tag and textNodes {{self.something}} as a text node along a tag
Sub level property tracking. <h1>{{self.level.value}}</h1>
Parent tracking and two-way binding. <h1>{{self.parent.title}}</h1>
Unit tests

LemonadeJS v2.8.9

self.refresh to rebuild the component keeping the self state.
Special attribute @src + default property
Support closing tags for webcomponents
Self attributes from classes

LemonadeJS v2.7.2

lm-ready, lm-loop, lm-ref, lm-bind alternative for @ready, @loop, @ref, @bind
Components are now case insensitive
A new simple @bind for custom components

LemonadeJS v2.4.2

lemonade.dictionary, lemonade.translate. (text translation support)
run evaluation method

LemonadeJS v2.2.4

The event object (e) is available on the template, example. onclick="self.test(e)"

LemonadeJS v2.2.0

Support for tables

LemonadeJS v2.1.13

@loop on native HTML tags.
Precedence for val() on setAttributes
self.parent as reserved property to get the self of the a caller inside custom elements

LemonadeJS v2.1.7

Global queue
Pico Library
Sugar Common Container
self.el as a reserved property which returns the root element
Real time templates for custom elements.
Extensions and template to the children on custom components

LemonadeJS v2.0.6

@loop property
Better integration with components
Custom component templating

LemonadeJS v1.0.0

@bind, @ready, @ref magic properties.

Copyright and license

LemonadeJS is released under the MIT license. Contact LemonadeJS

About LemonadeJS

The LemonadeJS is an original micro reactive JavaScript software created to facilitate the integration between the HTML, data, and JavaScript methods in web-based development. It is an efficient and flexible way for building user interfaces. It brings the development as close to the JavaScript vanilla as possible. It has some smart concepts and a powerful optimization that offers a straightforward learning curve. The developer would have the flexibility to extend the development to the browser environment but continue building modern, complex UIs and reusable components.

On the most release, it brings new concepts such as SUGAR (Super Global Artifacts) which is a common container to simplify the communication between components. And PICO is the official component library without dependencies up to 2 KBytes.