🚀 Автоматическая конвертация React в Vue: избавляемся от ручного рефакторинга

TL;DR

Source-to-source компилятор для автоматической конвертации React-компонентов (JSX/TSX) в Vue 3 SFC с <script setup>. Поддерживает хуки, JSX-трансформацию и основные React-паттерны. Работает через CLI или API, сокращая время миграции между экосистемами.

Введение: проблема фреймворкового lock-in

В современном frontend-разработке смена стека часто означает полный рефакторинг кодовой базы. Типичные сценарии:

• Переход команды с React на Vue (или наоборот)
• Необходимость поддерживать проекты на разных фреймворках
• Эксперименты с альтернативными технологиями

Ручной перенос компонентов:

1. Трудоемкий процесс с высоким риском ошибок
2. Требует глубокого знания обеих экосистем
3. Создает проблемы с поддержкой когерентности

Существующие решения (AI tools, regex-конвертеры) часто дают нестабильный результат. Мы предлагаем подход через настоящий компилятор с промежуточным представлением (IR).

Как работает трансформация

Компиляторный pipeline

// Пример конвертации через API
import { convertCode } from "cross-framework"

const vueCode = convertCode({
  from: "react",
  to: "vue",
  sourceCode: reactSource,
  filename: "Component.tsx",
})

Этапы преобразования:

1. Parse: Babel-based парсинг исходного кода в AST
2. Transform: создание framework-agnostic IR
3. Emit: генерация Vue SFC с Composition API

Поддерживаемые конструкции

Функциональные компоненты

// React input
export default function Button({ children }) {
  return <button className="btn">{children}</button>
}

// Vue output
<template>
  <button class="btn"><slot /></button>
</template>

<script setup>
defineProps(['children'])
</script>

Хуки и реактивность

Пример трансформации:

// React
function Counter() {
  const [count, setCount] = useState(0)
  useEffect(() => console.log(count), [count])
  
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

// Vue
<template>
  <button @click="count++">{{ count }}</button>
</template>

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)
watch(count, () => console.log(count.value))
</script>

Практическое применение

CLI Usage

npx cross-framework convert \
  --from react \
  --to vue \
  --out-dir ./vue-components \
  ./src/components/**/*.tsx

Интеграция в сборку

Для постепенной миграции можно настроить преобразование через плагин для Vite/Rollup:

// vite.config.js
import { crossFramework } from 'cross-framework/vite'

export default {
  plugins: [
    crossFramework({
      from: 'react',
      to: 'vue'
    })
  ]
}

Ограничения и roadmap

Текущие constraints:

• Нет автоматического преобразования импортов
• Complex HOCs могут требовать ручной доработки
• Context API требует специальной обработки

Планы развития:

1. Поддержка Class Components → Options API
2. Трансформация React Router → Vue Router
3. Конвертация Redux → Pinia/Vuex

Заключение

Source-to-source компиляция предлагает pragmatic approach к проблеме фреймворковой миграции. Хотя инструмент не покрывает 100% use cases, он:

• Сокращает время перехода между экосистемами
• Минимизирует человеческий фактор
• Позволяет сохранить бизнес-логику

Для сложных проектов рекомендуем:

1. Начать с атомарных компонентов
2. Постепенно расширять coverage
3. Интегрировать в CI для проверки консистентности

Инструмент особенно полезен для:

• Команд, поддерживающих мультифреймворковые проекты
• Библиотек компонентов с кросс-фреймворковой поддержкой
• Энтерпрайз-проектов с долгим lifecycle

# Попробовать на реальном проекте
npm install cross-framework
npx cross-framework convert ./your-component.tsx

Как next-step — предлагаем поэкспериментировать с конвертацией дизайн-систем и провести benchmark по сравнению с ручным рефакторингом.

Источник: https://dev.to/parsajiravand/stop-rewriting-components-convert-react-to-vue-automatically-pfc