Misinin Mikhail

Signals в Lit.js

Не так давно узнал, что в lit/labs появились Signals, решил разобраться, смогут ли они заменить rxjs в рабочем проекте. Делюсь с вами результами эксперимента.

Как организована связь между UI и моделью сейчас?

Каждый модуль, у которого есть пользовательский интерфейс, разделяется на UI и Model. Для связи реакций взаимодействия пользователя с интерфейсом используется rxjs.

Пример: модуль состоит из кнопки-счетчика.

UI:


import { LitElement, html } from "lit";

export class MyElement extends LitElement {
 counterSubject$ = null;
  
 static properties = {
  counter: { type: Number },
 };
 
 connectedCallback() {
  super.connectedCallback();
  this.counterSubject$.subscribe((value) => {
   this.counter = value;
 });
 }
 
 render() {
  return html`<button>Нажали раз ${this.counter}</button> `;
 }
}

И логика модуля строится следующим образом, что в зависимости от того сколько раз нажали на кнопку происходят различные действия.

Модель:


import { BehaviorSubject } from "rxjs";

class CounterModelRx {
 counter$ = new BehaviorSubject(0);
 
 constructor() {
  const counterBtn = document.createElement("my-element");
  counterBtn.counterSubject$ = this.counter$;
  document.body.append(counterBtn);
  counterBtn.addEventListener("click", this.clickHandler);
  
  this.counter$.subscribe(() => {
   // some logic
  })
 }

 clickHandler = () => {
  const newValue = this.counter$.getValue() + 1;
  if (newValue > 2) {
  // side effect
  }
  if (newValue > 42) {
  // magic boom
  }
  this.counter$.next(newValue);
 }
}

Видно, что с помощью "модели" можно подписаться на изменения счетчика и передать поток данных с новым значением, которое сразу отображается пользователю. Однако подход содержит избыточный код: подписки в компонентах, вызовы BehaviorSubject.

Что меня привлекло в Signals?

- Меньше кода.
- Автоматическое обновление UI без явных подписок.

Компонент кнопки, следуя рекомендациям из документации:

UI:


import { LitElement, html } from "lit";
import { SignalWatcher, signal } from "@lit-labs/signals";

export class MyElement extends SignalWatcher(LitElement) {
 counter = null;
   
 render() {
  return html` <button part="button">count is ${this.counter.get()}</button> `;
 }
}

Я уже почти обрадовался, что смогу избавиться от подписок на Subject'ы в ConnectionCallback'ах компонента, но смотрим дальше.

Модель:


import { signal } from "@lit-labs/signals";

class CounterModelSignal {
 counter = signal(0);
 constructor() {
  const counterBtn = document.createElement("my-element");
  counterBtn.counter = this.counter;
  document.body.append(counterBtn);
  counterBtn.addEventListener("click", this.clickHandler);
 }
 clickHandler = () => {
  const newValue = this.counter.get() + 1;
  if (newValue > 2) {
  // side effect
  }
  if (newValue > 42) {
  // magic boom
  }
  this.counter.set(newValue);
 }
}

Что же меня остановило?

Пошел искать, а как же подписаться другим на изменения счетчика внутри модели. И наткнулся на Missing Features. Ожидал, что можно будет получить некоторый effect по которому запустить цепочку реакций, но это пока что не готово.

Signals выглядят интересно, но пока не подходят для сложных сценариев. Жду когда они станут частью web-платформы, подобные сценарии можно будет писать проще.

🔥6

339 viewsedited 19:16