Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nabeelalihashmi/nibble
A minimal and fast library for automatic reactive DOM updates, two-way data binding with signals.
https://github.com/nabeelalihashmi/nibble
dom dom-manipulation framework javascript javascript-framework javascript-library laravel laravel-framework reactive reactivity signal signals
Last synced: about 1 month ago
JSON representation
A minimal and fast library for automatic reactive DOM updates, two-way data binding with signals.
- Host: GitHub
- URL: https://github.com/nabeelalihashmi/nibble
- Owner: nabeelalihashmi
- Created: 2024-08-07T09:27:00.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-07T09:55:16.000Z (4 months ago)
- Last Synced: 2024-09-28T19:21:39.623Z (about 2 months ago)
- Topics: dom, dom-manipulation, framework, javascript, javascript-framework, javascript-library, laravel, laravel-framework, reactive, reactivity, signal, signals
- Language: HTML
- Homepage: https://nabeelalihashmi.github.io/nibble/
- Size: 31.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nibble.js
[](https://linkedin.com/in/nabeelalihashmi)
[](https://aliveforms.com)
NibbleJS is a minimal lightweight and efficient JavaScript framework for reactive programming and data binding. It provides a minimalistic approach to manage reactivity with signals in your web applications. It is written in 150 lines of code only. It's API is extremly small, so learning curve is very small. Signal API is composed of 4 functions only: `signal`, `compute`, `watch`, `effect` and Nibble DOM has only following directives `bind:value|text|html|group|any attribute`, `class:`, `this`, `if` and `nibble`if you want to activate nibble dom only on selected nodes,
## Developer Information
- **Developer:** Nabeel Ali
- **Email:** [email protected]
- **LinkedIn:** [https://linkedin.com/in/nabeelalihashmi](https://linkedin.com/in/nabeelalihashmi)
- **Twitter/X:** [https://twitter.com/nabeelalihashmi](https://twitter.com/nabeelalihashmi)
- **YouTube:** [https://youtube.com/@nabeelalihashmi](https://youtube.com/@nabeelalihashmi)
- **Website:** [aliveforms.com](https://aliveforms.com)
## Why NibbleJS?
NibbleJS is designed to remove the overhead of large frameworks while simplifying the development of web applications by offering a streamlined, easy-to-use reactive programming library. Here are some reasons why you might choose NibbleJS:
- **No Compilation Required:** NibbleJS works directly with the DOM. Just plug and play.
- **Decoupled Design:** You can use NibbleJS with signals for reactivity or add the DOM library for additional features.
- **Lightweight and Fast:** Optimized for performance, ensuring minimal overhead.
- **Flexible Data Binding:** Easily bind data to DOM elements and keep your UI in sync with your state.
- **Minimal Codebase:** At just 150 lines of code, NibbleJS provides a compact alternative to larger frameworks like Vue and Svelte, reducing complexity while maintaining functionality.
- **Avoid Overhead:** Designed to avoid the overhead of larger frameworks, making it easier to integrate with other platforms.
- **Easy Integration:** Can be seamlessly used with PHP frameworks like Laravel to add interactivity without the need for heavy dependencies.
With NibbleJS, you can achieve efficient reactivity and data binding in your web applications without the bloat of larger frameworks.
## Features
## Features of NibbleJS
- **Reactive Programming:** Manage reactivity efficiently with a simple signal system.
- **Flexible Data Binding:**
- **Two-Way Binding:** Use `bind:value` for two-way data binding between DOM elements and application state.
- **Property Binding:** Bind attributes to elements with `bind:`, enabling dynamic property updates.
- **Group Binding:** Handle radio and checkbox groups efficiently with group binding functionality with `bind:group`.
- **Conditional Rendering:** Use `if` for conditional rendering of DOM elements based on your application's state.
- **Class Binding:** Dynamically add or remove CSS classes with `class:` for better styling control.
- **Watcher:** Utilize watchers to react to changes in state and perform actions accordingly.
- **Minimal Overhead:** Avoids the complexity and bloat of larger frameworks, making integration with other platforms seamless.
- **Easy Integration:** Can be easily integrated with PHP frameworks like Laravel to add interactivity to your applications.
- **Dynamic Updates:** Supports real-time updates and efficient DOM manipulation.
- **Simple API:** Provides a straightforward API for managing signals, effects, and reactivity.
- **No Dependencies:** Operates independently of other libraries, reducing potential conflicts and bloat.
- **Cross-Browser Compatibility:** Works across various browsers to ensure consistent functionality.
## Installation and Usage
Download the files and link using script
```
<script src="dom.js">
```
Via CDN links, making it easy to include in your project:
```
<script src="https://cdn.jsdelivr.net/gh/nabeelalihashmi/nibble@main/js/v1/signal.js">
```
## Signal API Documentation
### signal
Creates a reactive signal.
```
const count = signal(0);
```
### effect
Runs a function whenever its dependent signals change.
```
effect(() => {
console.log(count.value);
});
```
### compute
Creates a computed signal based on other signals.
```
const doubleCount = compute(() => count.value * 2);
```
### watch
Watches for changes in a signal and runs a callback with the old and new values.
```
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
```
## Nibble DOM Documentation
NibbleJS supports various bindings and directives to synchronize the DOM with your application state. When using NibbleJS DOM functionality, make sure to declare signals with `var`. call `nibbleDom` to initialize.
### nibbleDom
Initializes NibbleJS bindings in the DOM.
```
document.addEventListener("DOMContentLoaded", () => {
nibbleDom();
});
```
### bind:value
Binds the value of an input element to a signal.
```
```
### bind:text
Binds the inner text of an element to a signal.
```
0
```
### bind:html
Binds the inner HTML of an element to a signal.
```
0
```
### bind:property
Binds the property of an element to a signal.
```
0
```
```
Disable
// after nibble dom is initialized
dis.addEventListener('click', function () {
disable.value = "disable";
})
```
### bind:group
Binds a group of checkboxes or radio buttons to a signal.
#### Checkbox Group
```
```
#### Radio Group
```
```
### class:classname
Toggles a class on an element based on a signal's value.
```
0
```
### if
Conditionally displays an element based on a signal's value.
```
OOOPS!!!
```
### this
Binds reference of button without requiring querySelector or getElementById. Only usable after `nibbleDom()` is called, which is automatically called in dom.js. Make sure to put the code access reference after DOMContentLoaded.
```
Set
myButton.addEventListener('click', function() {
name.value = 'Test'
})
```
### nibble
By default, Nibble DOM selects all nodes while applying. To optimize it, set `window.explicitNibble = true` before adding `dom.js` and in elements, add attribute `nibble`
## Examples
### Singls Only without Nibble DOM
```
NibbleJS
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.main {
padding: 1rem;
border: 1px solid #FFBF00;
border-radius: 1rem;
}
// Complete signal api has only following members
// signal, compute, effect, watch
let count = signal(0);
let computedValue = compute(() => count.value * 10);
let input = document.querySelector("#number");
let valueDiv = document.querySelector("#value");
let computedDiv = document.querySelector("#computed");
let resetButton = document.querySelector("#button");
input.addEventListener('input', function (event) {
count.value = event.target.value
})
resetButton.addEventListener('click', function () {
count.value = 0;
})
effect(() => {
valueDiv.innerText = count.value;
})
effect(() => {
input.value = count.value;
})
effect(() => {
computedDiv.innerText = computedValue.value;
})
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`)
if (newValue > 50) {
alert("Above 50 not allowed");
count.value = 50;
}
})
```
### With Nibble DOM
```
NibbleJS
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.main {
padding: 1rem;
border: 1px solid #FFBF00;
border-radius: 1rem;
}
.danger {
border: 2px solid #ff0000 !important;
}
NibbleJS DOM
Value:
Computed:
Reset
Fruits
Apple
Banana
Mango
Agree
Conditional Agree
No
Yes
Created by Nabeel Ali - linkedin.com/in/nabeelalihashmi
// Complete Nibble DOM api has only following directives
// with dom, signal must use var
var count = signal(0);
var computedValue = compute(() => count.value * 10);
var selectedFruits = signal(["mango"]);
var fruits = compute(() =>
selectedFruits.value.map((f) => `<li class="list-group-item">${f}</li>`).join(""),
);
var agree = signal("yes");
var agreement = compute(() =>
agree.value == "yes" ? true : false,
);
var isDanger = compute(() => count.value > 30 ? true : false);
var showItem = compute(() => count.value > 30 ? true : false);
document.addEventListener('DOMContentLoaded', app);
function app() {
console.log('loaded')
button.addEventListener('click', function () {
count.value = 0;
})
// make sure it runs after DOMContentLoaded
watch(count, (oldValue, newValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`)
if (newValue > 50) {
alert("Above 50 not allowed");
count.value = 50;
}
})
}
```
## Feedback
I value your feedback! Please share your thoughts, suggestions, and experiences with NibbleJS. Your input helps to improve and tailor the framework to better meet your needs.