Справочник API

reactive(obj) → obj

Оборачивает обычный объект в реактивный. Чтение полей внутри effect() или computed() регистрирует зависимость, а запись — уведомляет всех подписчиков.

const state = Fjord.reactive({ name: "Аня", online: false });
state.online = true; // триггерит связанные эффекты

Замечание: реактивность неглубокая. Вложенные объекты оборачивайте отдельным вызовом reactive().

effect(fn) → runner

Немедленно выполняет fn и запоминает, какие реактивные поля она прочитала. При изменении любого из них fn выполняется снова. Возвращает функцию-раннер, которую можно вызвать вручную.

const s = Fjord.reactive({ q: "" });
Fjord.effect(() => {
  document.title = s.q ? `Поиск: ${s.q}` : "Fjord";
});

computed(fn) → getter

Создаёт производное значение. Возвращает геттер-функцию; значение пересчитывается автоматически, когда меняются его зависимости.

const c = Fjord.reactive({ a: 2, b: 3 });
const sum = Fjord.computed(() => c.a + c.b);
sum(); // 5
c.a = 10;
sum(); // 13

h(tag, props, children) → Element

Создаёт DOM-элемент. Ключи props, начинающиеся с on, вешаются как обработчики событий; class задаёт className; остальные становятся атрибутами. children — массив строк или узлов.

const link = Fjord.h("a",
  { href: "/quickstart.html", class: "cta" },
  ["Начать"]);

mount(el, root) → el

Очищает контейнер root (селектор или элемент) и вставляет в него el.

Fjord.mount(link, "#app");

bind(node, state) → node

Декларативная привязка на существующей разметке. Атрибут data-text="ключ" синхронизирует текст узла с полем состояния; data-on="событие:метод" вешает обработчик.

<div id="box">
  <span data-text="count"></span>
  <button data-on="click:inc">+1</button>
</div>

<script>
  const state = Fjord.reactive({ count: 0 });
  state.inc = () => state.count++;
  Fjord.bind(document.getElementById("box"), state);
</script>