@markuplint/vue-parser 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.3.0](https://github.com/markuplint/markuplint/compare/v5.2.0...v5.3.0) (2026-10-21)
+
+### Bug Fixes
+
+* make published packages loadable from require() and put types first ([723106f](https://github.com/markuplint/markuplint/commit/723106f51aac4e60dc02db2c1a894617368b0253)), closes [#4198](https://github.com/markuplint/markuplint/issues/4198)
+* **vue-parser:** do not report a root that is neither a component nor an element ([325825f](https://github.com/markuplint/markuplint/commit/325825ffa5a3e7d23f4b38fc1d5d80cf9fbeeacc))
+* **vue-parser:** take every tag that Vue resolves to a component for one ([0e79724](https://github.com/markuplint/markuplint/commit/0e79724b292344c0cf2dc0ca82d173d0e0add462))
+
+### Features
+
+* **parser-utils:** let a parser say how an attribute name gets into the DOM ([abd81e5](https://github.com/markuplint/markuplint/commit/abd81e5d20f4ffeb0ba878e77fd4122c1a803a9f))
+* **vue-parser:** report the lang of the script setup block from the component scanner ([45a8273](https://github.com/markuplint/markuplint/commit/45a827388329cc4beb8c245e23c500d267648412))
+
+
 # [5.2.0](https://github.com/markuplint/markuplint/compare/v5.1.1...v5.2.0) (2026-10-13)
 
 ### Bug Fixes

package/lib/component-scanner.d.ts

@@ -58,6 +58,12 @@ export interface ComponentScanSlotWrapper {
 export interface ComponentScanScriptSource {
     readonly content: string;
     readonly offset: number;
+    /**
+     * The `lang` attribute of the block as written (`tsx`, `ts`). The language a block is written in is
+     * the block's own declaration (https://vuejs.org/api/sfc-spec.html#pre-processors), which decides
+     * whether the script holds JSX. Absent when the block has none.
+     */
+    readonly lang?: string;
 }
 /**
  * Component scanner for Vue SFC files.

package/lib/component-scanner.js

@@ -5,6 +5,14 @@ function extractComponentInfo(doc) {
     if (!root) {
         return null;
     }
+    // The parser says the root is authored, yet its name is not the one of a component
+    // (`component`, `slot` of Vue): it renders what it is given, so there is no element
+    // to pretend to be. `pretenders` would otherwise emit that name as the target, and
+    // nothing tells it from the name of an element. What a component's name is, is the
+    // parser's rule (`Parser#isComponentName`).
+    if (root.elementType === 'authored' && !parser.isComponentName(root.nodeName)) {
+        return null;
+    }
     const spreads = extractSpreads(root);
     return {
         rootElement: root.nodeName,
@@ -255,11 +263,29 @@ function extractVueScriptSetup(source) {
     if (!endMatch) {
         return null;
     }
+    const lang = langOf(startTag);
     return {
         content: remaining.slice(0, endMatch.index),
         offset: contentStart,
+        ...(lang ? { lang } : {}),
     };
 }
+/**
+ * The value of the `lang` attribute of a start tag. The attributes are read one by one, so that
+ * ` lang='tsx'` inside the quoted value of another attribute is not one.
+ *
+ * `@markuplint/pretenders` reads the `lang` of the other `<script>` block with the same function
+ * (`extractVueScript`), which it cannot import from here (a parser package is loaded by it
+ * dynamically, never imported), so a change to one is a change to the other.
+ */
+function langOf(startTag) {
+    for (const [, name, double, single, bare] of startTag.matchAll(/\s([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
+        if (name?.toLowerCase() === 'lang') {
+            return double ?? single ?? bare;
+        }
+    }
+    return undefined;
+}
 /**
  * Component scanner for Vue SFC files.
  *

package/lib/parser.d.ts

@@ -47,11 +47,65 @@ declare class VueParser extends Parser<ASTNode, State> {
      * > Vue SFC is a compiled format so we are able to use case-sensitive tag names in it.
      * > We are also able to use `/>` to close a tag.
      *
+     * A tag that is not a native one is a component to Vue, however it is written: Vue resolves
+     * the tag `T` to a component registered as `T`, `camelize(T)` or `capitalize(camelize(T))`,
+     * so `<fooBar>` and `<foo-bar>` are the component `FooBar`, and `<foobar>` is not. Here
+     * a name is a component, `authored`, when it
+     *
+     * - is a built-in component, as written (`Transition`) or in kebab-case (`transition-group`),
+     * - is a special element that renders what it is given (`component`, `slot`), which is `authored`
+     *   but is no component's name for {@link isComponentName},
+     * - has a capital initial (`FooBar`), a capital letter after a lowercase letter or a digit
+     *   (`fooBar`), or a `.` (`ui.Item`, a member of a namespace import of `<script setup>`).
+     *
+     * `foo-bar` is a `web-component`: the name of a custom element is also the kebab-case of a component,
+     * and markuplint does not know `compilerOptions.isCustomElement` of the project. Like the others it is
+     * matched by `FooBar` (see `MLParser.componentNameVariants`).
+     *
+     * A camelCase name of SVG (`clipPath`, `foreignObject`) is an element: Vue's `isNativeTag` takes
+     * it, and `isSVGElement` is case-sensitive.
+     *
+     * 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-special-elements.html#built-in-special-elements
+     * @see https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parser.ts (`isComponent`)
      */
     detectElementType(nodeName: string): import("@markuplint/ml-ast").ElementType;
+    /**
+     * Whether Vue takes a tag name for a native element: the lists of the HTML, SVG and MathML elements
+     * of `@vue/shared` that `isNativeTag` of `@vue/compiler-dom` is made of. Vue resolves any other tag to a
+     * component (`<card>` is the component `Card`), unless `compilerOptions.isCustomElement` of the project
+     * says it is a custom element, which markuplint does not know.
+     *
+     * The lists are Vue's own and the names are case-sensitive, as Vue's: an obsolete element that they
+     * do not hold (`marquee`) is no native tag to Vue, though markuplint has a specification for it.
+     *
+     * It is `MLParser#isNativeTag`, so what Vue resolves is what the document takes for native. The type
+     * selector (`Marquee` stands for `<marquee>`) reads it, and so does the guard that keeps a pretender off
+     * a native element, as `@markuplint/pretenders` does. The rules keyed on the specification still see
+     * `<marquee>`.
+     *
+     * It is not the rule of {@link isComponentName}, which tells by the form of a name alone whether it is
+     * a component's, for the target of a pretender and the root a scanner reads: `as: 'marquee'` is meant
+     * as the element there.
+     *
+     * @param name - A tag name as written, case kept
+     * @returns Whether the name is a native tag
+     */
+    isNativeTag(name: string): boolean;
+    /**
+     * A name that Vue takes for a component (see {@link detectElementType}) and that names no special
+     * element: a built-in component as written or in kebab-case (`Transition`, `transition-group`), a capital
+     * initial (`FooBar`), a capital letter after a lowercase letter or a digit (`fooBar`), or a `.`
+     * (`ui.Item`). `foo-bar` is not one, as it may be a custom element, nor are `component` and `slot`, which render
+     * what they are given: they have no element to pretend to be.
+     *
+     * @param name - A tag name as written, case kept
+     * @returns Whether the name is a component's
+     */
+    isComponentName(name: string): boolean;
 }
 export declare const parser: VueParser;
 export {};

package/lib/parser.js

@@ -1,5 +1,24 @@
-import { ParserError, Parser } from '@markuplint/parser-utils';
+import { ParserError, Parser, isPotentialCustomElementName, isSVGElement } from '@markuplint/parser-utils';
+import { isHTMLTag, isMathMLTag, isSVGTag } from '@vue/shared';
 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
+ */
+const BUILT_IN_COMPONENTS = [
+    'Transition',
+    'transition',
+    'TransitionGroup',
+    'transition-group',
+    'KeepAlive',
+    'keep-alive',
+    'Teleport',
+    'teleport',
+    'Suspense',
+    'suspense',
+];
 /**
  * Directive resolution is intentionally not performed by this parser:
  * `directivePatterns` declared in `@markuplint/vue-spec` are applied later by
@@ -27,6 +46,11 @@ class VueParser extends Parser {
             // Vue SFC is a compiled format that uses explicit XML-style
             // closing tags (including `/>`), not HTML void-element rules.
             endTagType: 'xml',
+            // Vue resolves `<FooBar>`, `<fooBar>` and `<foo-bar>` to the same component.
+            componentNameVariants: true,
+            // 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',
         }, {
             comments: [],
         });
@@ -154,24 +178,90 @@ class VueParser extends Parser {
      * > Vue SFC is a compiled format so we are able to use case-sensitive tag names in it.
      * > We are also able to use `/>` to close a tag.
      *
+     * A tag that is not a native one is a component to Vue, however it is written: Vue resolves
+     * the tag `T` to a component registered as `T`, `camelize(T)` or `capitalize(camelize(T))`,
+     * so `<fooBar>` and `<foo-bar>` are the component `FooBar`, and `<foobar>` is not. Here
+     * a name is a component, `authored`, when it
+     *
+     * - is a built-in component, as written (`Transition`) or in kebab-case (`transition-group`),
+     * - is a special element that renders what it is given (`component`, `slot`), which is `authored`
+     *   but is no component's name for {@link isComponentName},
+     * - has a capital initial (`FooBar`), a capital letter after a lowercase letter or a digit
+     *   (`fooBar`), or a `.` (`ui.Item`, a member of a namespace import of `<script setup>`).
+     *
+     * `foo-bar` is a `web-component`: the name of a custom element is also the kebab-case of a component,
+     * and markuplint does not know `compilerOptions.isCustomElement` of the project. Like the others it is
+     * matched by `FooBar` (see `MLParser.componentNameVariants`).
+     *
+     * A camelCase name of SVG (`clipPath`, `foreignObject`) is an element: Vue's `isNativeTag` takes
+     * it, and `isSVGElement` is case-sensitive.
+     *
+     * 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-special-elements.html#built-in-special-elements
+     * @see https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parser.ts (`isComponent`)
      */
     detectElementType(nodeName) {
         return super.detectElementType(nodeName, [
             // Built-in components
-            'Transition',
-            'TransitionGroup',
-            'KeepAlive',
-            'Teleport',
-            'Suspense',
+            ...BUILT_IN_COMPONENTS,
             // Special elements
             'component',
             'slot',
             // Backward compatibility
             /^[A-Z]/,
+            // A member of a namespace import
+            /\./,
+            // camelCase
+            name => /[a-z\d][A-Z]/.test(name) && !isSVGElement(name),
         ]);
     }
+    /**
+     * Whether Vue takes a tag name for a native element: the lists of the HTML, SVG and MathML elements
+     * of `@vue/shared` that `isNativeTag` of `@vue/compiler-dom` is made of. Vue resolves any other tag to a
+     * component (`<card>` is the component `Card`), unless `compilerOptions.isCustomElement` of the project
+     * says it is a custom element, which markuplint does not know.
+     *
+     * The lists are Vue's own and the names are case-sensitive, as Vue's: an obsolete element that they
+     * do not hold (`marquee`) is no native tag to Vue, though markuplint has a specification for it.
+     *
+     * It is `MLParser#isNativeTag`, so what Vue resolves is what the document takes for native. The type
+     * selector (`Marquee` stands for `<marquee>`) reads it, and so does the guard that keeps a pretender off
+     * a native element, as `@markuplint/pretenders` does. The rules keyed on the specification still see
+     * `<marquee>`.
+     *
+     * It is not the rule of {@link isComponentName}, which tells by the form of a name alone whether it is
+     * a component's, for the target of a pretender and the root a scanner reads: `as: 'marquee'` is meant
+     * as the element there.
+     *
+     * @param name - A tag name as written, case kept
+     * @returns Whether the name is a native tag
+     */
+    isNativeTag(name) {
+        return isHTMLTag(name) || isSVGTag(name) || isMathMLTag(name);
+    }
+    /**
+     * A name that Vue takes for a component (see {@link detectElementType}) and that names no special
+     * element: a built-in component as written or in kebab-case (`Transition`, `transition-group`), a capital
+     * initial (`FooBar`), a capital letter after a lowercase letter or a digit (`fooBar`), or a `.`
+     * (`ui.Item`). `foo-bar` is not one, as it may be a custom element, nor are `component` and `slot`, which render
+     * what they are given: they have no element to pretend to be.
+     *
+     * @param name - A tag name as written, case kept
+     * @returns Whether the name is a component's
+     */
+    isComponentName(name) {
+        // `<transition>` is `<Transition>`, and a tag with a `.` is resolved by the name before it (`my-widget.v2` by
+        // `my-widget`): a component by Vue, whatever a custom element name would say of it
+        if (BUILT_IN_COMPONENTS.includes(name) || name.includes('.')) {
+            return true;
+        }
+        if (isPotentialCustomElementName(name)) {
+            return false;
+        }
+        return /^[A-Z]/.test(name) || (/[a-z\d][A-Z]/.test(name) && !isSVGElement(name));
+    }
 }
 export const parser = new VueParser();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/vue-parser",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "Vue parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -15,12 +15,12 @@
 	"type": "module",
 	"exports": {
 		".": {
-			"import": "./lib/index.js",
-			"types": "./lib/index.d.ts"
+			"types": "./lib/index.d.ts",
+			"default": "./lib/index.js"
 		},
 		"./component-scanner": {
-			"import": "./lib/component-scanner.js",
-			"types": "./lib/component-scanner.d.ts"
+			"types": "./lib/component-scanner.d.ts",
+			"default": "./lib/component-scanner.js"
 		}
 	},
 	"publishConfig": {
@@ -32,10 +32,11 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "5.2.0",
-		"@markuplint/ml-ast": "5.1.1",
-		"@markuplint/parser-utils": "5.2.0",
+		"@markuplint/html-parser": "5.3.0",
+		"@markuplint/ml-ast": "5.3.0",
+		"@markuplint/parser-utils": "5.3.0",
+		"@vue/shared": "^3.5.44",
 		"vue-eslint-parser": "^10.4.1"
 	},
-	"gitHead": "d8b2feab77c9c862513615bea6b80d2817431878"
+	"gitHead": "f587cf0206c8426e57369a48d6d5fb22306eafde"
 }