lemonadejs

4.3.3last stable release 6 months ago
Complexity Score
Medium
Open Issues
N/A
Dependent Projects
4
Weekly Downloadsglobal
2,625

Keywords

License

  • MIT
    • Yesattribution
    • Permissivelinking
    • Permissivedistribution
    • Permissivemodification
    • Nopatent grant
    • Yesprivate use
    • Permissivesublicensing
    • Notrademark grant

Downloads

Readme

LemonadeJS v4: Reactive micro library

Create amazing web-based interfaces with LemonadeJS

LemonadeJS is a super lightweight reactive vanilla javascript micro-library (7 KBytes). It helps to integrate the JavaScript (controllers) and the HTML (view). It supports two-way data binding and integrates natively with jSuites to help to create amazing interfaces quicker.

It would help you deliver reusable components and does not require transpiler, babel, or hundreds of other dependencies. It works just fine in any javascript dev environment. LemonadeJS has a quick learning curve, keeps coding fun, and is 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

Installation

NPM package

% npm install lemonadejs

Using from CDN

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>

Create a LemonadeJS sample app

% npx @lemonadejs/create myApp<br>
% cd myApp<br>
% npm run start<br>

Running tests

% npm run test

Examples

Webpack

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 = this;
  self.count = 1;
  return `<div>
        <div><Hello /></div>
        <p>You clicked {{self.count}} times</p>
        <button onclick="self.count++;">Click me</button>
  </div>`;
}

Browser

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

<html>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script>
function Hello() {
    let self = this;
    return `<h1>{{self.title}}</h1>`;
}

function App() {
    let self = this;
    self.count = 1;
    return `<>
      <Hello title="your title" />
      <p>You clicked {{self.count}} times</p>
      <button onclick="self.count++;">Click me</button>
    </>`;
}
lemonade.render(App, document.getElementById('root'));
</script>
</body>
</html>

Creating a table from an array of objects

import lemonade from "lemonadejs";

export default function Component() {
    let self = this;

    self.rows = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bing', 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></th></thead>
        <tbody @loop="self.rows">
            <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
        </tbody>
    </table>`;
}

The event object

<html>
<body>
<div id='root'></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script>
function Component() {
    // Create the self object
    let self = this;
    self.test = function(e) {
        console.log(e);
        e.preventDefault();
    }
    // The property call is added to the observable list when added to the DOM
    return `<input type="button" value="Click test" onclick="self.test(e);"/>`;
}

// Render the LemonadeJS element into the DOM
lemonade.render(Component, document.getElementById('root'));
</script>
</body>
</html>

Enable/disable HTML elements

<html>
<body>
<div id='root'></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script>
function App() {
    let self = this;
    self.disabled = false;
    return `<>
      <button onclick="self.disabled = !self.disabled">Toggle</button>
      <input type="text" disabled="{{self.disabled}}" />
    </>`;
}
lemonade.render(App, document.getElementById('root'));
</script>
</body>
</html>

Reactive Web Components

<hello-element title="Hello world" />

class HelloElement extends HTMLElement {
    constructor() {
        super();
    }
 
    render() {
        let self = this;
        return `<>
            <h1>{{self.title}}</h1>
            <input type="button" value="setTitle()"
                onclick="self.title = 'Test'" />
        </>`;
    }
 
    connectedCallback() {
        if (! this.el) {
            lemonade.render(this.render, this, this);
        }
    }
}
 
window.customElements.define('hello-element', HelloElement);

License

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

Learning LemonadeJS

Documentation

  • Getting started
  • Attributes
  • Two-way binding
  • Arrays
  • Methods
  • Events
  • Components
  • Classes
  • Web components
  • Quick reference
  • Debugging
  • Contributing

Utilities

  • Awesome
  • Sugar
  • Testing
  • Plugins
  • Module (ESM)

Libraries

  • JavaScript List
  • JavaScript Rating
  • JavaScript Router
  • JavaScript Signature
  • JavaScript Data grid
  • JavaScript Image Cropper
  • JavaScript Modal
  • JavaScript Tabs
  • JavaScript Calendar
  • JavaScript Color picker

Examples

  • Lamp
  • Counter
  • Color generator
  • Value persistence
  • DIV onresize
  • Star rating
  • Table
  • Disable elements
  • Color picker
  • Hangman game
  • Tic tac toe

Other tools

  • JavaScript Components
  • JavaScript Data Grid
  • Free JavaScript Data Grid

Dependencies

Loading dependencies...

CVE IssuesActive
0
Scorecards Score
No Data
Test Coverage
No Data
Follows Semver
Yes
Github Stars
400
Dependenciestotal
0
DependenciesOutdated
0
DependenciesDeprecated
0
Threat Modelling
No Data
Repo Audits
No Data

Learn how to distribute lemonadejs in your own private NPM registry

npm config set registry  https://npm.cloudsmith.com/owner/repo
Processing...
Done
npm install lemonadejs
Processing...
Done
Start your free trial

Releases

Loading Version Data
NPM on Cloudsmith

Getting started with NPM on Cloudsmith is fast and easy.

Learn more about NPM on Cloudsmith
View the Docs