Skip to content

Что нового — Октябрь 2026 ​

Подписаться (Atom)

9 октября ​

DevToolz 0.5.0 ​

История версий пакета

  • Изменено: команды для изображений image-hash и image-batch и их модули в devtoolz ui переехали в отдельный пакет MediaToolz. В DevToolz обе команды остались заглушками: они печатают image-batch has moved to @macrulez/mediatoolz — run it with: npx @macrulez/mediatoolz image-batch … и завершаются с кодом 2, так что скрипт, который всё ещё их вызывает, падает громко. Заглушки будут убраны в одной из следующих версий. Чтобы перейти, установите @macrulez/mediatoolz, используйте те же команды и флаги и перенесите папку .devtoolz/image-batch/ в .mediatoolz/image-batch/. См. Переход с DevToolz.
  • Изменено: devtoolz ui сохраняет два модуля, проверки кода и очистку, а файловый браузер показывает только папки.
  • Изменено: DevToolz больше не зависит от hazehash, blurhash, thumbhash и sharp, поэтому ставится легче и никогда не предлагает установить нативную библиотеку изображений. Программный API больше не экспортирует runImageHash, runImageBatch и связанные типы; их экспортирует @macrulez/mediatoolz.

DevToolz 0.4.3 ​

История версий пакета

  • Изменено: в интерфейсе у Convert появился переключатель Resize the images, по умолчанию выключенный. Пока он не включён, изображения только конвертируются в выбранный формат, а поля размера скрыты (запуск без размеров никогда ничего не уменьшает; см. Методы задания размера); раньше с самого начала был подставлен список ширин (800, 1600), и каждое изображение уменьшалось дважды.
  • Изменено: в интерфейсе Image Hash по умолчанию отмечены hazehash и доминирующий цвет; blurhash и thumbhash выключены.
  • Добавлено: --no-resize отключает размеры сохранённой конфигурации на один запуск.

MediaToolz 0.1.1 ​

История версий пакета

  • Изменено: нативная библиотека изображений sharp теперь ставится вместе с пакетом, так что image-hash, image-batch и mediatoolz ui работают сразу после npm install -g @macrulez/mediatoolz, без предупреждения и без вопроса при первом запуске. Предложение установить sharp в ~/.mediatoolz/deps осталось только на редкий случай, когда его бинарника нет (установка с --omit=optional, неподдерживаемая платформа). См. Установку.

MediaToolz 0.1.0 ​

История версий пакета

  • Новое: пакет. image-hash, image-batch и ui перенесены сюда из DevToolz 0.4.3 как есть, с теми же командами, флагами и настройками. Что изменилось при переносе: команда называется mediatoolz, конфигурации и пресеты резкости лежат в .mediatoolz/image-batch/, управляемая копия sharp — в ~/.mediatoolz/deps, а файл кэша image-hash по умолчанию — .mediatoolz-image-hash-cache.json. См. Переход с DevToolz.

Polyrepo 1.3.1 ​

История версий пакета

  • Новое: форма Publish и мастер релиза показывают версию пакета на npm рядом с локальной и фильтр Only ahead of npm, чтобы было понятно, что стоит публиковать. См. Веб-интерфейс.
  • Новое: когда публикация падает из-за того, что npm требует ссылку для входа, ключ безопасности или passkey, отчёт предлагает Publish in a terminal: в папке пакета открывается окно терминала с командой публикации, где npm может принять вход. Раньше интерфейс умел только запросить одноразовый код. См. Вход по ссылке, ключу или passkey.
  • Новое: строки в списке пакетов подсвечиваются по статусу: красным при локальных изменениях, жёлтым, если версия новее, чем на npm, и акцентным цветом, если пакета на npm нет.
  • Новое: кнопка Refresh над списком пакетов в каждой форме команды и в мастере релиза заново читает ветки, состояние git и версии на npm без перезагрузки страницы.
  • Изменено: кнопка запуска команды закреплена внизу страницы, как и кнопки мастера релиза.
  • Изменено: карточки запуска из нескольких шагов (например, тег и затем релиз) идут друг под другом на всю ширину.

8 октября ​

DevToolz 0.4.2 ​

История версий пакета

  • Новое: devtoolz ui запускает локальный веб-интерфейс и открывает его в браузере. Он входит в пакет и слушает только 127.0.0.1, под одноразовым токеном в напечатанном адресе; запросы с чужим Host или Origin отклоняются. Настраивается флагами --port, --host, --no-open, --token и --cwd. См. Веб-интерфейс.
  • Новое: Code checks выполняет одиннадцать проверок (мёртвые экспорты, пустые catch, тесты-сироты, регистр импортов, циклические импорты, TODO-комментарии, устаревшие @ts-ignore, неиспользуемые зависимости, пути в package.json, примеры в README, npm-скрипты в документации) на любой выбранной папке. Обзор запускает их все и показывает карточку для каждой. Находки сгруппированы по файлам, фильтруются и открываются рядом с кодом: с подсветкой синтаксиса, выделенной строкой и ссылкой на редактор. Циклы импорта можно показать и графом.
  • Новое: Code cleanup удаляет комментарии или вызовы console с предварительным просмотром: сканирование перечисляет файлы и показывает настоящий diff для каждого, по умолчанию ничего не выбрано, а меняются только отмеченные файлы, после подтверждения. Файл, изменившийся после сканирования, пропускается. Оригиналы сначала копируются за пределы проекта, и очистку можно откатить.
  • Новое: Image Hash в интерфейсе — папки выбираются в файловом браузере с миниатюрами, сразу видно, сколько в них изображений, отмечаются плейсхолдеры, а результат — галерея, где каждое изображение стоит рядом с плейсхолдерами, декодированными из его хешей, с выводом, который можно скопировать, скачать или записать в файл.
  • Новое: Image Batch в интерфейсе — конвертация быстрыми настройками или сохранённой конфигурацией с предпросмотром плана, прогрессом и миниатюрами «было → стало»; редактор конфигураций формой с вкладкой JSON и проверкой на лету; пресеты резкости с предпросмотром, который сравнивает изображение до и после; бэкапы замещённых оригиналов с восстановлением.
  • Изменено: image-batch принимает рамку --size как переопределение запуска в программном API, а каждый результат запуска теперь содержит абсолютные пути источника и результата.

DevToolz 0.4.1 ​

История версий пакета

  • Новое: sharpen добавляет выходную резкость после изменения размера в манере Lightroom: for (screen, matte или glossy) и amount (low, standard или high) выбирают значения из таблицы, а тонкие настройки radius, flat, jagged и threshold заменяют любое из них. Каждая проверяется по диапазону, который принимает sharp, а неверное значение сообщается с названием поля и диапазоном до начала записи. Рецепт, в котором sharpen не указан, резкостью не обрабатывается. См. Резкость.
  • Новое: image-batch sharpen сохраняет пресеты резкости и управляет ими (sharpen new|list|show|rm; без подкоманды терминал открывает список, где пресет можно показать, изменить, скопировать или удалить). Пресет используется по имени: "sharpen": "web-crisp" или { "preset": "web-crisp", "amount": "high" } в конфигурации, --sharpen web-crisp в командной строке. Пресеты лежат в .devtoolz/image-batch/sharpen/ проекта или в ~/.devtoolz/image-batch/sharpen/ для всех проектов. Шесть встроенных пресетов (web-light, web-crisp, web-detail, thumbnail, print-matte, print-glossy) работают без создания чего-либо. См. Пресеты резкости.
  • Новое: флаги --sharpen, --sharpen-for, --sharpen-amount, --sharpen-radius, --sharpen-flat, --sharpen-jagged и --sharpen-threshold у image-batch, init и sharpen new. Мастер init спрашивает о резкости и предлагает сохранённые пресеты, а редактор рецептов в config выбирает пресет или собственные значения.

