SXL Studio
Dev Mode

Редактирование Vue в Dev Mode

Редактирование .vue файлов репозитория прямо в SXL Studio Dev Mode: diff preview, preflight conflict checks и publish в один клик.

Назначение

Во вкладке Code Dev Mode можно править существующие .vue файлы, не выходя из Figma.

Это repository-backed сценарий:

  • чтение из активного Git connection
  • сравнение local buffer vs remote
  • публикация одним commit

Предусловия

  • Активное Git-подключение в footer (Sync)
  • Заполнен Code folder в Dev Mode connection settings
  • Настроен Repository connection для Code Connect (рекомендуется)

Dev Mode подключение ограничено редактированием исходников. Оно не синхронизирует Database или Tokens; эти пути настраиваются из Design Mode sync settings.

Структура workspace

Левая часть: Vue-дерево

  • ленивое раскрытие папок из Git
  • Refresh сбрасывает кэш и заново загружает root
  • редактируемыми являются только .vue
  • связанные файлы (из Code Connect registry) помечаются в дереве

Правая часть: Monaco-редактор

  • syntax mode по расширению (.vue в html grammar)
  • status bar показывает язык, число строк и sync state
  • dirty-индикатор (Uncommitted) показывает локальные правки

Save & Publish

Save & Publish работает через preflight-safe сценарий:

  1. выполняется повторное чтение remote файла (remote peek)
  2. если SHA не изменился, commit отправляется сразу
  3. если remote изменился, открывается conflict modal с diff и явным выбором действий

Действия в конфликте:

  • Overwrite remote (форс-публикация на свежий SHA)
  • Reload from remote (потеря локальных правок)
  • Cancel

После успешной публикации:

  • dirty state сбрасывается
  • подтягивается актуальный remote SHA
  • baseline обновляется текущим содержимым редактора

Формат commit message по умолчанию:

  • [SXL Studio] Update <path>

View diff (без публикации)

View diff открывает read-only сравнение Local vs Remote.

Используйте перед publish, чтобы проверить точный объём изменений.

Горячие клавиши

Внутри редактора:

  • Cmd + S (macOS)
  • Ctrl + S (Windows/Linux)

Обе комбинации запускают тот же Save & Publish поток.

Быстрый Code Connect из редактора

Connect связывает открытый .vue с выбранным в Figma component/component set.

Это fast-path привязка:

  • создаёт/обновляет vue3 file binding
  • пишет данные в diff-code-connect.<fileKey>.json
  • запись Dev Resource на ноду может потребовать Design Mode (ограничение Figma Dev Mode)

Connect недоступен, если:

  • не выбран component/component set
  • не задан Repository URL

Защита от потерь

  • При переключении на другой файл с несохранёнными правками есть confirm-диалог.
  • Сохранение не перетирает тихо чужие remote-изменения.
  • При ошибке save буфер остаётся dirty и показывается понятное сообщение.

Текущие ограничения

  • Фокус на правке существующих файлов из Vue-дерева
  • Подключение только с Code folder может показывать "nothing to pull" для data/token sync, потому что эта панель code-only
  • Нет runtime preview/sandbox в этой панели
  • Нет отдельного UI для создания нового файла в Dev-редакторе

Связанные разделы