xmlui 0.9.78 → 0.9.80

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

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InspectorDialog_1 = require("./devtools/InspectorDialog");
+const AppWithCodeViewNative_1 = __importDefault(require("../components/NestedApp/AppWithCodeViewNative"));
+const react_1 = require("react");
+const InspectorContext_1 = require("./InspectorContext");
+const Tooltip_1 = require("../components/NestedApp/Tooltip");
+const NestedApp_module_scss_1 = __importDefault(require("../components/NestedApp/NestedApp.module.scss"));
+const ai_1 = require("react-icons/ai");
+const ComponentViewer = () => {
+    const { mockApi, setIsOpen, isOpen, inspectedNode, clickPosition, projectCompilation, sources } = (0, InspectorContext_1.useDevTools)();
+    const components = (0, react_1.useMemo)(() => {
+        if (!projectCompilation) {
+            return [];
+        }
+        return projectCompilation.components.map((component) => {
+            return component.markupSource;
+        });
+    }, [projectCompilation]);
+    const value = (0, react_1.useMemo)(() => {
+        var _a;
+        const compSrc = (_a = inspectedNode === null || inspectedNode === void 0 ? void 0 : inspectedNode.debug) === null || _a === void 0 ? void 0 : _a.source;
+        if (!compSrc) {
+            return "";
+        }
+        if (!sources) {
+            return "";
+        }
+        const { start, end, fileId } = compSrc;
+        const slicedSrc = sources[fileId].slice(start, end);
+        let dropEmptyLines = true;
+        const prunedLines = [];
+        let trimBeginCount = undefined;
+        slicedSrc.split("\n").forEach((line) => {
+            if (line.trim() === "" && dropEmptyLines) {
+                //drop empty lines from the beginning
+                return;
+            }
+            else {
+                dropEmptyLines = false;
+                prunedLines.push(line);
+                const startingWhiteSpaces = line.search(/\S|$/);
+                if (line.trim() !== "" &&
+                    (trimBeginCount === undefined || startingWhiteSpaces < trimBeginCount)) {
+                    trimBeginCount = startingWhiteSpaces;
+                }
+            }
+        });
+        return prunedLines
+            .map((line) => line.slice(trimBeginCount).replace(/inspect="true"/g, ""))
+            .join("\n");
+    }, [inspectedNode, sources]);
+    return process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
+        isOpen &&
+        inspectedNode !== null ? ((0, jsx_runtime_1.jsx)(InspectorDialog_1.InspectorDialog, { isOpen: isOpen, setIsOpen: setIsOpen, clickPosition: clickPosition, children: (0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { height: "500px", allowPlaygroundPopup: true, splitView: true, controlsWidth: "120px", closeButton: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                        setIsOpen(false);
+                    }, children: (0, jsx_runtime_1.jsx)(ai_1.AiOutlineClose, {}) }), label: "Close" }), markdown: `\`\`\`xmlui
+${value}
+\`\`\``, api: mockApi, app: value, components: components }) })) : null;
+};
+exports.ComponentViewer = ComponentViewer;

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

@@ -16,23 +16,17 @@ const ThemeContext_1 = require("./theming/ThemeContext");
 const classnames_1 = __importDefault(require("classnames"));
 const ButtonNative_1 = require("../components/Button/ButtonNative");
 const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
-const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
 function InspectorProvider({ children, sources, projectCompilation, mockApi, }) {
-    const { root } = (0, ThemeContext_1.useTheme)();
     const [inspectable, setInspectable] = (0, react_1.useState)({});
     const [inspectedNode, setInspectedNode] = (0, react_1.useState)(null);
     const [showCode, setShowCode] = (0, react_1.useState)(false);
-    const [devToolsSize, setDevToolsSize] = (0, react_1.useState)(0);
-    const [devToolsSide, setDevToolsSide] = (0, react_1.useState)("bottom");
     const [inspectMode, setInspectMode] = (0, react_1.useState)(false);
     const [clickPosition, setClickPosition] = (0, react_1.useState)({
         x: 0,
         y: 0,
     });
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const devToolsEntry = componentRegistry.lookupComponentRenderer("XMLUIDevtools.DevTools");
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             sources,
@@ -61,10 +55,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
             inspectedNode,
             setIsOpen: setShowCode,
             isOpen: showCode,
-            devToolsSize,
-            setDevToolsSize,
-            devToolsSide,
-            setDevToolsSide,
             devToolsEnabled: showCode,
             projectCompilation: projectCompilation,
             setInspectMode,
@@ -73,8 +63,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
             clickPosition,
         };
     }, [
-        devToolsSide,
-        devToolsSize,
         sources,
         inspectedNode,
         showCode,
@@ -85,9 +73,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
         mockApi,
     ]);
     return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
