xmlui 0.9.92 → 0.9.93

package/dist/scripts/src/components-core/xmlui-parser.js

@@ -19,9 +19,9 @@ function xmlUiMarkupToComponent(source, fileId = 0) {
                 newlinePositions.push(i);
             }
         }
-        const errorsWithLines = addPositions(errors, newlinePositions);
+        const errorsForDisplay = addDisplayFieldsToErrors(errors, source, newlinePositions);
         const erroneousCompoundComponentName = getCompoundCompName(node, getText);
-        return { component: null, errors: errorsWithLines, erroneousCompoundComponentName };
+        return { component: null, errors: errorsForDisplay, erroneousCompoundComponentName };
     }
     try {
         const component = (0, transform_1.nodeToComponentDef)(node, getText, fileId);
@@ -32,12 +32,16 @@ function xmlUiMarkupToComponent(source, fileId = 0) {
         const erroneousCompoundComponentName = getCompoundCompName(node, getText);
         const singleErr = {
             message: e.message,
-            col: 0,
-            line: 0,
+            errPosCol: 0,
+            errPosLine: 0,
             code: diagnostics_1.ErrCodes.expEq,
             category: diagnostics_1.DiagnosticCategory.Error,
             pos: 0,
             end: 0,
+            contextPos: 0,
+            contextEnd: 0,
+            contextSource: "",
+            contextStartLine: 0,
         };
         return {
             component: null,
@@ -49,53 +53,289 @@ function xmlUiMarkupToComponent(source, fileId = 0) {
 /** returns a component definition containing the errors.
  * It is a component and a compound component definition at the same time,
  * so that it can be used to render the errors for a compound component as well*/
+function createErrorMessageComponent(message) {
+    const comp = {
+        type: "VStack",
+        props: { padding: "$padding-normal", gap: 0 },
+        children: [
+            {
+                type: "H1",
+                props: {
+                    value: message,
+                    padding: "$padding-normal",
+                    backgroundColor: "$color-error",
+                    color: "white",
+                },
+            },
+        ],
+    };
+    return comp;
+}
 function errReportMessage(message) {
-    function makeComponent() {
-        const comp = {
-            type: "VStack",
-            props: { padding: "$padding-normal", gap: 0 },
+    const comp = createErrorMessageComponent(message);
+    comp.component = createErrorMessageComponent(message);
+    return comp;
+}
+/** returns a component definition containing the errors.
+ * It is a component and a compound component definition at the same time,
+ * so that it can be used to render the errors for a compound component as well*/
+function createErrorReportComponent(errors, fileName) {
+    const errList = errors
+        .sort((a, b) => {
+        if (a.pos === undefined && b.pos === undefined) {
+            return 0;
+        }
+        else if (a.pos === undefined) {
+            return 1;
+        }
+        else if (b.pos === undefined) {
+            return -1;
+        }
+        else {
+            return a.pos - b.pos;
+        }
+    })
+        .map((e, idx) => {
+        // Calculate relative positions within context
+        const errorStartInContext = e.pos - e.contextPos;
+        const errorEndInContext = e.end - e.contextPos;
+        // Split context source into lines and process each line
+        const contextLines = e.contextSource.split("\n");
+        let currentPos = 0;
+        // Calculate padding for line numbers to maintain alignment
+        const lastLineNumber = e.contextStartLine + contextLines.length - 1;
+        const maxDigits = lastLineNumber.toString().length;
+        const contextChildren = [];
+        for (let lineIdx = 0; lineIdx < contextLines.length; lineIdx++) {
+            const line = contextLines[lineIdx];
+            const lineNumber = e.contextStartLine + lineIdx;
+            const paddedLineNumber = lineNumber.toString().padStart(maxDigits, "0");
+            const linePrefix = `${paddedLineNumber} | `;
+            // Check if error spans this line
+            const lineStart = currentPos;
+            const lineEnd = currentPos + line.length;
+            const lineChildren = [
+                {
+                    type: "Text",
+                    props: {
+                        value: linePrefix,
+                        fontFamily: "monospace",
+                        color: "$color-info",
+                    },
+                },
+            ];
+            if (errorStartInContext >= lineStart && errorStartInContext < lineEnd) {
+                // Error starts on this line
+                const beforeError = line.substring(0, errorStartInContext - lineStart);
+                const errorInLine = line.substring(errorStartInContext - lineStart, Math.min(errorEndInContext - lineStart, line.length));
+                const afterError = line.substring(Math.min(errorEndInContext - lineStart, line.length));
+                if (beforeError) {
+                    lineChildren.push({
+                        type: "Text",
+                        props: {
+                            value: beforeError,
+                            fontFamily: "monospace",
+                        },
+                    });
+                }
+                if (errorInLine) {
+                    lineChildren.push({
+                        type: "Text",
+                        props: {
+                            value: errorInLine,
+                            fontFamily: "monospace",
+                            textDecorationLine: "underline",
+                            textDecorationColor: "$color-error",
+                            backgroundColor: "rgb(from $color-error r g b / 0.1)",
+                        },
+                    });
+                }
+                if (afterError) {
+                    lineChildren.push({
+                        type: "Text",
+                        props: {
+                            value: afterError,
+                            fontFamily: "monospace",
+                        },
+                    });
+                }
+            }
+            else if (errorStartInContext < lineStart && errorEndInContext > lineEnd) {
+                // Entire line is within error span
+                lineChildren.push({
+                    type: "Text",
+                    props: {
+                        value: line,
+                        fontFamily: "monospace",
+                        textDecorationLine: "underline",
+                        textDecorationColor: "$color-error",
+                        backgroundColor: "rgb(from $color-error r g b / 0.1)",
+                    },
+                });
+            }
+            else if (errorStartInContext < lineStart &&
+                errorEndInContext >= lineStart &&
+                errorEndInContext < lineEnd) {
+                // Error ends on this line
+                const errorInLine = line.substring(0, errorEndInContext - lineStart);
+                const afterError = line.substring(errorEndInContext - lineStart);
+                if (errorInLine) {
+                    lineChildren.push({
+                        type: "Text",
+                        props: {
+                            value: errorInLine,
+                            fontFamily: "monospace",
+                            textDecorationLine: "underline",
+                            textDecorationColor: "$color-error",
+                            backgroundColor: "rgb(from $color-error r g b / 0.1)",
+                        },
+                    });
+                }
+                if (afterError) {
+                    lineChildren.push({
+                        type: "Text",
+                        props: {
+                            value: afterError,
+                            fontFamily: "monospace",
+                        },
+                    });
+                }
+            }
+            else if (lineEnd === errorStartInContext && errorStartInContext === errorEndInContext) {
+                // Zero-length error span - insert visible vertical bar
+                lineChildren.push({
+                    type: "Text",
+                    props: {
+                        value: line,
+                        fontFamily: "monospace",
+                    },
+                });
+                lineChildren.push({
+                    type: "Text",
+                    props: {
+                        value: " ",
+                        preserveLinebreaks: true,
+                        textDecorationLine: "underline",
+                        fontFamily: "monospace",
+                        fontWeight: "bold",
+                        backgroundColor: "rgb(from $color-error r g b / 0.1)",
+                        color: "$color-error",
+                    },
+                });
+            }
+            else {
+                // No error on this line
+                lineChildren.push({
+                    type: "Text",
+                    props: {
+                        value: line,
+                        fontFamily: "monospace",
+                    },
+                });
+            }
+            contextChildren.push({
+                type: "HStack",
+                props: { gap: "0" },
+                children: lineChildren,
+            });
+            currentPos = lineEnd + 1; // +1 for newline character
+        }
+        const errMsgComponenet = {
+            type: "HStack",
+            props: { gap: "0" },
             children: [
                 {
-                    type: "H1",
+                    type: "Text",
                     props: {
-                        value: message,
-                        padding: "$padding-normal",
-                        backgroundColor: "$color-error",
-                        color: "white",
+                        value: `#${idx + 1}: ${fileName} (${e.errPosLine}:${e.errPosCol}):\xa0`,
+                        color: "$color-info",
                     },
                 },
+                {
+                    type: "Text",
+                    props: { value: ` ${e.message}`, fontWeight: "bold" },
+                },
             ],
         };
-        return comp;
-    }
-    const comp = makeComponent();
-    comp.component = makeComponent();
+        const context = {
+            type: "VStack",
+            props: {
+                gap: "0",
+                padding: "$padding-normal",
+                backgroundColor: "$color-surface-variant",
+            },
+            children: contextChildren,
+        };
+        const errComponenet = {
+            type: "VStack",
+            props: {
+                gap: "$gap-none",
+                borderLeft: "1px solid black",
+                borderTop: "1px solid black",
+                width: "fit-content",
+                padding: "4px",
+            },
+            children: [errMsgComponenet],
+        };
+        if (!(e.contextSource === "" && e.pos === 0 && e.end === 0)) {
+            errComponenet.children.push(context);
+        }
+        return errComponenet;
+    });
+    const comp = {
+        type: "VStack",
+        props: { padding: "$padding-normal", gap: 0 },
+        children: [
+            {
+                type: "H1",
+                props: {
+                    value: `${errList.length} ${errList.length > 1 ? "Errors" : "Error"} found while processing XMLUI markup`,
+                    padding: "$padding-normal",
+                    backgroundColor: "$color-error",
+                    color: "white",
+                },
+            },
+            {
+                type: "VStack",
+                props: {
+                    gap: "$gap-tight",
+                    padding: "$padding-normal",
+                },
+                children: errList,
+            },
+        ],
+    };
+    return comp;
+}
+function errReportComponent(errors, fileName, compoundCompName) {
+    const comp = createErrorReportComponent(errors, fileName);
+    comp.name = compoundCompName;
+    comp.component = createErrorReportComponent(errors, fileName);
     return comp;
 }
 /** returns a component definition containing the errors.
  * It is a component and a compound component definition at the same time,
  * so that it can be used to render the errors for a compound component as well*/
-function errReportComponent(errors, fileName, compoundCompName) {
-    function makeComponent() {
-        const errList = errors
-            .sort((a, b) => {
-            if (a.pos === undefined && b.pos === undefined) {
-                return 0;
-            }
-            else if (a.pos === undefined) {
-                return 1;
-            }
-            else if (b.pos === undefined) {
-                return -1;
-            }
-            else {
-                return a.pos - b.pos;
-            }
-        })
-            .map((e, idx) => {
-            return {
+function createScriptErrorComponent(error, fileName) {
+    const comp = {
+        type: "VStack",
+        props: { padding: "$padding-normal", gap: 0 },
+        children: [
+            {
+                type: "H1",
+                props: {
+                    value: `An error found while processing XMLUI code-behind script`,
+                    padding: "$padding-normal",
+                    backgroundColor: "$color-error",
+                    color: "white",
+                },
+            },
+            {
                 type: "VStack",
-                props: { gap: "0px" },
+                props: {
+                    gap: "$gap-tight",
+                    padding: "$padding-normal",
+                },
                 children: [
                     {
                         type: "HStack",
@@ -104,191 +344,111 @@ function errReportComponent(errors, fileName, compoundCompName) {
                             {
                                 type: "Text",
                                 props: {
-                                    value: `#${idx + 1}: ${fileName} (${e.line}:${e.col}):\xa0`,
+                                    value: `${fileName} (${error.line}:${error.column}):\xa0`,
                                     color: "$color-info",
                                 },
                             },
                             {
                                 type: "Text",
-                                props: { value: ` ${e.message}`, fontWeight: "bold" },
+                                props: { value: ` ${error.text}`, fontWeight: "bold" },
                             },
                         ],
                     },
                 ],
-            };
-        });
-        const comp = {
-            type: "VStack",
-            props: { padding: "$padding-normal", gap: 0 },
-            children: [
-                {
-                    type: "H1",
-                    props: {
-                        value: `${errList.length} ${errList.length > 1 ? "Errors" : "Error"} found while processing XMLUI markup`,
-                        padding: "$padding-normal",
-                        backgroundColor: "$color-error",
-                        color: "white",
-                    },
-                },
-                {
-                    type: "VStack",
-                    props: {
-                        gap: "$gap-tight",
-                        padding: "$padding-normal",
-                    },
-                    children: errList,
-                },
-            ],
-        };
-        return comp;
-    }
-    const comp = makeComponent();
-    comp.name = compoundCompName;
-    comp.component = makeComponent();
+            },
+        ],
+    };
     return comp;
 }
-/** returns a component definition containing the errors.
- * It is a component and a compound component definition at the same time,
- * so that it can be used to render the errors for a compound component as well*/
 function errReportScriptError(error, fileName) {
-    function makeComponent() {
-        const comp = {
-            type: "VStack",
-            props: { padding: "$padding-normal", gap: 0 },
-            children: [
-                {
-                    type: "H1",
-                    props: {
-                        value: `An error found while processing XMLUI code-behind script`,
-                        padding: "$padding-normal",
-                        backgroundColor: "$color-error",
-                        color: "white",
-                    },
-                },
-                {
-                    type: "VStack",
-                    props: {
-                        gap: "$gap-tight",
-                        padding: "$padding-normal",
-                    },
-                    children: [
-                        {
-                            type: "HStack",
-                            props: { gap: "0" },
-                            children: [
-                                {
-                                    type: "Text",
-                                    props: {
-                                        value: `${fileName} (${error.line}:${error.column}):\xa0`,
-                                        color: "$color-info",
-                                    },
-                                },
-                                {
-                                    type: "Text",
-                                    props: { value: ` ${error.text}`, fontWeight: "bold" },
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        };
-        return comp;
-    }
-    const comp = makeComponent();
-    comp.component = makeComponent();
+    const comp = createScriptErrorComponent(error, fileName);
+    comp.component = createScriptErrorComponent(error, fileName);
     return comp;
 }
 /** returns a component definition containing the errors.
  * It is a component and a compound component definition at the same time,
  * so that it can be used to render the errors for a compound component as well*/
-function errReportModuleErrors(errors, fileName) {
-    function makeComponent() {
-        const errList = [];
-        let idx = 1;
-        Object.keys(errors).map((key) => {
-            const e = errors[key];
-            for (let err of e) {
-                errList.push({
-                    type: "VStack",
-                    props: { gap: "0px" },
-                    children: [
-                        {
-                            type: "HStack",
-                            props: { gap: "0" },
-                            children: [
-                                {
-                                    type: "Text",
-                                    props: {
-                                        value: `#${idx++}: ${fileName} (${err.line}:${err.column}):\xa0`,
-                                        color: "$color-info",
-                                    },
-                                },
-                                {
-                                    type: "Text",
-                                    props: { value: ` ${err.text}`, fontWeight: "bold" },
+function createModuleErrorsComponent(errors, fileName) {
+    const errList = [];
+    let idx = 1;
+    Object.keys(errors).map((key) => {
+        const e = errors[key];
+        for (let err of e) {
+            errList.push({
+                type: "VStack",
+                props: { gap: "0px" },
+                children: [
+                    {
+                        type: "HStack",
+                        props: { gap: "0" },
+                        children: [
+                            {
+                                type: "Text",
+                                props: {
+                                    value: `#${idx++}: ${fileName} (${err.line}:${err.column}):\xa0`,
+                                    color: "$color-info",
                                 },
-                            ],
-                        },
-                    ],
-                });
-            }
-        });
-        const comp = {
-            type: "VStack",
-            props: { padding: "$padding-normal", gap: 0 },
-            children: [
-                {
-                    type: "H1",
-                    props: {
-                        value: `${errList.length} ${errList.length > 1 ? "Errors" : "Error"} found while processing XMLUI code-behind script`,
-                        padding: "$padding-normal",
-                        backgroundColor: "$color-error",
-                        color: "white",
+                            },
+                            {
+                                type: "Text",
+                                props: { value: ` ${err.text}`, fontWeight: "bold" },
+                            },
+                        ],
                     },
+                ],
+            });
+        }
+    });
+    const comp = {
+        type: "VStack",
+        props: { padding: "$padding-normal", gap: 0 },
+        children: [
+            {
+                type: "H1",
+                props: {
+                    value: `${errList.length} ${errList.length > 1 ? "Errors" : "Error"} found while processing XMLUI code-behind script`,
+                    padding: "$padding-normal",
+                    backgroundColor: "$color-error",
+                    color: "white",
                 },
-                {
-                    type: "VStack",
-                    props: {
-                        gap: "$gap-tight",
-                        padding: "$padding-normal",
-                    },
-                    children: errList,
+            },
+            {
+                type: "VStack",
+                props: {
+                    gap: "$gap-tight",
+                    padding: "$padding-normal",
                 },
-            ],
-        };
-        return comp;
-    }
-    const comp = makeComponent();
-    comp.component = makeComponent();
+                children: errList,
+            },
+        ],
+    };
     return comp;
 }
-function addPositions(errors, newlinePositions) {
-    var _a;
-    if (newlinePositions.length === 0) {
-        for (let err of errors) {
-            err.line = 1;
-            err.col = err.pos + 1;
-        }
-        return errors;
-    }
-    for (let err of errors) {
-        let i = 0;
-        for (; i < newlinePositions.length; ++i) {
-            const newlinePos = newlinePositions[i];
-            if (err.pos < newlinePos) {
-                err.line = i + 1;
-                err.col = err.pos - ((_a = newlinePositions[i - 1]) !== null && _a !== void 0 ? _a : 0) + 1;
-                break;
-            }
+function errReportModuleErrors(errors, fileName) {
+    const comp = createModuleErrorsComponent(errors, fileName);
+    comp.component = createModuleErrorsComponent(errors, fileName);
+    return comp;
+}
+/**
+ * Converts a position in a string to a line and column number.
+ * @param offset the offset of the position in the string
+ * @param newlinePositions the offsets of the newlines in the string in ascending order
+ */
+function offsetToPosition(offset, newlinePositions) {
+    let left = 0;
+    let right = newlinePositions.length;
+    while (left < right) {
+        const mid = Math.floor((left + right) / 2);
+        if (newlinePositions[mid] < offset) {
+            left = mid + 1;
         }
-        const lastNewlinePos = newlinePositions[newlinePositions.length - 1];
-        if (err.pos >= lastNewlinePos) {
-            err.line = newlinePositions.length + 1;
-            err.col = err.pos - lastNewlinePos + 0;
+        else {
+            right = mid;
         }
     }
-    return errors;
+    let line = left + 1;
+    let col = left === 0 ? offset + 1 : offset - newlinePositions[left - 1];
+    return { line, col };
 }
 function getCompoundCompName(node, getText) {
     var _a, _b, _c, _d, _e, _f;
@@ -307,3 +467,12 @@ function getCompoundCompName(node, getText) {
     }
     return undefined;
 }
+function addDisplayFieldsToErrors(errors, source, newlinePositions) {
+    return errors.map((err) => {
+        const { line: errPosLine, col: errPosCol } = offsetToPosition(err.pos, newlinePositions);
+        const { line: contextStartLine } = offsetToPosition(err.contextPos, newlinePositions);
+        return Object.assign(Object.assign({}, err), { errPosLine,
+            errPosCol,
+            contextStartLine, contextSource: source.substring(err.contextPos, err.contextEnd) });
+    });
+}

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

@@ -39,7 +39,7 @@ exports.DIAGS = {
     unexpectedCloseTag: {
         category: DiagnosticCategory.Error,
         code: ErrCodes.unexpectedCloseTag,
-        message: "Read '</', but there's no opening tag to close. You have too many closing tags.",
+        message: "Read '</', but there's no opening tag to close.",
     },
     expCloseStartWithName: function (openTagName) {
         return {