Вышел Vue 3.5.0

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

По сравнению с новогодней кутерьмой с 3.4 версией на этот раз всё должно быть более-менее спокойно

#vuejs

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

Кот ангулярщика вываливает миску на пол, раскладывает корм ровными прямоугольниками, глядит некоторое время на них удовлетворенно, съедает корм и тихонько ложится спать довольный.

Кот реактера также высыпает корм, раскладывает из него какой-то архитектурный план, долго что-то двигает, думает, меняет детали местами, наконец съедает всё и чинно ложится спать.

Кот накстовца высыпает еду на пол, напряженно смотрит на нее, начинает неистово долбить корм миской, раздалбывает его в пыль, раскладывает из этой пыли три дороги, вынюхивает их, трахает первых двух котов, падает на спину и колошматя лапами по полу в истерике орет - "Бл.дь, я не могу так работать!"

#humor #nuxt

Понеслась...

Уже несколько серьезных issue запощенно
Включая сломанный computed (перестал возвращаться oldValue)

#vuejs #bugs

Баг с забытым oldValue у computed уже пофиксили (но еще не зарелизили)

Судя по изменениям в коде, действительно - просто забыли

Заодно добавили тест на него

Пока это единственный баг с пометкой important

#vuejs #bugs #computed

Каким же убогим в техническом плане стал сайт Хабра за последние месяцы...

Открываешь страницу, ждешь 3-4 секунды, кликаешь на дропдаун менюшку - иконка поворачивается, а самого меню нет. Ждешь еще, кликаешь - нет, всё сломалось. Надо перегрузить страницу, подождать секунд 7-8 и потом уже кликать, и появится менюшка. И это на быстром интернете.

Как там у вас, SSR-щиков это называется? Гидратация?

Заходишь на страницы личного кабинета - там пусто. Надо нажать F5 и тогда контент появится.

Хабр позорит гордое имя Vue, на котором он частично (комментарии) написан. А писали его, кстати, вроде, завсегдатаи @vuejs_club

#habr #ssr

Если вам надо выводить атрибут на элементе по условию, то null выведет просто имя атрибута, а пустая строка (falsy) запретит его вывод вообще.

Это касается только нестандартных HTML атрибутов (типа class, disabled)

<template>
  <div :someProp="hasSomeProp ? 'disabled' : null"></div>
  <!-- Выведет <div someProp></div> -->
  </template>

<template>
  <div :someProp="hasSomeProp ? 'disabled' : ''"></div>
  <!-- Выведет <div></div> -->
</template>

#tip

Всё сущее состоит из противоположных начал, которые, будучи едиными по своей природе, находятся в борьбе друг с другом: день-ночь, горячее-холодное, добро-зло, SPA - бэк API.

Эта борьба, движимая диалектическим законом единства и борьбы противоположностей, служит источником развития, трансформируя количественное накопленные знания в качественно новые формы.

Поэтому SSR, серверные компоненты и прочие гермафродитные порождения LGBT фронтенда не имеют будущего и обречены на разлагающее зловонное вымирание.

#esse #ssr

Воскресная эстетика

#offtop #video

Во Vue 3 вышла Reactive Props Destructure - деструктуризация пропсов

Основной плюс - возможность указывать дефолтные значения более человеческим способом:

const { count = 0, msg = "hello" } = defineProps<{
  count?: number;
  message?: string;
}>();

const double = computed(() => count * 2);

Как это делалось ранее (и можно делать сейчас):

const props = withDefaults(
  defineProps<{
    count?: number;
    msg?: string;
  }>(),
  {
    count: 0,
    msg: "hello",
  }
);

Деструктуризация пропсов - это осколки невзлетевшего Reactivity Transform

По сути деструктуризация пропсов это просто макрос, скрывающий под собой обычную работу с пропсами:

// на входе
const { count } = defineProps(["count"]);
console.log(count);

// на выходе компилятора
const __props = defineProps(["count"]);
console.log(__props.count);

Минусы:

- Деструктурированные пропсы могут быть случайно переданы в функцию, что приведет к потере реактивности

- Пропсы перестают быть явными (становятся неотличимы от обычных переменных)

- Путаница для новичков с магией компилятора

Решение:

Не забывать работать с ними как с props.X либо не использовать деструктуризацию.

#props #reactivity

Полэвана попало на первую страницу Гитхаба в разделе "Спонсорство"

Причем, он кликабельный

#evanyou

Сижу я как-то без работы уже какое-то время. И тут подруга договорилась об интервью. Поехали мы с ней, - в Москве, где-то в пределах бульварного кольца особнячок такой старинный. Поднимаемся по лестнице, на третий этаж. Там она пошла куда-то, я жду.

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

Я присел на стул. Тут подходит из дальнего угла тоже относительно молодой человек - типа, техлид. Ну, начал я ему свои регалии по резюме рассказывать. Он послушал совсем немного, а потом говорит:

- Это всё хорошо. А вы работали с магазином Тьян-Ми?

