xmlui 0.7.20 → 0.7.21

package/dist/scripts/src/components/RawHtml/RawHtml.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rawHtmlComponentRenderer = exports.RawHtmlMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const RawHtmlNative_1 = require("./RawHtmlNative");
+const COMP = "RawHtml";
+const hostTypesMd = [
+    {
+        value: "div",
+        description: "Use a 'div' as the host element.",
+    },
+    {
+        value: "span",
+        description: "Use a 'span' as the host element.",
+    },
+];
+exports.RawHtmlMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component injects a raw HTML string into the DOM.",
+    props: {
+        content: (0, ComponentDefs_1.d)("Specifies the raw HTML content to inject"),
+        hostElement: (0, ComponentDefs_1.d)("Specifies the host element to inject the content into.", hostTypesMd, "string", "span"),
+    },
+    events: {},
+    apis: {},
+    themeVars: [],
+    defaultThemeVars: {
+        light: {},
+        dark: {},
+    },
+});
+exports.rawHtmlComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RawHtmlMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    const childText = renderChild(node.children);
+    const content = extractValue.asDisplayText(node.props.content) ||
+        (typeof childText === "string" ? childText : "");
+    return ((0, jsx_runtime_1.jsx)(RawHtmlNative_1.RawHtml, { content: content, hostElement: node.props.hostElement, style: layoutCss }));
+});

