Add support for MDX@2 comment expressions

Related-to: remarkjs/remark-message-control#9.

Author: wooorm

index.js

@@ -1,24 +1,28 @@
 /**
  * @typedef {string|number|boolean} MarkerParameterValue
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('mdast').Content} Content
+ * @typedef {import('mdast').HTML} HTML
+ * @typedef {import('mdast-util-mdx-expression').MDXFlowExpression} MDXFlowExpression
+ * @typedef {import('mdast-util-mdx-expression').MDXTextExpression} MDXTextExpression
+ * @typedef {Root|Content} Node
  * @typedef {Object.<string, MarkerParameterValue>} MarkerParameters
  *
- * @typedef HtmlNode
- * @property {'html'} type
- * @property {string} value
- *
- * @typedef CommentNode
+ * @typedef Mdx1CommentNode
  * @property {'comment'} type
  * @property {string} value
  *
  * @typedef Marker
  * @property {string} name
  * @property {string} attributes
  * @property {MarkerParameters|null} parameters
- * @property {HtmlNode|CommentNode} node
+ * @property {HTML|Mdx1CommentNode|MDXFlowExpression|MDXTextExpression} node
  */
 
 const commentExpression = /\s*([a-zA-Z\d-]+)(\s+([\s\S]*))?\s*/
-
+const esCommentExpression = new RegExp(
+  '(\\s*\\/\\*' + commentExpression.source + '\\*\\/\\s*)'
+)
 const markerExpression = new RegExp(
   '(\\s*<!--' + commentExpression.source + '-->\\s*)'
 )
@@ -29,19 +33,39 @@ const markerExpression = new RegExp(
  * @returns {Marker|null}
  */
 export function commentMarker(value) {
-  if (applicable(value)) {
-    const match = value.value.match(
-      value.type === 'comment' ? commentExpression : markerExpression
-    )
+  if (
+    isNode(value) &&
+    (value.type === 'html' ||
+      // @ts-expect-error: MDX@1
+      value.type === 'comment' ||
+      value.type === 'mdxFlowExpression' ||
+      value.type === 'mdxTextExpression')
+  ) {
+    let offset = 2
+    /** @type {RegExpMatchArray|null|undefined} */
+    let match
+
+    // @ts-expect-error: MDX@1
+    if (value.type === 'comment') {
+      // @ts-expect-error: MDX@1
+      match = value.value.match(commentExpression)
+      offset = 1
+    } else if (value.type === 'html') {
+      match = value.value.match(markerExpression)
+    } else if (
+      value.type === 'mdxFlowExpression' ||
+      value.type === 'mdxTextExpression'
+    ) {
+      match = value.value.match(esCommentExpression)
+    }
 
     if (match && match[0].length === value.value.length) {
-      const offset = value.type === 'comment' ? 1 : 2
       const parameters = parseParameters(match[offset + 1] || '')
 
       if (parameters) {
         return {
           name: match[offset],
-          attributes: match[offset + 2] || '',
+          attributes: (match[offset + 2] || '').trim(),
           parameters,
           node: value
         }
@@ -99,14 +123,8 @@ function parseParameters(value) {
 
 /**
  * @param {unknown} value
- * @returns {value is HtmlNode | CommentNode}
+ * @returns {value is Node}
  */
-function applicable(value) {
-  return Boolean(
-    value &&
-      typeof value === 'object' &&
-      'type' in value &&
-      // @ts-expect-error hush
-      (value.type === 'html' || value.type === 'comment')
-  )
+function isNode(value) {
+  return Boolean(value && typeof value === 'object' && 'type' in value)
 }

package.json

@@ -32,7 +32,7 @@
     "index.js"
   ],
   "devDependencies": {
-    "@types/mdast": "^3.0.0",
+    "@types/mdast": "^3.0.10",
     "@types/tape": "^4.0.0",
     "c8": "^7.0.0",
     "prettier": "^2.0.0",
@@ -61,7 +61,10 @@
     "trailingComma": "none"
   },
   "xo": {
-    "prettier": true
+    "prettier": true,
+    "rules": {
+      "unicorn/prefer-switch": "off"
+    }
   },
   "remarkConfig": {
     "plugins": [
@@ -72,5 +75,8 @@
     "atLeast": 100,
     "detail": true,
     "strict": true
+  },
+  "dependencies": {
+    "mdast-util-mdx-expression": "^1.1.0"
   }
 }

test.js

@@ -2,6 +2,8 @@
  * @typedef {import('mdast').Literal} Literal
  * @typedef {import('mdast').Paragraph} Paragraph
  * @typedef {import('mdast').HTML} HTML
+ * @typedef {import('mdast-util-mdx-expression').MDXFlowExpression} MDXFlowExpression
+ * @typedef {import('mdast-util-mdx-expression').MDXTextExpression} MDXTextExpression
  */
 
 import test from 'tape'
@@ -280,3 +282,32 @@ test('comment node', (t) => {
 
   t.end()
 })
+
+test('MDX@2 expressions', (t) => {
+  /** @type {MDXFlowExpression|MDXTextExpression} */
+  let node = {
+    type: 'mdxFlowExpression',
+    value: '/* lint disable heading-style */'
+  }
+
+  t.deepEqual(
+    commentMarker(node),
+    {
+      name: 'lint',
+      attributes: 'disable heading-style',
+      parameters: {disable: true, 'heading-style': true},
+      node
+    },
+    'should work for comments'
+  )
+
+  node = {type: 'mdxTextExpression', value: '/* lint enable */'}
+
+  t.deepEqual(
+    commentMarker(node),
+    {name: 'lint', attributes: 'enable', parameters: {enable: true}, node},
+    'should work for comments'
+  )
+
+  t.end()
+})