Быстрый старт

От пустой страницы до первого реактивного компонента — пара минут и никакой сборки.

Установка

Вариант 1. Скачать файл (рекомендуется)

Скачайте fjord.min.js, положите рядом со страницей и подключите — глобальный объект Fjord станет доступен:

<script src="/fjord.min.js"></script>

Хотите зафиксировать версию — храните файл под именем с версией:

<script src="/fjord-1.4.2.min.js"></script>

Вариант 2. npm

npm install fjord-ui

import { reactive, effect, h, mount } from "fjord-ui";

Первый пример

Создадим счётчик, который обновляется при клике. Достаточно обычного HTML и одного скрипта:

<!DOCTYPE html>
<div id="app"></div>

<script src="/fjord.min.js"></script>
<script>
  const { reactive, effect, h, mount } = Fjord;

  const state = reactive({ count: 0 });

  const label = h("span", {}, ["0"]);
  const button = h("button", { onclick: () => state.count++ }, ["Нажми меня"]);

  effect(() => { label.textContent = state.count; });

  mount(h("div", {}, [label, " ", button]), "#app");
</script>

Обратите внимание: мы нигде не описывали «когда перерисовать». effect() сам запомнил, что читает state.count, и переисполнится ровно тогда, когда значение поменяется.

Реактивные вычисления

Производные значения удобно оформлять через computed():

const cart = reactive({ price: 100, qty: 3 });
const total = Fjord.computed(() => cart.price * cart.qty);

effect(() => console.log("Итого:", total())); // Итого: 300
cart.qty = 5;                                   // Итого: 500

Что дальше

Полное описание всех функций — в справочнике API. Готовые сниппеты — в разделе примеры.