xmlui 0.7.20 → 0.7.21

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

@@ -18,139 +18,52 @@ 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 = {}));
 function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () => "") {
     const getText = (node) => {
         var _a;
         return (_a = node.text) !== null && _a !== void 0 ? _a : originalGetText(node);
     };
-    // --- Check that the nodes contains exactly only a single component root element before the EoF token
-    if (node.children.length !== 2) {
-        reportError("T001");
-        return null;
-    }
-    // --- Ensure it's a component
-    const element = node.children[0];
-    if (element.kind !== syntax_kind_1.SyntaxKind.ElementNode) {
-        reportError("T001");
-        return null;
-    }
+    const element = getTopLvlElement(node, getText);
     const preppedElement = prepNode(element);
-    const name = getComponentName(element);
-    if (!exports.UCRegex.test(name)) {
-        reportError("T002");
-        return null;
-    }
     const usesStack = [];
     const namespaceStack = [];
-    return transformSingleElement(usesStack, preppedElement);
-    function transformSingleElement(usesStack, node) {
-        if (!exports.UCRegex.test(getComponentName(node))) {
-            reportError("T002");
-            return null;
-        }
-        const name = getNamespaceResolvedComponentName(node);
-        const attrs = getAttributes(node).map(segmentAttr);
-        let component;
+    return transformTopLvlElement(usesStack, preppedElement);
+    function transformTopLvlElement(usesStack, node) {
+        const name = getNamespaceResolvedComponentName(node, getText, namespaceStack);
         if (name === exports.COMPOUND_COMP_ID) {
-            // --- Validate component name
-            const compoundName = attrs.find((attr) => attr.name === "name");
-            if (!compoundName) {
-                reportError("T003");
-                return null;
-            }
-            if (!exports.UCRegex.test(compoundName.value)) {
-                reportError("T004");
-                return null;
-            }
-            // --- Get "method" attributes
-            let api;
-            const apiAttrs = attrs.filter((attr) => attr.startSegment === "method");
-            if (apiAttrs.length > 0) {
-                api = {};
-                apiAttrs.forEach((attr) => {
-                    api[attr.name] = attr.value;
-                });
-            }
-            // --- Get "var" attributes
-            let vars;
-            const varsAttrs = attrs.filter((attr) => attr.startSegment === "var");
-            if (varsAttrs.length > 0) {
-                vars = {};
-                varsAttrs.forEach((attr) => {
-                    vars[attr.name] = attr.value;
-                });
-            }
-            const children = getChildNodes(node);
-            // --- Check for nested component
-            const nestedCompound = children.find((child) => child.kind === syntax_kind_1.SyntaxKind.ElementNode && getComponentName(child) === exports.COMPOUND_COMP_ID);
-            if (nestedCompound) {
-                reportError("T006");
-                return null;
-            }
-            // --- Get the single component definition
-            const nestedComponents = children.filter((child) => child.kind === syntax_kind_1.SyntaxKind.ElementNode && exports.UCRegex.test(getComponentName(child)));
-            if (nestedComponents.length === 0) {
-                nestedComponents.push(createTextNodeElement(""));
-            }
-            const childrenToCollect = [];
-            const nestedVars = [];
-            for (let child of children) {
-                if (child.kind === syntax_kind_1.SyntaxKind.ElementNode) {
-                    const childName = getComponentName(child);
-                    if (childName === "var") {
-                        nestedVars.push(child);
-                    }
-                    else if (!exports.UCRegex.test(childName)) {
-                        childrenToCollect.push(child);
-                    }
-                }
-            }
-            // --- Should we wrap with a Fragment?
-            let element;
-            if (nestedComponents.length > 1 || nestedVars.length > 0) {
-                element = wrapWithFragment([...nestedVars, ...nestedComponents]);
-            }
-            else {
-                element = nestedComponents[0];
-            }
-            namespaceStack.push(new Map());
-            // --- Get collect namespace attributes
-            const nsAttrs = attrs
-                .filter((attr) => attr.namespace === "xmlns")
-                .forEach((attr) => {
-                addToNamespaces(namespaceStack, element, attr.unsegmentedName, attr.value);
-            });
-            let nestedComponent = transformSingleElement(usesStack, element);
-            namespaceStack.pop();
-            component = {
-                name: compoundName.value,
-                component: nestedComponent,
-                debug: {
-                    source: {
-                        start: node.start,
-                        end: node.end,
-                        fileId,
-                    },
-                },
-            };
-            if (api) {
-                component.api = api;
-            }
-            if (vars) {
-                nestedComponent.vars = Object.assign(Object.assign({}, nestedComponent.vars), vars);
-            }
-            nestedComponent.debug = {
+            return collectCompoundComponent(node);
+        }
+        let component = {
+            type: name,
+            debug: {
                 source: {
-                    start: element.start,
-                    end: element.end,
+                    start: node.start,
+                    end: node.end,
                     fileId,
                 },
-            };
-            const nodeClone = withNewChildNodes(node, childrenToCollect);
-            collectTraits(usesStack, component, nodeClone);
-            return component;
+            },
+        };
+        // --- Done
+        collectTraits(usesStack, component, node);
+        return component;
+    }
+    function transformInnerElement(usesStack, node) {
+        const name = getNamespaceResolvedComponentName(node, getText, namespaceStack);
+        if (name === exports.COMPOUND_COMP_ID) {
+            reportError("T006");
         }
-        component = {
+        let component = {
             type: name,
             debug: {
                 source: {
@@ -164,6 +77,98 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
         collectTraits(usesStack, component, node);
         return component;
     }
+    function collectCompoundComponent(node) {
+        const attrs = getAttributes(node).map(segmentAttr);
+        // --- Validate component name
+        const compoundName = attrs.find((attr) => attr.name === "name");
+        if (!compoundName) {
+            reportError("T003");
+        }
+        if (!exports.UCRegex.test(compoundName.value)) {
+            reportError("T004");
+        }
+        // --- Get "method" attributes
+        let api;
+        const apiAttrs = attrs.filter((attr) => attr.startSegment === "method");
+        if (apiAttrs.length > 0) {
+            api = {};
+            apiAttrs.forEach((attr) => {
+                api[attr.name] = attr.value;
+            });
+        }
+        // --- Get "var" attributes
+        let vars;
+        const varsAttrs = attrs.filter((attr) => attr.startSegment === "var");
+        if (varsAttrs.length > 0) {
+            vars = {};
+            varsAttrs.forEach((attr) => {
+                vars[attr.name] = attr.value;
+            });
+        }
+        const children = getChildNodes(node);
+        // --- Get the single component definition
+        const nestedComponents = children.filter((child) => child.kind === syntax_kind_1.SyntaxKind.ElementNode && !(getComponentName(child, getText) in HelperNode));
+        if (nestedComponents.length === 0) {
+            nestedComponents.push(createTextNodeElement(""));
+        }
+        const nonVarHelperNodes = [];
+        const nestedVars = [];
+        for (let child of children) {
+            if (child.kind === syntax_kind_1.SyntaxKind.ElementNode) {
+                const childName = getComponentName(child, getText);
+                if (childName === "var") {
+                    nestedVars.push(child);
+                }
+                else if (childName in HelperNode) {
+                    nonVarHelperNodes.push(child);
+                }
+            }
+        }
+        // --- Should we wrap with a Fragment?
+        let element;
+        if (nestedComponents.length > 1 || nestedVars.length > 0) {
+            element = wrapWithFragment([...nestedVars, ...nestedComponents]);
+        }
+        else {
+            element = nestedComponents[0];
+        }
+        namespaceStack.push(new Map());
+        // --- Get collect namespace attributes
+        const nsAttrs = attrs
+            .filter((attr) => attr.namespace === "xmlns")
+            .forEach((attr) => {
+            addToNamespaces(namespaceStack, element, attr.unsegmentedName, attr.value);
+        });
+        let nestedComponent = transformInnerElement(usesStack, element);
+        namespaceStack.pop();
+        const component = {
+            name: compoundName.value,
+            component: nestedComponent,
+            debug: {
+                source: {
+                    start: node.start,
+                    end: node.end,
+                    fileId,
+                },
+            },
+        };
+        if (api) {
+            component.api = api;
+        }
+        if (vars) {
+            nestedComponent.vars = Object.assign(Object.assign({}, nestedComponent.vars), vars);
+        }
+        nestedComponent.debug = {
+            source: {
+                start: element.start,
+                end: element.end,
+                fileId,
+            },
+        };
+        const nodeClone = withNewChildNodes(node, nonVarHelperNodes);
+        collectTraits(usesStack, component, nodeClone);
+        return component;
+    }
     /**
      * Collects component traits from attributes and child elements
      * @param comp Component definition
@@ -201,17 +206,18 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
                 comp.children = mergeValue(comp.children, getText(child));
                 return;
             }
-            const childName = getComponentName(child);
-            if (isCompound && child.kind === syntax_kind_1.SyntaxKind.ElementNode && exports.UCRegex.test(childName)) {
+            const childName = getComponentName(child, getText);
+            if (isCompound && child.kind === syntax_kind_1.SyntaxKind.ElementNode && !(childName in HelperNode)) {
                 // --- This is the single nested component definition of a compound component,
                 // --- it is already processed
                 return;
             }
             // --- Element name starts with an uppercase letter
-            if (exports.UCRegex.test(childName) && !isCompound) {
+            if (!(childName in HelperNode) && !isCompound) {
+                // if (UCRegex.test(childName) && !isCompound) {
                 // --- This must be a child component
-                // maybe here or in the transformSingleElement function, after the compound comp check
-                const childComponent = transformSingleElement(usesStack, child);
+                // maybe here or in the transformInnerElement function, after the compound comp check
+                const childComponent = transformInnerElement(usesStack, child);
                 if (childComponent) {
                     if (!comp.children) {
                         comp.children = [childComponent];
@@ -376,7 +382,7 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
             }
             if (child.kind !== syntax_kind_1.SyntaxKind.ElementNode)
                 return;
-            const childName = getComponentName(child);
+            const childName = getComponentName(child, getText);
             // --- The only element names we accept are "field" or "item"
             if (childName !== "field" && childName !== "item") {
                 reportError("T016");
@@ -420,11 +426,11 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
         return result;
     }
     function collectValue(usesStack, element, allowName = true) {
-        const elementName = getComponentName(element);
+        const elementName = getComponentName(element, getText);
         // --- Accept only "name", "value"
         const childNodes = getChildNodes(element);
-        const nestedComponents = childNodes.filter((c) => c.kind === syntax_kind_1.SyntaxKind.ElementNode && exports.UCRegex.test(getComponentName(c)));
-        const nestedElements = childNodes.filter((c) => c.kind === syntax_kind_1.SyntaxKind.ElementNode && !exports.UCRegex.test(getComponentName(c)));
+        const nestedComponents = childNodes.filter((c) => c.kind === syntax_kind_1.SyntaxKind.ElementNode && exports.UCRegex.test(getComponentName(c, getText)));
+        const nestedElements = childNodes.filter((c) => c.kind === syntax_kind_1.SyntaxKind.ElementNode && !exports.UCRegex.test(getComponentName(c, getText)));
         const attributes = getAttributes(element).map(segmentAttr);
         const attrProps = attributes.filter((attr) => propAttrs.indexOf(attr.name) >= 0);
         if (attributes.length > attrProps.length) {
@@ -459,7 +465,7 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
                 return null;
             }
             // --- We expect a component definition here!
-            const nestedComps = nestedComponents.map((nc) => transformSingleElement(usesStack, nc));
+            const nestedComps = nestedComponents.map((nc) => transformInnerElement(usesStack, nc));
             return {
                 name,
                 value: nestedComps.length === 1 ? nestedComps[0] : nestedComps,
@@ -501,7 +507,7 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
             // todo: is this needed?
             // --- Just for the sake of being sure...
             // if (loader.type !== "Element") return;
-            const loaderDef = transformSingleElement(usesStack, loader);
+            const loaderDef = transformInnerElement(usesStack, loader);
             // --- Get the uid value
             if (!loaderDef.uid) {
                 reportError("T013");
@@ -565,33 +571,6 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
         // --- Extract the value
         (_a = comp.uses) !== null && _a !== void 0 ? _a : (comp.uses = valueAttr.value.split(",").map((v) => v.trim()));
     }
-    function getComponentName(node) {
-        const nameTokens = node.children.find((c) => c.kind === syntax_kind_1.SyntaxKind.TagNameNode).children;
-        const name = getText(nameTokens.at(-1));
-        return name;
-    }
-    function getNamespaceResolvedComponentName(node) {
-        const nameTokens = node.children.find((c) => c.kind === syntax_kind_1.SyntaxKind.TagNameNode).children;
-        const name = getText(nameTokens.at(-1));
-        if (nameTokens.length === 1) {
-            return name;
-        }
-        const namespace = getText(nameTokens[0]);
-        if (namespaceStack.length === 0) {
-            reportError("T026");
-        }
-        let resolvedNamespace = undefined;
-        for (let i = namespaceStack.length - 1; i >= 0; --i) {
-            resolvedNamespace = namespaceStack[i].get(namespace);
-            if (resolvedNamespace !== undefined) {
-                break;
-            }
-        }
-        if (resolvedNamespace === undefined) {
-            reportError("T027", namespace);
-        }
-        return resolvedNamespace + "." + name;
-    }
     function segmentAttr(attr) {
         let key = attr.children[0];
         const hasNamespace = key.children.length === 3;
@@ -631,9 +610,10 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
         }
     }
     function prepNode(node) {
+        var _a;
         const childNodes = getChildNodes(node);
-        const tagName = getComponentName(node);
-        const hasComponentName = exports.UCRegex.test(tagName);
+        const tagName = getComponentName(node, getText);
+        const hasComponentName = !(tagName in HelperNode);
         const shouldUseTextNodeElement = hasComponentName || tagName === "property";
         const shouldCollapseWhitespace = tagName !== "event" && tagName !== "method";
         const attrs = getAttributes(node);
@@ -681,10 +661,20 @@ function nodeToComponentDef(node, originalGetText, fileId, moduleResolver = () =
             }
             childNodes[i] = newChild;
         }
-        const helperNodes = childNodes.filter((c) => c.kind === syntax_kind_1.SyntaxKind.ElementNode && !exports.UCRegex.test(getComponentName(c)));
-        const otherNodes = childNodes.filter((c) => c.kind !== syntax_kind_1.SyntaxKind.ElementNode ||
-            (c.kind === syntax_kind_1.SyntaxKind.ElementNode && exports.UCRegex.test(getComponentName(c))));
-        const hasComponentChild = otherNodes.some((c) => c.kind === syntax_kind_1.SyntaxKind.ElementNode && exports.UCRegex.test(getComponentName(c)));
+        const helperNodes = [];
+        const otherNodes = [];
+        let hasComponentChild = false;
+        for (const child of childNodes) {
+            if (child.kind === syntax_kind_1.SyntaxKind.ElementNode) {
+                let compName = (_a = getComponentName(child, getText)) !== null && _a !== void 0 ? _a : undefined;
+                if (compName in HelperNode) {
+                    helperNodes.push(child);
+                    continue;
+                }
+                hasComponentChild = true;
+            }
+            otherNodes.push(child);
+        }
         if (hasScriptChild && hasComponentChild) {
             const fragment = wrapWithFragment(otherNodes);
             helperNodes.push(fragment);
@@ -1060,3 +1050,42 @@ function addToNamespaces(namespaceStack, comp, nsKey, value) {
     (_a = comp.namespaces) !== null && _a !== void 0 ? _a : (comp.namespaces = {});
     comp.namespaces[nsKey] = nsValue;
 }
+function getTopLvlElement(node, getText) {
+    // --- Check that the nodes contains exactly only a single component root element before the EoF token
+    if (node.children.length !== 2) {
+        reportError("T001");
+    }
+    // --- Ensure it's a component
+    const element = node.children[0];
+    if (element.kind !== syntax_kind_1.SyntaxKind.ElementNode) {
+        reportError("T001");
+    }
+    return element;
+}
+function getComponentName(node, getText) {
+    const nameTokens = node.children.find((c) => c.kind === syntax_kind_1.SyntaxKind.TagNameNode).children;
+    const name = getText(nameTokens.at(-1));
+    return name;
+}
+function getNamespaceResolvedComponentName(node, getText, namespaceStack) {
+    const nameTokens = node.children.find((c) => c.kind === syntax_kind_1.SyntaxKind.TagNameNode).children;
+    const name = getText(nameTokens.at(-1));
+    if (nameTokens.length === 1) {
+        return name;
+    }
+    const namespace = getText(nameTokens[0]);
+    if (namespaceStack.length === 0) {
+        reportError("T026");
+    }
+    let resolvedNamespace = undefined;
+    for (let i = namespaceStack.length - 1; i >= 0; --i) {
+        resolvedNamespace = namespaceStack[i].get(namespace);
+        if (resolvedNamespace !== undefined) {
+            break;
+        }
+    }
+    if (resolvedNamespace === undefined) {
+        reportError("T027", namespace);
+    }
+    return resolvedNamespace + "." + name;
+}

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

@@ -244,7 +244,7 @@
             "patterns": [{ "include": "#attribute" }, { "include": "#comments" }]
         },
         "componentTag": {
-            "begin": "(\\s*</?)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)([A-Z][\\w\\.\\-]*)",
+            "begin": "(</?)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)([a-zA-Z][\\w\\.\\-]*)",
             "beginCaptures": {
                 "1": { "name": "punctuation.definition.tag.xmlui" },
                 "2": { "name": "keyword.operator.namespace.xmlui" },