Главная

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

2026-05-07 в 10:15, admin, рубрики: React, zed

Боль

Открываешь иконочный React-компонент — и привет:

Тот самый GobletIcon.tsx со стеной path-ов

У Zed есть отличный нативный preview для отдельных .svg-файлов. Но для SVG, лежащего внутри JSX, — ничего. Так же, кстати, и в большинстве других редакторов.

Почему task, а не расширение

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

Или cmd+opt+v: иконка открывается в новой вкладке

Что делает svg-react-preview

Ставите курсор куда угодно внутрь svg-тега в .tsx/.jsx и запускаете таск. Дальше CLI:

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

Платформы

macOS — полностью автоматически. AppleScript открывает файл в Zed, синтезирует Cmd+Shift+V для preview-режима, потом Cmd+Shift+[ + Cmd+W чтобы закрыть лишнюю текстовую вкладку. На выходе — ровно одна preview-вкладка за запуск. Цена: на первом запуске нужно дать Zed.app права в Системные настройки → Конфиденциальность → Универсальный доступ (macOS блокирует синтетические нажатия без этого).
Linux / Windows — файл открывается как текст, один Ctrl+Shift+V переключает в preview. Зато никаких permission-диалогов.

Установка

cargo install --git https://github.com/Segodnya/svg-react-preview

Бинарь падает в ~/.cargo/bin/svg-react-preview — убедитесь, что он в PATH.

Дальше в Zed: Zed → CLI → Install zed Shell Command (нужен zed на PATH, чтобы CLI могла открывать файлы в вашем уже запущенном Zed).

В ~/.config/zed/tasks.json:

 [
   {
     "label": "Preview SVG (cursor)",
     "command": "svg-react-preview",
     "env": {
       "SVG_REACT_PREVIEW_FILE":   "{ZED_FILE}",
       "SVG_REACT_PREVIEW_ROW":    "{ZED_ROW}",
       "SVG_REACT_PREVIEW_COLUMN": "${ZED_COLUMN}"
     },
     "use_new_terminal": false,
     "allow_concurrent_runs": true,
     "reveal": "no_focus",
     "hide": "on_success",
     "save": "none"
   }
 ]

И опционально хоткей в ~/.config/zed/keymap.json:

[
  {
    "context": "Editor",
    "bindings": {
      "alt-shift-v": ["task::Spawn", { "task_name": "Preview SVG (cursor)" }]
    }
  }
]

Готово. Курсор в <svg></svg> → Alt+Shift+V → в новой вкладке отрендеренная иконка.

Что под капотом:

Rust, swc для парсинга TSX/JSX.
На macOS — osascript для AppleScript-управления Zed (открыть файл, дослать хоткей, закрыть лишнюю вкладку). Хоткей настраивается через SVG_REACT_PREVIEW_HOTKEY, можно полностью отключить (=none) если в Zed свой кейбиндинг.
Полный набор CI: clippy pedantic+nursery, llvm-cov с гейтом 95%, cargo-deny, cargo-audit, cargo-machete, cargo-udeps, cargo-mutants. Hook через cargo-husky.

Сам буду пользоваться. Но интересно, насколько боль общая:

Удобно ли?
Linux/Windows-пользователи: ручной Ctrl+Shift+V — приемлемо или стоит автоматизировать?
Какие JSX-паттерны парсер уронит? Реальные примеры из ваших кодовых баз — лучшие тесты :).