xmlui 0.9.23 → 0.9.30

package/dist/scripts/src/components/Text/TextNative.js

@@ -26,12 +26,16 @@ exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
     var { uid, variant, maxLines = 0, style, children, preserveLinebreaks, ellipses = true } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "children", "preserveLinebreaks", "ellipses"]);
     const innerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
+    // NOTE: This is to accept syntax highlight classes coming from shiki
+    // classes need not to be added to the rendered html element, so we remove them from props
+    const { syntaxHighlightClasses } = variantSpecificProps, restVariantSpecificProps = __rest(variantSpecificProps, ["syntaxHighlightClasses"]);
     const Element = (0, react_1.useMemo)(() => {
         if (!variant || !abstractions_1.TextVariantElement[variant])
             return "div"; //todo illesg, could be a span?
         return abstractions_1.TextVariantElement[variant];
     }, [variant]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, variantSpecificProps, { ref: ref, className: (0, classnames_1.default)([
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)([
+                syntaxHighlightClasses,
                 Text_module_scss_1.default.text,
                 Text_module_scss_1.default[variant || "default"],
                 {

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

@@ -32,6 +32,9 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        gap: {
+            description: "This property defines the gap between the adornments and the input area.",
+        },
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
@@ -52,6 +55,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         "borderWidth-Input": "1px",
         "minHeight-Input": "39px",
         "padding-Input": "$space-2",
+        "gap-adornment-Input": "$space-2",
         "borderStyle-Input": "solid",
         "borderColor-Input--disabled": "$borderColor--disabled",
         "textColor-Input--disabled": "$textColor--disabled",
@@ -73,7 +77,8 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 function renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, type = "text") {
-    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    delete layoutCss.gap;
+    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
 }
 exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
     return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -46,7 +46,7 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
     id = id || (0, react_1.useId)();
     const inputRef = (0, react_2.useRef)(null);
     (0, react_2.useEffect)(() => {
@@ -103,5 +103,5 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text",
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",
                 [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
                 [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: focus, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
+            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
 });

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

@@ -31,7 +31,7 @@ function calculateHash(str) {
     }
     return hash;
 }
-function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, children }) {
+function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, children, }) {
     const generatedId = (0, react_1.useId)();
     const { themes, resources, resourceMap, activeThemeId, setRoot, root } = (0, ThemeContext_1.useThemes)();
     const { activeTheme, activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -123,11 +123,15 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
     }, [devToolsEnabled, devToolsSide, devToolsSize]);
     if (isRoot) {
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+        return (
+        // <ThemeContext.Provider value={currentThemeContextValue}>
+        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", "data-theme-root": true, children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
                         if (el) {
                             setRoot(el);
                         }
-                    }, children: [(0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })] }));
+                    }, children: [(0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })] })
+        // </ThemeContext.Provider>
+        );
     }
     return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${rangeClassName} {${css}}` }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.from, fromClass) }), renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.to, toClass) }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {

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

@@ -15,9 +15,7 @@ exports.ToneChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
 });
 function ToneChangerButton() {
     const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "stars" : "sun" }), onClick: () => {
-            activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light");
-        } }));
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", style: { flexShrink: 0 }, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "lightToDark" : "darkToLight" }), onClick: () => activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light") }));
 }
 /**
  * Define the renderer for the Button component

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

@@ -294,7 +294,8 @@ class RestApiProxy {
                 if (!response.clone().ok) {
                     throw yield this.raiseError(response);
                 }
-                return yield parseResponse(response.clone());
+                const parsedResponse = yield parseResponse(response.clone());
+                return parsedResponse;
             }
         });
         this.tryParseResponse = (response) => __awaiter(this, void 0, void 0, function* () {
@@ -330,12 +331,14 @@ class RestApiProxy {
         const conf = (appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) || { apiUrl: "" };
         const { apiUrl, errorResponseTransform } = conf;
         this.appContext = appContext;
-        const xsrfToken = (0, misc_1.readCookie)("XSRF-TOKEN");
-        const xsrfHeaders = xsrfToken
-            ? {
-                "X-XSRF-TOKEN": (0, misc_1.readCookie)("XSRF-TOKEN"),
-            }
-            : {};
+        // const xsrfToken = readCookie("XSRF-TOKEN");
+        const xsrfHeaders = 
+        // xsrfToken
+        // ? {
+        //     "X-XSRF-TOKEN": readCookie("XSRF-TOKEN"),
+        //   }
+        // :
+        {};
         this.config = {
             apiUrl,
             errorResponseTransform,

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

@@ -115,7 +115,7 @@ function TableOfContentsProvider({ children }) {
     }, [headings]);
     //the content could take time to load, this way we try to force the scroll to anchor mechanism to kick in
     const hasHeadings = sortedHeadings.length > 0;
-    (0, react_1.useEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (hasHeadings) {
             forceRefreshAnchorScroll();
         }

package/dist/scripts/src/components-core/appContext/date-functions.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateFunctions = void 0;
+const date_utils_1 = require("../utils/date-utils");
+const date_fns_1 = require("date-fns");
+exports.dateFunctions = {
+    isoDateString: date_utils_1.isoDateString,
+    formatDate: date_utils_1.formatDate,
+    formatDateTime: date_utils_1.formatDateTime,
+    formatTime: date_utils_1.formatTime,
+    formatTimeWithoutSeconds: date_utils_1.formatTimeWithoutSeconds,
+    formatDateWithoutYear: date_utils_1.formatDateWithoutYear,
+    getDate: date_utils_1.getDate,
+    getDateUntilNow: date_utils_1.getDateUntilNow,
+    smartFormatDateTime: date_utils_1.smartFormatDateTime,
+    smartFormatDate: date_utils_1.smartFormatDate,
+    isToday: date_utils_1.isDateToday,
+    isYesterday: date_utils_1.isDateYesterday,
+    isTomorrow: date_utils_1.isDateTomorrow,
+    differenceInMinutes: date_fns_1.differenceInMinutes,
+    isSameDay: date_fns_1.isSameDay,
+    isThisYear: date_fns_1.isThisYear,
+};

package/dist/scripts/src/components-core/appContext/math-function.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mathFunctions = void 0;
+/**
+ * This function calculates the average of the specified values and returns it.
+ * @param values Values to calculate the average
+ * @param decimals Number of decimal places to round the result
+ */
+function avg(values, decimals) {
+    if (values.length === 0) {
+        return 0;
+    }
+    const sumValues = sum(values);
+    const result = sumValues / values.length;
+    return decimals ? Number(result.toFixed(decimals)) : result;
+}
+/**
+ * This function calculates the sum of the specified values and returns it.
+ * @param values Values to calculate the sum
+ */
+function sum(values) {
+    return values.reduce((acc, val) => acc + val, 0);
+}
+exports.mathFunctions = {
+    avg,
+    sum
+};

package/dist/scripts/src/components-core/appContext/misc-utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.miscellaneousUtils = void 0;
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("../utils/misc");
+exports.miscellaneousUtils = {
+    capitalize: lodash_es_1.capitalize,
+    pluralize: misc_1.pluralize,
+    defaultTo: lodash_es_1.defaultTo,
+    toHashObject: misc_1.toHashObject,
+    findByField: misc_1.findByField,
+    distinct: misc_1.distinct
+};

package/dist/scripts/src/components-core/interception/ApiInterceptor.js

@@ -0,0 +1,199 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiInterceptor = exports.AuthService = void 0;
+const msw_1 = require("msw");
+const lodash_es_1 = require("lodash-es");
+const Backend_1 = require("../interception/Backend");
+const IndexedDb_1 = require("../interception/IndexedDb");
+const request_params_1 = require("../utils/request-params");
+const Errors_1 = require("../interception/Errors");
+const EngineError_1 = require("../EngineError");
+const InMemoryDb_1 = require("../interception/InMemoryDb");
+function mergeHeaders(...sources) {
+    const result = {};
+    for (const source of sources) {
+        if (!(0, lodash_es_1.isObject)(source)) {
+            throw new TypeError("All arguments must be of type object");
+        }
+        const headers = new Headers(source);
+        for (const [key, value] of headers.entries()) {
+            if (value === undefined || value === "undefined") {
+                delete result[key];
+            }
+            else {
+                result[key] = value;
+            }
+        }
+    }
+    return new Headers(result);
+}
+// Represents the authentication service used within an API interceptor
+class AuthService {
+    constructor(auth) {
+        const cachedLoggedInUser = JSON.parse(sessionStorage.getItem("session-logged-in-user"));
+        this.loggedInUser = cachedLoggedInUser || (auth === null || auth === void 0 ? void 0 : auth.defaultLoggedInUser);
+    }
+    login(newLoggedInUser) {
+        this.loggedInUser = newLoggedInUser;
+        sessionStorage.setItem("session-logged-in-user", JSON.stringify(newLoggedInUser));
+    }
+    logout() {
+        this.loggedInUser = null;
+        sessionStorage.removeItem("session-logged-in-user");
+    }
+    getCookieToken() {
+        return sessionStorage.getItem("session-anonymous-token");
+    }
+    setCookieToken(token) {
+        sessionStorage.setItem("session-anonymous-token", token);
+    }
+    getLoggedInUser() {
+        return this.loggedInUser;
+    }
+}
+exports.AuthService = AuthService;
+function initDb(apiDef) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        switch (apiDef.type) {
+            case "in-memory":
+                return new InMemoryDb_1.InMemoryDb((_a = apiDef.schemaDescriptor) === null || _a === void 0 ? void 0 : _a.tables, apiDef.initialData, apiDef.config);
+            default:
+                const indexedDb = new IndexedDb_1.IndexedDb((_b = apiDef.schemaDescriptor) === null || _b === void 0 ? void 0 : _b.tables, apiDef.initialData, apiDef.config);
+                yield indexedDb.initialize();
+                return indexedDb;
+        }
+    });
+}
+// An API interceptor implementation
+class ApiInterceptor {
+    constructor(apiDef) {
+        this.apiDef = apiDef;
+        this.backend = null;
+    }
+    initialize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // --- Transfer the handlers of API operations to the backend implementation
+            const backendOperations = {};
+            Object.entries(this.apiDef.operations || {}).forEach(([key, value]) => {
+                backendOperations[key] = value.handler;
+            });
+            const db = yield initDb(this.apiDef);
+            const authService = new AuthService(this.apiDef.auth);
+            const definition = {
+                operations: backendOperations,
+                initialize: this.apiDef.initialize,
+                helpers: this.apiDef.helpers,
+            };
+            this.backend = new Backend_1.Backend(definition, db, authService);
+        });
+    }
+    getOperations() {
+        return this.apiDef.operations || {};
+    }
+    getApiUrl() {
+        return this.apiDef.apiUrl || "";
+    }
+    // Use the "msw" package to execute the interceptor operation
+    executeOperation(operationId, req, cookies, params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            if (this.backend === null) {
+                throw new Error("Interceptor not initialized");
+            }
+            const operation = (_a = this.apiDef.operations) === null || _a === void 0 ? void 0 : _a[operationId];
+            if (!operation) {
+                throw new Error(`Unknown API interceptor operation: ${operationId}`);
+            }
+            let reqBody;
+            try {
+                if (operation.requestShape === "formData") {
+                    const formData = yield req.formData();
+                    const obj = {};
+                    for (const key of formData.keys()) {
+                        const all = formData.getAll(key);
+                        if (all.length === 1) {
+                            obj[key] = all[0];
+                        }
+                        else {
+                            obj[key] = all;
+                        }
+                    }
+                    reqBody = obj;
+                }
+                else if (operation.requestShape === "blob") {
+                    reqBody = yield req.blob();
+                }
+                else {
+                    reqBody = yield req.json();
+                }
+            }
+            catch (e) { }
+            // --- Map path parameters
+            const mappedParams = this.convertRequestParams({
+                pathParams: params,
+                queryParams: Object.fromEntries(new URL(req.url).searchParams),
+                requestBody: reqBody,
+                cookies: cookies,
+                requestHeaders: Object.fromEntries(req.headers.entries()) || {},
+            }, operation);
+            //artificial delay for http requests
+            yield (0, msw_1.delay)();
+            const cookieService = new Backend_1.CookieService();
+            const headerService = new Backend_1.HeaderService();
+            try {
+                const ret = yield this.backend.executeOperation(operationId, mappedParams, cookieService, headerService);
+                const emptyBody = ret === undefined || ret === null;
+                const successStatusCode = (_b = operation.successStatusCode) !== null && _b !== void 0 ? _b : (emptyBody ? Errors_1.HttpStatusCode.NoContent : Errors_1.HttpStatusCode.Ok);
+                const headers = mergeHeaders(cookieService.getCookieHeader(), headerService.getHeaders());
+                if (ret instanceof File) {
+                    headers.append("Content-type", ret.type);
+                    headers.append("Content-Length", ret.size + "");
+                    headers.append("Content-Disposition", `attachment; filename="${ret.name}"; filename*=utf-8''${ret.name}`);
+                    return msw_1.HttpResponse.arrayBuffer(yield ret.arrayBuffer(), {
+                        headers: headers,
+                        status: successStatusCode,
+                    });
+                }
+                if (emptyBody) {
+                    return new msw_1.HttpResponse(null, {
+                        headers: headers,
+                        status: successStatusCode,
+                    });
+                }
+                console.log(operationId, ret);
+                return msw_1.HttpResponse.json(ret, {
+                    headers: headers,
+                    status: successStatusCode,
+                });
+            }
+            catch (e) {
+                console.error(e);
+                if (e instanceof EngineError_1.ThrowStatementError && e.errorObject instanceof Errors_1.HttpError) {
+                    return msw_1.HttpResponse.json(e.errorObject.details, {
+                        headers: cookieService.getCookieHeader(),
+                        status: e.errorObject.status,
+                    });
+                }
+                return msw_1.HttpResponse.json({ message: e === null || e === void 0 ? void 0 : e.message }, {
+                    headers: cookieService.getCookieHeader(),
+                    status: Errors_1.HttpStatusCode.InternalServerError,
+                });
+            }
+        });
+    }
+    // Ensures that type path and query params are converted according to the operation definition
+    convertRequestParams(params, operation) {
+        return Object.assign(Object.assign({}, params), { pathParams: (0, request_params_1.convertRequestParamPart)(params.pathParams, operation.pathParamTypes), queryParams: (0, request_params_1.convertRequestParamPart)(params.queryParams, operation.queryParamTypes) });
+    }
+}
+exports.ApiInterceptor = ApiInterceptor;

package/dist/scripts/src/components-core/interception/ApiInterceptorProvider.js

@@ -0,0 +1,94 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiInterceptorProvider = ApiInterceptorProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const misc_1 = require("../utils/misc");
+const useApiInterceptorContext_1 = require("./useApiInterceptorContext");
+// This React component injects the API interceptor into the application's context
+function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, }) {
+    const [initialized, setInitialized] = (0, react_1.useState)(!interceptor);
+    // --- Whenever the interceptor changes, update the provider accordingly
+    (0, react_1.useEffect)(() => {
+        if (interceptor) {
+            setInitialized(false);
+            // --- We use "msw" to manage the API interception
+            let interceptorWorker;
+            (() => __awaiter(this, void 0, void 0, function* () {
+                // --- Create the worker on the fly
+                if (process.env.VITE_MOCK_ENABLED) {
+                    const { createApiInterceptorWorker } = yield Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker")));
+                    if (interceptor) {
+                        interceptorWorker = yield createApiInterceptorWorker(interceptor, apiWorker);
+                        // if the apiWorker comes from the outside, we don't handle the lifecycle here
+                        if (!apiWorker) {
+                            const workerFileLocation = (0, misc_1.normalizePath)(process.env.VITE_MOCK_WORKER_LOCATION || "mockServiceWorker.js");
+                            yield interceptorWorker.start({
+                                onUnhandledRequest: "bypass",
+                                quiet: true,
+                                serviceWorker: {
+                                    url: workerFileLocation,
+                                },
+                            });
+                        }
+                    }
+                }
+                setInitialized(true);
+            }))();
+            return () => {
+                // if the apiWorker comes from the outside, we don't handle the lifecycle here
+                if (!apiWorker) {
+                    interceptorWorker === null || interceptorWorker === void 0 ? void 0 : interceptorWorker.stop();
+                }
+            };
+        }
+    }, [apiWorker, interceptor, useHashBasedRouting]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            isMocked: (url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED,
+        };
+    }, [interceptor]);
+    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: initialized ? children || null : null }));
+}

package/dist/scripts/src/components-core/interception/Backend.js

@@ -0,0 +1,128 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backend = exports.HeaderService = exports.CookieService = exports.defaultBackendEnvironment = void 0;
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("../utils/misc");
+const statementUtils_1 = require("../utils/statementUtils");
+const date_functions_1 = require("../appContext/date-functions");
+const misc_utils_1 = require("../appContext/misc-utils");
+const date_utils_1 = require("../utils/date-utils");
+const Errors_1 = __importDefault(require("../interception/Errors"));
+// Use this backend environment as the default
+exports.defaultBackendEnvironment = {
+    getDate: (date) => (date ? new Date(date) : new Date()),
+};
+const mapValuesDeep = (obj, cb) => {
+    if ((0, lodash_es_1.isArray)(obj)) {
+        return obj.map((innerObj) => mapValuesDeep(innerObj, cb));
+    }
+    else if ((0, lodash_es_1.isObject)(obj)) {
+        return (0, lodash_es_1.mapValues)(obj, (val) => mapValuesDeep(val, cb));
+    }
+    else {
+        return cb(obj);
+    }
+};
+class CookieService {
+    constructor() {
+        this.cookies = {};
+    }
+    setCookie(key, value) {
+        this.cookies[key] = value;
+    }
+    getCookieHeader() {
+        const cookieArrays = [];
+        Object.entries(this.cookies).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                value.forEach((val) => cookieArrays.push(["Set-Cookie", `${key}=${val}`]));
+            }
+            else {
+                cookieArrays.push(["Set-Cookie", `${key}=${value}`]);
+            }
+        });
+        return new Headers(cookieArrays);
+    }
+}
+exports.CookieService = CookieService;
+class HeaderService {
+    constructor() {
+        this.headers = {};
+    }
+    setHeader(key, value) {
+        this.headers[key] = value;
+    }
+    getHeaders() {
+        const headersArray = [];
+        Object.entries(this.headers).forEach(([key, value]) => {
+            headersArray.push([key, value]);
+        });
+        return new Headers(headersArray);
+    }
+}
+exports.HeaderService = HeaderService;
+class Backend {
+    constructor(definition, db, authService) {
+        this.definition = definition;
+        this.db = db;
+        this.authService = authService;
+        this.apiStateHash = {};
+        this.resolvedHelpers = mapValuesDeep(definition.helpers, (helper) => {
+            if (typeof helper === "string") {
+                return (...params) => this.runFn(helper, ...params);
+            }
+            return helper;
+        });
+        if (definition.initialize) {
+            this.runFn(definition.initialize);
+        }
+    }
+    executeOperation(operationId, requestParams, cookieService, headerService) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const handler = (_a = this.definition.operations) === null || _a === void 0 ? void 0 : _a[operationId];
+            if (!handler) {
+                throw new Error(`Unknown backend operation: ${operationId}`);
+            }
+            return yield this.runFn(handler, requestParams, cookieService, headerService);
+        });
+    }
+    runFn(src, ...args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            let localContext = Object.assign(Object.assign({}, this.resolvedHelpers), { $db: this.db, $state: this.apiStateHash, $authService: this.authService, $env: exports.defaultBackendEnvironment, $loggedInUser: this.authService.getLoggedInUser(), $pathParams: (_a = args[0]) === null || _a === void 0 ? void 0 : _a.pathParams, $queryParams: (_b = args[0]) === null || _b === void 0 ? void 0 : _b.queryParams, $requestBody: (_c = args[0]) === null || _c === void 0 ? void 0 : _c.requestBody, $cookies: (_d = args[0]) === null || _d === void 0 ? void 0 : _d.cookies, $requestHeaders: (_e = args[0]) === null || _e === void 0 ? void 0 : _e.requestHeaders, $cookieService: args[1], $headerService: args[2] });
+            const evalContext = createEvalContext({
+                localContext: localContext,
+                eventArgs: args,
+                appContext: Object.assign(Object.assign(Object.assign({}, date_functions_1.dateFunctions), misc_utils_1.miscellaneousUtils), { delay: misc_1.delay,
+                    Errors: Errors_1.default, createFile: (...args) => new File(args[0], args[1], args[2]), getDate: date_utils_1.getDate }),
+            });
+            yield (0, statementUtils_1.runEventHandlerCode)(src, evalContext);
+            return ((_g = (_f = evalContext.mainThread) === null || _f === void 0 ? void 0 : _f.blocks) === null || _g === void 0 ? void 0 : _g.length)
+                ? evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1].returnValue
+                : undefined;
+        });
+    }
+}
+exports.Backend = Backend;
+function createEvalContext(parts) {
+    return Object.assign({
+        mainThread: {
+            childThreads: [],
+            blocks: [{ vars: {} }],
+            loops: [],
+            breakLabelValue: -1,
+        },
+    }, parts);
+}