xmlui 0.9.21 → 0.9.25

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

@@ -0,0 +1,336 @@
+"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 renderChild_1 = require("./renderChild");
+const AppRoot_1 = require("./AppRoot");
+const react_2 = require("@remix-run/react");
+const ThemingDefs_1 = require("../../abstractions/ThemingDefs");
+/**
+ *  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, }) {
+    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, root, toggleThemeTone, } = (0, ThemeContext_1.useThemes)();
+    // --- 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(ThemingDefs_1.ThemeToneKeys[(ThemingDefs_1.ThemeToneKeys.indexOf(activeThemeTone) + 1) % ThemingDefs_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 = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-phone"));
+        setMaxWidthPhone(mwPhone);
+        setMaxWidthPhoneLower(createLowerDimensionValue(mwPhone));
+        const mwLandscapePhone = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-landscape-phone"));
+        setMaxWidthLandscapePhone(mwLandscapePhone);
+        setMaxWidthLandscapePhoneLower(createLowerDimensionValue(mwLandscapePhone));
+        const mwTablet = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-tablet"));
+        setMaxWidthTablet(mwTablet);
+        setMaxWidthTabletLower(createLowerDimensionValue(mwTablet));
+        const mwDesktop = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("maxWidth-desktop"));
+        setMaxWidthDesktop(mwDesktop);
+        setMaxWidthDesktopLower(createLowerDimensionValue(mwDesktop));
+        const mwLargeDesktop = getComputedStyle(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 = "xs";
+    let vpSizeIndex = 0;
+    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;
+    }
+    // --- 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);
+    // --- 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)) {
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = document
+                        .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "instant", block: "start" });
+                });
+            }
+        }
+    }, [location, scrollForceRefresh]);
+    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 }, 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,
+    ]);
+    // --- 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 registerAppState = (0, react_1.useCallback)((bucket, initialValue) => {
+        setAppState((prev) => {
+            return Object.assign(Object.assign({}, prev), { [bucket]: initialValue });
+        });
+    }, []);
+    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 {
+            registerAppState,
+            appState,
+            update,
+        };
+    }, [appState, registerAppState, update]);
+    const memoedVarsRef = (0, react_1.useRef)(new Map());
+    const renderedRoot = (0, renderChild_1.renderChild)({
+        node: rootContainer,
+        state: constants_1.EMPTY_OBJECT,
+        dispatch: constants_1.noop,
+        appContext: undefined,
+        lookupAction: constants_1.noop,
+        lookupSyncCallback: constants_1.noop,
+        registerComponentApi: constants_1.noop,
+        renderChild: constants_1.noop,
+        statePartChanged: constants_1.noop,
+        cleanup: constants_1.noop,
+        memoedVarsRef,
+    });
+    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: (!!children && (0, react_1.isValidElement)(renderedRoot))
+                ? (0, react_1.cloneElement)(renderedRoot, null, children)
+                : renderedRoot }) }));
+}
+// --- 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");
+}

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

@@ -0,0 +1,84 @@
+"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");
+// --- 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, }) {
+    // --- 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)();
+    // --- 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)(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: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, 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

@@ -0,0 +1,49 @@
+"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");
+/**
+ * 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, }) => {
+    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.jsx)(AppContent_1.AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: 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;
+    return (
+    // <React.StrictMode>
+    (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: [(typeof window === "undefined" || process.env.VITE_REMIX) && dynamicChildren, !(typeof window === "undefined" || process.env.VITE_REMIX) && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) })
+    // </React.StrictMode>
+    );
+};
+exports.AppWrapper = AppWrapper;

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

@@ -132,14 +132,13 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
     const apiBoundProps = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.props, "DataSource", "DataSourceRef"), [safeNode.props]);
     const apiBoundEvents = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.events, "APICall", "FileDownload", "FileUpload"), [safeNode.events]);
     const isApiBound = apiBoundProps.length > 0 || apiBoundEvents.length > 0;
-    // --- API-bound components provide helpful behavior out of the box, such as transforming API-bound
-    // --- events and properties. This extra functionality is implemented in `ApiBoundComponent`.
-    if (isApiBound) {
-        return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: safeNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, parentRendererContext: parentRenderContext }, safeNode.uid));
-    }
     // --- Obtain the component renderer and descriptor from the component registry
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const { renderer, descriptor, isCompoundComponent } = componentRegistry.lookupComponentRenderer(safeNode.type) || {};
+    // if (safeNode.type.startsWith("Component")) {
+    //   console.log("renderer", renderer, safeNode.type);
+    //   console.log("registry", componentRegistry.getRegisteredComponentKeys().length);
+    // }
     // --- Obtain a function that can lookup an event handler, which is bound to a
     // --- particular event of this component instance
     const memoedLookupEventHandler = (0, react_1.useCallback)((eventName, actionOptions) => {
@@ -228,6 +227,11 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
             const resolvedUid = (0, extractParam_1.extractParam)(state, testId, appContext, true);
             renderedNode = ((0, jsx_runtime_1.jsx)(ComponentDecorator_1.default, { attr: { "data-testid": resolvedUid, "data-inspectId": inspectId }, allowOnlyRefdChild: isCompoundComponent || safeNode.type === "ModalDialog", onTargetMounted: safeNode.type === "ModalDialog" ? refreshInspection : undefined, ref: ref, children: (0, react_1.cloneElement)(renderedNode, Object.assign({}, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), mouseEventHandlers), rest))) }));
         }
+        // --- API-bound components provide helpful behavior out of the box, such as transforming API-bound
+        // --- events and properties. This extra functionality is implemented in `ApiBoundComponent`.
+        if (isApiBound) {
+            return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: safeNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, parentRendererContext: parentRenderContext }, safeNode.uid));
+        }
         // --- The current layout context may suggest to wrap the rendered node.
         if ((_b = layoutContextRef.current) === null || _b === void 0 ? void 0 : _b.wrapChild) {
             renderedNode = layoutContextRef.current.wrapChild(rendererContext, renderedNode, descriptor);
@@ -251,10 +255,16 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         return (0, react_1.cloneElement)(renderedNode, Object.assign({ 
             // ref: ref ? composeRefs(ref, (renderedNode as any).ref) : (renderedNode as any).ref,
             // ...mergeProps({ ...renderedNode.props, ...mouseEventHandlers }, rest),
-            ref: renderedNode.type === react_1.default.Fragment ? undefined : (ref ? (0, react_compose_refs_1.composeRefs)(ref, renderedNode.ref) : renderedNode.ref) }, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), (renderedNode.type !== react_1.default.Fragment ? mouseEventHandlers : {})), rest)), ...(childrenArray));
+            ref: renderedNode.type === react_1.default.Fragment
+                ? undefined
+                : ref
+                    ? (0, react_compose_refs_1.composeRefs)(ref, renderedNode.ref)
+                    : renderedNode.ref }, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), (renderedNode.type !== react_1.default.Fragment ? mouseEventHandlers : {})), rest)), ...childrenArray);
     }
     // --- If the rendering resulted in multiple React nodes, wrap them in a fragment.
-    return (react_1.default.isValidElement(renderedNode) && !!children) ? (0, react_1.cloneElement)(renderedNode, null, children) : renderedNode;
+    return react_1.default.isValidElement(renderedNode) && !!children
+        ? (0, react_1.cloneElement)(renderedNode, null, children)
+        : renderedNode;
 });
 /**
  * This function renders the content of a slot. If the slot is named, it looks for a template

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

@@ -329,7 +329,8 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
             // --- We have an unknown event handler
             throw new Error("Invalid event handler");
         }
-        if (options === null || options === void 0 ? void 0 : options.ephemeral) {
+        //if we have a context or ephemeral event handler, we don't cache it (otherwise we would have stale reference for the context)
+        if ((options === null || options === void 0 ? void 0 : options.ephemeral) || (options === null || options === void 0 ? void 0 : options.context)) {
             return handler;
         }
         if (!((_a = fnsRef.current[uid]) === null || _a === void 0 ? void 0 : _a[fnCacheKey])) {

package/dist/scripts/src/components-core/theming/ThemeProvider.js

@@ -201,7 +201,7 @@ exports.builtInThemes = [
     solid_1.SolidThemeDefinition,
 ];
 // theme-overriding properties change.
-function ThemeProvider({ children, themes: custThemes = constants_1.EMPTY_ARRAY, defaultTheme = "xmlui", defaultTone = "light", resources = constants_1.EMPTY_OBJECT, resourceMap = constants_1.EMPTY_OBJECT, }) {
+function ThemeProvider({ children, themes: custThemes = constants_1.EMPTY_ARRAY, defaultTheme = "xmlui", defaultTone = "light", resources = constants_1.EMPTY_OBJECT, resourceMap = constants_1.EMPTY_OBJECT, localThemes = constants_1.EMPTY_OBJECT, }) {
     const [activeThemeTone, setActiveThemeTone] = (0, react_1.useState)(() => {
         if (!defaultTone) {
             return ThemingDefs_1.ThemeToneKeys[0];
@@ -271,6 +271,7 @@ function ThemeProvider({ children, themes: custThemes = constants_1.EMPTY_ARRAY,
         resources,
         root,
         themes,
+        localThemes,
     ]);
     const currentThemeContextValue = (0, react_1.useMemo)(() => {
         const themeVal = {
@@ -326,12 +327,6 @@ function resolveThemeVarsWithCssVars(theme) {
             }
             return ret;
         }
-        // for (let i = 1; i < (result?.length || 0); i++) {
-        //   const varName = result?.[i];
-        //   if(varName){
-        //     return input.replace(regex, `var(${getVarKey(varName)})`);
-        //   }
-        // }
         return input;
     }
 }

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -155,6 +155,7 @@ exports.RootThemeDefinition = {
         "fontFamily": "$fontFamily-sans-serif",
         // --- Various font sizes (relative to the current context)
         "fontSize-gigantic": "3rem",
+        "fontSize-larger": "2.15rem",
         "fontSize-large": "1.5rem",
         "fontSize-medium": "1.25rem",
         "fontSize-normal": "1rem",

package/dist/scripts/src/components-core/utils/date-utils.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isoDateString = isoDateString;
+exports.formatDate = formatDate;
+exports.formatDateTime = formatDateTime;
+exports.formatTime = formatTime;
+exports.formatTimeWithoutSeconds = formatTimeWithoutSeconds;
+exports.formatDateWithoutYear = formatDateWithoutYear;
+exports.getDate = getDate;
+exports.getDateUntilNow = getDateUntilNow;
+exports.smartFormatDateTime = smartFormatDateTime;
+exports.smartFormatDate = smartFormatDate;
+exports.isDateToday = isDateToday;
+exports.isDateYesterday = isDateYesterday;
+exports.isDateTomorrow = isDateTomorrow;
+const date_fns_1 = require("date-fns");
+const misc_1 = require("../utils/misc");
+function isoDateString(date) {
+    return (!date ? new Date() : new Date(date)).toJSON();
+}
+function formatDate(date) {
+    return new Date(date).toLocaleDateString();
+}
+function formatDateTime(date) {
+    return new Date(date).toLocaleString();
+}
+function formatTime(date) {
+    return new Date(date).toLocaleTimeString();
+}
+function formatTimeWithoutSeconds(date) {
+    return (0, date_fns_1.format)(new Date(date), "H:m");
+}
+function formatDateWithoutYear(date) {
+    return new Date(date).toLocaleDateString([], {
+        month: "numeric",
+        day: "2-digit"
+    });
+}
+function getDate(date) {
+    return date ? new Date(date) : new Date();
+}
+function getDateUntilNow(date, nowLabel, time) {
+    return date ? (0, misc_1.humanReadableDateTimeTillNow)(date, nowLabel, time) : "-";
+}
+function smartFormatDateTime(date) {
+    if (!date) {
+        return "-";
+    }
+    if ((0, date_fns_1.isToday)(new Date(date))) {
+        return new Date(date).toLocaleTimeString();
+    }
+    if ((0, date_fns_1.isThisWeek)(new Date(date))) {
+        return `${(0, date_fns_1.formatRelative)(new Date(date), new Date())}`;
+    }
+    return new Date(date).toLocaleString();
+}
+function smartFormatDate(date) {
+    if (!date) {
+        return "-";
+    }
+    //TODO we could use formatRelative when they implement this: https://github.com/date-fns/date-fns/issues/1218
+    if ((0, date_fns_1.isToday)(new Date(date))) {
+        return "Today";
+    }
+    if ((0, date_fns_1.isYesterday)(new Date(date))) {
+        return "Yesterday";
+    }
+    return new Date(date).toLocaleDateString();
+}
+function isDateToday(date) {
+    return (0, date_fns_1.isToday)(new Date(date));
+}
+function isDateYesterday(date) {
+    return (0, date_fns_1.isYesterday)(new Date(date));
+}
+function isDateTomorrow(date) {
+    return (0, date_fns_1.isTomorrow)(new Date(date));
+}