Needed changes to enable the inspector on the viewer

packages/dev/buildTools/src/webpackTools.ts

@@ -97,7 +97,7 @@ export const getRules = (
         rules.push(
             {
                 sideEffects: options.sideEffects,
-                test: /(?<!modules)\.s[ac]ss$/i,
+                test: /(?<!module)\.s[ac]ss$/i,
                 use: [
                     "style-loader",
                     {
@@ -117,7 +117,7 @@ export const getRules = (
             },
             {
                 sideEffects: options.sideEffects,
-                test: /\.modules\.s[ac]ss$/i,
+                test: /\.module\.s[ac]ss$/i,
                 use: [
                     "style-loader",
                     {

packages/dev/inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor/graph/keyPoint.tsx

@@ -7,9 +7,9 @@ import * as React from "react";
 import type { Context } from "../context";
 import type { Curve } from "./curve";
 
-const keyInactive = require("../assets/keyInactiveIcon.svg") as string;
-const keySelected = require("../assets/keySelectedIcon.svg") as string;
-const keyActive = require("../assets/keyActiveIcon.svg") as string;
+import keyInactive from "../assets/keyInactiveIcon.svg";
+import keySelected from "../assets/keySelectedIcon.svg";
+import keyActive from "../assets/keyActiveIcon.svg";
 
 interface IKeyPointComponentProps {
     x: number;

packages/dev/inspector/src/components/embedHost/embedHostComponent.tsx

@@ -7,7 +7,7 @@ import type { Scene } from "core/scene";
 import type { GlobalState } from "../../components/globalState";
 import type { IExplorerExtensibilityGroup, DebugLayerTab, IExplorerAdditionalNode } from "core/Debug/debugLayer";
 
-const Split = require("split.js").default;
+import Split from "split.js";
 
 const ResizableCasted = Resizable as any as React.ComponentClass<any>;
 
@@ -47,7 +47,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
             return;
         }
 
-        Split([this._topPartRef.current, this._bottomPartRef.current], {
+        Split([this._topPartRef.current!, this._bottomPartRef.current!], {
             direction: "vertical",
             minSize: [200, 200],
             gutterSize: 4,

packages/dev/inspector/src/inspector.ts

@@ -64,28 +64,36 @@ export class Inspector {
         this._GlobalState.selectedLineContainerTitles.push(...titles);
     }
 
-    private static _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument) {
-        for (let index = 0; index < sourceDoc.styleSheets.length; index++) {
-            const styleSheet: any = sourceDoc.styleSheets[index];
+    private static _CopyStyles(source: Document, target: DocumentOrShadowRoot) {
+        for (let index = 0; index < source.styleSheets.length; index++) {
+            const styleSheet: any = source.styleSheets[index];
 
             try {
                 if (styleSheet.cssRules) {
                     // for <style> elements
-                    const newStyleEl = sourceDoc.createElement("style");
+                    const newStyleEl = source.createElement("style");
 
                     for (const cssRule of styleSheet.cssRules) {
                         // write the text of each rule into the body of the style element
-                        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
+                        newStyleEl.appendChild(source.createTextNode(cssRule.cssText));
                     }
 
-                    targetDoc.head!.appendChild(newStyleEl);
+                    if ((target as Document).head) {
+                        (target as Document).head.appendChild(newStyleEl);
+                    } else {
+                        (target as ShadowRoot).appendChild(newStyleEl);
+                    }
                 } else if (styleSheet.href) {
                     // for <link> elements loading CSS from a URL
-                    const newLinkEl = sourceDoc.createElement("link");
+                    const newLinkEl = source.createElement("link");
 
                     newLinkEl.rel = "stylesheet";
                     newLinkEl.href = styleSheet.href;
-                    targetDoc.head!.appendChild(newLinkEl);
+                    if ((target as Document).head) {
+                        (target as Document).head.appendChild(newLinkEl);
+                    } else {
+                        (target as ShadowRoot).appendChild(newLinkEl);
+                    }
                 }
             } catch (e) {}
         }
@@ -540,6 +548,14 @@ export class Inspector {
     }
 
     public static _CreateCanvasContainer(parentControl: HTMLElement) {
+        // If the parent control element's root is not the document (such as the ShadowRoot of the Babylon Viewer),
+        // we need to copy the styles from the document to the parent control's root.
+        if (parentControl.getRootNode() !== window.document) {
+            setTimeout(() => {
+                this._CopyStyles(window.document, parentControl.getRootNode() as unknown as DocumentOrShadowRoot);
+            }, 0);
+        }
+
         // Create a container for previous elements
         this._NewCanvasContainer = parentControl.ownerDocument!.createElement("div");
         this._NewCanvasContainer.style.display = parentControl.style.display;

packages/dev/inspector/tsconfig.build.json

@@ -20,7 +20,8 @@
             "viewer/*": ["tools/viewer/dist/*"],
             "ktx2decoder/*": ["tools/ktx2Decoder/dist/*"],
             "vsm": ["tools/vsm/dist/*"]
-        }
+        },
+        "allowSyntheticDefaultImports": true
     },
 
     "references": [

packages/dev/inspector/tsconfig.json

@@ -1,3 +1,6 @@
 {
-    "extends": "../../../tsconfig.json"
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true
+    }
 }

packages/dev/sharedUiComponents/src/components/Button.tsx

@@ -1,4 +1,4 @@
-import styles from "./Button.modules.scss";
+import styles from "./Button.module.scss";
 import { ClassNames } from "./classNames";
 
 export type ButtonProps = {

packages/dev/sharedUiComponents/src/components/Icon.tsx

@@ -1,5 +1,5 @@
 import { ClassNames } from "./classNames";
-import styles from "./Icon.modules.scss";
+import styles from "./Icon.module.scss";
 
 export type IconProps = {
     color?: "dark" | "light";

packages/dev/sharedUiComponents/src/components/Label.tsx

@@ -1,6 +1,6 @@
 import type { ReactChild } from "react";
 import { ClassNames } from "./classNames";
-import styles from "./Label.modules.scss";
+import styles from "./Label.module.scss";
 
 export type LabelProps = {
     text: string;

packages/dev/sharedUiComponents/src/components/MessageDialog.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import * as React from "react";
 import { ClassNames } from "./classNames";
-import styles from "./MessageDialog.modules.scss";
+import styles from "./MessageDialog.module.scss";
 
 export interface MessageDialogProps {
     message: string;

packages/dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
-import style from "./TextInputWithSubmit.modules.scss";
+import style from "./TextInputWithSubmit.module.scss";
 
 import submitIcon from "../imgs/confirmGridElementDark.svg";
 import cancelIcon from "../imgs/deleteGridElementDark.svg";

packages/dev/sharedUiComponents/src/components/Toggle.tsx

@@ -1,4 +1,4 @@
-import styles from "./Toggle.modules.scss";
+import styles from "./Toggle.module.scss";
 import { ClassNames } from "./classNames";
 
 import toggleOnIcon30px from "../imgs/toggleOnIcon_30px.svg";

packages/dev/sharedUiComponents/src/components/bars/CommandBarComponent.tsx

@@ -11,7 +11,7 @@ import logoIcon from "../../imgs/babylonLogo.svg";
 import canvasFitIcon from "../../imgs/canvasFitIcon.svg";
 import betaFlag from "../../imgs/betaFlag.svg";
 
-import style from "./CommandBar.modules.scss";
+import style from "./CommandBar.module.scss";
 import { Color3 } from "core/Maths/math.color";
 import { ColorPickerLineComponent } from "../lines/ColorPickerLineComponent";
 

packages/dev/sharedUiComponents/src/components/bars/CommandButtonComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ClassNames } from "../classNames";
 
-import style from "./CommandButton.modules.scss";
+import style from "./CommandButton.module.scss";
 
 export interface ICommandButtonComponentProps {
     tooltip: string;

packages/dev/sharedUiComponents/src/components/bars/CommandDropdownComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FileButtonLineComponent } from "../lines/FileButtonLineComponent";
 import { JoinClassNames } from "../classNames";
 
-import style from "./CommandDropdown.modules.scss";
+import style from "./CommandDropdown.module.scss";
 
 interface ICommandDropdownComponentProps {
     icon?: string;

packages/dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-import style from "./ColorComponentEntry.modules.scss";
+import style from "./ColorComponentEntry.module.scss";
 
 export interface IColorComponentEntryProps {
     value: number;

packages/dev/sharedUiComponents/src/components/colorPicker/ColorPicker.tsx

@@ -4,7 +4,7 @@ import { ColorComponentComponentEntry } from "./ColorComponentEntry";
 import { HexColorComponent } from "./HexColor";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
 
-import style from "./ColorPicker.modules.scss";
+import style from "./ColorPicker.module.scss";
 import { ClassNames } from "../classNames";
 import { Logger } from "core/Misc/logger";
 

packages/dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-import style from "./HexColor.modules.scss";
+import style from "./HexColor.module.scss";
 
 export interface IHexColorProps {
     value: string;

packages/dev/sharedUiComponents/src/components/layout/FlexibleColumn.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import style from "./FlexibleColumn.modules.scss";
+import style from "./FlexibleColumn.module.scss";
 
 /**
  * Arguments for the Column component.

packages/dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import style from "./FlexibleDropZone.modules.scss";
+import style from "./FlexibleDropZone.module.scss";
 import { FlexibleResizeBar } from "./FlexibleResizeBar";
 import { ResizeDirections } from "./types";
 

packages/dev/sharedUiComponents/src/components/layout/FlexibleGridContainer.tsx

@@ -4,7 +4,7 @@ import { LayoutContext } from "./LayoutContext";
 import { FlexibleColumn } from "./FlexibleColumn";
 import { FlexibleDropZone } from "./FlexibleDropZone";
 import { FlexibleTabsContainer } from "./FlexibleTabsContainer";
-import style from "./FlexibleGridContainer.modules.scss";
+import style from "./FlexibleGridContainer.module.scss";
 
 /**
  * Arguments for the GridContainer component.

packages/dev/sharedUiComponents/src/components/layout/FlexibleResizeBar.tsx

@@ -2,7 +2,7 @@ import type { FC } from "react";
 import { useDrag } from "react-dnd";
 import { ResizeDirections, ElementTypes } from "./types";
 import { ClassNames } from "../classNames";
-import style from "./FlexibleResizeBar.modules.scss";
+import style from "./FlexibleResizeBar.module.scss";
 
 /**
  * Arguments for the ResizeBar component.

packages/dev/sharedUiComponents/src/components/layout/FlexibleTab.tsx

@@ -3,7 +3,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { ClassNames } from "../classNames";
 import { ElementTypes } from "./types";
 import type { TabDrag } from "./types";
-import style from "./FlexibleTab.modules.scss";
+import style from "./FlexibleTab.module.scss";
 
 /**
  * Arguments for the FlexibleTab component.

packages/dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx

@@ -2,7 +2,7 @@ import type { FC } from "react";
 import { useContext } from "react";
 import { FlexibleTab } from "./FlexibleTab";
 import { LayoutContext } from "./LayoutContext";
-import style from "./FlexibleTabsContainer.modules.scss";
+import style from "./FlexibleTabsContainer.module.scss";
 
 import dragIcon from "../../imgs/dragDotsIcon_white.svg";
 import { getPosInLayout, removeLayoutRowAndRedistributePercentages } from "./utils";

packages/dev/sharedUiComponents/src/components/lines/ColorLineComponent.tsx

@@ -7,7 +7,7 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import type { PropertyChangedEvent } from "../../propertyChangedEvent";
 import { ColorPickerLineComponent } from "./ColorPickerLineComponent";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-import style from "./ColorLineComponent.modules.scss";
+import style from "./ColorLineComponent.module.scss";
 
 import copyIcon from "../../imgs/copy.svg";
 import { JoinClassNames } from "../classNames";

packages/dev/sharedUiComponents/src/components/lines/ColorPickerLineComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { Color4, Color3 } from "core/Maths/math.color";
 import { ColorPickerComponent } from "../colorPicker/ColorPicker";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-import style from "./ColorPickerLineComponent.modules.scss";
+import style from "./ColorPickerLineComponent.module.scss";
 
 export interface IColorPickerLineComponentProps {
     value: Color4 | Color3;

packages/dev/sharedUiComponents/src/components/lines/FileButtonLineComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styles from "./FileButtonLineComponent.modules.scss";
+import styles from "./FileButtonLineComponent.module.scss";
 
 export interface IFileButtonLineComponentProps {
     label: string;

packages/dev/sharedUiComponents/src/components/lines/NumericInputComponent.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-import style from "./NumericInputComponent.modules.scss";
+import style from "./NumericInputComponent.module.scss";
 
 interface INumericInputComponentProps {
     label: string;

packages/dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useState } from "react";
 import { TextInputWithSubmit } from "../TextInputWithSubmit";
-import style from "./OptionsLineComponent.modules.scss";
+import style from "./OptionsLineComponent.module.scss";
 
 /**
  * This components represents an options menu with optional

packages/dev/sharedUiComponents/src/components/reactGraphSystem/GraphConnectorHandle.tsx

@@ -3,7 +3,7 @@ import { useCallback } from "react";
 import type { DropTargetMonitor } from "react-dnd";
 import { useDrag, useDrop } from "react-dnd";
 import { ClassNames } from "../classNames";
-import style from "./GraphConnectorHandle.modules.scss";
+import style from "./GraphConnectorHandle.module.scss";
 import { useGraphContext } from "./useGraphContext";
 
 /**

packages/dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import style from "./GraphContainer.modules.scss";
+import style from "./GraphContainer.module.scss";
 
 export interface IGraphContainerProps {}
 

packages/dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx

@@ -2,7 +2,7 @@ import type { FC } from "react";
 import { useDrag } from "react-dnd";
 import { ClassNames } from "../classNames";
 import { GraphConnectorHandler } from "./GraphConnectorHandle";
-import style from "./GraphNode.modules.scss";
+import style from "./GraphNode.module.scss";
 import { useGraphContext } from "./useGraphContext";
 
 export interface IGraphNodeProps {

packages/dev/sharedUiComponents/src/nodeGraphSystem/frameNodePort.ts

@@ -8,7 +8,7 @@ import { IsFramePortData } from "./tools";
 import type { FramePortPosition } from "./graphFrame";
 import type { StateManager } from "./stateManager";
 import type { FramePortData } from "./types/framePortData";
-import commonStyles from "./common.modules.scss";
+import commonStyles from "./common.module.scss";
 
 export class FrameNodePort extends NodePort {
     private _parentFrameId: number;

packages/dev/sharedUiComponents/src/nodeGraphSystem/graphCanvas.tsx

@@ -15,8 +15,8 @@ import type { INodeData } from "./interfaces/nodeData";
 import type { IPortData } from "./interfaces/portData";
 import { PortDataDirection } from "./interfaces/portData";
 import type { INodeContainer } from "./interfaces/nodeContainer";
-import styles from "./graphCanvas.modules.scss";
-import commonStyles from "./common.modules.scss";
+import styles from "./graphCanvas.module.scss";
+import commonStyles from "./common.module.scss";
 
 import { TypeLedger } from "./typeLedger";
 import { RefreshNode } from "./tools";

packages/dev/sharedUiComponents/src/nodeGraphSystem/graphFrame.ts

@@ -10,8 +10,8 @@ import { FrameNodePort } from "./frameNodePort";
 import type { NodeLink } from "./nodeLink";
 import type { IFrameData } from "./interfaces/nodeLocationInfo";
 import { StringTools } from "../stringTools";
-import styles from "./graphFrame.modules.scss";
-import commonStyles from "./common.modules.scss";
+import styles from "./graphFrame.module.scss";
+import commonStyles from "./common.module.scss";
 import { ClassNames } from "../components/classNames";
 
 import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";

packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts

@@ -12,8 +12,8 @@ import { PropertyLedger } from "./propertyLedger";
 import { DisplayLedger } from "./displayLedger";
 import type { INodeData } from "./interfaces/nodeData";
 import type { IPortData } from "./interfaces/portData";
-import localStyles from "./graphNode.modules.scss";
-import commonStyles from "./common.modules.scss";
+import localStyles from "./graphNode.module.scss";
+import commonStyles from "./common.module.scss";
 import type { IEditablePropertyListOption, IEditablePropertyOption, IPropertyDescriptionForEdition } from "core/Decorators/nodeDecorator";
 import { PropertyTypeForEdition } from "core/Decorators/nodeDecorator";
 import { ForceRebuild } from "./automaticProperties";

packages/dev/sharedUiComponents/src/nodeGraphSystem/nodeLink.ts

@@ -7,8 +7,8 @@ import type { GraphNode } from "./graphNode";
 import type { GraphCanvasComponent } from "./graphCanvas";
 import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
 import { RefreshNode } from "./tools";
-import commonStyles from "./common.modules.scss";
-import styles from "./nodeLink.modules.scss";
+import commonStyles from "./common.module.scss";
+import styles from "./nodeLink.module.scss";
 
 export class NodeLink {
     private _graphCanvas: GraphCanvasComponent;