xmlui 0.4.0

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

@@ -0,0 +1,1110 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.containerReducer = void 0;
+exports.renderRoot = renderRoot;
+exports.eventHandlerStarted = eventHandlerStarted;
+exports.eventHandlerCompleted = eventHandlerCompleted;
+exports.eventHandlerError = eventHandlerError;
+exports.statePartChanged = statePartChanged;
+exports.renderLoaders = renderLoaders;
+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 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 Component_1 = __importDefault(require("@components-core/Component"));
+const constants_1 = require("@components-core/constants");
+const ContainerComponentDef_1 = require("./ContainerComponentDef");
+const style_compiler_1 = require("../../parsers/style-parser/style-compiler");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const buildProxy_1 = __importDefault(require("./buildProxy"));
+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 containers_1 = require("@components-core/abstractions/containers");
+const LoaderComponent_1 = require("@components-core/LoaderComponent");
+// 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,
+        layoutCss: constants_1.EMPTY_OBJECT,
+        layoutNonCss: constants_1.EMPTY_OBJECT,
+        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, dynamicChildren, memoedVarsRef, isImplicit, }, ref) {
+    var _a;
+    const { apiBoundContainer } = node;
+    const dispatch = isImplicit ? parentDispatch : containerDispatch;
+    const registerComponentApi = isImplicit ? parentRegisterComponentApi : containerRegisterComponentApi;
+    const { themeVars } = (0, ThemeContext_1.useTheme)();
+    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)({});
+    // console.log({ componentState });
+    // const publicComponentState = useShallowCompareMemoize(useMemo(()=>{
+    //   const ret = {};
+    //   return ret;
+    // }, []));
+    const stateRef = (0, react_1.useRef)(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)(() => {
+        stateRef.current = componentState;
+    }, [componentState]);
+    (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.globals) === null || _a === void 0 ? void 0 : _a.defaultToOptionalMemberAccess) === "boolean"
+                    ? appContext.globals.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 === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : options.eventName, e));
+            }
+            throw e;
+        }
+    }));
+    const runCodeSync = (0, misc_1.useEvent)((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;
+        }
+    });
+    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, misc_1.useEvent)((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] = (...eventArgs) => {
+                return runCodeSync(arrowExpression, ...eventArgs);
+            };
+        }
+        return fnsRef.current[uid][fnCacheKey];
+    });
+    const lookupSyncCallback = (0, misc_1.useEvent)((action, uid) => {
+        if (!action) {
+            return undefined;
+        }
+        if (typeof action === "function") {
+            return action;
+        }
+        const resolvedAction = (0, extractParam_1.extractParam)(componentState, action, appContext, true);
+        if (!resolvedAction) {
+            return undefined;
+        }
+        if (typeof resolvedAction === "function") {
+            return resolvedAction;
+        }
+        if (!resolvedAction._ARROW_EXPR_) {
+            throw new Error("Only arrow expression allowed in sync callback");
+        }
+        return getOrCreateSyncCallbackFn(resolvedAction, uid);
+    });
+    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];
+    });
+    const stableRenderChild = (0, react_1.useCallback)((childNode, lc, rc) => {
+        // let node: any = childNode;
+        if (typeof childNode === "string") {
+            throw Error("should be resolved for now");
+        }
+        // if(rc){
+        //   console.log("hey, ", rc);
+        //   // console.log(childNode);
+        // }
+        const children = (0, lodash_es_1.isArray)(childNode) ? childNode : [childNode];
+        if (!children || !children.length) {
+            return null;
+        }
+        const wrapWithFragment = children.length > 1;
+        const dynamicChildren = children.map((child, childIndex) => {
+            if (!child) {
+                return undefined;
+            }
+            let renderedChild;
+            if ("childToRender" in child) {
+                //inside a compoundComponent, render it with the parent state context, but the actual CC layoutContext
+                renderedChild = child.renderChild(child.childToRender, lc);
+            }
+            else {
+                const resolvedProps = {};
+                descriptorHelper_1.layoutOptionKeys.forEach((key) => {
+                    if (child.props && key in child.props) {
+                        resolvedProps[key] = (0, extractParam_1.extractParam)(componentState, child.props[key], appContext, true);
+                    }
+                });
+                // console.log("compile layout for child", { child, lc });
+                const { cssProps, nonCssProps } = (0, style_compiler_1.compileLayout)(resolvedProps, themeVars, lc);
+                renderedChild = renderChild({
+                    node: child,
+                    state: componentState,
+                    dispatch,
+                    appContext,
+                    lookupAction,
+                    lookupSyncCallback,
+                    registerComponentApi,
+                    renderChild: stableRenderChild,
+                    stateFieldPartChanged,
+                    layoutCss: cssProps,
+                    layoutNonCss: nonCssProps,
+                    layoutContext: lc,
+                    dynamicChildren: rc,
+                    memoedVarsRef,
+                    cleanup,
+                    childIndex,
+                });
+            }
+            if (renderedChild === undefined) {
+                return undefined;
+            }
+            let rendered = renderedChild;
+            if (wrapWithFragment) {
+                if (react_1.default.isValidElement(renderedChild)) {
+                    rendered = react_1.default.cloneElement(renderedChild, {
+                        key: `${childIndex}_${child.uid}`,
+                    });
+                }
+                else {
+                    //e.g. simple text nodes
+                    rendered = (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderedChild }, `${childIndex}_${child.uid}`);
+                }
+            }
+            return rendered;
+        });
+        if (dynamicChildren.length === 1) {
+            return ref && dynamicChildren[0] && (0, react_1.isValidElement)(dynamicChildren[0])
+                ? react_1.default.cloneElement(dynamicChildren[0], {
+                    ref: (0, react_compose_refs_1.composeRefs)(ref, dynamicChildren[0].ref),
+                })
+                : dynamicChildren[0];
+        }
+        return dynamicChildren;
+    }, [
+        themeVars,
+        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 = {};
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [renderLoaders({
+                uidInfo,
+                loaders: node.loaders,
+                componentState,
+                //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,
+                cleanup,
+            }), stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, dynamicChildren)] }, 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, dynamicChildren: dynamicChildren, isImplicit, parentDispatch, }, 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]));
+    const [componentState, dispatch] = (0, react_1.useReducer)(exports.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, dynamicChildren: dynamicChildren, memoedVarsRef: memoedVars, isImplicit: isImplicit, ref: ref }) }));
+}));
+/**
+ * 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;
+    // --- 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,
+        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, dynamicChildren, parentDispatch, }, 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, dynamicChildren: dynamicChildren, isImplicit: node.type !== "Container" && enhancedNode.uses === undefined, parentRegisterComponentApi: parentRegisterComponentApi, parentDispatch: parentDispatch, ref: ref }) }));
+}));
+function renderChild({ node, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, layoutCss, layoutNonCss, stateFieldPartChanged, layoutContext, dynamicChildren, memoedVarsRef, cleanup, childIndex, }) {
+    var _a, _b, _c;
+    if (!node) {
+        return null;
+    }
+    // --- Render only visible components
+    if (!(0, extractParam_1.shouldKeep)(node.when, state, appContext)) {
+        return null;
+    }
+    // --- We do not parse text nodes specified with CDATA
+    if (node.type === "TextNodeCData") {
+        return (_b = (_a = node.props) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    }
+    if (node.type === "TextNode") {
+        // --- Special conversion: "&nbsp;" is converted to a non-breaking space
+        let nodeValue = (0, extractParam_1.extractParam)(state, (_c = node.props) === null || _c === void 0 ? void 0 : _c.value, appContext, true);
+        return nodeValue;
+    }
+    const key = (0, extractParam_1.extractParam)(state, node.uid, appContext, true);
+    return ((0, jsx_runtime_1.jsx)(Node, { resolvedKey: key, node: node, cleanup: cleanup, stateFieldPartChanged: stateFieldPartChanged, memoedVarsRef: memoedVarsRef, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, layoutCss: layoutCss, layoutNonCss: layoutNonCss, layoutContext: layoutContext, dynamicChildren: dynamicChildren, childIndex: childIndex }, 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.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 transformNodeWithDatasourceProp(node) {
+    if (node.props && "datasource" in node.props && typeof node.props.datasource === "string") {
+        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { datasource: {
+                    type: "Datasource",
+                    props: {
+                        url: node.props.datasource,
+                    },
+                } }) });
+    }
+    return node;
+}
+const Node = (0, react_1.memo)((0, react_1.forwardRef)(function Node(_a, ref) {
+    var { node, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, layoutCss, layoutNonCss, stateFieldPartChanged, layoutContext, dynamicChildren, memoedVarsRef, resolvedKey, cleanup, childIndex } = _a, rest = __rest(_a, ["node", "state", "dispatch", "appContext", "lookupAction", "lookupSyncCallback", "registerComponentApi", "renderChild", "layoutCss", "layoutNonCss", "stateFieldPartChanged", "layoutContext", "dynamicChildren", "memoedVarsRef", "resolvedKey", "cleanup", "childIndex"]);
+    //pref, this way
+    const stableLayoutContext = (0, react_1.useRef)(layoutContext);
+    stableLayoutContext.current = layoutContext;
+    const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(layoutCss);
+    const stableLayoutNonCss = (0, hooks_1.useShallowCompareMemoize)(layoutNonCss);
+    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 = transformNodeWithDatasourceProp(transformed);
+        // console.log(transformNodeWithDatasourceProp(transformed));
+        return transformed;
+    }, [node]);
+    let renderedChild = null;
+    if ((0, ContainerComponentDef_1.isContainerLike)(nodeWithTransformedLoaders)) {
+        renderedChild = ((0, jsx_runtime_1.jsx)(ComponentContainer, { resolvedKey: resolvedKey, node: nodeWithTransformedLoaders, parentState: state, parentDispatch: dispatch, layoutContextRef: stableLayoutContext, dynamicChildren: dynamicChildren, parentStateFieldPartChanged: stateFieldPartChanged, parentRegisterComponentApi: registerComponentApi, ref: ref }));
+    }
+    else {
+        renderedChild = ((0, jsx_runtime_1.jsx)(Component_1.default, Object.assign({ onUnmount: cleanup, memoedVarsRef: memoedVarsRef, node: nodeWithTransformedLoaders, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, layoutCss: stableLayoutCss, layoutNonCss: stableLayoutNonCss, dynamicChildren: dynamicChildren, layoutContextRef: stableLayoutContext, childIndex: childIndex, ref: ref }, 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 {
+                    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 === "$events" || key === "$props") {
+                // --- We already resolved props and events 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,
+        },
+    };
+}
+// This value defines the reducer to manage the state of the view container using the current state of the container
+// and an action. Note that the reducer function in this package handles immutability with the `produce` function of
+// the `immer` package.
+exports.containerReducer = (0, immer_1.default)((state, action) => {
+    const { uid } = action.payload;
+    if (uid === undefined && action.type !== containers_1.ContainerActionKind.STATE_PART_CHANGED) {
+        console.error("uid not provided for control component", {
+            state,
+            action,
+        });
+        return state;
+    }
+    switch (action.type) {
+        case containers_1.ContainerActionKind.LOADER_IN_PROGRESS_CHANGED: {
+            state[uid] = Object.assign(Object.assign({}, state[uid]), { inProgress: action.payload.inProgress });
+            break;
+        }
+        case containers_1.ContainerActionKind.LOADER_LOADED: {
+            const { data, pageInfo } = action.payload;
+            state[uid] = {
+                value: data,
+                byId: Array.isArray(data) ? (0, lodash_es_1.keyBy)(data, (item) => item.$id) : undefined,
+                inProgress: false,
+                loaded: data !== undefined,
+                pageInfo,
+            };
+            break;
+        }
+        case containers_1.ContainerActionKind.LOADER_ERROR: {
+            const { error } = action.payload;
+            state[uid] = Object.assign(Object.assign({}, state[uid]), { error, inProgress: false, loaded: true });
+            break;
+        }
+        case containers_1.ContainerActionKind.EVENT_HANDLER_STARTED: {
+            const { eventName } = action.payload;
+            const inProgressFlagName = `${eventName}InProgress`;
+            state[uid] = Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: true });
+            break;
+        }
+        case containers_1.ContainerActionKind.EVENT_HANDLER_COMPLETED: {
+            const { eventName } = action.payload;
+            const inProgressFlagName = `${eventName}InProgress`;
+            state[uid] = Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: false });
+            break;
+        }
+        case containers_1.ContainerActionKind.EVENT_HANDLER_ERROR: {
+            const { eventName } = action.payload;
+            const inProgressFlagName = `${eventName}InProgress`;
+            state[uid] = Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: false });
+            break;
+        }
+        case containers_1.ContainerActionKind.COMPONENT_STATE_CHANGED: {
+            const { state: newState } = action.payload;
+            state[uid] = Object.assign(Object.assign({}, state[uid]), newState);
+            break;
+        }
+        case containers_1.ContainerActionKind.STATE_PART_CHANGED: {
+            const { path, value, target, actionType } = action.payload;
+            if (actionType === "unset") {
+                (0, lodash_es_1.unset)(state, path);
+            }
+            else {
+                (0, lodash_es_1.setWith)(state, path, value, (nsValue) => {
+                    if (nsValue === undefined && (0, lodash_es_1.isPlainObject)(target)) {
+                        // if we are setting a new object's key, lodash defaults it to an array, if the key is a number.
+                        // This way we can force it to be an object.
+                        // (example: we have an empty object in vars called usersTyped: {}, we set usersTyped[1] = Date.now().
+                        // During the first state setting, we don't have a previous value for usersTyped, because it was defined
+                        // in vars, and wasn't updated yet. In the first update, it's value is undefined, and because the key is
+                        // a number (an id in our case), lodash thinks it has to create an array after this 'set'. This way we
+                        // can force it, because in the target we have the target object value (given by the proxy change),so if
+                        // it's an object, it should be an object. Otherwise we let lodash decide)
+                        return Object(nsValue);
+                    }
+                });
+            }
+            break;
+        }
+        default:
+            throw new Error();
+    }
+});
+function renderLoaders({ uidInfo, loaders = constants_1.EMPTY_ARRAY, componentState, dispatch, appContext, registerComponentApi, lookupAction, cleanup, }) {
+    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";
+        }
+        // --- Render the current loader
+        const renderedLoader = renderLoader({
+            loader,
+            componentState,
+            dispatch,
+            appContext,
+            registerComponentApi,
+            lookupAction,
+            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, cleanup, }) {
+        // --- 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 }));
+    }
+}