-                showCode &&
-                inspectedNode !== null &&
-                (0, react_dom_1.createPortal)(devToolsEntry === null || devToolsEntry === void 0 ? void 0 : devToolsEntry.renderer({}), root), process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 inspectable &&
                 Object.values(inspectable).map((item) => {
                     return ((0, jsx_runtime_1.jsx)(InspectButton, { inspectedNode: inspectedNode, setShowCode: setShowCode, setClickPosition: setClickPosition, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode, inspectMode: inspectMode }, item.inspectId + +"-" + item.key));

package/dist/scripts/src/components-core/abstractions/standalone.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/scripts/src/components-core/devtools/InspectorDialog.js

@@ -0,0 +1,135 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorDialog = 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 classnames_1 = __importDefault(require("classnames"));
+const Dialog = __importStar(require("@radix-ui/react-dialog"));
+const InspectorDialog_module_scss_1 = __importDefault(require("./InspectorDialog.module.scss"));
+const xmlui_1 = require("xmlui");
+const framer_motion_1 = require("framer-motion");
+// =====================================================================================================================
+// React component definition
+const MotionContent = framer_motion_1.motion.create(Dialog.Content);
+const overlayVariants = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const contentVariants = {
+    initial: (custom) => ({
+        opacity: 0,
+        scale: 0.2,
+        x: custom.x - window.innerWidth / 2,
+        y: custom.y - window.innerHeight / 2,
+    }),
+    animate: {
+        opacity: 1,
+        scale: 1,
+        x: 0,
+        y: 0,
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.2,
+        transition: { duration: 0.2 },
+    },
+};
+function durationToSeconds(durationString) {
+    if (!durationString) {
+        return undefined;
+    }
+    const trimmedString = durationString.trim();
+    if (trimmedString.endsWith("ms")) {
+        const milliseconds = parseFloat(trimmedString);
+        return milliseconds / 1000;
+    }
+    else if (trimmedString.endsWith("s")) {
+        return parseFloat(trimmedString);
+    }
+    else {
+        return parseFloat(trimmedString);
+    }
+}
+exports.InspectorDialog = react_1.default.forwardRef(({ children, style, isOpen, setIsOpen, clickPosition }, ref) => {
+    const { root, getThemeVar } = (0, xmlui_1.useTheme)();
+    const modalRef = (0, react_1.useRef)(null);
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;
+    const [rendered, setRendered] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen) {
+            (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    // https://github.com/radix-ui/primitives/issues/2122#issuecomment-2140827998
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            // Pushing the change to the end of the call stack
+            const timer = setTimeout(() => {
+                document.body.style.pointerEvents = "";
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else {
+            document.body.style.pointerEvents = "auto";
+        }
+    }, [isOpen]);
+    if (!root) {
+        return null;
+    }
+    const onExitComplete = () => {
+        setIsOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(Dialog.Root, { defaultOpen: false, open: isOpen, onOpenChange: setRendered, children: (0, jsx_runtime_1.jsx)(Dialog.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { onExitComplete: onExitComplete, children: rendered && ((0, jsx_runtime_1.jsxs)(Dialog.Overlay, { className: InspectorDialog_module_scss_1.default.overlay, forceMount: true, children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: InspectorDialog_module_scss_1.default.overlayBg, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+                                duration: 0.2,
+                                ease: [0.16, 1, 0.3, 1],
+                            } }, "overlay"), (0, jsx_runtime_1.jsx)(MotionContent, { forceMount: true, onPointerDownOutside: (event) => {
+                                if (event.target instanceof Element &&
+                                    event.target.closest("._debug-inspect-button") !== null) {
+                                    //we prevent the auto modal close on clicking the inspect button
+                                    event.preventDefault();
+                                }
+                            }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: composedRef, className: (0, classnames_1.default)(InspectorDialog_module_scss_1.default.content, InspectorDialog_module_scss_1.default.contentWrapper), variants: contentVariants, custom: { x: clickPosition.x, y: clickPosition.y }, initial: "initial", animate: "animate", exit: "exit", transition: {
+                                    duration: durationToSeconds(getThemeVar("duration-startAnimation-ModalDialog")) ||
+                                        0.8,
+                                    ease: [0.16, 1, 0.3, 1],
+                                }, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: children }) })] })) }) }) }));
+});
+exports.InspectorDialog.displayName = "InspectorDialog";

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

