xmlui 0.4.0

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

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompoundComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const misc_1 = require("@components-core/utils/misc");
+const hooks_1 = require("./utils/hooks");
+// Acts as a bridge between a compound component definition and its renderer.
+exports.CompoundComponent = react_1.default.forwardRef(({ node, lookupAction, lookupSyncCallback, lookupEventHandler, compound, api, scriptCollected, renderChild, extractValue, layoutContext, uid, }, forwardedRef) => {
+    // --- Resolve all event handlers to async functions
+    const resolvedEventsInner = (0, react_1.useMemo)(() => {
+        const resolvedEvents = {};
+        Object.entries(node.events || {}).forEach(([key, value]) => {
+            resolvedEvents[key] = lookupAction(value, {
+                signError: false,
+                eventName: key,
+            });
+        });
+        return resolvedEvents;
+    }, [lookupAction, node.events]);
+    const resolvedEvents = (0, hooks_1.useShallowCompareMemoize)(resolvedEventsInner);
+    // useEffect(()=>{
+    //   console.log("CC resolvedEvent modified", resolvedEvents);
+    // }, [resolvedEvents])
+    // --- Extract property values (resolve binding expressions)
+    const resolvedPropsInner = (0, react_1.useMemo)(() => {
+        const resolvedProps = {};
+        if (node.props) {
+            Object.entries(node.props).forEach(([key, value]) => {
+                const extractedProp = extractValue(value, true);
+                if (extractedProp === null || extractedProp === void 0 ? void 0 : extractedProp._ARROW_EXPR_) {
+                    // --- Ensure arrow functions are called synchronously
+                    resolvedProps[key] = lookupSyncCallback(extractedProp);
+                }
+                else {
+                    resolvedProps[key] = extractedProp;
+                }
+            });
+        }
+        return resolvedProps;
+    }, [extractValue, lookupSyncCallback, node.props]);
+    const resolvedProps = (0, hooks_1.useShallowCompareMemoize)(resolvedPropsInner);
+    // --- Resolve child definition (allow children injected through binding expressions)
+    const dynamicChildren = (0, react_1.useMemo)(() => {
+        if (Array.isArray(node.children)) {
+            return node.children.map((child) => {
+                let ret = Object.assign(Object.assign({}, child), { renderChild, childToRender: child });
+                return ret;
+            });
+        }
+    }, [node.children, renderChild]);
+    // --- Wrap the `component` part with a container that manages the
+    const containerNode = (0, react_1.useMemo)(() => {
+        var _a;
+        const { loaders, vars, functions, scriptError } = compound, rest = __rest(compound, ["loaders", "vars", "functions", "scriptError"]);
+        return {
+            type: "Container",
+            uses: [],
+            api,
+            scriptCollected,
+            loaders: loaders,
+            vars: vars,
+            functions: functions,
+            scriptError: scriptError,
+            containerUid: uid,
+            props: {
+                debug: (_a = compound.props) === null || _a === void 0 ? void 0 : _a.debug,
+            },
+            children: [rest],
+        };
+    }, [api, compound, scriptCollected, uid]);
+    const emitEvent = (0, misc_1.useEvent)((eventName, ...args) => {
+        const handler = lookupEventHandler(eventName);
+        if (handler) {
+            return handler(...args);
+        }
+    });
+    const vars = (0, react_1.useMemo)(() => {
+        return Object.assign({ $props: resolvedProps, $events: resolvedEvents, //TODO remove, deprecated, use emitEvent
+            emitEvent }, containerNode.vars);
+    }, [containerNode.vars, emitEvent, resolvedEvents, resolvedProps]);
+    const stableVars = (0, hooks_1.useShallowCompareMemoize)(vars);
+    // --- Inject implicit variable into the container of the compound component
+    const nodeWithPropsAndEventsInner = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, containerNode), { vars: stableVars });
+    }, [containerNode, stableVars]);
+    const nodeWithPropsAndEvents = (0, hooks_1.useShallowCompareMemoize)(nodeWithPropsAndEventsInner);
+    //we remove the wrapChild prop from layout context, because that wrapping already happened for the compound component instance
+    const safeLayoutContext = layoutContext ? Object.assign(Object.assign({}, layoutContext), { wrapChild: undefined }) : layoutContext;
+    const ret = renderChild(nodeWithPropsAndEvents, safeLayoutContext, dynamicChildren);
+    if (forwardedRef && ret && (0, react_1.isValidElement)(ret)) {
+        return react_1.default.cloneElement(ret, {
+            ref: (0, react_compose_refs_1.composeRefs)(forwardedRef, ret.ref),
+        });
+    }
+    return react_1.default.isValidElement(ret) ? ret : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ret });
+});

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThrowStatementError = exports.NotAComponentDefError = exports.StatementExecutionError = exports.ScriptParseError = exports.GenericBackendError = exports.EngineError = void 0;
+/**
+ * The abstract base class of all UI engine errors
+ */
+class EngineError extends Error {
+    constructor(message) {
+        super(message);
+        Object.setPrototypeOf(this, EngineError.prototype);
+    }
+}
+exports.EngineError = EngineError;
+/**
+ * Extracts information from the error object received from the backend
+ */
+class GenericBackendError extends EngineError {
+    constructor(info, errorCode) {
+        // `The backend raised an error. (reasonCode: ${info.reasonCode}, isBusiness: ${info.isBusiness}, message: ${info.message})`
+        let message = "";
+        if (info === null || info === void 0 ? void 0 : info.code) {
+            message += `[Error code: ${info.code}]\n`;
+        }
+        if ((info === null || info === void 0 ? void 0 : info.details) && typeof info.details === "string") {
+            message += `${info.details}`;
+        }
+        else if (info === null || info === void 0 ? void 0 : info.message) {
+            message += `${info.message}`;
+        }
+        super(message || (info === null || info === void 0 ? void 0 : info.message) || "Unknown error");
+        this.info = info;
+        this.errorCategory = "GenericBackendError";
+        this.details = info;
+        this.statusCode = errorCode;
+        // --- Set the prototype explicitly.
+        Object.setPrototypeOf(this, GenericBackendError.prototype);
+    }
+}
+exports.GenericBackendError = GenericBackendError;
+/**
+ * Custom exception indicating a parser error
+ */
+class ScriptParseError extends EngineError {
+    constructor(message, source, position) {
+        message = `Parser Error: ${message}`;
+        super(message);
+        this.source = source;
+        this.position = position;
+        this.errorCategory = "ScriptParserError";
+        Object.setPrototypeOf(this, ScriptParseError.prototype);
+    }
+}
+exports.ScriptParseError = ScriptParseError;
+/**
+ * Custom exception signing parsing error
+ */
+class StatementExecutionError extends EngineError {
+    constructor(message, source) {
+        super(message);
+        this.source = source;
+        this.errorCategory = "StatementExecutionError";
+        Object.setPrototypeOf(this, StatementExecutionError.prototype);
+    }
+}
+exports.StatementExecutionError = StatementExecutionError;
+/**
+ * Signs that we get an unexpected type instead of a component definition
+ */
+class NotAComponentDefError extends EngineError {
+    constructor() {
+        super("Must be a component definition, cannot use dynamic children here...");
+        this.errorCategory = "NotAComponentError";
+        Object.setPrototypeOf(this, NotAComponentDefError.prototype);
+    }
+}
+exports.NotAComponentDefError = NotAComponentDefError;
+/**
+ * We throw this error when a throw statement is executed
+ */
+class ThrowStatementError extends EngineError {
+    constructor(errorObject) {
+        const message = typeof errorObject === "string"
+            ? errorObject : (errorObject === null || errorObject === void 0 ? void 0 : errorObject.message) || "Error without message";
+        super(message);
+        this.errorObject = errorObject;
+        this.errorCategory = "ThrowStatementError";
+        this.message = message;
+        Object.setPrototypeOf(this, ThrowStatementError.prototype);
+    }
+}
+exports.ThrowStatementError = ThrowStatementError;

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

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const ErrorBoundary_module_scss_1 = __importDefault(require("./ErrorBoundary.module.scss"));
+/**
+ * This component serves as an error boundary; it catches any errors within the nested components
+ */
+class ErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * We start with "no error" state
+         */
+        this.state = {
+            hasError: false,
+            error: null
+        };
+    }
+    /**
+     * This method is used to implement the Error Boundaries for the React application. It is invoked if some error
+     * occurs during the rendering phase of any lifecycle methods or any children components.
+     */
+    static getDerivedStateFromError(error) {
+        // --- Update state so the next render will show the fallback UI.
+        return { hasError: true, error };
+    }
+    /**
+     * Display any error in the console
+     * @param error Error object
+     * @param errorInfo Extra information about the error
+     */
+    componentDidCatch(error, errorInfo) {
+        console.error("Uncaught error:", error, errorInfo, this.props.location);
+    }
+    /**
+     * Whenever the `restoreOnChangeOf` property of this component instance changes, we reset the state to "no error".
+     * @param prevProps Previous property values
+     * @param prevState Previous state
+     * @param snapshot Optional snapshot (not used in this component)
+     */
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.node !== this.props.node) {
+            this.setState({
+                hasError: false
+            });
+        }
+    }
+    render() {
+        var _a;
+        return this.state.hasError ? ((0, jsx_runtime_1.jsxs)("div", { className: ErrorBoundary_module_scss_1.default.errorOverlay, children: [(0, jsx_runtime_1.jsx)("div", { className: ErrorBoundary_module_scss_1.default.title, children: "There was an error!" }), (0, jsx_runtime_1.jsx)("div", { className: ErrorBoundary_module_scss_1.default.errorItem, children: (_a = this.state.error) === null || _a === void 0 ? void 0 : _a.message })] })) : (this.props.children);
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fragmentComponentRenderer = exports.metadata = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+exports.metadata = {
+    displayName: "Fragment",
+    description: "Groups multiple children into a single fragment",
+    opaque: true
+};
+exports.fragmentComponentRenderer = (0, renderers_1.createComponentRenderer)("Fragment", ({ node, extractValue, renderChild, layoutContext }) => {
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderChild(node.children, layoutContext) }, extractValue(node.uid));
+}, exports.metadata);

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

