svg-react-preview: предпросмотр inline-SVG внутри JSX-компонентов прямо в Zed

В сфере искусственного интеллекта произошло заметное событие. Sgdn 10 минут назад svg-react-preview: предпросмотр inline-SVG внутри JSX-компонентов прямо в Zed Простой 3 мин 86 ReactJS * Обработка изображений * Иконки * Из песочницы БольОткрываешь иконочный React-компонент — и привет:Тот самый GobletIcon. tsx со стеной path-овУ Zed есть отличный нативный preview для отдельных . Но для SVG, лежащего внутри JSX, — ничего.

Так же, кстати, и в большинстве других редакторов. Почему task, а не расширениеОчевидное решение — расширение для Zed. Но extension API у Zed пока не даёт того, что для этого нужно: открыть произвольный буфер в превью-режиме по команде из самого расширения.

Технические детали

Когда API дорастёт — с радостью перепишу. А пока — Zed-таск + маленькая CLI. Или cmd+opt+v: иконка открывается в новой вкладкеЧто делает svg-react-previewСтавите курсор куда угодно внутрь svg-тега в .

jsx и запускаете таск. Дальше CLI:Парсит файл через swc, находит ближайший охватывающий . Нормализует его в валидный standalone .

svg: className → class, strokeWidth → stroke-width, динамические {props} заменяются на дефолты (24, currentColor, …) или выкидываются, спред {... props} дропается, PascalCase-компоненты превращаются в плейсхолдер-Пишет результат в $TMPDIR/svg-react-preview/<хеш>. svg (имя — стабильный xxhash от исходника, повторное превью не плодит файлы).

Отраслевые последствия

Открывает его через zed — Zed показывает preview-вкладку рядом с исходником. ПлатформыmacOS — полностью автоматически. AppleScript открывает файл в Zed, синтезирует Cmd+Shift+V для preview-режима, потом Cmd+Shift+И опционально хоткей в ~/.

Курсор в → Alt+Shift+V → в новой вкладке отрендеренная иконка. Что под капотом:Rust, swc для парсинга TSX/JSX. На macOS — osascript для AppleScript-управления Zed (открыть файл, дослать хоткей, закрыть лишнюю вкладку).

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