xmlui 0.11.4 → 0.11.7

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

@@ -1,380 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __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 });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const lodash_es_1 = require("lodash-es");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const extractParam_1 = require("../utils/extractParam");
-const ThemeContext_1 = require("../theming/ThemeContext");
-const StyleContext_1 = require("../theming/StyleContext");
-const mergeProps_1 = require("../utils/mergeProps");
-const ComponentDecorator_1 = __importDefault(require("../ComponentDecorator"));
-const valueExtractor_1 = require("../rendering/valueExtractor");
-const constants_1 = require("../constants");
-const ComponentRegistryContext_1 = require("../../components/ComponentRegistryContext");
-const ApiBoundComponent_1 = require("../ApiBoundComponent");
-const hooks_1 = require("../utils/hooks");
-const containers_1 = require("./containers");
-const InspectorContext_1 = require("../InspectorContext");
-const SlotItem_1 = require("../../components/SlotItem");
-const descriptorHelper_1 = require("../descriptorHelper");
-const event_handlers_1 = require("../event-handlers");
-const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
-const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
-const layout_resolver_1 = require("../theming/layout-resolver");
-/**
- * This component's primary responsibility is to transform a particular component definition
- * into its React representation using the current rendering context.
- *
- * Its properties hold a transformed version of an `InnerRendererContext` (which describes the
- * current rendering context). The modified version uses a stable reference to the layout context
- * and provides a cleanup function (`onUnmount`) to call when the component is about to be disposed.
- */
-const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, ref) {
-    var _b;
-    var { node, state, appContext, dispatch, lookupAction, lookupSyncCallback, renderChild, registerComponentApi, layoutContextRef, parentRenderContext, memoedVarsRef, onUnmount, uidInfoRef, children } = _a, rest = __rest(_a, ["node", "state", "appContext", "dispatch", "lookupAction", "lookupSyncCallback", "renderChild", "registerComponentApi", "layoutContextRef", "parentRenderContext", "memoedVarsRef", "onUnmount", "uidInfoRef", "children"]);
-    // --- Make sure the component definition has `props` and `events` properties
-    // --- (even if they are empty)
-    const safeNode = (0, react_1.useMemo)(() => {
-        return Object.assign(Object.assign({}, node), { props: node.props || constants_1.EMPTY_OBJECT, events: node.events || constants_1.EMPTY_OBJECT });
-    }, [node]);
-    // --- Each component receives a unique identifier
-    const uid = (0, react_1.useMemo)(() => Symbol(safeNode.uid), [safeNode.uid]);
-    // --- Takes care the component cleanup function is called when the component
-    // --- is about to be disposed
-    (0, react_1.useEffect)(() => {
-        return () => {
-            onUnmount(uid);
-        };
-    }, [onUnmount, uid]);
-    // --- Obtain a function to register the component API
-    const memoedRegisterComponentApi = (0, react_1.useCallback)((api) => {
-        registerComponentApi(uid, api);
-    }, [registerComponentApi, uid]);
-    // --- Obtain a function to update the component state
-    const memoedUpdateState = (0, react_1.useCallback)((componentState) => {
-        dispatch({
-            type: containers_1.ContainerActionKind.COMPONENT_STATE_CHANGED,
-            payload: {
-                uid,
-                state: componentState,
-            },
-        });
-    }, [dispatch, uid]);
-    // --- Get the tracked APIs of the compomnent
-    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(state);
-    // --- Obtain a function to extract the value of a property (from an expression)
-    const valueExtractor = (0, react_1.useMemo)(() => {
-        return (0, valueExtractor_1.createValueExtractor)(state, appContext, referenceTrackedApi, memoedVarsRef);
-    }, [appContext, memoedVarsRef, referenceTrackedApi, state]);
-    // --- Obtain a function that can execute a script synchronously
-    const memoedLookupSyncCallback = (0, react_1.useCallback)((action) => {
-        return lookupSyncCallback(valueExtractor(action), uid);
-    }, [lookupSyncCallback, uid, valueExtractor]);
-    // --- Obtain a function to lookup an action by its name, which is bound
-    // --- to this component instance
-    const memoedLookupAction = (0, react_1.useCallback)((action, actionOptions) => {
-        return lookupAction(action, uid, actionOptions);
-    }, [lookupAction, uid]);
-    // --- Obtain the component renderer and descriptor from the component registry
-    // --- Memoizes the renderChild function
-    const memoedRenderChild = (0, react_1.useCallback)((children, layoutContext, pRenderContext) => {
-        return renderChild(children, layoutContext, pRenderContext || parentRenderContext, uidInfoRef);
-    }, [renderChild, parentRenderContext, uidInfoRef]);
-    // --- Collect the API-bound properties and events of the component to determine
-    // --- if the component should be wrapped in an `ApiBoundComponent`
-    const apiBoundProps = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.props, "DataSource", "DataSourceRef"), [safeNode.props]);
-    const apiBoundEvents = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.events, "APICall", "FileDownload", "FileUpload"), [safeNode.events]);
-    const isApiBound = apiBoundProps.length > 0 || apiBoundEvents.length > 0;
-    // --- Obtain the component renderer and descriptor from the component registry
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const { renderer, descriptor, isCompoundComponent } = componentRegistry.lookupComponentRenderer(safeNode.type) || {};
-    // --- Obtain a function that can lookup an event handler, which is bound to a
-    // --- particular event of this component instance
-    const memoedLookupEventHandler = (0, react_1.useCallback)((eventName, actionOptions) => {
-        var _a;
-        const action = ((_a = safeNode.events) === null || _a === void 0 ? void 0 : _a[eventName]) || (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.defaultHandler);
-        return lookupAction(action, uid, Object.assign({ eventName }, actionOptions));
-    }, [lookupAction, safeNode.events, uid]);
-    // --- Set up the mouse event handlers for the component
-    const mouseEventHandlers = (0, event_handlers_1.useMouseEventHandlers)(memoedLookupEventHandler, (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) || isApiBound || isCompoundComponent);
-    // --- Use the current theme to obtain resources and collect theme variables
-    const { getResourceUrl } = (0, ThemeContext_1.useTheme)();
-    // --- Obtain a function that can extract a resource URL from a logical URL
-    const extractResourceUrl = (0, react_1.useCallback)((url) => {
-        const extractedUrl = valueExtractor(url);
-        if (typeof extractedUrl !== "string" || extractedUrl.trim() === "") {
-            console.warn(`Component '${safeNode.type}': ` +
-                `the extracted resource URL is not a valid string: value ${extractedUrl}, type ${typeof extractedUrl}`);
-            return undefined;
-        }
-        return getResourceUrl(extractedUrl);
-    }, [getResourceUrl, valueExtractor, safeNode.type]);
-    // --- Collect and compile the layout property values
-    const { cssProps } = (0, react_1.useMemo)(() => {
-        const resolvedLayoutProps = {};
-        descriptorHelper_1.layoutOptionKeys.forEach((key) => {
-            if (safeNode.props && key in safeNode.props) {
-                resolvedLayoutProps[key] = valueExtractor(safeNode.props[key], true);
-            }
-        });
-        // --- New layout property resolution
-        return (0, layout_resolver_1.resolveLayoutProps)(resolvedLayoutProps, Object.assign(Object.assign({}, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current), { mediaSize: appContext.mediaSize }));
-        // --- Old layout property resolution
-        // return compileLayout(resolvedLayoutProps, themeVars, {
-        //   ...layoutContextRef?.current,
-        //   mediaSize: appContext.mediaSize,
-        // });
-    }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
-    // const className = useComponentStyle(cssProps);
-    // --- As compileLayout generates new cssProps and nonCssProps objects every time, we need to
-    // --- memoize them using shallow comparison to avoid unnecessary re-renders.
-    const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
-    const className = (0, StyleContext_1.useComponentStyle)(stableLayoutCss);
-    const { inspectId, refreshInspection } = (0, InspectorContext_1.useInspector)(safeNode, uid);
-    // --- Extract context variables (keys starting with "$") from state
-    const contextVars = (0, react_1.useMemo)(() => {
-        const vars = {};
-        for (const key of Object.keys(state)) {
-            if (key.startsWith("$")) {
-                vars[key] = state[key];
-            }
-        }
-        return vars;
-    }, [state]);
-    // --- Assemble the renderer context we pass down the rendering chain
-    const rendererContext = {
-        node: safeNode,
-        state: state[uid] || constants_1.EMPTY_OBJECT,
-        contextVars,
-        updateState: memoedUpdateState,
-        appContext,
-        extractValue: valueExtractor,
-        lookupEventHandler: memoedLookupEventHandler,
-        lookupAction: memoedLookupAction,
-        lookupSyncCallback: memoedLookupSyncCallback,
-        extractResourceUrl,
-        renderChild: memoedRenderChild,
-        registerComponentApi: memoedRegisterComponentApi,
-        className,
-        layoutContext: layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current,
-        uid,
-    };
-    // --- No special behavior, let's render the component according to its definition.
-    let renderedNode = null;
-    let renderingError = null;
-    try {
-        if (safeNode.type === "Slot") {
-            // --- Transpose the children from the parent component to the slot in
-            // --- the compound component
-            renderedNode = slotRenderer(rendererContext, parentRenderContext);
-        }
-        else {
-            if (!renderer) {
-                console.error(`Component '${safeNode.type}' is not available. Did you forget to register it?`);
-                return (0, jsx_runtime_1.jsx)(UnknownComponent_1.default, { message: `${safeNode.type}` });
-            }
-            // --- Render the component using the renderer function obtained from the component registry
-            renderedNode = renderer(rendererContext);
-        }
-        /**
-         * Apply any behaviors to the component.
-         */
-        const behaviors = componentRegistry.getBehaviors();
-        if (!isCompoundComponent) {
-            for (const behavior of behaviors) {
-                if (behavior.canAttach(rendererContext.node, descriptor)) {
-                    renderedNode = behavior.attach(rendererContext, renderedNode, descriptor);
-                }
-            }
-        }
-        // --- Components may have a `testId` property for E2E testing purposes. Inject the value of `testId`
-        // --- into the DOM object of the rendered React component.
-        if (
-        // --- The component has its "id" (internally, "uid") or "testId" property defined
-        (((appContext === null || appContext === void 0 ? void 0 : appContext.decorateComponentsWithTestId) &&
-            (safeNode.uid !== undefined || safeNode.testId !== undefined)) ||
-            // --- The component has its "inspectId" property defined
-            inspectId !== undefined) &&
-            // // --- The app context indicates test mode
-            // --- The component is visual
-            (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) !== true &&
-            // --- The component is not opaque
-            (descriptor === null || descriptor === void 0 ? void 0 : descriptor.opaque) !== true) {
-            // --- Use `ComponentDecorator` to inject the `data-testid` attribute into the component.
-            const testId = safeNode.testId || safeNode.uid;
-            const resolvedUid = (0, extractParam_1.extractParam)(state, testId, appContext, true);
-            renderedNode = ((0, jsx_runtime_1.jsx)(ComponentDecorator_1.default, { attr: { "data-testid": resolvedUid, "data-inspectId": inspectId }, allowOnlyRefdChild: isCompoundComponent || safeNode.type === "ModalDialog", onTargetMounted: safeNode.type === "ModalDialog" ? refreshInspection : undefined, ref: ref, children: (0, react_1.cloneElement)(renderedNode, Object.assign({}, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), mouseEventHandlers), rest))) }));
-        }
-        // --- API-bound components provide helpful behavior out of the box, such as transforming API-bound
-        // --- events and properties. This extra functionality is implemented in `ApiBoundComponent`.
-        if (isApiBound) {
-            return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: safeNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, parentRendererContext: parentRenderContext }, safeNode.uid));
-        }
-        // --- The current layout context may suggest to wrap the rendered node.
-        if ((_b = layoutContextRef.current) === null || _b === void 0 ? void 0 : _b.wrapChild) {
-            renderedNode = layoutContextRef.current.wrapChild(rendererContext, renderedNode, descriptor);
-        }
-    }
-    catch (e) {
-        // --- Mark the potential rendering error and display it
-        renderingError = (e === null || e === void 0 ? void 0 : e.message) || "Internal error";
-        console.error(e);
-    }
-    // --- The rendering process may result in errors. If so, we render an error message.
-    if (renderingError) {
-        return ((0, jsx_runtime_1.jsx)(InvalidComponent_1.default, { errors: [renderingError], node: safeNode, children: renderedNode }));
-    }
-    let nodeToRender = renderedNode;
-    // --- If we have a single React node with forwarded reference, or mouse events
-    // --- let's merge the "rest" properties with it.
-    if ((ref || !(0, lodash_es_1.isEmpty)(mouseEventHandlers)) && renderedNode && react_1.default.isValidElement(renderedNode)) {
-        // --- For radix UI/accessibility, read more here:
-        // --- https://www.radix-ui.com/primitives/docs/guides/composition
-        const childrenArray = !children ? [] : Array.isArray(children) ? children : [children];
-        const clonedRef = renderedNode.type === react_1.default.Fragment
-            ? undefined
-            : ref
-                ? (0, react_compose_refs_1.composeRefs)(ref, renderedNode.ref)
-                : renderedNode.ref;
-        nodeToRender = (0, react_1.cloneElement)(renderedNode, Object.assign({ ref: clonedRef }, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), (renderedNode.type !== react_1.default.Fragment ? mouseEventHandlers : {})), rest)), ...childrenArray);
-    }
-    else {
-        // --- If the rendering resulted in multiple React nodes, wrap them in a fragment.
-        nodeToRender =
-            react_1.default.isValidElement(renderedNode) && !!children
-                ? (0, react_1.cloneElement)(renderedNode, null, children)
-                : renderedNode;
-    }
-    return nodeToRender;
-});
-/**
- * This function renders the content of a slot. If the slot is named, it looks for a template
- * in the parent component to render. If the template is not found, it renders the default content
- * of the slot.
- */
-function slotRenderer({ node, extractValue, renderChild, lookupAction, layoutContext }, parentRenderContext) {
-    // --- Get the template name from the slot
-    const templateName = extractValue.asOptionalString(node.props.name);
-    if (templateName && !templateName.endsWith("Template")) {
-        return ((0, jsx_runtime_1.jsx)(InvalidComponent_1.default, { node: node, errors: [
-                `Slot name '${templateName}' is not valid. ` +
-                    "A named slot should use a name ending with 'Template'.",
-            ] }));
-    }
-    let slotProps = null;
-    if (!(0, lodash_es_1.isEmpty)(node.props)) {
-        slotProps = {};
-        Object.keys(node.props).forEach((key) => {
-            if (key !== "name") {
-                let extractedValue = extractValue(node.props[key], true);
-                if (extractedValue === null || extractedValue === void 0 ? void 0 : extractedValue._ARROW_EXPR_) {
-                    extractedValue = lookupAction(extractedValue);
-                }
-                slotProps[key] = extractedValue;
-            }
-        });
-    }
-    if (parentRenderContext) {
-        // --- We may use a named slot to get the content from the parent
-        if (templateName === undefined) {
-            // --- The slot is not named
-            if (!slotProps) {
-                // --- simply render the children from the parent
-                // --- The parent does not provide a template for the slot.
-                if (parentRenderContext.children) {
-                    return parentRenderContext.renderChild(parentRenderContext.children, layoutContext);
-                }
-            }
-            else {
-                // --- The slot has properties; let's render the children with the slot properties
-                return ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: parentRenderContext.children, renderChild: parentRenderContext.renderChild, slotProps: slotProps, layoutContext: layoutContext }));
-            }
-        }
-        else {
-            // --- We have a named slot with optional other properties; let's collect them
-            if (parentRenderContext.props[templateName]) {
-                // --- The parent provides a template to put into the slot. Let's use
-                // --- the parent's context to render the slot content.
-                return ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: parentRenderContext.props[templateName], renderChild: parentRenderContext.renderChild, slotProps: slotProps, layoutContext: layoutContext }));
-            }
-        }
-    }
-    // --- No parent context, render the default slot content
-    if (node.children && node.children.length > 0) {
-        // --- The parent does not provide a template for the slot. Let's render
-        // --- the slot's default children.
-        return ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: node.children, renderChild: renderChild, slotProps: slotProps !== null && slotProps !== void 0 ? slotProps : constants_1.EMPTY_OBJECT, layoutContext: layoutContext }));
-    }
-    // --- We do not render the named slots with names not ending with "Template"
-    return undefined;
-}
-/**
- * This function gets the API-bound component properties. A property is API-bound if its value is a
- * component definition with one of the `type` values passed to this function.
- * @param items Hash object of component properties
- * @param type Types to consider as API-bound properties
- * @returns List of API-bound property names
- */
-function getApiBoundItems(items, ...type) {
-    const ret = [];
-    if (!items) {
-        return ret;
-    }
-    const entries = Object.entries(items);
-    for (let i = 0; i < entries.length; i++) {
-        const [key, value] = entries[i];
-        if ((0, lodash_es_1.isPlainObject)(value) && type.includes(value.type)) {
-            ret.push(key);
-        }
-    }
-    return ret;
-}
-exports.default = ComponentAdapter;

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

