Agnostic Micro Reactive JavaScript Library

This library is about 4 KBytes compressed.

LemonadeJS is a compact, reactive agnostic JavaScript micro-library, weighing in at just 4KB when compressed. It facilitates two-way data binding and is designed to assist in creating modern, reusable components. The library is dependency-free and does not require transpiling, streamlining the development process.

No dependencies or transpile is required.

Modern interfaces

Build applications that meet Content Security Policy (CSP) standards using Webpack, or run them directly in standard web browsers.

See this example on codesandbox


import lemonade from "lemonadejs";
// Component Hello
function Hello() {
    let self = this;
    return `<div>You clicked {{self.number}} times</div>`;
}
// Create the component
export default function App() {
    let self = this;
    self.count = 1;
    self.click = () => {
        self.count++;
    }
    return `<>
        <Hello :number="self.count" />
        <input type="button" onclick="self.click" value="Click me" />
    </>`;
}
// Register the dependencies to be used across the application
lemonade.setComponents({ Hello });

Simplicity

Code directly in your browser with no need for dependencies or transpiling.

Flexibility

Easily integrate LemonadeJS into any existing application.
Apply LemonadeJS to particular areas within existing applications.
Implement two-way data binding for specific DOM elements.

Properties

Two-way data binding for dynamic applications.
Ultra-lightweight footprint (only 4KB when compressed).
Reactive interfaces that respond to data changes in real time.
Optimized for a superior user experience.
Compatible with Webpack or can be used directly in web browsers.
Zero dependencies are required.

See this example on jsfiddle


<html>
<script src="https://lemonadejs.com/lemonade.js"></script>
<div id="root"></div>
<script>
// Component Hello
function Hello() {
    let self = this;
    return `<div>You clicked {{self.number}} times</div>`;
}
// Create the component
function App() {
    let self = this;
    self.count = 1;
    self.click = () => {
        self.count++;
    }
    return `<>
        <Hello :number="self.count" />
        <input type="button" onclick="self.click" value="Click me" />
    </>`;
}
// Register the dependencies to be used across the application
lemonade.setComponents({ Hello });
// Render the component
lemonade.render(App, document.getElementById('root'));
</script>
</html>

How it Works

Template Literals

LemonadeJS utilizes JavaScript template literals as a foundational mechanism. This approach helps bind the data with the `self` declarations, track changes, and synchronize the data and the view. A key advantage of LemonadeJS is its ability to make precise, node-specific updates in the DOM, eliminating the need for a complete component refresh.

LemonadeJS's defining feature is its capacity to act as an intermediate reactive layer. This flexibility allows the creation from full native LemonadeJS applications or simple facilitates the integration of LemonadeJS components with popular frameworks such as React, Vue, and Angular. Additionally, its ability to target specific DOM sections makes it an ideal choice for augmenting various parts of an application without being restricted to a particular framework or technology.

Library, Not a Framework

LemonadeJS distinguishes itself by being a micro-library rather than a full-fledged framework. This distinction is crucial as it implies that LemonadeJS's packages and components are incredibly lightweight yet highly effective. The library provides total reactivity, supports two-way data binding, and includes other advanced features. This compact yet robust design makes LemonadeJS a versatile tool for developers looking to add reactivity to their projects without the overhead of a larger framework.

Special Attributes

LemonadeJS introduces a set of unique attributes specifically designed to facilitate the creation of reactive components. These attributes enable two-way data binding, reactive behaviours, and other dynamic features essential for modern web applications. Including these attributes underscores the library's commitment to providing developers with tools to build highly responsive and interactive user interfaces with much less code than is typically required.

Official components

In addition to its core features, LemonadeJS offers a collection of official JavaScript reactive components. These components address everyday needs in web application development and are designed to be compatible with pure JavaScript, LemonadeJS or other significant frameworks like React, AngularJS or VueJS projects. This broad compatibility ensures developers can leverage LemonadeJS components in various contexts, enhancing the library's utility and applicability in the web development ecosystem.

Here is a list of a few featured components:

Installation

% npm install lemonadejs

Or download from our Github Official

Utilities

Unit Tests

The LemonadeJS Tester simplifies the process of creating unit tests for your components, ensuring your code is robust and reliable.

The Pico Library

This library provides a collection of essential JavaScript components. Each component in the library is dependency-free and has a size limit of just 2 KBytes, making it both lightweight and efficient.

Sugar (Super Global Artifacts)

LemonadeJS Sugar is a shared global container that streamlines communication between different components, enabling seamless integration and improved collaboration within your projects.

History

LemonadeJS v4.2.0

New method to create web components.

LemonadeJS v4.1.0

Re-setting the same value to a property won't dispatch changes.

LemonadeJS v4.0.0

Tracking complex nested objects with arrays
CSP compliance syntax
Literals template binding references to DOM attributes

LemonadeJS v3.5.0

Any attribute can receive prefix : to receive references

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 web-components
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

LemonadeJS is a unique, micro-reactive JavaScript library designed to streamline web development integration of HTML, data, and JavaScript methods. This efficient and flexible solution enables developers to build user interfaces while staying as close to vanilla JavaScript as possible. With its intelligent concepts and powerful optimization, LemonadeJS provides a user-friendly learning curve, allowing developers to extend their work to the browser environment while creating modern, complex UIs and reusable components.

In its latest release, LemonadeJS introduces new concepts such as SUGAR (Super Global Artifacts), a shared container that simplifies communication between components. PICO, the official component library with zero dependencies, also weighs in at just 2 KBytes. This lightweight library enables seamless integration and efficient web development.

Edit this page on GitHub