xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components-core/loader/PageableLoader.js

@@ -0,0 +1,262 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageableLoader = PageableLoader;
+const react_1 = require("react");
+const react_query_1 = require("@tanstack/react-query");
+const immer_1 = __importStar(require("immer"));
+const extractParam_1 = require("@components-core/utils/extractParam");
+const AppContext_1 = require("@components-core/AppContext");
+const hooks_1 = require("@components-core/utils/hooks");
+function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi, pollIntervalInSeconds, onLoaded, loaderInProgressChanged, loaderLoaded, loaderError, transformResult, }) {
+    const { uid } = loader;
+    const appContext = (0, AppContext_1.useAppContext)();
+    const queryKey = (0, react_1.useMemo)(() => (queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)]), [appContext, loader.props, queryId, state, uid]);
+    const thizRef = (0, react_1.useRef)(queryKey);
+    const getPreviousPageParam = (0, react_1.useCallback)((firstPage) => {
+        let prevPageParam = undefined;
+        const prevPageSelector = loader.props.prevPageSelector;
+        if (prevPageSelector) {
+            prevPageParam = (0, extractParam_1.extractParam)({ $response: firstPage }, prevPageSelector.startsWith("{") ? prevPageSelector : `{$response.${prevPageSelector}}`);
+        }
+        if (!prevPageParam) {
+            return undefined;
+        }
+        return {
+            prevPageParam: prevPageParam,
+        };
+    }, [loader.props.prevPageSelector]);
+    const getNextPageParam = (0, react_1.useCallback)((lastPage) => {
+        let nextPageParam = undefined;
+        const nextPageSelector = loader.props.nextPageSelector;
+        if (nextPageSelector) {
+            nextPageParam = (0, extractParam_1.extractParam)({ $response: lastPage }, nextPageSelector.startsWith("{") ? nextPageSelector : `{$response.${nextPageSelector}}`);
+        }
+        if (!nextPageParam) {
+            return undefined;
+        }
+        return {
+            nextPageParam: nextPageParam,
+        };
+    }, [loader.props.nextPageSelector]);
+    const { data, status, error, hasNextPage, isFetchingNextPage, hasPreviousPage, isFetchingPreviousPage, isFetching, refetch, fetchPreviousPage, fetchNextPage, } = (0, react_query_1.useInfiniteQuery)({
+        queryKey,
+        queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal, pageParam }) {
+            return yield loaderFn(signal, pageParam);
+        }), [loaderFn]),
+        select: (0, react_1.useCallback)((data) => {
+            let result = [];
+            if (data) {
+                result = data.pages.flatMap((d) => d);
+            }
+            const resultSelector = loader.props.resultSelector;
+            if (resultSelector) {
+                result = (0, extractParam_1.extractParam)({ $response: result }, resultSelector.startsWith("{") ? resultSelector : `{$response.${resultSelector}}`);
+            }
+            return transformResult ? transformResult(result) : result;
+        }, [loader.props.resultSelector, transformResult]),
+        getPreviousPageParam: loader.props.prevPageSelector === undefined ? undefined : getPreviousPageParam,
+        getNextPageParam: loader.props.nextPageSelector === undefined ? undefined : getNextPageParam,
+    });
+    //TODO revisit
+    // //we clear all the pages, except the last one (it's suitable for the chat app, but for the other direction we'll have to leave the first page)
+    // // otherwise it'll keep it in the cache, and refetch all the pages when you come back
+    // //  see more here: https://stackoverflow.com/questions/71286123/reactquery-useinfinitequery-refetching-issue
+    // //  and here: https://tanstack.com/query/latest/docs/react/guides/infinite-queries?from=reactQueryV3&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Fguides%2Finfinite-queries#what-happens-when-an-infinite-query-needs-to-be-refetched
+    (0, react_1.useEffect)(() => {
+        const queryKey = thizRef.current;
+        return () => {
+            var _a, _b;
+            (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.cancelQueries(queryKey);
+            (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryKey, (old) => {
+                if (!old) {
+                    return old;
+                }
+                return (0, immer_1.default)(old, (draft) => {
+                    draft.pages = draft.pages.length ? [draft.pages[draft.pages.length - 1]] : [];
+                    // draft.pageParams = draft.pageParams.length ? [draft.pageParams[draft.pageParams.length - 1]] : [];
+                    draft.pageParams = [];
+                });
+            });
+            loaderLoaded(undefined, undefined);
+        };
+    }, [appContext.queryClient, loaderLoaded, uid]);
+    const prevData = (0, hooks_1.usePrevious)(data);
+    const prevError = (0, hooks_1.usePrevious)(error);
+    (0, react_1.useLayoutEffect)(() => {
+        loaderInProgressChanged(isFetching); //TODO isFetchingPrevPage / nextPage
+    }, [isFetching, loaderInProgressChanged]);
+    const pageInfo = (0, react_1.useMemo)(() => {
+        return {
+            hasPrevPage: hasPreviousPage,
+            isFetchingPrevPage: isFetchingPreviousPage,
+            hasNextPage,
+            isFetchingNextPage,
+        };
+    }, [hasNextPage, hasPreviousPage, isFetchingNextPage, isFetchingPreviousPage]);
+    const prevPageInfo = (0, hooks_1.usePrevious)(pageInfo);
+    (0, react_1.useLayoutEffect)(() => {
+        // console.log("data changed", {
+        //   status,
+        //   data,
+        //   pageInfo,
+        // });
+        if (status === "success" && (prevData !== data || prevPageInfo !== pageInfo)) {
+            loaderLoaded(data, pageInfo);
+            //we do this to push the onLoaded callback to the next event loop.
+            // It works, because useLayoutEffect will run synchronously after the render, and the onLoaded callback will have
+            // access to the latest loader value
+            setTimeout(() => {
+                onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(data);
+            }, 0);
+        }
+        else if (status === "error" && prevError !== error) {
+            loaderError(error);
+        }
+    }, [
+        data,
+        error,
+        loaderError,
+        loaderLoaded,
+        onLoaded,
+        pageInfo,
+        prevData,
+        prevError,
+        prevPageInfo,
+        status,
+    ]);
+    (0, react_1.useEffect)(() => {
+        let intervalId;
+        if (pollIntervalInSeconds) {
+            intervalId = setInterval(() => {
+                refetch();
+            }, pollIntervalInSeconds * 1000);
+        }
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [pollIntervalInSeconds, refetch]);
+    const fetchPrevPage = (0, react_1.useCallback)(() => {
+        return fetchPreviousPage();
+    }, [fetchPreviousPage]);
+    const stableFetchNextPage = (0, react_1.useCallback)(() => {
+        return fetchNextPage();
+    }, [fetchNextPage]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi({
+            fetchPrevPage,
+            fetchNextPage: stableFetchNextPage,
+            refetch,
+            update: (updater) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                const oldData = (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.getQueryData(queryId);
+                if (!oldData) {
+                    //loader not loaded yet, we skip the update
+                    return;
+                }
+                const originalFlatItems = oldData.pages.flatMap((d) => d.result);
+                const draft = (0, immer_1.createDraft)(oldData);
+                const flatItems = [];
+                for (let i = 0; i < draft.pages.length; i++) {
+                    const page = draft.pages[i];
+                    yield updater(page.result);
+                    flatItems.push(...page.result);
+                }
+                if (flatItems.length !== originalFlatItems.length) {
+                    throw new Error("Use this method for update only. If you want to add or delete, call the addItem/deleteItem method.");
+                }
+                const newData = (0, immer_1.finishDraft)(draft);
+                // console.log("BEFORE: ", appContext.queryClient?.getQueryData(queryId!));
+                (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryId, newData);
+                // console.log("AFTER: ", appContext.queryClient?.getQueryData(queryId!));
+            }),
+            addItem: (element, indexToInsert) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                const oldData = (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.getQueryData(queryId);
+                const draft = (0, immer_1.createDraft)(oldData);
+                if (indexToInsert === undefined) {
+                    draft.pages[draft.pages.length - 1].result.push(element);
+                }
+                else {
+                    throw new Error("not implemented");
+                    // TODO is should be something like this
+                    // //find the pageIndex and itemIndex in that page
+                    // let pageIndex = -1;
+                    // let itemIndex = -1;
+                    // let i = 0;
+                    // oldData.pages.forEach((page, index)=>{
+                    //   i += page.result.length;
+                    //   if(i >= indexToInsert){
+                    //     pageIndex = index;
+                    //     itemIndex = i - indexToInsert;
+                    //     return;
+                    //   }
+                    // });
+                    // draft.pages[pageIndex].result.splice(itemIndex, 0, element);
+                }
+                const newData = (0, immer_1.finishDraft)(draft);
+                (_b = appContext.queryClient) === null || _b === void 0 ? void 0 : _b.setQueryData(queryId, newData);
+            }),
+            getItems: () => {
+                return data;
+            },
+            deleteItem: (element) => __awaiter(this, void 0, void 0, function* () {
+                throw new Error("not implemented");
+            }),
+        });
+    }, [
+        appContext.queryClient,
+        fetchPrevPage,
+        data,
+        loader.uid,
+        queryId,
+        queryKey,
+        refetch,
+        registerComponentApi,
+        stableFetchNextPage,
+    ]);
+    return null;
+}

