xmlui 0.11.4 → 0.11.7

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

@@ -1,621 +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());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_2 = require("@remix-run/react");
-const lodash_es_1 = require("lodash-es");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const memoize_one_1 = __importDefault(require("memoize-one"));
-const ScriptingSourceTree_1 = require("../script-runner/ScriptingSourceTree");
-const containers_1 = require("./containers");
-const AppContext_1 = require("../AppContext");
-const buildProxy_1 = require("../rendering/buildProxy");
-const process_statement_async_1 = require("../script-runner/process-statement-async");
-const process_statement_sync_1 = require("../script-runner/process-statement-sync");
-const extractParam_1 = require("../utils/extractParam");
-const hooks_1 = require("../utils/hooks");
-const misc_1 = require("../utils/misc");
-const statementUtils_1 = require("../utils/statementUtils");
-const renderChild_1 = require("./renderChild");
-const ThemeContext_1 = require("../theming/ThemeContext");
-const LoaderComponent_1 = require("../LoaderComponent");
-const constants_1 = require("../constants");
-const useApiInterceptorContext_1 = require("../interception/useApiInterceptorContext");
-const mergeProps_1 = require("../utils/mergeProps");
-// React component to display a view container and implement its behavior
-exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container(_a, ref) {
-    var _b;
-    var { node, componentState, dispatch: containerDispatch, parentDispatch, resolvedKey, version, setVersion, statePartChanged, registerComponentApi: containerRegisterComponentApi, parentRegisterComponentApi, layoutContextRef, parentRenderContext, memoedVarsRef, isImplicit, uidInfoRef: parentUidInfoRef, children } = _a, rest = __rest(_a, ["node", "componentState", "dispatch", "parentDispatch", "resolvedKey", "version", "setVersion", "statePartChanged", "registerComponentApi", "parentRegisterComponentApi", "layoutContextRef", "parentRenderContext", "memoedVarsRef", "isImplicit", "uidInfoRef", "children"]);
-    const { apiBoundContainer } = node;
-    const dispatch = isImplicit ? parentDispatch : containerDispatch;
-    const registerComponentApi = isImplicit
-        ? parentRegisterComponentApi
-        : containerRegisterComponentApi;
-    const appContext = (0, AppContext_1.useAppContext)();
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const navigate = (0, react_2.useNavigate)();
-    const location = (0, react_2.useLocation)();
-    const fnsRef = (0, react_1.useRef)({});
-    const stateRef = (0, react_1.useRef)(componentState);
-    //generally bad practise to write ref in render (https://react.dev/learn/referencing-values-with-refs#best-practices-for-refs), but:
-    // this stateRef is only used in runCodeSync/async functions, which are memoized, so it's safe to use it here (as I know:  illesg)
-    // In case we sync up the stateRef with the componentState in the useEffect/useInsertionEffect/useLayoutEffect, the stateRef would lag behind the componentState
-    stateRef.current = componentState;
-    const parsedStatementsRef = (0, react_1.useRef)({});
-    const [_, startTransition] = (0, react_1.useTransition)();
-    const mountedRef = (0, react_1.useRef)(true);
-    // --- This ref holds a map of promises for each statement execution that cause any state change.
-    const statementPromises = (0, react_1.useRef)(new Map());
-    // --- Ensure that re-rendering because of version change resolves all pending statement promises.
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        for (const resolve of statementPromises.current.values()) {
-            resolve();
-        }
-    }, [version]);
-    // --- Ensure that component disposal resolves all pending statement promises.
-    (0, react_1.useEffect)(() => {
-        mountedRef.current = true;
-        const leftPromises = statementPromises.current;
-        return () => {
-            mountedRef.current = false;
-            for (const resolve of leftPromises.values()) {
-                resolve();
-            }
-        };
-    }, []);
-    const { apiInstance } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
-    const runCodeAsync = (0, misc_1.useEvent)((source, componentUid, options, ...eventArgs) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b, _c;
-        // --- Check if the event handler can sign its lifecycle state
-        const canSignEventLifecycle = () => {
-            return componentUid.description !== undefined && (options === null || options === void 0 ? void 0 : options.eventName) !== undefined;
-        };
-        let changes = [];
-        const getComponentStateClone = () => {
-            changes.length = 0;
-            const poj = (0, lodash_es_1.cloneDeep)(Object.assign(Object.assign({}, stateRef.current), ((options === null || options === void 0 ? void 0 : options.context) || {})));
-            poj["$this"] = stateRef.current[componentUid];
-            return (0, buildProxy_1.buildProxy)(poj, (changeInfo) => {
-                var _a;
-                const idRoot = (_a = changeInfo.pathArray) === null || _a === void 0 ? void 0 : _a[0];
-                if (idRoot === null || idRoot === void 0 ? void 0 : idRoot.startsWith("$")) {
-                    throw new Error("Cannot update a read-only variable");
-                }
-                changes.push(changeInfo);
-            });
-        };
-        const evalAppContext = Object.assign(Object.assign({}, appContext), { getThemeVar });
-        const evalContext = {
-            appContext: evalAppContext,
-            eventArgs,
-            localContext: getComponentStateClone(),
-            implicitContextGetter: () => {
-                return {
-                    uid: componentUid,
-                    state: stateRef.current,
-                    getCurrentState: () => stateRef.current,
-                    dispatch,
-                    appContext: evalAppContext,
-                    apiInstance,
-                    navigate,
-                    location,
-                    lookupAction: (action, uid, actionOptions = {}) => {
-                        return lookupAction(action, uid, Object.assign(Object.assign({}, actionOptions), { ephemeral: true }));
-                    },
-                };
-            },
-            options: {
-                defaultToOptionalMemberAccess: typeof ((_a = appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.defaultToOptionalMemberAccess) === "boolean"
-                    ? appContext.appGlobals.defaultToOptionalMemberAccess
-                    : true,
-            },
-        };
-        try {
-            // --- Prepare the event handler to an arrow expression statement
-            let statements;
-            if (typeof source === "string") {
-                if (!parsedStatementsRef.current[source]) {
-                    parsedStatementsRef.current[source] = (0, statementUtils_1.prepareHandlerStatements)((0, statementUtils_1.parseHandlerCode)(source), evalContext);
-                }
-                statements = parsedStatementsRef.current[source];
-            }
-            else if (isParsedEventValue(source)) {
-                const parseId = source.parseId.toString();
-                if (!parsedStatementsRef.current[parseId]) {
-                    parsedStatementsRef.current[parseId] = (0, statementUtils_1.prepareHandlerStatements)(source.statements, evalContext);
-                }
-                statements = parsedStatementsRef.current[parseId];
-            }
-            else {
-                statements = [
-                    {
-                        type: ScriptingSourceTree_1.T_ARROW_EXPRESSION_STATEMENT,
-                        expr: source, //TODO illesg (talk it through why we need to deep clone, it it's omitted, it gets slower every time we run it)
-                    },
-                ];
-            }
-            if (!(statements === null || statements === void 0 ? void 0 : statements.length)) {
-                return;
-            }
-            if (canSignEventLifecycle()) {
-                // --- Sign the event handler has been started
-                dispatch({
-                    type: containers_1.ContainerActionKind.EVENT_HANDLER_STARTED,
-                    payload: {
-                        uid: componentUid,
-                        eventName: options.eventName,
-                    },
-                });
-            }
-            let mainThreadBlockingRuns = 0;
-            evalContext.onStatementCompleted = (evalContext) => __awaiter(this, void 0, void 0, function* () {
-                if (changes.length) {
-                    mainThreadBlockingRuns = 0;
-                    changes.forEach((change) => {
-                        statePartChanged(change.pathArray, (0, lodash_es_1.cloneDeep)(change.newValue), change.target, change.action);
-                    });
-                    let resolve = null;
-                    const stateUpdatedPromise = new Promise((res) => {
-                        resolve = () => {
-                            res(null);
-                        };
-                    });
-                    const key = (0, misc_1.generatedId)();
-                    statementPromises.current.set(key, resolve);
-                    // We use this to tell react that this update is not high-priority.
-                    //   If we don't put it to a transition, the whole app would be blocked if we run a long,
-                    //   update intensive queue (e.g. an infinite loop which
-                    //   increments a counter, see playground example learning/01_Experiments/01_Event_Framework/app ).
-                    //   Before this solution, we used a setTimeout(..., 0); hack, but some browsers (chrome especially)
-                    //   do some funky stuff with the background tabs (e.g. all the setTimeouts are
-                    //   maximized to run in 1 time / minute, doesn't matter if it's timeout is 0)
-                    //   As of 2023. June 20, this solution works with backgrounded tabs, too.
-                    startTransition(() => {
-                        setVersion((prev) => prev + 1);
-                    });
-                    //TODO this could be a problem - if this container gets unmounted, we still have to wait for the update,
-                    //  but in that case this update probably happened in the parent (e.g. a button's event handler removes the whole container
-                    //  where the button lives, but it still has some statements to run).
-                    // with this solution the statement execution doesn't stop, and we fallback waiting with a setTimeout(0)
-                    if (mountedRef.current) {
-                        yield stateUpdatedPromise;
-                    }
-                    else {
-                        yield (0, misc_1.delay)(0);
-                    }
-                    statementPromises.current.delete(key);
-                    changes = [];
-                }
-                else {
-                    //in this else branch normally we block the main thread (we don't wait for any state promise to be resolved),
-                    // so in a long-running (typically infinite loop) situation, where there aren't any changes in the state
-                    // we block the main thread indefinitely... this 'mainThreadBlockingRuns' var solution makes sure that
-                    // we pause in every 100 runs, and let the main thread breath a bit, so it's not frozen for the whole time
-                    // (we clear that counter above, too, where we use a startTransition call to de-prioritize this work)
-                    mainThreadBlockingRuns++;
-                    if (mainThreadBlockingRuns > 100) {
-                        mainThreadBlockingRuns = 0;
-                        yield (0, misc_1.delay)(0);
-                    }
-                }
-                evalContext.localContext = getComponentStateClone();
-            });
-            yield (0, process_statement_async_1.processStatementQueueAsync)(statements, evalContext);
-            if (canSignEventLifecycle()) {
-                // --- Sign the event handler has successfully completed
-                dispatch({
-                    type: containers_1.ContainerActionKind.EVENT_HANDLER_COMPLETED,
-                    payload: {
-                        uid: componentUid,
-                        eventName: options.eventName,
-                    },
-                });
-            }
-            if ((_c = (_b = evalContext.mainThread) === null || _b === void 0 ? void 0 : _b.blocks) === null || _c === void 0 ? void 0 : _c.length) {
-                return evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1]
-                    .returnValue;
-            }
-        }
-        catch (e) {
-            //if we pass down an event handler to a component, we should sign the error once, not in every step of the component chain
-            //  (we use it in the compoundComponent, resolving it's event handlers)
-            if ((options === null || options === void 0 ? void 0 : options.signError) !== false) {
-                appContext.signError(e);
-            }
-            if (canSignEventLifecycle()) {
-                dispatch({
-                    type: containers_1.ContainerActionKind.EVENT_HANDLER_ERROR,
-                    payload: {
-                        uid: componentUid,
-                        eventName: options.eventName,
-                        error: e,
-                    },
-                });
-            }
-            throw e;
-        }
-    }));
-    const runCodeSync = (0, react_1.useCallback)((arrowExpression, ...eventArgs) => {
-        var _a, _b;
-        const evalContext = {
-            localContext: (0, lodash_es_1.cloneDeep)(stateRef.current),
-            appContext,
-            eventArgs,
-        };
-        try {
-            const arrowStmt = {
-                type: ScriptingSourceTree_1.T_ARROW_EXPRESSION_STATEMENT,
-                expr: arrowExpression,
-            };
-            (0, process_statement_sync_1.processStatementQueue)([arrowStmt], evalContext);
-            if ((_b = (_a = evalContext.mainThread) === null || _a === void 0 ? void 0 : _a.blocks) === null || _b === void 0 ? void 0 : _b.length) {
-                return evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1]
-                    .returnValue;
-            }
-        }
-        catch (e) {
-            console.error(e);
-            throw e;
-        }
-    }, [appContext]);
-    const getOrCreateEventHandlerFn = (0, misc_1.useEvent)((src, uid, options) => {
-        var _a;
-        if (Array.isArray(src)) {
-            throw new Error("Multiple event handlers are not supported");
-        }
-        let fnCacheKey;
-        let handler;
-        if (typeof src === "string") {
-            // --- We have a string event handler
-            fnCacheKey = `${options === null || options === void 0 ? void 0 : options.eventName};${src}`;
-            handler = (...eventArgs) => {
-                return runCodeAsync(src, uid, options, ...(0, lodash_es_1.cloneDeep)(eventArgs));
-            };
-        }
-        else if (isParsedEventValue(src)) {
-            // --- We have the syntax tree to execute, no need to cache
-            fnCacheKey = `${options === null || options === void 0 ? void 0 : options.eventName};${src.parseId}`;
-            handler = (...eventArgs) => {
-                return runCodeAsync(src, uid, options, ...(0, lodash_es_1.cloneDeep)(eventArgs));
-            };
-        }
-        else if (isArrowExpression(src)) {
-            // --- We have an arrow expression to execute
-            fnCacheKey = `${options === null || options === void 0 ? void 0 : options.eventName};${src.statement.nodeId}`;
-            handler = (...eventArgs) => {
-                return runCodeAsync(src, uid, options, ...(0, lodash_es_1.cloneDeep)(eventArgs));
-            };
-        }
-        else if (src.type) {
-            // --- We have an arrow expression to execute
-            fnCacheKey = `${options === null || options === void 0 ? void 0 : options.eventName};${JSON.stringify(src)}`;
-            handler = (...eventArgs) => {
-                return runCodeAsync(src, uid, options, ...(0, lodash_es_1.cloneDeep)(eventArgs));
-            };
-        }
-        else {
-            // --- We have an unknown event handler
-            throw new Error("Invalid event handler");
-        }
-        //if we have a context or ephemeral event handler, we don't cache it (otherwise we would have stale reference for the context)
-        if ((options === null || options === void 0 ? void 0 : options.ephemeral) || (options === null || options === void 0 ? void 0 : options.context)) {
-            return handler;
-        }
-        if (!((_a = fnsRef.current[uid]) === null || _a === void 0 ? void 0 : _a[fnCacheKey])) {
-            fnsRef.current[uid] = fnsRef.current[uid] || {};
-            fnsRef.current[uid][fnCacheKey] = handler;
-        }
-        return fnsRef.current[uid][fnCacheKey];
-    });
-    const getOrCreateSyncCallbackFn = (0, react_1.useCallback)((arrowExpression, uid) => {
-        var _a;
-        const fnCacheKey = `sync-callback-${arrowExpression.nodeId}`;
-        if (!((_a = fnsRef.current[uid]) === null || _a === void 0 ? void 0 : _a[fnCacheKey])) {
-            fnsRef.current[uid] = fnsRef.current[uid] || {};
-            fnsRef.current[uid][fnCacheKey] = (0, memoize_one_1.default)((arrowExpression) => {
-                return (...eventArgs) => {
-                    return runCodeSync(arrowExpression, ...eventArgs);
-                };
-            });
-        }
-        return fnsRef.current[uid][fnCacheKey](arrowExpression);
-    }, [runCodeSync]);
-    const lookupSyncCallback = (0, react_1.useCallback)((action, uid) => {
-        if (!action) {
-            return undefined;
-        }
-        if (typeof action === "function") {
-            return action;
-        }
-        // const resolvedAction = extractParam(componentState, action, appContext, true);
-        if (!action) {
-            return undefined;
-        }
-        if (typeof action === "function") {
-            return action;
-        }
-        if (!action._ARROW_EXPR_) {
-            throw new Error("Only arrow expression allowed in sync callback");
-        }
-        return getOrCreateSyncCallbackFn(action, uid);
-    }, [getOrCreateSyncCallbackFn]);
-    const lookupAction = (0, react_1.useCallback)((action, uid, options) => {
-        let safeAction = action;
-        if (!action && uid.description && (options === null || options === void 0 ? void 0 : options.eventName)) {
-            const handlerFnName = `${uid.description}_on${(0, misc_1.capitalizeFirstLetter)(options === null || options === void 0 ? void 0 : options.eventName)}`;
-            if (componentState[handlerFnName] && componentState[handlerFnName]._ARROW_EXPR_) {
-                safeAction = componentState[handlerFnName];
-            }
-        }
-        if (!safeAction) {
-            return undefined;
-        }
-        if (typeof safeAction === "function") {
-            return safeAction;
-        }
-        return getOrCreateEventHandlerFn(safeAction, uid, options);
-    }, [componentState, getOrCreateEventHandlerFn]);
-    const isApiRegisteredInnerRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!node.api) {
-            return;
-        }
-        if (!node.containerUid) {
-            return;
-        }
-        if (isApiRegisteredInnerRef.current) {
-            return;
-        }
-        isApiRegisteredInnerRef.current = true;
-        const api = {};
-        const self = Symbol("$self");
-        Object.entries(node.api).forEach(([key, value]) => {
-            api[key] = lookupAction(value, self);
-        });
-        if (!isImplicit) {
-            registerComponentApi(self, api); //we register the api as $self for the compound components,
-        }
-        parentRegisterComponentApi(node.containerUid, api); // and register it for the parent component instance
-    }, [
-        lookupAction,
-        node.api,
-        node.containerUid,
-        node.uid,
-        isImplicit,
-        parentRegisterComponentApi,
-        registerComponentApi,
-    ]);
-    const cleanup = (0, misc_1.useEvent)((uid) => {
-        delete fnsRef.current[uid];
-    });
-    // --- The container wraps the `renderChild` function to provide that to the child components
-    const stableRenderChild = (0, react_1.useCallback)((childNode, lc, pRenderContext, uidInfoRef, ref, rest) => {
-        // TODO: Check if this is a valid use case
-        if (typeof childNode === "string") {
-            throw Error("should be resolved for now");
-        }
-        // --- Make children an array if it's not
-        const children = (0, lodash_es_1.isArray)(childNode) ? childNode : [childNode];
-        if (!children || !children.length) {
-            // --- No child, nothing to render
-            return null;
-        }
-        // --- If there are multiple children, we need to add a `key` to each of them
-        const wrapWithFragment = children.length > 1;
-        // --- Render each child
-        const renderedChildren = children.map((child, childIndex) => {
-            if (!child) {
-                // --- No child, nothing to render: Should not happen
-                return undefined;
-            }
-            // --- Invoke the jolly-joker `renderChild` function to render the child. Note that
-            // --- in the context, we pass the `stableRenderChild` function, so the child can
-            // --- render its children recursively.
-            const renderedChild = (0, renderChild_1.renderChild)({
-                node: child,
-                state: componentState,
-                dispatch,
-                appContext,
-                lookupAction,
-                lookupSyncCallback,
-                registerComponentApi,
-                renderChild: stableRenderChild,
-                statePartChanged: statePartChanged,
-                layoutContext: lc,
-                parentRenderContext: pRenderContext,
-                memoedVarsRef,
-                cleanup,
-                uidInfoRef,
-            });
-            if (renderedChild === undefined) {
-                // --- No displayable child, nothing to render
-                return undefined;
-            }
-            // --- Let's process the rendered child
-            let rendered = renderedChild;
-            const key = `${childIndex}_${child.uid}`;
-            if (wrapWithFragment) {
-                // --- Add the `key` attribute to the child
-                if (react_1.default.isValidElement(renderedChild)) {
-                    // --- React can display this element
-                    rendered = react_1.default.cloneElement(renderedChild, { key });
-                }
-                else {
-                    // --- A simple text node (or alike). We need to wrap it in a `Fragment`
-                    rendered = (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderedChild }, key);
-                }
-            }
-            // --- Done.
-            return rendered;
-        });
-        // --- At this point we have a React node for each child
-        if (renderedChildren.length === 1) {
-            // --- If we have a single (and valid React element) child, we compose its
-            // --- `ref` with the parent's `ref`. This allows the parent to access the child's
-            // --- DOM node. Otherwise, we use the child as is.
-            return ref && renderedChildren[0] && (0, react_1.isValidElement)(renderedChildren[0])
-                ? react_1.default.cloneElement(renderedChildren[0], Object.assign({ ref: (0, react_compose_refs_1.composeRefs)(ref, renderedChildren[0].ref) }, (0, mergeProps_1.mergeProps)(renderedChildren[0].props, rest)))
-                : renderedChildren[0];
-        }
-        // --- Done.
-        return renderedChildren;
-    }, [
-        componentState,
-        dispatch,
-        appContext,
-        lookupAction,
-        lookupSyncCallback,
-        registerComponentApi,
-        statePartChanged,
-        memoedVarsRef,
-        cleanup,
-    ]);
-    // --- Log the component state if you need it for debugging
-    if ((_b = node.props) === null || _b === void 0 ? void 0 : _b.debug) {
-        console.log(`Container: ${resolvedKey}`, {
-            componentState,
-            node,
-        });
-    }
-    // --- Use this object to store information about already rendered UIDs.
-    // --- We do not allow any action, loader, or transform to use the same UID; however (as of now) children
-    // --- may use the same UID.
-    const uidInfo = {};
-    const thisUidInfoRef = (0, react_1.useRef)({});
-    const uidInfoRef = node.uses === undefined ? parentUidInfoRef : thisUidInfoRef;
-    const renderedChildren = stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef, ref, rest);
-    const renderedLoaders = renderLoaders({
-        uidInfo,
-        uidInfoRef,
-        loaders: node.loaders,
-        componentState,
-        memoedVarsRef,
-        //if it's an api bound container, we always use this container, otherwise use the parent if it's an implicit one
-        dispatch: apiBoundContainer ? containerDispatch : dispatch,
-        registerComponentApi: apiBoundContainer
-            ? containerRegisterComponentApi
-            : registerComponentApi,
-        appContext,
-        lookupAction,
-        lookupSyncCallback,
-        cleanup,
-    });
-    //TODO illesg
-    const containerContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderedLoaders, !!children && (0, react_1.isValidElement)(renderedChildren)
-                ? (0, react_1.cloneElement)(renderedChildren, null, children)
-                : renderedChildren] }));
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: containerContent }, node.uid
-        ? `${resolvedKey}>${(0, extractParam_1.extractParam)(componentState, node.uid, appContext, true)}`
-        : undefined));
-}));
-function renderLoaders({ uidInfo, uidInfoRef, loaders = constants_1.EMPTY_ARRAY, componentState, dispatch, appContext, registerComponentApi, lookupAction, lookupSyncCallback, cleanup, memoedVarsRef, }) {
-    return loaders.map((loader) => {
-        // --- Check for the uniqueness of UIDs
-        if (loader === null || loader === void 0 ? void 0 : loader.uid) {
-            if (uidInfo[loader.uid]) {
-                // --- We have a duplicated ID (another loader)
-                throw new Error(`Another ${uidInfo[loader.uid]} definition in this container already uses the uid '${loader.uid}'`);
-            }
-            uidInfo[loader.uid] = "loader";
-            uidInfoRef.current[loader.uid] = {
-                type: "loader",
-                value: "loaderValue",
-                uid: loader.uid,
-            };
-        }
-        // --- Render the current loader
-        const renderedLoader = renderLoader({
-            loader,
-            componentState,
-            dispatch,
-            appContext,
-            registerComponentApi,
-            lookupAction,
-            lookupSyncCallback,
-            memoedVarsRef,
-            cleanup,
-        });
-        // --- Skip loaders with rendering errors
-        if (renderedLoader === undefined) {
-            return undefined;
-        }
-        // --- Take care to use a key property for the loader
-        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderedLoader }, loader.uid);
-    });
-    function renderLoader({ loader, componentState, dispatch, appContext, registerComponentApi, lookupAction, lookupSyncCallback, cleanup, memoedVarsRef, }) {
-        // --- For the sake of avoiding further issues
-        if (!loader) {
-            return null;
-        }
-        // --- Evaluate "when" to decide if the loader should be rendered
-        // --- Render only visible components
-        if (!(0, extractParam_1.shouldKeep)(loader.when, componentState, appContext)) {
-            return null;
-        }
-        // --- Use the loader type's renderer function
-        return ((0, jsx_runtime_1.jsx)(LoaderComponent_1.LoaderComponent, { onUnmount: cleanup, node: loader, state: componentState, dispatch: dispatch, registerComponentApi: registerComponentApi, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, memoedVarsRef: memoedVarsRef, appContext: appContext }));
-    }
-}
-function isParsedEventValue(value) {
-    return value.__PARSED === true;
-}
-function isArrowExpression(value) {
-    return value.type === ScriptingSourceTree_1.T_ARROW_EXPRESSION;
-}