xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components-core/rendering/AppContent.js

@@ -1,400 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppContent = AppContent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lodash_es_1 = require("lodash-es");
-const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const package_json_1 = require("../../../package.json");
-const ComponentRegistryContext_1 = require("../../components/ComponentRegistryContext");
-const ConfirmationModalContextProvider_1 = require("../../components/ModalDialog/ConfirmationModalContextProvider");
-const ThemeContext_1 = require("../theming/ThemeContext");
-const hooks_1 = require("../utils/hooks");
-const themeVars_1 = require("../theming/themeVars");
-const useApiInterceptorContext_1 = require("../interception/useApiInterceptorContext");
-const constants_1 = require("../constants");
-const AppStateContext_1 = require("../../components/App/AppStateContext");
-const misc_1 = require("../utils/misc");
-const DebugViewProvider_1 = require("../DebugViewProvider");
-const misc_utils_1 = require("../appContext/misc-utils");
-const date_functions_1 = require("../appContext/date-functions");
-const math_function_1 = require("../appContext/math-function");
-const AppContext_1 = require("../AppContext");
-const AppRoot_1 = require("./AppRoot");
-const react_2 = require("@remix-run/react");
-const utils_1 = require("../theming/utils");
-const StandaloneComponent_1 = __importDefault(require("./StandaloneComponent"));
-function safeGetComputedStyle(root) {
-    return getComputedStyle(root || document.body);
-}
-/**
- *  This component wraps the entire app into a container with these particular
- *  responsibilities:
- *  - Managing the application state
- *  - Helping the app with viewport-related functionality (e.g., information
- *    of viewport size, supporting responsive apps)
- *  - Providing xmlui-defined methods and properties for apps, such as
- *    `activeThemeId`, `navigate`, `toast`, and many others.
- */
-function AppContent({ rootContainer, routerBaseName, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, children, onInit, }) {
-    const [loggedInUser, setLoggedInUser] = (0, react_1.useState)(null);
-    const debugView = (0, DebugViewProvider_1.useDebugView)();
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const navigate = (0, react_2.useNavigate)();
-    const { confirm } = (0, ConfirmationModalContextProvider_1.useConfirm)();
-    // --- Prepare theme-related variables. We will use them to manage the selected theme
-    // --- and also pass them to the app context.
-    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds, toggleThemeTone, } = (0, ThemeContext_1.useThemes)();
-    const { root } = (0, ThemeContext_1.useTheme)();
-    // --- Handle special key combinations to change the theme and tone
-    (0, hooks_1.useDocumentKeydown)((event) => {
-        // --- Alt + Ctrl + Shift + T changes the current theme
-        if (event.code === "KeyT" && event.altKey && event.ctrlKey && event.shiftKey) {
-            setActiveThemeId(availableThemeIds[(availableThemeIds.indexOf(activeThemeId) + 1) % availableThemeIds.length]);
-        }
-        // --- Alt + Ctrl + Shift + O changes the current theme tone
-        if (event.code === "KeyO" && event.altKey && event.ctrlKey && event.shiftKey) {
-            setActiveThemeTone(utils_1.ThemeToneKeys[(utils_1.ThemeToneKeys.indexOf(activeThemeTone) + 1) % utils_1.ThemeToneKeys.length]);
-        }
-        // --- Alt + Ctrl + Shift + S toggles the current state view
-        if (event.code === "KeyS" && event.altKey && event.ctrlKey && event.shiftKey) {
-            debugView.setDisplayStateView(!debugView.displayStateView);
-        }
-    });
-    // --- We use the state variables to store the current media query values
-    const [maxWidthPhone, setMaxWidthPhone] = (0, react_1.useState)("0");
-    const [maxWidthPhoneLower, setMaxWidthPhoneLower] = (0, react_1.useState)("0");
-    const [maxWidthLandscapePhone, setMaxWidthLandscapePhone] = (0, react_1.useState)("0");
-    const [maxWidthLandscapePhoneLower, setMaxWidthLandscapePhoneLower] = (0, react_1.useState)("0");
-    const [maxWidthTablet, setMaxWidthTablet] = (0, react_1.useState)("0");
-    const [maxWidthTabletLower, setMaxWidthTabletLower] = (0, react_1.useState)("0");
-    const [maxWidthDesktop, setMaxWidthDesktop] = (0, react_1.useState)("0");
-    const [maxWidthDesktopLower, setMaxWidthDesktopLower] = (0, react_1.useState)("0");
-    const [maxWidthLargeDesktop, setMaxWidthLargeDesktop] = (0, react_1.useState)("0");
-    const [maxWidthLargeDesktopLower, setMaxWidthLargeDesktopLower] = (0, react_1.useState)("0");
-    // --- We create a lower dimension value for the media query using a range
-    const createLowerDimensionValue = (dimension) => {
-        const match = dimension.match(/^(\d+)px$/);
-        return match ? `${parseInt(match[1]) - 0.02}px` : "0";
-    };
-    // --- Whenever the size of the viewport changes, we update the values
-    // --- related to viewport size
-    const observer = (0, react_1.useRef)();
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (trackContainerHeight) {
-            if (root && root !== document.body) {
-                // --- We are already observing old element
-                if (observer === null || observer === void 0 ? void 0 : observer.current) {
-                    observer.current.unobserve(root);
-                }
-                if (trackContainerHeight === "auto") {
-                    root.style.setProperty("--containerHeight", "auto");
-                }
-                else {
-                    observer.current = new ResizeObserver((entries) => {
-                        root.style.setProperty("--containerHeight", entries[0].contentRect.height + "px");
-                    });
-                }
-                if (observer.current) {
-                    observer.current.observe(root);
-                }
-            }
-        }
-        return () => {
-            if (observer === null || observer === void 0 ? void 0 : observer.current) {
-                observer.current.unobserve(root);
-            }
-        };
-    }, [root, observer, trackContainerHeight]);
-    // --- Whenever the application root DOM object or the active theme changes, we sync
-    // --- with the theme variable values (because we can't use css var in media queries)
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        const mwPhone = safeGetComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-phone"));
-        setMaxWidthPhone(mwPhone);
-        setMaxWidthPhoneLower(createLowerDimensionValue(mwPhone));
-        const mwLandscapePhone = safeGetComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-landscape-phone"));
-        setMaxWidthLandscapePhone(mwLandscapePhone);
-        setMaxWidthLandscapePhoneLower(createLowerDimensionValue(mwLandscapePhone));
-        const mwTablet = safeGetComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-tablet"));
-        setMaxWidthTablet(mwTablet);
-        setMaxWidthTabletLower(createLowerDimensionValue(mwTablet));
-        const mwDesktop = safeGetComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-desktop"));
-        setMaxWidthDesktop(mwDesktop);
-        setMaxWidthDesktopLower(createLowerDimensionValue(mwDesktop));
-        const mwLargeDesktop = safeGetComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-large-desktop"));
-        setMaxWidthLargeDesktop(mwLargeDesktop);
-        setMaxWidthLargeDesktopLower(createLowerDimensionValue(mwLargeDesktop));
-    }, [activeThemeId, root]);
-    // --- Set viewport size information
-    const isViewportPhone = (0, hooks_1.useMediaQuery)(`(max-width: ${maxWidthPhoneLower})`);
-    const isViewportLandscapePhone = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthPhone}) and (max-width: ${maxWidthLandscapePhoneLower})`);
-    const isViewportTablet = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLandscapePhone}) and (max-width: ${maxWidthTabletLower})`);
-    const isViewportDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthTablet}) and (max-width: ${maxWidthDesktopLower})`);
-    const isViewportLargeDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthDesktop}) and (max-width: ${maxWidthLargeDesktopLower})`);
-    let vpSize;
-    let vpSizeIndex;
-    const isViewportXlDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLargeDesktop})`);
-    if (isViewportXlDesktop) {
-        vpSize = "xxl";
-        vpSizeIndex = 5;
-    }
-    else if (isViewportLargeDesktop) {
-        vpSize = "xl";
-        vpSizeIndex = 4;
-    }
-    else if (isViewportDesktop) {
-        vpSize = "lg";
-        vpSizeIndex = 3;
-    }
-    else if (isViewportTablet) {
-        vpSize = "md";
-        vpSizeIndex = 2;
-    }
-    else if (isViewportLandscapePhone) {
-        vpSize = "sm";
-        vpSizeIndex = 1;
-    }
-    else if (isViewportPhone) {
-        vpSize = "xs";
-        vpSizeIndex = 0;
-    }
-    // --- Collect information about the current environment
-    const isInIFrame = (0, hooks_1.useIsInIFrame)();
-    const isWindowFocused = (0, hooks_1.useIsWindowFocused)();
-    const apiInterceptorContext = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
-    const location = (0, react_2.useLocation)();
-    const lastHash = (0, react_1.useRef)("");
-    const [scrollForceRefresh, setScrollForceRefresh] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        onInit === null || onInit === void 0 ? void 0 : onInit();
-    }, [onInit]);
-    // useEffect(()=>{
-    //   if(isWindowFocused){
-    //     if ("serviceWorker" in navigator) {
-    //       // Manually Activate the MSW again
-    //       // console.log("REACTIVATE MSW");
-    //       navigator.serviceWorker.controller?.postMessage("MOCK_ACTIVATE");
-    //     }
-    //   }
-    // }, [isWindowFocused]);
-    // --- Listen to location change using useEffect with location as dependency
-    // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
-    // https://dev.to/mindactuate/scroll-to-anchor-element-with-react-router-v6-38op
-    (0, react_1.useEffect)(() => {
-        var _a;
-        let hash = "";
-        if (location.hash) {
-            hash = location.hash.slice(1); // safe hash for further use after navigation
-        }
-        if (lastHash.current !== hash) {
-            lastHash.current = hash;
-            if (!((_a = location.state) === null || _a === void 0 ? void 0 : _a.preventHashScroll)) {
-                const rootNode = root === null || root === void 0 ? void 0 : root.getRootNode();
-                const scrollBehavior = "instant";
-                requestAnimationFrame(() => {
-                    var _a;
-                    if (!rootNode)
-                        return;
-                    // --- If element is in shadow DOM (string-based type checking)
-                    // --- Check constructor.name to avoid direct ShadowRoot type dependency
-                    // --- More precise than duck typing, works reliably across different environments
-                    if (typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot) {
-                        const el = rootNode.getElementById(lastHash.current);
-                        if (!el)
-                            return;
-                        scrollAncestorsToView(el, scrollBehavior);
-                    }
-                    else {
-                        // --- If element is in light DOM
-                        (_a = document
-                            .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: scrollBehavior, block: "start" });
-                    }
-                });
-            }
-        }
-    }, [location, scrollForceRefresh, root]);
-    const forceRefreshAnchorScroll = (0, react_1.useCallback)(() => {
-        lastHash.current = "";
-        setScrollForceRefresh((prev) => prev + 1);
-    }, []);
-    // --- We collect all the actions defined in the app and pass them to the app context
-    const Actions = (0, react_1.useMemo)(() => {
-        const ret = {
-            _SUPPORT_IMPLICIT_CONTEXT: true,
-        };
-        for (const [key, value] of componentRegistry.actionFunctions) {
-            ret[key] = value;
-        }
-        return ret;
-    }, [componentRegistry.actionFunctions]);
-    // --- We collect information about app embedding and pass it to the app context
-    const embed = (0, react_1.useMemo)(() => {
-        return {
-            isInIFrame: isInIFrame,
-        };
-    }, [isInIFrame]);
-    // --- We collect information about the current environment and pass it to the app context
-    const environment = (0, react_1.useMemo)(() => {
-        return {
-            isWindowFocused,
-        };
-    }, [isWindowFocused]);
-    // --- We collect information about the current media size and pass it to the app context
-    const mediaSize = (0, react_1.useMemo)(() => {
-        return {
-            phone: isViewportPhone,
-            landscapePhone: isViewportLandscapePhone,
-            tablet: isViewportTablet,
-            desktop: isViewportDesktop,
-            largeDesktop: isViewportLargeDesktop,
-            xlDesktop: isViewportXlDesktop,
-            smallScreen: isViewportPhone || isViewportLandscapePhone || isViewportTablet,
-            largeScreen: !(isViewportPhone || isViewportLandscapePhone || isViewportTablet),
-            size: vpSize,
-            sizeIndex: vpSizeIndex,
-        };
-    }, [
-        isViewportPhone,
-        isViewportLandscapePhone,
-        isViewportTablet,
-        isViewportDesktop,
-        isViewportLargeDesktop,
-        isViewportXlDesktop,
-        vpSize,
-        vpSizeIndex,
-    ]);
-    // --- We extract the global properties from the app configuration and pass them to the app context
-    const appGlobals = (0, react_1.useMemo)(() => {
-        return globalProps ? Object.assign({}, globalProps) : constants_1.EMPTY_OBJECT;
-    }, [globalProps]);
-    // --- We assemble the app context object form the collected information
-    const appContextValue = (0, react_1.useMemo)(() => {
-        const ret = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 
-            // --- Engine-related
-            version: package_json_1.version,
-            // --- Actions namespace
-            Actions,
-            // --- App-specific
-            appGlobals,
-            debugEnabled,
-            decorateComponentsWithTestId,
-            environment,
-            mediaSize,
-            queryClient: AppRoot_1.queryClient,
-            standalone, 
-            // String-based type checking: Use constructor.name to identify ShadowRoot
-            // This avoids direct ShadowRoot type dependency while being more explicit than duck typing
-            appIsInShadowDom: typeof ShadowRoot !== "undefined" && (root === null || root === void 0 ? void 0 : root.getRootNode()) instanceof ShadowRoot }, date_functions_1.dateFunctions), math_function_1.mathFunctions), { 
-            // --- File Utilities
-            formatFileSizeInBytes: misc_1.formatFileSizeInBytes,
-            getFileExtension: misc_1.getFileExtension,
-            // --- Navigation-related
-            navigate,
-            routerBaseName,
-            // --- Notifications and dialogs
-            confirm,
-            signError,
-            toast: react_hot_toast_1.default,
-            // --- Theme-related
-            activeThemeId,
-            activeThemeTone,
-            availableThemeIds, setTheme: setActiveThemeId, setThemeTone: setActiveThemeTone, toggleThemeTone,
-            // --- User-related
-            loggedInUser,
-            setLoggedInUser,
-            delay: misc_1.delay,
-            embed,
-            apiInterceptorContext, getPropertyByPath: lodash_es_1.get }), misc_utils_1.miscellaneousUtils), { forceRefreshAnchorScroll });
-        return ret;
-    }, [
-        Actions,
-        appGlobals,
-        debugEnabled,
-        decorateComponentsWithTestId,
-        environment,
-        mediaSize,
-        standalone,
-        navigate,
-        routerBaseName,
-        confirm,
-        activeThemeId,
-        activeThemeTone,
-        availableThemeIds,
-        setActiveThemeId,
-        setActiveThemeTone,
-        toggleThemeTone,
-        loggedInUser,
-        embed,
-        apiInterceptorContext,
-        forceRefreshAnchorScroll,
-        root,
-    ]);
-    // --- We prepare the helper infrastructure for the `AppState` component, which manages
-    // --- app-wide state using buckets (state sections).
-    const [appState, setAppState] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
-    const update = (0, react_1.useCallback)((bucket, patch) => {
-        setAppState((prev) => {
-            return Object.assign(Object.assign({}, prev), { [bucket]: Object.assign(Object.assign({}, (prev[bucket] || {})), patch) });
-        });
-    }, []);
-    const appStateContextValue = (0, react_1.useMemo)(() => {
-        return {
-            appState,
-            update,
-        };
-    }, [appState, update]);
-    return ((0, jsx_runtime_1.jsx)(AppContext_1.AppContext.Provider, { value: appContextValue, children: (0, jsx_runtime_1.jsx)(AppStateContext_1.AppStateContext.Provider, { value: appStateContextValue, children: (0, jsx_runtime_1.jsx)(StandaloneComponent_1.default, { node: rootContainer, children: children }) }) }));
-}
-// --- We pass this funtion to the global app context
-function signError(error) {
-    react_hot_toast_1.default.error(typeof error === "string" ? error : error.message || "Something went wrong");
-}
-/**
- * Scrolls all ancestors of the specified element into view up to the first shadow root the element is in.
- * @param target The element to scroll to, can be in the light or shadow DOM
- * @param scrollBehavior The scroll behavior
- */
-function scrollAncestorsToView(target, scrollBehavior) {
-    const scrollables = getScrollableAncestors(target);
-    // It's important to start from the outermost and work inwards.
-    scrollables.reverse().forEach((container) => {
-        // Compute the position of target relative to container
-        const targetRect = target.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-        // Scroll so that the target is visible in this container
-        if (targetRect.top < containerRect.top || targetRect.bottom > containerRect.bottom) {
-            // Only scroll vertically, add more logic for horizontal if needed
-            const offset = targetRect.top - containerRect.top + container.scrollTop;
-            container.scrollTo({ top: offset, behavior: scrollBehavior });
-        }
-        // Optionally handle horizontal scrolling similarly
-    });
-    function getScrollableAncestors(el) {
-        const scrollables = [];
-        let current = el;
-        while (current) {
-            let parent = current.parentElement;
-            // If no parentElement, might be in shadow DOM
-            if (!parent && current.getRootNode) {
-                break;
-                // NOTE: Disregard shadow DOM, because we will scroll everything otherwise
-                /* const root = current.getRootNode();
-                if (root && root instanceof ShadowRoot && root.host) {
-                  parent = root.host as (HTMLElement | null);
-                } */
-            }
-            if (!parent)
-                break;
-            // Check if this parent is scrollable
-            const style = getComputedStyle(parent);
-            if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
-                scrollables.push(parent);
-            }
-            current = parent;
-        }
-        return scrollables;
-    }
-}

package/dist/scripts/src/components-core/rendering/AppRoot.js

@@ -1,87 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.queryClient = void 0;
-exports.AppRoot = AppRoot;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_query_1 = require("@tanstack/react-query");
-const immer_1 = require("immer");
-const reportEngineError_1 = require("../reportEngineError");
-const ComponentProvider_1 = require("../../components/ComponentProvider");
-const DebugViewProvider_1 = require("../DebugViewProvider");
-const AppWrapper_1 = require("./AppWrapper");
-const StyleContext_1 = require("../theming/StyleContext");
-// --- We want to enable the produce method of `immer` on Map objects
-(0, immer_1.enableMapSet)();
-// --- We use this object in the app context to represent the `QlientQuery`
-// --- of the react-query package.
-exports.queryClient = new react_query_1.QueryClient({
-    defaultOptions: {
-        queries: {
-            refetchOnWindowFocus: false,
-        },
-    },
-});
-/**
- * This component is responsible for running a pre-compiled xmlui app. It
- * receives the internal representation of the app markup and code (coming
- * from either code-behind files or inlined markup expressions) and executes
- * the app accordingly.
- */
-function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested = false, onInit, }) {
-    // --- Make sure, the root node is wrapped in a `Theme` component. Also,
-    // --- the root node must be wrapped in a `Container` component managing
-    // --- the app's top-level state.
-    const rootNode = (0, react_1.useMemo)(() => {
-        const themedRoot = {
-            type: "Theme",
-            props: {
-                root: true,
-            },
-            children: [node],
-        };
-        return {
-            type: "Container",
-            uid: "root",
-            children: [themedRoot],
-            uses: [],
-        };
-    }, [node]);
-    if (projectCompilation) {
-        const entryDeps = projectCompilation.entrypoint.dependencies;
-        const transDeps = getTransitiveDependencies(entryDeps, projectCompilation.components);
-        // console.log("projectCompilation: ", projectCompilation);
-        // console.log("transitive dependencies of entrypoint: ", transDeps);
-    }
-    // --- Start with an error-free state
-    (0, reportEngineError_1.resetErrors)();
-    // --- Add isNested to global props so it can be accessed throughout the app
-    const enhancedGlobalProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, globalProps), { isNested })), [globalProps, isNested]);
-    // --- Render the app providing a component registry (in which the engine finds a
-    // --- component definition by its name). Ensure the app has a context for debugging.
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(StyleContext_1.StyleProvider, { children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, onInit: onInit, children: children }) }) }) }));
-}
-/**
- *
- * @param directCompDepNames The direct dependencies (those are component names)
- * of the component for which the transitive dependencies will be returned
- * @param components the compilation info of all the components of the project */
-function getTransitiveDependencies(directCompDepNames, components) {
-    const allDepsByCompName = components.reduce(function addDepsByNameToCollection(collection, { definition: { name }, dependencies }) {
-        return collection.set(name, dependencies);
-    }, new Map());
-    const transitiveDeps = new Set();
-    populateTransitiveDeps(directCompDepNames);
-    return transitiveDeps;
-    function populateTransitiveDeps(directCompDepNames) {
-        if (!directCompDepNames)
-            return;
-        for (const directDep of directCompDepNames) {
-            if (!transitiveDeps.has(directDep)) {
-                transitiveDeps.add(directDep);
-                const depsOfDirectDep = allDepsByCompName.get(directDep);
-                populateTransitiveDeps(depsOfDirectDep);
-            }
-        }
-    }
-}

package/dist/scripts/src/components-core/rendering/AppWrapper.js

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_router_dom_1 = require("react-router-dom");
-const react_query_1 = require("@tanstack/react-query");
-const react_helmet_async_1 = require("react-helmet-async");
-const ConfirmationModalContextProvider_1 = require("../../components/ModalDialog/ConfirmationModalContextProvider");
-const constants_1 = require("../constants");
-const IconProvider_1 = require("../../components/IconProvider");
-const ThemeProvider_1 = __importDefault(require("../theming/ThemeProvider"));
-const InspectorContext_1 = require("../InspectorContext");
-const AppRoot_1 = require("./AppRoot");
-const AppContent_1 = require("./AppContent");
-const ErrorBoundary_1 = require("./ErrorBoundary");
-const LoggerContext_1 = require("../../logging/LoggerContext");
-const LoggerInitializer_1 = require("../../logging/LoggerInitializer");
-const ComponentViewer_1 = require("../ComponentViewer");
-/**
- * This component wraps the application into other layers of (nested) components
- * that provide app functionality and services requiring unique interaction with
- * the browser or the React environment.
- */
-const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, children, projectCompilation, onInit, }) => {
-    var _a;
-    if (previewMode) {
-        // --- Prevent leaking the meta items to the parent document,
-        // --- if it lives in an iframe (e.g. docs)
-        react_helmet_async_1.HelmetProvider.canUseDOM = false;
-    }
-    // --- Set a few default properties
-    const siteName = (globalProps === null || globalProps === void 0 ? void 0 : globalProps.name) || "XMLUI app";
-    const useHashBasedRouting = (_a = globalProps === null || globalProps === void 0 ? void 0 : globalProps.useHashBasedRouting) !== null && _a !== void 0 ? _a : true;
-    // --- The children of the AppWrapper component are the components that
-    // --- provide the app functionality and services. These components are
-    // --- wrapped in other components that provide the necessary environment
-    // --- for the app to run.
-    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsxs)(AppContent_1.AppContent, { onInit: onInit, rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: [(0, jsx_runtime_1.jsx)(ComponentViewer_1.ComponentViewer, {}), children] }) }) }) }) })] })] }));
-    // --- Select the router type for the app
-    const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
-    const shouldSkipClientRouter = previewMode
-        ? false
-        : typeof window === "undefined" || process.env.VITE_REMIX;
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [!!shouldSkipClientRouter && dynamicChildren, !shouldSkipClientRouter && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }));
-};
-exports.AppWrapper = AppWrapper;