@markuplint/vue-parser 4.6.22 → 5.0.0-alpha.0

package/lib/parser.js

@@ -1,5 +1,11 @@
 import { ParserError, Parser } from '@markuplint/parser-utils';
 import { vueParse } from './vue-parser/index.js';
+/**
+ * Parser implementation for Vue SFC templates.
+ * Extends the base Parser to handle Vue elements, text nodes, expression containers,
+ * directives (`v-bind`, `v-on`, `v-model`, `v-slot`), and template comments.
+ * Recognizes Vue built-in components and PascalCase user components.
+ */
 class VueParser extends Parser {
     constructor() {
         super({
@@ -7,7 +13,6 @@ class VueParser extends Parser {
         }, {
             comments: [],
         });
-        this.duplicatableAttrs = new Set(['class', 'style']);
     }
     tokenize() {
         const ast = vueParse(this.rawCode);
@@ -29,6 +34,16 @@ class VueParser extends Parser {
         }
         return super.parseError(error);
     }
+    /**
+     * Converts a Vue AST node into markuplint node tree items.
+     * Handles VText (text nodes), VExpressionContainer (template expressions),
+     * and VElement (elements with start/end tags and children).
+     *
+     * @param originNode - The Vue AST node to convert
+     * @param parentNode - The parent node in the markuplint tree, or null for root nodes
+     * @param depth - The nesting depth of the node
+     * @returns An array of markuplint node tree items
+     */
     nodeize(
     // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
     originNode, parentNode, depth) {
@@ -57,7 +72,6 @@ class VueParser extends Parser {
                     depth,
                     parentNode,
                     nodeName: originNode.name,
-                    namespace: originNode.namespace,
                 }, originNode.children, {
                     createEndTagToken: () => {
                         if (!originNode.endTag) {
@@ -74,14 +88,26 @@ class VueParser extends Parser {
             }
         }
     }
+    /**
+     * Extends the base flattening to inject Vue template comments between sibling nodes.
+     * Comments from the vue-eslint-parser are inserted at the correct positions
+     * based on their source offsets relative to adjacent nodes.
+     *
+     * @param nodeTree - The hierarchical node tree to flatten
+     * @returns A flat list of nodes including interleaved comments
+     */
     flattenNodes(nodeTree) {
         const nodeList = super.flattenNodes(nodeTree);
         const newNodeList = [];
         let prevNode = null;
         for (const node of nodeList) {
-            const lastOffset = prevNode?.endOffset ?? node.parentNode?.endOffset ?? 0;
+            const lastOffset = prevNode
+                ? prevNode.offset + prevNode.raw.length
+                : node.parentNode
+                    ? node.parentNode.offset + node.parentNode.raw.length
+                    : 0;
             const betweenComment = this.state.comments.find(comment => {
-                return lastOffset <= comment.range[0] && comment.range[1] <= node.startOffset;
+                return lastOffset <= comment.range[0] && comment.range[1] <= node.offset;
             });
             if (betweenComment) {
                 const token = this.sliceFragment(betweenComment.range[0], betweenComment.range[1]);
@@ -111,100 +137,6 @@ class VueParser extends Parser {
             concatText: false,
         });
     }
-    visitAttr(token) {
-        const attr = super.visitAttr(token);
-        if (attr.type === 'spread') {
-            return attr;
-        }
-        {
-            /**
-             * `v-on`
-             */
-            const [, directive, potentialName] = attr.name.raw.match(/^(v-on:|@)([^.]+)(?:\.([^.]+))?$/i) ?? [];
-            if (directive && potentialName) {
-                return {
-                    ...attr,
-                    potentialName: `on${potentialName.toLowerCase()}`,
-                    isDynamicValue: true,
-                };
-            }
-        }
-        {
-            /**
-             * `v-bind`
-             */
-            const [, directive, potentialName, modifier] = attr.name.raw.match(/^(v-bind:|:)([^.]+)(?:\.([^.]+))?$/i) ?? [];
-            if (directive && potentialName) {
-                if (this.duplicatableAttrs.has(potentialName.toLowerCase())) {
-                    this.updateAttr(attr, { isDuplicatable: true });
-                }
-                if (!modifier) {
-                    return {
-                        ...attr,
-                        potentialName,
-                        isDynamicValue: true,
-                    };
-                }
-                switch (modifier) {
-                    case '.attr': {
-                        return {
-                            ...attr,
-                            potentialName,
-                            isDynamicValue: true,
-                        };
-                    }
-                    /* eslint-disable unicorn/no-useless-switch-case */
-                    case '.prop':
-                    case '.camel':
-                    default: {
-                        const name = `v-bind:${potentialName}${modifier ?? ''}`;
-                        return {
-                            ...attr,
-                            potentialName: attr.name.raw === name ? undefined : name,
-                            isDirective: true,
-                        };
-                    }
-                    /* eslint-enable unicorn/no-useless-switch-case */
-                }
-            }
-        }
-        {
-            /**
-             * `v-model`
-             */
-            const [, directive] = attr.name.raw.match(/^(v-model)(?:\.([^.]+))?$/i) ?? [];
-            if (directive) {
-                return {
-                    ...attr,
-                    isDirective: true,
-                };
-            }
-        }
-        {
-            /**
-             * `v-slot`
-             */
-            const slotName = (attr.name.raw.match(/^(v-slot:|#)(.+)$/i) ?? [])[2];
-            const name = `v-slot:${slotName}`;
-            if (slotName) {
-                return {
-                    ...attr,
-                    potentialName: attr.name.raw === name ? undefined : name,
-                    isDirective: true,
-                };
-            }
-        }
-        /**
-         * If directives
-         */
-        if (attr.name.raw.startsWith('v-')) {
-            return {
-                ...attr,
-                isDirective: true,
-            };
-        }
-        return attr;
-    }
     /**
      * > In SFCs, it's recommended to use `PascalCase` tag names
      * > for child components to differentiate from native HTML elements.

package/lib/vue-parser/index.d.ts

@@ -1,5 +1,17 @@
 import * as VueESLintParser from 'vue-eslint-parser';
+/** The top-level AST produced by vue-eslint-parser, containing template body and comments. */
 export type VueTokens = VueESLintParser.AST.ESLintProgram;
+/**
+ * Parses a Vue SFC template string into a vue-eslint-parser AST.
+ *
+ * @param vueTemplate - The raw Vue template source code
+ * @returns The parsed AST program node containing the template body
+ */
 export declare function vueParse(vueTemplate: string): VueTokens;
-export type ASTNode = VueESLintParser.AST.VElement | VueESLintParser.AST.VText | VueESLintParser.AST.VExpressionContainer;
+export type VElement = VueESLintParser.AST.VElement;
+export type VText = VueESLintParser.AST.VText;
+export type VExpressionContainer = VueESLintParser.AST.VExpressionContainer;
+/** Union of AST node types that can appear as children in a Vue template. */
+export type ASTNode = VElement | VText | VExpressionContainer;
+/** Represents a comment token in the Vue template AST with location information. */
 export type ASTComment = VueESLintParser.AST.Token & VueESLintParser.AST.HasLocation;

package/lib/vue-parser/index.js

@@ -1,4 +1,10 @@
 import * as VueESLintParser from 'vue-eslint-parser';
+/**
+ * Parses a Vue SFC template string into a vue-eslint-parser AST.
+ *
+ * @param vueTemplate - The raw Vue template source code
+ * @returns The parsed AST program node containing the template body
+ */
 export function vueParse(vueTemplate) {
     const ast = VueESLintParser.parse(vueTemplate, { parser: false });
     return ast;

package/package.json

@@ -1,10 +1,13 @@
 {
 	"name": "@markuplint/vue-parser",
-	"version": "4.6.22",
+	"version": "5.0.0-alpha.0",
 	"description": "Vue parser for markuplint",
 	"repository": "git@github.com:markuplint/markuplint.git",
 	"author": "Yusuke Hirao <yusukehirao@me.com>",
 	"license": "MIT",
+	"engines": {
+		"node": ">=22"
+	},
 	"type": "module",
 	"exports": {
 		".": {
@@ -21,10 +24,10 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "4.6.22",
-		"@markuplint/ml-ast": "4.4.10",
-		"@markuplint/parser-utils": "4.8.10",
-		"vue-eslint-parser": "10.2.0"
+		"@markuplint/html-parser": "5.0.0-alpha.0",
+		"@markuplint/ml-ast": "5.0.0-alpha.0",
+		"@markuplint/parser-utils": "5.0.0-alpha.0",
+		"vue-eslint-parser": "10.4.0"
 	},
-	"gitHead": "6213ea30269ef404f030e67bbcc7fc7443ec1060"
+	"gitHead": "13dcfc84ec83d87360c720e253383b60767e1b56"
 }