Pass around scope instead of array of defined variables

This small refactor is a preparation for upcoming changes. The
`_components` object in the virtual code is no longer sorted.

Author: remcohaszing

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

@@ -1,3 +1,7 @@
+/**
+ * @import {Scope} from 'estree-util-scope'
+ */
+
 /**
  * Check if a name belongs to a JSX component that can be injected.
  *
@@ -6,7 +10,7 @@
  *
  * @param {string | null} name
  *   The name of the component to check.
- * @param {string[]} scope
+ * @param {Scope} scope
  *  The variable names available in the scope.
  * @returns {boolean}
  *   Whether or not the given name is that of an injectable JSX component.
@@ -21,5 +25,5 @@ export function isInjectableComponent(name, scope) {
     return false
   }
 
-  return !scope.includes(name)
+  return !scope.defined.includes(name)
 }

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

@@ -1,6 +1,7 @@
 /**
  * @import {CodeMapping, VirtualCode} from '@volar/language-service'
  * @import {ExportDefaultDeclaration, JSXClosingElement, JSXOpeningElement, Program} from 'estree-jsx'
+ * @import {Scope} from 'estree-util-scope'
  * @import {Nodes, Root} from 'mdast'
  * @import {MdxjsEsm} from 'mdast-util-mdxjs-esm'
  * @import {IScriptSnapshot} from 'typescript'
@@ -50,9 +51,9 @@ const layoutJsDoc = (propsName) => `
 /**
  * @param {boolean} isAsync
  *   Whether or not the `_createMdxContent` should be async
- * @param {string[]} variables
+ * @param {Scope} [scope]
  */
-const componentStart = (isAsync, variables) => `
+const componentStart = (isAsync, scope) => `
 /**
  * @internal
  *   **Do not use.** This function is generated by MDX for internal use.
@@ -70,7 +71,11 @@ ${isAsync ? 'async ' : ''}function _createMdxContent(props) {
     .../** @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${Array.from(variables, (name) => ',\n    /** {@link ' + name + '} */\n    ' + name).join('')}
+    props${
+      scope?.defined
+        .map((name) => ',\n    /** {@link ' + name + '} */\n    ' + name)
+        .join('') ?? ''
+    }
   }
   _components
   return <>`
@@ -95,8 +100,7 @@ export default function MDXContent(props) {
 
 const jsxIndent = '\n    '
 
-const fallback =
-  jsPrefix(false, 'react') + componentStart(false, []) + componentEnd
+const fallback = jsPrefix(false, 'react') + componentStart(false) + componentEnd
 
 /**
  * Visit an mdast tree with and enter and exit callback.
@@ -395,7 +399,7 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
     }
   }
 
-  const variables = [...visitors.scopes[0].defined].sort()
+  const programScope = visitors.scopes[0]
 
   /**
    * Update the **markdown** mappings from a start and end offset of a **JavaScript** chunk.
@@ -468,7 +472,7 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
         return
       }
 
-      if (!isInjectableComponent(name.name, variables)) {
+      if (!isInjectableComponent(name.name, programScope)) {
         return
       }
 
@@ -595,7 +599,7 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
 
           let lastIndex = start + 1
           jsx = addOffset(jsxMapping, mdx, jsx + jsxIndent, start, lastIndex)
-          if (isInjectableComponent(node.name, variables)) {
+          if (isInjectableComponent(node.name, programScope)) {
             jsx += '_components.'
           }
 
@@ -670,7 +674,7 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
             const end = getNodeEndOffset(node)
 
             updateMarkdownFromOffsets(start, end)
-            if (isInjectableComponent(node.name, variables)) {
+            if (isInjectableComponent(node.name, programScope)) {
               const closingStart = start + 2
               jsx = addOffset(
                 jsxMapping,
@@ -712,7 +716,7 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
   )
 
   updateMarkdownFromOffsets(mdx.length, mdx.length)
-  esm += componentStart(hasAwait, variables)
+  esm += componentStart(hasAwait, programScope)
 
   for (let i = 0; i < jsxMapping.generatedOffsets.length; i++) {
     jsxMapping.generatedOffsets[i] += esm.length

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

@@ -1463,10 +1463,10 @@ test('create virtual code w/ MDX layout in case of a default export preceded by
         '    ...props.components,',
         '    /** The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component. */',
         '    props,',
-        '    /** {@link MDXLayout} */',
-        '    MDXLayout,',
         '    /** {@link named} */',
-        '    named',
+        '    named,',
+        '    /** {@link MDXLayout} */',
+        '    MDXLayout',
         '  }',
         '  _components',
         '  return <>',