xmlui 0.7.14 → 0.7.15

package/dist/scripts/src/components-core/interception/apiInterceptorWorker.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.createApiInterceptorWorker = void 0;
+const browser_1 = require("msw/browser");
+const lodash_es_1 = require("lodash-es");
+const msw_1 = require("msw");
+const ApiInterceptor_1 = require("@components-core/interception/ApiInterceptor");
+// Create handlers for the specified API interceptor
+function createHandlers(api) {
+    const operations = api.getOperations();
+    let handlers = [];
+    Object.entries(operations).forEach(([operationId, operation]) => {
+        let urls = [operation.url];
+        if ((0, lodash_es_1.isArray)(operation.url)) {
+            urls = operation.url;
+        }
+        urls.forEach((operationUrl) => {
+            handlers.push(msw_1.http[operation.method](`${api.getApiUrl()}${operationUrl}`, (_a) => __awaiter(this, [_a], void 0, function* ({ request, cookies, params }) {
+                return yield api.executeOperation(operationId, request, cookies, params);
+            })));
+        });
+    });
+    return handlers;
+}
+// Create the worker for the ApiInterceptorProvider
+const createApiInterceptorWorker = (apiInterceptorDefinition, apiWorker) => __awaiter(void 0, void 0, void 0, function* () {
+    const apiInstance = new ApiInterceptor_1.ApiInterceptor(apiInterceptorDefinition);
+    yield apiInstance.initialize();
+    const handlers = createHandlers(apiInstance);
+    let worker = apiWorker;
+    if (!worker) {
+        worker = (0, browser_1.setupWorker)();
+    }
+    worker.use(...handlers);
+    return worker;
+});
+exports.createApiInterceptorWorker = createApiInterceptorWorker;

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,54 @@
+"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 ComponentDefs_1 = require("@abstractions/ComponentDefs");
+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 }));
+}
+const ApiLoaderMd = (0, ComponentDefs_1.createMetadata)({
+    description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,
+    props: {
+        url: (0, ComponentDefs_1.d)("URL segment to use in the GET request"),
+        raw: (0, ComponentDefs_1.d)("If true, the loader returns the raw text response instead of parsing it as JSON"),
+    },
+});
+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 }));
+}, ApiLoaderMd);

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