@@ -19,6 +19,7 @@ const AppContent_1 = require("./AppContent");
 const ErrorBoundary_1 = require("./ErrorBoundary");
 const LoggerContext_1 = require("../../logging/LoggerContext");
 const LoggerInitializer_1 = require("../../logging/LoggerInitializer");
+const ComponentViewer_1 = require("../ComponentViewer");
 /**
  * This component wraps the application into other layers of (nested) components
  * that provide app functionality and services requiring unique interaction with
@@ -38,10 +39,12 @@ const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "",
     // --- provide the app functionality and services. These components are
     // --- wrapped in other components that provide the necessary environment
     // --- for the app to run.
-    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent_1.AppContent, { onInit: onInit, rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: children }) }) }) }) })] })] }));
+    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsxs)(AppContent_1.AppContent, { onInit: onInit, rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: [(0, jsx_runtime_1.jsx)(ComponentViewer_1.ComponentViewer, {}), children] }) }) }) }) })] })] }));
     // --- Select the router type for the app
     const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
-    const shouldSkipClientRouter = previewMode ? false : (typeof window === "undefined" || process.env.VITE_REMIX);
+    const shouldSkipClientRouter = previewMode
+        ? false
+        : typeof window === "undefined" || process.env.VITE_REMIX;
     return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [!!shouldSkipClientRouter && dynamicChildren, !shouldSkipClientRouter && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }) }));
 };
 exports.AppWrapper = AppWrapper;

package/dist/scripts/src/language-server/services/common/metadata-utils.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentMetadataProvider = exports.MetadataProvider = void 0;
+exports.addOnPrefix = addOnPrefix;
+const descriptorHelper_1 = require("../../../components-core/descriptorHelper");
+const xmlui_parser_1 = require("../../../parsers/xmlui-parser");
+const abstractions_1 = require("../../../components/abstractions");
+class MetadataProvider {
+    constructor(metadataCollection) {
+        this.metadataCollection = metadataCollection;
+    }
+    componentNames() {
+        return Object.keys(this.metadataCollection);
+    }
+    getComponent(componentName) {
+        const providerData = this.metadataCollection[componentName];
+        if (!providerData) {
+            return null;
+        }
+        return new ComponentMetadataProvider(providerData);
+    }
+}
+exports.MetadataProvider = MetadataProvider;
+class ComponentMetadataProvider {
+    constructor(metadata) {
+        this.metadata = metadata;
+    }
+    /**
+     * Retrieves the metadata for a given property, explicit or implicit.
+     * @param name The name of the property.
+     * @returns The metadata for the property, or `undefined` if not found.
+     */
+    getProp(name) {
+        var _a;
+        return (_a = this.metadata.props[name]) !== null && _a !== void 0 ? _a : implicitPropsMetadata[name];
+    }
+    getAttr(name) {
+        var _a, _b, _c;
+        if (xmlui_parser_1.onPrefixRegex.test(name)) {
+            const eventName = (0, xmlui_parser_1.stripOnPrefix)(name);
+            const event = (_a = this.metadata.events) === null || _a === void 0 ? void 0 : _a[eventName];
+            if (event) {
+                return event;
+            }
+        }
+        const explicitProp = (_b = this.metadata.props) === null || _b === void 0 ? void 0 : _b[name];
+        if (explicitProp) {
+            return explicitProp;
+        }
+        const api = (_c = this.metadata.apis) === null || _c === void 0 ? void 0 : _c[name];
+        if (api) {
+            return api;
+        }
+        const layout = layoutMdForKey(name);
+        if (layout) {
+            return layout;
+        }
+        return implicitPropsMetadata[name];
+    }
+    getAttrForKind({ name, kind }) {
+        switch (kind) {
+            case "api":
+                return this.metadata.apis[name];
+            case "event":
+                return this.metadata.events[name];
+            case "prop":
+                return this.metadata.props[name];
+            case "implicit":
+                return implicitPropsMetadata[name];
+            case "layout":
+                return layoutMdForKey(name);
+        }
+    }
+    getAllAttributes() {
+        var _a, _b, _c;
+        const attrNames = [];
+        for (const key of Object.keys((_a = this.metadata.props) !== null && _a !== void 0 ? _a : {})) {
+            attrNames.push({ name: key, kind: "prop" });
+        }
+        for (const key of Object.keys((_b = this.metadata.events) !== null && _b !== void 0 ? _b : {})) {
+            attrNames.push({ name: key, kind: "event" });
+        }
+        for (const key of Object.keys((_c = this.metadata.apis) !== null && _c !== void 0 ? _c : {})) {
+            attrNames.push({ name: key, kind: "api" });
+        }
+        for (const layoutKey of descriptorHelper_1.layoutOptionKeys) {
+            attrNames.push({ name: layoutKey, kind: "layout" });
+        }
+        for (const implicitPropKey of Object.keys(implicitPropsMetadata)) {
+            attrNames.push({ name: implicitPropKey, kind: "implicit" });
+        }
+        return attrNames;
+    }
+    getEvent(name) {
+        var _a;
+        return (_a = this.metadata.events) === null || _a === void 0 ? void 0 : _a[name];
+    }
+    getApi(name) {
+        var _a;
+        return (_a = this.metadata.apis) === null || _a === void 0 ? void 0 : _a[name];
+    }
+    get events() {
+        return this.metadata.events;
+    }
+    get apis() {
+        return this.metadata.apis;
+    }
+    get contextVars() {
+        return this.metadata.contextVars;
+    }
+    get allowArbitraryProps() {
+        return this.metadata.allowArbitraryProps;
+    }
+    get shortDescription() {
+        return this.metadata.shortDescription;
+    }
+    getMetadata() {
+        return this.metadata;
+    }
+}
+exports.ComponentMetadataProvider = ComponentMetadataProvider;
+function layoutMdForKey(name) {
+    const metadata = {
+        description: "Layout property. Not yet documented",
+    };
+    if (descriptorHelper_1.layoutOptionKeys.includes(name)) {
+        return metadata;
+    }
+    for (const size of abstractions_1.viewportSizeMd) {
+        const suffix = "-" + (size.value);
+        if (name.endsWith(suffix)) {
+            const nameWithoutSize = name.slice(0, -suffix.length);
+            if (descriptorHelper_1.layoutOptionKeys.includes(nameWithoutSize)) {
+                return metadata;
+            }
+        }
+    }
+    return null;
+}
+const implicitPropsMetadata = {
+    inspect: {
+        description: "Determines whether the component can be inspected or not",
+        defaultValue: false,
+        valueType: "boolean",
+    },
+    data: {
+        description: "Specifies the data source for a component. Can be a URL string (fetched automatically), a DataSource or an expression to evaluate. Changes to this property trigger UI updates once data is loaded.",
+    },
+    when: {
+        description: "Specifies a condition that must be met for the component to be displayed",
+        defaultValue: true,
+        valueType: "boolean",
+    }
+};
+function addOnPrefix(name) {
+    return "on" + name[0].toUpperCase() + name.substring(1);
+}