package/dist/scripts/src/components-core/markup-check.js

@@ -0,0 +1,279 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkXmlUiMarkup = checkXmlUiMarkup;
+exports.visitComponent = visitComponent;
+const ParameterParser_1 = require("./script-runner/ParameterParser");
+const Parser_1 = require("../parsers/scripting/Parser");
+const descriptorHelper_1 = require("./descriptorHelper");
+const abstractions_1 = require("@components/abstractions");
+/**
+ * This function checks the XMLUI markup for potential issues. It retrieves
+ * a list of errors and warnings.
+ * @param rootDef Root component definition
+ * @param components Components referenced in the XMLUI markup
+ * @param devMode Indicates if the check is performed in development mode
+ * @returns List of errors and warnings
+ */
+function checkXmlUiMarkup(rootDef, components, metadataHandler, devMode) {
+    const errorsCollected = [];
+    // --- Initialize the check
+    const continuation = {};
+    const componentIdsCollected = new Set();
+    const compoundIdsCollected = new Set();
+    // --- Visit the root component
+    if (rootDef) {
+        visitComponent(rootDef, null, componentDefVisitor, continuation, metadataHandler);
+    }
+    // --- Visit the compound components
+    if (!continuation.abort) {
+        for (const component of components) {
+            // --- Rule: Compound component name must be a valid JavaScript identifier
+            if (!isValidIdentifier(component.name)) {
+                reportError("M007", "Component", component.name);
+            }
+            // --- Rule: Compound component name cannot be 'Component'
+            if (component.name === "Component") {
+                reportError("M008", "Component", component.name);
+            }
+            // --- Rule: Compound component must not have the name of a registered component
+            if (metadataHandler.componentRegistered(component.name)) {
+                reportError("M009", "Component", component.name);
+            }
+            // --- Rule: Compound component name must be unique
+            if (compoundIdsCollected.has(component.name)) {
+                reportError("M010", "Component", component.name);
+            }
+            else {
+                compoundIdsCollected.add(component.name);
+            }
+            // --- Reset component ID scope
+            componentIdsCollected.clear();
+            // --- Visit the compount component's definition
+            visitComponent(component.component, null, componentDefVisitor, continuation, metadataHandler);
+        }
+    }
+    // --- Done.
+    return errorsCollected;
+    // --- This visitor checks the rules for a particular component
+    function componentDefVisitor(def, parent, before, continuation) {
+        var _a, _b, _c, _d, _e;
+        // --- This is the visitor function to check a ComponentDef markup
+        if (!before) {
+            // --- Do not visit the component definition after its children have been visited
+            return;
+        }
+        // --- Rule: Component name must be registered
+        if (!metadataHandler.componentRegistered(def.type)) {
+            reportError("M001", (_a = parent === null || parent === void 0 ? void 0 : parent.type) !== null && _a !== void 0 ? _a : "Root", def.type);
+            // continuation.cancel = true;
+            return;
+        }
+        // --- Rule: an ID must be a valid JavaScript identifier
+        if (def.uid) {
+            if (!isValidIdentifier(def.uid)) {
+                reportError("M002", def.type, def.type, def.uid);
+            }
+            else if (componentIdsCollected.has(def.uid)) {
+                reportError("M003", def.type, def.uid);
+            }
+            else {
+                componentIdsCollected.add(def.uid);
+            }
+        }
+        // --- Check all props of the component
+        const propDescriptors = (_b = metadataHandler.getComponentProps(def.type)) !== null && _b !== void 0 ? _b : {};
+        const currentProps = (_c = def.props) !== null && _c !== void 0 ? _c : {};
+        for (const propName of Object.keys(currentProps)) {
+            const propDescriptor = propDescriptors[propName];
+            // --- Rule: The property must be defined in the component descriptor or be a layout option
+            // --- or the component must accept arbitrary properties
+            if (propDescriptor) {
+                // --- The property has a descriptor, so it is allowed.
+                // --- Rule: The property value must be parseable
+                const propValue = currentProps[propName];
+                if (typeof propValue === "string") {
+                    try {
+                        (0, ParameterParser_1.parseParameterString)(propValue);
+                    }
+                    catch (error) {
+                        reportError("M006", def.type, propName, error.message);
+                    }
+                }
+            }
+            else {
+                // --- The property has no descriptor.
+                const propParts = propName.split("-");
+                // --- Check for a layout property
+                const validProp = 
+                // --- Layout property
+                (propParts.length === 1 && descriptorHelper_1.layoutOptionKeys.includes(propName)) ||
+                    // --- Layout property with viewport size
+                    (propParts.length === 2 &&
+                        descriptorHelper_1.layoutOptionKeys.includes(propParts[0]) &&
+                        abstractions_1.viewportSizeNames.includes(propParts[1])) ||
+                    // --- Arbitrary property is allowed
+                    metadataHandler.acceptArbitraryProps(def.type);
+                if (!validProp) {
+                    // --- The component does not accept arbitrary properties and
+                    // --- the property is not a layout option
+                    reportError("M005", def.type, def.type, propName);
+                }
+            }
+        }
+        // --- Check all events of the component
+        const eventDescriptors = (_d = metadataHandler.getComponentEvents(def.type)) !== null && _d !== void 0 ? _d : {};
+        const currentEvents = (_e = def.events) !== null && _e !== void 0 ? _e : {};
+        for (const eventName of Object.keys(currentEvents)) {
+            const eventDescriptor = eventDescriptors[eventName];
+            // --- Rule: The event must be defined in the component descriptor
+            if (eventDescriptor) {
+                // --- The event has a descriptor, so it is allowed.
+                const eventValue = currentEvents[eventName];
+                if (typeof eventValue === "string") {
+                    // --- Rule: The event value must be parseable
+                    const parser = new Parser_1.Parser(eventValue);
+                    try {
+                        parser.parseStatements();
+                        if (parser.errors.length > 0) {
+                            reportError("M012", def.type, eventName, parser.errors[0].text);
+                        }
+                    }
+                    catch (error) {
+                        reportError("M012", def.type, eventName, error.message);
+                    }
+                }
+            }
+            else {
+                reportError("M011", def.type, def.type, eventName);
+            }
+        }
+        // --- Check the component validator
+        const componentValidator = metadataHandler.getComponentValidator(def.type);
+        if (componentValidator) {
+            const validationErrors = componentValidator(def, devMode);
+            if (validationErrors) {
+                if (Array.isArray(validationErrors)) {
+                    for (const error of validationErrors) {
+                        reportError("M013", def.type, error);
+                    }
+                }
+                else {
+                    reportError("M013", def.type, validationErrors);
+                }
+            }
+        }
+    }
+    /**
+     * Checks if a string is a valid JavaScript identifier.
+     * @param identifier The string to check.
+     * @returns True if the string is a valid identifier, false otherwise.
+     */
+    function isValidIdentifier(identifier) {
+        const identifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+        return identifierRegex.test(identifier);
+    }
+    function reportError(code, name, ...args) {
+        _reportError(code, name, false, ...args);
+    }
+    function reportWarning(code, name, ...args) {
+        _reportError(code, name, true, ...args);
+    }
+    function _reportError(code, name, isWarning, ...args) {
+        var _a;
+        let errorText = (_a = errorMessages[code]) !== null && _a !== void 0 ? _a : "Unkonwn error";
+        if (args) {
+            args.forEach((a, idx) => (errorText = replace(errorText, `{${idx}}`, args[idx].toString())));
+        }
+        errorsCollected.push({ name, code, message: errorText, isWarning, args });
+        function replace(input, placeholder, replacement) {
+            do {
+                input = input.replace(placeholder, replacement);
+            } while (input.includes(placeholder));
+            return input;
+        }
+    }
+}
+// --- This function visits a component, its nested components and children
+function visitComponent(def, parent, visitor, continuation = {}, metadataHandler) {
+    var _a, _b, _c, _d;
+    // --- Visit the component (before)
+    visitor(def, parent, true, continuation);
+    if (continuation.abort || continuation.cancel) {
+        // --- Stop the visit
+        return;
+    }
+    // --- Visit the properties with "ComponentDef" value
+    const propDescriptors = (_a = metadataHandler.getComponentProps(def.type)) !== null && _a !== void 0 ? _a : {};
+    const currentProps = (_b = def.props) !== null && _b !== void 0 ? _b : {};
+    for (const propName of Object.keys(currentProps)) {
+        const propDescriptor = propDescriptors[propName];
+        if (!propDescriptor) {
+            // --- No descriptor for the property, skip it
+            continue;
+        }
+        const propValue = currentProps[propName];
+        if (propDescriptor.type === "ComponentDef" && propValue.type) {
+            // --- This property holds a nested component, visit it
+            visitComponent(propValue, def, visitor, continuation, metadataHandler);
+            if (continuation.abort || continuation.cancel) {
+                // --- Stop the visit
+                return;
+            }
+        }
+    }
+    // --- Visit events with nested components
+    const eventDescriptors = (_c = metadataHandler.getComponentEvents(def.type)) !== null && _c !== void 0 ? _c : {};
+    const currentEvents = (_d = def.events) !== null && _d !== void 0 ? _d : {};
+    for (const eventName of Object.keys(currentEvents)) {
+        const eventDescriptor = eventDescriptors[eventName];
+        if (!eventDescriptor) {
+            // --- No descriptor for the events, skip it
+            continue;
+        }
+        const eventValue = currentEvents[eventName];
+        if (typeof eventValue === "object" && eventValue.type) {
+            // --- This event holds a nested component, visit it
+            visitComponent(eventValue, def, visitor, continuation, metadataHandler);
+            if (continuation.abort) {
+                // --- Stop visiting this component
+                return;
+            }
+            if (continuation.cancel) {
+                // --- Skip the remaining items
+                break;
+            }
+        }
+    }
+    // --- Visit the component children
+    if (def.children) {
+        for (const child of def.children) {
+            visitComponent(child, def, visitor, continuation, metadataHandler);
+            if (continuation.abort) {
+                // --- Stop visiting this component
+                return;
+            }
+            if (continuation.cancel) {
+                // --- Skip the remaining items
+                break;
+            }
+        }
+    }
+    // --- Visit the component (after)
+    visitor(def, undefined, false, continuation);
+}
+// --- The error messages of error codes
+const errorMessages = {
+    M001: "The component '{0}' is not registered",
+    M002: "The '{0}' element has an invalid id: '{1}'",
+    M003: "Invalid component identifier: '{0}'",
+    M004: "Duplicated component identifier: '{0}'",
+    M005: "The '{0}' element has an invalid property: '{1}'",
+    M006: "Parsing property value of '{0}' failed: {1}",
+    M007: "The name of a reusable component is invalid: '{0}'",
+    M008: "The name of a reusable component must not be '{0}', as it is a reserved name",
+    M009: "A reusable component cannot have the name of a registered component: '{0}'",
+    M010: "Duplicated reusable component name: '{0}'",
+    M011: "The '{0}' element has an invalid event: '{1}'",
+    M012: "Parsing event value of '{0}' failed: {1}",
+    M013: "Component validation failed: '{0}'",
+};

