# AlmostNo.js
AlmostNo.js is a **lightweight**, **zero-dependency** JavaScript framework featuring tagged template rendering, DOM morphing, custom elements, reactive state management, chainable DOM manipulation, event handling, animations, and HTTP requests.
## Features
- **Tagged Template Rendering** – Lit-style `html` tagged templates with surgical DOM updates.
- **DOM Morphing** – Reconcile live DOM against new HTML without destroying state.
- **Custom Elements** – Reactive `AnJSElement` base class with batched updates and computed properties.
- **Tiny & Fast** – 5 KB core, 6 KB extended, 12 KB full (minified + gzipped). Zero dependencies.
- **Chainable API** – Familiar `$().method()` syntax for clean, readable code.
- **DOM Manipulation** – Select, traverse, and modify elements effortlessly.
- **Events & Event Bus** – Attach, delegate, trigger events; cross-component communication.
- **Reactive State** – Proxy-based state with `onChange`, `onAny`, `patch`, and DOM bindings.
- **Components** – SSR-compatible server/client components with auto-mounting.
- **HTTP Requests** – Fetch wrappers with timeout handling and abort controllers.
- **Animations** – Simple CSS-based transitions.
- **Utilities** – Debounce, throttle, type checks, JSON parsing, and more.
## Examples
See AlmostNo.js [Live Examples](https://coreyolson.github.io/almostno.js/) in action.
- [Animations](docs/animate.html)
- [Attributes](docs/attributes.html)
- [Components](docs/components.html)
- [Core Features](docs/core.html)
- [DOM Manipulation](docs/dom.html)
- [Elements](docs/elements.html)
- [Events](docs/events.html)
- [Filtering & Traversal](docs/filtering.html)
- [HTTP Requests](docs/request.html)
- [State Management](docs/state.html)
- [Utilities](docs/utilities.html)
## Browser Support
AlmostNo.js targets **ES2020** and works on all modern browsers (Chrome, Firefox, Edge, Safari, Opera).
## Installation
### NPM
```sh
npm install almostnojs
```
```js
import $, { html, render, morph, AnJSElement, registerComponent } from 'almostnojs';
```
### CDN
```html
```
### Self-hosting
Download the latest release from `dist/browser/` and include it directly:
```html
```
## Choosing the Right Version
Three prebuilt bundles are available, plus NPM with tree-shaking.
### Feature Comparison
| Feature | Core | Extended | Full | NPM |
|----------------------------|------|----------|------|-----|
| **DOM Manipulation** | ✅ | ✅ | ✅ | ✅ |
| **Events & Event Bus** | ✅ | ✅ | ✅ | ✅ |
| **Attributes** | ✅ | ✅ | ✅ | ✅ |
| **HTTP Requests** | ✅ | ✅ | ✅ | ✅ |
| **Animations** | ❌ | ✅ | ✅ | ✅ |
| **Filtering & Traversal** | ❌ | ✅ | ✅ | ✅ |
| **State Management** | ❌ | ❌ | ✅ | ✅ |
| **Components** | ❌ | ❌ | ✅ | ✅ |
| **Template Parts** | ❌ | ❌ | ❌ | ✅ |
| **DOM Morphing** | ❌ | ❌ | ❌ | ✅ |
| **Custom Elements** | ❌ | ❌ | ❌ | ✅ |
### Bundle Sizes (minified + gzipped)
| Version | Size | Path |
|-------------|---------|---------------------------------------|
| **Core** | ~5 KB | `dist/browser/almostno.js` |
| **Extended**| ~6 KB | `dist/browser/almostno.extended.js` |
| **Full** | ~12 KB | `dist/browser/almostno.full.js` |
## Quick Start
### Template Parts (Tagged Templates)
Render reactive templates with surgical DOM updates — only changed values are patched.
```js
import { html, render } from 'almostnojs';
const app = document.getElementById('app');
function view(name) {
render(html`Hello, ${name}! `, app);
}
view('World'); // First render: creates DOM
view('AnJS'); // Update: patches only the text node
```
#### Attributes
```js
render(html`
Submit
`, container);
```
#### Lists
```js
const items = ['Apple', 'Banana', 'Cherry'];
render(html`${items.map(i => html`${i} `)} `, container);
```
#### Unsafe HTML
```js
import { html, unsafeHTML, render } from 'almostnojs';
render(html`${unsafeHTML('trusted markup ')}
`, container);
```
### DOM Morphing
Reconcile live DOM against new HTML without destroying state, focus, or event listeners.
```js
import { morph } from 'almostnojs';
morph(document.getElementById('app'), 'New content
');
```
### Custom Elements
Build reactive web components with `AnJSElement`.
```js
import { AnJSElement, html, registerComponent } from 'almostnojs';
class MyCounter extends AnJSElement {
init() {
this.state.count = 0;
}
render() {
return html`
this.state.count++}>
Clicked ${this.state.count} times
`;
}
}
registerComponent('my-counter', MyCounter);
```
```html
${repeat(
this.state.items,
item => item.id,
item => html`${item.text} `
)} `;
}
}
registerComponent('todo-list', TodoList);
```
#### Auto-Cleanup
```js
class LiveWidget extends AnJSElement {
init() {
// Automatically unsubscribed when element disconnects
this.own($.listen('data:update', (data) => {
this.state.value = data;
}));
}
render() { return html`${this.state.value} `; }
}
```
#### Awaiting Updates
```js
const el = document.querySelector('my-counter');
el.state.count = 42;
await el.updateComplete;
// DOM is now updated
```
### DOM Manipulation
```js
$('div').text('Hello, World!');
$('#box').css('color', 'red').class('highlight');
```
### Events
```js
$('#btn').on('click', () => alert('Clicked!'));
$.emit('app:ready', { ts: Date.now() });
$.listen('app:ready', data => console.log(data));
```
### State Management
```js
const state = $('#app').state({ count: 0 });
$('#increment').on('click', () => state.count++);
$('#display').bind(state);
```
```html
+1
```
### Components
```js
$.component("Card",
({ state, props }) => `
${props.title}
Likes:
Like
`,
() => $.state({ likes: 0, like() { this.likes++ } })
);
```
```html