@@ -0,0 +1,149 @@
+"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 = exports.DataLoaderMd = 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 ComponentDefs_1 = require("@abstractions/ComponentDefs");
+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 hooks_1 = require("@components-core/utils/hooks");
+function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, loaderInProgressChanged, loaderLoaded, loaderError, transformResult, }) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    const url = (0, extractParam_1.extractParam)(state, loader.props.url, 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.prevPageSelector && loader.props.nextPageSelector) {
+            return "BIDIRECTIONAL";
+        }
+        if (loader.props.prevPageSelector) {
+            return "BACKWARD";
+        }
+        if (loader.props.nextPageSelector) {
+            return "FORWARD";
+        }
+        return null;
+    }, [loader.props.nextPageSelector, loader.props.prevPageSelector]);
+    const hasPaging = pagingDirection !== null;
+    const api = (0, react_1.useMemo)(() => {
+        return new RestApiProxy_1.default(appContext);
+    }, [appContext]);
+    const doLoad = (0, react_1.useCallback)((abortSignal, pageParams) => __awaiter(this, void 0, void 0, function* () {
+        return yield api.execute({
+            abortSignal,
+            operation: loader.props,
+            params: Object.assign(Object.assign({}, state), { $pageParams: pageParams }),
+            resolveBindingExpressions: true,
+        });
+    }), [api, loader.props, state]);
+    const queryId = (0, react_1.useMemo)(() => {
+        return new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator(url, queryParams, appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl).asKey();
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, 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) => __awaiter(this, void 0, void 0, function* () {
+        loaderError(error);
+        if (onError) {
+            const result = yield onError(error);
+            if (result === false) {
+                if (loadingToastIdRef.current) {
+                    react_hot_toast_1.default.dismiss(loadingToastIdRef.current);
+                }
+                return;
+            }
+        }
+        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, onError]);
+    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, transformResult: transformResult }, 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, transformResult: transformResult }, queryId === null || queryId === void 0 ? void 0 : queryId.join("")));
+}
+exports.DataLoaderMd = (0, ComponentDefs_1.createMetadata)({
+    description: "This component manages data fetching from a web API",
+    props: {
+        method: (0, ComponentDefs_1.d)("The HTTP method to use"),
+        url: (0, ComponentDefs_1.d)("The URL to fetch data from"),
+        rawBody: (0, ComponentDefs_1.d)("The raw body of the request"),
+        body: (0, ComponentDefs_1.d)("The body of the request to be sent as JSON"),
+        queryParams: (0, ComponentDefs_1.d)("Query parameters to send with the request"),
+        headers: (0, ComponentDefs_1.d)("Headers to send with the request"),
+        pollIntervalInSeconds: (0, ComponentDefs_1.d)("The interval in seconds to poll the API for refreshing data"),
+        resultSelector: (0, ComponentDefs_1.d)("An expression to extract the result from the response"),
+        prevPageSelector: (0, ComponentDefs_1.d)("An expression to extract the previous page parameter from the response"),
+        nextPageSelector: (0, ComponentDefs_1.d)("An expression to extract the next page parameter from the response"),
+        inProgressNotificationMessage: (0, ComponentDefs_1.d)("The message to show when the loader is in progress"),
+        completedNotificationMessage: (0, ComponentDefs_1.d)("The message to show when the loader completes"),
+        errorNotificationMessage: (0, ComponentDefs_1.d)("The message to show when an error occurs"),
+        transformResult: (0, ComponentDefs_1.d)("Function for transforming the datasource result"),
+    },
+    events: {
+        loaded: (0, ComponentDefs_1.d)("Event to trigger when the data is loaded"),
+        error: (0, ComponentDefs_1.d)("This event fires when an error occurs while fetching data"),
+    },
+});
+exports.dataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("DataLoader", ({ loader, state, loaderLoaded, loaderInProgressChanged, loaderError, registerComponentApi, lookupAction, lookupSyncCallback, }) => {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsx)(DataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, registerComponentApi: registerComponentApi, transformResult: lookupSyncCallback(loader.props.transformResult), onLoaded: lookupAction((_a = loader.events) === null || _a === void 0 ? void 0 : _a.loaded, { eventName: "loaded" }), onError: lookupAction((_b = loader.events) === null || _b === void 0 ? void 0 : _b.error, { eventName: "error" }) }));
+}, exports.DataLoaderMd);

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

@@ -0,0 +1,62 @@
+"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 = exports.ExternalDataLoaderMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+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.ExternalDataLoaderMd = (0, ComponentDefs_1.createMetadata)({
+    description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,
+    props: {
+        url: (0, ComponentDefs_1.d)("URL segment to use in the GET request"),
+        method: (0, ComponentDefs_1.d)("The HTTP method to use"),
+        headers: (0, ComponentDefs_1.d)("Headers to send with the request"),
+        data: (0, ComponentDefs_1.d)("The body of the request to be sent as JSON"),
+    },
+});
+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 }));
+}, exports.ExternalDataLoaderMd);

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

