feat: support Vite 8 bundledDev mode for virtual modules#136
feat: support Vite 8 bundledDev mode for virtual modules#136rlorenzo wants to merge 1 commit intowebfansplz:mainfrom
Conversation
There was a problem hiding this comment.
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.bundledDevinconfigResolvedand 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 disabletransformIndexHtmlinjection 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.
There was a problem hiding this comment.
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
configResolvedand disabletransformIndexHtmlinjection when active. - Parse HTML entry files (including MPA via
rollupOptions.input) to discover module entrypoints for injection. - Inject the inspector loader import via the
transformhook 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.
There was a problem hiding this comment.
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.bundledDevinconfigResolvedand disabletransformIndexHtmlinjection 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 keepingappendTobehavior 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.
There was a problem hiding this comment.
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.bundledDevinconfigResolvedand 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
transformIndexHtmlinjection whenbundledDevis 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.
There was a problem hiding this comment.
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.bundledDevinconfigResolvedand disabletransformIndexHtmlinjection when active. - Parse configured HTML entrypoints (
build.rollupOptions.input, falling back toindex.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.
|
@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. |
| if (isBundledDev && !appendTo) { | ||
| // Find HTML entry files from rollupOptions.input or default index.html | ||
| let htmlFiles: string[] = [] | ||
| const inputs = resolvedConfig.build?.rollupOptions?.input |
There was a problem hiding this comment.
Not sure about this, since Vite8 uses Rolldown, maybe we should replace it with better option?
b6a09e8 to
a06c6b7
Compare
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.
a06c6b7 to
612f568
Compare
|
@webfansplz I reworked the patch so it is much simpler and still works on Vite 8's full bundle mode. |
There was a problem hiding this comment.
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
appendToRegExplastIndexbeforetest()to avoid skipped matches with/g(or/y) regexes. - Switch
transformIndexHtmlto 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.
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 linkto 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.