xmlui 0.7.21 → 0.7.22

package/dist/scripts/src/components-core/theming/layout-resolver.js

@@ -0,0 +1,356 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_VAR_PREFIX = void 0;
+exports.resolveLayoutProps = resolveLayoutProps;
+exports.toCssVar = toCssVar;
+const constants_1 = require("../constants");
+const lodash_es_1 = require("lodash-es");
+exports.THEME_VAR_PREFIX = "xmlui";
+const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
+const alignmentRegex = /^(start|end|center)$/;
+const orientationRegex = /^(horizontal|vertical)$/;
+const booleanRegex = /^(true|false)$/;
+const starSizeRegex = /^\d*\*$/;
+const defaultCompResult = {
+    cssProps: {},
+    nonCssProps: {},
+    issues: new Set(),
+};
+function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContext) {
+    const result = {
+        cssProps: {},
+        nonCssProps: {},
+        issues: new Set(),
+    };
+    // --- Aligments & orientation
+    collectNonCss("horizontalAlignment");
+    collectNonCss("verticalAlignment");
+    collectNonCss("orientation");
+    // --- Adjust flex
+    if (!!getOrientation(layoutContext)) {
+        // --- In a container, we always use "flex-shrink: 0"
+        result.cssProps.flexShrink = 0;
+    }
+    // --- Dimensions
+    collectCss("width");
+    const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+    if (horizontalStarSize !== null) {
+        // --- We use "flex" when width is in start-size and allow shrinking
+        result.cssProps.flex = horizontalStarSize;
+        result.cssProps.flexShrink = 1;
+    }
+    collectCss("minWidth");
+    collectCss("maxWidth");
+    collectCss("height");
+    const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+    if (verticalStarSize !== null) {
+        // --- We use "flex" when width is in start-size and allow shrinking
+        result.cssProps.flex = verticalStarSize;
+        result.cssProps.flexShrink = 1;
+    }
+    collectCss("minHeight");
+    collectCss("maxHeight");
+    // --- Positions
+    collectCss("top");
+    collectCss("right");
+    collectCss("bottom");
+    collectCss("left");
+    // --- Paddings and gap
+    collectCss("gap");
+    collectCss("padding");
+    const horizontalPadding = transformLayoutValue("horizontalPadding");
+    if (horizontalPadding) {
+        result.cssProps.paddingLeft = horizontalPadding;
+        result.cssProps.paddingRight = horizontalPadding;
+    }
+    collectCss("paddingRight");
+    collectCss("paddingLeft");
+    const verticalPadding = transformLayoutValue("verticalPadding");
+    if (verticalPadding) {
+        result.cssProps.paddingTop = verticalPadding;
+        result.cssProps.paddingBottom = verticalPadding;
+    }
+    collectCss("paddingTop");
+    collectCss("paddingBottom");
+    // --- Margins
+    collectCss("margin");
+    const horizontalMargin = transformLayoutValue("horizontalMargin");
+    if (horizontalMargin) {
+        result.cssProps.marginLeft = horizontalMargin;
+        result.cssProps.marginRight = horizontalMargin;
+    }
+    collectCss("marginRight");
+    collectCss("marginLeft");
+    const verticalMargin = transformLayoutValue("verticalMargin");
+    if (verticalMargin) {
+        result.cssProps.marginTop = verticalMargin;
+        result.cssProps.marginBottom = verticalMargin;
+    }
+    collectCss("marginTop");
+    collectCss("marginBottom");
+    // --- Borders
+    collectCss("border");
+    collectCss("borderTop");
+    collectCss("borderRight");
+    collectCss("borderBottom");
+    collectCss("borderLeft");
+    collectCss("borderColor");
+    collectCss("borderStyle");
+    collectCss("borderThickness");
+    // --- Radius
+    collectCss("radius", "borderRadius");
+    collectCss("radiusTopLeft", "borderTopLeftRadius");
+    collectCss("radiusTopRight", "borderTopRightRadius");
+    collectCss("radiusBottomLeft", "borderBottomLeftRadius");
+    collectCss("radiusBottomRight", "borderBottomRightRadius");
+    // --- Typography
+    collectCss("color");
+    collectCss("fontFamily");
+    collectCss("fontSize");
+    collectCss("fontWeight");
+    collectCss("italic");
+    collectCss("textDecoration");
+    collectCss("userSelect");
+    collectCss("letterSpacing");
+    collectCss("textTransform");
+    collectCss("lineHeight");
+    collectCss("textAlign");
+    collectCss("textAlignLast");
+    collectCss("textWrap");
+    // --- Other
+    collectCss("backgroundColor");
+    collectCss("background");
+    collectCss("shadow", "boxShadow");
+    collectCss("direction");
+    collectCss("horizontalOverflow", "overflowX");
+    collectCss("verticalOverflow", "overflowY");
+    collectCss("zIndex");
+    collectCss("opacity");
+    collectCss("zoom");
+    collectCss("cursor");
+    collectCss("whiteSpace");
+    // --- Content rendering
+    const wrapContent = transformLayoutValue("wrapContent");
+    if (wrapContent) {
+        result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
+    }
+    collectCss("canShrink", "flexShrink");
+    const canShrink = transformLayoutValue("canShrink");
+    if (canShrink) {
+        result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
+    }
+    // --- If we didn't set any props, return a referentially stable result
+    if ((0, lodash_es_1.isEmpty)(result.cssProps) && (0, lodash_es_1.isEmpty)(result.nonCssProps) && (0, lodash_es_1.isEmpty)(result.issues)) {
+        return defaultCompResult;
+    }
+    // --- Done
+    return result;
+    // --- Replaces all variable occurrences in the input string with the result of toCssVar
+    function transformLayoutValue(prop) {
+        var _a, _b, _c, _d;
+        const defValue = resolveSingleValue();
+        if (((_a = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.mediaSize) === null || _a === void 0 ? void 0 : _a.sizeIndex) !== undefined) {
+            const sizeIndex = (_b = layoutContext.mediaSize) === null || _b === void 0 ? void 0 : _b.sizeIndex;
+            const xsValue = resolveSingleValue("xs");
+            const smValue = resolveSingleValue("sm");
+            const mdValue = resolveSingleValue("md");
+            const lgValue = resolveSingleValue("lg");
+            const xlValue = resolveSingleValue("xl");
+            const xxlValue = resolveSingleValue("xxl");
+            let mergedValue;
+            switch (sizeIndex) {
+                case 0: // xs
+                    mergedValue = (_c = xsValue !== null && xsValue !== void 0 ? xsValue : smValue) !== null && _c !== void 0 ? _c : mdValue;
+                    break;
+                case 1: // sm
+                    mergedValue = smValue !== null && smValue !== void 0 ? smValue : mdValue;
+                    break;
+                case 2: // md
+                    mergedValue = mdValue;
+                    break;
+                case 3: // lg
+                    mergedValue = lgValue;
+                    break;
+                case 4: // xl
+                    mergedValue = xlValue !== null && xlValue !== void 0 ? xlValue : lgValue;
+                    break;
+                case 5: // xxl
+                    mergedValue = (_d = xxlValue !== null && xxlValue !== void 0 ? xxlValue : xlValue) !== null && _d !== void 0 ? _d : lgValue;
+                    break;
+            }
+            return mergedValue !== null && mergedValue !== void 0 ? mergedValue : defValue;
+        }
+        return defValue;
+        function resolveSingleValue(sizeTag = "") {
+            if (prop === "shadow") {
+                let x = 1;
+            }
+            const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
+            let singleInput = layoutProps[fullProp];
+            if (singleInput == undefined) {
+                return;
+            }
+            if (typeof singleInput === "string") {
+                singleInput = singleInput.trim();
+            }
+            else {
+                singleInput = singleInput.toString();
+            }
+            // --- Evaluate
+            const value = singleInput
+                ? singleInput.replace(themeVarCapturesRegex, (match) => toCssVar(match.trim()))
+                : undefined;
+            if (singleInput !== value) {
+                // --- Theme variable replaced, do not check pattern validity
+                return value;
+            }
+            // --- Check value validity
+            const propPatterns = layoutPatterns[prop];
+            if (!propPatterns || propPatterns.length === 0) {
+                return value;
+            }
+            for (const pattern of propPatterns) {
+                if (pattern.test(value)) {
+                    return value;
+                }
+            }
+            // --- Done
+            result.issues.add(fullProp);
+            return value;
+        }
+    }
+    function collectNonCss(prop) {
+        const value = transformLayoutValue(prop);
+        if (value) {
+            // --- Evaluate
+            result.nonCssProps[prop] = value;
+        }
+    }
+    function collectCss(prop, propCssName = "") {
+        const value = transformLayoutValue(prop);
+        if (value) {
+            result.cssProps[propCssName || prop] = value;
+        }
+    }
+    // --- Checks if the specified size is a star size and the orientation is horizontal
+    function getHorizontalStartSize(size, layoutContext) {
+        if (!size)
+            return null;
+        const orientation = getOrientation(layoutContext);
+        return orientation === "horizontal" && starSizeRegex.test(size.toString())
+            ? getStarSizeNumber(size.toString())
+            : null;
+    }
+    // --- Checks if the specified size is a star size and the orientation is vertical
+    function getVerticalStartSize(size, layoutContext) {
+        if (!size)
+            return null;
+        const orientation = getOrientation(layoutContext);
+        return orientation === "vertical" && starSizeRegex.test(size.toString())
+            ? getStarSizeNumber(size.toString())
+            : null;
+    }
+    // ---  Obtains the integer number from a string that matches the starSizeRegex.
+    function getStarSizeNumber(input) {
+        if (starSizeRegex.test(input)) {
+            const numberPart = input.slice(0, -1); // Remove the trailing '*'
+            return numberPart === "" ? 1 : parseInt(numberPart, 10); // Default to 1 if no number is present
+        }
+        return null;
+    }
+    // --- Gets the current orientation from the layout context
+    function getOrientation(layoutContext) {
+        if (!layoutContext)
+            return;
+        let orientation = (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.type) === "Stack" && (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.orientation);
+        return orientation === null || orientation === void 0 ? void 0 : orientation.toString();
+    }
+}
+/**
+ * Converts the specified themeID to a CSS var string
+ * @param c segment to convert
+ */
+function toCssVar(c) {
+    return `var(--${exports.THEME_VAR_PREFIX}-${c.substring(1)})`;
+}
+// The properties constituting a component's layout
+const layoutPatterns = {
+    // --- Context-dependent/non-CSS props
+    horizontalAlignment: [alignmentRegex],
+    verticalAlignment: [alignmentRegex],
+    orientation: [orientationRegex],
+    // --- Dimensions
+    width: [],
+    minWidth: [],
+    maxWidth: [],
+    height: [],
+    minHeight: [],
+    maxHeight: [],
+    gap: [],
+    // --- Positions
+    top: [],
+    right: [],
+    bottom: [],
+    left: [],
+    // --- Border
+    border: [],
+    borderTop: [],
+    borderRight: [],
+    borderBottom: [],
+    borderLeft: [],
+    borderColor: [],
+    borderStyle: [],
+    borderThickness: [],
+    // --- Border radius
+    radius: [],
+    radiusTopLeft: [],
+    radiusTopRight: [],
+    radiusBottomLeft: [],
+    radiusBottomRight: [],
+    // --- Padding
+    padding: [],
+    horizontalPadding: [],
+    verticalPadding: [],
+    paddingTop: [],
+    paddingRight: [],
+    paddingBottom: [],
+    paddingLeft: [],
+    // --- Margin
+    margin: [],
+    horizontalMargin: [],
+    verticalMargin: [],
+    marginTop: [],
+    marginRight: [],
+    marginBottom: [],
+    marginLeft: [],
+    // --- Other
+    backgroundColor: [],
+    background: [],
+    shadow: [],
+    direction: [],
+    horizontalOverflow: [],
+    verticalOverflow: [],
+    zIndex: [],
+    opacity: [],
+    // --- Typography
+    color: [],
+    fontFamily: [],
+    fontSize: [],
+    fontWeight: [],
+    italic: [booleanRegex],
+    textDecoration: [],
+    userSelect: [],
+    letterSpacing: [],
+    textTransform: [],
+    lineHeight: [],
+    textAlign: [],
+    textWrap: [],
+    textAlignLast: [],
+    // --- Content rendering
+    wrapContent: [],
+    canShrink: [],
+    // --- Other
+    cursor: [],
+    zoom: [],
+    whiteSpace: [],
+};

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -10,7 +10,7 @@ exports.generateBaseSpacings = generateBaseSpacings;
 exports.generateBaseFontSizes = generateBaseFontSizes;
 exports.generateButtonTones = generateButtonTones;
 const color_1 = __importDefault(require("color"));
