xmlui 0.7.19 → 0.7.21

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

@@ -0,0 +1,576 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const containers_1 = require("@components-core/abstractions/containers");
+const AppContext_1 = require("@components-core/AppContext");
+const buildProxy_1 = require("@components-core/rendering/buildProxy");
+const DebugViewProvider_1 = require("@components-core/DebugViewProvider");
+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 extractParam_1 = require("@components-core/utils/extractParam");
+const hooks_1 = require("@components-core/utils/hooks");
+const misc_1 = require("@components-core/utils/misc");
+const statementUtils_1 = require("@components-core/utils/statementUtils");
+const StateViewerNative_1 = require("@components/StateViewer/StateViewerNative");
+const lodash_es_1 = require("lodash-es");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const memoize_one_1 = __importDefault(require("memoize-one"));
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const renderChild_1 = require("./renderChild");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const LoaderComponent_1 = require("@components-core/LoaderComponent");
+const constants_1 = require("@components-core/constants");
+// React component to display a view container and implement its behavior
+exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container({ node, componentState, dispatch: containerDispatch, parentDispatch, resolvedKey, version, setVersion, statePartChanged, 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_router_dom_1.useNavigate)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const fnsRef = (0, react_1.useRef)({});
+    const stateRef = (0, react_1.useRef)(componentState);
+    //generally bad practise to write ref in render (https://react.dev/learn/referencing-values-with-refs#best-practices-for-refs), but:
+    // this stateRef is only used in runCodeSync/async functions, which are memoized, so it's safe to use it here (as I know:  illesg)
+    // In case we sync up the stateRef with the componentState in the useEffect/useInsertionEffect/useLayoutEffect, the stateRef would lag behind the componentState
+    stateRef.current = componentState;
+    const parsedStatementsRef = (0, react_1.useRef)({});
+    const [_, startTransition] = (0, react_1.useTransition)();
+    const mountedRef = (0, react_1.useRef)(true);
+    // --- This ref holds a map of promises for each statement execution that cause any state change.
+    const statementPromises = (0, react_1.useRef)(new Map());
+    // --- Ensure that re-rendering because of version change resolves all pending statement promises.
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        for (const resolve of statementPromises.current.values()) {
+            resolve();
+        }
+    }, [version]);
+    // --- Ensure that component disposal resolves all pending statement promises.
+    (0, react_1.useEffect)(() => {
+        mountedRef.current = true;
+        const leftPromises = statementPromises.current;
+        return () => {
+            mountedRef.current = false;
+            for (const resolve of leftPromises.values()) {
+                resolve();
+            }
+        };
+    }, []);
+    const runCodeAsync = (0, misc_1.useEvent)((source, componentUid, options, ...eventArgs) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
+        // --- Check if the event handler can sign its lifecycle state
+        const canSignEventLifecycle = () => componentUid.description !== undefined && (options === null || options === void 0 ? void 0 : options.eventName) !== undefined;
+        let changes = [];
+        const getComponentStateClone = () => {
+            changes.length = 0;
+            const poj = (0, lodash_es_1.cloneDeep)(Object.assign({}, stateRef.current));
+            poj["$this"] = stateRef.current[componentUid];
+            return (0, buildProxy_1.buildProxy)(poj, (changeInfo) => {
+                var _a;
+                const idRoot = (_a = changeInfo.pathArray) === null || _a === void 0 ? void 0 : _a[0];
+                if (idRoot === null || idRoot === void 0 ? void 0 : idRoot.startsWith("$")) {
+                    throw new Error("Cannot update a read-only variable");
+                }
+                changes.push(changeInfo);
+            });
+        };
+        const evalAppContext = Object.assign(Object.assign({}, appContext), { getThemeVar });
+        const evalContext = {
+            appContext: evalAppContext,
+            eventArgs,
+            localContext: getComponentStateClone(),
+            implicitContextGetter: () => {
+                return {
+                    uid: componentUid,
+                    state: stateRef.current,
+                    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()) {
+                // --- Sign the event handler has been started
+                dispatch({
+                    type: containers_1.ContainerActionKind.EVENT_HANDLER_STARTED,
+                    payload: {
+                        uid: componentUid.description,
+                        eventName: options.eventName,
+                    },
+                });
+            }
+            let mainThreadBlockingRuns = 0;
+            yield (0, process_statement_async_1.processStatementQueueAsync)(statements, evalContext, undefined, (evalContext) => __awaiter(this, void 0, void 0, function* () {
+                if (changes.length) {
+                    mainThreadBlockingRuns = 0;
+                    changes.forEach((change) => {
+                        statePartChanged(change.pathArray, (0, lodash_es_1.cloneDeep)(change.newValue), change.target, change.action);
+                    });
+                    let resolve = null;
+                    const stateUpdatedPromise = new Promise((res) => {
+                        resolve = () => {
+                            res(null);
+                        };
+                    });
+                    const key = (0, misc_1.generatedId)();
+                    statementPromises.current.set(key, resolve);
+                    // We use this to tell react that this update is not high-priority.
+                    //   If we don't put it to a transition, the whole app would be blocked if we run a long,
+                    //   update intensive queue (e.g. an infinite loop which
+                    //   increments a counter, see playground example learning/01_Experiments/01_Event_Framework/app ).
+                    //   Before this solution, we used a setTimeout(..., 0); hack, but some browsers (chrome especially)
+                    //   do some funky stuff with the background tabs (e.g. all the setTimeouts are
+                    //   maximized to run in 1 time / minute, doesn't matter if it's timeout is 0)
+                    //   As of 2023. June 20, this solution works with backgrounded tabs, too.
+                    startTransition(() => {
+                        setVersion((prev) => prev + 1);
+                    });
+                    //TODO this could be a problem - if this container gets unmounted, we still have to wait for the update,
+                    //  but in that case this update probably happened in the parent (e.g. a button's event handler removes the whole container
+                    //  where the button lives, but it still has some statements to run).
+                    // with this solution the statement execution doesn't stop, and we fallback waiting with a setTimeout(0)
+                    if (mountedRef.current) {
+                        yield stateUpdatedPromise;
+                    }
+                    else {
+                        yield (0, misc_1.delay)(0);
+                    }
+                    statementPromises.current.delete(key);
+                    changes = [];
+                }
+                else {
+                    //in this else branch normally we block the main thread (we don't wait for any state promise to be resolved),
+                    // so in a long-running (typically infinite loop) situation, where there aren't any changes in the state
+                    // we block the main thread indefinitely... this 'mainThreadBlockingRuns' var solution makes sure that
+                    // we pause in every 100 runs, and let the main thread breath a bit, so it's not frozen for the whole time
+                    // (we clear that counter above, too, where we use a startTransition call to de-prioritize this work)
+                    mainThreadBlockingRuns++;
+                    if (mainThreadBlockingRuns > 100) {
+                        mainThreadBlockingRuns = 0;
+                        yield (0, misc_1.delay)(0);
+                    }
+                }
+                evalContext.localContext = getComponentStateClone();
+            }));
+            if (canSignEventLifecycle()) {
+                // --- Sign the event handler has successfully completed
+                dispatch({
+                    type: containers_1.ContainerActionKind.EVENT_HANDLER_COMPLETED,
+                    payload: {
+                        uid: componentUid.description,
+                        eventName: options.eventName,
+                    },
+                });
+            }
+            if ((_c = (_b = evalContext.mainThread) === null || _b === void 0 ? void 0 : _b.blocks) === null || _c === void 0 ? void 0 : _c.length) {
+                return evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1]
+                    .returnValue;
+            }
+        }
+        catch (e) {
+            //if we pass down an event handler to a component, we should sign the error once, not in every step of the component chain
+            //  (we use it in the compoundComponent, resolving it's event handlers)
+            if ((options === null || options === void 0 ? void 0 : options.signError) !== false) {
+                appContext.signError(e);
+            }
+            if (canSignEventLifecycle()) {
+                dispatch({
+                    type: containers_1.ContainerActionKind.EVENT_HANDLER_ERROR,
+                    payload: {
+                        uid: componentUid.description,
+                        eventName: options.eventName,
+                        error: e,
+                    },
+                });
+            }
+            throw e;
+        }
+    }));
+    const runCodeSync = (0, react_1.useCallback)((arrowExpression, ...eventArgs) => {
+        var _a, _b;
+        const evalContext = {
+            localContext: (0, lodash_es_1.cloneDeep)(stateRef.current),
+            appContext,
+            eventArgs,
+        };
+        try {
+            const arrowStmt = {
+                type: "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 = (0, renderChild_1.renderChild)({
+                node: child,
+                state: componentState,
+                dispatch,
+                appContext,
+                lookupAction,
+                lookupSyncCallback,
+                registerComponentApi,
+                renderChild: stableRenderChild,
+                statePartChanged: statePartChanged,
+                layoutContext: lc,
+                parentRenderContext: pRenderContext,
+                memoedVarsRef,
+                cleanup,
+                uidInfoRef,
+            });
+            if (renderedChild === undefined) {
+                // --- No displayable child, nothing to render
+                return undefined;
+            }
+            // --- Let's process the rendered child
+            let rendered = renderedChild;
+            const key = `${childIndex}_${child.uid}`;
+            if (wrapWithFragment) {
+                // --- Add the `key` attribute to the child
+                if (react_1.default.isValidElement(renderedChild)) {
+                    // --- React can display this element
+                    rendered = react_1.default.cloneElement(renderedChild, { key });
+                }
+                else {
+                    // --- A simple text node (or alike). We need to wrap it in a `Fragment`
+                    rendered = (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderedChild }, key);
+                }
+            }
+            // --- Done.
+            return rendered;
+        });
+        // --- At this point we have a React node for each child
+        if (renderedChildren.length === 1) {
+            // --- If we have a single (and valid React element) child, we compose its
+            // --- `ref` with the parent's `ref`. This allows the parent to access the child's
+            // --- DOM node. Otherwise, we use the child as is.
+            return ref && renderedChildren[0] && (0, react_1.isValidElement)(renderedChildren[0])
+                ? react_1.default.cloneElement(renderedChildren[0], {
+                    ref: (0, react_compose_refs_1.composeRefs)(ref, renderedChildren[0].ref),
+                })
+                : renderedChildren[0];
+        }
+        // --- Done.
+        return renderedChildren;
+    }, [
+        componentState,
+        dispatch,
+        appContext,
+        lookupAction,
+        lookupSyncCallback,
+        registerComponentApi,
+        statePartChanged,
+        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));
+}));
+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 }));
+    }
+}

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerWrapper = void 0;
+exports.isContainerLike = isContainerLike;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ErrorBoundary_1 = require("@components-core/rendering/ErrorBoundary");
+const react_1 = require("react");
+const StateContainer_1 = require("./StateContainer");
+/**
+ * This function checks if a particular component needs a wrapping container to
+ * manage its internal state, which is closed from its external context but
+ * available to its children.
+ * @param node The component definition node to check
+ * @returns Tru, if the component needs a wrapping container
+ */
+function isContainerLike(node) {
+    if (node.type === "Container") {
+        return true;
+    }
+    // --- If any of the following properties have a value, we need a container
+    return !!(node.loaders ||
+        node.vars ||
+        node.uses ||
+        node.contextVars ||
+        node.functions ||
+        node.scriptCollected);
+}
+/**
+ * This component is a container that manages the state of its children. It
+ * provides a context for the children to access the state and the API of the
+ * parent component.
+ */
+exports.ContainerWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function ContainerWrapper({ node, resolvedKey, parentState, parentStatePartChanged, parentRegisterComponentApi, parentDispatch, parentRenderContext, layoutContextRef, uidInfoRef, }, ref) {
+    // --- Make sure the component node is wrapped with a container
+    const containerizedNode = (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)(StateContainer_1.StateContainer, { node: containerizedNode, resolvedKey: resolvedKey, parentState: parentState, parentStatePartChanged: parentStatePartChanged, parentRegisterComponentApi: parentRegisterComponentApi, parentDispatch: parentDispatch, parentRenderContext: parentRenderContext, layoutContextRef: layoutContextRef, uidInfoRef: uidInfoRef, isImplicit: node.type !== "Container" && containerizedNode.uses === undefined, 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;
+    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,
+        uses: node.uses,
+        api: node.api,
+        containerUid: node === null || node === void 0 ? void 0 : node.containerUid,
+        apiBoundContainer: node === null || node === void 0 ? void 0 : node.apiBoundContainer,
+        contextVars: node.contextVars,
+        props: {
+            debug: (_b = node.props) === null || _b === void 0 ? void 0 : _b.debug,
+        },
+        children: [wrappedNode],
+    };
+};