DevToolz 0.4.0 ​

История версий пакета

  • Новое: команда image-batch пакетно меняет размер, конвертирует и пережимает растровые изображения по правилам. Правила хранятся в переиспользуемой конфигурации (или во флагах); папки, откуда брать картинки, и место для результатов выбираются при каждом запуске, поэтому одна конфигурация подходит для любого проекта. Работает на той же библиотеке sharp, что и image-hash.
  • Новое: три места для результатов — -o <dir> (отдельная папка с повторением структуры исходников, --flat её убирает), --beside (рядом с каждым исходником) и --replace (поверх самих исходных файлов, каждый в своём формате: уменьшить слишком большие оригиналы или пережать их на месте). Указывается ровно одно из них.
  • Новое: --replace под защитой. Он просит подтверждение (--yes без терминала), сначала копирует оригиналы в .image-batch-backup/<дата>/ вместе с journal.json (--backup <dir>, --no-backup), заменяет файл, только если результат меньше (--no-only-if-smaller), никогда не обрабатывает один и тот же файл дважды с теми же настройками, а --dry-run показывает настоящие размеры до и после. image-batch restore <backup> возвращает оригиналы.
  • Новое: размеры через widths, heights, size с fit, scale (@2x), а также по длинной стороне (longEdge, --long), по короткой (shortEdge, --short), по площади в мегапикселях (megapixels, --megapixels) и в процентах (percent, --percent). Длинная и короткая сторона не зависят от ориентации, поэтому одна настройка подходит для галереи из альбомных и портретных кадров. matchOrientation (--match-orientation) разворачивает рамку «ширина × высота» для изображений другой ориентации. Размеры больше исходного не увеличиваются, пока withoutEnlargement не равен false.
  • Новое: maxBytes (--max-size 200KB) ограничивает размер каждого файла: качество снижается ровно настолько, насколько нужно, а файл, который не удаётся уложить в предел, не записывается, а попадает в отчёт. Работает для jpg, webp, avif, heif, jp2 и png с палитрой.
  • Новое: форматы jpg, png, webp, avif, gif, tiff, jp2 и heif с важными для каждого опциями (quality, mozjpeg, palette у png, lossless у webp, effort у avif, …), которые задаются в конфигурации или через --codec, и уровни качества low, medium, high и best, раскрывающиеся в число для каждого формата. Сжатие с потерями молча не включается, а неверная опция или значение сообщаются с подсказкой до начала записи.
  • Новое: имена файлов по шаблону — {name}, {ext}, {orig}, {dir}, {format}, {width}, {height}, {size}, {long}, {short}, {mp}, {percent}, {scale}, {index:3}, {hash}, {date} — с разумным умолчанием для каждого метода размера. Шаблон, выходящий за выходную папку, неизвестная переменная или два результата с одним именем — это ошибка до начала записи.
  • Новое: выбор файлов — -r, --include, --exclude, --files-from, glob-шаблоны, --list и -i, --select, интерактивный список, в котором снимаются отметки с ненужных файлов.
  • Новое: результаты, которые уже сделал прошлый запуск, пропускаются; для любого другого существующего файла терминал спрашивает один раз (перезаписать этот, перезаписать все, пропустить, пропустить все, выйти), а без терминала файлы пропускаются с кодом выхода 1 или решают --overwrite, --skip-existing и --no-overwrite.
  • Новое: --hazehash (--budget), --blurhash, --thumbhash и --dominant-color вместе с --emit <file> записывают манифест всего созданного с плейсхолдерами в форме манифеста плейсхолдеров vue-image-kit.
  • Новое: init создаёт конфигурацию, а config (config list|show|rm|new) показывает, правит, копирует и удаляет конфигурации. Они лежат в .devtoolz/image-batch/ проекта или в ~/.devtoolz/image-batch/ для всех проектов, а метод размера и форматы выбираются из списков.

Polyrepo 1.3.0 ​

История версий пакета

  • Новое: polyrepo commit коммитит то, что npm audit fix, npm update или sync-deps оставили в рабочем дереве (package.json и lock-файлы, либо все отслеживаемые изменения с --scope all), не сталкиваясь с правилами веток. На feature-ветке коммит ложится туда. На основной ветке polyrepo читает правила хостинга (rulesets и защита веток GitHub, защищённые ветки GitLab и ваша роль): если прямые коммиты разрешены, он коммитит и отправляет; если нужен pull/merge request или правила прочитать не удалось, создаёт ветку, коммитит туда, отправляет её, открывает PR/MR и оставляет основную ветку нетронутой. Прямой push, который хостинг всё же отклонил, переносит коммит в ветку автоматически. Настраивается через --message, --mode, --branch, --no-push, --no-pr, --stay, --dry-run, --packages и --yes. См. Коммит изменений.
  • Новое: интерфейс показывает частично исправленный npm audit fix как Partly done, а не как неудачу, с блоком What is left, сгруппированным по обновлению, которое исправляет каждую уязвимость, и кнопками: предпросмотр --force, аудит только production-зависимостей, обновление одной зависимости или применение --force после подтверждения. В отчётах аудита и outdated по цветному блоку на пакет с заметной кнопкой Fix vulnerabilities… / Update dependencies…. См. Что делать с найденным.
  • Новое: после команды, меняющей зависимости, интерфейс показывает, что изменилось в package.json и lock-файлах, с изменением package.json в виде диффа, и предлагает Commit… (диалог читает правила веток и рекомендует прямой коммит либо ветку и PR/MR), Discard… и Run tests.
  • Новое: под каждым предупреждением и ошибкой отчёт предлагает следующие шаги для этой ситуации (закоммитить или отложить в stash грязное дерево, проверить вход в npm, опубликовать снова с одноразовым паролем, переключиться на основную ветку, запустить снова и другое), а завершённые bump, tag, publish, commit или clone подсказывают, что обычно идёт следом. Отменённый или прерванный запуск предлагает запустить снова и проверить окружение, запуск, который ничего не сделал, помечается Needs attention, а когда сервер остановили, страница сообщает об этом.
  • Новое: после команды, меняющей репозитории, таблица Packages в фоне обновляет только затронутые ею пакеты.
  • Новое: URL в отчётах и логах кликабельны.
  • Изменено: единый стиль кнопок во всём интерфейсе: обычные, основные, опасные (с рамкой) и критические (сплошные, для необратимых подтверждений), с иконками и мягкой тенью.
  • Изменено: карточки отчёта с длинным выводом занимают всю ширину, а вывод упавшей команды раскрывается сам. Страница Packages и отчёты показывают спиннер по центру, пока грузятся, и больше не мигают пустым состоянием при возврате на Packages.
  • Изменено: пакет публикуется без тестов и исходников интерфейса, а веб-интерфейс автоматически пересобирается перед каждой публикацией.
  • Исправлено: на Windows аргумент с пробелами, например сообщение git commit -m "chore: bump version", разбивался на несколько аргументов, из-за чего ломались коммиты, которые делает bump, и другие команды. git, gh, glab и node теперь запускаются напрямую, а у всех остальных команд аргументы корректно заключаются в кавычки.
  • Исправлено: команды, запущенные из интерфейса, больше не печатают предупреждение NO_COLOR … is ignored due to FORCE_COLOR.

Polyrepo 1.2.0 ​