package/dist/scripts/src/components-core/renderers.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponentRenderer = createComponentRenderer;
+exports.createPropHolderComponent = createPropHolderComponent;
+exports.createLoaderRenderer = createLoaderRenderer;
+/**
+ * This helper function creates a component renderer definition from its arguments.
+ * @param type The unique identifier of the component definition
+ * @param renderer The function that renders the component definition into a React node
+ * @param metadata Optional hints to help fix the rendering errors coming from invalid component property definitions
+ * @returns The view renderer definition composed of the arguments
+ */
+function createComponentRenderer(type, metadata, renderer) {
+    return {
+        type,
+        renderer,
+        metadata,
+    };
+}
+/**
+ * Create a non-visual component used for encapsulating property values
+ * @param type Component type
+ * @param metadata Component metadata
+ */
+function createPropHolderComponent(type, metadata) {
+    return createComponentRenderer(type, metadata, () => {
+        throw new Error("Prop holder component, shouldn't render");
+    });
+}
+/**
+ * AppEngine uses React as its UI framework to declare and render loaders. This type declares a function that renders
+ * a particular loader definition into its React representation.
+ *
+ * The type parameter of the function refers to the loader definition the function is about to render.
+ * @param type The unique ID of the loader
+ * @param renderer The function that renders the loader
+ * @param hints Optional hints to help fix the rendering errors coming from invalid component property definitions
+ */
+function createLoaderRenderer(type, renderer, hints) {
+    return {
+        type,
+        renderer,
+        hints,
+    };
+}

