nerve-ending v0.0.3
Nerve Ending
Nerve Ending
is a lightweight JavaScript micro-library that provides a set of functions for creating and manipulating DOM elements declaratively. It is particularly suitable for building cross-framework UI components and feature enhancement libraries outside the business development of modern web frameworks (such as React, Vue, Svelte, and Alpine), which can significantly improve code readability and maintainability.
Features
- ๐ Chainable API for intuitive DOM creation
- ๐ฏ Type-safe element construction
- ๐งน Automatic cleanup of event listeners
- ๐ชถ Lightweight with zero dependencies
- ๐จ Natural, declarative syntax
- ๐ Easy element composition
Installation
npm install nerve-ending
Why Nerve Ending?
Traditional DOM manipulation can be verbose and hard to read. Nerve Ending transforms this:
const main = document.createElement('main');
main.className = 'container';
const heading = document.createElement('h1');
heading.className = 'title';
heading.onclick = () => console.log('clicked');
heading.textContent = 'My first app';
main.appendChild(heading);
Into this:
const { element } = main({ class: 'container' })(
h1({ class: 'title', onclick: () => console.log('clicked') })(
'My first app'
)
);
Core Concepts
Nerve Ending introduces a fluent interface for DOM manipulation that follows a natural mental model: 1. Select the element type 2. Define its properties 3. Add its children 4. Get back a manageable element reference
Usage
import { main, h1, button, span } from 'Nerve Ending';
// Create a simple component
const { element, cleanup } = main({ class: "app" })(
h1({ class: "title" })(
span("Welcome to "),
span({ class: "highlight" })("Nerve Ending")
),
button({
onclick: () => alert('Hello!'),
class: "greeting-btn"
})("Say Hello")
);
// Add to DOM
document.body.appendChild(element);
// Cleanup when done
// cleanup();
Key Benefits
- Declarative Syntax: Write DOM structures that mirror their visual hierarchy
- Memory Safety: Automatic cleanup of event listeners prevents memory leaks
- Type Safety: When used with TypeScript, provides full type inference
- Composability: Easily combine and nest elements
- Developer Experience: Intuitive API reduces cognitive load
License
MIT ยฉ Layerhub
6 months ago