|
Professor Seleznov
|
Боль
Открываешь иконочный 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 — 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)" }]
}
}
]
Готово. Курсор в → 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-паттерны парсер уронит? Реальные примеры из ваших кодовых баз — лучшие тесты
 .
P.S. Параллельно положил пост на r/Zed. Если штука вам зашла — будет здорово, если поддержите там апвоутом или комментарием: ссылка.-Источник
|
|
|
