Handle components defined in a local scope (#488)

This handles components used in a local scope the same as components
defined in the global scope. This means local components used in JSX no
longer yield errors in the editor. However, autocompletions are not yet
supported.

Closes #467

.changeset/curvy-cups-guess.md

@@ -0,0 +1,5 @@
+---
+'@mdx-js/language-service': patch
+---
+
+Handle components defined in a local scope

packages/language-service/lib/jsx-utils.js

@@ -1,7 +1,21 @@
 /**
+ * @import {JSXIdentifier, Node} from 'estree-jsx'
  * @import {Scope} from 'estree-util-scope'
  */
 
+/**
+ * @param {string | null} name
+ * @returns {name is Capitalize<string>}
+ */
+function isJsxReference(name) {
+  if (!name) {
+    return false
+  }
+
+  const char = name.charAt(0)
+  return char === char.toUpperCase()
+}
+
 /**
  * Check if a name belongs to a JSX component that can be injected.
  *
@@ -16,14 +30,33 @@
  *   Whether or not the given name is that of an injectable JSX component.
  */
 export function isInjectableComponent(name, scope) {
-  if (!name) {
+  if (!isJsxReference(name)) {
     return false
   }
 
-  const char = name.charAt(0)
-  if (char !== char.toUpperCase()) {
+  return !scope.defined.includes(name)
+}
+
+/**
+ * @param {JSXIdentifier} node
+ * @param {Map<Node, Scope | undefined>} scopes
+ * @param {Map<Node, Node | null>} parents
+ */
+export function isInjectableEstree(node, scopes, parents) {
+  if (!isJsxReference(node.name)) {
     return false
   }
 
-  return !scope.defined.includes(name)
+  /** @type {Node | null | undefined} */
+  let current = node
+  while (current) {
+    const scope = scopes.get(current)
+    if (scope?.defined.includes(node.name)) {
+      return false
+    }
+
+    current = parents.get(current)
+  }
+
+  return true
 }

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

@@ -1,6 +1,6 @@
 /**
  * @import {CodeMapping, VirtualCode} from '@volar/language-service'
- * @import {ExportDefaultDeclaration, JSXClosingElement, JSXOpeningElement, Program} from 'estree-jsx'
+ * @import {ExportDefaultDeclaration, JSXClosingElement, JSXOpeningElement, Node, Program} from 'estree-jsx'
  * @import {Scope} from 'estree-util-scope'
  * @import {Nodes, Root} from 'mdast'
  * @import {MdxjsEsm} from 'mdast-util-mdxjs-esm'
@@ -13,7 +13,7 @@ import {createVisitors} from 'estree-util-scope'
 import {walk} from 'estree-walker'
 import {getNodeEndOffset, getNodeStartOffset} from './mdast-utils.js'
 import {ScriptSnapshot} from './script-snapshot.js'
-import {isInjectableComponent} from './jsx-utils.js'
+import {isInjectableComponent, isInjectableEstree} from './jsx-utils.js'
 
 /**
  * Render the content that should be prefixed to the embedded JavaScript file.
@@ -458,6 +458,10 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
    * @returns {number}
    */
   function processJsxExpression(program, lastIndex) {
+    /** @type {Map<Node, Scope | undefined>} */
+    const localScopes = new Map()
+    /** @type {Map<Node, Node | null>} */
+    const parents = new Map()
     let newIndex = lastIndex
     let functionNesting = 0
 
@@ -472,7 +476,7 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
         return
       }
 
-      if (!isInjectableComponent(name.name, programScope)) {
+      if (!isInjectableEstree(name, localScopes, parents)) {
         return
       }
 
@@ -481,6 +485,25 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
       newIndex = name.start
     }
 
+    walk(program, {
+      enter(node, parent) {
+        if (node.type === 'Program') {
+          return
+        }
+
+        visitors.enter(node)
+        localScopes.set(node, visitors.scopes.at(-1))
+        parents.set(node, parent)
+      },
+      leave(node) {
+        if (node.type === 'Program') {
+          return
+        }
+
+        visitors.exit(node)
+      }
+    })
+
     walk(program, {
       enter(node) {
         switch (node.type) {

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

@@ -2931,7 +2931,7 @@ test('ignore async functions in props or expressions', () => {
     '',
     '{async () => { await Promise.resolve(42) }}',
     '{async function() { await Promise.resolve(42) }}',
-    '{async function named() { await Promise.resolve(42) }}',
+    '{async function local() { await Promise.resolve(42) }}',
     ''
   )
 
@@ -2978,7 +2978,7 @@ test('ignore async functions in props or expressions', () => {
           }
         },
         {
-          generatedOffsets: [1102, 1150, 1203],
+          generatedOffsets: [1138, 1186, 1239],
           sourceOffsets: [205, 249, 298],
           lengths: [43, 48, 54],
           data: {
@@ -3030,13 +3030,15 @@ test('ignore async functions in props or expressions', () => {
         '    /** {@link expression} */',
         '    expression,',
         '    /** {@link named} */',
-        '    named',
+        '    named,',
+        '    /** {@link local} */',
+        '    local',
         '  }',
         '  _components',
         '  return <>',
         '    {async () => { await Promise.resolve(42) }}',
         '    {async function() { await Promise.resolve(42) }}',
-        '    {async function named() { await Promise.resolve(42) }}',
+        '    {async function local() { await Promise.resolve(42) }}',
         '  </>',
         '}',
         '',
@@ -3089,6 +3091,121 @@ test('ignore async functions in props or expressions', () => {
   ])
 })
 
+test('support locally scoped components', () => {
+  const plugin = createMdxLanguagePlugin()
+
+  const snapshot = snapshotFromLines('{(Component) => <Component />}', '')
+
+  const code = plugin.createVirtualCode?.('/test.mdx', 'mdx', snapshot, {
+    getAssociatedScript: () => undefined
+  })
+
+  assert.ok(code instanceof VirtualMdxCode)
+  assert.equal(code.id, 'mdx')
+  assert.equal(code.languageId, 'mdx')
+  assert.ifError(code.error)
+  assert.equal(code.snapshot, snapshot)
+  assert.deepEqual(code.mappings, [
+    {
+      sourceOffsets: [0],
+      generatedOffsets: [0],
+      lengths: [snapshot.getLength()],
+      data: {
+        completion: true,
+        format: true,
+        navigation: true,
+        semantic: true,
+        structure: true,
+        verification: true
+      }
+    }
+  ])
+  assert.deepEqual(code.embeddedCodes, [
+    {
+      id: 'jsx',
+      languageId: 'javascriptreact',
+      mappings: [
+        {
+          generatedOffsets: [779],
+          sourceOffsets: [0],
+          lengths: [30],
+          data: {
+            completion: true,
+            format: false,
+            navigation: true,
+            semantic: true,
+            structure: true,
+            verification: true
+          }
+        }
+      ],
+      snapshot: snapshotFromLines(
+        '/* @jsxRuntime automatic',
+        '@jsxImportSource react */',
+        '',
+        '/**',
+        ' * @internal',
+        ' *   **Do not use.** This function is generated by MDX for internal use.',
+        ' *',
+        ' * @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.',
+        ' */',
+        'function _createMdxContent(props) {',
+        '  /**',
+        '   * @internal',
+        '   *   **Do not use.** This variable is generated by MDX for internal use.',
+        '   */',
+        '  const _components = {',
+        '    // @ts-ignore',
+        '    .../** @type {0 extends 1 & MDXProvidedComponents ? {} : MDXProvidedComponents} */ ({}),',
+        '    ...props.components,',
+        '    /** The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component. */',
+        '    props',
+        '  }',
+        '  _components',
+        '  return <>',
+        '    {(Component) => <Component />}',
+        '  </>',
+        '}',
+        '',
+        '/**',
+        ' * Render the MDX contents.',
+        ' *',
+        ' * @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 <_createMdxContent {...props} />',
+        '}',
+        '',
+        '// @ts-ignore',
+        '/** @typedef {(void extends Props ? {} : Props) & {components?: {}}} MDXContentProps */',
+        ''
+      )
+    },
+    {
+      id: 'md',
+      languageId: 'markdown',
+      mappings: [
+        {
+          sourceOffsets: [30],
+          generatedOffsets: [0],
+          lengths: [1],
+          data: {
+            completion: true,
+            format: false,
+            navigation: true,
+            semantic: true,
+            structure: true,
+            verification: true
+          }
+        }
+      ],
+      snapshot: snapshotFromLines('', '')
+    }
+  ])
+})
+
 test('create virtual code w/ dedented markdown content', () => {
   const plugin = createMdxLanguagePlugin()