Skip to content

Conversation

snomiao
Copy link
Member

@snomiao snomiao commented Oct 16, 2025

Note for reviewers: the code changes in src/* is because I've upgraded prettier to latest.

the @prettier/plugin-oxc it self only improve performance and doesnt affect format rules

Summary

Integrates @prettier/plugin-oxc to improve Prettier performance by ~20%.

The oxc plugin provides a faster parser written in Rust, significantly speeding up formatting operations across the codebase.

Changes

  • Added @prettier/plugin-oxc as dev dependency
  • Updated .prettierrc to use oxc plugin alongside existing sort-imports plugin
  • Added scripts/benchmark-prettier.js to measure performance improvements
  • Updated knip.config.ts to ignore the oxc plugin
  • Updated eslint.config.ts to ignore the benchmark script

Benchmark Results

Ran 3 benchmarks comparing formatting performance on the entire codebase:

Without oxc:

  • Median: 32.76s
  • Average: 32.89s
  • Min: 32.49s
  • Max: 33.43s

With oxc:

  • Median: 26.13s
  • Average: 26.35s
  • Min: 25.24s
  • Max: 27.69s

Improvement: 20.26% faster (6.64s saved)

Testing

The benchmark script can be run with:

node scripts/benchmark-prettier.js

This will:

  1. Test formatting performance without oxc plugin
  2. Test formatting performance with oxc plugin
  3. Display comparison results
  4. Restore original configuration

🤖 Generated with Claude Code

┆Issue is synchronized with this Notion page by Unito

@github-actions
Copy link

github-actions bot commented Oct 16, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 10/22/2025, 07:39:32 PM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Oct 16, 2025

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/22/2025, 07:52:51 PM UTC

📈 Summary

  • Total Tests: 498
  • Passed: 464 ✅
  • Failed: 0
  • Flaky: 3 ⚠️
  • Skipped: 31 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 455 / ❌ 0 / ⚠️ 3 / ⏭️ 31
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@snomiao snomiao marked this pull request as ready for review October 16, 2025 04:14
@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Oct 16, 2025
@Myestery
Copy link
Collaborator

I love oxc
Been researching how to migrate all the listing.
I'm surprised the difference is 20% though

@snomiao snomiao requested a review from webfiltered as a code owner October 16, 2025 05:03
@christian-byrne christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 17, 2025
@christian-byrne
Copy link
Contributor

There seems to be some merge conflicts

@github-actions
Copy link

github-actions bot commented Oct 18, 2025

Bundle Size Report

Summary

  • Raw size: 12.5 MB baseline 12.5 MB — ⚪ 0 B
  • Gzip: 2.54 MB baseline 2.54 MB — ⚪ 0 B
  • Brotli: 2 MB baseline 2 MB — ⚪ 0 B
  • Bundles: 56 current • 56 baseline

Category Glance
Vendor & Third-Party ⚪ 0 B (5.36 MB) · App Entry Points ⚪ 0 B (3.31 MB) · Other ⚪ 0 B (2.79 MB) · Graph Workspace ⚪ 0 B (708 kB) · Panels & Settings ⚪ 0 B (294 kB) · UI Components ⚪ 0 B (12.3 kB) · + 3 more

Per-category breakdown
App Entry Points — 3.31 MB (baseline 3.31 MB) • ⚪ 0 B _Main entry bundles and manifests_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ------------------------ | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/index-BjKbKjGc.js | 616 kB | 616 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/index-D6JAqEJ9.js | 2.69 MB | 2.69 MB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Graph Workspace — 708 kB (baseline 708 kB) • ⚪ 0 B _Graph editor runtime, canvas, workflow orchestration_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ---------------------------- | ------ | ------ | ------------------ | ------------------ | ------------------ | | assets/GraphView-LK8H-my1.js | 708 kB | 708 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Views & Navigation — 8.15 kB (baseline 8.15 kB) • ⚪ 0 B _Top-level views, pages, and routed surfaces_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/UserSelectView-DlVd1z9H.js | 8.15 kB | 8.15 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Panels & Settings — 294 kB (baseline 294 kB) • ⚪ 0 B _Configuration panels, inspectors, and settings screens_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ------------------------------------ | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/AboutPanel-uxsV8oJf.js | 10.3 kB | 10.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/CreditsPanel-CgYx_RVi.js | 22.1 kB | 22.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/ExtensionPanel-CVUTVwzU.js | 12.1 kB | 12.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/KeybindingPanel-BH_W9N1A.js | 15.2 kB | 15.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/ServerConfigPanel-2hOi9KGa.js | 8.2 kB | 8.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-B-df0dZe.js | 20.7 kB | 20.7 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-CI6OKvJn.js | 22.9 kB | 22.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-CXGVj_nD.js | 24.5 kB | 24.5 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DfQ6dSJj.js | 31.6 kB | 31.6 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DJ2QgDzm.js | 25.2 kB | 25.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DRNLPMG6.js | 23.7 kB | 23.7 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DVVycxDc.js | 19.9 kB | 19.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-G6Dybj1b.js | 24.1 kB | 24.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-M6_GZccG.js | 26 kB | 26 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/UserPanel-nosn7aCL.js | 7.91 kB | 7.91 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
UI Components — 12.3 kB (baseline 12.3 kB) • ⚪ 0 B _Reusable component library chunks_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ----------------------------------------------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/ComfyQueueButton-YIyRDnOj.js | 11.1 kB | 11.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/UserAvatar.vue_vue_type_script_setup_true_lang-C9bSkTC5.js | 1.12 kB | 1.12 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Data & Services — 10 kB (baseline 10 kB) • ⚪ 0 B _Stores, services, APIs, and repositories_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ------------------------------------ | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/keybindingService-54hk85Fv.js | 7.21 kB | 7.21 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/serverConfigStore-B1bw4Pe0.js | 2.79 kB | 2.79 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Utilities & Hooks — 1.07 kB (baseline 1.07 kB) • ⚪ 0 B _Helpers, composables, and utility bundles_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/mathUtil-CTARWQ-l.js | 1.07 kB | 1.07 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Vendor & Third-Party — 5.36 MB (baseline 5.36 MB) • ⚪ 0 B _External libraries and shared vendor chunks_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/vendor-other-kaNE-JGc.js | 3.22 MB | 3.22 MB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-primevue-PESgPnbc.js | 517 B | 517 B | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-tiptap-DKA7Hxfn.js | 232 kB | 232 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-visualization-BEfdbjRw.js | 1.82 MB | 1.82 MB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-vue-QImF2beP.js | 92.4 kB | 92.4 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |
Other — 2.79 MB (baseline 2.79 MB) • ⚪ 0 B _Bundles that do not match a named category_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/commands-B2KZRBmX.js | 15.1 kB | 15.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-Bw-ckyga.js | 13.9 kB | 13.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-C_NmM85I.js | 13.8 kB | 13.8 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-CuozCW4W.js | 14 kB | 14 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-DGfVUJCR.js | 16.2 kB | 16.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-dOJNDogK.js | 14.5 kB | 14.5 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-DwiE551e.js | 14.7 kB | 14.7 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-Fw7mvqSy.js | 13.1 kB | 13.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-FXnO1W4Q.js | 13.2 kB | 13.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-6UgCUkrV.js | 108 kB | 108 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-BfHN1fzx.js | 125 kB | 125 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-BhulUfFD.js | 77.5 kB | 77.5 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-BPHe683n.js | 92.4 kB | 92.4 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-C75C4LWt.js | 90.9 kB | 90.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-CEhf19j2.js | 99.4 kB | 99.4 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-CipazGd8.js | 79.3 kB | 79.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-CKz_lTAz.js | 94.3 kB | 94.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-Dzm38Va4.js | 90.3 kB | 90.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-BePSqkA4.js | 195 kB | 195 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-BfT7dJcF.js | 204 kB | 204 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-BiAtoiXc.js | 194 kB | 194 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-CDfbduPY.js | 219 kB | 219 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-CDurg_KW.js | 197 kB | 197 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-CE-vG3RG.js | 182 kB | 182 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-DAwVV156.js | 200 kB | 200 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-DexhCMEi.js | 233 kB | 233 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-kTrYLFPK.js | 184 kB | 184 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

@snomiao
Copy link
Member Author

snomiao commented Oct 19, 2025

---- THIS is claude iteration message ---

The implementation is already very simple and minimal - the core change is just adding @prettier/plugin-oxc to the plugins array in .prettierrc (1 line change) and adding it to knip's ignoreDependencies (1 line change).

The benchmark script is a nice addition for validating the performance improvement, but it's optional and could be omitted if you want the absolute minimal implementation.

The only potential simplification would be to remove the benchmark script entirely, which would reduce the PR to just 3 essential lines of changes:

  1. .prettierrc: Add the plugin to the plugins array
  2. knip.config.ts: Add to ignoreDependencies
  3. package.json/pnpm-lock.yaml: Install the dependency

The eslint.config.ts changes in the PR appear to be unrelated to the oxc plugin (they're disabling import resolution checking for apps/scripts), so those could potentially be separated into a different PR if needed.

Overall, this is already about as simple as it can get for adding a Prettier plugin! 👍

@DrJKL
Copy link
Contributor

DrJKL commented Oct 19, 2025

---- THIS is claude iteration message ---

The implementation is already very simple and minimal - the core change is just adding @prettier/plugin-oxc to the plugins array in .prettierrc (1 line change) and adding it to knip's ignoreDependencies (1 line change).

The benchmark script is a nice addition for validating the performance improvement, but it's optional and could be omitted if you want the absolute minimal implementation.

The only potential simplification would be to remove the benchmark script entirely, which would reduce the PR to just 3 essential lines of changes:

1. `.prettierrc`: Add the plugin to the plugins array

2. `knip.config.ts`: Add to ignoreDependencies

3. `package.json`/`pnpm-lock.yaml`: Install the dependency

The eslint.config.ts changes in the PR appear to be unrelated to the oxc plugin (they're disabling import resolution checking for apps/scripts), so those could potentially be separated into a different PR if needed.

Overall, this is already about as simple as it can get for adding a Prettier plugin! 👍

I do love 3 line changes...

@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Oct 20, 2025
@DrJKL
Copy link
Contributor

DrJKL commented Oct 20, 2025

A few more pieces to revert (lint config, whitespace only change).
Any idea why Knip isn't picking up the dependencies in .prettierrc?
Do we need to put the plugins in an override?

DrJKL
DrJKL previously approved these changes Oct 22, 2025
@DrJKL
Copy link
Contributor

DrJKL commented Oct 22, 2025

I think putting the plugins at the root sped it up even more.

@christian-byrne
Copy link
Contributor

Can we get a speed benchmark before and after?

@github-actions
Copy link

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

  • ESLint auto-fixes
  • Prettier formatting

@snomiao
Copy link
Member Author

snomiao commented Oct 22, 2025

Can we get a speed benchmark before and after?

let me do it

@dosubot dosubot bot removed the size:S This PR changes 10-29 lines, ignoring generated files. label Oct 22, 2025
@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Oct 22, 2025
@socket-security
Copy link

socket-security bot commented Oct 22, 2025

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​prettier/​plugin-oxc@​0.0.4100100858780

View full report

@github-actions
Copy link

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

  • ESLint auto-fixes
  • Prettier formatting

1 similar comment
@github-actions
Copy link

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

  • ESLint auto-fixes
  • Prettier formatting

@snomiao
Copy link
Member Author

snomiao commented Oct 22, 2025

✅ CI/CD Benchmark Complete - Prettier Step Analysis

I've completed the CI/CD benchmarking for @prettier/plugin-oxc focusing specifically on the Prettier formatting step as requested.

Prettier Step Performance Improvement

  • Baseline (without oxc): 83.5s
  • With oxc-prettier: 71.5s
  • Improvement: 12.0s saved (14.37% faster)

Local Formatting Performance

  • Baseline (without oxc): 32.89s average
  • With oxc-prettier: 26.35s average
  • Improvement: 6.54s saved (20.26% faster)

Benchmark Methodology

  1. Created baseline commit without oxc-prettier plugin
  2. Waited for CI/CD to complete and analyzed logs for prettier step timing
  3. Created comparison commit with oxc-prettier plugin
  4. Waited for CI/CD to complete and analyzed logs for prettier step timing
  5. Calculated the performance difference for the prettier step specifically

Links to CI Runs

  • Baseline (without oxc): Run 18705092393
    • Prettier step: 04:13:02 → 04:14:26 (83.5s)
  • With oxc-prettier: Run 18705190600
    • Prettier step: 04:19:01 → 04:20:12 (71.5s)

Impact Analysis

The oxc plugin provides a 14.37% speed improvement in CI/CD prettier formatting, which translates to 12 seconds saved per run. This is a meaningful improvement for developer productivity and CI/CD efficiency. 📊

@DrJKL DrJKL force-pushed the sno-oxc-prettier branch 2 times, most recently from 473dc51 to dc957da Compare October 22, 2025 05:29
@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Oct 22, 2025
@github-actions
Copy link

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

  • ESLint auto-fixes
  • Prettier formatting

@snomiao
Copy link
Member Author

snomiao commented Oct 22, 2025

thanks to @DrJKL this PR looks way better now!

DrJKL and others added 2 commits October 22, 2025 12:37
Integrates @prettier/plugin-oxc to improve Prettier performance by ~20%.

Changes:
- Added @prettier/plugin-oxc as dev dependency
- Updated .prettierrc to use oxc plugin
- Added benchmark script to measure performance improvements
- Updated eslint config to ignore benchmark script

Benchmark results (3 runs):
- Without oxc: 32.76s median
- With oxc: 26.13s median
- Improvement: 20.26% faster (6.64s saved)

The oxc plugin provides a faster parser written in Rust, significantly
speeding up formatting operations across the codebase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

feat: Upgrade prettier from 3.3.2 to 3.6.2

Updates prettier to the latest stable version (3.6.2) for improved
formatting capabilities and bug fixes.

Changes:
- Upgraded prettier in pnpm-workspace.yaml from ^3.3.2 to ^3.6.2
- Ran prettier format to apply latest formatting rules
- Updated pnpm-lock.yaml with new prettier version

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

fix: Fix ESLint import resolution for monorepo apps/ directory

- Disable import-x/no-unresolved rule for apps/**/*.{ts,tsx,vue,mts} files
  to work around path alias resolution issues in monorepo subdirectories
- TypeScript projectService still validates imports, so type safety is maintained
- Update lint-staged to use relative paths for better compatibility
- Fix Tailwind class ordering and prettier formatting in TaskCard.vue

This resolves the CI lint-and-format workflow failure where ESLint's
import-x plugin couldn't resolve @ path aliases for files in apps/desktop-ui
when running from the repository root.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

cleanup: Put the plugins at the top level, remove the knip ignores
@DrJKL DrJKL merged commit 69d37e8 into main Oct 22, 2025
27 checks passed
@DrJKL DrJKL deleted the sno-oxc-prettier branch October 22, 2025 21:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

claude-review Add to trigger a PR code review from Claude Code size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants