xmlui 0.4.0

package/dist/scripts/src/components-core/container/ContainerComponentDef.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isContainerLike = isContainerLike;
+// Tests if the particular component definition needs to be wrapped with an inline container
+function isContainerLike(node) {
+    if (node.type === "Container") {
+        return true;
+    }
+    return !!(node.loaders ||
+        node.vars ||
+        node.uses ||
+        // TODO: Check if this is needed
+        // node.props?.uses !== undefined ||
+        node.functions ||
+        node.scriptCollected);
+}

package/dist/scripts/src/components-core/container/buildProxy.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Use this function to build a JavaScript proxy for localContext objects. The responsibility of the proxy is to
+ * collect the changes within the localContext so that we can refresh the UI according to them.
+ */
+function buildProxy(proxyTarget, callback, tree = []) {
+    // --- We identify a particular (deep) localContext property by its full path; this function create the path
+    const getPath = (prop) => tree.concat(prop).join(".");
+    const proxiedValues = new WeakMap();
+    // --- Create the proxy object for `proxyTarget`
+    return new Proxy(proxyTarget, {
+        get: function (target, prop, receiver) {
+            const value = Reflect.get(target, prop, receiver);
+            // --- Create proxies only for writable objects and arrays, except arrow function expressions.
+            if (value &&
+                !value._ARROW_EXPR_ &&
+                !Object.isFrozen(value) &&
+                typeof value === "object" &&
+                ["Array", "Object"].includes(value.constructor.name)) {
+                //just to make sure that accessing the proxied objects' field gets the same reference every time
+                //  e.g. this wouldn't be true otherwise: proxiedObject['field'] === proxiedObject['field']
+                if (!proxiedValues.has(value)) {
+                    proxiedValues.set(value, buildProxy(value, callback, tree.concat(prop)));
+                }
+                return proxiedValues.get(value);
+            }
+            // --- Do not create a proxy for other objects
+            return value;
+        },
+        set: function (target, prop, value, receiver) {
+            // --- Invoke the callback function to sign any change in the proxied object
+            callback({
+                action: "set",
+                path: getPath(prop),
+                pathArray: tree.concat(prop),
+                target,
+                newValue: value,
+                previousValue: Reflect.get(target, prop, receiver),
+            });
+            // --- Execute the change.
+            // --- Note, any error raised in the callback will prevent from changing the property value
+            return Reflect.set(target, prop, value, receiver);
+        },
+        deleteProperty: function (target, prop) {
+            // --- Invoke the callback function to delete a property
+            callback({ action: "unset", path: getPath(prop), pathArray: tree.concat(prop), target });
+            // --- Execute the change
+            // --- Note, any error raised in the callback will prevent from deleting the property value
+            return Reflect.deleteProperty(target, prop);
+        },
+    });
+}
+exports.default = buildProxy;

package/dist/scripts/src/components-core/container/collectFnVarDeps.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectFnVarDeps = collectFnVarDeps;
+function collectFnVarDeps(fnDeps = {}) {
+    const fnKeys = Object.keys(fnDeps);
+    function collectFnDeps(depKey, visitedPath = new Set()) {
+        if (!fnKeys.includes(depKey)) {
+            return [depKey];
+        }
+        visitedPath.add(depKey);
+        const ret = [];
+        fnDeps[depKey].forEach((key) => {
+            if (visitedPath.has(key)) { //we already walked here, skip this one (avoid infinite loops for circular deps)
+                return;
+            }
+            visitedPath.add(key);
+            ret.push(...collectFnDeps(key, visitedPath));
+        });
+        return ret;
+    }
+    const flatFnDeps = {};
+    fnKeys.forEach((key) => {
+        flatFnDeps[key] = [...new Set(collectFnDeps(key))];
+    });
+    return flatFnDeps;
+}

package/dist/scripts/src/components-core/container/valueExtractor.js

@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asOptionalBoolean = asOptionalBoolean;
+exports.createValueExtractor = createValueExtractor;
+const memoize_one_1 = __importDefault(require("memoize-one"));
+const lodash_es_1 = require("lodash-es");
+const ParameterParser_1 = require("@components-core/script-runner/ParameterParser");
+const misc_1 = require("@components-core/utils/misc");
+const visitors_1 = require("@components-core/script-runner/visitors");
+const extractParam_1 = require("@components-core/utils/extractParam");
+const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
+function parseStringArray(input) {
+    const trimmedInput = input.trim();
+    if (trimmedInput.startsWith("[") && trimmedInput.endsWith("]")) {
+        const content = trimmedInput.slice(1, -1);
+        const items = content.split(",").map((item) => item.trim());
+        return items.map((item) => item.replace(/^['"]|['"]$/g, ""));
+    }
+    else {
+        throw new Error("Invalid array format");
+    }
+}
+function collectParams(expression) {
+    const params = [];
+    if (typeof expression === "string") {
+        params.push(...(0, ParameterParser_1.parseParameterString)(expression));
+    }
+    else if (Array.isArray(expression)) {
+        expression.forEach((exp) => {
+            params.push(...collectParams(exp));
+        });
+    }
+    else if ((0, lodash_es_1.isPlainObject)(expression)) {
+        Object.entries(expression).forEach(([key, value]) => {
+            params.push(...collectParams(value));
+        });
+    }
+    return params;
+}
+function asOptionalBoolean(value, defValue) {
+    if (value === undefined || value === null)
+        return defValue;
+    if (typeof value === "string") {
+        if (value.trim().toLowerCase() === "true") {
+            return true;
+        }
+        if (value.trim().toLowerCase() === "false") {
+            return false;
+        }
+    }
+    if (typeof value === "boolean") {
+        return value;
+    }
+    throw new Error(`A boolean value expected but ${typeof value} received.`);
+}
+// This function represents the extractor function we pass to extractValue
+function createValueExtractor(state, appContext, referenceTrackedApi, memoedVarsRef) {
+    // --- Extract the parameter and retrieve as is is
+    const extractor = (expression, strict) => {
+        if (!expression) {
+            return expression;
+        }
+        if ((0, misc_1.isPrimitive)(expression) && !(0, lodash_es_1.isString)(expression)) {
+            return expression;
+        }
+        let expressionString = expression;
+        if (typeof expression !== "string") {
+            if (strict) {
+                return expression;
+            }
+            expressionString = JSON.stringify(expression);
+        }
+        if (!memoedVarsRef.current.has(expressionString)) {
+            const params = collectParams(expression);
+            memoedVarsRef.current.set(expressionString, {
+                getDependencies: (0, memoize_one_1.default)((_expressionString, referenceTrackedApi) => {
+                    let ret = new Set();
+                    params.forEach((param) => {
+                        if (param.type === "expression") {
+                            ret = new Set([...ret, ...(0, visitors_1.collectVariableDependencies)(param.value, referenceTrackedApi)]);
+                        }
+                    });
+                    return Array.from(ret);
+                }),
+                obtainValue: (0, memoize_one_1.default)((expression, state, appContext, strict, deps, appContextDeps) => {
+                    // console.log("COMP, BUST, obtain value called with", expression, state, appContext, deps,  appContextDeps);
+                    return (0, extractParam_1.extractParam)(state, expression, appContext, strict);
+                }, ([_newExpression, _newState, _newAppContext, _newStrict, newDeps, newAppContextDeps], [_lastExpression, _lastState, _lastAppContext, _lastStrict, lastDeps, lastAppContextDeps]) => {
+                    return (0, misc_1.shallowCompare)(newDeps, lastDeps) && (0, misc_1.shallowCompare)(newAppContextDeps, lastAppContextDeps);
+                }),
+            });
+        }
+        const expressionDependencies = memoedVarsRef.current
+            .get(expressionString)
+            .getDependencies(expressionString, referenceTrackedApi);
+        const depValues = (0, misc_1.pickFromObject)(state, expressionDependencies);
+        const appContextDepValues = (0, misc_1.pickFromObject)(appContext, expressionDependencies);
+        // console.log("COMP, obtain value called with", depValues, appContextDepValues, expressionDependencies);
+        return memoedVarsRef.current.get(expressionString).obtainValue(expression, state, appContext, strict, depValues, appContextDepValues);
+    };
+    // --- Extract a string value
+    extractor.asString = (expression) => {
+        var _a, _b;
+        return (_b = (_a = extractor(expression)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "";
+    };
+    // --- Extract an optional string value
+    extractor.asOptionalString = (expression) => {
+        var _a;
+        return (_a = extractor(expression)) === null || _a === void 0 ? void 0 : _a.toString();
+    };
+    extractor.asDisplayText = (expression) => {
+        var _a;
+        let text = (_a = extractor(expression)) === null || _a === void 0 ? void 0 : _a.toString();
+        if (text) {
+            let replaced = "";
+            let spaceFound = false;
+            for (const char of text) {
+                if (char === " " || char === "\t") {
+                    replaced += spaceFound ? "\xa0" : " ";
+                    spaceFound = true;
+                }
+                else {
+                    replaced += char;
+                    spaceFound = char === "\xa0";
+                }
+            }
+            text = replaced;
+        }
+        return text;
+    };
+    // ---Extract an array of strings
+    extractor.asOptionalStringArray = (expression) => {
+        const value = extractor(expression);
+        if (value === undefined || value === null)
+            return [];
+        if (typeof value === "string" && value.trim() !== "") {
+            //console.log(parseStringArray(value));
+            return parseStringArray(value);
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => item.toString());
+        }
+        throw new Error(`An array of strings expected but ${typeof value} received.`);
+    };
+    // --- Extract a numeric value
+    extractor.asNumber = (expression) => {
+        const value = extractor(expression);
+        if (typeof value === "number")
+            return value;
+        throw new Error(`A numeric value expected but ${typeof value} received.`);
+    };
+    // --- Extract an optional numeric value
+    extractor.asOptionalNumber = (expression, defValue) => {
+        const value = extractor(expression);
+        if (value === undefined || value === null)
+            return defValue;
+        if (typeof value === "string" && !isNaN(parseFloat(value))) {
+            return Number(value);
+        }
+        if (typeof value === "number")
+            return value;
+        throw new Error(`A numeric value expected but ${typeof value} received.`);
+    };
+    // --- Extract a Boolean value
+    extractor.asBoolean = (expression) => {
+        return !!extractor(expression);
+    };
+    // --- Extract an optional Boolean value
+    extractor.asOptionalBoolean = (expression, defValue) => {
+        return asOptionalBoolean(extractor(expression), defValue);
+    };
+    // --- Extract an optional size value
+    extractor.asSize = (expression) => {
+        var _a;
+        const value = extractor(expression);
+        if (value === undefined || value === null)
+            return undefined;
+        try {
+            const parser = new StyleParser_1.StyleParser(value);
+            const size = parser.parseSize();
+            if (size === null || size === void 0 ? void 0 : size.themeId) {
+                return (0, StyleParser_1.toCssVar)(size.themeId);
+            }
+            return size ? `${size.value}${(_a = size.unit) !== null && _a !== void 0 ? _a : "px"}` : undefined;
+        }
+        catch (_b) {
+            return undefined;
+        }
+    };
+    // --- Done.
+    return extractor;
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layoutOptionKeys = void 0;
+exports.desc = desc;
+// Creates a simple property descriptor
+function desc(description) {
+    return {
+        description,
+    };
+}
+// We need these keys for extracting layout parameters
+exports.layoutOptionKeys = [
+    "horizontalAlignment",
+    "verticalAlignment",
+    "orientation",
+    "width",
+    "minWidth",
+    "maxWidth",
+    "height",
+    "minHeight",
+    "maxHeight",
+    "gap",
+    "border",
+    "borderTop",
+    "borderRight",
+    "borderBottom",
+    "borderLeft",
+    "radius",
+    "radiusTopLeft",
+    "radiusTopRight",
+    "radiusBottomLeft",
+    "radiusBottomRight",
+    "padding",
+    "horizontalPadding",
+    "verticalPadding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "backgroundColor",
+    "background",
+    "shadow",
+    "direction",
+    "horizontalOverflow",
+    "verticalOverflow",
+    "zIndex",
+    "color",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "italic",
+    "textDecoration",
+    "wrapContent",
+    "canShrink",
+    "margin",
+    "horizontalMargin",
+    "verticalMargin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "userSelect",
+    "letterSpacing",
+    "textTransform",
+    "lineHeight",
+    "opacity",
+    "cursor",
+    "textWrap",
+    "textAlign",
+    "textAlignLast",
+    "top",
+    "right",
+    "bottom",
+    "left",
+];

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiInterceptorContext = void 0;
+exports.useApiInterceptorContext = useApiInterceptorContext;
+const react_1 = require("react");
+exports.ApiInterceptorContext = (0, react_1.createContext)(null);
+function useApiInterceptorContext() {
+    return (0, react_1.useContext)(exports.ApiInterceptorContext);
+}

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

@@ -0,0 +1,46 @@
+"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.apiLoaderRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Loader_1 = require("./Loader");
+const misc_1 = require("@components-core/utils/misc");
+const extractParam_1 = require("@components-core/utils/extractParam");
+const renderers_1 = require("@components-core/renderers");
+const AppContext_1 = require("@components-core/AppContext");
+/**
+ * Represents a non-displayed React component, which handles the specified API loader
+ */
+function ApiLoader({ loader, loaderInProgressChanged, loaderLoaded, loaderError, state, doNotRemoveNulls, }) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
+    const loadable = !!url;
+    const doLoad = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        if (!loadable) {
+            return;
+        }
+        console.log("doLoad ", url);
+        const response = yield fetch(url);
+        if (loader.props.raw) {
+            return yield response.text();
+        }
+        const responseObj = yield response.json();
+        if (!doNotRemoveNulls) {
+            (0, misc_1.removeNullProperties)(responseObj);
+        }
+        return responseObj;
+    }), [doNotRemoveNulls, loadable, loader.props.raw, url]);
+    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad }));
+}
+exports.apiLoaderRenderer = (0, renderers_1.createLoaderRenderer)("ApiLoader", ({ loader, state, dispatch, loaderInProgressChanged, loaderLoaded, loaderError }) => {
+    return ((0, jsx_runtime_1.jsx)(ApiLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+});

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

@@ -0,0 +1,160 @@
+"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.dataLoaderRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const renderers_1 = require("@components-core/renderers");
+const RestApiProxy_1 = __importDefault(require("@components-core/RestApiProxy"));
+const extractParam_1 = require("@components-core/utils/extractParam");
+const DataLoaderQueryKeyGenerator_1 = require("@components-core/utils/DataLoaderQueryKeyGenerator");
+const PageableLoader_1 = require("@components-core/loader/PageableLoader");
+const Loader_1 = require("@components-core/loader/Loader");
+const AppContext_1 = require("@components-core/AppContext");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const hooks_1 = require("@components-core/utils/hooks");
+function DataLoader({ loader, state, registerComponentApi, onLoaded, loaderInProgressChanged, loaderLoaded, loaderError, }) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
+    const debounceTimeInMs = (0, extractParam_1.extractParam)(state, loader.props.debounceTimeInMs, appContext);
+    const queryParamsInner = (0, react_1.useMemo)(() => {
+        return (0, extractParam_1.extractParam)(state, loader.props.queryParams, appContext);
+    }, [appContext, loader.props.queryParams, state]);
+    const queryParams = (0, hooks_1.useShallowCompareMemoize)(queryParamsInner);
+    const pagingDirection = (0, react_1.useMemo)(() => {
+        if (loader.props.prevPageParamSelector && loader.props.nextPageParamSelector) {
+            return "BIDIRECTIONAL";
+        }
+        if (loader.props.prevPageParamSelector) {
+            return "BACKWARD";
+        }
+        if (loader.props.nextPageParamSelector) {
+            return "FORWARD";
+        }
+        return null;
+    }, [loader.props.nextPageParamSelector, loader.props.prevPageParamSelector]);
+    const hasPaging = pagingDirection !== null;
+    const api = (0, react_1.useMemo)(() => {
+        return new RestApiProxy_1.default(appContext);
+    }, [appContext]);
+    const doLoad = (abortSignal, pageParams) => __awaiter(this, void 0, void 0, function* () {
+        const response = yield api.execute({
+            abortSignal,
+            operation: loader.props,
+            params: Object.assign(Object.assign({}, state), { $pageParams: pageParams }),
+            resolveBindingExpressions: true,
+        });
+        let result = response;
+        const resultSelector = loader.props.resultSelector;
+        if (resultSelector) {
+            result = (0, extractParam_1.extractParam)({ $response: response }, resultSelector.startsWith("{") ? resultSelector : `{$response.${resultSelector}}`);
+        }
+        let prevPageParam = undefined;
+        const prevPageParamSelector = loader.props.prevPageParamSelector;
+        if (prevPageParamSelector) {
+            prevPageParam = (0, extractParam_1.extractParam)({ $response: response }, prevPageParamSelector.startsWith("{") ? prevPageParamSelector : `{$response.${prevPageParamSelector}}`);
+        }
+        let nextPageParam = undefined;
+        const nextPageParamSelector = loader.props.nextPageParamSelector;
+        if (nextPageParamSelector) {
+            nextPageParam = (0, extractParam_1.extractParam)({ $response: response }, nextPageParamSelector.startsWith("{") ? nextPageParamSelector : `{$response.${nextPageParamSelector}}`);
+        }
+        if (hasPaging) {
+            return {
+                result,
+                prevPageParam,
+                nextPageParam,
+            };
+        }
+        return result;
+    });
+    const queryId = (0, react_1.useMemo)(() => {
+        return new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator(url, queryParams).asKey();
+    }, [queryParams, url]);
+    const stateRef = (0, react_1.useRef)({ state, appContext });
+    stateRef.current = { state, appContext };
+    const loadingToastIdRef = (0, react_1.useRef)(undefined);
+    const inProgress = (0, react_1.useCallback)((isInProgress) => {
+        loaderInProgressChanged(isInProgress);
+        const inProgressMessage = (0, extractParam_1.extractParam)(stateRef.current.state, loader.props.inProgressNotificationMessage, stateRef.current.appContext);
+        if (isInProgress && inProgressMessage) {
+            if (loadingToastIdRef.current) {
+                react_hot_toast_1.default.dismiss(loadingToastIdRef.current);
+            }
+            loadingToastIdRef.current = react_hot_toast_1.default.loading(inProgressMessage);
+        }
+        else {
+            if (loadingToastIdRef.current) {
+                react_hot_toast_1.default.dismiss(loadingToastIdRef.current);
+            }
+        }
+    }, [loader.props.inProgressNotificationMessage, loaderInProgressChanged]);
+    const loaded = (0, react_1.useCallback)((data, pageInfo) => {
+        loaderLoaded(data, pageInfo);
+        const completedMessage = (0, extractParam_1.extractParam)(Object.assign(Object.assign({}, stateRef.current.state), { $result: data }), loader.props.completedNotificationMessage, stateRef.current.appContext);
+        if (completedMessage) {
+            react_hot_toast_1.default.success(completedMessage, {
+                id: loadingToastIdRef.current,
+            });
+        }
+        else {
+            if (loadingToastIdRef.current) {
+                react_hot_toast_1.default.dismiss(loadingToastIdRef.current);
+            }
+        }
+    }, [loader.props.completedNotificationMessage, loaderLoaded]);
+    const error = (0, react_1.useCallback)((error) => {
+        loaderError(error);
+        const errorMessage = (0, extractParam_1.extractParam)(Object.assign(Object.assign({}, stateRef.current.state), { $error: error }), loader.props.errorNotificationMessage, stateRef.current.appContext);
+        if (errorMessage) {
+            react_hot_toast_1.default.error(errorMessage, {
+                id: loadingToastIdRef.current,
+            });
+        }
+        else {
+            if (loadingToastIdRef.current) {
+                react_hot_toast_1.default.dismiss(loadingToastIdRef.current);
+            }
+        }
+        if (errorMessage === undefined) {
+            appContext.signError(error);
+        }
+    }, [appContext, loader.props.errorNotificationMessage, loaderError]);
+    const pollIntervalInSeconds = (0, extractParam_1.extractParam)(state, loader.props.pollIntervalInSeconds, appContext);
+    return hasPaging ? ((0, jsx_runtime_1.jsx)(PageableLoader_1.PageableLoader, { queryId: queryId, state: state, loader: loader, loaderInProgressChanged: inProgress, loaderLoaded: loaded, loaderError: error, loaderFn: doLoad, registerComponentApi: registerComponentApi, pollIntervalInSeconds: pollIntervalInSeconds, onLoaded: onLoaded, direction: pagingDirection }, queryId === null || queryId === void 0 ? void 0 : queryId.join(""))) : ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { queryId: queryId, state: state, loader: loader, loaderInProgressChanged: inProgress, loaderLoaded: loaded, loaderError: error, loaderFn: doLoad, pollIntervalInSeconds: pollIntervalInSeconds, registerComponentApi: registerComponentApi, onLoaded: onLoaded }, queryId === null || queryId === void 0 ? void 0 : queryId.join("")));
+}
+const metadata = {
+    displayName: "DataLoader",
+    description: "This component manages data fetching from a web API",
+    props: {
+        method: (0, descriptorHelper_1.desc)("The HTTP method to use"),
+        url: (0, descriptorHelper_1.desc)("The URL to fetch data from"),
+        rawBody: (0, descriptorHelper_1.desc)("The raw body of the request"),
+        body: (0, descriptorHelper_1.desc)("The body of the request to be sent as JSON"),
+        queryParams: (0, descriptorHelper_1.desc)("Query parameters to send with the request"),
+        headers: (0, descriptorHelper_1.desc)("Headers to send with the request"),
+        pollIntervalInSeconds: (0, descriptorHelper_1.desc)("The interval in seconds to poll the API for refreshing data"),
+        resultSelector: (0, descriptorHelper_1.desc)("An expression to extract the result from the response"),
+        prevPageParamSelector: (0, descriptorHelper_1.desc)("An expression to extract the previous page parameter from the response"),
+        nextPageParamSelector: (0, descriptorHelper_1.desc)("An expression to extract the next page parameter from the response"),
+    },
+    events: {
+        loaded: (0, descriptorHelper_1.desc)("Event to trigger when the data is loaded"),
+    },
+};
+exports.dataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("DataLoader", ({ loader, state, loaderLoaded, loaderInProgressChanged, loaderError, registerComponentApi, lookupAction }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(DataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, registerComponentApi: registerComponentApi, onLoaded: lookupAction((_a = loader.events) === null || _a === void 0 ? void 0 : _a.loaded, { eventName: "loaded" }) }));
+}, metadata);

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

