xmlui 0.11.3 → 0.11.6

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

@@ -1,159 +0,0 @@
-"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 immer_1 = require("immer");
-const extractParam_1 = require("../utils/extractParam");
-const AppContext_1 = require("../AppContext");
-const hooks_1 = require("../utils/hooks");
-const useApiInterceptorContext_1 = require("../interception/useApiInterceptorContext");
-function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, transformResult, structuralSharing = true, }) {
-    const { uid } = loader;
-    const appContext = (0, AppContext_1.useAppContext)();
-    const { initialized } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
-    // --- 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, isLoading, error, refetch, isRefetching } = (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]),
-        structuralSharing,
-        //we pause the loaders if the apiInterceptor is not initialized (true when the app is not using mockApi)
-        enabled: initialized,
-        queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal }) {
-            // console.log("[Loader queryFn] Starting to fetch data...");
-            try {
-                const newVar = yield loaderFn(signal);
-                //console.log("[Loader queryFn] Data received:", newVar);
-                if (newVar === undefined) {
-                    //console.log("[Loader queryFn] Data is undefined, returning null");
-                    return null;
-                }
-                return newVar;
-            }
-            catch (error) {
-                //console.error("[Loader queryFn] Error fetching data:", error);
-                throw error;
-            }
-        }), [loaderFn]),
-        select: (0, react_1.useCallback)((data) => {
-            // console.log("[Loader select] Data before transform:", data);
-            // console.log("[Loader select] resultSelector:", loader.props.resultSelector);
-            // console.log("[Loader select] transformResult function:", !!transformResult);
-            let result = data;
-            const resultSelector = loader.props.resultSelector;
-            if (resultSelector) {
-                //console.log("[Loader select] Applying resultSelector");
-                result = (0, extractParam_1.extractParam)({ $response: data }, resultSelector.startsWith("{") ? resultSelector : `{$response.${resultSelector}}`);
-                //console.log("[Loader select] Result after resultSelector:", result);
-            }
-            const finalResult = transformResult ? transformResult(result) : result;
-            //console.log("[Loader select] Final result:", finalResult);
-            return finalResult;
-        }, [loader.props.resultSelector, transformResult]),
-        retry: false,
-    });
-    (0, react_1.useEffect)(() => {
-        let intervalId;
-        if (pollIntervalInSeconds) {
-            intervalId = setInterval(() => {
-                void 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, hooks_1.useIsomorphicLayoutEffect)(() => {
-        loaderInProgressChanged(isFetching || isLoading);
-    }, [isLoading, isFetching, loaderInProgressChanged]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        loaderIsRefetchingChanged(isRefetching);
-    }, [isRefetching, loaderIsRefetchingChanged]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        //console.log("isRefetching", isRefetching);
-        //console.log("[Loader] useLayoutEffect status:", status);
-        //console.log("[Loader] useLayoutEffect data:", data);
-        //console.log("[Loader] useLayoutEffect prevData:", prevData);
-        //console.log("[Loader] useLayoutEffect data !== prevData:", data !== prevData);
-        if (status === "success" && data !== prevData) {
-            //console.log("[Loader] Calling loaderLoaded with data:", data);
-            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(() => {
-                // console.log("[Loader] Calling onLoaded with data:", data);
-                // console.log("[Loader] onLoaded function exists:", !!onLoaded);
-                onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(data, isRefetching);
-            }, 0);
-        }
-        else if (status === "error" && error !== prevError) {
-            // console.log("[Loader] Calling loaderError with error:", error);
-            loaderError(error);
-        }
-    }, [data, error, loaderError, loaderLoaded, onLoaded, prevData, prevError, status, isRefetching]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        return () => {
-            loaderLoaded(undefined);
-        };
-    }, [loaderLoaded, uid]);
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            refetch: (options) => {
-                void refetch(options);
-            },
-            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.");
-                }
-                (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryId, newData);
-            }),
-            addItem: (element, indexToInsert) => {
-                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: () => {
-                return data;
-            },
-            deleteItem: (element) => {
-                throw new Error("not implemented");
-            },
-        });
-    }, [appContext.queryClient, queryId, refetch, registerComponentApi, data]);
-    return null;
-}

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

