@markuplint/vue-parser 5.4.0 → 5.6.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.6.0](https://github.com/markuplint/markuplint/compare/v5.5.0...v5.6.0) (2026-11-12)
+
+### Bug Fixes
+
+* **vue-parser:** treat slot as a fragment ([0f5e7b2](https://github.com/markuplint/markuplint/commit/0f5e7b2748ddac50bbb276febfcd20bdccf51c5d))
+
+### Features
+
+* **vue-parser:** declare that slot is the placeholder of the framework ([cb12dd5](https://github.com/markuplint/markuplint/commit/cb12dd5016d48525905ab3fca578cb1da2bad369))
+
+
+# [5.5.0](https://github.com/markuplint/markuplint/compare/v5.4.0...v5.5.0) (2026-11-10)
+
+### Bug Fixes
+
+* **vue-parser:** treat a style and a script of the template as code that the compiler removes ([44315f6](https://github.com/markuplint/markuplint/commit/44315f692b852ec85f282d2632cf71e09f830594))
+
+
 # [5.4.0](https://github.com/markuplint/markuplint/compare/v5.3.0...v5.4.0) (2026-10-29)
 
 **Note:** Version bump only for package @markuplint/vue-parser

package/README.md

@@ -24,4 +24,6 @@ Add `parser` option to your [configuration](https://markuplint.dev/configuration
 }
 ```
 
+Vue removes a `<style>` and a `<script>` from a template, so no rule checks one and, when you set `severity.parseError`, each is reported as the parse error `vue-ignored-side-effect-tag`. See [`parse-error`](https://markuplint.dev/docs/migration/v4-to-v5/rules/parse-error).
+
 `parserOptions` option work in progress. In the current, the setting is `{ "sourceType": "module" }` that hard coded.

package/lib/parser.d.ts

@@ -1,5 +1,5 @@
 import type { ASTNode, ASTComment } from './vue-parser/index.js';
-import type { MLASTParentNode, MLASTNodeTreeItem } from '@markuplint/ml-ast';
+import type { MLASTParentNode, MLASTNodeTreeItem, MLASTParseError } from '@markuplint/ml-ast';
 import { ParserError, Parser } from '@markuplint/parser-utils';
 type State = {
     comments: readonly ASTComment[];
@@ -30,6 +30,7 @@ declare class VueParser extends Parser<ASTNode, State> {
     tokenize(): {
         readonly ast: ASTNode[];
         readonly isFragment: boolean;
+        readonly parseErrors?: readonly MLASTParseError[];
     };
     parseError(error: any): ParserError;
     nodeize(originNode: ASTNode, parentNode: MLASTParentNode | null, depth: number): readonly MLASTNodeTreeItem[];
@@ -68,9 +69,9 @@ declare class VueParser extends Parser<ASTNode, State> {
      * The user's `authoredElementName` replaces all of this, as it replaces any default of a parser.
      *
      * @see https://vuejs.org/guide/essentials/component-basics#using-a-component
-     * @see https://vuejs.org/api/built-in-components.html
+     * @see https://vuejs.org/api/built-in-components.html#built-in-components
      * @see https://vuejs.org/api/built-in-special-elements.html#built-in-special-elements
-     * @see https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parser.ts (`isComponent`)
+     * @see https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parser.ts#isComponent
      */
     detectElementType(nodeName: string): import("@markuplint/ml-ast").ElementType;
     /**

package/lib/parser.js

@@ -5,7 +5,7 @@ import { vueParse } from './vue-parser/index.js';
  * The built-in components, as written or in kebab-case: `isBuiltInType(tag, name)` of Vue is
  * `tag === name || tag === hyphenate(name)`.
  *
- * @see https://vuejs.org/api/built-in-components.html
+ * @see https://vuejs.org/api/built-in-components.html#built-in-components
  */
 const BUILT_IN_COMPONENTS = [
     'Transition',
@@ -19,6 +19,55 @@ const BUILT_IN_COMPONENTS = [
     'Suspense',
     'suspense',
 ];
+/**
+ * Whether the element is a `<style>` or a `<script>` that Vue's compiler removes from a client template.
+ *
+ * > Tags with side effect (<script> and <style>) are ignored in client component templates.
+ *
+ * `ignoreSideEffectTags` of `@vue/compiler-dom` removes the element whose `tag` is `script` or `style`
+ * and whose `tagType` is `ELEMENT`: a name with a capital letter (`<Style>`) is a component
+ * (`isComponent` of `@vue/compiler-core`). The parser of `vue-eslint-parser` lower-cases `name` and
+ * keeps `rawName`, so `rawName` is what tells them apart.
+ *
+ * @see https://github.com/vuejs/core/blob/main/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts#ignoreSideEffectTags
+ * @see https://github.com/vuejs/core/blob/main/packages/compiler-dom/src/errors.ts#DOMErrorMessages
+ * @param element - The element of the template
+ * @returns `true` if the compiler removes the element
+ */
+function isIgnoredSideEffectTag(element) {
+    return element.rawName === 'style' || element.rawName === 'script';
+}
+/**
+ * Collects the non-fatal parse errors for the elements that the compiler removes, in the order of the source.
+ * It does not look inside one: the compiler removes it with its content.
+ *
+ * @param nodes - The nodes of a level of the template
+ * @param rawCode - The source that the ranges of `nodes` are positions in
+ * @returns The parse errors, whose positions cover the whole element
+ */
+function collectIgnoredSideEffectTags(nodes, rawCode) {
+    const errors = [];
+    for (const node of nodes) {
+        if (node.type !== 'VElement') {
+            continue;
+        }
+        if (isIgnoredSideEffectTag(node)) {
+            errors.push({
+                code: 'vue-ignored-side-effect-tag',
+                startOffset: node.range[0],
+                startLine: node.loc.start.line,
+                startCol: node.loc.start.column + 1,
+                endOffset: node.range[1],
+                endLine: node.loc.end.line,
+                endCol: node.loc.end.column + 1,
+                raw: rawCode.slice(node.range[0], node.range[1]),
+            });
+            continue;
+        }
+        errors.push(...collectIgnoredSideEffectTags(node.children, rawCode));
+    }
+    return errors;
+}
 /**
  * Directive resolution is intentionally not performed by this parser:
  * `directivePatterns` declared in `@markuplint/vue-spec` are applied later by
@@ -51,6 +100,9 @@ class VueParser extends Parser {
             // The compiler of Vue makes an element by `setAttribute` unless it can put the whole static tree into
             // an HTML string, which it does only for a name it knows by its exact spelling.
             attrNameRoute: 'dom-api',
+            // `<slot>` is replaced with what is passed to it, not the HTML `slot` element of a shadow tree
+            // @see https://vuejs.org/guide/components/slots.html
+            slotElement: 'framework',
         }, {
             comments: [],
         });
@@ -60,9 +112,12 @@ class VueParser extends Parser {
         if (ast.templateBody?.comments) {
             this.state.comments = ast.templateBody.comments;
         }
+        const children = ast.templateBody?.children ?? [];
+        const parseErrors = collectIgnoredSideEffectTags(children, this.rawCode);
         return {
-            ast: ast.templateBody?.children ?? [],
+            ast: children,
             isFragment: true,
+            ...(parseErrors.length > 0 ? { parseErrors } : {}),
         };
     }
     parseError(error) {
@@ -81,6 +136,17 @@ class VueParser extends Parser {
     // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
     originNode, parentNode, depth) {
         const token = this.sliceFragment(originNode.range[0], originNode.range[1]);
+        // The compiler removes it, so neither its content nor where it is written reaches the DOM:
+        // it is a block of code that no rule reads, and `tokenize` reports it as a parse error.
+        if (originNode.type === 'VElement' && isIgnoredSideEffectTag(originNode)) {
+            return this.visitPsBlock({
+                ...token,
+                depth,
+                parentNode,
+                nodeName: originNode.rawName,
+                isFragment: false,
+            });
+        }
         switch (originNode.type) {
             case 'VText': {
                 return this.visitText({
@@ -108,6 +174,9 @@ class VueParser extends Parser {
                     parentNode,
                     nodeName: originNode.name,
                 }, originNode.children, {
+                    // `<slot>` is replaced with what is passed to it: Vue renders no element for it
+                    // @see https://vuejs.org/guide/components/slots.html
+                    overwriteProps: originNode.name === 'slot' ? { isFragment: true } : undefined,
                     createEndTagToken: () => {
                         if (!originNode.endTag) {
                             return null;
@@ -199,9 +268,9 @@ class VueParser extends Parser {
      * The user's `authoredElementName` replaces all of this, as it replaces any default of a parser.
      *
      * @see https://vuejs.org/guide/essentials/component-basics#using-a-component
-     * @see https://vuejs.org/api/built-in-components.html
+     * @see https://vuejs.org/api/built-in-components.html#built-in-components
      * @see https://vuejs.org/api/built-in-special-elements.html#built-in-special-elements
-     * @see https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parser.ts (`isComponent`)
+     * @see https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parser.ts#isComponent
      */
     detectElementType(nodeName) {
         return super.detectElementType(nodeName, [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/vue-parser",
-	"version": "5.4.0",
+	"version": "5.6.0",
 	"description": "Vue parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -32,11 +32,11 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "5.4.0",
-		"@markuplint/ml-ast": "5.3.0",
-		"@markuplint/parser-utils": "5.4.0",
+		"@markuplint/html-parser": "5.6.0",
+		"@markuplint/ml-ast": "5.6.0",
+		"@markuplint/parser-utils": "5.6.0",
 		"@vue/shared": "^3.5.44",
 		"vue-eslint-parser": "^10.4.1"
 	},
-	"gitHead": "647f6fb5d5743f060678599c97e9c84b58970747"
+	"gitHead": "eade3d7202682e567f3c1b6985478f1d4b5c5481"
 }