@@ -0,0 +1,126 @@
+"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.Loader = Loader;
+const react_1 = require("react");
+const react_query_1 = require("@tanstack/react-query");
+const extractParam_1 = require("@components-core/utils/extractParam");
+const immer_1 = require("immer");
+const AppContext_1 = require("@components-core/AppContext");
+const hooks_1 = require("@components-core/utils/hooks");
+function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderError, transformResult }) {
+    const { uid } = loader;
+    const appContext = (0, AppContext_1.useAppContext)();
+    // --- Rely on react-query to decide when data fetching should use the cache or when is should fetch the data from
+    // --- its data source.
+    // --- data: The data obtained by the query
+    // --- status: Query execution status
+    // --- error: Error information about the current query error (in "error" state)
+    // --- refetch: The function that can be used to re-fetch the data (because of data/state changes)
+    const { data, status, isFetching, error, refetch } = (0, react_query_1.useQuery)({
+        queryKey: (0, react_1.useMemo)(() => queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)], [appContext, loader.props, queryId, state, uid]),
+        queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal }) {
+            const newVar = yield loaderFn(signal);
+            if (newVar === undefined) {
+                return null;
+            }
+            return newVar;
+        }), [loaderFn]),
+        select: (0, react_1.useCallback)((data) => {
+            let result = data;
+            const resultSelector = loader.props.resultSelector;
+            if (resultSelector) {
+                result = (0, extractParam_1.extractParam)({ $response: data }, resultSelector.startsWith("{") ? resultSelector : `{$response.${resultSelector}}`);
+            }
+            return transformResult ? transformResult(result) : result;
+        }, [loader.props.resultSelector, transformResult]),
+        retry: false
+    });
+    (0, react_1.useEffect)(() => {
+        let intervalId;
+        if (pollIntervalInSeconds) {
+            intervalId = setInterval(() => {
+                refetch();
+            }, pollIntervalInSeconds * 1000);
+        }
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [pollIntervalInSeconds, refetch]);
+    const prevData = (0, hooks_1.usePrevious)(data);
+    const prevError = (0, hooks_1.usePrevious)(error);
+    (0, react_1.useLayoutEffect)(() => {
+        loaderInProgressChanged(isFetching);
+    }, [isFetching, loaderInProgressChanged]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (status === "success" && data !== prevData) {
+            loaderLoaded(data);
+            //we do this to push the onLoaded callback to the next event loop.
+            // It works, because useLayoutEffect will run synchronously after the render, and the onLoaded callback will have
+            // access to the latest loader value
+            setTimeout(() => {
+                onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(data);
+            }, 0);
+        }
+        else if (status === "error" && error !== prevError) {
+            loaderError(error);
+        }
+    }, [data, error, loaderError, loaderLoaded, onLoaded, prevData, prevError, status]);
+    (0, react_1.useLayoutEffect)(() => {
+        return () => {
+            loaderLoaded(undefined);
+        };
+    }, [loaderLoaded, uid]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            refetch,
+            update: (updater) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                const oldData = (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.getQueryData(queryId);
+                if (!oldData) {
+                    //loader not loaded yet, we skip the update
+                    return;
+                }
+                const draft = (0, immer_1.createDraft)(oldData);
+                const ret = yield updater(draft); //if it returns a value, we take it as the new data
+                const newData = ret || (0, immer_1.finishDraft)(draft);
+                if (oldData.length !== newData.length) {
+                    throw new Error("Use this method for update only. If you want to add or delete, call the addItem/deleteItem method.");
+                }
+                // console.log("BEFORE: ", appContext.queryClient?.getQueryData(queryId!));
+                (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryId, newData);
+                // console.log("AFTER: ", appContext.queryClient?.getQueryData(queryId!));
+            }),
+            addItem: (element, indexToInsert) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                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.push(element);
+                }
+                else {
+                    draft.splice(indexToInsert, 0, element);
+                }
+                const newData = (0, immer_1.finishDraft)(draft);
+                (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryId, newData);
+            }),
+            getItems: () => __awaiter(this, void 0, void 0, function* () {
+                return data;
+            }),
+            deleteItem: (element) => __awaiter(this, void 0, void 0, function* () {
+                throw new Error("not implemented");
+            }),
+        });
+    }, [appContext.queryClient, queryId, refetch, registerComponentApi, data]);
+    return null;
+}

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

@@ -0,0 +1,40 @@
+"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.mockLoaderRenderer = exports.MockLoaderMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+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");
+function ApiLoader({ loader, loaderInProgressChanged, loaderError, loaderLoaded, state, }) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    const waitTime = (0, extractParam_1.extractParam)(state, loader.props.waitTime, appContext);
+    const responseObj = (0, extractParam_1.extractParam)(state, loader.props.data, appContext);
+    const doLoad = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        waitTime && (yield (0, misc_1.asyncWait)(waitTime));
+        return responseObj;
+    }), [responseObj, waitTime]);
+    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad }));
+}
+exports.MockLoaderMd = (0, ComponentDefs_1.createMetadata)({
+    description: "A loader that simulates a delay and returns a predefined response",
+    props: {
+        waitTime: (0, ComponentDefs_1.d)("The time to wait before returning the response"),
+        data: (0, ComponentDefs_1.d)("The data to return"),
+    },
+});
+exports.mockLoaderRenderer = (0, renderers_1.createLoaderRenderer)("MockLoader", ({ loader, state, loaderInProgressChanged, loaderLoaded, loaderError }) => {
+    return ((0, jsx_runtime_1.jsx)(ApiLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+}, exports.MockLoaderMd);