История версий пакета

  • Новое: polyrepo ui запускает локальный веб-интерфейс и открывает его в браузере. Он входит в пакет и слушает только 127.0.0.1 под одноразовым токеном в напечатанном адресе; запросы с чужим Host или Origin отклоняются, а всё, что меняет репозиторий, требует явного подтверждения. --port, --host, --no-open и --token настраивают его. См. Веб-интерфейс.
  • Новое: Packages показывает все пакеты одной таблицей, проблемы посчитаны и работают как фильтры по клику (локальные изменения, не на основной ветке, нет в npm или отстаёт от него, отличается от origin, устаревшие зависимости). Монорепозитории — цветные блоки, которые сворачиваются и выбирают все свои пакеты разом, ветка и статус показаны чипами, а выбранное открывает Bump, Publish, Tag, Sync deps, Switch branch или Run command с уже отмеченными пакетами.
  • Новое: Commands — форма для каждой команды с теми же опциями, что у флагов. Список пакетов показывает ветку и наличие локальных изменений у репозитория, умеет фильтровать и запоминает именованные наборы. Review and run показывает сводку того, что изменится, с кнопкой Preview (dry run); завершённый предпросмотр предлагает Run for real….
  • Новое: мастер Release проводит по шагам: пакеты, версия, опции и итог, и запускает bump, при желании сначала с предпросмотром.
  • Новое: Runs показывают отчёт — первое, что видно у завершённого запуска: счётчики, список Needs attention с проблемами, которых не было в предыдущем запуске, карточку на каждую часть проверки или на каждый пакет и таблицы команд, которые только читают, с действиями Update… и Fix…. Полный лог можно искать, ограничивать проблемами, сворачивать и сохранять. Вопросы команды приходят диалогами, запуск можно отменить, а история хранит запуски вместе с логами.
  • Новое: Settings правит конфиг (roots, дополнительные пакеты, хосты GitLab) с выбором папки и живым списком найденных пакетов, показывает, под кем выполнен вход в gh, glab и npm и какие инструменты найдены. Здесь же задаются диапазон цветов блоков монорепозиториев, сохранённые наборы пакетов и системные уведомления.
  • Новое: Ctrl+K открывает палитру для страницы, команды, недавнего запуска или пакета.
  • Новое: форма Publish и мастер релиза принимают одноразовый пароль для npm-аккаунта с двухфакторной аутентификацией. В историю запусков он не попадает.
  • Изменено: команды сообщают о ходе работы через небольшой рантайм, а не печатают напрямую. Вывод в терминале и вопросы остались прежними.

7 октября ​

DevToolz 0.3.3 ​

История версий пакета

  • Новое: image-hash генерирует hazehash с -t hazehash (или -t all). При том же размере он точнее blurhash и thumbhash, хранит соотношение сторон и, только если у изображения есть прозрачные пиксели, альфа-канал. Во всех списках типов хешей и во всех выводах (JSON, CSV, таблица --dry-run) он идёт первым, перед blurhash. По умолчанию, -t both, по-прежнему blurhash и thumbhash. См. Image Hash.
  • Новое: --budget <bytes> задаёт наибольший размер одного hazehash, от 7 до 48 байт (по умолчанию 28; формат настроен на диапазон 16–48). Это потолок: плоскому или плавному изображению нужно меньше байт. Бюджет, слишком малый для изображения с прозрачностью (меньше 9 байт), сообщается как проблема этого изображения, а значение вне диапазона 7–48 завершает команду с кодом 2.
  • Примечание: --cache теперь запоминает и бюджет, поэтому кэш-файл, записанный прежней версией, один раз пересчитывается.

Image Kit 1.7.1 ​

История версий пакета

  • Исправлено: превью теперь ведёт себя в точности как изображение, вместо которого оно показано. Раньше плейсхолдер <VImage> был пустым <span> с инлайн width: 100% и height: auto, поэтому при width: 50%, фиксированной высоте или родителе, сжимающемся по содержимому, он отличался по размеру от загруженной картинки, и вёрстка прыгала при начале загрузки. Теперь это <img> с теми же атрибутами width/height и теми же классами (прозрачное изображение того же размера в src, хеш в фоне), и браузер размеряет его по тем же правилам и тому же CSS, что настоящую картинку. Размер блока не меняется и пока файл скачивается: до прихода первых байт <img> несёт contain-intrinsic-size из своих width×height. Если в тесте или стилях вы искали плейсхолдер как span, ищите img[aria-hidden="true"].

Image Kit 1.7.0 ​

История версий пакета

  • Плейсхолдеры HazeHash — предпочтительные: новый проп hazehash у <VImage> и поле hazehash в SourcePlaceholder, ImageMeta и записях манифеста. Строка в 7–48 байт (по умолчанию 28) из опциональной peer-зависимости hazehash декодируется в размытое превью с правильными пропорциями и альфа-каналом. hazehash побеждает blurhash, thumbhash и placeholder; v-lazy-img и useBackgroundImage() тоже его используют. Пакет подгружается по требованию; без него один раз пишется предупреждение и берётся следующий плейсхолдер.
  • Инструменты сборки умеют делать HazeHash: mode: 'hazehash' для плагина Vite и опции Nuxt, placeholders --mode hazehash, generate --hazehash, импорты ?hazehash и ?placeholder=hazehash.
  • Новая настройка tuning.budget (--budget, &budget= в импорте): размер строки HazeHash в байтах, 7–48, по умолчанию 28.
  • Изменено: режим плейсхолдеров по умолчанию — hazehash, если установлен пакет hazehash, иначе blurhash. Чтобы сохранить BlurHash, задайте mode: 'blurhash'; пакет hazehash нужно установить в приложение, потому что хеши декодирует браузер.

6 октября ​

HazeHash 0.1.1 ​

История версий пакета

  • Первый релиз: три пакета, hazehash, hazehash-vue и hazehash-nuxt. См. Обзор.
  • hazehash превращает изображение в хеш из 16–48 байт (по умолчанию 28) и обратно в размытое превью, с соотношением сторон и необязательным альфа-каналом внутри. При 28 байтах средняя перцептивная ошибка на 49% ниже, чем у BlurHash, и на 20% ниже, чем у ThumbHash. См. Кодирование изображений, Декодирование хешей и Бенчмарк.
  • Точки входа для декодера (hazehash, hazehash/decode), энкодера (hazehash/encode), хелпера для canvas (hazehash/canvas) и файловых хелперов для Node.js (hazehash/node, с необязательной peer-зависимостью sharp). См. Рисование в canvas и Кодирование файлов в Node.js.
  • Команда hazehash с encode, decode и info. См. Команда encode и Команды decode и info.
  • hazehash-vue: компонент PlaceholderImage и composable usePlaceholder(), серверная разметка которых не может разойтись при гидрации. См. Компонент PlaceholderImage и Состояние плейсхолдера.
  • hazehash-nuxt: модуль, который регистрирует компонент и генерирует хеши для ваших картинок при сборке, с кэшем по размеру и времени изменения файла. См. Модуль Nuxt.
  • Формат версии 1 не будет меняться: хеш декодируется одинаково во всех будущих релизах. Формат описан на странице Формат хеша.

5 октября ​

Image Kit 1.6.2 ​

История версий пакета

  • Исправлено: с sources или объектом в src <VImage> рендерит <picture>, и class, style и другие атрибуты, переданные компоненту, попадали на <picture>, а не на <img>, который показывает картинку, — поэтому border-radius, object-fit и похожие правила из собственного класса пользователя не давали видимого эффекта, хотя тот же класс на обычном <img> работал. Теперь атрибуты всегда попадают на элемент, который показывает картинку: плейсхолдер, блок ошибки или <img>, в том числе внутри <picture>. Сам <picture> рендерится с display: contents, поэтому в раскладке не участвует, и <img> раскладывается так, будто стоит сам по себе. Обработчики событий, переданные в <VImage> (@click и др.), тоже привязываются к <img> и работают рядом с собственной обработкой load/error компонента. Если стиль или тест обращался к <picture> через класс или атрибут data-*, заданный на <VImage>, обращайтесь к <img> или к родительскому элементу. См. Компоновка без обёртки.

