feat(nuxt): use `oxc-parser` instead of esbuild + acorn #30066

danielroe · 2024-11-27T10:59:00Z

🔗 Linked issue

📚 Description

this moves from acorn + esbuild to using oxc-parser directly to parse code in our plugins. The main benefits are:

~~⚡️ speed - this is faster and has the potential to be faster still - need to create some benchmarks to measure~~
~~🎨 decorator support - this is natively supported by oxc-parser - we'll need to update feat(kit,nuxt,schema): support experimental decorators syntax #27672 to apply only to nitro~~
📐 alignment with vite move to oxc/rolldown toolchain
native support for parsing TS/TSX where before we only supported JS (see definePageMeta try to process with ancorn ts code. Vue composables don't do so. #297 8000 90)

This PR also includes additional tests for the transformation plugins and fixes a few bugs I found along the way, including removing type assertions ~~and relying on the auto-generated AST types from oxc~~.

🚧 TODO

fix upstream issue in oxc-parser with unicode: unicode characters result in incorrect start/end values oxc-project/oxc#7508

bolt-new-by-stackblitz · 2024-11-27T10:59:04Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2024-11-27T10:59:10Z

Walkthrough

The pull request refactors various modules within the Nuxt package. Changes include adjusting type import statements by consolidating imports from the same module, and altering functions from asynchronous to synchronous implementations. Custom parsing logic relying on Acorn has been removed in favour of direct calls to streamlined parsing utilities. Functions related to metadata extraction, route processing, and tree-shaking are updated to eliminate the intermediate transformation steps. Test cases have been modified accordingly, where asynchronous handling is replaced with synchronous execution and dependency on Acorn is removed. These revisions simplify the control flow across components, core plugins, utilities, and tests without altering the overall functionality.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 78c0701 and eaffb04.

⛔ Files ignored due to path filters (2)

packages/nuxt/package.json is excluded by !**/package.json
pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml

📒 Files selected for processing (1)

packages/nuxt/src/pages/utils.ts (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/nuxt/src/pages/utils.ts

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

socket-security · 2024-11-27T11:00:31Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher

View full report↗︎

socket-security · 2024-11-27T11:00:32Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

packages/nuxt/src/core/utils/parse.ts

harlan-zw · 2024-11-28T02:31:12Z

This is cool, love the utils.

I was wondering if we could export these utils within @nuxt/kit as many modules have the same requirements and the API seems fairly stable. Can tackle as a separate PR if preferred

danielroe · 2024-11-28T12:41:47Z

Great idea! I've created oxc-walker as a separate util for now. Happy to retire it or donate the name to the oxc team if they want (cc: @Boshen).

(We could also create a workaround for the incorrect start/end positions with unicode text within that library.)

API: https://github.com/rich-harris/magic-string?tab=readme-ov-file#shaschanged impl: Rich-Harris/magic-string#202 part of nuxt/nuxt#30066 (comment)

pkg-pr-new · 2025-02-26T15:35:37Z

Open in Stackblitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@30066

nuxt

npm i https://pkg.pr.new/nuxt@30066

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@30066

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@30066

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@30066

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@30066

commit: eaffb04

codspeed-hq · 2025-02-26T15:44:52Z

CodSpeed Performance Report

Merging #30066 will not alter performance

_{Comparing feat/oxc (eaffb04) with main (40ddc30)}

Summary

✅ 10 untouched benchmarks

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/nuxt/test/treeshake-client.test.ts (1)
58-58: Simplified transform method call

The transform function call has been streamlined, removing unnecessary parsing context.

Consider replacing the generic Function type with a more specific function signature type to improve type safety:
-const result = await (treeshakeTemplatePlugin.transform! as Function)(source, 'test.ts')
+const result = await (treeshakeTemplatePlugin.transform! as (code: string, id: string) => Promise<string | { code: string } | null>)(source, 'test.ts')
🧰 Tools

🪛 Biome (1.9.4)

[error] 58-58: Don't use 'Function' as a type.

Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.

(lint/complexity/noBannedTypes)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 241e040 and 78c0701.

⛔ Files ignored due to path filters (2)

packages/nuxt/package.json is excluded by !**/package.json
pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml

📒 Files selected for processing (12)

packages/nuxt/src/components/plugins/tree-shake.ts (1 hunks)
packages/nuxt/src/core/plugins/plugin-metadata.ts (2 hunks)
packages/nuxt/src/core/utils/parse.ts (3 hunks)
packages/nuxt/src/pages/plugins/page-meta.ts (1 hunks)
packages/nuxt/src/pages/route-rules.ts (2 hunks)
packages/nuxt/src/pages/utils.ts (4 hunks)
packages/nuxt/test/component-names.test.ts (1 hunks)
packages/nuxt/test/composable-keys.test.ts (1 hunks)
packages/nuxt/test/page-metadata.test.ts (20 hunks)
packages/nuxt/test/plugin-metadata.test.ts (3 hunks)
packages/nuxt/test/route-rules.test.ts (2 hunks)
packages/nuxt/test/treeshake-client.test.ts (1 hunks)

✅ Files skipped from review due to trivial changes (1)

packages/nuxt/src/components/plugins/tree-shake.ts

🧰 Additional context used

🪛 Biome (1.9.4)

packages/nuxt/test/treeshake-client.test.ts

[error] 58-58: Don't use 'Function' as a type.

Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.

(lint/complexity/noBannedTypes)

⏰ Context from checks skipped due to timeout of 90000ms (1)

GitHub Check: test-fixtures (ubuntu-latest, dev, vite, async, manifest-on, json, 18)

🔇 Additional comments (39)

packages/nuxt/src/pages/plugins/page-meta.ts (1)

215-215: Enhanced language detection for parsing

The code now appends a file extension based on query.lang or defaults to .ts when parsing with parseAndWalk, which improves language-specific parsing accuracy.

packages/nuxt/test/component-names.test.ts (1)

45-45: Simplified transform method call

The transform call has been streamlined by directly passing the content and filepath parameters, removing unnecessary complexity. This aligns with the broader changes to parsing logic throughout the codebase.

packages/nuxt/test/composable-keys.test.ts (3)

42-42: Simplified transform method call

The transform call has been streamlined by directly passing the code and filepath parameters, removing unnecessary complexity around parsing setup.

50-50: Simplified transform method call

Transform method call now uses a direct approach without custom parsing logic.

58-58: Simplified transform method call

Transform method call now uses a direct approach without custom parsing logic.

packages/nuxt/test/route-rules.test.ts (2)

6-8: Function updated to synchronous usage.

This change aligns with the modification of extractRouteRules in the source file, which was converted from async to sync. The test now correctly calls the function without await.

45-54: Test coverage improved with additional example.

Good addition of a test case for defineRouteRules within a setup function, which increases test coverage for an important use case.

packages/nuxt/test/page-metadata.test.ts (16)

14-16: Function updated to synchronous usage.

The test case has been properly updated to call getRouteMeta synchronously, aligning with the changes in the implementation.

19-26: Removed await from the function call.

Test correctly updated to use the synchronous version of getRouteMeta, eliminating the async/await pattern.

29-42: Simplified function call.

Test updated to directly use the synchronous getRouteMeta function, improving code clarity.

44-55: Removed asynchronous handling.

Test properly updated to use the synchronous implementation of getRouteMeta, streamlining the test execution.

57-76: Decorator support test updated.

Test now correctly calls getRouteMeta synchronously, and it's good to see a test case specifically for experimental decorators which oxc-parser natively supports.

78-86: Cache testing updated to synchronous implementation.

Cache verification logic updated correctly to use the synchronous version of getRouteMeta.

89-93: State isolation test updated.

Test for verifying state isolation between calls to getRouteMeta updated to use the synchronous function.

95-135: Serialisable metadata extraction test updated.

Test correctly updated to use the synchronous version of getRouteMeta, maintaining the same validation logic.

137-170: Multiple blocks test updated.

Test for extracting metadata from files with multiple script blocks updated to use the synchronous implementation.

172-198: Options API test updated.

Test for extracting metadata in Options API context converted to synchronous implementation.

200-220: Quoted properties test updated.

Test for handling quoted properties in metadata updated to use synchronous implementation.

222-238: Extra meta extraction test updated.

Test for extracting configured extra metadata updated to use synchronous implementation.

242-286: Route normalization test updated.

Test for normalizing routes with extracted metadata updated to use the synchronous implementation of getRouteMeta.

552-587: Test for name preservation updated.

Test updated to use synchronous transformation, and the snapshot correctly reflects the expected output for parsing with oxc-parser.

590-614: Await expression error test updated.

Test for throwing errors on await expressions updated to call the transform function synchronously.

672-711: Reference identifiers test updated.

Snapshot test for reference identifiers updated to match the expected output from oxc-parser processing.

packages/nuxt/src/core/plugins/plugin-metadata.ts (2)

10-10: Updated import statement.

Explicitly importing parseAndWalk and withLocations from the parse utility for direct usage, improving code clarit 8000 y by showing direct dependencies.

41-49: Function converted from async to sync.

The extractMetadata function has been simplified by removing asynchronous handling. The function now directly processes the code using parseAndWalk instead of first transforming it, which streamlines the implementation and potentially improves performance.

packages/nuxt/src/pages/route-rules.ts (3)

7-7: Simplified import statement.

Updated import to only include parseAndWalk, removing the unused transform function, which aligns with the simplified implementation.

13-13: Function converted from async to sync.

The extractRouteRules function has been simplified by removing the asynchronous handling. This change improves code clarity and potentially performance by removing unnecessary promise handling.

29-33: Direct parsing of code.

The function now directly parses the original code using parseAndWalk instead of first transforming it. This simplifies the implementation and improves the extraction of the rulesString by slicing from the original source.

packages/nuxt/test/plugin-metadata.test.ts (3)

7-13: Well-organised test data structure

Extracting the test properties into a structured object makes the test more maintainable and allows for better parameterisation.

14-26: Good use of parameterised testing with it.each()

The refactoring from a traditional loop to a parameterised test with it.each() improves test readability and maintainability. This approach:

Makes each property test a separate test case

Provides better failure reporting (shows exactly which property failed)

Simplifies the test structure

Also, note that the extractMetadata call is now synchronous, matching the implementation changes in the core function.

39-39: Synchronous transform function usage aligns with implementation changes

The transform function is now being called synchronously, which is consistent with the changes to make parsing synchronous with the new oxc-parser.

packages/nuxt/src/core/utils/parse.ts (4)

3-4: Improved imports with oxc-parser adoption

The switch from Acorn to oxc-parser is a key change aligned with the PR objectives. Using named imports directly from estree and importing parseSync from oxc-parser makes the dependencies more explicit.

15-15: Type improvement using ThisParameterType

Nice update to use the built-in ThisParameterType utility type rather than a custom InferThis type.

24-35: Simplified walk implementation

The implementation is now cleaner with unnecessary type casting removed. This makes the code more readable while maintaining type safety.

41-44: Improved parseAndWalk implementation with oxc-parser

The refactored synchronous implementation:

Properly extracts the language type from filename

Uses parseSync from oxc-parser with appropriate parameters

Accesses and returns the AST through ast.program

This change aligns with the PR objective to transition from using Acorn to oxc-parser directly, which should improve performance and add native support for decorators.

packages/nuxt/src/pages/utils.ts (4)

14-14: Streamlined imports with removal of transform dependency

The removal of the transform import reflects the transition to direct parsing without transformation steps.

210-210: Function signature changed from async to sync

The getRouteMeta function has been updated to be synchronous, removing the Promise return type. This matches the changes in the underlying parsing utilities and should improve performance.

241-241: Direct usage of parseAndWalk without await

The synchronous call to parseAndWalk reflects the implementation change in the parsing utilities.

257-257: Using script.code directly without transformation

The code now uses script.code directly instead of transformed code, which aligns with the more direct parsing approach using oxc-parser.

danielroe self-assigned this Nov 27, 2024

danielroe added enhancement 3.x performance labels Nov 27, 2024

danielroe mentioned this pull request Nov 27, 2024

fix(nuxt): definePageMeta and others not work with vue-class-decorator and vue-facing-decorator #30025

Closed

snewell92 reviewed Nov 27, 2024

View reviewed changes

packages/nuxt/src/core/utils/parse.ts Outdated Show resolved Hide resolved

danielroe mentioned this pull request Nov 28, 2024

refactor(nuxt): simplify and improve core plugins that parse ast #30088

Merged

danielroe force-pushed the feat/oxc branch from 5aa0357 to 2fd904d Compare November 29, 2024 13:50

danielroe mentioned this pull request Dec 2, 2024

feat(kit,nuxt,schema): support experimental decorators syntax #27672

Merged

2 tasks

This comment was marked as outdated.

Sign in to view

Boshen mentioned this pull request Dec 11, 2024

unicode characters result in incorrect start/end values oxc-project/oxc#7508

Closed

Boshen added a commit to rolldown/rolldown that referenced this pull request Jan 18, 2025

feat(string_wizard): add .hasChanged()

688ff32

API: https://github.com/rich-harris/magic-string?tab=readme-ov-file#shaschanged impl: Rich-Harris/magic-string#202 part of nuxt/nuxt#30066 (comment)

Boshen mentioned this pull request Jan 18, 2025

feat(string_wizard): add .hasChanged() rolldown/rolldown#3379

Merged

Boshen added a commit to rolldown/rolldown that referenced this pull request Jan 18, 2025

feat(string_wizard): add .hasChanged()

b6e4f2c

API: https://github.com/rich-harris/magic-string?tab=readme-ov-file#shaschanged impl: Rich-Harris/magic-string#202 part of nuxt/nuxt#30066 (comment)

This comment was marked as outdated.

Sign in to view

feat(nuxt): use oxc-parser instead of esbuild + acorn

033b822

danielroe force-pushed the feat/oxc branch from d39e649 to 033b822 Compare February 26, 2025 15:02

test: update test

78c0701

danielroe marked this pull request as ready for review February 26, 2025 16:10

coderabbitai bot reviewed Feb 26, 2025

View reviewed changes

danielroe added 2 commits February 26, 2025 17:07

Merge branch 'main' into feat/oxc

e2ff647

Merge remote-tracking branch 'origin/main' into feat/oxc

eaffb04

danielroe merged commit dfc66be into main Mar 2, 2025
50 checks passed

danielroe deleted the feat/oxc branch March 2, 2025 08:36

danielroe added a commit that referenced this pull request Mar 2, 2025

feat(nuxt): use oxc-parser instead of esbuild + acorn (#30066)

c4e6e8c

This was referenced Mar 2, 2025

v4.0.0 #27716

Merged

v3.16.0 #30909

Merged

ghost mentioned this pull request Mar 8, 2025

definePageMeta try to process with ancorn ts code. Vue composables don't do so. #29790

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(nuxt): use `oxc-parser` instead of esbuild + acorn #30066

feat(nuxt): use `oxc-parser` instead of esbuild + acorn #30066

Uh oh!

Uh oh!

Uh oh!

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(nuxt): use oxc-parser instead of esbuild + acorn #30066

feat(nuxt): use oxc-parser instead of esbuild + acorn #30066

Uh oh!

Conversation

Uh oh!

🔗 Linked issue

📚 Description

🚧 TODO

Uh oh!

Uh oh!

Uh oh!

Walkthrough

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

CodSpeed Performance Report

Merging #30066 will not alter performance

Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

feat(nuxt): use `oxc-parser` instead of esbuild + acorn #30066

feat(nuxt): use `oxc-parser` instead of esbuild + acorn #30066

CodeRabbit Configuration File (`.coderabbit.yaml`)