Skip to content

feat: support Vite 8 bundledDev mode for virtual modules#136

Open
rlorenzo wants to merge 1 commit intowebfansplz:mainfrom
rlorenzo:support-vite-8-bundle-mode
Open

feat: support Vite 8 bundledDev mode for virtual modules#136
rlorenzo wants to merge 1 commit intowebfansplz:mainfrom
rlorenzo:support-vite-8-bundle-mode

Conversation

@rlorenzo
Copy link
Copy Markdown

@rlorenzo rlorenzo commented Mar 14, 2026

Use an inline import with order:'pre' in transformIndexHtml so Vite's HTML pipeline picks up the inspector module before bundling.

Also, reset appendTo regex lastIndex before test() to prevent skipped matches when a global-flag regex is used.

Testing

I built and added this to my Vite 8 project using npm link to test the plugin code locally. I was able to launch Vue Inspector on my SPA pages in full bundle mode. I also tested backward compatibility with Vite 7, and it still worked.

Copilot AI review requested due to automatic review settings March 14, 2026 03:32
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds support for Vite 8 experimental.bundledDev by switching inspector injection from transformIndexHtml to module-level injection for the HTML entry scripts (so the inspector still loads when /@id/ URLs aren’t served from the bundled dev output).

Changes:

  • Detect experimental.bundledDev in configResolved and collect HTML entry module targets.
  • Parse HTML inputs (including MPA via build.rollupOptions.input) to find <script type="module" src="..."> entrypoints.
  • Inject the inspector loader import via transform() for those entry modules, and disable transformIndexHtml injection in bundledDev mode.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/core/src/index.ts Outdated
Comment thread packages/core/src/index.ts Outdated
Comment thread packages/core/src/index.ts Outdated
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds support for Vite 8’s experimental.bundledDev mode by switching inspector injection away from transformIndexHtml and into transformed HTML entry modules so the virtual module import is bundled correctly in bundled dev.

Changes:

  • Track bundled dev mode via configResolved and disable transformIndexHtml injection when active.
  • Parse HTML entry files (including MPA via rollupOptions.input) to discover module entrypoints for injection.
  • Inject the inspector loader import via the transform hook for detected entry modules when bundled dev is enabled.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/core/src/index.ts Outdated
Comment thread packages/core/src/index.ts Outdated
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Vite 8 experimental.bundledDev compatibility by switching inspector injection from transformIndexHtml (which relies on /@id/ URLs) to transform() injection into HTML entry modules when bundled dev bundling is enabled.

Changes:

  • Detect experimental.bundledDev in configResolved and disable transformIndexHtml injection in that mode.
  • Parse HTML entry files (including MPA via build.rollupOptions.input) to find module entry scripts and cache their resolved file paths.
  • Inject the inspector loader import in transform() when the transformed module matches an HTML entry module (bundledDev mode), while keeping appendTo behavior intact.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/core/src/index.ts Outdated
Comment thread packages/core/src/index.ts Outdated
Comment thread packages/core/src/index.ts Outdated
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds support for Vite 8’s experimental bundledDev mode by changing how the inspector client is injected when /@id/ URLs aren’t available from the Rolldown memory bundle.

Changes:

  • Detect experimental.bundledDev in configResolved and switch injection strategy accordingly.
  • Parse HTML entry files (including MPA inputs) to find module entry scripts and inject via transform() into those entry modules.
  • Disable transformIndexHtml injection when bundledDev is active.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/core/src/index.ts Outdated
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the core Vite plugin to support Vite 8’s experimental.bundledDev mode by switching inspector injection from HTML tag injection (transformIndexHtml) to module-level injection (transform) for HTML entry modules, since /@id/ URLs aren’t served in bundledDev.

Changes:

  • Detect experimental.bundledDev in configResolved and disable transformIndexHtml injection when active.
  • Parse configured HTML entrypoints (build.rollupOptions.input, falling back to index.html) to discover module entry scripts.
  • Inject the inspector import via transform() for discovered HTML entry modules in bundledDev mode.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/core/src/index.ts Outdated
Comment thread packages/core/src/index.ts Outdated
@rlorenzo
Copy link
Copy Markdown
Author

@webfansplz Any chance this can get integrated? Right now, I am removing this plugin from my app that uses Full Bundle mode for Vite 8, but I would love to add it back. Very useful.

Comment thread packages/core/src/index.ts Outdated
if (isBundledDev && !appendTo) {
// Find HTML entry files from rollupOptions.input or default index.html
let htmlFiles: string[] = []
const inputs = resolvedConfig.build?.rollupOptions?.input
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about this, since Vite8 uses Rolldown, maybe we should replace it with better option?

@rlorenzo rlorenzo force-pushed the support-vite-8-bundle-mode branch from b6a09e8 to a06c6b7 Compare March 20, 2026 06:54
Use an inline import with order:'pre' in transformIndexHtml so Vite's
HTML pipeline picks up the inspector module before bundling. This works
in both normal dev and Vite 8 bundledDev mode without any special
entry-point detection logic.

Also reset appendTo regex lastIndex before test() to prevent skipped
matches when a global-flag regex is used.
@rlorenzo rlorenzo force-pushed the support-vite-8-bundle-mode branch from a06c6b7 to 612f568 Compare March 20, 2026 07:01
@rlorenzo
Copy link
Copy Markdown
Author

@webfansplz I reworked the patch so it is much simpler and still works on Vite 8's full bundle mode.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Vite 8 “bundledDev” compatibility for loading the inspector virtual module earlier in Vite’s HTML pipeline, and hardens appendTo handling when a global/sticky regex is provided.

Changes:

  • Reset appendTo RegExp lastIndex before test() to avoid skipped matches with /g (or /y) regexes.
  • Switch transformIndexHtml to an { order: 'pre', handler } form and inject an inline module import so Vite’s HTML processing sees the inspector module before bundling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/core/src/index.ts
Comment thread packages/core/src/index.ts
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.

3 participants