Micro-reactive library

This library is about 4 KBytes compressed.

LemonadeJS is a compact, reactive 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 development.

No dependencies or transpile is require.


LemonadeJS reactive library

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() {
    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.net/lemonade.js"></script>
<div id="root"></div>
<script>
// Component Hello
function Hello() {
    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>

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.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.