Enhance how the Props type is used (#366)

If the Props type isn’t defined, it now falls back to an empty shape instead of any. Also all keys are marked as readonly. As a result, props are no longer represented using the string `Props`, but an inline representation of the shape of the props. Given that the upcoming support for an MDX layout also requires a patched version of `Props`, this new setup is more consistent. Also the `props` description now contains a link to the props page on the MDX website.
mdx-js · Dec 12, 2023 · ee4439a · ee4439a
1 parent 423bf18
commit ee4439a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 48 deletions.
diff --git a/.changeset/tame-moles-type.md b/.changeset/tame-moles-type.md
@@ -0,0 +1,5 @@
+---
+"@mdx-js/language-service": patch
+---
+
+Prettify props types in hover
diff --git a/packages/language-server/test/diagnostics.test.js b/packages/language-server/test/diagnostics.test.js
@@ -38,23 +38,11 @@ test('type errors', async () => {
           version: 1
         },
         message:
-          "Property 'counter' may not exist on type 'Props'. Did you mean 'count'?",
+          "Property 'counter' may not exist on type '{ readonly count: number; }'. Did you mean 'count'?",
         range: {
           start: {line: 14, character: 51},
           end: {line: 14, character: 58}
         },
-        relatedInformation: [
-          {
-            location: {
-              range: {
-                start: {line: 11, character: 4},
-                end: {line: 12, character: 2}
-              },
-              uri: fixtureUri('node16/type-errors.mdx')
-            },
-            message: "'count' is declared here."
-          }
-        ],
         severity: 4,
         source: 'ts'
       },

diff --git a/packages/language-service/lib/language-module.js b/packages/language-service/lib/language-module.js
@@ -20,16 +20,16 @@ const componentStart = `
 /**
  * Render the MDX contents.
  *
- * @param {MDXContentProps} props
- *   The props that have been passed to the MDX component.
+ * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props
+ *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.
  */
 export default function MDXContent(props) {
   return `
 const componentEnd = `
 }
 
 // @ts-ignore
-/** @typedef {Props} MDXContentProps */
+/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */
 `
 
 const fallback = componentStart + componentEnd

diff --git a/packages/language-service/test/language-module.js b/packages/language-service/test/language-module.js
@@ -63,15 +63,15 @@ test('create virtual file w/ mdxjsEsm', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           '  return <></>',
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         )
       },
@@ -137,7 +137,7 @@ test('create virtual file w/ mdxFlowExpression', () => {
         mappings: [
           {
             sourceOffsets: [0],
-            generatedOffsets: [188],
+            generatedOffsets: [275],
             lengths: [9],
             data: {
               completion: true,
@@ -154,15 +154,15 @@ test('create virtual file w/ mdxFlowExpression', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           '  return <>{Math.PI}</>',
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         )
       },
@@ -235,7 +235,7 @@ test('create virtual file w/ mdxJsxFlowElement w/ children', () => {
         mappings: [
           {
             sourceOffsets: [0, 57],
-            generatedOffsets: [188, 206],
+            generatedOffsets: [275, 293],
             lengths: [9, 8],
             data: {
               completion: true,
@@ -252,8 +252,8 @@ test('create virtual file w/ mdxJsxFlowElement w/ children', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           '  return <><div>',
@@ -264,7 +264,7 @@ test('create virtual file w/ mdxJsxFlowElement w/ children', () => {
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         )
       },
@@ -330,7 +330,7 @@ test('create virtual file w/ mdxJsxFlowElement w/o children', () => {
         mappings: [
           {
             sourceOffsets: [0],
-            generatedOffsets: [188],
+            generatedOffsets: [275],
             lengths: [7],
             data: {
               completion: true,
@@ -347,15 +347,15 @@ test('create virtual file w/ mdxJsxFlowElement w/o children', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           '  return <><div /></>',
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         ),
         typescript: {
@@ -424,7 +424,7 @@ test('create virtual file w/ mdxJsxTextElement', () => {
         mappings: [
           {
             sourceOffsets: [2],
-            generatedOffsets: [194],
+            generatedOffsets: [281],
             lengths: [7],
             data: {
               completion: true,
@@ -441,15 +441,15 @@ test('create virtual file w/ mdxJsxTextElement', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           "  return <><>{''}<div /></></>",
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         )
       },
@@ -514,7 +514,7 @@ test('create virtual file w/ mdxTextExpression', () => {
         },
         mappings: [
           {
-            generatedOffsets: [194],
+            generatedOffsets: [281],
             sourceOffsets: [4],
             lengths: [9],
             data: {
@@ -532,15 +532,15 @@ test('create virtual file w/ mdxTextExpression', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           "  return <><>{''}{Math.PI}{''}</></>",
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         )
       },
@@ -606,15 +606,15 @@ test('create virtual file w/ syntax error', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           '  return ',
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         ),
         typescript: {
@@ -669,15 +669,15 @@ test('create virtual file w/ yaml frontmatter', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           '  return <></>',
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         ),
         typescript: {
@@ -772,15 +772,15 @@ test('update virtual file', () => {
           '/**',
           ' * Render the MDX contents.',
           ' *',
-          ' * @param {MDXContentProps} props',
-          ' *   The props that have been passed to the MDX component.',
+          ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+          ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
           ' */',
           'export default function MDXContent(props) {',
           "  return <><>{''}</></>",
           '}',
           '',
           '// @ts-ignore',
-          '/** @typedef {Props} MDXContentProps */',
+          '/** @typedef {0 extends 1 & Props ? {} : Props} MDXContentProps */',
           ''
         ),
         typescript: {