Virtual fix for ember-inspector

[BlueCutOfficial]

Fixes #2484

Context

As part of the Ember Initiative, @mansona and I are trying to get ember-inspector to work for Vite apps. In the big lines, this support will imply that ember.js exposes a new Vite-compatible API for tools like the inspector, and the inspector should use this API instead of importing globally exposed things as it does now.

However, Vite is available from Ember 3.28 to the latest, and we need the inspector to work for these versions.

We want to bring Vite compatibility to the pieces of the ecosystem that weren't designed for it. In other words, what we implement here is a "compat" piece. It's not about how the inspector should work in the future in a perfect world; it's about unblocking the inspector for people who use Vite from Ember 3.28 to [whatever version will have the future API that is not designed yet].

Changes

As it is now, the Ember Inspector relies on AMD modules that are made available globally, so we replace that with ESM modules that are made available globally. We think it’s a reasonable thing to do to make the bridge between old things and Vite world in a somewhat time-sensitive context (compatibility should work before Vite becomes the default experience).

This PR introduces a Vite plugin called inspectorSupport(). It's executed with the other ember() plugins that are part of the "Vite for Ember" config.

This plugin provides a virtual file that can be imported (or not) into app.js. When it's imported and its default function is called, the global emberInspectorApps becomes available and can be used by the Ember Inspector. If the Ember Inspector starts to run, it will load the ES modules listed in the load() function to retrieve the information about the app, an "equivalent" way to do what it currently does when it inspects a classic app with AMD.

💡 The script we need here contains a list of imports that make sense in the context of the app. That's why we choose to approach this in a virtual file, so the imports are analysed by the build system in a context that makes sense.

How to test

• Serve the app-template on http://localhost:4200/
• Clone mainmatter/ember-inspector and switch to vite-support branch
• Follow the section of ember-inspector's README about pnpm serve:bookmarklet to run the local inspector against http://localhost:4200/

👀 The Inspector should load correctly, and you should see the component tree in the window.

---

About a build mode issue (probably unrelated to the PR)

When building the app to inspect with pnpm build, the component tree window is blank, and the app console shows the error Cannot read properties of undefined (reading '_debugRenderTree') (See ember_debug/libs/render-tree.js). This issue happens with the app-template (5.12), but not with a 4.12 app importing a ./compat-inspector-support file. There's still differences in the information on screen:

Build:

Local:

[mansona]

So looking at this PR I figured it looked strange that a virtual file would have a namespace that really exists in a ember-source 🤔 and also one that we expect to make a real file in some future version of ember-source

I know I kept saying "Virtual file" when we talked about this but with the fact that it's something that could change with different Ember versions and exists in a real namespace I think we should add this to the ember-source compat adapter

I'm pretty sure the replaceFile() function that I created should be able to create new files 🤔 https://github.com/embroider-build/embroider/blob/main/packages/compat/src/compat-adapters/ember-source.ts#L320C5-L320C16

[patricklx]

hi, I saw that this work started 👍
also consider possible race conditions for the loading part.
especially when a window is reloaded and inspector was already opended, the order of script loading is not guaranteed .
so inspector debug inject vs ember app scripts.
in previous ember source there was a dispatched event ember, which inspector uses

[mansona]

@patricklx yes that was at the bottom of the barrel file which is now deprecated, likely won't be included if you're using vite and will be removed in Ember 7 👍 so we can't rely on that for our architecture

[patricklx]

Here is also a similar implementation directly in ember.js.
It contains the full list of all used classes and functions used by inspector.

https://github.com/emberjs/ember.js/pull/20580/files

[BlueCutOfficial]

Closing in favor of #2520
EDIT: #2520 closed in favor of this one again 🙈