-const hvar_1 = require("@components-core/theming/hvar");
+const hvar_1 = require("../theming/hvar");
 function isThemeVarName(varName) {
     return typeof varName === 'string' && (varName === null || varName === void 0 ? void 0 : varName.startsWith("$"));
 }

package/dist/scripts/src/components-core/utils/DataLoaderQueryKeyGenerator.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataLoaderQueryKeyGenerator = void 0;
 const lodash_es_1 = require("lodash-es");
 class DataLoaderQueryKeyGenerator {
-    constructor(url, queryParams, apiUrl) {
+    constructor(url, queryParams, apiUrl, body, rawBody) {
         this.url = url;
         this.queryParams = queryParams;
         this.key = [url];
@@ -13,6 +13,12 @@ class DataLoaderQueryKeyGenerator {
         if (apiUrl) {
             this.key.push(apiUrl);
         }
+        if (body) {
+            this.key.push(body);
+        }
+        if (rawBody) {
+            this.key.push(rawBody);
+        }
     }
     asKey() {
         if (!this.key) {
@@ -27,8 +33,8 @@ class DataLoaderQueryKeyGenerator {
         return {
             predicate: (query) => {
                 const queryKey = query.queryKey;
-                return queryKey[0] === this.url && (!this.queryParams || (0, lodash_es_1.isEqual)(queryKey[1], this.queryParams));
-            }
+                return (queryKey[0] === this.url && (!this.queryParams || (0, lodash_es_1.isEqual)(queryKey[1], this.queryParams)));
+            },
         };
     }
 }

package/dist/scripts/src/components-core/utils/actionUtils.js

@@ -10,8 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.invalidateQueries = invalidateQueries;
-const DataLoaderQueryKeyGenerator_1 = require("@components-core/utils/DataLoaderQueryKeyGenerator");
-const extractParam_1 = require("@components-core/utils/extractParam");
+const DataLoaderQueryKeyGenerator_1 = require("../utils/DataLoaderQueryKeyGenerator");
+const extractParam_1 = require("../utils/extractParam");
 function invalidateQueries(invalidates, appContext, state) {
     return __awaiter(this, void 0, void 0, function* () {
         var _a;
@@ -22,7 +22,7 @@ function invalidateQueries(invalidates, appContext, state) {
             }
             arrayToInvalidate.forEach((invalidate) => {
                 var _a;
-                (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.invalidateQueries(new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator((0, extractParam_1.extractParam)(state, invalidate, appContext), undefined, appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl).asPredicate());
+                (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.invalidateQueries(new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator((0, extractParam_1.extractParam)(state, invalidate, appContext), undefined, appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, undefined, undefined).asPredicate());
             });
         }
         else {

package/dist/scripts/src/components-core/utils/compound-utils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compoundComponentDefFromSource = compoundComponentDefFromSource;
-const xmlui_parser_1 = require("@components-core/xmlui-parser");
+const xmlui_parser_1 = require("../xmlui-parser");
 function compoundComponentDefFromSource(name, componentSource) {
     const compoundComponentDef = (0, xmlui_parser_1.xmlUiMarkupToComponent)(componentSource).component;
     if (!compoundComponentDef) {

package/dist/scripts/src/components-core/utils/css-utils.js

@@ -13,8 +13,8 @@ exports.getMaxLinesStyle = getMaxLinesStyle;
 exports.getSizeString = getSizeString;
 const react_1 = require("react");
 const color_1 = __importDefault(require("color"));
-const themeVars_1 = require("@components-core/theming/themeVars");
-const constants_1 = require("@components-core/constants");
+const themeVars_1 = require("../theming/themeVars");
+const constants_1 = require("../constants");
 /**
  * Converts a string to its kebab-case representation
  * @param str Input string

package/dist/scripts/src/components-core/utils/extractParam.js

@@ -8,9 +8,9 @@ exports.withStableObjectReference = withStableObjectReference;
 exports.shouldKeep = shouldKeep;
 const react_1 = __importDefault(require("react"));
 const lodash_es_1 = require("lodash-es");
-const ParameterParser_1 = require("@components-core/script-runner/ParameterParser");
-const eval_tree_sync_1 = require("@components-core/script-runner/eval-tree-sync");
-const LruCache_1 = require("@components-core/utils/LruCache");
+const ParameterParser_1 = require("../script-runner/ParameterParser");
+const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
+const LruCache_1 = require("../utils/LruCache");
 /**
  * Extract the value of the specified parameter from the given view container state
  * @param state The state of the view container

package/dist/scripts/src/components-core/utils/hooks.js

@@ -49,9 +49,9 @@ exports.useColors = useColors;
 exports.useReferenceTrackedApi = useReferenceTrackedApi;
 const react_1 = __importStar(require("react"));
 const lodash_es_1 = require("lodash-es");
-const misc_1 = require("@components-core/utils/misc");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const constants_1 = require("@components-core/constants");
+const misc_1 = require("../utils/misc");
+const ThemeContext_1 = require("../theming/ThemeContext");
+const constants_1 = require("../constants");
 const color_1 = __importDefault(require("color"));
 /**
  * This hook invokes a callback when the size of the specified DOM element changes.

package/dist/scripts/src/parsers/scripting/modules.js

@@ -4,10 +4,10 @@ exports.isModuleErrors = isModuleErrors;
 exports.parseScriptModule = parseScriptModule;
 exports.obtainClosures = obtainClosures;
 exports.visitLetConstDeclarations = visitLetConstDeclarations;
-const Parser_1 = require("./Parser");
 const Token_1 = require("../../abstractions/scripting/Token");
 const tree_visitor_1 = require("./tree-visitor");
 const ParserError_1 = require("./ParserError");
+const Parser_1 = require("./Parser");
 /**
  * Checks if the result is a module error
  * @param result Result to check

package/dist/scripts/src/parsers/style-parser/style-compiler.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileLayout = compileLayout;
 const lodash_es_1 = require("lodash-es");
-const constants_1 = require("@components-core/constants");
+const constants_1 = require("../../components-core/constants");
 const StyleParser_1 = require("./StyleParser");
 const defaultCompResult = {
     cssProps: {},
@@ -10,7 +10,7 @@ const defaultCompResult = {
 };
 // Compile style properties into an object that can be directly used as the "style" attribute of elements
 function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layoutContext) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const result = {
         cssProps: {},
         nonCssProps: {},
@@ -224,6 +224,10 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
     const textWrap = (_e = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.textWrap) === null || _e === void 0 ? void 0 : _e.toString();
     if (textWrap)
         css.textWrap = textWrap;
+    const whiteSpace = (_f = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.whiteSpace) === null || _f === void 0 ? void 0 : _f.toString();
+    if (whiteSpace) {
+        css.whiteSpace = whiteSpace;
+    }
     // --- Compile content rendering
     const wrapContent = compileWrapContent("wrapContent", layoutProps);
     if (wrapContent)

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.onPrefixRegex = exports.UCRegex = exports.COMPOUND_COMP_ID = void 0;
 exports.nodeToComponentDef = nodeToComponentDef;
+const code_behind_collect_1 = require("../scripting/code-behind-collect");
 const syntax_kind_1 = require("./syntax-kind");
 const ParserError_1 = require("./ParserError");
 const Parser_1 = require("../scripting/Parser");
-const code_behind_collect_1 = require("../scripting/code-behind-collect");
 const CharacterCodes_1 = require("./CharacterCodes");
 exports.COMPOUND_COMP_ID = "Component";
 exports.UCRegex = /^[A-Z]/;
@@ -18,17 +18,16 @@ const APP_NS_KEY = "app-ns";
 const APP_NS_VALUE = "#app-ns";
 const CORE_NS_KEY = "core-ns";
 const CORE_NS_VALUE = "#xmlui-core-ns";
-var HelperNode;
-(function (HelperNode) {
-    HelperNode[HelperNode["property"] = 0] = "property";
-    HelperNode[HelperNode["event"] = 1] = "event";
-    HelperNode[HelperNode["var"] = 2] = "var";
-    HelperNode[HelperNode["loaders"] = 3] = "loaders";
-    HelperNode[HelperNode["uses"] = 4] = "uses";
-    HelperNode[HelperNode["method"] = 5] = "method";
-    HelperNode[HelperNode["item"] = 6] = "item";
-    HelperNode[HelperNode["field"] = 7] = "field";
-})(HelperNode || (HelperNode = {}));
+const HelperNode = {
+    property: 'property',
+    event: 'event',
+    variable: 'variable',
+    loaders: 'loaders',
+    uses: 'uses',
+    method: 'method',
+    item: 'item',
+    field: 'field'
+};
 function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () => "") {
     const getText = (node) => {
         var _a;
@@ -96,7 +95,7 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
                 api[attr.name] = attr.value;
             });
         }
-        // --- Get "var" attributes
+        // --- Get var attributes
         let vars;
         const varsAttrs = attrs.filter((attr) => attr.startSegment === "var");
         if (varsAttrs.length > 0) {
@@ -116,7 +115,7 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
         for (let child of children) {
             if (child.kind === syntax_kind_1.SyntaxKind.ElementNode) {
                 const childName = getComponentName(child, getText);
-                if (childName === "var") {
+                if (childName === HelperNode.variable) {
                     nestedVars.push(child);
                 }
                 else if (childName in HelperNode) {
@@ -257,7 +256,7 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
                         }
                     });
                     return;
-                case "var":
+                case HelperNode.variable:
                     collectElementHelper(usesStack, comp, child, (name) => { var _a; return (isComponent(comp) ? (_a = comp.vars) === null || _a === void 0 ? void 0 : _a[name] : undefined); }, (name, value) => {
                         var _a;
                         if (!isComponent(comp))

package/dist/scripts/src/syntax/grammar.tmLanguage.json

@@ -231,7 +231,7 @@
             ]
         },
         "propOrVarTag": {
-            "begin": "(</?)([a-zA-Z_][\\w\\.\\-]*?:)?((?:var)|(?:property)|(?:prop))",
+            "begin": "(</?)([a-zA-Z_][\\w\\.\\-]*?:)?((?:variable)|(?:property)|(?:prop))",
             "beginCaptures": {
                 "1": { "name": "punctuation.definition.tag.xmlui" },
                 "2": { "name": "keyword.operator.namespace.xmlui" },