Fjord

Крошечная библиотека реактивных UI-компонентов. Около 3 КБ в gzip, ноль зависимостей, подключается одной строкой.

~3.1 КБ gzip 0 зависимостей Лицензия MIT ES2015+

Зачем ещё одна библиотека

Большинство реактивных фреймворков тянут за собой сборку, бандлер и десятки килобайт рантайма. Fjord решает другую задачу: добавить реактивность и компоненты на обычную HTML-страницу без шага сборки. Подключаете <script> — и работаете.

Установка

Самый быстрый способ — скачать минифицированную сборку и подключить её рядом со страницей. Это один статический файл, никакого шага сборки:

<script src="/fjord.min.js"></script>
<script>
  const { reactive, effect, h, mount } = Fjord;
  const state = reactive({ count: 0 });
  effect(() => console.log("count:", state.count));
  state.count++; // -> count: 1
</script>

Библиотека — это один статический файл без API и телеметрии. Держите его рядом со своими ассетами: он кэшируется как обычная статика и не требует рантайма.

Что внутри

Функция	Назначение
`reactive()`	Делает объект реактивным: изменения полей триггерят зависимости.
`effect()`	Запускает функцию и переисполняет её при изменении используемых полей.
`computed()`	Производное значение, которое пересчитывается автоматически.
`h()` / `mount()`	Мини-хелперы для создания и монтирования DOM-узлов.

Пример компонента

const counter = () => {
  const s = Fjord.reactive({ n: 0 });
  const label = Fjord.h("span", { "data-text": "n" }, []);
  const btn = Fjord.h("button", { onclick: () => s.n++ }, ["+1"]);
  Fjord.effect(() => label.textContent = s.n);
  return Fjord.h("div", {}, [label, btn]);
};
Fjord.mount(counter(), "#app");

Дальше — быстрый старт и полный справочник API.