Image Kit 1.6.1 ​

История версий пакета

  • Исправлено: начиная с 1.6.0 <VImage> на сервере рендерил фрагмент, из-за чего class, style и другие атрибуты, переданные ему, не попадали на <img>, а Vue печатал предупреждение Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes. Теперь фрагмент рендерится только там, где он нужен, — для ленивой картинки с ssrPlaceholder и готовым превью, — и в этом случае атрибуты передаются на <img> явно. Во всех остальных состояниях на сервере и на клиенте снова один элемент.
  • Исправлено: class теперь добавляется и на изображение внутри <noscript> у отложенной картинки, чтобы без JavaScript она выглядела так же.

3 октября ​

DevToolz 0.3.2 ​

История версий пакета

  • Исправлено: все опции со списком через запятую (--ext, --type, --tags, --methods, --lang, --test-suffix, --source-ext) теперь принимают и пробелы, а image-hash принимает пути через пробел. PowerShell передаёт a,b программе одним аргументом a b, и эти опции раньше его отвергали, поэтому devtoolz image-hash -t blurhash,thumbhash,color там падал.
  • Исправлено: пакет теперь собирается автоматически перед каждой публикацией (prepublishOnly). Версия 0.3.1 ушла со старой сборкой, без исправления выше.

DevToolz 0.3.1 ​

История версий пакета

  • Примечание: этот релиз опубликован со сборкой, собранной до исправления списков (см. 0.3.2), поэтому исправления в нём нет. Используйте 0.3.2.

DevToolz 0.3.0 ​

История версий пакета

  • Новое: команда image-hash генерирует плейсхолдеры blurhash и thumbhash для растровых изображений. Принимает файлы и/или директории (в том числе через запятую, -r для поддиректорий) и печатает в stdout, пишет один файл (-o) или файл на каждое изображение (--per-file, --out-dir, имена настраиваются через --suffix и --out-ext, например photo.jpg.blurhash.txt). Форматы: json, plain, csv, ts и js. См. Хеши изображений.
  • Новое: image-hash требует нативную библиотеку sharp, которая вместе с devtoolz не ставится. Первый запуск предлагает установить её в ~/.devtoolz/deps (-y/--yes соглашается заранее; без терминала и без -y команда останавливается с сообщением). sharp, уже установленная рядом с devtoolz, используется как есть.
  • Новое: image-hash умеет ещё доминирующий цвет (color) и крошечный PNG в виде data URI (preview) через -t, а --components auto подбирает компоненты blurhash по соотношению сторон.
  • Новое: image-hash принимает http(s) URL и список путей из файла или stdin (--files-from), а ключи в выводе настраиваются через --key-base и --key-prefix.
  • Новое: image-hash --cache пропускает неизменившиеся изображения, --update вливает результат в существующий выходной файл, --prune убирает записи пропавших изображений, а --check падает (код 1), если выходные файлы отсутствуют или устарели, — сделан для CI. См. Как держать выходной файл актуальным.
  • Новое: image-hash показывает счётчик прогресса в терминале, находит sharp, уже установленный в проекте, где команда запущена, правильно хеширует CMYK-изображения, отклоняет оборванные файлы и изображения больше --max-pixels и объясняет такие сбои простыми словами.
  • Новое: image-hash --dry-run ничего не пишет и показывает результат таблицей, а под ней перечисляет файлы, которые были бы записаны.
  • Новое: цветной вывод у каждой команды по одной общей палитре — пути, позиции :строка:столбец, имена, заголовки, подсказки и иконки статуса full-check получили каждый свой цвет. --color (или FORCE_COLOR) включает цвет, когда вывод перенаправлен или идёт в CI; NO_COLOR, TERM=dumb и --plain оставляют его выключенным. Текст каждого отчёта не изменился, добавляются только escape-коды. См. Вывод и цвета.
  • Изменено: --quiet больше не выключает цвет, а только убирает баннер и вывод чистого прогона. --plain по-прежнему выключает сразу цвет, баннер и поздравление.
  • Добавлено в программный API: runImageHash и renderImageHashReport, с типами опций, отчёта и записи.

Image Kit 1.6.0 ​

История версий пакета

  • Автоматические плейсхолдеры для импортируемых изображений. placeholders: { imports: true } (в Nuxt: vueImageKit: { placeholders: { imports: true } }) считает плейсхолдер при сборке для каждого изображения, которое скрипт или однофайловый компонент импортирует default-импортом, — включая импорты, которые Vue генерирует из src="…" в шаблоне, и те, в которые разворачивается import.meta.glob(…, { eager: true }). Без запроса ?placeholder и без правок шаблонов: плейсхолдер регистрируется под самим импортированным значением (dev-URL или хешированный URL сборки), поэтому <VImage :src="hero" /> сам находит своё размытие и размер — в dev, в сборке и при серверном рендеринге. Настраивается через mode, extensions и exclude. См. Плейсхолдер для каждого импортируемого изображения.
  • Новый экспорт registerPlaceholder(src, data). VImage, v-lazy-img и useBackgroundImage() ищут src в этом реестре после манифеста placeholders, так что манифест передавать не обязательно.
  • Битое растровое изображение больше не роняет сборку, когда плейсхолдер считается через переписанные импорты: печатается предупреждение, и плейсхолдера у него нет.
  • Новый проп <VImage> — ssrPlaceholder (включается явно, по умолчанию false). Отрендеренный на сервере <img> получает готовое превью (data: URL из placeholder, image.placeholder или реестра) как CSS-фон, поэтому у картинки есть blur ещё до запуска JavaScript; без пропса ничего не меняется. Ленивая картинка при этом ещё и удерживается: сервер отдаёт прозрачный пиксель вместо настоящего src, а настоящий <img> кладёт в <noscript>, поэтому тяжёлый файл скачивается только когда картинка приближается к области просмотра, а поисковики и посетители без JavaScript всё равно его получают (нетерпеливая картинка — lazy="false" или priority — сохраняет src). После гидрации превью продолжает показываться под картинкой, а сервер и клиент рендерят одинаковый результат, поэтому hydration mismatch нет. См. Превью в серверном HTML.
  • Новая опция placeholders.imports.preview (true или список шаблонов путей: директория, точный файл, часть пути или glob вроде src/**/hero-*.webp; сравниваются с настоящим путём файла от корня проекта, поэтому импорты через алиасы работают). exclude принимает те же шаблоны. См. Выбор изображений по пути. Плагин дополнительно рисует готовое превью для импортируемых изображений и регистрирует его, поэтому в шаблоне достаточно <VImage :src="hero" ssr-placeholder />. По умолчанию выключена; на этапе сборки нужен пакет thumbhash. См. Готовое превью для серверного рендеринга.
  • Записи реестра и registerPlaceholder() принимают готовое превью (placeholder или preview). Реестр живёт в globalThis, поэтому серверная и клиентская копии пакета используют один и тот же.

Image Kit 1.5.0 ​