Я так понял это софт какой-то, но название не расслышал с первого раза. Переспрашиваю:

- Что?

Он опять:

- Магазин Тьян-Ми

А я опять не расслышал, - эти работники по все комнате шуршат своими бумагами и канцелярскими приборами, а техлид этот на расстоянии. Неудобно, но все же переспрашиваю:

- Какой магазин?

- Тьян-Ми.

И видно, что уже раздраженно ответил. Я говорю:

- Нет.

Он:

- Ну а о чем тут еще говорить?

Поворачивается и уходит обратно в дальний конец комнаты.

И я такой, не понимаю - это что, всё? Оглядываюсь на работников - а они кто сочувственно смотрит, кто глаза опустил.

Я секунд 20 подождал, потом встал, выхожу, и на лестнице еще оборачиваюсь - может я не так понял и меня обратно позовут?

Не позвали...

Вот такой сон сегодня приснился. И настолько реалистичный и красочный, прям до сих пор под впечатлением.

Что за магазин Тьян-Ми?
Что-то на Наксте?

#offtop

После выхода Vue 3.5.3 все тесты в ее экосистеме стали "зелеными", что уже как бы хороший знак.

Недавно кто-то в чате пожаловался, что после апдейта Vue у него сломались импорты по имени директории (index.ts не находился). Я тоже словил этот баг - это очередной закос Volar, решается перезагрузкой окна.

#vuejs #volar

А вы знали, когда вышел первый драфт спецификации CSS3?

В 1999 году

#css

Cходу смог применить вроде бы чисто SSR-ную новую штуку от Vue 3.5 - useId()

При реализации глобального прелоадера

Там компоненты, которые могут влиять на прелоадер, регистрируются со своими id, который должен быть уникален для компонента. Раньше был вариант с uuid.

Очень показательно в плане того, чтобы увидеть, для чего эта функция может быть полезна.

Также очевидно useId() много будет использоваться для доступности (a11y), о чем и написано в документации.

#useid

На днях РКН снова сильно обеспокоил своими блокировками. Потратил опять время, поставил VPN Hiddify

На сервере инсталяционный скрипт ставил кучу барахла минут 15, убил мои Nginx и MySQL, потому что ставит свои. Хорошо хоть сервер не прод. )

Пришлось всё переставлять и под него делать отдельный сервер. В итоге заработало без особых бубнов, выглядит солидно. Но клиент на Windows иногда подвисает. Тогда лучше его убивать через Task manager

Разработка иранцев и китайцев.

Кстати, CPU и памяти он жрет на клиенте несравнимо меньше Outline

P.S. Будете выбирать местоположение своего сервера, учитывайте свои предпочтения по рекламе в `Youtube`. Сделаете в Германии - будете слушать рекламу на немецком. В Италии - на итальянском. В РФ рекламу не пускали.

#vpn

Еще один интересный API client - Yaak с девизом: «Offline-First and Bloat-Free»

На днях вышел в Open source. Написан на Tauri и React

Выглядит приятно, минималистично, но достаточно полно.

Альтернативы:
- Postman - слишком жирный и перегруженный, требует интернета для работы
- Hoppscotch - слишком часто не может подсоединиться к внешним API (CORS или блокировка его прокси)

Первое Tauri приложение, что я попробовал. К сожалению, реклама не то же самое, что жизнь - дистрибутив 40Мб, в развернутом виде - 120Мб. Не сильно меньше Electron-a, хотя не должен содержать в себе JS движок.

Есть еще один популярный "як" в семействе API клиентов - httpYac - CLI версия и расширение для VS Code

#api #rest #yaak #tauri #hoppscotch

Вышла первая бета шестого Vite

Из нового только Environment API

Пятый вышел 10 месяцев назад, и брейкингов там было выше крыши. Видимо затишье перед интеграцией Rolldown

#vite

18 качественных отличий Vue от React от Artyom Tuchkov

- отсутствие легаси-абсурда: @change во вью - это реальный change, а не input, как в реакте, мимикрирующий под change
- отсутствие stale closure и всех связанных с ним проблем
- автоматический трекинг зависимостей, нет костылей типа useCallback
- удобные хелперы из коробки (привет либам clsx и classnames)
- удобный DSL, а не стремный JSX
- нет useEffect и миллиарда статей и докладов на тему “вы неправильно используете useEffect”
- нет проблем с воображением, когда добавляют новые фичи - useImperativeHandle и dangerouslySetInnerHTML
- есть сахар для работы с формами - v-model
- есть слоты
- нет костыльного стриктмода, который, прости хоспаде, твой код запускает дважды, чтобы тебе было приятнее работать избавить тебя от багов
- нет monkey-patching’а нативных console и fetch
- нет ререндеров на любой чих
- нет 50 вложенных контекстов в руте приложения
- нет прекрасного forwardRef
- есть нормальная система плагинов
- есть реактивность для Map/Set из коробки
- есть нормальная мутабельность без сотни копий всего подряд
- есть nextTick, не надо костылить с flushSync

#react #vuejs