@@ -1,166 +0,0 @@
-"use strict";
-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.ComponentWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const extractParam_1 = require("../utils/extractParam");
-const ContainerWrapper_1 = require("./ContainerWrapper");
-const ComponentAdapter_1 = __importDefault(require("./ComponentAdapter"));
-const ComponentRegistryContext_1 = require("../../components/ComponentRegistryContext");
-const constants_1 = require("../constants");
-/**
- * The ComponentNode it the outermost React component wrapping an xmlui component.
- */
-exports.ComponentWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function ComponentWrapper(_a, ref) {
-    var _b;
-    var { node, resolvedKey, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, statePartChanged, layoutContext, parentRenderContext, memoedVarsRef, cleanup, uidInfoRef, children } = _a, rest = __rest(_a, ["node", "resolvedKey", "state", "dispatch", "appContext", "lookupAction", "lookupSyncCallback", "registerComponentApi", "renderChild", "statePartChanged", "layoutContext", "parentRenderContext", "memoedVarsRef", "cleanup", "uidInfoRef", "children"]);
-    // --- We pass the layout context to the child components, so we need to
-    // --- make sure that it is stable
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const { descriptor } = componentRegistry.lookupComponentRenderer(node.type) || {};
-    const stableLayoutContext = (0, react_1.useRef)(layoutContext);
-    // --- Transform the various data sources within the xmlui component definition
-    const nodeWithTransformedLoaders = (0, react_1.useMemo)(() => {
-        // --- If we have a DataSource child, we transform it to a loader on the node
-        let transformed = node;
-        transformed = transformNodeWithChildrenAsTemplate(transformed, descriptor === null || descriptor === void 0 ? void 0 : descriptor.childrenAsTemplate);
-        transformed = transformNodeWithChildDatasource(transformed);
-        transformed = transformNodeWithDataSourceRefProp(transformed, uidInfoRef);
-        transformed = transformNodeWithRawDataProp(transformed);
-        return transformed;
-    }, [descriptor === null || descriptor === void 0 ? void 0 : descriptor.childrenAsTemplate, node, uidInfoRef]);
-    // --- String values in the "data" prop are treated as URLs. This boolean
-    // --- indicates whether the "data" prop is a string or not.
-    const resolvedDataPropIsString = (0, react_1.useMemo)(() => {
-        var _a;
-        const resolvedDataProp = (0, extractParam_1.extractParam)(state, (_a = nodeWithTransformedLoaders.props) === null || _a === void 0 ? void 0 : _a.data, appContext, true);
-        return typeof resolvedDataProp === "string";
-    }, [appContext, (_b = nodeWithTransformedLoaders.props) === null || _b === void 0 ? void 0 : _b.data, state]);
-    // --- If the "data" prop is a string, we transform it to a DataSource component
-    // --- so that it can be fetched.
-    const nodeWithTransformedDatasourceProp = (0, react_1.useMemo)(() => {
-        return transformNodeWithDataProp(nodeWithTransformedLoaders, resolvedDataPropIsString, uidInfoRef);
-    }, [nodeWithTransformedLoaders, resolvedDataPropIsString, uidInfoRef]);
-    if ((0, ContainerWrapper_1.isContainerLike)(nodeWithTransformedDatasourceProp)) {
-        // --- This component should be rendered as a container
-        return ((0, jsx_runtime_1.jsx)(ContainerWrapper_1.ContainerWrapper, Object.assign({ resolvedKey: resolvedKey, node: nodeWithTransformedDatasourceProp, parentState: state, parentDispatch: dispatch, layoutContextRef: stableLayoutContext, parentRenderContext: parentRenderContext, parentStatePartChanged: statePartChanged, parentRegisterComponentApi: registerComponentApi, uidInfoRef: uidInfoRef, ref: ref }, rest, { children: children })));
-    }
-    else {
-        // --- This component should be rendered as a regular component
-        return ((0, jsx_runtime_1.jsx)(ComponentAdapter_1.default, Object.assign({ onUnmount: cleanup, memoedVarsRef: memoedVarsRef, node: nodeWithTransformedDatasourceProp, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, parentRenderContext: parentRenderContext, layoutContextRef: stableLayoutContext, ref: ref, uidInfoRef: uidInfoRef }, rest, { children: children })));
-    }
-}));
-function transformNodeWithChildrenAsTemplate(node, childrenAsTemplate) {
-    var _a;
-    if (!childrenAsTemplate) {
-        return node;
-    }
-    if (!node.children || node.children.length === 0) {
-        return node;
-    }
-    if ((_a = node.props) === null || _a === void 0 ? void 0 : _a[childrenAsTemplate]) {
-        throw Error("'" + childrenAsTemplate + "' is already used as a property.");
-    }
-    return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { [childrenAsTemplate]: node.children }), children: constants_1.EMPTY_ARRAY });
-}
-// --- Create a DataLoader component for each DataSource child within the
-// --- xmlui component
-function transformNodeWithChildDatasource(node) {
-    var _a;
-    let didResolve = false;
-    let loaders = node.loaders;
-    let children = undefined;
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-        if ((child === null || child === void 0 ? void 0 : child.type) === "DataSource") {
-            didResolve = true;
-            if (!loaders) {
-                loaders = [];
-            }
-            loaders.push({
-                uid: child.uid,
-                type: "DataLoader",
-                props: child.props,
-                events: child.events,
-                when: child.when,
-            });
-        }
-        else {
-            if (!children) {
-                children = [];
-            }
-            children.push(child);
-        }
-    });
-    // --- Return the transform node with the collected loaders
-    // --- (or the original one)
-    return didResolve
-        ? Object.assign(Object.assign({}, node), { children,
-            loaders }) : node;
-}
-// --- Properties may use loaders. We transform all of them to the virtual
-// --- DataSourceRef component type.
-function transformNodeWithDataSourceRefProp(node, uidInfoRef) {
-    if (!node.props) {
-        return node;
-    }
-    let ret = Object.assign({}, node);
-    let resolved = false;
-    Object.entries(node.props).forEach(([key, value]) => {
-        let uidInfoForDatasource;
-        try {
-            uidInfoForDatasource = (0, extractParam_1.extractParam)(uidInfoRef.current, value);
-        }
-        catch (e) { }
-        if ((uidInfoForDatasource === null || uidInfoForDatasource === void 0 ? void 0 : uidInfoForDatasource.type) === "loader") {
-            resolved = true;
-            ret = Object.assign(Object.assign({}, ret), { props: Object.assign(Object.assign({}, ret.props), { [key]: {
-                        type: "DataSourceRef",
-                        uid: uidInfoForDatasource.uid,
-                    } }) });
-        }
-    });
-    // --- Done
-    return resolved ? ret : node;
-}
-// --- If the "data" prop is a string, we transform it to a DataSource component
-function transformNodeWithDataProp(node, resolvedDataPropIsString, uidInfoRef) {
-    var _a;
-    if (!((_a = node.props) === null || _a === void 0 ? void 0 : _a.__DATA_RESOLVED) &&
-        node.props &&
-        "data" in node.props &&
-        resolvedDataPropIsString) {
-        // --- We skip the transformation if the data property is a binding expression
-        // --- for a loader value
-        if ((0, extractParam_1.extractParam)(uidInfoRef.current, node.props.data) === "loaderValue") {
-            return node;
-        }
-        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { data: {
-                    type: "DataSource",
-                    props: {
-                        url: node.props.data,
-                    },
-                } }) });
-    }
-    return node;
-}
-// --- We consider the "raw_data" prop as a resolved data value
-function transformNodeWithRawDataProp(node) {
-    if (node.props && "raw_data" in node.props) {
-        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { __DATA_RESOLVED: true, data: node.props.raw_data }) });
-    }
-    return node;
-}