История версий пакета

  • Импорты плейсхолдеров принимают список полей. ?placeholder=color,blurhash возвращает ровно эти поля; поля — blurhash, thumbhash, color, size, preview (крошечный PNG в виде data URI), aspect (width / height) и all, в любом порядке. &shape=raw возвращает имена как в списке (а size — объектом) вместо имён пропсов <VImage>. Старые одиночные значения (?placeholder, =blurhash, =thumbhash, =color) сохраняют свою форму. См. Выбор того, что считать.
  • По одному значению: ?color, ?size, ?aspect и ?preview рядом с уже существующими ?blurhash и ?thumbhash.
  • Настройки для одного импорта: ?blurhash&components=6x4, &sample=64, &strategy=average. Они никогда не затрагивают общий кэш и манифест.
  • Новая опция types Vite-плагина. Шаблон модуля TypeScript допускает одну *, поэтому импорт со списком или с настройками нельзя типизировать встроенными декларациями; с types: true плагин пишет src/vik-imports.d.ts для каждого такого импорта, который встретил (вместо этого можно указать путь), со свободной типизацией и необязательными полями.
  • Встроенные декларации (@macrulez/vue-image-kit/vite/client) дополнены ?color, ?size, ?preview и ?aspect.
  • Новое скалярное имя принимается только как голый флаг (?size, а не ?size=large), так что одноимённый параметр другого плагина не перехватывается.

Image Kit 1.4.1 ​

История версий пакета

  • Исправлено: в vite dev плагин мог бесконечно перегенерировать изображения. Горячее обновление запускало generate() для любого изменившегося файла-изображения, включая файлы, которые сам generate() писал в output, а при incremental: false каждый проход перезаписывал их и запускал следующий — сотни запусков в секунду. Теперь горячее обновление запускается только для изображения внутри input и никогда для изображения внутри output, а проходы не накладываются друг на друга: изменения, пришедшие во время работы, объединяются в один повторный запуск. См. Vite-плагин.
  • Исправлено: папка output внутри input пропускается при сканировании input и больше не подаётся обратно как исходные изображения.
  • Исправлено: dev-сервер больше не перезагружает страницу на каждый сгенерированный файл; манифест плейсхолдеров следит только за папками из placeholders.dirs.
  • Исправлено: огромный SVG (например, 30000×30000) ронял ?placeholder на лимите пикселей sharp. Теперь размер читается из собственных width/height/viewBox файла, а цвет считается по небольшому рендеру.
  • Исправлено: битый SVG ронял всю сборку на ?placeholder. Теперь плагин предупреждает и возвращает объявленный размер (или пустой объект); битое растровое изображение по-прежнему падает.
  • Изменено: ?blurhash и ?thumbhash для SVG печатают предупреждение, что у вектора есть только цвет, и указывают на ?placeholder, вместо молчаливого возврата пустой строки.

2 октября ​

Responsive Media 2.2.2 ​

История версий пакета

  • Изменено: общий объект responsiveState, который создаётся один раз на весь пакет, раньше создавался в момент загрузки любой части пакета, поэтому сборщик не мог его убрать. Теперь он создаётся в отдельном исходном файле, а в package.json пакет объявляет sideEffects: false. Сборщик больше не оставляет общее состояние, если импортируется только часть пакета: useMediaQuery из responsive-media/vue уменьшился примерно с 6,7 кБ до 0,6 кБ в минифицированном виде, а responsive-media/container — с 7,7 кБ до 6,8 кБ. Поведение и публичный API не изменились.
  • Добавлено: npm run size в репозитории пакета измеряет все точки входа и типичные импорты. Результат tree-shaking охраняет тест. См. Справочник.

Responsive Media 2.2.1 ​

История версий пакета

  • Исправлено: при отложенной гидратации компонент, который гидратируется позже первого тика после монтирования — асинхронный компонент, лениво гидратируемая секция, — встречал настоящее состояние вместо серверного и расходился. Плагин Vue теперь принимает commit: 'manual': значения сервера остаются, пока не вызвана commitHydration(), а запасным вариантом служит commitTimeout (по умолчанию 10 секунд); defineResponsive() возвращает commitHydration рядом с plugin. Модуль Nuxt использует это: он переключает, когда Nuxt сообщает app:suspense:resolve, то есть когда страница догидратировалась. Для обычного Vue по умолчанию остаётся 'auto' — следующий тик после монтирования. См. SSR и гидратация.

Responsive Media 2.2.0 ​

История версий пакета

  • Новое: гидратация без несовпадений. В Vue defineResponsive() принимает hydration: 'deferred': пока приложение монтируется поверх серверной разметки, плагин держит значения сервера и применяет настоящие на следующем тике, так что Vue не сообщает о несовпадении при гидратации. Клиентское приложение никогда не откладывается. В React хуки теперь возвращают серверный снимок (getSsrState()) как getServerSnapshot, поэтому гидратация больше не заканчивается recoverable-ошибкой, когда размер браузера отличается от ssrState. См. SSR и гидратация.
  • Новое: подсказки запроса для сервера. resolveSsrState(config, input, options?) выбирает серверное состояние по cookie (собственные <ширина>x<высота> браузера) и user-agent (mobile, tablet или desktop), а составными частями служат detectDevice(), serializeViewportCookie(), parseViewportCookie(), statesFromSize() и getSsrState(). В Vue плагин принимает результат как app.use(plugin, { ssrState }), а на сервере даёт каждому приложению собственное состояние, так что параллельные запросы больше не делят одно.
  • Новое: useMediaQuery() в Vue принимает строку, ref или геттер и пересоздаёт подписку при изменении запроса.
  • Новое: useResponsiveValue(map, fallback?) в Vue и React — значение первого активного брейкпоинта из map; типизируется по конфигу, если пришёл из defineResponsive().
  • Новое: useUserPreferences() в Vue и React — dark, light, reducedMotion, highContrast, lowContrast, noHover, coarsePointer, forcedColors и print поверх пресета доступности, без настройки; и getUserPreferencesState() для обычного JavaScript.
  • Новое: useViewportSize(options?) в Vue и React, а в ядре getViewportSize() / subscribeViewportSize() — размер окна числами, с ограничением частоты.
  • Новое: CSS из того же конфига — toMediaQueries(), toScssModule(), toScssMap(), toCustomMedia() и toTailwindScreens(). См. Интеграция с CSS.
  • Новое: responsive-media/testing — createViewportMock() заменяет window.matchMedia управляемым вьюпортом (setViewport(), setFeature()), а evaluateMediaQuery() — сам вычислитель. См. Тестирование.
  • Новое в модуле Nuxt: hydration (по умолчанию 'deferred'), ssrHints ('cookie', 'user-agent'), ssrDevices, cookie, devBadge (плашка с брейкпоинтом при разработке) и css (scss, customMedia — генерируемые файлы стилей). useResponsiveValue, useUserPreferences и useViewportSize тоже подключаются автоматически. Ключ responsive в nuxt.config.ts теперь типизирован, так что редактор подсказывает и проверяет его. См. Интеграция с Nuxt.
  • Изменено: модуль Nuxt теперь по умолчанию использует hydration: 'deferred', так что первый рендер на клиенте использует значения сервера, а настоящие приходят сразу после монтирования. Чтобы сохранить поведение 2.1, задайте hydration: 'immediate'.
  • Исправлено: useResponsive() в React возвращал настоящее состояние как серверный снимок, из-за чего гидратация расходилась всякий раз, когда размер браузера отличался от догадки сервера. Теперь он возвращает серверный снимок.
  • Документация: Другие фреймворки показывает Svelte, Solid и Angular на существующем объекте состояния, который уже следует контракту стора.

Responsive Media 2.1.0 ​

