Skip to content

fix(bundler): resolve devtools bridge and UI assets from package root#768

Merged
harlan-zw merged 1 commit into
mainfrom
fix/devtools-bridge-path-resolution
Jun 5, 2026
Merged

fix(bundler): resolve devtools bridge and UI assets from package root#768
harlan-zw merged 1 commit into
mainfrom
fix/devtools-bridge-path-resolution

Conversation

@harlan-zw

@harlan-zw harlan-zw commented Jun 5, 2026

Copy link
Copy Markdown
Collaborator

🔗 Linked issue

Related to #764

❓ Type of change

  • 📖 Documentation
  • 🐞 Bug fix
  • 👌 Enhancement
  • ✨ New feature
  • 🧹 Chore
  • ⚠️ Breaking change

📚 Description

The devtools Vite plugin resolved its bridge script and UI assets relative to import.meta.url, assuming the code runs from dist/vite.mjs. unbuild code-splits the plugin into dist/shared/bundler.*.mjs, so at runtime new URL('..', import.meta.url) pointed at dist/ instead of the package root. That made bridgePath resolve to dist/dist/devtools/bridge.mjs (served the [unhead devtools] bridge not built warning) and devtoolsUiDir resolve to dist/shared/devtools-ui (blank devtools panel).

vite.ts now finds the package root by walking up to the nearest package.json, so paths resolve correctly regardless of which chunk the code lands in (dist/vite.mjs, dist/shared/*.mjs, or stubbed src). The unhead version lookup had the same fragility (it read a nested node_modules/unhead/package.json that does not exist under hoisted/pnpm installs); it now resolves the unhead entry via createRequire and walks up to its package root.

Verified against the reported setup (@unhead/vue + @vitejs/devtools, vite dev): /@unhead/bridge.mjs serves real bridge code, the /__unhead/ panel returns 200, and the bridge reports the correct unhead version. All 81 bundler tests pass.

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced devtools path resolution reliability for various bundled distributions
    • Improved version metadata detection accuracy

@coderabbitai

coderabbitai Bot commented Jun 5, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 49435991-f01e-4f60-adbe-95afa504ee3a

📥 Commits

Reviewing files that changed from the base of the PR and between ce7f616 and 71242d5.

📒 Files selected for processing (1)
  • packages/bundler/src/devtools/vite.ts

📝 Walkthrough

Walkthrough

This PR introduces dynamic package-relative path resolution to the devtools plugin. A new findPkgRoot() utility walks up the directory tree to locate package.json, enabling the devtools UI asset path and unhead version metadata to be computed at runtime rather than relying on fixed relative assumptions that could break under different bundler layouts.

Changes

Path Resolution Infrastructure

Layer / File(s) Summary
Package root discovery utility and imports
packages/bundler/src/devtools/vite.ts
Node core imports (createRequire, path utilities) added to support runtime module and filesystem resolution. New findPkgRoot(fromUrl) helper walks upward from a given file URL to find the nearest package.json, providing the foundation for reliable path computation.
Apply package root resolution to devtools paths and version metadata
packages/bundler/src/devtools/vite.ts
Devtools UI asset directory now derives from findPkgRoot(import.meta.url) targeting dist/devtools-ui, and unhead version is resolved by locating unhead's entry point via createRequire().resolve() then reading its package.json via the same findPkgRoot() pattern, with silent fallback on failure.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🐰 A helper hops upward with grace,
Finding package.json in its place,
Devtools now wander with certainty true,
No fixed paths assumed—just filesystem clues! 🌲

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely summarizes the main change: fixing devtools bridge and UI asset resolution from the package root, which is the primary objective of the PR.
Description check ✅ Passed The description includes all required template sections: linked issue, type of change (bug fix selected), and detailed explanation of the problem and solution.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/devtools-bridge-path-resolution

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Bundle Size Analysis

Bundle Size Gzipped
Client (Minimal) 10.8 kB 4.4 kB
Server (Minimal) 10.7 kB 4.3 kB
Vue Client (Minimal) 11.8 kB 4.9 kB
Vue Server (Minimal) 11.7 kB 4.8 kB

@harlan-zw harlan-zw merged commit 78bcbba into main Jun 5, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant