Build reactive UIs in the browser
with no build step.

// Function component — simple & clean
function Counter(): NixTemplate {
  const count = signal(0);
  return html`
    <p>${() => count.value}</p>
    <button @click=${() => count.value++}>
      +1
    </button>
  `;
}

// Class component — with lifecycle
class Clock extends NixComponent {
  time = signal(new Date().toLocaleTimeString());

  onMount() {
    const id = setInterval(() => {
      this.time.value = new Date()
        .toLocaleTimeString();
    }, 1000);
    return () => clearInterval(id);
  }

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

import { createRouter, RouterView, Link, lazy }
  from "@deijose/nix-js";

const router = createRouter([
  { path: "/",     component: () => HomePage() },
  { path: "/about", component: () => AboutPage() },
  {
    path: "/dashboard",
    component: () => new DashboardLayout(),
    meta: { requiresAuth: true },
    children: [
      { path: "/stats",    component: lazy(
        () => import("./pages/Stats")) },
      { path: "/settings", component: lazy(
        () => import("./pages/Settings")) },
    ],
  },
  { path: "*", component: () => NotFound() },
], {
  mode: "hash",
  scrollBehavior: (_to, _from, saved) =>
    saved ?? { left: 0, top: 0 }
});

// Auth guard using route meta from resolve()
router.beforeEach((to) => {
  const match = router.resolve(to);
  if (match?.meta?.requiresAuth && !isAuth())
    return "/login";
});

import { createStore, computed } from "@deijose/nix-js";

const cart = createStore(
  {
    items: [] as string[],
    total: 0,
  },
  (s) => ({
    add(item: string) {
      s.items.update(arr => [...arr, item]);
      s.total.update(n => n + 1);
    },
    remove(item: string) {
      s.items.update(arr =>
        arr.filter(i => i !== item));
      s.total.update(n => n - 1);
    },
    clear() { cart.$reset(); },
  }),
  (s) => ({
    itemCount: computed(() => s.items.value.length),
    hasItems: computed(() => s.items.value.length > 0),
  })
);

cart.$subscribe((key, next, prev) => {
  console.log("Store change:", key, prev, "→", next);
});

cart.add("Milk");
cart.itemCount.value; // 1
cart.hasItems.value;  // true

import { createForm, nixFieldArray, required, email, minLength } 
  from "@deijose/nix-js";

const form = createForm({
  profile: { email: "" },
  password: "",
  confirmPassword: ""
}, {
  validateOn: 'blur',
  validators: {
    "profile.email": [required(), email()],
    password: [required(), minLength(8)],
    confirmPassword: [
      required(),
      (value, allValues) =>
        value !== allValues?.password ? "Passwords do not match" : null
    ]
  }
});

// Dynamic field array
const { fields, append, remove } = nixFieldArray(
  [{ value: "" }],
  { value: [required(), email()] }
);

const onSubmit = form.handleSubmit(values => {
  console.log("Form submit:", values, fields.value.length);
});