История версий пакета

  • Новое: модуль Nuxt responsive-media/nuxt. Опишите брейкпоинты один раз в ключе responsive файла nuxt.config.ts (breakpoints, order, debounce, ssrState); useResponsive() и useBreakpoints() подключаются автоматически и типизированы по этим брейкпоинтам, useMediaQuery() и useContainerState() тоже подключаются автоматически, а плагин устанавливает общее состояние на приложение. См. Интеграция с Nuxt.
  • Новое: defineResponsive(config, options?) в responsive-media/vue и responsive-media/react. Она применяет конфиг и возвращает useResponsive и useBreakpoints (в Vue ещё и plugin), у которых состояние и ключи брейкпоинтов выводятся из config, так что опечатка вроде isAbove('nope') — ошибка компиляции, а обобщённый параметр писать вручную не нужно.
  • Новое: опция ssrState в SetConfigOptions. Когда matchMedia или ResizeObserver недоступны — на сервере, — перечисленные ключи принимают эти значения вместо false, так что сервер может отрендерить раскладку. Она работает для createResponsiveState(), createContainerState(), setResponsiveConfig() и модуля Nuxt.
  • Типы: useContainerState() выводит ключи возвращаемого состояния из конфига (Vue и React), а BreakpointHelpers принимает необязательный тип ключа, BreakpointHelpers<K extends string = string>. Существующий код продолжает компилироваться.
  • Исправлено: useBreakpoints() в Vue игнорировал заданный order, когда состояние предоставлялось через ResponsivePlugin, и использовал порядок ключей конфига — поэтому current мог называть не тот брейкпоинт, если два порядка различались. Теперь используется заданный order.
  • Новая необязательная peer-зависимость: @nuxt/kit (^3.9.0 || ^4.0.0), нужная только для responsive-media/nuxt; Nuxt её уже предоставляет.

Visual Linker 0.4.3 ​

История версий пакета

  • Изменено (поведение по умолчанию): hover и highlight теперь включаются по запросу. Раньше линия реагировала на курсор в любой диаграмме: получала состояние hover с прибавкой к толщине, показывала курсор-указатель над своей областью нажатия, а наведение на блок подсвечивало его соединения. Теперь ничего из этого не происходит, пока вы не включите режим, так что диаграмма, на которую просто смотрят, остаётся неподвижной. Курсор-указатель на линии появляется, только если для неё включён hover или она выделяемая. Чтобы вернуть прежнее поведение, задайте interaction: { hover: true, highlight: true }.
  • Новое: interaction.hover и interaction.highlight. Два независимых флага, оба по умолчанию false. hover — курсор над линией, highlight — курсор над блоком подсвечивает его соединения. См. Визуальные состояния.
  • Новое: hoverable у соединения и highlightable у блока. Каждый включает или выключает свой режим для одной сущности, и локальное значение сильнее глобального. highlightable также доступен как опция v-vl-block, поле пропа blocks и атрибут data-vl-highlightable.
  • Без изменений: события connection:mouseenter, connection:mouseleave, connection:click, block:mouseenter и block:mouseleave приходят как раньше, а состояния selected и focus, выделение и управление с клавиатуры от новых флагов не зависят. Корзина hover или highlight ничего не делает, пока её режим выключен. Оба флага можно менять через setConfig.

Visual Linker 0.4.2 ​

История версий пакета

  • Порт с якорем больше не прижимается обрезающей обёрткой внутри якорного блока. У порта с anchorBlockId или anchorEl точка рисуется на границе якоря, но обрезан ли он, решала именно эта точка. Строка внутри элемента с overflow: hidden — скруглённого переключателя, карточки — внутри блока с отступами, привязанная к нижней границе блока, имеет точку ниже обёртки, поэтому её линию подтягивало к краю обёртки, и она теряла маркер и точку порта. Теперь, обрезан ли такой порт, решает его собственный элемент: видимая строка оставляет точку на границе якоря, а ушедшая за край прокрутки прижимается, как раньше. Порты без якоря не изменились. Подробнее — Прокручиваемые контейнеры.

Visual Linker 0.4.1 ​

История версий пакета

  • Строки принимаются везде, где был enum. Типы lines.curve, shape и orient маркера и side порта были объединениями членов enum'ов, поэтому TypeScript отклонял curve: 'straight' или shape: 'arrow' с ошибкой Type '"straight"' is not assignable to type 'ConnectionCurve', хотя в рантайме обе записи работали. Теперь это обычные объединения строк ('bezier' | 'straight' | 'smoothstep', 'circle' | 'square' | 'diamond' | 'arrow', 'top' | 'right' | 'bottom' | 'left', 'auto' | 'fixed'), и члены enum'ов под них по-прежнему подходят, так что существующий код продолжает компилироваться. VLConnectionCurveEnum, VLMarkerShapeEnum, VLFixedSideEnum и VLOrientEnum по-прежнему экспортируются. Подробнее — Структура конфигурации.

Visual Linker 0.4.0 ​

