npm package: @deijose/nix-js
Description: A lightweight, fully reactive micro-framework — no virtual DOM, no compiler, just signals and tagged templates.
Author: Deiver Vasquez
Latest version: 2.0.2

# Nix.js

[![npm version](https://img.shields.io/npm/v/@deijose/nix-js.svg)](https://www.npmjs.com/package/@deijose/nix-js)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Tests](https://img.shields.io/badge/tests-484%20passing-brightgreen.svg)]()
[![Coverage](https://img.shields.io/badge/coverage-95.86%25-brightgreen.svg)]()
[![Bundle size](https://img.shields.io/badge/min%2Bgzip-~10%20KB-orange.svg)]()
[![Zero Dependencies](https://img.shields.io/badge/dependencies-0-success.svg)]()
[![Website](https://img.shields.io/badge/website-nix--js-indigo.svg)](https://nix-js.dev/)

A lightweight, fully reactive micro-framework for building modern web UIs — no virtual DOM, no compiler, no build-time magic. Just signals, tagged templates, and pure TypeScript.

**[→ Documentation & Live Demo](https://nix-js.dev/)**

```
~24 KB minified · ~10 KB gzipped · zero dependencies · TypeScript-first · ES2022
```

## Installation

```bash
npm install @deijose/nix-js
```

## Subpath Imports (Tree-Shaking)

When you only need one module, import from subpaths:

```typescript
import { signal, effect } from "@deijose/nix-js/signals";
import { createRouter } from "@deijose/nix-js/router";
import { createStore } from "@deijose/nix-js/store";
import { createForm } from "@deijose/nix-js/form";
import { suspend, lazy } from "@deijose/nix-js/async";
import { html, repeat, transition } from "@deijose/nix-js/template";
import { mount } from "@deijose/nix-js/component";
import { NixComponent } from "@deijose/nix-js/lifecycle";
import { provide, inject, createInjectionKey } from "@deijose/nix-js/context";
import { enableDevTools } from "@deijose/nix-js/devtools";
```

This is optional: `import { ... } from "@deijose/nix-js"` remains fully supported.

## Quick Start

```typescript
import { signal, html, NixTemplate, NixComponent, mount, createRouter, RouterView, Link, useRouter } from "@deijose/nix-js";

// --- Pages as function components (NixTemplate) ---
// Plain functions returning html`` are recommended for pages and
// display-only components — no class needed, signals just work.

function HomePage(): NixTemplate {
  const count = signal(0);
  return html`
    <h1>Home</h1>
    <p>Count: ${() => count.value}</p>
    <button @click=${() => count.value++}>+1</button>
  `;
}

function UserPage(): NixTemplate {
  const router = useRouter();
  return html`<h1>User: ${() => router.params.value.id}</h1>`;
}

// --- Stateful component as class component (NixComponent) ---
// Use a class when you need lifecycle hooks: onInit / onMount / onUnmount.

class Clock extends NixComponent {
  private time = signal(new Date().toLocaleTimeString());
  private _id = 0;

  onMount() {
    this._id = setInterval(() => {
      this.time.value = new Date().toLocaleTimeString();
    }, 1000);
    return () => clearInterval(this._id); // auto-cleanup on unmount
  }

  render() {
    return html`<p>Clock: ${() => this.time.value}</p>`;
  }
}

// --- Router ---

const router = createRouter([
  { path: "/",         component: () => HomePage() },
  { path: "/user/:id", component: () => UserPage() },
]);

// --- App shell (function component) ---

function App(): NixTemplate {
  return html`
    <nav>${new Link("/", "Home")} ${new Link("/user/42", "User 42")}</nav>
    ${new Clock()}
    ${new RouterView()}
  `;
}

mount(App(), "#app", { router });
```

## What's Included

Everything ships in a single zero-dependency import:

| Category | APIs |
|---|---|
| **Reactivity** | `signal`, `computed`, `effect`, `batch`, `watch`, `untrack`, `nextTick` |
| **Templates** | `` html` ` ``, `repeat`, `ref`, `portal`, `transition`, `showWhen` |
| **Components** | `NixTemplate` (function components), `NixComponent` (lifecycle class), `mount`, children & named slots |
| **Router** | `createRouter`, `RouterView`, `Link`, `useRouter`, `RouterKey`, guards, nested routes, named routes (`name` + `navigate({ name })`), `mount(..., { router })` |
| **Forms** | `useField`, `createForm`, built-in validators, Zod/Valibot interop |
| **State** | `createStore`, `provide`, `inject`, `createInjectionKey` |
| **Async** | `suspend` (with `invalidate` for re-fetching), `lazy` |
| **Error handling** | `createErrorBoundary` |

## Documentation

## Query Package

`createQuery` and query cache utilities now live in `@deijose/nix-query`.

```bash
npm install @deijose/nix-query
```

Full API reference, guides, and examples:

**→ [github.com/DeijoseDevelop/nix-js](https://github.com/DeijoseDevelop/nix-js)**

## License

MIT