xmlui 0.7.19 → 0.7.21

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

@@ -1,1186 +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.renderRoot = renderRoot;
-exports.eventHandlerStarted = eventHandlerStarted;
-exports.eventHandlerCompleted = eventHandlerCompleted;
-exports.eventHandlerError = eventHandlerError;
-exports.statePartChanged = statePartChanged;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const memoize_one_1 = __importDefault(require("memoize-one"));
-const immer_1 = __importDefault(require("immer"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const ContainerComponentDef_1 = require("./ContainerComponentDef");
-const buildProxy_1 = __importDefault(require("./buildProxy"));
-const containers_1 = require("@components-core/abstractions/containers");
-const lodash_es_1 = require("lodash-es");
-const ErrorBoundary_1 = require("@components-core/ErrorBoundary");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const misc_1 = require("@components-core/utils/misc");
-const process_statement_async_1 = require("@components-core/script-runner/process-statement-async");
-const process_statement_sync_1 = require("@components-core/script-runner/process-statement-sync");
-const ComponentBed_1 = __importDefault(require("@components-core/ComponentBed"));
-const constants_1 = require("@components-core/constants");
-const statementUtils_1 = require("@components-core/utils/statementUtils");
-const react_2 = require("@remix-run/react");
-const AppContext_1 = require("@components-core/AppContext");
-const visitors_1 = require("@components-core/script-runner/visitors");
-const ParameterParser_1 = require("@components-core/script-runner/ParameterParser");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const code_behind_collect_1 = require("../../parsers/scripting/code-behind-collect");
-const eval_tree_sync_1 = require("@components-core/script-runner/eval-tree-sync");
-const collectFnVarDeps_1 = require("@components-core/container/collectFnVarDeps");
-const hooks_1 = require("@components-core/utils/hooks");
-const LoaderComponent_1 = require("@components-core/LoaderComponent");
-const DebugViewProvider_1 = require("@components-core/DebugViewProvider");
-const StateViewerNative_1 = require("@components/StateViewer/StateViewerNative");
-const reducer_1 = require("./reducer");
-// This function renders the entire component tree starting from the root component. As it works recursively,
-// all child components will be rendered, including the wrapping containers
-function renderRoot(node, memoedVarsRef) {
-    return renderChild({
-        node,
-        state: constants_1.EMPTY_OBJECT,
-        dispatch: constants_1.noop,
-        appContext: undefined,
-        lookupAction: constants_1.noop,
-        lookupSyncCallback: constants_1.noop,
-        registerComponentApi: constants_1.noop,
-        renderChild: constants_1.noop,
-        stateFieldPartChanged: constants_1.noop,
-        cleanup: constants_1.noop,
-        memoedVarsRef,
-    });
-}
-// React component to display a view container and implement its behavior
-const MemoizedContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Container({ node, componentState, dispatch: containerDispatch, parentDispatch, resolvedKey, version, setVersion, stateFieldPartChanged, registerComponentApi: containerRegisterComponentApi, parentRegisterComponentApi, layoutContextRef, parentRenderContext, memoedVarsRef, isImplicit, uidInfoRef: parentUidInfoRef, }, ref) {
-    var _a;
-    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 statementPromises = (0, react_1.useRef)(new Map());
-    const [_, startTransition] = (0, react_1.useTransition)();
-    const mountedRef = (0, react_1.useRef)(true);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        for (const resolve of statementPromises.current.values()) {
-            resolve();
-        }
-    }, [version]);
-    (0, react_1.useEffect)(() => {
-        mountedRef.current = true;
-        const leftPromises = statementPromises.current;
-        return () => {
-            mountedRef.current = false;
-            for (const resolve of leftPromises.values()) {
-                resolve();
-            }
-        };
-    }, []);
-    const runCodeAsync = (0, misc_1.useEvent)((source, componentUid, options, ...eventArgs) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b, _c;
-        // console.log({
-        //   source,
-        //   componentUid,
-        //   options,
-        //   eventArgs,
-        //   state: stateRef.current,
-        //   "$this": stateRef.current[componentUid]
-        // });
-        let changes = [];
-        const getComponentStateClone = () => {
-            changes.length = 0;
-            const poj = (0, lodash_es_1.cloneDeep)(Object.assign({}, stateRef.current));
-            poj["$this"] = stateRef.current[componentUid];
-            return (0, buildProxy_1.default)(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,
-                    dispatch,
-                    appContext: evalAppContext,
-                    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 {
-                statements = [
-                    {
-                        type: "ArrowS",
-                        expression: (0, lodash_es_1.cloneDeep)(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(componentUid.description, options === null || options === void 0 ? void 0 : options.eventName)) {
-                dispatch(eventHandlerStarted(componentUid.description, options.eventName));
-            }
-            let mainThreadBlockingRuns = 0;
-            yield (0, process_statement_async_1.processStatementQueueAsync)(statements, evalContext, undefined, (evalContext, completedStatement) => __awaiter(this, void 0, void 0, function* () {
-                if (changes.length) {
-                    mainThreadBlockingRuns = 0;
-                    changes.forEach((change) => {
-                        stateFieldPartChanged(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();
-            }));
-            if (canSignEventLifecycle(componentUid.description, options === null || options === void 0 ? void 0 : options.eventName)) {
-                dispatch(eventHandlerCompleted(componentUid.description, 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(componentUid.description, options === null || options === void 0 ? void 0 : options.eventName)) {
-                dispatch(eventHandlerError(componentUid.description, options.eventName, 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: "ArrowS",
-                expression: 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;
-        const stringSrc = typeof src === "string" ? src : src.statement.source;
-        const fnCacheKey = `${options === null || options === void 0 ? void 0 : options.eventName};${stringSrc}`;
-        const handler = (...eventArgs) => {
-            return runCodeAsync(src, uid, options, ...(0, lodash_es_1.cloneDeep)(eventArgs));
-        };
-        if (options === null || options === void 0 ? void 0 : options.ephemeral) {
-            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.source}`;
-        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) => {
-                // console.log('busting sync callback cache', arrowExpression);
-                return (...eventArgs) => {
-                    // console.log("calling sync callback", arrowExpression);
-                    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) => {
-        // console.log("CLEANUP CALLED FOR", node);
-        //TODO cleanup registered component api for that uid
-        //TODO cleanup state for that 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) => {
-        // 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 ithe context, we pass the `stableRenderChild` function, so the child can
-            // --- render its children recursively.
-            const renderedChild = renderChild({
-                node: child,
-                state: componentState,
-                dispatch,
-                appContext,
-                lookupAction,
-                lookupSyncCallback,
-                registerComponentApi,
-                renderChild: stableRenderChild,
-                stateFieldPartChanged,
-                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], {
-                    ref: (0, react_compose_refs_1.composeRefs)(ref, renderedChildren[0].ref),
-                })
-                : renderedChildren[0];
-        }
-        // --- Done.
-        return renderedChildren;
-    }, [
-        componentState,
-        dispatch,
-        appContext,
-        lookupAction,
-        lookupSyncCallback,
-        registerComponentApi,
-        stateFieldPartChanged,
-        memoedVarsRef,
-        cleanup,
-        ref,
-    ]);
-    // --- Log the component state if you need it for debugging
-    if ((_a = node.props) === null || _a === void 0 ? void 0 : _a.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 debugContext = (0, DebugViewProvider_1.useDebugView)();
-    const stateViewProps = debugContext === null || debugContext === void 0 ? void 0 : debugContext.stateViewOptions;
-    const showContainer = stateViewProps && debugContext.displayStateView;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [showContainer && ((0, jsx_runtime_1.jsxs)(StateViewerNative_1.StateViewer, { state: componentState, showBoundary: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.showBoundary, blink: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.blink, children: [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,
-                    }), stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef)] })), !showContainer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [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,
-                    }), stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef)] }))] }, node.uid
-        ? `${resolvedKey}>${(0, extractParam_1.extractParam)(componentState, node.uid, appContext, true)}`
-        : undefined));
-}));
-const useRoutingParams = () => {
-    const [queryParams] = (0, react_2.useSearchParams)();
-    const routeParams = (0, react_2.useParams)();
-    const queryParamsMap = (0, react_1.useMemo)(() => {
-        const result = {};
-        for (const [key, value] of Array.from(queryParams.entries())) {
-            result[key] = value;
-        }
-        return result;
-    }, [queryParams]);
-    return (0, react_1.useMemo)(() => {
-        return {
-            $routeParams: routeParams,
-            $queryParams: queryParamsMap,
-        };
-    }, [queryParamsMap, routeParams]);
-};
-class CodeBehindParseError extends Error {
-    constructor(errors) {
-        const mainErrors = errors["Main"] || [];
-        const messages = mainErrors.map((errorMessage) => {
-            let ret = `${errorMessage.code} : ${errorMessage.text}`;
-            const posInfo = [];
-            if (errorMessage.line !== undefined) {
-                posInfo.push(`line:${errorMessage.line}`);
-            }
-            if (errorMessage.column !== undefined) {
-                posInfo.push(`column:${errorMessage.column}`);
-            }
-            if (posInfo.length) {
-                ret = `${ret} (${posInfo.join(", ")})`;
-            }
-            return ret;
-        });
-        super(messages.join("\n"));
-        Object.setPrototypeOf(this, CodeBehindParseError.prototype);
-    }
-}
-// A React component that wraps a view container into an error boundary
-// (it's a named function inside the memo, this way it will be visible with that name in the react devtools)
-const MemoizedErrorProneContainer = (0, react_1.memo)((0, react_1.forwardRef)(function ErrorProneContainer({ node, parentState, resolvedKey, parentStateFieldPartChanged, parentRegisterComponentApi, layoutContextRef, parentRenderContext, isImplicit, parentDispatch, uidInfoRef, }, ref) {
-    const [version, setVersion] = (0, react_1.useState)(0);
-    const routingParams = useRoutingParams();
-    const memoedVars = (0, react_1.useRef)(new Map());
-    const stateFromOutside = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => extractScopedState(parentState, node.uses), [node.uses, parentState]));
-    // --- All state manipulation happens through the container reducer, which is created here.
-    // --- This reducer allow collecting state changes for debugging purposes. The `debugView`
-    // --- contains the debug configuration; it may enable (or disable) logging.
-    const debugView = (0, DebugViewProvider_1.useDebugView)();
-    const containerReducer = (0, reducer_1.createContainerReducer)(debugView);
-    const [componentState, dispatch] = (0, react_1.useReducer)(containerReducer, constants_1.EMPTY_OBJECT);
-    const [componentApis, setComponentApis] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
-    const componentStateWithApis = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => {
-        const ret = Object.assign({}, componentState);
-        for (const stateKey of Object.getOwnPropertySymbols(componentState)) {
-            const value = componentState[stateKey];
-            if (stateKey.description) {
-                ret[stateKey.description] = value;
-            }
-        }
-        if (Reflect.ownKeys(componentApis).length === 0) {
-            //skip containers with no registered apis
-            return ret;
-        }
-        for (const componentApiKey of Object.getOwnPropertySymbols(componentApis)) {
-            const value = componentApis[componentApiKey];
-            if (componentApiKey.description) {
-                const key = componentApiKey.description;
-                ret[key] = Object.assign(Object.assign({}, (ret[key] || {})), value);
-            }
-            ret[componentApiKey] = Object.assign(Object.assign({}, ret[componentApiKey]), value);
-        }
-        return ret;
-    }, [componentState, componentApis]));
-    const localVarsStateContext = useCombinedState(stateFromOutside, componentStateWithApis, node.contextVars);
-    const parsedScriptPart = node.scriptCollected;
-    if ((parsedScriptPart === null || parsedScriptPart === void 0 ? void 0 : parsedScriptPart.moduleErrors) && !(0, lodash_es_1.isEmpty)(parsedScriptPart.moduleErrors)) {
-        throw new CodeBehindParseError(parsedScriptPart.moduleErrors);
-    }
-    if (node.scriptError && !(0, lodash_es_1.isEmpty)(node.scriptError)) {
-        throw new CodeBehindParseError(node.scriptError);
-    }
-    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(componentState);
-    const varDefinitions = (0, hooks_1.useShallowCompareMemoize)(Object.assign(Object.assign(Object.assign(Object.assign({}, parsedScriptPart === null || parsedScriptPart === void 0 ? void 0 : parsedScriptPart.functions), node.functions), parsedScriptPart === null || parsedScriptPart === void 0 ? void 0 : parsedScriptPart.vars), node.vars));
-    //first: collection function (arrowExpressions) dependencies
-    //    -> do it until there's no function dep, only var deps
-    const functionDeps = (0, react_1.useMemo)(() => {
-        const fnDeps = {};
-        Object.entries(varDefinitions).forEach(([key, value]) => {
-            if (isParsedValue(value) && value.tree.type === "ArrowE") {
-                fnDeps[key] = (0, visitors_1.collectVariableDependencies)(value.tree, referenceTrackedApi);
-            }
-        });
-        return (0, collectFnVarDeps_1.collectFnVarDeps)(fnDeps);
-    }, [referenceTrackedApi, varDefinitions]);
-    // then resolve vars and replace function deps with the collected deps for that function
-    //first resolve round (we do 2, to make sure that the order of the definitions doesn't cause problems)
-    // e.g. 'testFn' uses $props, but $props is not resolved yet
-    const preResolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContext, (0, react_1.useRef)(new Map()));
-    const localVarsStateContextWithPreResolvedLocalVars = (0, hooks_1.useShallowCompareMemoize)(Object.assign(Object.assign({}, preResolvedLocalVars), localVarsStateContext));
-    const resolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContextWithPreResolvedLocalVars, memoedVars);
-    const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
-    const combinedState = useCombinedState(stateFromOutside, node.contextVars, mergedWithVars, routingParams);
-    const registerComponentApi = (0, react_1.useCallback)((uid, api) => {
-        setComponentApis((0, immer_1.default)((draft) => {
-            // console.log("-----BUST----setComponentApis");
-            if (!draft[uid]) {
-                draft[uid] = {};
-            }
-            Object.entries(api).forEach(([key, value]) => {
-                if (draft[uid][key] !== value) {
-                    // console.log(`-----BUST------new api for ${uid}`, draft[uid][key], value)
-                    draft[uid][key] = value;
-                }
-            });
-        }));
-    }, []);
-    const componentStateRef = (0, react_1.useRef)(componentStateWithApis);
-    const stateFieldPartChanged = (0, react_1.useCallback)((pathArray, newValue, target, action) => {
-        const key = pathArray[0];
-        if (key in componentStateRef.current || key in resolvedLocalVars) {
-            dispatch(statePartChanged(pathArray, newValue, target, action));
-        }
-        else {
-            if (!node.uses || node.uses.includes(key)) {
-                parentStateFieldPartChanged(pathArray, newValue, target, action);
-            }
-        }
-    }, [resolvedLocalVars, node.uses, parentStateFieldPartChanged]);
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "container", children: (0, jsx_runtime_1.jsx)(MemoizedContainer, { resolvedKey: resolvedKey, node: node, componentState: combinedState, dispatch: dispatch, parentDispatch: parentDispatch, setVersion: setVersion, version: version, stateFieldPartChanged: stateFieldPartChanged, registerComponentApi: registerComponentApi, parentRegisterComponentApi: parentRegisterComponentApi, layoutContextRef: layoutContextRef, parentRenderContext: parentRenderContext, memoedVarsRef: memoedVars, isImplicit: isImplicit, ref: ref, uidInfoRef: uidInfoRef }) }));
-}));
-/**
- * Wraps the specified component node with a container
- * @param node The component node to wrap
- * @returns A "Container" node
- */
-const getWrappedWithContainer = (node) => {
-    var _a, _b;
-    if (node.type === "Container") {
-        // --- Already wrapped
-        return node;
-    }
-    // --- Clone the node and remove the properties that will be moved to the container
-    // --- Note: we need the "when" property in the ModalDialog component, so we don't remove it
-    const wrappedNode = Object.assign(Object.assign({}, node), { props: Object.assign({}, node.props) });
-    delete wrappedNode.loaders;
-    delete wrappedNode.vars;
-    delete wrappedNode.functions;
-    delete wrappedNode.script;
-    delete wrappedNode.scriptCollected;
-    delete wrappedNode.scriptError;
-    delete wrappedNode.uses;
-    (_a = wrappedNode.props) === null || _a === void 0 ? true : delete _a.uses;
-    delete wrappedNode.api;
-    delete wrappedNode.contextVars;
-    // --- Do the wrapping
-    return {
-        type: "Container",
-        uid: node.uid,
-        when: node.when,
-        loaders: node.loaders,
-        vars: node.vars,
-        functions: node.functions,
-        scriptCollected: node.scriptCollected,
-        scriptError: node.scriptError,
-        // TODO: it seems so that we need only node.uses, but we have to check it
-        uses: node.uses, // || node.props?.uses?.split(",").map((txt: string) => txt.trim()),
-        api: node.api,
-        containerUid: "containerUid" in node && node.containerUid,
-        apiBoundContainer: "apiBoundContainer" in node && node.apiBoundContainer,
-        contextVars: node.contextVars,
-        props: {
-            debug: (_b = node.props) === null || _b === void 0 ? void 0 : _b.debug,
-            // debug: true,
-        },
-        children: [wrappedNode],
-    };
-};
-const ComponentContainer = (0, react_1.memo)((0, react_1.forwardRef)(function ComponentContainer({ resolvedKey, node, parentState, parentStateFieldPartChanged, parentRegisterComponentApi, layoutContextRef, parentRenderContext, parentDispatch, uidInfoRef, }, ref) {
-    const enhancedNode = (0, react_1.useMemo)(() => getWrappedWithContainer(node), [node]);
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "container", children: (0, jsx_runtime_1.jsx)(MemoizedErrorProneContainer, { parentStateFieldPartChanged: parentStateFieldPartChanged, resolvedKey: resolvedKey, node: enhancedNode, parentState: parentState, layoutContextRef: layoutContextRef, parentRenderContext: parentRenderContext, isImplicit: node.type !== "Container" && enhancedNode.uses === undefined, parentRegisterComponentApi: parentRegisterComponentApi, parentDispatch: parentDispatch, ref: ref, uidInfoRef: uidInfoRef }) }));
-}));
-/**
- * This function is the jolly-joker of the rendering process. It renders a child component
- * based on the specified context, which contains the component's definition, the current state,
- * and other necessary information.
- *
- * The function checks a few special cases:
- * - <Slot> with a single text node child: it renders the text in the context of the parent component.
- * - CDATA text nodes: it renders the text as is without parsing it.
- * - TextNode: it extracts the text from the node and renders it.
- *
- * In other cases, it extracts the component's ID and renders the component as a <ComponentNode>.
- *
- * As this function passes itself as a renderChild function to the <ComponentNode>, it can render
- * nested components recursively.
- */
-function renderChild({ node, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, stateFieldPartChanged, layoutContext, parentRenderContext, memoedVarsRef, cleanup, uidInfoRef, }) {
-    var _a, _b, _c;
-    // --- Render only visible components
-    if (!(0, extractParam_1.shouldKeep)(node.when, state, appContext)) {
-        return null;
-    }
-    // --- We do not parse text nodes specified with CDATA to avoid whitespace collapsing
-    const nodeValue = (_a = node.props) === null || _a === void 0 ? void 0 : _a.value;
-    if (node.type === "TextNodeCData") {
-        return nodeValue !== null && nodeValue !== void 0 ? nodeValue : "";
-    }
-    // --- A TextNode value may contain nexted expressions, so we extract it.
-    if (node.type === "TextNode") {
-        return (0, extractParam_1.extractParam)(state, nodeValue, appContext, true);
-    }
-    // --- Rendering a Slot requires some preparations, as TextNode and
-    // --- TextNodeCData are virtual nodes. Also, slots may have default templates
-    // --- to render when no slot children are specified. The following section
-    // --- handles these cases.
-    if (node.type === "Slot") {
-        // --- Check for special Slot cases
-        let slotChildren;
-        const templateName = (_b = node.props) === null || _b === void 0 ? void 0 : _b.name;
-        console.log("templateName", templateName);
-        if (templateName) {
-            // --- Let's check the validity of the slot name
-            if (!templateName.endsWith("Template")) {
-                throw new Error(`Slot name '${templateName}' is not valid. ` +
-                    "A named slot should use a name ending with 'Template'.");
-            }
-            // --- Named slot: use a template property from the parent component
-            slotChildren = (_c = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.props) === null || _c === void 0 ? void 0 : _c[templateName];
-        }
-        else {
-            // --- Children slot: use the children of the parent component
-            slotChildren = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.children;
-        }
-        if (!slotChildren) {
-            // --- No children to render, let's try the default slot template (if there is any)
-            slotChildren = node.children;
-        }
-        if (slotChildren) {
-            const toRender = Array.isArray(slotChildren) ? slotChildren : [slotChildren];
-            // --- Check for the virtual nodes. At this point, parentRendererContext is
-            // --- undefined when the parent does not provide slot children. In this case,
-            // --- the ComponentBed component will render the default slot template.
-            if (toRender.length === 1 && parentRenderContext) {
-                if (toRender[0].type === "TextNodeCData" || toRender[0].type === "TextNode") {
-                    // --- Preserve the text and render it in the parent context
-                    return parentRenderContext.renderChild(toRender);
-                }
-            }
-        }
-    }
-    // --- In other cases, we extract the component ID, and then render the component.
-    // --- A component's ID is generally a string with identifier syntax. However, some
-    // --- internal components have IDs with expressions, so we evaluate them.
-    const key = (0, extractParam_1.extractParam)(state, node.uid, appContext, true);
-    return ((0, jsx_runtime_1.jsx)(ComponentNode, { resolvedKey: key, node: node, cleanup: cleanup, stateFieldPartChanged: stateFieldPartChanged, memoedVarsRef: memoedVarsRef, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, layoutContext: layoutContext, parentRenderContext: parentRenderContext, uidInfoRef: uidInfoRef }, key));
-}
-function transformNodeWithChildDatasource(node) {
-    var _a;
-    let didResolve = false;
-    let loaders = node.loaders;
-    let children = undefined;
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-        if ((child === null || child === void 0 ? void 0 : child.type) === "DataSource") {
-            didResolve = true;
-            if (!loaders) {
-                loaders = [];
-            }
-            loaders.push({
-                uid: child.uid,
-                type: "DataLoader",
-                props: child.props,
-                events: child.events,
-                when: child.when,
-            });
-        }
-        else {
-            if (!children) {
-                children = [];
-            }
-            children.push(child);
-        }
-    });
-    if (didResolve) {
-        return Object.assign(Object.assign({}, node), { children,
-            loaders });
-    }
-    return node;
-}
-function transformNodeWithDataSourceRefProp(node, uidInfoRef) {
-    if (!node.props) {
-        return node;
-    }
-    let ret = Object.assign({}, node);
-    let resolved = false;
-    Object.entries(node.props).forEach(([key, value]) => {
-        let uidInfoForDatasource;
-        try {
-            uidInfoForDatasource = (0, extractParam_1.extractParam)(uidInfoRef.current, value);
-        }
-        catch (e) { }
-        if ((uidInfoForDatasource === null || uidInfoForDatasource === void 0 ? void 0 : uidInfoForDatasource.type) === "loader") {
-            resolved = true;
-            ret = Object.assign(Object.assign({}, ret), { props: Object.assign(Object.assign({}, ret.props), { [key]: {
-                        type: "DataSourceRef",
-                        uid: uidInfoForDatasource.uid,
-                    } }) });
-        }
-    });
-    if (resolved) {
-        return ret;
-    }
-    return node;
-}
-function transformNodeWithDataProp(node, resolvedDataPropIsString, uidInfoRef) {
-    var _a;
-    if (!((_a = node.props) === null || _a === void 0 ? void 0 : _a.__DATA_RESOLVED) &&
-        node.props &&
-        "data" in node.props &&
-        resolvedDataPropIsString) {
-        //we skip the transformation if the data prop is a binding expression for a loader value
-        if ((0, extractParam_1.extractParam)(uidInfoRef.current, node.props.data) === "loaderValue") {
-            return node;
-        }
-        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { data: {
-                    type: "DataSource",
-                    props: {
-                        url: node.props.data,
-                    },
-                } }) });
-    }
-    return node;
-}
-function transformNodeWithRawDataProp(node) {
-    if (node.props && "raw_data" in node.props) {
-        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { __DATA_RESOLVED: true, data: node.props.raw_data }) });
-    }
-    return node;
-}
-/**
- * The ComponentNode it the outermost React component wrapping an xmlui component.
- */
-const ComponentNode = (0, react_1.memo)((0, react_1.forwardRef)(function ComponentNode(_a, ref) {
-    var _b;
-    var { node, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, stateFieldPartChanged, layoutContext, parentRenderContext, memoedVarsRef, resolvedKey, cleanup, uidInfoRef } = _a, rest = __rest(_a, ["node", "state", "dispatch", "appContext", "lookupAction", "lookupSyncCallback", "registerComponentApi", "renderChild", "stateFieldPartChanged", "layoutContext", "parentRenderContext", "memoedVarsRef", "resolvedKey", "cleanup", "uidInfoRef"]);
-    // --- We pass the layout context to the child components, so we need to
-    // --- make sure that it is stable
-    const stableLayoutContext = (0, react_1.useRef)(layoutContext);
-    // --- Transform the various data sources within the xmlui component definition
-    const nodeWithTransformedLoaders = (0, react_1.useMemo)(() => {
-        let transformed = transformNodeWithChildDatasource(node); //if we have an DataSource child, we transform it to a loader on the node
-        transformed = transformNodeWithDataSourceRefProp(transformed, uidInfoRef);
-        transformed = transformNodeWithRawDataProp(transformed);
-        return transformed;
-    }, [node, uidInfoRef]);
-    const resolvedDataPropIsString = (0, react_1.useMemo)(() => {
-        var _a;
-        const resolvedDataProp = (0, extractParam_1.extractParam)(state, (_a = nodeWithTransformedLoaders.props) === null || _a === void 0 ? void 0 : _a.data, appContext, true);
-        return typeof resolvedDataProp === "string";
-    }, [appContext, (_b = nodeWithTransformedLoaders.props) === null || _b === void 0 ? void 0 : _b.data, state]);
-    const nodeWithTransformedDatasourceProp = (0, react_1.useMemo)(() => {
-        return transformNodeWithDataProp(nodeWithTransformedLoaders, resolvedDataPropIsString, uidInfoRef);
-    }, [nodeWithTransformedLoaders, resolvedDataPropIsString, uidInfoRef]);
-    let renderedChild = null;
-    if ((0, ContainerComponentDef_1.isContainerLike)(nodeWithTransformedDatasourceProp)) {
-        renderedChild = ((0, jsx_runtime_1.jsx)(ComponentContainer, { resolvedKey: resolvedKey, node: nodeWithTransformedDatasourceProp, parentState: state, parentDispatch: dispatch, layoutContextRef: stableLayoutContext, parentRenderContext: parentRenderContext, parentStateFieldPartChanged: stateFieldPartChanged, parentRegisterComponentApi: registerComponentApi, uidInfoRef: uidInfoRef, ref: ref }));
-    }
-    else {
-        renderedChild = ((0, jsx_runtime_1.jsx)(ComponentBed_1.default, Object.assign({ onUnmount: cleanup, memoedVarsRef: memoedVarsRef, node: nodeWithTransformedDatasourceProp, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, parentRenderContext: parentRenderContext, layoutContextRef: stableLayoutContext, ref: ref, uidInfoRef: uidInfoRef }, rest)));
-    }
-    return renderedChild;
-}));
-// Extracts the `state` property values defined in a component definition's `uses` property. It uses the specified
-// `appContext` when resolving the state values.
-function extractScopedState(parentState, uses) {
-    if (!uses) {
-        return parentState;
-    }
-    if (uses.length === 0) {
-        return constants_1.EMPTY_OBJECT;
-    }
-    return (0, lodash_es_1.pick)(parentState, uses);
-}
-// This hook combines state properties in a list of states so that a particular state property in a higher
-// argument index overrides the same-named state property in a lower argument index.
-function useCombinedState(...states) {
-    const combined = (0, react_1.useMemo)(() => {
-        let ret = {};
-        states.forEach((state = constants_1.EMPTY_OBJECT) => {
-            // console.log("st", state);
-            if (state !== constants_1.EMPTY_OBJECT) {
-                ret = Object.assign(Object.assign({}, ret), state);
-            }
-            // console.log("ret", ret);
-        });
-        return ret;
-    }, [states]);
-    return (0, hooks_1.useShallowCompareMemoize)(combined);
-}
-// This hook combines state properties in a list of states so that a particular state property in a higher
-// argument index merges into the same-named state property in a lower argument index.
-// This hook combines state properties in a list of states so that a particular state property in a higher
-// argument index merges into the same-named state property in a lower argument index.
-function useMergedState(localVars, componentState) {
-    const merged = (0, react_1.useMemo)(() => {
-        const ret = Object.assign({}, localVars);
-        Reflect.ownKeys(componentState).forEach((key) => {
-            const value = componentState[key];
-            if (ret[key] === undefined) {
-                ret[key] = value;
-            }
-            else {
-                if ((0, lodash_es_1.isPlainObject)(ret[key]) && (0, lodash_es_1.isPlainObject)(value)) {
-                    ret[key] = (0, lodash_es_1.merge)((0, lodash_es_1.cloneDeep)(ret[key]), value);
-                }
-                else if (Array.isArray(ret[key]) && Array.isArray(value)) {
-                    ret[key] = Object.assign([], ret[key], value);
-                }
-                else {
-                    ret[key] = value;
-                }
-            }
-        });
-        return ret;
-    }, [localVars, componentState]);
-    return (0, hooks_1.useShallowCompareMemoize)(merged);
-}
-class ParseVarError extends Error {
-    constructor(varName, originalError) {
-        super(`Error on var: ${varName} - ${(originalError === null || originalError === void 0 ? void 0 : originalError.message) || "unknown"}`);
-    }
-}
-//true if it's coming from a code behind or a script tag
-function isParsedValue(value) {
-    return value && typeof value === "object" && value[code_behind_collect_1.PARSED_MARK_PROP];
-}
-// This hook resolves variables to their current value (using binding expression evaluation)
-function useVars(vars = constants_1.EMPTY_OBJECT, fnDeps = constants_1.EMPTY_OBJECT, componentState, memoedVars) {
-    const appContext = (0, AppContext_1.useAppContext)();
-    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(componentState);
-    const resolvedVars = (0, react_1.useMemo)(() => {
-        const ret = {};
-        Object.entries(vars).forEach(([key, value]) => {
-            if (key === "$props") {
-                // --- We already resolved props in a compound component
-                ret[key] = value;
-            }
-            else {
-                if (!isParsedValue(value) && typeof value !== "string") {
-                    ret[key] = value;
-                }
-                else {
-                    // --- Resolve each variable's value, without going into the details of arrays and objects
-                    if (!memoedVars.current.has(value)) {
-                        memoedVars.current.set(value, {
-                            getDependencies: (0, memoize_one_1.default)((value, referenceTrackedApi) => {
-                                if (isParsedValue(value)) {
-                                    return (0, visitors_1.collectVariableDependencies)(value.tree, referenceTrackedApi);
-                                }
-                                // console.log(`GETTING DEPENDENCY FOR ${value} with:`, referenceTrackedApi);
-                                const params = (0, ParameterParser_1.parseParameterString)(value);
-                                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)((value, state, appContext, strict, deps, appContextDeps) => {
-                                // console.log(
-                                //   "VARS, BUST, obtain value called with",
-                                //   value,
-                                //   { state, appContext },
-                                //   {
-                                //     deps,
-                                //     appContextDeps,
-                                //   }
-                                // );
-                                try {
-                                    return isParsedValue(value)
-                                        ? (0, eval_tree_sync_1.evalBinding)(value.tree, {
-                                            localContext: state,
-                                            appContext,
-                                            options: {
-                                                defaultToOptionalMemberAccess: true,
-                                            },
-                                        })
-                                        : (0, extractParam_1.extractParam)(state, value, appContext, strict);
-                                }
-                                catch (e) {
-                                    console.log(state);
-                                    throw new ParseVarError(value, e);
-                                }
-                            }, ([_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 stateContext = Object.assign(Object.assign({}, ret), componentState);
-                    let dependencies = [];
-                    if (fnDeps[key]) {
-                        dependencies = fnDeps[key];
-                    }
-                    else {
-                        memoedVars.current
-                            .get(value)
-                            .getDependencies(value, referenceTrackedApi)
-                            .forEach((dep) => {
-                            if (fnDeps[dep]) {
-                                dependencies.push(...fnDeps[dep]);
-                            }
-                            else {
-                                dependencies.push(dep);
-                            }
-                        });
-                        dependencies = [...new Set(dependencies)];
-                    }
-                    const stateDepValues = (0, misc_1.pickFromObject)(stateContext, dependencies);
-                    const appContextDepValues = (0, misc_1.pickFromObject)(appContext, dependencies);
-                    // console.log("VARS, obtain value called with", stateDepValues, appContextDepValues);
-                    ret[key] = memoedVars.current
-                        .get(value)
-                        .obtainValue(value, stateContext, appContext, true, stateDepValues, appContextDepValues);
-                }
-            }
-        });
-        return ret;
-    }, [appContext, componentState, fnDeps, memoedVars, referenceTrackedApi, vars]);
-    return (0, hooks_1.useShallowCompareMemoize)(resolvedVars);
-}
-// --- Tests if a particular component (`componentUid`) can sign event (with `eventName`)
-// --- life cycle changes
-function canSignEventLifecycle(componentUid, eventName) {
-    return componentUid !== undefined && eventName !== undefined;
-}
-// Signs that a particular component (`uid`) has started running an event handler
-// for the event with `eventName`.
-function eventHandlerStarted(uid, eventName) {
-    return {
-        type: containers_1.ContainerActionKind.EVENT_HANDLER_STARTED,
-        payload: {
-            uid,
-            eventName,
-        },
-    };
-}
-// Signs that a particular component (`uid`) has completed running an event handler
-// for the event with `eventName`.
-function eventHandlerCompleted(uid, eventName) {
-    return {
-        type: containers_1.ContainerActionKind.EVENT_HANDLER_COMPLETED,
-        payload: {
-            uid,
-            eventName,
-        },
-    };
-}
-// Signs that a particular component (`uid`) has received an error while running an event handler
-// for the event with `eventName`.
-function eventHandlerError(uid, eventName, error) {
-    return {
-        type: containers_1.ContainerActionKind.EVENT_HANDLER_ERROR,
-        payload: {
-            uid,
-            eventName,
-            error,
-        },
-    };
-}
-// Signs that a particular state part (`path`) has been changed to a new `value` on a `target` object
-// when executing an `action`.
-function statePartChanged(path, value, target, action) {
-    return {
-        type: containers_1.ContainerActionKind.STATE_PART_CHANGED,
-        payload: {
-            path,
-            value,
-            target,
-            actionType: action,
-        },
-    };
-}
-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 }));
-    }
-}