История версий пакета

  • Breaking (все пакеты): плоский VisualLinkerOptions заменён одним структурированным VisualLinkerConfig, разбитым по тому, что он оформляет: theme, lines, markers, ports, labels, blocks и interaction. Все опции defaultXxx убраны; у каждой настройки теперь есть место в группе. style соединения имеет ту же форму, что и группа lines, плюс markers: { start, end }. Подробнее — Структура конфигурации. Старые имена соответствуют новым так:

    0.3.x0.4.0
    defaultCurvelines.curve
    defaultCurvature, defaultCurveMinReach, defaultCurveMaxReach, defaultCurveAngleBlend, defaultCurveAngleMaxOffsetlines.bezier.curvature, minReach, maxReach, angleBlend, angleMaxOffset
    defaultCornerRadius, defaultMaxTrunkReachlines.smoothstep.cornerRadius, lines.smoothstep.maxTrunkReach
    avoidObstacles, obstaclePaddinglines.routing.avoidObstacles, lines.routing.padding
    jumps, defaultAnimatedlines.jumps, lines.animated
    showPortsports.show
    defaultPortRadius, defaultPortColor, defaultPortStrokeColor, defaultPortStrokeWidthports.radius, ports.fill, ports.stroke, ports.strokeWidth
    defaultPortSpreadports.spread
    defaultCircleMarkerSize, defaultSquareMarkerSize, defaultDiamondMarkerSize, defaultArrowMarkerSizemarkers.sizes.circle, square, diamond, arrow
    draggable, dragGridSize, dragBoundsblocks.draggable, blocks.drag.grid, blocks.drag.bounds
    selectable, clipToScrollParentsinteraction.selectable, interaction.clipToScrollParents
    style.curvature, curveMinReach, curveMaxReach, curveAngleBlend, curveAngleMaxOffsetstyle.bezier.curvature, minReach, maxReach, angleBlend, angleMaxOffset
    style.cornerRadius, style.maxTrunkReachstyle.smoothstep.cornerRadius, style.smoothstep.maxTrunkReach
    style.avoidObstaclesstyle.routing.avoidObstacles
    style.startMarker, style.endMarkerstyle.markers.start, style.markers.end
    style.hoverStyle, style.selectedStylestyle.hover, style.selected
    hoverStyle.markerSize, selectedStyle.markerSizesize в собственных hover и selected маркера
    VisualLinkerOptionsVisualLinkerConfig
  • Breaking (Vue): проп options компонента <VisualLinker> теперь называется config, а UseVisualLinkerOptions у useVisualLinker() больше не расширяет опции движка: в нём config, blocks и connections. config реактивен, поэтому его изменение перерисовывает диаграмму. Подробнее — Компонент VisualLinker.

  • Breaking (Vue): общая конфигурация переехала из глобального объекта в provide/inject Vue. setVisualLinkerDefaults(), resetVisualLinkerDefaults(), visualLinkerDefaults и тип VisualLinkerDefaults удалены. Передайте конфигурацию в app.use(VisualLinkerPlugin, { config }), а позже меняйте её через useVisualLinkerConfig(). Подробнее — Общая конфигурация.

  • Breaking (Nuxt): опции модуля теперь сама конфигурация движка — те же группы theme, lines, markers, ports, labels, blocks и interaction — вместо отдельного плоского списка (defaultCurve, portRadius, curvature, …). Они должны быть сериализуемы в JSON. Четыре настройки, до которых старый список не дотягивался (defaultCornerRadius, defaultMaxTrunkReach, draggable, dragBounds), стали обычными полями. Клиентского плагина больше нет: один универсальный плагин регистрирует директивы и устанавливает конфигурацию. Подробнее — Модуль Nuxt.

  • Breaking (core): маркер, заданный в markers.start или markers.end, заменяет встроенную точку порта на этом конце у каждого соединения — так же, как это всегда делал маркер, заданный у одного соединения. Цвета маркеров теперь следуют и за цветами линий из темы.

  • New (core): визуальные состояния для каждой визуальной сущности. Линии, маркеры, порты и подписи принимают корзины highlight, hover, selected и focus с полями самой сущности, которые накладываются на базовые в этом порядке. В состоянии маркер может поменять shape, size, цвета, обводку, arrow или целый svg; порт может вырасти, подпись — сменить заливку. Маркеры, порты и подписи следуют состоянию своего соединения. Подробнее — Визуальные состояния.

  • New (core): состояние highlight. Наведённый блок теперь переводит свои соединения в highlight, отдельно от hover — курсора над самой линией. Пока корзина highlight не задана, оно выглядит так же, как hover, поэтому существующие конфигурации выглядят как раньше.

  • New (core): opacity для линий, маркеров, портов и подписей, в том числе по состояниям. Маркер без собственной opacity блёкнет вместе со своей линией, а анимированная линия перемножает её со своим притемнением.

  • New (core): темы. theme — это набор токенов цветов — line, lineHover, lineSelected, selectedHalo, focusRing, portFill, portStroke, labelBackground, labelBorder, labelText, — которые записываются в CSS-переменные. Экспортируются lightTheme, darkTheme и defineTheme(overrides, base). Подробнее — Темы.

  • New (core): группа labels — background, border, color, fontSize, paddingX, paddingY и opacity подписей, которые рисует библиотека, с состояниями — а также ports.side и ports.offset как значения по умолчанию для портов, у которых нет своих.

  • New (core): конфигурацию можно менять, пока движок работает. setConfig(patch) глубоко сливает (ключ со значением undefined удаляется), replaceConfig(next) заменяет, getConfig() возвращает копию. Перетаскивание и выделение подключаются или отключаются в соответствии с ней, и всё перерисовывается. Дополнительно экспортируются mergeConfig, patchConfig и mergeMarkerInputs.

  • New (Vue): общая конфигурация. VisualLinkerPlugin принимает { config }; useVisualLinkerConfig() возвращает реактивный объект; provideVisualLinkerConfig(initial?) задаёт свою для поддерева; installVisualLinkerConfig, createSharedConfig и VISUAL_LINKER_CONFIG_KEY нужны интеграциям. Каждая диаграмма сливает её под своим config, а изменение перерисовывает все диаграммы. Ничего глобального нет, поэтому несколько приложений на странице не мешают друг другу.

  • Changed (core): событие block:mouseenter переводит соединения блока в highlight, а не в hover, и под курсором в состоянии hover остаётся только линия, над которой он находится.

1 октября ​

Image Kit 1.4.0 ​

История версий пакета

  • Плейсхолдеры для папок целиком. npx vue-image-kit placeholders --dir public/images считает каждое изображение папки, рекурсивно, и добавляет его в манифест под тем URL, по которому оно отдаётся. Поэтому изображение, чей src собирается во время выполнения (:src="category.image"), тоже получает плейсхолдер. --dir src/img=/assets/img задаёт папку, которая отдаётся с другого URL, а --url добавляет одно удалённое или CDN-изображение без --remote. Подробнее — в разделе Папки и URL.
  • Плагин Vite собирает такой же манифест сам. С vueImageKit({ generate: false, placeholders: { dirs: [...] } }) он доступен как виртуальный модуль virtual:vue-image-kit/placeholders, пересобирается при изменении файла в этих папках и кешируется между сборками. Подробнее — в разделе Манифест плейсхолдеров из папок.
  • Модуль Nuxt регистрирует всё сам. vueImageKit: { placeholders: { dirs: [...] } } добавляет плагин Vite и передаёт манифест каждому <VImage> — запускать команду и добавлять запись в vite.plugins не нужно. Прежняя строковая форма, путь к файлу манифеста, работает как раньше, а manifest объединяет такой файл с остальным. Подробнее — в разделе Опции модуля.
  • Новые импорты Vite, которые считают только плейсхолдер и не пишут файлы. import placeholder from './photo.jpg?placeholder' возвращает { blurhash, placeholderColor, width, height } — это пропсы самого <VImage>, поэтому достаточно <VImage v-bind="placeholder" />. ?placeholder=thumbhash возвращает ThumbHash вместо BlurHash, ?placeholder=color — только доминирующий цвет и размер, а новый импорт ?blurhash — только строку BlurHash, как ?thumbhash. Они работают и через import.meta.glob(..., { query: '?placeholder' }).
  • Новая опция generate: false у плагина Vite. С ней плагин больше не обрабатывает всю папку input при старте и при горячих обновлениях, а только отвечает на импорты ?vik, ?placeholder, ?blurhash, ?thumbhash и на виртуальный манифест. Папка input может не существовать. Подробнее — в разделе Только плейсхолдеры, без изменения размеров.
  • Хеши можно настраивать: --components 4x3 (компоненты BlurHash), --sample 100 (размер, до которого изображение уменьшается перед расчётом) и --color dominant|average у команды, а также tuning: { components, sample, color } в файле конфигурации, плагине Vite и модуле Nuxt. При смене настроек кеш сбрасывается. Подробнее — в разделе Настройка хешей.
  • Плагин Vite кеширует плейсхолдеры в том же файле, что и команда placeholders, поэтому повторная сборка читает только изменившиеся изображения.
  • v-lazy-img и useBackgroundImage() читают манифест плейсхолдеров. Если у них нет своего placeholder, пока изображение грузится, они показывают декодированное размытие и доминирующий цвет записи для своего src, а команда placeholders заполняет манифест для их статических использований. Подробнее — в разделе v-lazy-img и useBackgroundImage().
  • ?thumbhash и ?blurhash теперь считают значения так же, как команда placeholders — BlurHash поверх белого фона, ThumbHash с вписыванием в 100×100, — так что одно и то же изображение получает один и тот же хеш в обоих случаях.

Image Kit 1.3.2 ​

История версий пакета

  • Запись sources (art direction) теперь может нести собственный плейсхолдер — blurhash, thumbhash, placeholder или placeholderColor рядом с src, либо ImageMeta из импорта ?vik. Пока брейкпоинт этой записи активен, <VImage> показывает её плейсхолдер в её пропорциях, а не плейсхолдер корневого изображения, — так blurhash вертикального фото больше не растягивается в горизонтальный бокс планшета. Совпавшая запись заменяет весь набор плейсхолдеров корня; записи без плейсхолдера и брейкпоинты, на которых ни одна запись не совпала, по-прежнему используют плейсхолдер корня. Записи манифеста плейсхолдеров тоже ищутся по src источника. Новый экспортируемый тип: SourcePlaceholder. Подробнее — в разделе Плейсхолдеры на брейкпоинт.
  • Команда npx vue-image-kit placeholders теперь заполняет и записи sources. Каждая статически определяемая запись литерала :sources="{ … }" получает плейсхолдер, даже если собственный src изображения динамический, — через манифест или прямо в литерале. Записи, у которых плейсхолдер уже есть, не трогаются. Подробнее — в разделе Источники art direction.