@@ -0,0 +1,52 @@
+"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.externalDataLoaderRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Loader_1 = require("./Loader");
+const misc_1 = require("@components-core/utils/misc");
+const extractParam_1 = require("@components-core/utils/extractParam");
+const renderers_1 = require("@components-core/renderers");
+const AppContext_1 = require("@components-core/AppContext");
+/**
+ * Represents a non-displayed React component, which handles the specified API loader
+ */
+function ExternalDataLoader({ loader, loaderInProgressChanged, loaderError, loaderLoaded, state, doNotRemoveNulls, }) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    const method = (0, extractParam_1.extractParam)(state, loader.props.method, appContext);
+    const headers = (0, extractParam_1.extractParam)(state, loader.props.headers, appContext);
+    const data = (0, extractParam_1.extractParam)(state, loader.props.data, appContext);
+    console.log("resolve");
+    const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
+    const urlLoadable = !!url;
+    const doLoad = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        if (!urlLoadable) {
+            return;
+        }
+        console.log("doLoad ", url, data);
+        const response = yield fetch(url, {
+            method: method || "POST",
+            headers: Object.assign({ "Content-Type": "application/json" }, headers),
+            body: JSON.stringify(data),
+        });
+        const responseObj = yield response.json();
+        if (!doNotRemoveNulls) {
+            (0, misc_1.removeNullProperties)(responseObj);
+        }
+        console.log("result", responseObj);
+        return responseObj;
+    }), [urlLoadable, headers, data, url, method, doNotRemoveNulls]);
+    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad }));
+}
+exports.externalDataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("ExternalDataLoader", ({ loader, state, loaderInProgressChanged, loaderError, loaderLoaded }) => {
+    return ((0, jsx_runtime_1.jsx)(ExternalDataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+});