Architecture

High-level flow:

flowchart LR
  A[Source file or string] --> B[Babel parse JSX/TS]
  B --> C[React parser]
  C --> D[IR Component]
  D --> E[Vue SFC codegen]
  E --> F[.vue text or file]

Layout

Area	Path	Role
CLI	src/index.ts	cac CLI; calls convert()
Entry API	src/convert.ts	convert, convertCode; wires parser → codegen
Parser	src/parser/react.ts, src/parser/index.ts	Babel AST → Component IR
IR	src/ir/types.ts, src/ir/index.ts	Framework-agnostic component + template model
Codegen	src/codegen/vue.ts, src/codegen/index.ts	IR → Vue SFC string
Tests	test/convert.test.mjs, test/fixtures/*	Regression tests

For a detailed list of what react.ts and vue.ts implement today (hooks, JSX patterns, template emission), see Compiler features.

Intermediate representation

The IR (src/ir/types.ts) describes:

• Component metadata: name, props, setup (ordered parts), declaredNames, template.
• SetupPart variants: state, ref, memo, effect, subcomponent, verbatim text blocks.
• TemplateNode tree: elements, components, fragments, text, expressions, conditionals, lists.

This layer is meant to stay framework-agnostic so additional parsers or emitters can be added later without rewriting the entire pipeline.

Playground

The Nuxt app under website/ imports convertCode from src/convert.ts via the server route website/server/api/convert.post.ts. That keeps the same conversion logic as the CLI and npm API.

Build

• Library bundle: tsup (tsup.config.ts), ESM output in dist/.
• Docs: VitePress in docs/ (separate docs/package.json).