package/dist/scripts/src/components/RawHtml/RawHtmlNative.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawHtml = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RawHtml = ({ content, hostElement, style }) => {
+    if (hostElement === "div") {
+        return (0, jsx_runtime_1.jsx)("div", { style: style, dangerouslySetInnerHTML: { __html: content } });
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)("span", { style: style, dangerouslySetInnerHTML: { __html: content } });
+    }
+};
+exports.RawHtml = RawHtml;

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -13,7 +13,7 @@ const classnames_1 = __importDefault(require("@components-core/utils/classnames"
 const react_helmet_async_1 = require("react-helmet-async");
 const react_dom_1 = require("react-dom");
 const constants_1 = require("@components-core/constants");
-const ErrorBoundary_1 = require("@components-core/ErrorBoundary");
+const ErrorBoundary_1 = require("@components-core/rendering/ErrorBoundary");
 const NotificationToast_1 = require("./NotificationToast");
 const themeVars_1 = require("@components-core/theming/themeVars");
 function getClassName(css) {

package/dist/scripts/src/components-core/LoaderComponent.js

@@ -4,7 +4,7 @@ exports.LoaderComponent = LoaderComponent;
 const react_1 = require("react");
 const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
 const containers_1 = require("./abstractions/containers");
-const valueExtractor_1 = require("@components-core/container/valueExtractor");
+const valueExtractor_1 = require("@components-core/rendering/valueExtractor");
 const hooks_1 = require("@components-core/utils/hooks");
 function LoaderComponent({ node, state, dispatch, lookupAction, lookupSyncCallback, registerComponentApi, onUnmount, appContext, memoedVarsRef, }) {
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();

package/dist/scripts/src/components-core/RestApiProxy.js

@@ -259,7 +259,7 @@ class RestApiProxy {
                 method: method,
                 headers: aggregatedHeaders,
                 signal: abortSignal,
-                body: requestBody,
+                body: requestBody
             };
             if (onUploadProgress) {
                 console.log("Falling back to axios. Reason: onUploadProgress specified");

package/dist/scripts/src/components-core/StandaloneApp.js

@@ -17,7 +17,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_1 = __importDefault(require("react-dom/client"));
 require("../index.scss");
-const AppRoot_1 = __importDefault(require("@components-core/AppRoot"));
+const AppRoot_1 = require("@components-core/rendering/AppRoot");
 const misc_1 = require("@components-core/utils/misc");
 const ApiInterceptorProvider_1 = require("@components-core/interception/ApiInterceptorProvider");
 const constants_1 = require("@components-core/constants");
@@ -28,6 +28,7 @@ const Parser_1 = require("../parsers/scripting/Parser");
 const code_behind_collect_1 = require("../parsers/scripting/code-behind-collect");
 const ComponentProvider_1 = require("@components/ComponentProvider");
 const markup_check_1 = require("@components-core/markup-check");
+const StandaloneExtensionManager_1 = __importDefault(require("./StandaloneExtensionManager"));
 const ThemeProvider_1 = require("@components-core/theming/ThemeProvider");
 const MAIN_FILE = "Main." + fileExtensions_1.componentFileExtension;
 const MAIN_CODE_BEHIND_FILE = "Main." + fileExtensions_1.codeBehindFileExtension;
@@ -41,15 +42,12 @@ const CONFIG_FILE = "config.json";
  * representation); ApiInterceptor can emulate some backend functionality
  * running in the browser.
  */
-function StandaloneApp({ appDef, decorateComponentsWithTestId, debugEnabled = false, runtime, components: customComponents, componentManager, }) {
+function StandaloneApp({ appDef, decorateComponentsWithTestId, debugEnabled = false, runtime, extensionManager, }) {
     var _a;
-    const servedFromSingleFile = (0, react_1.useMemo)(() => {
-        return typeof window !== "undefined" && window.location.href.startsWith("file");
-    }, []);
     // --- Fetch all files constituting the standalone app, including components,
     // --- themes, and other artifacts. Display the app version numbers in the
     // --- console.
-    const standaloneApp = useStandalone(appDef, runtime, componentManager);
+    const standaloneApp = useStandalone(appDef, runtime, extensionManager);
     usePrintVersionNumber(standaloneApp);
     if (!standaloneApp) {
         // --- Problems found, the standalone app cannot run
@@ -68,11 +66,10 @@ function StandaloneApp({ appDef, decorateComponentsWithTestId, debugEnabled = fa
         (typeof window !== "undefined" ? window.XMLUI_MOCK_TEST_ID : false);
     // --- An app can turn off the default hash routing.
     const useHashBasedRouting = (_a = appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) !== null && _a !== void 0 ? _a : true;
-    return ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mockedApi, useHashBasedRouting: useHashBasedRouting, children: (0, jsx_runtime_1.jsx)(AppRoot_1.default, { servedFromSingleFile: servedFromSingleFile, decorateComponentsWithTestId: shouldDecorateWithTestId, node: entryPoint, standalone: true, debugEnabled: debugEnabled, 
+    return ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mockedApi, useHashBasedRouting: useHashBasedRouting, children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { decorateComponentsWithTestId: shouldDecorateWithTestId, node: entryPoint, standalone: true, debugEnabled: debugEnabled, 
             // @ts-ignore
-            routerBaseName: typeof window !== "undefined" ? window.__PUBLIC_PATH || "" : "", globalProps: Object.assign({ name: name }, (appGlobals || {})), defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, resourceMap: resourceMap, sources: sources, componentManager: componentManager, contributes: {
+            routerBaseName: typeof window !== "undefined" ? window.__PUBLIC_PATH || "" : "", globalProps: Object.assign({ name: name }, (appGlobals || {})), defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, resourceMap: resourceMap, sources: sources, extensionManager: extensionManager, contributes: {
                 compoundComponents: components,
-                components: customComponents,
                 themes,
             } }) }));
 }
@@ -124,6 +121,7 @@ function parseCodeBehindResponse(response) {
             parser.parseStatements();
         }
         catch (e) {
+            // throw new Error(`Failed to fetch ${response.url}`);
             if (parser.errors.length > 0) {
                 return {
                     component: (0, xmlui_parser_1.errReportScriptError)(parser.errors[0], response.url),
@@ -288,7 +286,7 @@ function fetchWithoutCache(url) {
  * @returns The prepared StandaloneAppDescription if the collection is
  * successful; otherwise, null.
  */
-function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, componentManager) {
+function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, extensionManager) {
     const [standaloneApp, setStandaloneApp] = (0, react_1.useState)(() => {
         // --- Initialize the standalone app
         const resolvedRuntime = resolveRuntime(runtime);
@@ -452,7 +450,7 @@ function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, com
                 // --- We may have components that are not in the configuration file.
                 // --- We need to load them and their code-behinds. First, we collect
                 // --- the components to load.
-                let componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, undefined, componentManager);
+                let componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, undefined, extensionManager);
                 // --- Try to load the components referenced in the markup, collect
                 // --- those that failed
                 const componentsFailedToLoad = new Set();
@@ -496,7 +494,7 @@ function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, com
                     }));
                     const componentWrappers = yield Promise.all(componentPromises);
                     componentsWithCodeBehinds.push(...componentWrappers.filter((comp) => !!comp));
-                    componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, componentsFailedToLoad, componentManager);
+                    componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, componentsFailedToLoad, extensionManager);
                 }
                 // --- Let's check for errors to display
                 const errorComponent = errorComponents.length > 0
@@ -520,9 +518,9 @@ function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, com
  * @param componentsFailedToLoad The components that failed to load here
  * @returns The components that are still missing
  */
-function collectMissingComponents(entryPoint, components, componentsFailedToLoad = new Set(), componentManager) {
+function collectMissingComponents(entryPoint, components, componentsFailedToLoad = new Set(), extensionManager) {
     // --- Add the discovered compound components to the registry
-    const componentRegistry = new ComponentProvider_1.ComponentRegistry({ compoundComponents: components }, componentManager);
+    const componentRegistry = new ComponentProvider_1.ComponentRegistry({ compoundComponents: components }, extensionManager);
     // --- Check the xmlui markup. This check will find all unloaded components
     const result = (0, markup_check_1.checkXmlUiMarkup)(entryPoint, components, {
         getComponentProps: (componentName) => {
@@ -543,11 +541,12 @@ function collectMissingComponents(entryPoint, components, componentsFailedToLoad
         },
     });
     componentRegistry.destroy();
-    // --- Collect all missing components.Omit the components that failed to load
+    // --- Collect all missing components.
+    // Omit the components that failed to load and the ones that are not in #app-ns namespace
     return new Set(result
         .filter((r) => r.code === "M001")
-        .map((r) => r.args[0])
-        .filter((comp) => !componentsFailedToLoad.has(comp)));
+        .map((r) => r.args[0].replace("#app-ns.", ""))
+        .filter((comp) => !componentsFailedToLoad.has(comp) && !comp.includes(".")));
 }
 // --- This React hook logs the app's version number to the browser's console at startup
 function usePrintVersionNumber(standaloneApp) {
@@ -573,7 +572,8 @@ let contentRoot = null;
  * @param components The related component's runtime representation
  * @returns The content's root element
  */
-function startApp(runtime, components, componentManager) {
+function startApp(runtime, extensions = [], extensionManager = new StandaloneExtensionManager_1.default()) {
+    extensionManager.registerExtension(extensions);
     let rootElement = document.getElementById("root");
     if (!rootElement) {
         rootElement = document.createElement("div");
@@ -583,7 +583,7 @@ function startApp(runtime, components, componentManager) {
     if (!contentRoot) {
         contentRoot = client_1.default.createRoot(rootElement);
     }
-    contentRoot.render((0, jsx_runtime_1.jsx)(StandaloneApp, { runtime: runtime, components: components, componentManager: componentManager }));
+    contentRoot.render((0, jsx_runtime_1.jsx)(StandaloneApp, { runtime: runtime, extensionManager: extensionManager }));
     return contentRoot;
 }
 exports.default = StandaloneApp;

package/dist/scripts/src/components-core/{StandaloneComponentManager.js → StandaloneExtensionManager.js}

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * the xmlui component registry. The framework resolves the components used
  * in an application markup with this registry.
  */
-class StandaloneComponentManager {
+class StandaloneExtensionManager {
     constructor() {
         this.subscriptions = new Set();
-        this.registeredComponents = [];
+        this.registeredExtensions = [];
     }
     /**
      * You can add a callback function invoked whenever a new component is added
@@ -19,7 +19,7 @@ class StandaloneComponentManager {
      */
     subscribeToRegistrations(cb) {
         this.subscriptions.add(cb);
-        this.registeredComponents.forEach((component) => {
+        this.registeredExtensions.forEach((component) => {
             cb(component);
         });
     }
@@ -32,20 +32,13 @@ class StandaloneComponentManager {
     unSubscribeFromRegistrations(cb) {
         this.subscriptions.delete(cb);
     }
-    /**
-     * Use this function to add a new component to the registry. Adding a new
-     * component will invoke all callbacks that have already subscribed to the
-     * component registration.
-     * @param component The component to register. You can pass a single
-     * component or an array of components.
-     */
-    registerComponent(component) {
+    registerExtension(component) {
         (Array.isArray(component) ? component : [component]).forEach((component) => {
-            this.registeredComponents.push(component);
+            this.registeredExtensions.push(component);
             this.subscriptions.forEach((cb) => {
                 cb(component);
             });
         });
     }
 }
-exports.default = StandaloneComponentManager;
+exports.default = StandaloneExtensionManager;

package/dist/scripts/src/components-core/action/APICall.js

@@ -180,7 +180,7 @@ function callApi(_a, _b) {
     //operation
     headers, url, queryParams, rawBody, method, body, }, { resolveBindingExpressions } = {}) {
         const uid = typeof actionUid === "symbol" ? actionUid : Symbol(actionUid);
-        const stateContext = Object.assign(Object.assign({}, params), state);
+        const stateContext = Object.assign(Object.assign({}, state), params);
         if (!(0, extractParam_1.shouldKeep)(when, stateContext, appContext)) {
             return;
         }

package/dist/scripts/src/components-core/loader/PageableLoader.js

@@ -197,13 +197,13 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
                     //loader not loaded yet, we skip the update
                     return;
                 }
-                const originalFlatItems = oldData.pages.flatMap((d) => d.result);
+                const originalFlatItems = oldData.pages.flatMap((d) => d);
                 const draft = (0, immer_1.createDraft)(oldData);
                 const flatItems = [];
                 for (let i = 0; i < draft.pages.length; i++) {
                     const page = draft.pages[i];
-                    yield updater(page.result);
-                    flatItems.push(...page.result);
+                    yield updater(page);
+                    flatItems.push(...page);
                 }
                 if (flatItems.length !== originalFlatItems.length) {
                     throw new Error("Use this method for update only. If you want to add or delete, call the addItem/deleteItem method.");
@@ -218,7 +218,7 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
                 const oldData = (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.getQueryData(queryId);
                 const draft = (0, immer_1.createDraft)(oldData);
                 if (indexToInsert === undefined) {
-                    draft.pages[draft.pages.length - 1].result.push(element);
+                    draft.pages[draft.pages.length - 1].push(element);
                 }
                 else {
                     throw new Error("not implemented");

package/dist/scripts/src/components-core/{AppRoot.js → rendering/AppContent.js}

@@ -1,108 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 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 = __importStar(require("react"));
+const react_1 = require("react");
+const AppRoot_1 = require("./AppRoot");
+const DebugViewProvider_1 = require("@components-core/DebugViewProvider");
+const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
 const react_router_dom_1 = require("react-router-dom");
-const react_2 = require("@remix-run/react");
-const react_query_1 = require("@tanstack/react-query");
-const lodash_es_1 = require("lodash-es");
-const react_helmet_async_1 = require("react-helmet-async");
-const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const immer_1 = require("immer");
-const ErrorBoundary_1 = require("./ErrorBoundary");
-const ThemeProvider_1 = __importDefault(require("@components-core//theming/ThemeProvider"));
-const Container_1 = require("./container/Container");
-const misc_1 = require("@components-core/utils/misc");
-const constants_1 = require("@components-core/constants");
-const IconProvider_1 = require("@components/IconProvider");
-const date_fns_1 = require("date-fns");
-const AppContext_1 = require("@components-core/AppContext");
-const useApiInterceptorContext_1 = require("@components-core/interception/useApiInterceptorContext");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const reportEngineError_1 = require("@components-core/reportEngineError");
+const ConfirmationModalContextProvider_1 = require("@components/ModalDialog/ConfirmationModalContextProvider");
 const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const date_functions_1 = require("./appContext/date-functions");
-const misc_utils_1 = require("./appContext/misc-utils");
-const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
+const hooks_1 = require("@components-core/utils/hooks");
 const abstractions_1 = require("@components-core/theming/abstractions");
-const ComponentProvider_1 = require("@components/ComponentProvider");
-const ConfirmationModalContextProvider_1 = require("@components/ModalDialog/ConfirmationModalContextProvider");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const useApiInterceptorContext_1 = require("@components-core/interception/useApiInterceptorContext");
+const constants_1 = require("@components-core/constants");
 const AppStateContext_1 = require("@components/App/AppStateContext");
-const hooks_1 = require("./utils/hooks");
-const InspectorContext_1 = require("@components-core/InspectorContext");
-const DebugViewProvider_1 = require("./DebugViewProvider");
-const package_json_1 = require("../../package.json");
-const math_function_1 = require("./appContext/math-function");
-// --- 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.
-const queryClient = new react_query_1.QueryClient({
-    defaultOptions: {
-        queries: {
-            refetchOnWindowFocus: false,
-        },
-    },
-});
-// --- We pass these functions to the global app context
-const DateUtils = {
-    differenceInMinutes: (date1, date2) => {
-        return (0, date_fns_1.differenceInMinutes)(new Date(date1), new Date(date2));
-    },
-    isSameDay: (dateLeft, dateRight) => {
-        // console.log("IS SAME DAY", dateLeft, dateRight);
-        if (!dateLeft || !dateRight) {
-            return false;
-        }
-        return (0, date_fns_1.isSameDay)(new Date(dateLeft), new Date(dateRight));
-    },
-    isToday: (date) => {
-        return (0, date_fns_1.isToday)(new Date(date));
-    },
-    isThisYear: (date) => {
-        return (0, date_fns_1.isThisYear)(new Date(date));
-    },
-};
-// --- 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");
-}
+const renderChild_1 = require("./renderChild");
+const AppContext_1 = require("@components-core/AppContext");
+const misc_1 = require("@components-core/utils/misc");
+const date_fns_1 = require("date-fns");
+const misc_utils_1 = require("@components-core/appContext/misc-utils");
+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 date_functions_1 = require("@components-core/appContext/date-functions");
+const math_function_1 = require("@components-core/appContext/math-function");
 /**
  *  This component wraps the entire app into a container with these particular
  *  responsibilities:
@@ -116,7 +41,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
     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 navigate = (0, react_router_dom_1.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.
@@ -228,9 +153,9 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
     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 location = (0, react_router_dom_1.useLocation)();
     const lastHash = (0, react_1.useRef)("");
-    // listen to location change using useEffect with location as dependency
+    // --- Listen to location change using useEffect with location as dependency
     // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
     (0, react_1.useEffect)(() => {
         if (location.hash) {
@@ -308,7 +233,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
             decorateComponentsWithTestId,
             environment,
             mediaSize,
-            queryClient,
+            queryClient: AppRoot_1.queryClient,
             standalone }, date_functions_1.dateFunctions), math_function_1.mathFunctions), { 
             // --- File Utilities
             formatFileSizeInBytes: misc_1.formatFileSizeInBytes,
@@ -373,52 +298,42 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
             update,
         };
     }, [appState, registerAppState, update]);
-    const memoedVars = (0, react_1.useRef)(new Map());
-    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, Container_1.renderRoot)(rootContainer, memoedVars) }) }));
+    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: renderedRoot }) }));
 }
-/**
- * This React component is intended to be the root component in a browser window. It handles the application state
- * changes, routing, and theming, provides an error boundary, and handles a few other aspects.
- */
-const AppWrapper = ({ node, previewMode = false, servedFromSingleFile = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, }) => {
-    var _a;
-    if (previewMode) {
-        //to 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;
-    }
-    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;
-    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.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, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled }) }) }) }) })] }));
-    const Router = previewMode
-        ? react_router_dom_1.MemoryRouter
-        : servedFromSingleFile || useHashBasedRouting
-            ? react_router_dom_1.HashRouter
-            : react_router_dom_1.BrowserRouter;
-    return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: 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 }))] }) }) }));
+// --- We pass these functions to the global app context
+const DateUtils = {
+    differenceInMinutes: (date1, date2) => {
+        return (0, date_fns_1.differenceInMinutes)(new Date(date1), new Date(date2));
+    },
+    isSameDay: (dateLeft, dateRight) => {
+        // console.log("IS SAME DAY", dateLeft, dateRight);
+        if (!dateLeft || !dateRight) {
+            return false;
+        }
+        return (0, date_fns_1.isSameDay)(new Date(dateLeft), new Date(dateRight));
+    },
+    isToday: (date) => {
+        return (0, date_fns_1.isToday)(new Date(date));
+    },
+    isThisYear: (date) => {
+        return (0, date_fns_1.isThisYear)(new Date(date));
+    },
 };