@@ -0,0 +1,15 @@
+"use strict";
+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 InvalidComponent_module_scss_1 = __importDefault(require("./InvalidComponent.module.scss"));
+const constants_1 = require("@components-core/constants");
+/**
+ * The function renders a message that includes issues found when rendering a particular component
+ */
+function InvalidComponent({ errors = constants_1.EMPTY_ARRAY, node, children }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: InvalidComponent_module_scss_1.default.errorOverlay, children: [(0, jsx_runtime_1.jsx)("div", { className: InvalidComponent_module_scss_1.default.title, children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: node.type }), " component problems:"] }) }), (0, jsx_runtime_1.jsx)("ul", { className: InvalidComponent_module_scss_1.default.errorItems, children: errors.map((error, i) => ((0, jsx_runtime_1.jsx)("li", { className: InvalidComponent_module_scss_1.default.errorItem, children: error }, i))) })] }), children] }));
+}
+exports.default = InvalidComponent;

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoaderComponent = LoaderComponent;
+const react_1 = require("react");
+const ViewComponentRegistryContext_1 = require("@components/ViewComponentRegistryContext");
+const containers_1 = require("./abstractions/containers");
+function LoaderComponent({ node, state, dispatch, lookupAction, registerComponentApi, onUnmount, }) {
+    const componentRegistry = (0, ViewComponentRegistryContext_1.useComponentRegistry)();
+    const uid = (0, react_1.useMemo)(() => Symbol(node.uid), [node.uid]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            onUnmount(uid);
+        };
+    }, [onUnmount, uid]);
+    // --- Memoizes component API registration
+    const memoedRegisterComponentApi = (0, react_1.useCallback)((api) => {
+        registerComponentApi(uid, api);
+    }, [registerComponentApi, uid]);
+    // --- Memoizes the action resolution by action definition value
+    const memoedLookupAction = (0, react_1.useCallback)((action, actionOptions) => {
+        return lookupAction(action, uid, actionOptions);
+    }, [lookupAction, uid]);
+    const memoedLoaderInProgressChanged = (0, react_1.useCallback)((isInProgress) => {
+        dispatch(loaderInProgressChanged(uid, isInProgress));
+    }, [dispatch, uid]);
+    const memoedLoaderLoaded = (0, react_1.useCallback)((data, pageInfo) => {
+        dispatch(loaderLoaded(uid, data, pageInfo));
+    }, [dispatch, uid]);
+    const memoedLoaderError = (0, react_1.useCallback)((error) => {
+        dispatch(loaderError(uid, error));
+    }, [dispatch, uid]);
+    const renderer = componentRegistry.lookupLoaderRenderer(node.type);
+    if (!renderer) {
+        console.error(`Loader ${node.type} is not available. Did you forget to register it in the loaderRegistry?`);
+        return null;
+    }
+    return renderer({
+        loader: node,
+        state,
+        dispatch,
+        loaderInProgressChanged: memoedLoaderInProgressChanged,
+        loaderLoaded: memoedLoaderLoaded,
+        loaderError: memoedLoaderError,
+        registerComponentApi: memoedRegisterComponentApi,
+        lookupAction: memoedLookupAction,
+    });
+}
+// Signs that a particular loader (`uid`) has just started fetching its data (or executing its operation).
+function loaderInProgressChanged(uid, isInProgress) {
+    return {
+        type: containers_1.ContainerActionKind.LOADER_IN_PROGRESS_CHANGED,
+        payload: {
+            uid,
+            inProgress: isInProgress,
+        },
+    };
+}
+// Signs that a particular loader (`uid`) has just fetched its data (`pageInfo`) successfully.
+function loaderLoaded(uid, data, pageInfo) {
+    return {
+        type: containers_1.ContainerActionKind.LOADER_LOADED,
+        payload: {
+            uid,
+            data,
+            pageInfo,
+        },
+    };
+}
+// Signs that a particular loader (`uid`) has has an `error` during its operation.
+function loaderError(uid, error) {
+    return {
+        type: containers_1.ContainerActionKind.LOADER_ERROR,
+        payload: {
+            uid,
+            error,
+        },
+    };
+}