@markuplint/vue-parser 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.1.0](https://github.com/markuplint/markuplint/compare/v5.0.1...v5.1.0) (2026-10-08)
+
+### Bug Fixes
+
+- **vue-parser:** merge a static and a bound attribute of the same name ([4adc718](https://github.com/markuplint/markuplint/commit/4adc718e99768a06deee3dae2b1a92dd86d1f9fa)), closes [#4058](https://github.com/markuplint/markuplint/issues/4058)
+
+### Features
+
+- **vue-parser:** report a bound attribute as dynamic under its own name ([8246612](https://github.com/markuplint/markuplint/commit/824661259b3893971beb3acf0f2eb5581d56a5e6)), closes [#4058](https://github.com/markuplint/markuplint/issues/4058)
+- **vue-parser:** report the expression, the spreads of the root, and whether it has siblings ([b811d81](https://github.com/markuplint/markuplint/commit/b811d81363bea86e57a2652086e13dbb5f5d90e0))
+- **vue-parser:** report the slot wrappers and the direct children of the root ([7930ee7](https://github.com/markuplint/markuplint/commit/7930ee7b352292cbcc975e89c4976f101b19882b)), closes [#4054](https://github.com/markuplint/markuplint/issues/4054)
+
+## [5.0.1](https://github.com/markuplint/markuplint/compare/v5.0.0...v5.0.1) (2026-09-22)
+
+**Note:** Version bump only for package @markuplint/vue-parser
+
 # [5.0.0](https://github.com/markuplint/markuplint/compare/v5.0.0-rc.7...v5.0.0) (2026-09-11)
 
 **Note:** Version bump only for package @markuplint/vue-parser

package/lib/component-scanner.d.ts

@@ -5,17 +5,49 @@ export interface ComponentScanResult {
     readonly rootElement: string | null;
     readonly attrs: readonly ComponentScanAttr[];
     readonly hasSlots: boolean;
+    readonly slotWrappers?: readonly ComponentScanSlotWrapper[];
+    readonly rootContents?: readonly ComponentScanContent[];
     readonly scriptSource?: ComponentScanScriptSource;
+    readonly spreads?: readonly string[];
+    readonly hasSiblingRoots?: true;
     readonly namespace?: 'svg';
     readonly line?: number;
     readonly col?: number;
 }
 /**
- * A static attribute extracted from a component's root element.
+ * An attribute extracted from an element of a component: a static one with its value, or
+ * a `dynamic` one whose value is an expression.
  */
 export interface ComponentScanAttr {
     readonly name: string;
     readonly value?: string;
+    /** The attribute is present and its value is an expression, unknown at scan time. `value` is omitted. */
+    readonly dynamic?: true;
+    /** The source of the expression of a `dynamic` attribute that is written as one expression. */
+    readonly expression?: string;
+}
+/**
+ * A direct child of an element that wraps a slot. A native element is itself
+ * (its own content is not tracked), the slot is its position, and anything
+ * else (an expression, a block, a component) is unknown content.
+ */
+export type ComponentScanContent = {
+    readonly element: string;
+    readonly attrs?: readonly ComponentScanAttr[];
+} | {
+    readonly slot: true;
+} | {
+    readonly dynamic: true;
+};
+/**
+ * An element that directly wraps a slot. A component has no `attrs` and no
+ * `contents`: what it renders is unknown.
+ */
+export interface ComponentScanSlotWrapper {
+    readonly element: string;
+    readonly isRoot: boolean;
+    readonly attrs: readonly ComponentScanAttr[];
+    readonly contents: readonly ComponentScanContent[];
 }
 /**
  * A script/ESM source block extracted from a component file.

package/lib/component-scanner.js

@@ -1,33 +1,223 @@
 import { parser } from './parser.js';
 function extractComponentInfo(doc) {
-    const root = doc.nodeList.find((n) => n.type === 'starttag' && n.depth === 0 && !n.isFragment);
+    const root = findRoot(doc);
     if (!root) {
         return null;
     }
+    const spreads = extractSpreads(root);
+    return {
+        rootElement: root.nodeName,
+        attrs: extractAttrs(root),
+        ...(spreads.length > 0 ? { spreads } : {}),
+        ...(hasSiblingRoots(doc, root) ? { hasSiblingRoots: true } : {}),
+        namespace: root.namespace === 'http://www.w3.org/2000/svg' ? 'svg' : undefined,
+        line: root.line,
+        col: root.col,
+    };
+}
+/**
+ * The expressions of `v-bind="expr"` (without an argument), which gives the element the
+ * attributes of an object. `v-bind="$attrs"` is what the component receives and does not
+ * declare as props.
+ */
+function extractSpreads(el) {
+    return el.attributes.flatMap(attr => attr.type === 'attr' && attr.nodeName === 'v-bind' && attr.value.raw.trim() !== ''
+        ? [attr.value.raw.trim()]
+        : []);
+}
+/**
+ * Another root beside the root element: an element (`v-else-if` / `v-else` continue the
+ * `v-if` before them and are not another root), text, or an interpolation such as `{{ x }}`.
+ */
+function hasSiblingRoots(doc, root) {
+    return doc.nodeList.some(n => {
+        if (n.uuid === root.uuid) {
+            return false;
+        }
+        if (n.type === 'text' || n.type === 'psblock') {
+            return n.depth === 0 && n.raw.trim() !== '';
+        }
+        return (n.type === 'starttag' &&
+            n.depth === 0 &&
+            !n.isFragment &&
+            !n.attributes.some(attr => attr.type === 'attr' && /^v-else(?:-if)?$/.test(attr.nodeName)));
+    });
+}
+function isSlotNode(n) {
+    return n.type === 'starttag' && n.nodeName === 'slot';
+}
+function detectSlots(doc) {
+    return doc.nodeList.some(n => n.type !== 'doctype' && isSlotNode(n));
+}
+function findRoot(doc) {
+    return doc.nodeList.find((n) => n.type === 'starttag' && n.depth === 0 && !n.isFragment);
+}
+function isElement(n) {
+    return n.type === 'starttag';
+}
+/**
+ * A binding (`:type`, `v-bind:type`) is an attribute the element has, and its value is an
+ * expression: it is `dynamic` under its own name. Event handlers, `v-bind` objects, the other
+ * directives, and bindings without a name known here (modifiers, `[name]`) are not
+ * attributes by name and are left out.
+ */
+const BINDING = /^(?:v-bind:|:)([^.[]+)$/;
+const NOT_ATTRIBUTE = /^(?:v-|[@:.#])/;
+const SPECIAL_PROPS = new Set(['key', 'ref', 'is']);
+function extractAttrs(el) {
     const attrs = [];
-    for (const attr of root.attributes) {
+    for (const attr of el.attributes) {
         if (attr.type !== 'attr') {
             continue;
         }
+        const binding = BINDING.exec(attr.nodeName)?.[1]?.toLowerCase();
+        if (binding) {
+            if (!SPECIAL_PROPS.has(binding)) {
+                const expression = attr.value.raw.trim();
+                addAttr(attrs, { name: binding, dynamic: true, ...(expression === '' ? {} : { expression }) });
+            }
+            continue;
+        }
+        if (NOT_ATTRIBUTE.test(attr.nodeName)) {
+            continue;
+        }
         const value = attr.value.raw;
         if (value === '') {
-            attrs.push({ name: attr.nodeName });
+            addAttr(attrs, { name: attr.nodeName });
         }
         else {
-            attrs.push({ name: attr.nodeName, value });
+            addAttr(attrs, { name: attr.nodeName, value });
+        }
+    }
+    return attrs;
+}
+/**
+ * One name written in two forms (`class="btn" :class="x"`) is one attribute: dynamic
+ * when any of the forms is, in the position of the first. It is not one expression any
+ * more, so it has no `expression`.
+ */
+function addAttr(attrs, attr) {
+    const index = attrs.findIndex(existing => existing.name === attr.name);
+    const existing = attrs[index];
+    if (!existing) {
+        attrs.push(attr);
+    }
+    else if (existing.dynamic || attr.dynamic) {
+        attrs[index] = { name: attr.name, dynamic: true };
+    }
+}
+function containsSlot(n) {
+    return isSlotNode(n) || ('childNodes' in n && n.childNodes.some(child => containsSlot(child)));
+}
+/**
+ * The nearest element above the node. Blocks, fragments and `<template>` are
+ * looked through: they are not elements the component renders.
+ */
+function findWrapper(n, nodes) {
+    let current = n.parentNodeUuid ? nodes.get(n.parentNodeUuid) : undefined;
+    while (current) {
+        if (isElement(current) && !current.isFragment && current.nodeName !== 'template') {
+            return current;
+        }
+        current = current.parentNodeUuid ? nodes.get(current.parentNodeUuid) : undefined;
+    }
+    return null;
+}
+function isWithin(n, root, nodes) {
+    let current = n;
+    while (current) {
+        if (current.uuid === root.uuid) {
+            return true;
+        }
+        current = current.parentNodeUuid ? nodes.get(current.parentNodeUuid) : undefined;
+    }
+    return false;
+}
+function extractContents(el) {
+    const entries = [];
+    for (const child of el.childNodes) {
+        if (child.type === 'endtag' || child.type === 'comment') {
+            continue;
+        }
+        if (child.type === 'text') {
+            if (child.raw.trim() !== '') {
+                entries.push({ text: true });
+            }
+            continue;
+        }
+        if (isElement(child) &&
+            child.attributes.some(attr => attr.type === 'attr' && /^v-(?:if|else-if|else|for)$/.test(attr.nodeName))) {
+            // Whether it exists, and how many times, is decided at render time
+            entries.push({ dynamic: true });
+            continue;
+        }
+        if (containsSlot(child)) {
+            entries.push({ slot: true });
+            continue;
+        }
+        if (child.type === 'psblock') {
+            // Closing tags of blocks (`{/if}`) render nothing
+            if (!child.nodeName.startsWith('#ps:/')) {
+                entries.push({ dynamic: true });
+            }
+            continue;
+        }
+        if (isElement(child) && child.elementType === 'html' && child.nodeName !== 'template') {
+            const attrs = extractAttrs(child);
+            entries.push({ element: child.nodeName, ...(attrs.length > 0 ? { attrs } : {}) });
+            continue;
+        }
+        entries.push({ dynamic: true });
+    }
+    // Text beside elements can still satisfy a content model (`<ruby>漢<rt>kan</rt></ruby>`),
+    // so it is unknown content there. Text alone cannot be what a required child needs.
+    const hasElement = entries.some(entry => 'element' in entry);
+    const contents = [];
+    for (const entry of entries) {
+        if (!('text' in entry)) {
+            contents.push(entry);
+            continue;
+        }
+        const last = contents.at(-1);
+        if (hasElement && !(last && 'dynamic' in last)) {
+            contents.push({ dynamic: true });
+        }
+    }
+    return contents;
+}
+/**
+ * Finds the element that directly wraps each slot inside the root element and
+ * what surrounds the slots: the direct children of the root.
+ */
+function scanSlotContent(doc) {
+    const root = findRoot(doc);
+    if (!root) {
+        return {};
+    }
+    const nodes = new Map(doc.nodeList.filter((n) => n.type !== 'doctype').map(n => [n.uuid, n]));
+    const wrappers = new Map();
+    for (const n of nodes.values()) {
+        if (!isSlotNode(n)) {
+            continue;
+        }
+        const wrapper = findWrapper(n, nodes);
+        if (wrapper && isWithin(wrapper, root, nodes)) {
+            wrappers.set(wrapper.uuid, wrapper);
         }
     }
     return {
-        rootElement: root.nodeName,
-        attrs,
-        namespace: root.namespace === 'http://www.w3.org/2000/svg' ? 'svg' : undefined,
-        line: root.line,
-        col: root.col,
+        slotWrappers: [...wrappers.values()].map(wrapper => {
+            const isNative = wrapper.elementType === 'html';
+            return {
+                element: wrapper.nodeName,
+                isRoot: wrapper.uuid === root.uuid,
+                attrs: isNative ? extractAttrs(wrapper) : [],
+                contents: isNative ? extractContents(wrapper) : [],
+            };
+        }),
+        rootContents: extractContents(root),
     };
 }
-function detectSlots(doc) {
-    return doc.nodeList.some(n => n.type === 'starttag' && n.nodeName === 'slot');
-}
 function extractVueScriptSetup(source) {
     const re = /<script\s[^>]*?\bsetup\b[^>]*>/i;
     const match = re.exec(source);
@@ -72,7 +262,7 @@ export const componentScanner = {
         }
         const hasSlots = detectSlots(doc);
         const scriptSource = extractVueScriptSetup(sourceCode) ?? undefined;
-        return { ...info, hasSlots, scriptSource };
+        return { ...info, hasSlots, ...scanSlotContent(doc), scriptSource };
     },
     extractScriptSource(sourceCode) {
         return extractVueScriptSetup(sourceCode);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/vue-parser",
-	"version": "5.0.0",
+	"version": "5.1.0",
 	"description": "Vue parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -32,10 +32,10 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "5.0.0",
-		"@markuplint/ml-ast": "5.0.0",
-		"@markuplint/parser-utils": "5.0.0",
+		"@markuplint/html-parser": "5.1.0",
+		"@markuplint/ml-ast": "5.1.0",
+		"@markuplint/parser-utils": "5.1.0",
 		"vue-eslint-parser": "10.4.0"
 	},
-	"gitHead": "c99706fda4c186aeb87b521eaabc5208ac144bbd"
+	"gitHead": "3a061784a8211034ad0c1cbd64798c0213414f65"
 }