Ой, что-то я тупанул с двумя элементами контекста. Ведь реактивный блок это не какое-то значение, а просто описание реакции на изменение упомянутых в нём элементов. Но сути это не меняет.

Честно говоря, разница окажется настолько минимальной, что выходит непрактичным выбирать по перфомансу. Надо выбирать по тому, что лучше читается (имхо, второе) или что просто больше нравится.

Но тут, кажется, можно выражение упростить, чтоб была просто реактивная переменная.

$: marker = $items.find(item => item.articles.includes($article)) ?? marker

Спасибо. Мне больше нравится первый вариант. Все вычисления скрываются в небольшом иммедиейте.

Насчёт самого примера кода... Я не захотел записать всё в одну строку, так как не хотел использовать non-null assertion лишний раз. Параметр у Array#includes является non-nullable, в отличии от значения стора, хотя для includes null-безопасность совсем важна. Поэтому я написал if, который в обычном тайпскрипте был бы тайп-гардом, но это не сработало, наверное, из-за $. Так что получилось, что !-оператор всё равно пришлось применить. Моя невнимательность.

Да, всё верно, это из-за доллара. Чтоб не было, нужна промежуточная переменная, типа $: currentArticle = $article.
Но так-то можно и $article || null сделать.

А, или нельзя, хм

В том-то и дело, что сигнатура у includes такая: includes(searchElement: T, fromIndex?: number): boolean;
Так что только промежуточная переменная. Но опять же, в таких случаях ничего плохого в not-null assertion не вижу. Код это никак не сломает.

А, ну да, нельзя. Ну тогда можно

$article ? item.articles.includes($article!) : false

Грязновато, конечно. Наверное, лучше так не упрощать, два тернарника, некрасиво уже.

Да, однострочить везде это довольно сомнительно.

А чем это лучше чем через window?

Хм, помещать в DOM данные... Тоже интересно, зачем

Чтобы гидрация сработала

Иначе приложение не сможет переиспользовать существующий Dom

тем что через window ты исполняешь JS а это значит нужно проработать CSP и защититься от XSS

от XSS мб тоже нужно будет защититься даже в этом случае, но вместе с nonce\хэшами и CSP даже реальная XSS не будет проблемой так как упадет сразу

А чем это лучше

$: marker = $article
  && $items.find(item => item.articles.includes($article));

?

Если бы результат ф-ии не присваивался я бы понял

Нет фолбэка на старый маркер! 🙂

Дак в первом варианте его и нет ?

Кстати да. Функционально неидентичный код.

$: marker = $article
 && $items.find(item => item.articles.includes($article)) ?? marker;

Фолбек ?