@@ -1,43 +0,0 @@
-"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 misc_1 = require("../utils/misc");
-const extractParam_1 = require("../utils/extractParam");
-const renderers_1 = require("../renderers");
-const AppContext_1 = require("../AppContext");
-const Loader_1 = require("./Loader");
-const metadata_helpers_1 = require("../../components/metadata-helpers");
-function MockLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, structuralSharing, }) {
-    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* () {
-        if (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, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad, structuralSharing: structuralSharing }));
-}
-exports.MockLoaderMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "A loader that simulates a delay and returns a predefined response",
-    props: {
-        waitTime: (0, metadata_helpers_1.d)("The time to wait before returning the response"),
-        data: (0, metadata_helpers_1.d)("The data to return"),
-    },
-});
-exports.mockLoaderRenderer = (0, renderers_1.createLoaderRenderer)("MockLoader", ({ loader, state, loaderInProgressChanged, loaderLoaded, loaderError }) => {
-    return ((0, jsx_runtime_1.jsx)(MockLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
-}, exports.MockLoaderMd);

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

@@ -1,272 +0,0 @@
-"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.PageableLoader = PageableLoader;
-const react_1 = require("react");
-const react_query_1 = require("@tanstack/react-query");
-const immer_1 = __importStar(require("immer"));
-const extractParam_1 = require("../utils/extractParam");
-const AppContext_1 = require("../AppContext");
-const hooks_1 = require("../utils/hooks");
-function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi, pollIntervalInSeconds, onLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, structuralSharing = true, }) {
-    const { uid } = loader;
-    const appContext = (0, AppContext_1.useAppContext)();
-    const queryKey = (0, react_1.useMemo)(() => (queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)]), [appContext, loader.props, queryId, state, uid]);
-    const thizRef = (0, react_1.useRef)(queryKey);
-    const getPreviousPageParam = (0, react_1.useCallback)((firstPage) => {
-        let prevPageParam = undefined;
-        const prevPageSelector = loader.props.prevPageSelector;
-        if (prevPageSelector) {
-            prevPageParam = (0, extractParam_1.extractParam)({ $response: firstPage.filter((item) => !item._optimisticValue) }, prevPageSelector.startsWith("{") ? prevPageSelector : `{$response.${prevPageSelector}}`);
-        }
-        if (!prevPageParam) {
-            return undefined;
-        }
-        return {
-            prevPageParam: prevPageParam,
-        };
-    }, [loader.props.prevPageSelector]);
-    const getNextPageParam = (0, react_1.useCallback)((lastPage) => {
-        let nextPageParam = undefined;
-        const nextPageSelector = loader.props.nextPageSelector;
-        if (nextPageSelector) {
-            nextPageParam = (0, extractParam_1.extractParam)({ $response: lastPage }, nextPageSelector.startsWith("{") ? nextPageSelector : `{$response.${nextPageSelector}}`);
-        }
-        if (!nextPageParam) {
-            return undefined;
-        }
-        return {
-            nextPageParam: nextPageParam,
-        };
-    }, [loader.props.nextPageSelector]);
-    // useEffect(()=>{
-    //   console.log("TRANSFORM RESULT CHANGED", transformResult);
-    // }, [transformResult]);
-    const { data, status, error, hasNextPage, isFetchingNextPage, hasPreviousPage, isFetchingPreviousPage, isFetching, refetch, fetchPreviousPage, fetchNextPage, isRefetching, } = (0, react_query_1.useInfiniteQuery)({
-        queryKey,
-        queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal, pageParam }) {
-            return yield loaderFn(signal, pageParam);
-        }), [loaderFn]),
-        structuralSharing,
-        select: (0, react_1.useCallback)((data) => {
-            let result = [];
-            if (data) {
-                result = data.pages.flatMap((d) => d);
-            }
-            const resultSelector = loader.props.resultSelector;
-            if (resultSelector) {
-                result = (0, extractParam_1.extractParam)({ $response: result }, resultSelector.startsWith("{") ? resultSelector : `{$response.${resultSelector}}`);
-            }
-            return transformResult ? transformResult(result) : result;
-        }, [loader.props.resultSelector, transformResult]),
-        getPreviousPageParam: loader.props.prevPageSelector === undefined ? undefined : getPreviousPageParam,
-        getNextPageParam: loader.props.nextPageSelector === undefined ? undefined : getNextPageParam,
-    });
-    //TODO revisit
-    // //we clear all the pages, except the last one (it's suitable for the chat app, but for the other direction we'll have to leave the first page)
-    // // otherwise it'll keep it in the cache, and refetch all the pages when you come back
-    // //  see more here: https://stackoverflow.com/questions/71286123/reactquery-useinfinitequery-refetching-issue
-    // //  and here: https://tanstack.com/query/latest/docs/react/guides/infinite-queries?from=reactQueryV3&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Fguides%2Finfinite-queries#what-happens-when-an-infinite-query-needs-to-be-refetched
-    (0, react_1.useEffect)(() => {
-        const queryKey = thizRef.current;
-        return () => {
-            var _a, _b;
-            void ((_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.cancelQueries(queryKey));
-            (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryKey, (old) => {
-                if (!old) {
-                    return old;
-                }
-                return (0, immer_1.default)(old, (draft) => {
-                    draft.pages = draft.pages.length ? [draft.pages[draft.pages.length - 1]] : [];
-                    // draft.pageParams = draft.pageParams.length ? [draft.pageParams[draft.pageParams.length - 1]] : [];
-                    draft.pageParams = [];
-                });
-            });
-            loaderLoaded(undefined, undefined);
-        };
-    }, [appContext.queryClient, loaderLoaded, uid]);
-    const prevData = (0, hooks_1.usePrevious)(data);
-    const prevError = (0, hooks_1.usePrevious)(error);
-    (0, react_1.useLayoutEffect)(() => {
-        loaderInProgressChanged(isFetching); //TODO isFetchingPrevPage / nextPage
-    }, [isFetching, loaderInProgressChanged]);
-    (0, react_1.useLayoutEffect)(() => {
-        loaderIsRefetchingChanged(isRefetching); //TODO isFetchingPrevPage / nextPage
-    }, [isRefetching, loaderIsRefetchingChanged]);
-    const pageInfo = (0, react_1.useMemo)(() => {
-        return {
-            hasPrevPage: hasPreviousPage,
-            isFetchingPrevPage: isFetchingPreviousPage,
-            hasNextPage,
-            isFetchingNextPage,
-        };
-    }, [hasNextPage, hasPreviousPage, isFetchingNextPage, isFetchingPreviousPage]);
-    const prevPageInfo = (0, hooks_1.usePrevious)(pageInfo);
-    (0, react_1.useLayoutEffect)(() => {
-        // console.log("data changed", {
-        //   status,
-        //   data,
-        //   pageInfo,
-        // });
-        if (status === "success" && (prevData !== data || prevPageInfo !== pageInfo)) {
-            loaderLoaded(data, pageInfo);
-            //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, isRefetching);
-            }, 0);
-        }
-        else if (status === "error" && prevError !== error) {
-            loaderError(error);
-        }
-    }, [
-        data,
-        error,
-        isRefetching,
-        loaderError,
-        loaderLoaded,
-        onLoaded,
-        pageInfo,
-        prevData,
-        prevError,
-        prevPageInfo,
-        status,
-    ]);
-    (0, react_1.useEffect)(() => {
-        let intervalId;
-        if (pollIntervalInSeconds) {
-            intervalId = setInterval(() => {
-                void refetch();
-            }, pollIntervalInSeconds * 1000);
-        }
-        return () => {
-            if (intervalId) {
-                clearInterval(intervalId);
-            }
-        };
-    }, [pollIntervalInSeconds, refetch]);
-    const fetchPrevPage = (0, react_1.useCallback)(() => {
-        return fetchPreviousPage();
-    }, [fetchPreviousPage]);
-    const stableFetchNextPage = (0, react_1.useCallback)(() => {
-        return fetchNextPage();
-    }, [fetchNextPage]);
-    (0, react_1.useEffect)(() => {
-        registerComponentApi({
-            fetchPrevPage,
-            fetchNextPage: stableFetchNextPage,
-            refetch: (options) => {
-                void refetch(options);
-            },
-            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 originalFlatItems = oldData.pages.flatMap((d) => d);
-                const draft = (0, immer_1.createDraft)(oldData);
-                const flatItems = [];
-                for (let i = 0; i < draft.pages.length; i++) {
-                    const page = draft.pages[i];
-                    yield updater(page);
-                    flatItems.push(...page);
-                }
-                if (flatItems.length !== originalFlatItems.length) {
-                    throw new Error("Use this method for update only. If you want to add or delete, call the addItem/deleteItem method.");
-                }
-                const newData = (0, immer_1.finishDraft)(draft);
-                // 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) => {
-                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.pages[draft.pages.length - 1].push(element);
-                }
-                else {
-                    throw new Error("not implemented");
-                    // TODO is should be something like this
-                    // //find the pageIndex and itemIndex in that page
-                    // let pageIndex = -1;
-                    // let itemIndex = -1;
-                    // let i = 0;
-                    // oldData.pages.forEach((page, index)=>{
-                    //   i += page.result.length;
-                    //   if(i >= indexToInsert){
-                    //     pageIndex = index;
-                    //     itemIndex = i - indexToInsert;
-                    //     return;
-                    //   }
-                    // });
-                    // draft.pages[pageIndex].result.splice(itemIndex, 0, element);
-                }
-                const newData = (0, immer_1.finishDraft)(draft);
-                (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryId, newData);
-            },
-            getItems: () => {
-                return data;
-            },
-            deleteItem: (element) => {
-                throw new Error("not implemented");
-            },
-        });
-    }, [
-        appContext.queryClient,
-        fetchPrevPage,
-        data,
-        loader.uid,
-        queryId,
-        queryKey,
-        refetch,
-        registerComponentApi,
-        stableFetchNextPage,
-    ]);
-    return null;
-}