feat(language-service): Make MDX nodes typed with JSX.IntrinsicElements

.changeset/shaggy-memes-post.md

@@ -0,0 +1,8 @@
+---
+'@mdx-js/language-service': patch
+'@mdx-js/language-server': patch
+'@mdx-js/typescript-plugin': patch
+'vscode-mdx': patch
+---
+
+Make Markdown syntax nodes typed with `JSX.IntrinsicElements`.

packages/language-service/lib/virtual-code.js

@@ -225,6 +225,52 @@ function padOffsets(mapping, padding) {
   }
 }
 
+/** @type {Partial<Record<Nodes["type"], string>>} */
+const mdastElementNodeNameMap = {
+  blockquote: 'blockquote',
+  break: 'br',
+  delete: 'del',
+  emphasis: 'em',
+  html: 'html',
+  image: 'img',
+  imageReference: 'img',
+  inlineCode: 'code',
+  link: 'a',
+  linkReference: 'a',
+  listItem: 'li',
+  paragraph: 'p',
+  strong: 'strong',
+  table: 'table',
+  tableCell: 'td',
+  tableRow: 'tr',
+  thematicBreak: 'hr'
+}
+/**
+ * Get the JSX node names for a given AST node.
+ * @param {Nodes} node
+ * @returns {string[]}
+ */
+function getJsxNodeNameForMdast(node) {
+  if (node.type === 'code') {
+    return ['pre', 'code']
+  }
+
+  if (node.type === 'heading') {
+    return ['h' + node.depth]
+  }
+
+  if (node.type === 'list') {
+    return node.ordered ? ['ol'] : ['ul']
+  }
+
+  if (mdastElementNodeNameMap[node.type]) {
+    return [/** @type string */ (mdastElementNodeNameMap[node.type])]
+  }
+
+  // JSX Fragment
+  return ['']
+}
+
 /**
  * @param {string} mdx
  * @param {Root} ast
@@ -739,7 +785,11 @@ function getEmbeddedCodes(
         }
 
         default: {
-          jsx += jsxIndent + '<>'
+          jsx +=
+            jsxIndent +
+            getJsxNodeNameForMdast(node)
+              .map((name) => `<${name}>`)
+              .join('')
           break
         }
       }
@@ -789,7 +839,12 @@ function getEmbeddedCodes(
         }
 
         default: {
-          jsx += jsxIndent + '</>'
+          jsx +=
+            jsxIndent +
+            getJsxNodeNameForMdast(node)
+              .reverse()
+              .map((name) => `</${name}>`)
+              .join('')
           break
         }
       }

packages/language-service/test/language-plugin.js

@@ -2042,7 +2042,7 @@ test('create virtual code w/ prefixed JSX expressions in attributes', () => {
         },
         {
           sourceOffsets: [28, 62, 103, 149, 166, 214],
-          generatedOffsets: [870, 916, 960, 1018, 1047, 1111],
+          generatedOffsets: [870, 916, 960, 1018, 1047, 1113],
           lengths: [34, 39, 46, 17, 35, 6],
           data: {
             completion: true,
@@ -2054,7 +2054,7 @@ test('create virtual code w/ prefixed JSX expressions in attributes', () => {
           }
         },
         {
-          generatedOffsets: [1551, 1574],
+          generatedOffsets: [1553, 1576],
           lengths: [8, 8],
           sourceOffsets: [62, 149],
           data: {
@@ -2099,9 +2099,9 @@ test('create virtual code w/ prefixed JSX expressions in attributes', () => {
         '  return <>',
         '    <div local={<Local />} injected={<_components.Injected />} string="string" boolean />',
         '    <div local={<Local>{null}</Local>} injected={<_components.Injected>{null}</_components.Injected>} string="string" boolean>',
-        '    <>',
+        '    <p>',
         "    {''}",
-        '    </>',
+        '    </p>',
         '    </div>',
         '  </>',
         '}',
@@ -2224,7 +2224,7 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => {
         },
         {
           sourceOffsets: [28, 87, 94, 95, 158, 160, 170, 231],
-          generatedOffsets: [870, 904, 915, 928, 966, 980, 994, 1030],
+          generatedOffsets: [870, 906, 917, 930, 970, 984, 998, 1036],
           lengths: [5, 6, 1, 9, 2, 9, 7, 8],
           data: {
             completion: true,
@@ -2244,7 +2244,7 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => {
             structure: true,
             verification: true
           },
-          generatedOffsets: [1472],
+          generatedOffsets: [1478],
           lengths: [8],
           sourceOffsets: [95]
         }
@@ -2280,19 +2280,19 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => {
         '  _components',
         '  return <>',
         '    <div>',
-        '    <>',
+        '    <p>',
         "    {''}",
-        '    </>',
+        '    </p>',
         '    </div>',
         '    <_components.Injected>',
-        '    <>',
+        '    <p>',
         "    {''}",
-        '    </>',
+        '    </p>',
         '    </_components.Injected>',
         '    <Local>',
-        '    <>',
+        '    <p>',
         "    {''}",
-        '    </>',
+        '    </p>',
         '    </Local>',
         '  </>',
         '}',
@@ -2405,7 +2405,7 @@ test('create virtual code w/ mdxJsxFlowElement w/ blockquote child', () => {
         },
         {
           sourceOffsets: [0, 8, 15, 21],
-          generatedOffsets: [806, 831, 849, 868],
+          generatedOffsets: [806, 851, 870, 889],
           lengths: [5, 6, 5, 6],
           data: {
             completion: true,
@@ -2444,14 +2444,14 @@ test('create virtual code w/ mdxJsxFlowElement w/ blockquote child', () => {
         '  _components',
         '  return <>',
         '    <div>',
-        '    <>',
-        '    </>',
+        '    <blockquote>',
+        '    </blockquote>',
         '    </div>',
-        '    <>',
+        '    <p>',
         '    <div>',
         "    {''}",
         '    </div>',
-        '    </>',
+        '    </p>',
         '  </>',
         '}',
         '',
@@ -2706,7 +2706,7 @@ test('create virtual code w/ mdxJsxTextElement', () => {
         },
         {
           sourceOffsets: [30, 41, 42, 56],
-          generatedOffsets: [886, 907, 920, 945],
+          generatedOffsets: [887, 908, 921, 946],
           lengths: [7, 1, 11, 9],
           data: {
             completion: true,
@@ -2718,7 +2718,7 @@ test('create virtual code w/ mdxJsxTextElement', () => {
           }
         },
         {
-          generatedOffsets: [1396],
+          generatedOffsets: [1398],
           lengths: [8],
           sourceOffsets: [42],
           data: {
@@ -2761,14 +2761,14 @@ test('create virtual code w/ mdxJsxTextElement', () => {
         '  }',
         '  _components',
         '  return <>',
-        '    <>',
+        '    <p>',
         "    {''}",
         '    <div />',
         "    {''}",
         '    <_components.Injected />',
         "    {''}",
         '    <Local />',
-        '    </>',
+        '    </p>',
         '  </>',
         '}',
         '',
@@ -2867,7 +2867,7 @@ test('create virtual code w/ mdxTextExpression', () => {
           }
         },
         {
-          generatedOffsets: [822],
+          generatedOffsets: [823],
           sourceOffsets: [4],
           lengths: [9],
           data: {
@@ -2906,11 +2906,11 @@ test('create virtual code w/ mdxTextExpression', () => {
         '  }',
         '  _components',
         '  return <>',
-        '    <>',
+        '    <p>',
         "    {''}",
         '    {Math.PI}',
         "    {''}",
-        '    </>',
+        '    </p>',
         '  </>',
         '}',
         '',
@@ -3003,7 +3003,7 @@ test('create virtual code w/ async mdxTextExpression', () => {
           }
         },
         {
-          generatedOffsets: [828],
+          generatedOffsets: [829],
           sourceOffsets: [4],
           lengths: [32],
           data: {
@@ -3042,11 +3042,11 @@ test('create virtual code w/ async mdxTextExpression', () => {
         '  }',
         '  _components',
         '  return <>',
-        '    <>',
+        '    <p>',
         "    {''}",
         '    {await Promise.resolve(Math.PI)}',
         "    {''}",
-        '    </>',
+        '    </p>',
         '  </>',
         '}',
         '',
@@ -3476,9 +3476,9 @@ test('create virtual code w/ dedented markdown content', () => {
         '  }',
         '  _components',
         '  return <>',
-        '    <>',
+        '    <p>',
         "    {''}",
-        '    </>',
+        '    </p>',
         '  </>',
         '}',
         '',
@@ -3830,9 +3830,9 @@ test('update virtual code', () => {
         '  }',
         '  _components',
         '  return <>',
-        '    <>',
+        '    <p>',
         "    {''}",
-        '    </>',
+        '    </p>',
         '  </>',
         '}',
         '',
@@ -5242,9 +5242,9 @@ test('rehype-mdx-title matching rank', () => {
         '  }',
         '  _components',
         '  return <>',
-        '    <>',
+        '    <h1>',
         "    {''}",
-        '    </>',
+        '    </h1>',
         '  </>',
         '}',
         '',