build: reinstate ESM browser builds

[skirtles-code]

vue-router.esm-browser.js and vue-router.esm-browser.prod.js are missing from Vue Router 4.6.0. This PR brings them back.

These files are used when importing directly from a CDN.

It is possible to use vue-router.mjs directly in the browser, but it requires polyfills. vue-router.esm-browser.js removes references to process.env and __VUE_PROD_DEVTOOLS__, so it can be used without those polyfills.

vue-router.esm-browser.prod.js has dev-only code removed, is minified, and has no dependency on @vue/devtools-api.

See also #2569 (comment).

Summary by CodeRabbit

• New Features
  • Added browser-targeted ESM bundles for direct use in modern browsers and CDNs.
  • Included both a development build (with development flags enabled) and a minified production build (development flags disabled) for optimized performance.
  • Improves flexibility for loading the router without bundlers and enhances compatibility with ESM-based workflows.

[netlify]

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	df4444b
🔍 Latest deploy log	https://app.netlify.com/projects/vue-router/deploys/68f069b93ba6c20008d457b3

[coderabbitai]

Walkthrough

Added two new build configurations, esmBrowser and esmBrowserProd, derived from esm, adjusting output filenames, dev flags, and minification. Updated the default export array to include these configurations alongside existing esm, cjs, and iife builds.

Changes

Cohort / File(s)	Summary
Build configurations packages/router/tsdown.config.ts	Added esmBrowser (ESM for browsers, dist/vue-router.esm-browser.js, DEV true) and esmBrowserProd (minified, dist/vue-router.esm-browser.prod.js, DEV false). Included both in the exported build configs array (order: esm, esmBrowser, esmBrowserProd, cjs, cjsProd, iife, iifeProd).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nudge new builds with whiskered care,
Two browser paths now scent the air—
One for play, one sleek for prod,
Hops between flags I softly prod.
In dist I leave my tiny trace,
ESM crumbs for every place. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "build: reinstate ESM browser builds" directly aligns with the main change in the changeset. The PR modifies the tsdown.config.ts file to add two new build configurations (esmBrowser and esmBrowserProd) that restore the missing ESM browser build outputs for Vue Router, which is exactly what the title describes. The title is concise, clear, specific, and uses conventional commit message formatting with the "build:" prefix. It effectively communicates the primary purpose of the change without unnecessary verbosity or vague terminology.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 4dd6544 and df4444b.

📒 Files selected for processing (1)

• packages/router/tsdown.config.ts (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build

🔇 Additional comments (4)

packages/router/tsdown.config.ts (4)

66-78: LGTM! Correct pattern for ESM browser dev build.

The configuration correctly:

• Sets hardcoded boolean string values for __DEV__ and __FEATURE_PROD_DEVTOOLS__ instead of using process.env or __VUE_PROD_DEVTOOLS__, enabling direct browser usage without polyfills
• Follows the same pattern as the iife dev build (lines 131-132)
• Uses dir: undefined with file for single-file output

---

80-92: LGTM! Correct pattern for ESM browser production build.

The configuration correctly:

• Extends esmBrowser and enables minification for production
• Sets both dev flags to 'false' as hardcoded strings for browser compatibility
• With __FEATURE_PROD_DEVTOOLS__: 'false', tree-shaking will remove unused @vue/devtools-api code, achieving the "no dependency on @vue/devtools-api" goal stated in the PR objectives

---

150-159: LGTM! Logical build configuration ordering.

The new configurations are properly added to the export array with logical grouping: ESM builds (esm, esmBrowser, esmBrowserProd), followed by CJS builds, then IIFE builds.

---

66-92: Browser build verification must be performed in your local environment or CI/CD pipeline.

The requested verification cannot be completed in the sandbox environment (which lacks compilers and build tooling). Before merging, please confirm locally that:

1. The ESM browser builds (dist/vue-router.esm-browser.js and dist/vue-router.esm-browser.prod.js) compile successfully and can be imported directly in browsers
2. The production build contains no process.env or @vue/devtools-api references
3. The __DEV__ and __FEATURE_PROD_DEVTOOLS__ constants are correctly replaced during the build

Run your build command and inspect the output files to verify these conditions hold.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vue-router@2572

commit: df4444b

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.02%. Comparing base (4dd6544) to head (df4444b).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2572   +/-   ##
=======================================
  Coverage   91.02%   91.02%           
=======================================
  Files          46       46           
  Lines        4179     4179           
  Branches     1111     1111           
=======================================
  Hits         3804     3804           
  Misses        368      368           
  Partials        7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[posva]

Thanks a lot!