package/dist/scripts/src/components-core/reportEngineError.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppErrors = getAppErrors;
+exports.resetErrors = resetErrors;
+exports.reportEngineError = reportEngineError;
+const EngineError_1 = require("./EngineError");
+const appErrors = [];
+/**
+ * Get all errors collected during the last run
+ */
+function getAppErrors() {
+    return appErrors;
+}
+/**
+ * Use this function to reset the errors raised by the execution engine
+ */
+function resetErrors() {
+    appErrors.length = 0;
+}
+/**
+ * Use this function to report an error
+ * @param error Error or string describing the error to report
+ * @param errorToThrow The error to throw
+ */
+function reportEngineError(error, errorToThrow) {
+    var _a, _b;
+    // --- Wrap a string into an error
+    if (typeof error === "string") {
+        error = new Error(error);
+    }
+    let helperMessage = "";
+    let colors = [];
+    // --- Error-specific helper messages
+    if (error instanceof EngineError_1.ScriptParseError) {
+        let pos = ((_a = error === null || error === void 0 ? void 0 : error.position) !== null && _a !== void 0 ? _a : 0) - 1;
+        if (error.source) {
+            while (pos < error.source.length - 1 && error.source[pos] === " ") {
+                pos++;
+            }
+            helperMessage += `%c${error.message}%c\n\n`;
+            helperMessage += `${error.source.substring(0, pos)}%c${error.source[pos]}%c${(_b = error.source.substring(pos + 1)) !== null && _b !== void 0 ? _b : ""}\n\n`;
+        }
+        helperMessage += `%cThe error handler associated with the parsed code did not run.%c`;
+        colors = ["color: red", "color: inherited", "color: red", "color: inherited", "color: orange", "color: inherited"];
+    }
+    else if (error instanceof EngineError_1.StatementExecutionError) {
+        helperMessage += `%cError while executing code: ${error.message}%c`;
+        if (error.source) {
+            helperMessage += `\n\n${error.source}`;
+        }
+        colors = ["color: red", "color: inherited"];
+    }
+    else if (error instanceof EngineError_1.ThrowStatementError) {
+        helperMessage += `A 'throw' statement executed:\n\n%c${error.message}%c\n\n${error.errorObject}`;
+        colors = ["color: red", "color: inherited"];
+    }
+    if (helperMessage) {
+        console.log(helperMessage, ...colors);
+    }
+    appErrors.push({ error, helperMessage, colors });
+    throw errorToThrow !== null && errorToThrow !== void 0 ? errorToThrow : error;
+}

package/dist/scripts/src/components-core/script-runner/BindingTreeEvaluationContext.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancellationToken = void 0;
+exports.createEvalContext = createEvalContext;
+/**
+ * A token that signals the cancellation of an operation
+ */
+class CancellationToken {
+    constructor() {
+        this._cancelled = false;
+    }
+    get cancelled() {
+        return this._cancelled;
+    }
+    cancel() {
+        this._cancelled = true;
+    }
+}
+exports.CancellationToken = CancellationToken;
+/**
+ * Creates an evaluation context with the given parts
+ * @param parts Parts of the evaluation context
+ * @returns New evaluation context
+ */
+function createEvalContext(parts) {
+    return Object.assign({
+        mainThread: {
+            childThreads: [],
+            blocks: [{ vars: {} }],
+            loops: [],
+            breakLabelValue: -1
+        },
+        localContext: {}
+    }, parts);
+}