lemonadejs
Advanced tools
Readme
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.
% npm install lemonadejs
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
% npx @lemonadejs/create myApp<br>
% cd myApp<br>
% npm run start<br>
% npm run test
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>`;
}
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>
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>`;
}
<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>
<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>
<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);
This software is free to use, and it is distributed under the MIT license.
FAQs
Lemonade is a lightweight, micro reactive JavaScript library to create quick and reusable reactive JS components. No dependencies or transpile is require
The npm package lemonadejs receives a total of 1,341 weekly downloads. As such, lemonadejs popularity was classified as popular.
We found that lemonadejs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.