Inspector bundle is not complete

Bugs
1

babylon inspector bundle at https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js used to be a a bundle, but since inspector was refactored, it now has external dependencies that need to be accounted for - i suggest rebuilding bundle with those dependencies.

@babylonjs/gui, @babylonjs/gui-editor, @babylonjs/loaders, @babylonjs/materials, @babylonjs/serializers

btw, btw, creating a working bundle was trivial - running this through bundler to create ../dist/inspector.js:

export * from '@babylonjs/inspector';

and then use it with

BABYLON.DebugLayer.InspectorURL = '../dist/inspector.js';

whole point is that inspector bundle is 2x app size itself,
so i’d prefer to lazy-load it on-demand when scene.debugLayer.show is called

2

cc @RaananW (please be patient as he’s OOF)

3

no rush, i have a working solution, just following up so bundle on cdn is usable.

4

It is still a bundle, it needs the extra dependencies for some of is internal functionnalities. They are also all available on the CDN and you could lazy load them as well before the inspector only when you are trying to display the inspector I believe.

Embedding them in would break if ppl required the dependencies as well in their own app by having 2 versions of them.

Before, I believe we used a hackish solution to not have them mandatory and feature test everywhere and I totally understand why this could be more convenient.

Maybe @RaananW has a nice trick to lazy load them as well from the inspector package ?

1 Like
5

i understand how/why, but it is a convenience thing - currently to use external bundle is a bit cumbersome.

1 Like
6

Yeah, that’s an interesting issue :slight_smile:

There are a few issues here TBH - one is the direct dependencies in package.json (for example the GUI Editor, which is not being used by all inspector users for sure), the other one is async-loading them instead of importing them as being done right now. I will be happy to investigate a better way of doing that, but there are some limitations, because of the way we are packing and delivering.
Assigning to me, i’ll investigate.

8

ok, finally got some time to read through and investigate.

The bundle you are referring to is the UMD version, and it is expected that the dependencies (like the GUI lib) be loaded using UMD/in browser beforehand. So in your case, you could async-load those UMD dependencies together with the inspector, or not load them at all. The GUI Editor is the one exception - it is loaded async if it is not found in the global namespace.

But - if you work with a bundler and using our ES6 packages, there is no need to do all of this. Running this code will be enough:

const inspector = await import('@babylonjs/inspector');
        inspector.Inspector.Show(this.m_scene, {
            // options
        });

Your bundler will know what to do.