package/dist/scripts/src/parsers/xmlui-parser/index.js

@@ -0,0 +1,29 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CharacterCodes"), exports);
+__exportStar(require("./diagnostics"), exports);
+__exportStar(require("./fileExtensions"), exports);
+__exportStar(require("./lint"), exports);
+__exportStar(require("./parser"), exports);
+__exportStar(require("./ParserError"), exports);
+__exportStar(require("./scanner"), exports);
+__exportStar(require("./syntax-kind"), exports);
+__exportStar(require("./syntax-node"), exports);
+__exportStar(require("./transform"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./xmlui-serializer"), exports);
+__exportStar(require("./xmlui-tree"), exports);

package/dist/scripts/src/parsers/xmlui-parser/lint.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LintDiagKind = exports.LintSeverity = void 0;
+exports.getLintSeverity = getLintSeverity;
+exports.lintApp = lintApp;
+exports.printComponentLints = printComponentLints;
+exports.lintErrorsComponent = lintErrorsComponent;
+exports.lint = lint;
+const descriptorHelper_1 = require("../../components-core/descriptorHelper");
+const transform_1 = require("./transform");
+var LintSeverity;
+(function (LintSeverity) {
+    LintSeverity[LintSeverity["Skip"] = 0] = "Skip";
+    LintSeverity[LintSeverity["Warning"] = 1] = "Warning";
+    LintSeverity[LintSeverity["Error"] = 2] = "Error";
+})(LintSeverity || (exports.LintSeverity = LintSeverity = {}));
+var LintDiagKind;
+(function (LintDiagKind) {
+    LintDiagKind[LintDiagKind["UnrecognisedProp"] = 0] = "UnrecognisedProp";
+})(LintDiagKind || (exports.LintDiagKind = LintDiagKind = {}));
+function getLintSeverity(lintSeverityOption) {
+    if (!lintSeverityOption) {
+        return LintSeverity.Warning;
+    }
+    let lintSeverity = LintSeverity.Warning;
+    switch (lintSeverityOption.toLowerCase()) {
+        case "warning":
+            return LintSeverity.Warning;
+            break;
+        case "error":
+            return LintSeverity.Error;
+            break;
+        case "skip":
+            return LintSeverity.Skip;
+            break;
+        default:
+            console.warn(`Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`);
+            return LintSeverity.Warning;
+            break;
+    }
+}
+function lintApp({ appDef, metadataProvider, }) {
+    var _a;
+    const entryPointLints = {
+        componentName: "Main",
+        lints: lint({
+            component: appDef.entryPoint,
+            metadataProvider,
+        }),
+    };
+    const compoundCompLints = ((_a = appDef.components) !== null && _a !== void 0 ? _a : []).map((c) => {
+        const lints = lint({
+            component: c,
+            metadataProvider,
+        });
+        return { lints, componentName: c.name };
+    });
+    return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
+}
+function printComponentLints(lintDiags) {
+    console.group(`Validation on '${lintDiags.componentName}':`);
+    lintDiags.lints.forEach(({ message }) => {
+        console.warn(message);
+    });
+    console.groupEnd();
+}
+function lintErrorsComponent(lints) {
+    function makeComponent() {
+        const errList = lints.map((lint, idx) => {
+            return {
+                type: "VStack",
+                props: { gap: "0px" },
+                children: [
+                    {
+                        type: "VStack",
+                        props: { backgroundColor: "lightgrey", padding: "10px" },
+                        children: [
+                            {
+                                type: "H2",
+                                props: {
+                                    value: `#${idx + 1}: In component '${lint.componentName}':`,
+                                    color: "$color-info",
+                                },
+                            },
+                            {
+                                type: "VStack",
+                                children: lint.lints.map(({ message }, msgIdx) => {
+                                    return {
+                                        type: "Text",
+                                        props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" },
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                ],
+            };
+        });
+        const comp = {
+            type: "VStack",
+            props: { padding: "$padding-normal", gap: 0 },
+            children: [
+                {
+                    type: "H1",
+                    props: {
+                        value: `Errors found while checking Xmlui markup`,
+                        padding: "$padding-normal",
+                        backgroundColor: "$color-error",
+                        color: "white",
+                    },
+                },
+                {
+                    type: "VStack",
+                    props: {
+                        gap: "$gap-tight",
+                        padding: "$padding-normal",
+                    },
+                    children: errList,
+                },
+            ],
+        };
+        return comp;
+    }
+    return makeComponent();
+}
+function lint({ component, metadataProvider, }) {
+    if ("component" in component) {
+        return lintHelp(component.component, metadataProvider, []);
+    }
+    return lintHelp(component, metadataProvider, []);
+}
+function lintHelp(component, metadataProvider, acc) {
+    const componentName = component.type.startsWith(transform_1.CORE_NAMESPACE_VALUE)
+        ? component.type.slice(transform_1.CORE_NAMESPACE_VALUE.length + 1)
+        : component.type;
+    const componentMdProvider = metadataProvider.getComponent(componentName);
+    if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
+        lintAttrs(component, componentMdProvider, acc);
+    }
+    if (!component.children) {
+        return acc;
+    }
+    for (const child of component.children) {
+        lintHelp(child, metadataProvider, acc);
+    }
+    return acc;
+}
+const implicitPropNames = descriptorHelper_1.layoutOptionKeys;
+function lintAttrs(component, metadataForCurrentComponent, diags) {
+    var _a, _b, _c;
+    const invalidAttrNames = Object.keys((_a = component.props) !== null && _a !== void 0 ? _a : {}).filter((name) => !metadataForCurrentComponent.getAttr(name));
+    const invalidEvents = Object.keys((_b = component.events) !== null && _b !== void 0 ? _b : {}).filter((event) => !metadataForCurrentComponent.getEvent(event));
+    const invalidApis = Object.keys((_c = component.api) !== null && _c !== void 0 ? _c : {}).filter((api) => !metadataForCurrentComponent.getApi(api));
+    invalidAttrNames.push(...invalidEvents);
+    invalidAttrNames.push(...invalidApis);
+    for (const invalidAttrName of invalidAttrNames) {
+        diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
+    }
+}
+function toUnrecognisedAttrDiag(component, attr) {
+    return {
+        message: `Unrecognised property '${attr}' on component '${component.type}'.`,
+        kind: LintDiagKind.UnrecognisedProp,
+    };
+}