Сигналы, роутинг, реактивность, Fusor приложение

В этом посте я опишу, как настроить современную маршрутизацию и использовать сигналы для реактивного отключения выбранных ссылок.

Сигналы — это просто реализация паттерна "observable". Хотя мы могли бы использовать любую библиотеку для этой цели, мы создадим свою собственную, чтобы обеспечить лучшую наглядность и понимание.

export class Observable {
  #callbacks = new Set();
  notify() {
    for (const fn of this.#callbacks) fn();
  }
  subscribe(callback) {
    this.#callbacks.add(callback);
    return () => this.#callbacks.delete(callback); // unsubscribe
  }
}

Далее нам нужно будет создать библиотеку маршрутизации для нашего приложения. Реализация маршрутизации в современных браузерах проста и не требует использования сторонних библиотек.

import { update } from "@fusorjs/dom";
import { Observable } from "./observable";

const observable = new Observable();
let route = location.hash;

window.addEventListener(
  "popstate",
  () => {
    route = location.hash;
    observable.notify();
  },
  false
);

export const getRoute = () => route;
export const mountRoute = (self) => observable.subscribe(() => update(self));

Далее нам нужен реактивный компонент ссылки, который изменяет свой DOM-узел с элемента a на обычный текст, если текущий маршрут совпадает с его собственным маршрутом.

import { span, a } from "@fusorjs/dom/html";
import { mountRoute, getRoute } from "./route";

const RouteLink = (title, route) =>
  span(
    { mount: mountRoute }, // enable reactivity
    ((cache = a({ href: route }, title)) => () =>
      getRoute() === route ? title : cache)()
  );

Обратите внимание, что в Fusor существует три способа определить HTML-элемент. В приведённом выше примере используются функции span и a. Второй способ включает использование JSX.

<span mount={mountRoute}>{(
  (cache = <a href={route}>{title}</a>) => 
  () => getRoute() === route ? title : cache
)()}</span>

И третий использует функцию h("span", {mount: mountRoute}, .....

Свойство mount позволяет назначить функцию, которая срабатывает, когда элемент присоединяется к DOM. Обратитесь к разделу "Жизненный цикл компонентов" в туториале для получения более подробной информации.

Наконец, мы используем наш компонент для динамического создания списка ссылок и их прикрепления к DOM.

import { getElement } from "@fusorjs/dom";
import { ul, li } from "@fusorjs/dom/html";
import { RouteLink } from "./route-link";

const block = ul(
  [...Array(10)].map((_, i) =>
    li(RouteLink(`${i}. Section`, `#url-to-${i}-section`))
  )
);

document.body.append(getElement(block));

Посмотрите пожалуйста полный рабочий пример.

Репозиторий Fusor.

Спасибо!