Что нового — Октябрь 2026
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и composableusePlaceholder(), серверная разметка которых не может разойтись при гидрации. См. Компонент 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. Они никогда не затрагивают общий кэш и манифест. - Новая опция
typesVite-плагина. Шаблон модуля 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.x 0.4.0 defaultCurvelines.curvedefaultCurvature,defaultCurveMinReach,defaultCurveMaxReach,defaultCurveAngleBlend,defaultCurveAngleMaxOffsetlines.bezier.curvature,minReach,maxReach,angleBlend,angleMaxOffsetdefaultCornerRadius,defaultMaxTrunkReachlines.smoothstep.cornerRadius,lines.smoothstep.maxTrunkReachavoidObstacles,obstaclePaddinglines.routing.avoidObstacles,lines.routing.paddingjumps,defaultAnimatedlines.jumps,lines.animatedshowPortsports.showdefaultPortRadius,defaultPortColor,defaultPortStrokeColor,defaultPortStrokeWidthports.radius,ports.fill,ports.stroke,ports.strokeWidthdefaultPortSpreadports.spreaddefaultCircleMarkerSize,defaultSquareMarkerSize,defaultDiamondMarkerSize,defaultArrowMarkerSizemarkers.sizes.circle,square,diamond,arrowdraggable,dragGridSize,dragBoundsblocks.draggable,blocks.drag.grid,blocks.drag.boundsselectable,clipToScrollParentsinteraction.selectable,interaction.clipToScrollParentsstyle.curvature,curveMinReach,curveMaxReach,curveAngleBlend,curveAngleMaxOffsetstyle.bezier.curvature,minReach,maxReach,angleBlend,angleMaxOffsetstyle.cornerRadius,style.maxTrunkReachstyle.smoothstep.cornerRadius,style.smoothstep.maxTrunkReachstyle.avoidObstaclesstyle.routing.avoidObstaclesstyle.startMarker,style.endMarkerstyle.markers.start,style.markers.endstyle.hoverStyle,style.selectedStylestyle.hover,style.selectedhoverStyle.markerSize,selectedStyle.markerSizesizeв собственныхhoverиselectedмаркераVisualLinkerOptionsVisualLinkerConfigBreaking (Vue): проп
optionsкомпонента<VisualLinker>теперь называетсяconfig, аUseVisualLinkerOptionsуuseVisualLinker()больше не расширяет опции движка: в нёмconfig,blocksиconnections.configреактивен, поэтому его изменение перерисовывает диаграмму. Подробнее — Компонент VisualLinker.Breaking (Vue): общая конфигурация переехала из глобального объекта в
provide/injectVue.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>.