-/**
- * This component runs the app in the context of the registered components
- * (including the core xmlui components and external ones passed to this
- * component.
- */
-function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, servedFromSingleFile, resourceMap, sources, componentManager, }) {
-    const rootNode = (0, react_1.useMemo)(() => {
-        const themedRoot = node.type === "Theme"
-            ? Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { root: true }) }) : {
-            type: "Theme",
-            props: {
-                root: true,
-            },
-            children: [node],
-        };
-        return {
-            type: "Container",
-            uid: "root",
-            children: [themedRoot],
-            uses: [],
-        };
-    }, [node]);
-    (0, reportEngineError_1.resetErrors)();
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, componentManager: componentManager, 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, { 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, servedFromSingleFile: servedFromSingleFile, sources: sources }) }) }));
+// --- 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");
 }
-exports.default = AppRoot;

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

@@ -0,0 +1,55 @@
+"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("@components-core/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, }) {
+    // --- 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 = node.type === "Theme"
+            ? Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { root: true }) }) : {
+            type: "Theme",
+            props: {
+                root: true,
+            },
+            children: [node],
+        };
+        return {
+            type: "Container",
+            uid: "root",
+            children: [themedRoot],
+            uses: [],
+        };
+    }, [node]);
+    // --- 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, { 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 }) }) }));
+}