feat(formatter,oxfmt): Support js-in-vue (partially)

[leaysgur]

Overview

Part of #16608

This PR applies oxc_formatter to the js-in-vue section.

However, it is not complete and is only applied to the following parts within js-in-vue:

• script block
  • and generic="..."
• v-for LHS
• v-slot

In the script block, external_callback is used like a regular JS file, but it isn't for others.

TL;DR: Now you can use sort-imports for Vue files.

Review points

The points I'd like to ask your review are the following:

• Addition of format_node() to oxc_formatter
  • Made it possible to process any type that implements Format, not just Program
• The implementation of js-in-vue fragment was separated as much as possible to avoid impacting existing code
• oxc_formatter IR to prettier Doc

TODOs

• Planning
• Implementation
• Check benchmark
• Check coverage
• Understand & refactor
  • oxfmt: JS side
  • oxfmt: Rust side
  • oxfmt: to_doc.rs
  • oxc_formatter: fragment_format
• Check benchmark again
• Check coverage again
• Check ecosystem-ci
• Tests 👉🏻 test(oxfmt): Add js-in-xxx prettier conformance #19563

[leaysgur]

• test(oxfmt): Add js-in-xxx prettier conformance #19563
• feat(formatter,oxfmt): Support js-in-vue (partially) #19514 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• 0-merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[leaysgur]

Coverage vs pretteier/tests/format/**/*.vue: LGTM.

👀 COVERAGE: 100.00% / PASS: 88 | DIFF: 0 | ERROR: 0 | TOTAL: 88

Perf: Not bad.

=========================================
Benchmarking Mixed (embedded)
=========================================

Target: Storybook repository (mixed with embedded languages)
- 1 warmup runs, 3 benchmark runs
- Git reset before each run

Benchmark 1: node ~/Codes/oxc/apps/oxfmt/dist-main/cli.js --config ./oxfmtrc.json ./data/**/*.vue
  Time (mean ± σ):     353.7 ms ±   1.9 ms    [User: 1862.3 ms, System: 228.8 ms]
  Range (min … max):   351.5 ms … 355.1 ms    3 runs

Benchmark 2: node ~/Codes/oxc/apps/oxfmt/dist/cli.js --config ./oxfmtrc.json ./data/**/*.vue
  Time (mean ± σ):     297.5 ms ±   0.9 ms    [User: 1445.4 ms, System: 216.3 ms]
  Range (min … max):   296.8 ms … 298.6 ms    3 runs

Summary
  node ~/Codes/oxc/apps/oxfmt/dist/cli.js --config ./oxfmtrc.json ./data/**/*.vue ran
    1.19 ± 0.01 times faster than node ~/Codes/oxc/apps/oxfmt/dist-main/cli.js --config ./oxfmtrc.json ./data/**/*.vue

Mixed (embedded) benchmark complete!

[codspeed-hq]

Merging this PR will not alter performance

✅ 47 untouched benchmarks
⏩ 3 skipped benchmarks¹

---

_{Comparing 02-18-feat_formatter_oxfmt_support_js-in-vue_partially_ (3b495e4) with main (fc3b829)}

Footnotes

1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[leaysgur]

Oxfmt Ecosystem CI

suite	oxfmt@latest	291d96b branch
cnpm/cnpmcore	✅	✅
rolldown/rolldown	✅	✅
vuejs/core	✅	✅
tale/headplane	❌	✅
AmanVarshney01/create-better-t-stack	❌	✅
huggingface/huggingface.js	✅	✅
actualbudget/actual	❌	✅
formatjs/formatjs	❌	✅
eggjs/egg	✅	✅
monkeytypegame/monkeytype	✅	✅
dyad-sh/dyad	✅	✅
fuma-nama/fumadocs	✅	✅
vercel/turborepo	✅	✅
Comfy-Org/ComfyUI_frontend	✅	✅
fastify/fastify-vite	✅	✅
vuejs/pinia	❌	✅
aidenybai/react-grab	✅	✅
openclaw/openclaw	✅	✅
npmx-dev/npmx.dev	❌	✅
getsentry/sentry-javascript	✅	✅
lichess-org/lila	✅	✅

[Copilot]

Pull request overview

This PR adds partial support for formatting JavaScript/TypeScript code embedded in Vue Single File Components (SFCs). The implementation introduces fragment formatting capabilities to oxc_formatter and creates a conversion layer from the formatter's internal representation (IR) to Prettier's Doc format, enabling seamless integration with Prettier's Vue plugin.

Changes:

• Introduces format_node() API to oxc_formatter for formatting arbitrary AST nodes beyond full Program nodes
• Implements Vue-specific formatters for v-for bindings, v-slot parameters, and <script generic="..."> type parameters
• Creates IR-to-Prettier-Doc conversion layer for fragment formatting contexts
• Enables sort-imports functionality for Vue files

Reviewed changes

Copilot reviewed 24 out of 26 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
crates/oxc_formatter/src/lib.rs	Adds format_node() method for formatting arbitrary AST nodes; exports new public APIs
crates/oxc_formatter/src/print/fragment.rs	New file containing Vue-specific formatters (FormatVueBindingParams, FormatVueScriptGeneric)
crates/oxc_formatter/src/print/parameters.rs	Adds trailing separator override mechanism for Vue fragment contexts
crates/oxc_formatter/src/ast_nodes/node.rs	Generalizes AstNode::new from Program-specific to generic type parameter
apps/oxfmt/src/prettier_compat/to_prettier_doc.rs	New 416-line converter from oxc_formatter IR to Prettier Doc JSON format
apps/oxfmt/src/api/text_to_doc_api.rs	Implements fragment and full formatting modes with parent context detection
apps/oxfmt/src/core/config.rs	Adds filepath_override field for js-in-xxx external callback contexts
apps/oxfmt/src/core/format.rs	Threads filepath_override through formatting pipeline
apps/oxfmt/src/core/oxfmtrc.rs	Enables Vue parser support; adds filepath to plugin options
apps/oxfmt/src/core/utils.rs	Refactors init_tracing() to use OnceLock for safe multiple initialization
apps/oxfmt/src/main_napi.rs	Simplifies js_text_to_doc() API to return Option<String>
apps/oxfmt/src-js/libs/prettier-plugin-oxfmt/text-to-doc.ts	Implements parent context detection and Doc JSON parsing
apps/oxfmt/src-js/libs/prettier-plugin-oxfmt/index.ts	Adds babel-ts parser support
Test files	Updates snapshots reflecting sorted import order in Vue files

[Dunqing]

Cool!

[graphite-app]

Merge activity

• Feb 24, 10:17 AM UTC: Dunqing added this pull request to the Graphite merge queue.
• Feb 24, 10:24 AM UTC: Merged by the Graphite merge queue.