Inspector v2: umd cdn (#17379)

This is a follow up to my initial umd package PR:
#17357

In the initial PR, the path I went was to redirect `inspector` to
`inspector-v2` in the context of the Inspector v2 build, since they
ultimately are the same package with different versions (v2 having the
`-prefix` suffix). This was simpler, but it turns out doesn't work with
the way we publish umd bundles to our cdn. For that, we need unique
entries in the package mappings, so now I've added a separate entry for
inspector-v2. This gets used by the prepareSnapshot script to determine
what gets copied to the cdn. The way I set it up is the inspector v2
bundle gets copied to the inspector directory, but with a new unique
name (babylon.inspector-v2.bundle.js). I tested the snapshot copy
locally, but in the process I noticed that we were copying
webpack.config.js files to the cdn (because they match the *.js glob).
For example: https://cdn.babylonjs.com/webpack.config.js. @docEdub - we
should probably try to figure out how to remove all these
webpack.config.js files from the cdn.

For now I'm making this PR draft so that I can verify the snapshot cdn
functionality before merging, and also I don't want to touch any cdn
publishing related stuff on a Friday afternoon. :)

Author: ryantrem

packages/dev/buildTools/src/packageMapping.ts

@@ -11,6 +11,7 @@ export type DevPackageName =
     | "loaders"
     | "serializers"
     | "inspector"
+    | "inspector-v2"
     | "post-processes"
     | "procedural-textures"
     | "node-editor"
@@ -33,6 +34,7 @@ export type UMDPackageName =
     | "babylonjs-materials"
     | "babylonjs-procedural-textures"
     | "babylonjs-inspector"
+    | "babylonjs-inspector-v2"
     | "babylonjs-node-editor"
     | "babylonjs-node-geometry-editor"
     | "babylonjs-node-render-graph-editor"
@@ -124,6 +126,11 @@ export const umdPackageMapping: { [key in UMDPackageName]: { baseDir: string; ba
         baseFilename: "babylon.inspector",
         isBundle: true,
     },
+    "babylonjs-inspector-v2": {
+        baseDir: "inspector",
+        baseFilename: "babylon.inspector-v2",
+        isBundle: true,
+    },
     "babylonjs-node-editor": {
         baseDir: "nodeEditor",
         baseFilename: "babylon.nodeEditor",
@@ -197,6 +204,7 @@ const packageMapping: {
         loaders: "babylonjs-loaders",
         serializers: "babylonjs-serializers",
         inspector: "babylonjs-inspector",
+        "inspector-v2": "babylonjs-inspector-v2",
         "node-editor": (_filePath?: string) => {
             // if (filePath && filePath.indexOf("sharedUiComponents") !== -1) {
             //     return "babylonjs-shared-ui-components";
@@ -244,6 +252,7 @@ const packageMapping: {
         loaders: "@babylonjs/loaders",
         serializers: "@babylonjs/serializers",
         inspector: "@babylonjs/inspector",
+        "inspector-v2": "@babylonjs/inspector",
         "node-editor": "@babylonjs/node-editor",
         "node-geometry-editor": "@babylonjs/node-geometry-editor",
         "node-render-graph-editor": "@babylonjs/node-render-graph-editor",
@@ -266,6 +275,7 @@ const packageMapping: {
         loaders: "@babylonjs/esm",
         serializers: "@babylonjs/esm",
         inspector: "@babylonjs/esm",
+        "inspector-v2": "@babylonjs/esm",
         "node-editor": "@babylonjs/esm",
         "node-geometry-editor": "@babylonjs/esm",
         "node-render-graph-editor": "@babylonjs/esm",
@@ -333,6 +343,18 @@ const packageMapping: {
             }
             return "INSPECTOR";
         },
+        "inspector-v2": (filePath?: string) => {
+            filePath = filePath?.replaceAll("\\", "/");
+            if (filePath) {
+                if (filePath.includes("shared-ui-components/") || filePath.includes("/sharedUiComponents/")) {
+                    // was .endsWith
+                    return "INSPECTOR.SharedUIComponents";
+                } else if (filePath.includes("babylonjs-gltf2interface")) {
+                    return "BABYLON.GLTF2";
+                }
+            }
+            return "INSPECTOR";
+        },
         "node-editor": (filePath?: string) => {
             filePath = filePath?.replaceAll("\\", "/");
             if (filePath) {

packages/dev/buildTools/src/prepareSnapshot.ts

@@ -12,7 +12,7 @@ export const prepareSnapshot = () => {
     Object.keys(umdPackageMapping).forEach((packageName) => {
         const metadata = umdPackageMapping[packageName as UMDPackageName];
         const corePath = path.join(baseDirectory, "packages", "public", "umd", packageName);
-        const coreUmd = globSync(`${corePath}/*+(.js|.d.ts|.map)`);
+        const coreUmd = globSync(`${corePath}/*+(.js|.d.ts|.map)`).filter((file) => path.basename(file) !== "webpack.config.js");
         for (const file of coreUmd) {
             copyFile(file, path.join(snapshotDirectory, metadata.baseDir, path.basename(file)), true);
         }

packages/public/umd/babylonjs-inspector-v2/src/index.ts

@@ -1,3 +1,3 @@
-import * as inspector from "inspector/legacy/legacy";
+import * as inspector from "inspector-v2/legacy/legacy";
 export { inspector };
 export default inspector;

packages/public/umd/babylonjs-inspector-v2/tsconfig.build.json

@@ -4,10 +4,7 @@
     "compilerOptions": {
         "outDir": "./dist",
         "rootDir": "./src",
-        "declaration": false,
-        "paths": {
-            "inspector/*": ["dev/inspector-v2/dist/*"]
-        }
+        "declaration": false
     },
     "include": ["./src/**/*"]
 }

packages/public/umd/babylonjs-inspector-v2/tsconfig.json

@@ -1,8 +1,3 @@
 {
-    "extends": "../../../../tsconfig.json",
-    "compilerOptions": {
-        "paths": {
-            "inspector/*": ["dev/inspector-v2/src/*"]
-        }
-    }
+    "extends": "../../../../tsconfig.json"
 }

packages/public/umd/babylonjs-inspector-v2/webpack.config.js

@@ -5,8 +5,7 @@ module.exports = (env) => {
     const commonConfig = commonConfigGenerator({
         mode: env.production ? "production" : "development",
         devPackageAliasPath: `../../../dev/inspector-v2/dist`,
-        devPackageName: "inspector",
-        overrideFilename: "babylon.inspector-v2",
+        devPackageName: "inspector-v2",
         namespace: "INSPECTOR",
         outputPath: path.resolve(__dirname),
         maxMode: true,