Image Kit 1.3.1 ​

История версий пакета

  • У команды npx vue-image-kit placeholders появился флаг --replace. Раньше команда пропускала <VImage>, у которых плейсхолдер уже задан. С флагом --replace она заменяет такой плейсхолдер на новый — того вида, что указан в --mode. Заменяются только атрибуты с обычным значением: blurhash, thumbhash, placeholder, placeholder-color и placeholder-mode. Привязанные значения (например, :thumbhash="item.hash") и :image остаются без изменений. Подробнее — в разделе Замена существующих плейсхолдеров.

Image Kit 1.3.0 ​

История версий пакета

  • Новая команда npx vue-image-kit scan — отчёт о том, как vue-image-kit используется в проекте. Находит каждый <VImage> (в шаблонах, JSX и вызовах h(), в том числе под локальным алиасом импорта), каждый v-lazy-img и каждый вызов useImage()/useBackgroundImage(), определяет источник каждого изображения — локальный импорт, путь из public/ (с проверкой, что файл существует), CDN с указанием провайдера, удалённый URL, импорт ?vik или динамическое значение — и выводит количество использований по источникам и файлам, статистику пропсов и предупреждения: нет alt, нет размеров, нет плейсхолдера, файл не найден. Отчёт можно сохранить в JSON, Markdown или CSV, а --fail-on превращает команду в проверку для CI. Подробнее — CLI — отчёт об использовании.
  • Новая команда npx vue-image-kit placeholders — вычисляет BlurHash, ThumbHash или доминирующий цвет изображения и его исходный размер для каждого <VImage>, у которого ещё нет плейсхолдера. Локальные изображения и файлы из public/ читаются с диска, CDN и удалённые — скачиваются только с флагом --remote. Результат попадает в манифест плейсхолдеров для изображений, которые приложение может найти по src, либо прямо в шаблон — для локальных импортов и для всего проекта, если манифест не зарегистрирован. Файлы с незакоммиченными изменениями не правятся. Подробнее — CLI — плейсхолдеры для готовой вёрстки.
  • <VImage> теперь может брать плейсхолдер и размеры из манифеста плейсхолдеров, зарегистрированного один раз через app.use(VImageKitPlugin, { placeholders }) или новую опцию placeholders модуля Nuxt, вместо пропсов на каждом использовании. Явные пропсы и проп image по-прежнему в приоритете; приложения без манифеста это не затрагивает. Новые экспорты: PLACEHOLDERS_KEY, PlaceholderEntry, PlaceholderManifest.
  • Новая функция detectCdnProvider() в @macrulez/vue-image-kit/cdn — сообщает, к какому из автоматически распознаваемых CDN относится URL.
  • CLI теперь разделён на команды — generate (по-прежнему команда по умолчанию), scan и placeholders, — у каждой своя --help. Если не установлен sharp или thumbhash, CLI показывает команду установки для npm, pnpm и yarn.
  • Исправлено: генерация ThumbHash (generate --thumbhash и импорты ?thumbhash/?vik во Vite-плагине) падала на вертикальных изображениях — картинка уменьшалась только до ширины 100px, и всё, что выше, чем шире, оставалось за пределами допустимых для ThumbHash 100×100. Теперь изображение вписывается в 100×100.

Visual Linker 0.3.0 ​

История версий пакета

  • New (core): опция selectable — соединения становятся фокусируемыми кнопками (порядок Tab совпадает с порядком в connections), которые выделяются кликом или Enter/Space, а Ctrl/Cmd/Shift переключает соединение в мультивыделении; Escape или нажатие указателя в другом месте снимает выделение. Delete/Backspace отправляет connection:delete-request, а сама библиотека данные не удаляет. Новое: setSelectedConnections(ids), событие connection:selectionchange, ConnectionStyle.selectedStyle и CSS-переменные --vl-selected-color / --vl-focus-color. Каждая линия теперь несёт role="img" и aria-label (ConnectionDescriptor.ariaLabel, по умолчанию «Connection: a → b»). Подробнее — Выделение и доступность.
  • New (core): ConnectionDescriptor.labels — любое число подписей в любом месте линии (position: 'start', 'middle', 'end' или доля 0..1; offset, rotate, className). Подпись с text рисует сама библиотека как SVG-«таблетку» (--vl-label-bg, --vl-label-border, --vl-label-color), подпись без него — только позиция. ConnectionLayout.labels содержит рассчитанные точку и угол каждой подписи. Новые типы: ConnectionLabel, LabelLayout. Подробнее — Подписи соединений.
  • New (core): ConnectionStyle.animated / defaultAnimated — узор из штрихов или точек, бегущий вдоль линии (speed, direction, shape, dash, gap, color, width); он рисуется отдельным оверлеем на одном CSS и отключается при prefers-reduced-motion. Новый тип: ConnectionFlow. Подробнее — Анимированный поток.
  • New (core): avoidObstacles / obstaclePadding (и ConnectionStyle.avoidObstacles) — линии smoothstep прокладываются в обход других блоков, а не сквозь них, и перестраиваются на лету при перетаскивании блоков; линия, у которой обычный маршрут уже свободен, не меняется, а если маршрута нет, остаётся обычный. Подробнее — Маршрутизация и пересечения.
  • New (core): jumps (и ConnectionStyle.jumps) — линия smoothstep делает небольшую полукруглую дугу там, где пересекает линию другого соединения, как на электрических схемах. Новый тип: JumpsOption. Подробнее — Маршрутизация и пересечения.
  • New (core): clipToScrollParents — порт, уехавший из видимой области внутри обрезающего предка (строка в прокручиваемом списке, overflow: hidden), больше не оставляет линию висеть над посторонним содержимым: по умолчанию 'pin' прижимает этот конец к краю видимой области и убирает его маркер и точку порта, 'hide' скрывает соединение, false возвращает прежнее поведение. В ConnectionLayout появились fromClipped / toClipped. Подробнее — Прокручиваемые контейнеры.
  • New (core): разведение по порту — BlockDescriptor.portSpread, PortDescriptor.spread и defaultPortSpread (true или { gap, padding }, по умолчанию 16 и 8) дают каждому соединению, которое делит сторону порта, свой виртуальный порт, упорядоченный так, чтобы линии не пересекались. Новые типы: PortSpread, PortSpreadOptions. Подробнее — Разведение соединений по порту.
  • New (Vue): проп selected (v-model:selected) и события connection-selectionchange, connection-delete-request и update:selected.
  • New (Vue): #connection-label вызывается по одному разу на каждую подпись без text — { connection, label, point, angle, rotation, from, to } — и ставит подпись в её точку, повернув на rotation. Без labels он работает как раньше: одна подпись посередине линии.
  • New (Vue): portSpread у v-vl-block и в элементах blocks, spread у v-vl-port и атрибуты data-vl-port-spread / data-vl-spread ("" или "true" включает, "false" выключает, "24" задаёт промежуток, "24 4" — промежуток и отступ).
  • Changed (Vue): слот #marker не рендерится для конца соединения, прижатого к краю прокручиваемого контейнера.
  • New (Nuxt): опции модуля portSpread, clipToScrollParents, animated, avoidObstacles, obstaclePadding и jumps, которые применяются как значения по умолчанию для каждого <VisualLinker>.