@markuplint/astro-parser 5.0.1 → 5.1.1

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.1](https://github.com/markuplint/markuplint/compare/v5.1.0...v5.1.1) (2026-10-09)
+
+**Note:** Version bump only for package @markuplint/astro-parser
+
+# [5.1.0](https://github.com/markuplint/markuplint/compare/v5.0.1...v5.1.0) (2026-10-08)
+
+### Bug Fixes
+
+- **astro-parser:** keep XML-namespaced attributes as static attributes ([4cc4253](https://github.com/markuplint/markuplint/commit/4cc4253c18f0b190177a79290a170996d1db8d02)), closes [#4058](https://github.com/markuplint/markuplint/issues/4058)
+
+### Features
+
+- **astro-parser:** report an attribute with an expression value as dynamic ([18f0985](https://github.com/markuplint/markuplint/commit/18f0985d1877be0f9b2821ba555f1896a2379307)), closes [#4058](https://github.com/markuplint/markuplint/issues/4058)
+- **astro-parser:** report the expression of a dynamic attribute and the spreads of the root ([994b3bb](https://github.com/markuplint/markuplint/commit/994b3bb8f8a83f8cf1596d63174d1b21257625d7))
+- **astro-parser:** report the slot wrappers and the direct children of the root ([2572e32](https://github.com/markuplint/markuplint/commit/2572e328789631df2903b3d730210aff65502d42)), 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/astro-parser

package/lib/component-scanner.d.ts

@@ -5,17 +5,48 @@ 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 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,203 @@
 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 } : {}),
+        namespace: root.namespace === 'http://www.w3.org/2000/svg' ? 'svg' : undefined,
+        line: root.line,
+        col: root.col,
+    };
+}
+const SPREAD = /^\{\s*\.\.\.([\s\S]*)\}$/;
+/**
+ * The expressions of `{...expr}`, which gives the element the attributes of an object
+ * (`{...Astro.props}` is what the component receives).
+ */
+function extractSpreads(el) {
+    return el.attributes.flatMap(attr => {
+        const expression = attr.type === 'spread' ? SPREAD.exec(attr.raw.trim())?.[1]?.trim() : undefined;
+        return expression ? [expression] : [];
+    });
+}
+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';
+}
+// The parser flags every `prefix:name` as a directive, including the XML namespaces of SVG
+const XML_NAMESPACED = /^(?:xlink|xml|xmlns):/;
+/**
+ * An attribute whose value is an expression (`type={kind}`, the shorthand `{type}`, or a
+ * template literal) is an attribute the element has, and it is `dynamic`. The directives
+ * (`class:list`, `set:html`, `client:load`, and so on) are not attributes by name and are left out.
+ */
+function extractAttrs(el) {
     const attrs = [];
-    for (const attr of root.attributes) {
+    for (const attr of el.attributes) {
         if (attr.type !== 'attr') {
             continue;
         }
+        if (attr.name.raw === '') {
+            if (attr.potentialName) {
+                // The shorthand `{type}` is `type={type}`
+                addAttr(attrs, { name: attr.potentialName, dynamic: true, expression: attr.potentialName });
+            }
+            continue;
+        }
+        if ((attr.isDirective || attr.nodeName.includes(':')) && !XML_NAMESPACED.test(attr.nodeName)) {
+            continue;
+        }
         const value = attr.value.raw;
-        if (value === '') {
-            attrs.push({ name: attr.nodeName });
+        if (attr.isDynamicValue) {
+            const expression = value.trim();
+            addAttr(attrs, { name: attr.nodeName, dynamic: true, ...(expression === '' ? {} : { expression }) });
+        }
+        else if (/^`.*`$/s.test(value)) {
+            addAttr(attrs, { name: attr.nodeName, dynamic: true });
+        }
+        else if (value === '') {
+            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 (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 extractAstroFrontmatter(source) {
     const re = /^(?:\s*\n)?---\r?\n/;
     const startMatch = re.exec(source);
@@ -71,7 +241,7 @@ export const componentScanner = {
         }
         const hasSlots = detectSlots(doc);
         const scriptSource = extractAstroFrontmatter(sourceCode) ?? undefined;
-        return { ...info, hasSlots, scriptSource };
+        return { ...info, hasSlots, ...scanSlotContent(doc), scriptSource };
     },
     extractScriptSource(sourceCode) {
         return extractAstroFrontmatter(sourceCode);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/astro-parser",
-	"version": "5.0.1",
+	"version": "5.1.1",
 	"description": "astro parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -32,12 +32,12 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/ml-ast": "5.0.1",
-		"@markuplint/parser-utils": "5.0.1",
+		"@markuplint/ml-ast": "5.1.1",
+		"@markuplint/parser-utils": "5.1.1",
 		"astro-eslint-parser": "1.4.0"
 	},
 	"devDependencies": {
 		"@astrojs/compiler": "3.0.1"
 	},
-	"gitHead": "edbaeedca5588fb291ea9d4e21a4ab2bf41fc9cb"
+	"gitHead": "a940c8526e971d590d97395ce924910221208820"
 }