@markuplint/mdx-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)
+* **mdx-parser:** read a tag whose name starts with `$`, `_` or a non-ASCII letter ([4ecfe45](https://github.com/markuplint/markuplint/commit/4ecfe455a83cb4f0c9ef496964d91c817e03e5c1))
+
+### Features
+
+* **mdx-parser:** answer what a component name is by the rule of JSX ([c29c5af](https://github.com/markuplint/markuplint/commit/c29c5af5455d3253bee0915075f09a49a68b2ebe))
+* **mdx-parser:** declare attribute names as case-sensitive ([f5a6f21](https://github.com/markuplint/markuplint/commit/f5a6f214bb229cdb306f0bc49b394b1b32aea283)), closes [#4229](https://github.com/markuplint/markuplint/issues/4229)
+* **parser-utils:** let a parser say how an attribute name gets into the DOM ([abd81e5](https://github.com/markuplint/markuplint/commit/abd81e5d20f4ffeb0ba878e77fd4122c1a803a9f))
+
+
 # [5.2.0](https://github.com/markuplint/markuplint/compare/v5.1.1...v5.2.0) (2026-10-13)
 
 ### Bug Fixes

package/lib/parser.d.ts

@@ -66,12 +66,32 @@ declare class MDXParser extends MarkdownAwareParser {
         __rightText?: string;
     });
     /**
-     * MDX components use uppercase or dot notation following React's convention.
+     * An MDX element is `authored` when its name is a component's (`isComponentName` below: a name that
+     * does not start with a lowercase ASCII letter, or a member expression), a web component when it
+     * is a custom element name, and `html` otherwise.
      *
      * @param nodeName - The element name to classify.
-     * @returns The element type (`'html'` or `'authored'`).
+     * @returns The element type (`'html'`, `'web-component'` or `'authored'`).
      */
     detectElementType(nodeName: string): import("@markuplint/ml-ast").ElementType;
+    /**
+     * An MDX element name starts with an ECMAScript `IdentifierStart` as a JSX one does (see
+     * `JSXParser#isTagNameStart` in `@markuplint/jsx-parser`): keep the two in step.
+     *
+     * @param char - The character that follows `<`
+     * @returns Whether it starts a tag name
+     */
+    isTagNameStart(char: string): boolean;
+    /**
+     * An MDX component is a JSX element, so a name is a component unless it starts with a lowercase
+     * ASCII letter or has a `-`; a `.` makes it a member expression. The rule is the one of
+     * `@markuplint/jsx-parser` (see `JSXParser#isComponentName` there for the grounds), which this
+     * package does not depend on: keep the two in step.
+     *
+     * @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: MDXParser;
 export {};

package/lib/parser.js

@@ -1,9 +1,15 @@
 import { MarkdownAwareParser } from '@markuplint/markdown-parser';
+import { isPotentialCustomElementName } from '@markuplint/parser-utils';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkGfm from 'remark-gfm';
 import remarkMdx from 'remark-mdx';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
+/**
+ * ECMAScript `IdentifierStart`, as `JSXIdentifier` starts (https://facebook.github.io/jsx/#prod-JSXIdentifier).
+ * `@markuplint/jsx-parser` has the same constant: keep the two in step.
+ */
+const JSX_IDENTIFIER_START = /^[\p{ID_Start}$_]/u;
 /**
  * Parser for MDX files that maps JSX elements to markuplint's AST.
  *
@@ -30,6 +36,8 @@ class MDXParser extends MarkdownAwareParser {
             endTagType: 'xml',
             booleanish: true,
             tagNameCaseSensitive: true,
+            attrNameCaseSensitive: true,
+            attrNameRoute: 'dom-api',
         });
     }
     /**
@@ -158,13 +166,40 @@ class MDXParser extends MarkdownAwareParser {
         return attr;
     }
     /**
-     * MDX components use uppercase or dot notation following React's convention.
+     * An MDX element is `authored` when its name is a component's (`isComponentName` below: a name that
+     * does not start with a lowercase ASCII letter, or a member expression), a web component when it
+     * is a custom element name, and `html` otherwise.
      *
      * @param nodeName - The element name to classify.
-     * @returns The element type (`'html'` or `'authored'`).
+     * @returns The element type (`'html'`, `'web-component'` or `'authored'`).
      */
     detectElementType(nodeName) {
-        return super.detectElementType(nodeName, /^[A-Z]|\./);
+        return super.detectElementType(nodeName, (name) => this.isComponentName(name));
+    }
+    /**
+     * An MDX element name starts with an ECMAScript `IdentifierStart` as a JSX one does (see
+     * `JSXParser#isTagNameStart` in `@markuplint/jsx-parser`): keep the two in step.
+     *
+     * @param char - The character that follows `<`
+     * @returns Whether it starts a tag name
+     */
+    isTagNameStart(char) {
+        return JSX_IDENTIFIER_START.test(char);
+    }
+    /**
+     * An MDX component is a JSX element, so a name is a component unless it starts with a lowercase
+     * ASCII letter or has a `-`; a `.` makes it a member expression. The rule is the one of
+     * `@markuplint/jsx-parser` (see `JSXParser#isComponentName` there for the grounds), which this
+     * package does not depend on: keep the two in step.
+     *
+     * @param name - A tag name as written, case kept
+     * @returns Whether the name is a component's
+     */
+    isComponentName(name) {
+        if (isPotentialCustomElementName(name)) {
+            return false;
+        }
+        return name.includes('.') || (JSX_IDENTIFIER_START.test(name) && !/^[a-z]/.test(name) && !name.includes('-'));
     }
     #visitJsxElement(
     // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/mdx-parser",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "MDX parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -15,8 +15,8 @@
 	"type": "module",
 	"exports": {
 		".": {
-			"import": "./lib/index.js",
-			"types": "./lib/index.d.ts"
+			"types": "./lib/index.d.ts",
+			"default": "./lib/index.js"
 		}
 	},
 	"publishConfig": {
@@ -28,9 +28,9 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/markdown-parser": "5.2.0",
-		"@markuplint/ml-ast": "5.1.1",
-		"@markuplint/parser-utils": "5.2.0",
+		"@markuplint/markdown-parser": "5.3.0",
+		"@markuplint/ml-ast": "5.3.0",
+		"@markuplint/parser-utils": "5.3.0",
 		"remark-frontmatter": "^5.0.0",
 		"remark-gfm": "^4.0.1",
 		"remark-mdx": "^3.1.1",
@@ -40,5 +40,5 @@
 	"devDependencies": {
 		"@types/mdast": "4.0.4"
 	},
-	"gitHead": "d8b2feab77c9c862513615bea6b80d2817431878"
+	"gitHead": "f587cf0206c8426e57369a48d6d5fb22306eafde"
 }

package/src/component-name.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from 'vitest';
+
+import { parser } from './parser.js';
+
+// An MDX component is a JSX element: the same rule as `@markuplint/jsx-parser`, which names it a
+// component unless it starts with a lowercase ASCII letter (a `-` makes it an intrinsic element).
+describe('isComponentName', () => {
+	test.each(['Foo', 'RouterLink', 'Tabs.Root', 'ns.Item', 'motion.div', '_Layout', '$Ui', 'Ärger', 'Éa'])(
+		'"%s" is a component name',
+		name => {
+			expect(parser.isComponentName(name)).toBe(true);
+		},
+	);
+
+	test.each([
+		'div',
+		'svg',
+		'foreignObject',
+		'x-foo',
+		'my-widget.v2',
+		'annotation-xml',
+		'Foo-bar',
+		'#jsx-fragment',
+		'',
+	])('"%s" is not a component name', name => {
+		expect(parser.isComponentName(name)).toBe(false);
+	});
+});