feat: глобальное переключение Fenom/MODX в code-group

[GulomovCreative]

Summary

• Глобальный sync вкладок Fenom/MODX в ::: code-group через localStorage (vitepress:default-syntax).
• Переписано с нуля поверх актуального master (тема в .vitepress/, не docs/.vitepress/).
• Учтены замечания из feat: глобальное переключение Fenom/MODX в code-group #683 (comment) и проблема со скроллом из исходного draft.

Что изменено

• useSyntaxSwitcher в .vitepress/theme/composables/syntax-switcher.ts
• Подключение в DocsLayout.vue
• Переключение через input.checked + класс .active без .click() — VitePress больше не вызывает scrollIntoView на каждой синхронизированной группе
• Определение синтаксиса по language-fenom / language-modx на блоке (работает и при кастомных заголовках табов вроде [myForm.tpl])
• Cleanup click listener в onUnmounted
• useRouter() на верхнем уровне composable
• Восстановление после смены роута: watch + nextTick, плюс onContentUpdated (dev/HMR)

Test plan

• Открыть страницу с несколькими Fenom/MODX code-group (например /components/msviewcounter/frontend/catalog)
• Переключить таб на Fenom — остальные группы на странице тоже переключаются
• Скролл страницы не прыгает при sync соседних групп
• Перейти на другую страницу с code-group — выбранный синтаксис восстанавливается
• Группы без fenom/modx (другие языки / только кастомные пары) не затрагиваются
• HMR / повторный заход на страницу в pnpm dev — preference сохраняется

[biz87]

Привет @GulomovCreative!

Функционал очень полезный — в документации 78 code-groups, и глобальное переключение синтаксисов сильно улучшит UX.

Нашёл несколько проблем в текущей реализации:

1. Утечка event listener

window.addEventListener('click', ...)
Добавляется в onMounted, но не удаляется в onUnmounted. При hot reload будут накапливаться обработчики.

2. useRouter() внутри onMounted

onMounted(() => {
   const { route } = useRouter()
 })

Лучше вызывать на верхнем уровне composable.

3. Хрупкое сравнение через innerText

.find(el => el.innerText === syntax)
Если в табе будет лишний пробел или другой регистр — не сработает. Лучше textContent?.trim().toLowerCase().

4. Возможные проблемы с таймингом

После смены роута DOM может быть не готов. Стоит добавить nextTick.

Предложение по рефакторингу

  export function useSyntaxSwitcher(key: string, labels: string[]) {
    if (!inBrowser) return

    const { route } = useRouter()
    const normalizedLabels = labels.map(l => l.toLowerCase())

    const handleClick = (e: Event) => {
      const target = e.target as HTMLElement
      if (!e.isTrusted || !target.matches('.vp-code-group .tabs label')) return

      const syntax = target.textContent?.trim().toLowerCase()
      if (!syntax || !normalizedLabels.includes(syntax)) return

      localStorage.setItem(key, syntax)
      setSyntax(syntax, target.closest('.vp-code-group'))
    }

    onMounted(() => {
      window.addEventListener('click', handleClick)

      watch(() => route.path, () => {
        nextTick(() => {
          const saved = localStorage.getItem(key)
          if (saved) setSyntax(saved)
        })
      }, { immediate: true })
    })

    onUnmounted(() => {
      window.removeEventListener('click', handleClick)
    })
  }

Готов помочь с доработкой или могу сам оформить PR с исправлениями, если нет времени.

[Ibochkarev]

Ветка vitepress-syntax-switcher пересобрана от актуального master с учётом ревью.

Кратко по фиксам:

1. Listener снимается в onUnmounted
2. useRouter() на верхнем уровне
3. Нормализация через trim().toLowerCase() + match по language-* классу блока (не по хрупкому innerText таба)
4. nextTick после смены роута + onContentUpdated
5. Скролл: sync без .click(), чтобы VitePress не дергал scrollIntoView на каждой группе

Готово к ревью. @GulomovCreative