Inspector v2: Test app (#16732)

This PR introduces a test app for local development of Inspector v2. It
uses webpack, but a newer version than our other tools which is needed
for compatibility with the webpack React fast refresh plugin (which is a
new local dev only dependency). The simple test app just loads a model,
and also enables drag & drop to easily test other models. Inspector is
always open, and fast refresh is supported so as you make changes to
React components, you immediately see them in the test app, without
reloading the page or re-creating the scene. You can run and debug the
test app from VSCode by just running the new "Inspector v2 development
(Chrome)" launch command. This enables a very tight dev loop. Hopefully
in the future we can see what it would take to bring fast refresh to
other tools, like Sandbox and Playground, but for now this is a low cost
solution to help speed up Inspector v2 development.

Author: ryantrem

.vscode/launch.json

@@ -512,15 +512,18 @@
             "preLaunchTask": "Viewer Test App (Web)"
         },
         {
-            /*
-            Viewer configurator development - meant for development of the playground
-            It doesn't set any source code watchers!
-            */
             "type": "chrome",
             "request": "launch",
             "name": "Viewer Configurator development (Chrome)",
             "url": "http://localhost:3003",
             "preLaunchTask": "Viewer Configurator Serve (Dev)"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Inspector v2 development (Chrome)",
+            "url": "http://localhost:9001",
+            "preLaunchTask": "Inspector v2 Test App"
         }
     ],
     "inputs": [

.vscode/tasks.json

@@ -309,7 +309,7 @@
             "label": "Sandbox Serve (Dev)",
             "type": "shell",
             "command": "npm",
-            "dependsOn": "CDN Serve and watch (Dev)",
+            "dependsOn": ["CDN Serve and watch (Dev)", "Watch Inspector v2"],
             "runOptions": {
                 "instanceLimit": 1
             },
@@ -566,6 +566,38 @@
                 "group": "serve"
             },
             "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
+        },
+        {
+            "label": "Watch Inspector v2",
+            "type": "shell",
+            "command": "npm",
+            "runOptions": {
+                "instanceLimit": 1
+            },
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "args": ["run", "watch:dev", "-w", "@dev/inspector-v2"],
+            "isBackground": true,
+            "problemMatcher": ["$tsc-watch"]
+        },
+        {
+            "label": "Inspector v2 Test App",
+            "dependsOn": ["Watch all (Dev)"],
+            "type": "shell",
+            "command": "npm",
+            "runOptions": {
+                "instanceLimit": 1
+            },
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "args": ["run", "serve", "-w", "@dev/inspector-v2"],
+            "isBackground": true,
+            "presentation": {
+                "group": "serve"
+            },
+            "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
         }
     ],
     "inputs": [

package-lock.json

@@ -11,6 +11,7 @@
         "test": "jest -c ../../../jest.config.ts",
         "clean": "rimraf dist && rimraf *.tsbuildinfo -g",
         "compile": "tsc -b tsconfig.build.json",
+        "serve": "webpack serve --mode development",
         "watch": "tsc -b tsconfig.build.json -w",
         "watch:dev": "npm run watch"
     },
@@ -19,8 +20,14 @@
         "@dev/loaders": "1.0.0",
         "@fluentui/react-components": "^9.62.0",
         "@fluentui/react-icons": "^2.0.271",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
+        "html-webpack-plugin": "^5.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "usehooks-ts": "^3.1.1"
+        "react-refresh": "^0.17.0",
+        "react-refresh-typescript": "^2.0.10",
+        "usehooks-ts": "^3.1.1",
+        "webpack": "^5.98.0",
+        "webpack-cli": "^5.1.0"
     }
 }

packages/dev/inspector-v2/package.json

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Inspector v2 Test App</title>
+
+        <style>
+            html,
+            body,
+            canvas {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="canvas"></canvas>
+        <script type="module" src="bundle.js"></script>
+    </body>
+</html>

packages/dev/inspector-v2/test/app/index.html

@@ -0,0 +1,67 @@
+// eslint-disable-next-line import/no-internal-modules
+import type { ArcRotateCamera, Nullable } from "core/index";
+
+import { Engine } from "core/Engines/engine";
+import { LoadAssetContainerAsync } from "core/Loading/sceneLoader";
+import { Scene } from "core/scene";
+import { registerBuiltInLoaders } from "loaders/dynamic";
+
+import { ShowInspector } from "../../src/inspector";
+
+import "core/Helpers/sceneHelpers";
+
+// Register scene loader plugins.
+registerBuiltInLoaders();
+
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+
+const engine = new Engine(canvas, true, {
+    adaptToDeviceRatio: true,
+    antialias: true,
+});
+
+const scene = new Scene(engine);
+
+let camera: Nullable<ArcRotateCamera> = null;
+
+function createCamera() {
+    camera?.dispose();
+    scene.createDefaultCameraOrLight(true, true, true);
+    camera = scene.activeCamera as ArcRotateCamera;
+    camera.alpha = Math.PI / 2;
+}
+
+(async () => {
+    let assetContainer = await LoadAssetContainerAsync("https://assets.babylonjs.com/meshes/Demos/optimized/acrobaticPlane_variants.glb", scene);
+    assetContainer.addAllToScene();
+    createCamera();
+
+    engine.runRenderLoop(() => {
+        scene.render();
+    });
+
+    canvas.addEventListener("dragover", (event) => {
+        event.preventDefault();
+    });
+
+    let isDropping = false;
+    canvas.addEventListener("drop", async (event) => {
+        if (!isDropping) {
+            const file = event.dataTransfer?.files[0];
+            if (file) {
+                event.preventDefault();
+                isDropping = true;
+                try {
+                    assetContainer.removeAllFromScene();
+                    assetContainer = await LoadAssetContainerAsync(file, scene);
+                    assetContainer.addAllToScene();
+                    createCamera();
+                } finally {
+                    isDropping = false;
+                }
+            }
+        }
+    });
+})();
+
+ShowInspector(scene);

packages/dev/inspector-v2/test/app/index.ts

@@ -1,5 +1,5 @@
 {
-    "extends": "../../../tsconfig.build.json",
+    "extends": ["../../../tsconfig.build.json", "./tsconfig.common.json"],
 
     "compilerOptions": {
         "outDir": "./dist",

packages/dev/inspector-v2/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    }
+}

packages/dev/inspector-v2/tsconfig.common.json

@@ -1,5 +1,5 @@
 {
-    "extends": "../../../tsconfig.json",
+    "extends": ["../../../tsconfig.json", "./tsconfig.common.json"],
 
     "compilerOptions": {
         "strict": true,