Refactor to use TypeScript @import JSDoc tags

Closes GH-2498.

Reviewed-by: Titus Wormer <tituswormer@gmail.com>

docs/_asset/editor.jsx

@@ -2,20 +2,20 @@
 /* @jsxImportSource react */
 
 /**
- * @typedef {import('@wooorm/starry-night').Grammar} Grammar
- * @typedef {import('estree').Node} EstreeNode
- * @typedef {import('estree').Program} Program
- * @typedef {import('hast').Nodes} HastNodes
- * @typedef {import('hast').Root} HastRoot
- * @typedef {import('mdast').Nodes} MdastNodes
- * @typedef {import('mdast').Root} MdastRoot
- * @typedef {import('mdast-util-mdx-jsx').MdxJsxAttribute} MdxJsxAttribute
- * @typedef {import('mdast-util-mdx-jsx').MdxJsxAttributeValueExpression} MdxJsxAttributeValueExpression
- * @typedef {import('mdast-util-mdx-jsx').MdxJsxExpressionAttribute} MdxJsxExpressionAttribute
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- * @typedef {import('react-error-boundary').FallbackProps} FallbackProperties
- * @typedef {import('unified').PluggableList} PluggableList
- * @typedef {import('unist').Node} UnistNode
+ * @import {Grammar} from '@wooorm/starry-night'
+ * @import {Node as EstreeNode, Program} from 'estree'
+ * @import {Nodes as HastNodes, Root as HastRoot} from 'hast'
+ * @import {Nodes as MdastNodes, Root as MdastRoot} from 'mdast'
+ * @import {
+    MdxJsxAttribute,
+    MdxJsxAttributeValueExpression,
+    MdxJsxExpressionAttribute
+ * } from 'mdast-util-mdx-jsx'
+ * @import {MDXModule} from 'mdx/types.js'
+ * @import {ReactNode} from 'react'
+ * @import {FallbackProps} from 'react-error-boundary'
+ * @import {PluggableList} from 'unified'
+ * @import {Node as UnistNode} from 'unist'
  */
 
 /**
@@ -35,7 +35,7 @@
  *   OK.
  * @property {true} ok
  *   Whether OK.
- * @property {JSX.Element} value
+ * @property {ReactNode} value
  *   Result.
  *
  * @typedef {EvalNok | EvalOk} EvalResult
@@ -315,7 +315,7 @@ function Playground() {
   const scope = formatMarkdown ? 'text.md' : 'source.mdx'
   // Cast to actual value.
   const compiledResult = /** @type {EvalResult | undefined} */ (evalResult)
-  /** @type {JSX.Element | undefined} */
+  /** @type {ReactNode | undefined} */
   let display
 
   if (compiledResult) {
@@ -579,9 +579,9 @@ function Playground() {
 
 /**
  *
- * @param {Readonly<FallbackProperties>} properties
+ * @param {Readonly<FallbackProps>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 function ErrorFallback(properties) {
@@ -601,7 +601,7 @@ function ErrorFallback(properties) {
 /**
  * @param {DisplayProperties} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 function DisplayError(properties) {

docs/_component/blog.jsx

@@ -1,5 +1,6 @@
 /**
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Item} from './sort.js'
  */
 
 /**
@@ -29,7 +30,7 @@ const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 /**
  * @param {Readonly<EntryProperties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function BlogEntry(properties) {
@@ -106,7 +107,7 @@ export function BlogEntry(properties) {
 /**
  * @param {Readonly<GroupProperties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function BlogGroup(properties) {

docs/_component/home.jsx

@@ -1,11 +1,11 @@
 /**
- * @typedef {import('react').ReactNode} ReactNode
- * @typedef {import('vfile').Data['meta']} DataMeta
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Data} from 'vfile'
+ * @import {Item} from './sort.js'
  */
 
 /**
- * @typedef {Exclude<DataMeta, undefined>} Meta
+ * @typedef {Exclude<Data['meta'], undefined>} Meta
  *
  * @typedef Properties
  *   Properties.
@@ -26,7 +26,7 @@ import {NavigationSite, NavigationSiteSkip} from './nav-site.jsx'
 /**
  * @param {Readonly<Properties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function Home(properties) {

docs/_component/layout.jsx

@@ -1,6 +1,7 @@
 /**
- * @typedef {import('vfile').Data['meta']} DataMeta
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Data} from 'vfile'
+ * @import {Item} from './sort.js'
  */
 
 /**
@@ -10,11 +11,11 @@
  *   Name.
  * @property {Readonly<URL>} ghUrl
  *   GitHub URL.
- * @property {Readonly<DataMeta> | undefined} [meta]
+ * @property {Readonly<Data['meta']> | undefined} [meta]
  *   Meta.
  * @property {Readonly<Item>} navigationTree
  *   Navigation tree.
- * @property {JSX.Element} children
+ * @property {ReactNode} children
  *   Children.
  */
 
@@ -28,7 +29,7 @@ const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 /**
  * @param {Readonly<Properties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function Layout(properties) {

docs/_component/nav-site.jsx

@@ -1,5 +1,6 @@
 /**
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Item} from './sort.js'
  */
 
 /**
@@ -34,7 +35,7 @@ export function NavigationSiteSkip() {
 /**
  * @param {Readonly<Properties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function NavigationSite(properties) {

docs/_component/nav.jsx

@@ -2,9 +2,9 @@
 /// <reference types="rehype-infer-description-meta" />
 
 /**
- * @typedef {import('hast').ElementContent} ElementContent
- * @typedef {import('react').ReactNode} ReactNode
- * @typedef {import('./sort.js').Item} Item
+ * @import {ElementContent} from 'hast'
+ * @import {ReactNode} from 'react'
+ * @import {Item} from './sort.js'
  */
 
 /**
@@ -46,7 +46,7 @@ const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 /**
  * @param {Readonly<GroupProperties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function NavigationGroup(properties) {
@@ -69,7 +69,7 @@ export function NavigationGroup(properties) {
 /**
  * @param {Readonly<ItemProperties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function NavigationItem(properties) {

docs/_component/note.jsx

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('react').ReactNode} ReactNode
+ * @import {ReactNode} from 'react'
  */
 
 /**
@@ -22,7 +22,7 @@ const known = new Set(['info', 'legacy', 'important'])
 /**
  * @param {Readonly<Properties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function Note(properties) {

docs/_component/snowfall.jsx

@@ -1,3 +1,7 @@
+/**
+ * @import {ReactNode} from 'react'
+ */
+
 /**
  * @typedef Properties
  *   Properties.
@@ -14,7 +18,7 @@ const data = [6, 5, 2, 4.5, 1.5, 2.5, 2, 2.5, 1.5, 2.5, 3.5, 7]
 /**
  * @param {Readonly<Properties>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
  *   Element.
  */
 export function Chart(properties) {

docs/_component/sort.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('vfile').Data} Data
+ * @import {Data} from 'vfile'
  */
 
 /**

docs/blog/index.mdx

@@ -1,3 +1,14 @@
+{
+  /**
+   * @import {Item} from '../_component/sort.js
+   */
+
+  /**
+   * @typedef Props
+   * @property {Item} navigationTree
+   */
+}
+
 import assert from 'node:assert/strict'
 import {BlogGroup} from '../_component/blog.jsx'
 
@@ -16,11 +27,6 @@ The latest news about MDX.
 
 {
   (function () {
-    /**
-     * @typedef {import('../_component/sort.js').Item} Item
-     */
-
-    /** @type {Item} */
     const navigationTree = props.navigationTree
     const category = navigationTree.children.find(function (item) {
       return item.name === '/blog/'

docs/community/index.mdx

@@ -1,3 +1,14 @@
+{
+  /**
+   * @import {Item} from '../_component/sort.js
+   */
+
+  /**
+   * @typedef Props
+   * @property {Item} navigationTree
+   */
+}
+
 import assert from 'node:assert/strict'
 import {NavigationGroup} from '../_component/nav.jsx'
 
@@ -15,11 +26,6 @@ and some background information.
 
 {
   (function () {
-    /**
-     * @typedef {import('../_component/sort.js').Item} Item
-     */
-
-    /** @type {Item} */
     const navigationTree = props.navigationTree
     const category = navigationTree.children.find(function (item) {
       return item.name === '/community/'

docs/docs/index.mdx

@@ -1,3 +1,14 @@
+{
+  /**
+   * @import {Item} from '../_component/sort.js
+   */
+
+  /**
+   * @typedef Props
+   * @property {Item} navigationTree
+   */
+}
+
 import assert from 'node:assert/strict'
 import {NavigationGroup} from '../_component/nav.jsx'
 
@@ -17,11 +28,6 @@ Reading through these should give you a good understanding of MDX.
 
 {
   (function () {
-    /**
-     * @typedef {import('../_component/sort.js').Item} Item
-     */
-
-    /** @type {Item} */
     const navigationTree = props.navigationTree
     const category = navigationTree.children.find(function (item) {
       return item.name === '/docs/'

docs/guides/index.mdx

@@ -1,3 +1,14 @@
+{
+  /**
+   * @import {Item} from '../_component/sort.js
+   */
+
+  /**
+   * @typedef Props
+   * @property {Item} navigationTree
+   */
+}
+
 import assert from 'node:assert/strict'
 import {NavigationGroup} from '../_component/nav.jsx'
 
@@ -15,11 +26,6 @@ around MDX.
 
 {
   (function () {
-    /**
-     * @typedef {import('../_component/sort.js').Item} Item
-     */
-
-    /** @type {Item} */
     const navigationTree = props.navigationTree
     const category = navigationTree.children.find(function (item) {
       return item.name === '/guides/'

docs/packages/index.mdx

@@ -1,3 +1,14 @@
+{
+  /**
+   * @import {Item} from '../_component/sort.js
+   */
+
+  /**
+   * @typedef Props
+   * @property {Item} navigationTree
+   */
+}
+
 import assert from 'node:assert/strict'
 import {NavigationGroup} from '../_component/nav.jsx'
 
@@ -17,11 +28,6 @@ bundlers and frontend frameworks.
 
 {
   (function () {
-    /**
-     * @typedef {import('../_component/sort.js').Item} Item
-     */
-
-    /** @type {Item} */
     const navigationTree = props.navigationTree
     const category = navigationTree.children.find(function (item) {
       return item.name === '/packages/'

packages/esbuild/lib/index.js

@@ -1,12 +1,12 @@
 /**
- * @typedef {import('@mdx-js/mdx').CompileOptions} CompileOptions
- * @typedef {import('esbuild').Message} Message
- * @typedef {import('esbuild').OnLoadArgs} OnLoadArgs
- * @typedef {import('esbuild').OnLoadResult} OnLoadResult
- * @typedef {import('esbuild').OnResolveArgs} OnResolveArgs
- * @typedef {import('esbuild').Plugin} Plugin
- * @typedef {import('esbuild').PluginBuild} PluginBuild
- * @typedef {import('vfile').Value} Value
+ * @import {CompileOptions} from '@mdx-js/mdx'
+ * @import {
+      Message,
+      OnLoadArgs,
+      OnLoadResult,
+      Plugin,
+      PluginBuild
+ * } from 'esbuild'
  */
 
 /**

packages/esbuild/test/index.js

@@ -1,14 +1,10 @@
 /**
- * @typedef {import('esbuild').BuildFailure} BuildFailure
- * @typedef {import('esbuild').Plugin} Plugin
- * @typedef {import('hast').Root} Root
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- * @typedef {import('vfile').VFile} VFile
- */
-
-/**
+ * @import {BuildFailure, Plugin} from 'esbuild'
+ * @import {Root} from 'hast'
+ * @import {MDXModule} from 'mdx/types.js'
+ * @import {VFile} from 'vfile'
  * Augment node types:
- * @typedef {import('remark-mdx')}
+ * @import {} from 'remark-mdx'
  */
 
 import assert from 'node:assert/strict'

packages/loader/index.cjs

@@ -1,5 +1,8 @@
 /**
- * @typedef {import('webpack').LoaderContext<unknown>} LoaderContext
+ * @import {LoaderContext} from 'webpack'
+ */
+
+/**
  * @typedef {import('./lib/index.js', {with: {'resolution-mode': 'import'}}).Options} Options
  */
 
@@ -14,7 +17,7 @@ module.exports = loader
  *
  * @todo once webpack supports ESM loaders, remove this wrapper.
  *
- * @this {LoaderContext}
+ * @this {LoaderContext<unknown>}
  *   Context.
  * @param {string} code
  *   Code.

packages/loader/lib/index.js

@@ -1,10 +1,8 @@
 /**
- * @typedef {import('@mdx-js/mdx').CompileOptions} CompileOptions
- * @typedef {import('vfile').Compatible} Compatible
- * @typedef {import('vfile').VFile} VFile
- * @typedef {import('vfile-message').VFileMessage} VFileMessage
- * @typedef {import('webpack').Compiler} WebpackCompiler
- * @typedef {import('webpack').LoaderContext<unknown>} LoaderContext
+ * @import {CompileOptions} from '@mdx-js/mdx'
+ * @import {Compatible, VFile} from 'vfile'
+ * @import {VFileMessage} from 'vfile-message'
+ * @import {Compiler as WebpackCompiler, LoaderContext} from 'webpack'
  */
 
 /**
@@ -41,11 +39,11 @@ const cache = new WeakMap()
  * See `webpack.cjs`, which wraps this, because Webpack loaders must currently
  * be CommonJS.
  *
- * @this {LoaderContext}
+ * @this {LoaderContext<unknown>}
  *   Context.
  * @param {string} value
  *   Value.
- * @param {LoaderContext['callback']} callback
+ * @param {LoaderContext<unknown>['callback']} callback
  *   Callback.
  * @returns {undefined}
  *   Nothing.

packages/loader/test/index.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('mdx/types.js').MDXContent} MDXContent
+ * @import {MDXContent} from 'mdx/types.js'
  */
 
 import assert from 'node:assert/strict'

packages/mdx/index.js

@@ -1,12 +1,12 @@
 /**
- * @typedef {import('./lib/util/resolve-evaluate-options.js').Fragment} Fragment
- * @typedef {import('./lib/util/resolve-evaluate-options.js').Jsx} Jsx
- * @typedef {import('./lib/util/resolve-evaluate-options.js').JsxDev} JsxDev
+ * @typedef {import('hast-util-to-jsx-runtime').Fragment} Fragment
+ * @typedef {import('hast-util-to-jsx-runtime').Jsx} Jsx
+ * @typedef {import('hast-util-to-jsx-runtime').JsxDev} JsxDev
  * @typedef {import('./lib/util/resolve-evaluate-options.js').UseMdxComponents} UseMdxComponents
  * @typedef {import('./lib/compile.js').CompileOptions} CompileOptions
  * @typedef {import('./lib/core.js').ProcessorOptions} ProcessorOptions
- * @typedef {import('./lib/evaluate.js').EvaluateOptions} EvaluateOptions
- * @typedef {import('./lib/run.js').RunOptions} RunOptions
+ * @typedef {import('./lib/util/resolve-evaluate-options.js').EvaluateOptions} EvaluateOptions
+ * @typedef {import('./lib/util/resolve-evaluate-options.js').RunOptions} RunOptions
  */
 
 export {compile, compileSync} from './lib/compile.js'

packages/mdx/lib/compile.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('vfile').VFile} VFile
- * @typedef {import('vfile').Compatible} Compatible
- * @typedef {import('./core.js').ProcessorOptions} ProcessorOptions
+ * @import {Compatible, VFile} from 'vfile'
+ * @import {ProcessorOptions} from './core.js'
  */
 
 /**

packages/mdx/lib/core.js

@@ -1,18 +1,16 @@
 /**
- * @typedef {import('estree-jsx').Program} Program
- * @typedef {import('hast-util-to-estree').ElementAttributeNameCase} ElementAttributeNameCase
- * @typedef {import('hast-util-to-estree').StylePropertyNameCase} StylePropertyNameCase
- * @typedef {import('mdast').Root} Root
- * @typedef {import('remark-rehype').Options} RemarkRehypeOptions
- * @typedef {typeof import('source-map').SourceMapGenerator} SourceMapGenerator
- * @typedef {import('unified').PluggableList} PluggableList
- * @typedef {import('unified').Processor<Root, Program, Program, Program, string>} Processor
+ * @import {Program} from 'estree-jsx'
+ * @import {ElementAttributeNameCase, StylePropertyNameCase} from 'hast-util-to-estree'
+ * @import {Root} from 'mdast'
+ * @import {Options as RemarkRehypeOptions} from 'remark-rehype'
+ * @import {SourceMapGenerator} from 'source-map'
+ * @import {PluggableList, Processor} from 'unified'
  */
 
 /**
  * @typedef ProcessorOptions
  *   Configuration for `createProcessor`.
- * @property {SourceMapGenerator | null | undefined} [SourceMapGenerator]
+ * @property {typeof SourceMapGenerator | null | undefined} [SourceMapGenerator]
  *   Add a source map (object form) as the `map` field on the resulting file
  *   (optional).
  * @property {URL | string | null | undefined} [baseUrl]
@@ -157,7 +155,7 @@ let warned = false
  *
  * @param {Readonly<ProcessorOptions> | null | undefined} [options]
  *   Configuration (optional).
- * @return {Processor}
+ * @return {Processor<Root, Program, Program, Program, string>}
  *   Processor.
  */
 export function createProcessor(options) {

packages/mdx/lib/evaluate.js

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- * @typedef {import('vfile').Compatible} Compatible
- * @typedef {import('./util/resolve-evaluate-options.js').EvaluateOptions} EvaluateOptions
+ * @import {MDXModule} from 'mdx/types.js'
+ * @import {Compatible} from 'vfile'
+ * @import {EvaluateOptions} from './util/resolve-evaluate-options.js'
  */
 
 import {resolveEvaluateOptions} from './util/resolve-evaluate-options.js'

packages/mdx/lib/plugin/recma-document.js

@@ -1,32 +1,32 @@
 /**
- * @typedef {import('estree-jsx').CallExpression} CallExpression
- * @typedef {import('estree-jsx').Directive} Directive
- * @typedef {import('estree-jsx').ExportAllDeclaration} ExportAllDeclaration
- * @typedef {import('estree-jsx').ExportDefaultDeclaration} ExportDefaultDeclaration
- * @typedef {import('estree-jsx').ExportNamedDeclaration} ExportNamedDeclaration
- * @typedef {import('estree-jsx').ExportSpecifier} ExportSpecifier
- * @typedef {import('estree-jsx').Expression} Expression
- * @typedef {import('estree-jsx').FunctionDeclaration} FunctionDeclaration
- * @typedef {import('estree-jsx').Identifier} Identifier
- * @typedef {import('estree-jsx').ImportDeclaration} ImportDeclaration
- * @typedef {import('estree-jsx').ImportDefaultSpecifier} ImportDefaultSpecifier
- * @typedef {import('estree-jsx').ImportExpression} ImportExpression
- * @typedef {import('estree-jsx').ImportSpecifier} ImportSpecifier
- * @typedef {import('estree-jsx').JSXElement} JSXElement
- * @typedef {import('estree-jsx').JSXFragment} JSXFragment
- * @typedef {import('estree-jsx').Literal} Literal
- * @typedef {import('estree-jsx').ModuleDeclaration} ModuleDeclaration
- * @typedef {import('estree-jsx').Node} Node
- * @typedef {import('estree-jsx').Program} Program
- * @typedef {import('estree-jsx').Property} Property
- * @typedef {import('estree-jsx').SimpleLiteral} SimpleLiteral
- * @typedef {import('estree-jsx').SpreadElement} SpreadElement
- * @typedef {import('estree-jsx').Statement} Statement
- * @typedef {import('estree-jsx').VariableDeclarator} VariableDeclarator
- *
- * @typedef {import('vfile').VFile} VFile
- *
- * @typedef {import('../core.js').ProcessorOptions} ProcessorOptions
+ * @import {
+      CallExpression,
+      Directive,
+      ExportAllDeclaration,
+      ExportDefaultDeclaration,
+      ExportNamedDeclaration,
+      ExportSpecifier,
+      Expression,
+      FunctionDeclaration,
+      Identifier,
+      ImportDeclaration,
+      ImportDefaultSpecifier,
+      ImportExpression,
+      ImportSpecifier,
+      JSXElement,
+      JSXFragment,
+      Literal,
+      ModuleDeclaration,
+      Node,
+      Program,
+      Property,
+      SimpleLiteral,
+      SpreadElement,
+      Statement,
+      VariableDeclarator
+ * } from 'estree-jsx'
+ * @import {VFile} from 'vfile'
+ * @import {ProcessorOptions} from '../core.js'
  */
 
 import {ok as assert} from 'devlop'

packages/mdx/lib/plugin/recma-jsx-build.js

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('estree-jsx').Program} Program
- * @typedef {import('estree-util-build-jsx').Options} BuildJsxOptions
- * @typedef {import('vfile').VFile} VFile
+ * @import {Program} from 'estree-jsx'
+ * @import {Options as BuildJsxOptions} from 'estree-util-build-jsx'
+ * @import {VFile} from 'vfile'
  */
 
 /**

packages/mdx/lib/plugin/recma-jsx-rewrite.js

@@ -1,23 +1,22 @@
 /**
- * @typedef {import('estree-jsx').Expression} Expression
- * @typedef {import('estree-jsx').Function} EstreeFunction
- * @typedef {import('estree-jsx').Identifier} Identifier
- * @typedef {import('estree-jsx').ImportSpecifier} ImportSpecifier
- * @typedef {import('estree-jsx').JSXElement} JSXElement
- * @typedef {import('estree-jsx').ModuleDeclaration} ModuleDeclaration
- * @typedef {import('estree-jsx').Node} Node
- * @typedef {import('estree-jsx').ObjectPattern} ObjectPattern
- * @typedef {import('estree-jsx').Program} Program
- * @typedef {import('estree-jsx').Property} Property
- * @typedef {import('estree-jsx').SpreadElement} SpreadElement
- * @typedef {import('estree-jsx').Statement} Statement
- * @typedef {import('estree-jsx').VariableDeclarator} VariableDeclarator
- *
- * @typedef {import('periscopic').Scope} PeriscopicScope
- *
- * @typedef {import('vfile').VFile} VFile
- *
- * @typedef {import('../core.js').ProcessorOptions} ProcessorOptions
+ * @import {
+      Expression,
+      Function as EstreeFunction,
+      Identifier,
+      ImportSpecifier,
+      JSXElement,
+      ModuleDeclaration,
+      Node,
+      ObjectPattern,
+      Program,
+      Property,
+      SpreadElement,
+      Statement,
+      VariableDeclarator
+ * } from 'estree-jsx'
+ * @import {Scope as PeriscopicScope} from 'periscopic'
+ * @import {VFile} from 'vfile'
+ * @import {ProcessorOptions} from '../core.js'
  */
 
 /**

packages/mdx/lib/plugin/recma-stringify.js

@@ -1,9 +1,8 @@
 /**
- * @typedef {import('estree-jsx').Program} Program
- * @typedef {import('unified').Processor<undefined, undefined, undefined, Program, string>} Processor
- * @typedef {import('vfile').VFile} VFile
- *
- * @typedef {import('../core.js').ProcessorOptions} ProcessorOptions
+ * @import {Program} from 'estree-jsx'
+ * @import {Plugin, Processor} from 'unified'
+ * @import {VFile} from 'vfile'
+ * @import {ProcessorOptions} from '../core.js'
  */
 
 import {jsx, toJs} from 'estree-util-to-js'
@@ -11,12 +10,15 @@ import {jsx, toJs} from 'estree-util-to-js'
 /**
  * Serialize an esast (estree) program to JavaScript.
  *
- * @type {import('unified').Plugin<[Readonly<ProcessorOptions>], Program, string>}
+ * @type {Plugin<[Readonly<ProcessorOptions>], Program, string>}
  */
 export function recmaStringify(options) {
-  // @ts-expect-error: TS is wrong about `this`.
   // eslint-disable-next-line unicorn/no-this-assignment
-  const self = /** @type {Processor} */ (this)
+  const self =
+    // @ts-expect-error: TS is wrong about `this`.
+    /** @type {Processor<undefined, undefined, undefined, Program, string>} */ (
+      this
+    )
   const {SourceMapGenerator} = options
 
   self.compiler = compiler

packages/mdx/lib/plugin/rehype-recma.js

@@ -1,9 +1,7 @@
 /**
- * @typedef {import('estree-jsx').Program} Program
- *
- * @typedef {import('hast').Root} Root
- *
- * @typedef {import('../core.js').ProcessorOptions} ProcessorOptions
+ * @import {Program} from 'estree-jsx'
+ * @import {Root} from 'hast'
+ * @import {ProcessorOptions} from '../core.js'
  */
 
 import {toEstree} from 'hast-util-to-estree'

packages/mdx/lib/plugin/rehype-remove-raw.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('hast').Root} Root
+ * @import {Root} from 'hast'
  */
 
 import {visit} from 'unist-util-visit'

packages/mdx/lib/plugin/remark-mark-and-unravel.js

@@ -1,6 +1,5 @@
 /**
- * @typedef {import('mdast').Root} Root
- * @typedef {import('mdast').RootContent} RootContent
+ * @import {Root, RootContent} from 'mdast'
  */
 
 import {collapseWhiteSpace} from 'collapse-white-space'

packages/mdx/lib/run.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- *
- * @typedef {import('./util/resolve-evaluate-options.js').RunOptions} RunOptions
+ * @import {MDXModule} from 'mdx/types.js'
+ * @import {RunOptions} from './util/resolve-evaluate-options.js'
  */
 
 /** @type {new (code: string, ...args: Array<unknown>) => Function} **/

packages/mdx/lib/util/create-format-aware-processors.js

@@ -1,10 +1,9 @@
 /**
- * @typedef {import('estree-jsx').Program} Program
- * @typedef {import('mdast').Root} Root
- * @typedef {import('unified').Processor<Root, Program, Program, Program, string>} Processor
- * @typedef {import('vfile').Compatible} Compatible
- * @typedef {import('vfile').VFile} VFile
- * @typedef {import('../compile.js').CompileOptions} CompileOptions
+ * @import {Program} from 'estree-jsx'
+ * @import {Root} from 'mdast'
+ * @import {Processor} from 'unified'
+ * @import {Compatible, VFile} from 'vfile'
+ * @import {CompileOptions} from '../compile.js'
  */
 
 /**
@@ -39,9 +38,9 @@ export function createFormatAwareProcessors(compileOptions) {
   const compileOptions_ = compileOptions || {}
   const mdExtensions = compileOptions_.mdExtensions || md
   const mdxExtensions = compileOptions_.mdxExtensions || mdx
-  /** @type {Processor} */
+  /** @type {Processor<Root, Program, Program, Program, string>} */
   let cachedMarkdown
-  /** @type {Processor} */
+  /** @type {Processor<Root, Program, Program, Program, string>} */
   let cachedMdx
 
   return {
@@ -72,7 +71,7 @@ export function createFormatAwareProcessors(compileOptions) {
    *
    * @param {Compatible} vfileCompatible
    *   MDX or markdown document.
-   * @return {{file: VFile, processor: Processor}}
+   * @return {{file: VFile, processor: Processor<Root, Program, Program, Program, string>}}
    *   File and corresponding processor.
    */
   function split(vfileCompatible) {

packages/mdx/lib/util/estree-util-create.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('estree-jsx').Node} Node
+ * @import {Node} from 'estree-jsx'
  */
 
 // Fix to show references to above types in VS Code.

packages/mdx/lib/util/estree-util-declaration-to-expression.js

@@ -1,8 +1,10 @@
 /**
- * @typedef {import('estree-jsx').Declaration} Declaration
- * @typedef {import('estree-jsx').Expression} Expression
- * @typedef {import('estree-jsx').MaybeNamedClassDeclaration} MaybeNamedClassDeclaration
- * @typedef {import('estree-jsx').MaybeNamedFunctionDeclaration} MaybeNamedFunctionDeclaration
+ * @import {
+      Declaration,
+      Expression,
+      MaybeNamedClassDeclaration,
+      MaybeNamedFunctionDeclaration
+ * } from 'estree-jsx'
  */
 
 import {ok as assert} from 'devlop'

packages/mdx/lib/util/estree-util-is-declaration.js

@@ -1,8 +1,10 @@
 /**
- * @typedef {import('estree-jsx').Declaration} Declaration
- * @typedef {import('estree-jsx').MaybeNamedClassDeclaration} MaybeNamedClassDeclaration
- * @typedef {import('estree-jsx').MaybeNamedFunctionDeclaration} MaybeNamedFunctionDeclaration
- * @typedef {import('estree-jsx').Node} Node
+ * @import {
+      Declaration,
+      MaybeNamedClassDeclaration,
+      MaybeNamedFunctionDeclaration,
+      Node
+ * } from 'estree-jsx'
  */
 
 // Fix to show references to above types in VS Code.

packages/mdx/lib/util/estree-util-specifiers-to-declarations.js

@@ -1,12 +1,14 @@
 /**
- * @typedef {import('estree-jsx').AssignmentProperty} AssignmentProperty
- * @typedef {import('estree-jsx').ExportSpecifier} ExportSpecifier
- * @typedef {import('estree-jsx').Expression} Expression
- * @typedef {import('estree-jsx').Identifier} Identifier
- * @typedef {import('estree-jsx').ImportDefaultSpecifier} ImportDefaultSpecifier
- * @typedef {import('estree-jsx').ImportNamespaceSpecifier} ImportNamespaceSpecifier
- * @typedef {import('estree-jsx').ImportSpecifier} ImportSpecifier
- * @typedef {import('estree-jsx').VariableDeclarator} VariableDeclarator
+ * @import {
+      AssignmentProperty,
+      ExportSpecifier,
+      Expression,
+      Identifier,
+      ImportDefaultSpecifier,
+      ImportNamespaceSpecifier,
+      ImportSpecifier,
+      VariableDeclarator
+ * } from 'estree-jsx'
  */
 
 import {create} from './estree-util-create.js'

packages/mdx/lib/util/estree-util-to-binary-addition.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('estree-jsx').Expression} Expression
+ * @import {Expression} from 'estree-jsx'
  */
 
 import {ok as assert} from 'devlop'

packages/mdx/lib/util/estree-util-to-id-or-member-expression.js

@@ -1,9 +1,11 @@
 /**
- * @typedef {import('estree-jsx').Identifier} Identifier
- * @typedef {import('estree-jsx').JSXIdentifier} JSXIdentifier
- * @typedef {import('estree-jsx').JSXMemberExpression} JSXMemberExpression
- * @typedef {import('estree-jsx').Literal} Literal
- * @typedef {import('estree-jsx').MemberExpression} MemberExpression
+ * @import {
+      Identifier,
+      JSXIdentifier,
+      JSXMemberExpression,
+      Literal,
+      MemberExpression
+ * } from 'estree-jsx'
  */
 
 import {ok as assert} from 'devlop'

packages/mdx/lib/util/resolve-evaluate-options.js

@@ -1,9 +1,7 @@
 /**
- * @typedef {import('hast-util-to-jsx-runtime').Fragment} Fragment
- * @typedef {import('hast-util-to-jsx-runtime').Jsx} Jsx
- * @typedef {import('hast-util-to-jsx-runtime').JsxDev} JsxDev
- * @typedef {import('mdx/types.js').MDXComponents} Components
- * @typedef {import('../compile.js').CompileOptions} CompileOptions
+ * @import {Fragment, Jsx, JsxDev} from 'hast-util-to-jsx-runtime'
+ * @import {MDXComponents} from 'mdx/types.js'
+ * @import {CompileOptions} from '../compile.js'
  */
 
 /**
@@ -42,7 +40,7 @@
  *
  * @callback UseMdxComponents
  *   Get components from context.
- * @returns {Components}
+ * @returns {MDXComponents}
  *   Current components.
  */
 

packages/mdx/lib/util/resolve-file-and-options.js

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('vfile').Compatible} Compatible
- * @typedef {import('../compile.js').CompileOptions} CompileOptions
- * @typedef {import('../core.js').ProcessorOptions} ProcessorOptions
+ * @import {Compatible} from 'vfile'
+ * @import {CompileOptions} from '../compile.js'
+ * @import {ProcessorOptions} from '../core.js'
  */
 
 import {VFile} from 'vfile'

packages/mdx/test/compile.js

@@ -1,10 +1,8 @@
 /**
- * @typedef {import('hast').Doctype} Doctype
- * @typedef {import('hast').Element} Element
- * @typedef {import('hast').Root} Root
- * @typedef {import('mdast').Root} MdastRoot
- * @typedef {import('mdx/types.js').MDXComponents} MDXComponents
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
+ * @import {Doctype, Element, Root} from 'hast'
+ * @import {Root as MdastRoot} from 'mdast'
+ * @import {MDXComponents, MDXModule} from 'mdx/types.js'
+ * @import {ComponentProps, ReactNode} from 'react'
  */
 
 import assert from 'node:assert/strict'
@@ -315,7 +313,7 @@ test('@mdx-js/mdx: compile', async function (t) {
           React.createElement(await run(await compile('<X />')), {
             components: {
               /**
-               * @param {JSX.IntrinsicElements['span']} properties
+               * @param {ComponentProps<'span'>} properties
                *   Properties.
                */
               X(properties) {
@@ -338,7 +336,7 @@ test('@mdx-js/mdx: compile', async function (t) {
             components: {
               x: {
                 /**
-                 * @param {JSX.IntrinsicElements['span']} properties
+                 * @param {ComponentProps<'span'>} properties
                  *   Properties.
                  */
                 y(properties) {
@@ -369,9 +367,9 @@ test('@mdx-js/mdx: compile', async function (t) {
       )
 
       /**
-       * @param {JSX.IntrinsicElements['span']} properties
+       * @param {ComponentProps<'span'>} properties
        *   Properties.
-       * @returns {JSX.Element}
+       * @returns {ReactNode}
        *   Element.
        */
       function X(properties) {
@@ -379,9 +377,9 @@ test('@mdx-js/mdx: compile', async function (t) {
       }
 
       /**
-       * @param {JSX.IntrinsicElements['span']} properties
+       * @param {ComponentProps<'span'>} properties
        *   Properties.
-       * @returns {JSX.Element}
+       * @returns {ReactNode}
        *   Element.
        */
       function Y(properties) {
@@ -565,7 +563,7 @@ test('@mdx-js/mdx: compile', async function (t) {
           React.createElement(await run(await compile('a')), {
             components: {
               /**
-               * @param {JSX.IntrinsicElements['div'] & {components: MDXComponents}} properties
+               * @param {ComponentProps<'div'> & {components: MDXComponents}} properties
                *   Properties.
                */
               wrapper(properties) {
@@ -612,7 +610,7 @@ test('@mdx-js/mdx: compile', async function (t) {
             {
               components: {
                 /**
-                 * @param {JSX.IntrinsicElements['article'] & {components: MDXComponents}} properties
+                 * @param {ComponentProps<'article'> & {components: MDXComponents}} properties
                  *   Properties.
                  */
                 wrapper(properties) {

packages/mdx/test/context/components.js

@@ -1,7 +1,11 @@
+/**
+ * @import {ComponentProps} from 'react'
+ */
+
 import React from 'react'
 
 /**
- * @param {Readonly<JSX.IntrinsicElements['span']>} properties
+ * @param {Readonly<ComponentProps<'span'>>} properties
  *   Properties.
  * @returns
  *   `span` element.
@@ -11,7 +15,7 @@ export function Pill(properties) {
 }
 
 /**
- * @param {Readonly<JSX.IntrinsicElements['div']>} properties
+ * @param {Readonly<ComponentProps<'div'>>} properties
  *   Properties.
  * @returns
  *   `div` element.

packages/mdx/test/context/run.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('mdx/types.js').MDXContent} MDXContent
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- * @typedef {import('vfile').Compatible} Compatible
+ * @import {MDXContent, MDXModule} from 'mdx/types.js'
+ * @import {Compatible} from 'vfile'
  */
 
 import fs from 'node:fs/promises'

packages/mdx/test/evaluate.js

@@ -1,7 +1,5 @@
 /**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
- * @typedef {import('@mdx-js/mdx').JsxDev} JsxDev
+ * @import {Fragment, Jsx, JsxDev} from '@mdx-js/mdx'
  */
 
 import assert from 'node:assert/strict'

packages/mdx/test/syntax.js

@@ -2,7 +2,7 @@
 /// <reference types="mdast-util-directive" />
 
 /**
- * @typedef {import('mdast').Root} MdastRoot
+ * @import {Root as MdastRoot} from 'mdast'
  */
 
 import assert from 'node:assert/strict'

packages/node-loader/lib/index.js

@@ -1,12 +1,10 @@
 /**
- * @typedef {import('node:module').LoadHookContext} LoadHookContext
- * @typedef {import('node:module').LoadFnOutput} LoadFnOutput
- * @typedef {import('node:module').LoadHook} LoadHookType
- * @typedef {import('@mdx-js/mdx').CompileOptions} CompileOptions
+ * @import {LoadFnOutput, LoadHook, LoadHookContext} from 'node:module'
+ * @import {CompileOptions} from '@mdx-js/mdx'
  */
 
 /**
- * @typedef {Parameters<LoadHookType>[2]} NextLoad
+ * @typedef {Parameters<LoadHook>[2]} NextLoad
  *   Next.
  *
  * @typedef {Omit<CompileOptions, 'development'>} Options
@@ -55,7 +53,7 @@ export function createLoader(options) {
    *   Next or default `load` function.
    * @returns {Promise<LoadFnOutput>}
    *   Result.
-   * @satisfies {LoadHookType}
+   * @satisfies {LoadHook}
    */
   async function load(href, context, nextLoad) {
     const url = new URL(href)

packages/node-loader/test/index.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
+ * @import {MDXModule} from 'mdx/types.js'
  */
 
 import assert from 'node:assert/strict'

packages/preact/lib/index.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('mdx/types.js').MDXComponents} MDXComponents
- * @typedef {import('preact').Component} Component
- * @typedef {import('preact').ComponentChildren} ComponentChildren
+ * @import {MDXComponents} from 'mdx/types.js'
+ * @import {Component, ComponentChildren, VNode} from 'preact'
  */
 
 /**
@@ -14,7 +13,7 @@
  *
  * @typedef Props
  *   Configuration for `MDXProvider`.
- * @property {ComponentChildren | null | undefined} [children]
+ * @property {ComponentChildren} [children]
  *   Children (optional).
  * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]
  *   Additional components to use or a function that creates them (optional).
@@ -54,7 +53,7 @@ export function useMDXComponents(components) {
  *
  * @param {Readonly<Props>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {VNode}
  *   Element.
  * @satisfies {Component}
  */

packages/preact/test/index.jsx

@@ -1,8 +1,9 @@
-/* @jsxRuntime automatic @jsxImportSource preact */
+/* @jsxRuntime automatic */
+/* @jsxImportSource preact */
 
 /**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
+ * @import {Fragment, Jsx} from '@mdx-js/mdx'
+ * @import {ComponentProps} from 'preact'
  */
 
 import assert from 'node:assert/strict'
@@ -36,7 +37,9 @@ test('@mdx-js/preact', async function (t) {
         render(
           <MDXProvider
             components={{
+              // @ts-expect-error TODO configure TypeScript project references
               h1(properties) {
+                // @ts-expect-error TODO configure TypeScript project references
                 return <h1 style={{color: 'tomato'}} {...properties} />
               }
             }}
@@ -60,11 +63,12 @@ test('@mdx-js/preact', async function (t) {
         <MDXProvider
           components={{
             /**
-             * @param {JSX.IntrinsicElements['div']} properties
+             * @param {ComponentProps<'div'>} properties
              *   Properties.
              * @returns
              *   Element.
              */
+            // @ts-expect-error TODO configure TypeScript project references
             wrapper(properties) {
               return <div id="layout" {...properties} />
             }
@@ -89,17 +93,23 @@ test('@mdx-js/preact', async function (t) {
         render(
           <MDXProvider
             components={{
+              // @ts-expect-error TODO configure TypeScript project references
               h1(properties) {
+                // @ts-expect-error TODO configure TypeScript project references
                 return <h1 style={{color: 'tomato'}} {...properties} />
               },
+              // @ts-expect-error TODO configure TypeScript project references
               h2(properties) {
+                // @ts-expect-error TODO configure TypeScript project references
                 return <h2 style={{color: 'rebeccapurple'}} {...properties} />
               }
             }}
           >
             <MDXProvider
               components={{
+                // @ts-expect-error TODO configure TypeScript project references
                 h2(properties) {
+                  // @ts-expect-error TODO configure TypeScript project references
                   return <h2 style={{color: 'papayawhip'}} {...properties} />
                 }
               }}
@@ -123,18 +133,24 @@ test('@mdx-js/preact', async function (t) {
       render(
         <MDXProvider
           components={{
+            // @ts-expect-error TODO configure TypeScript project references
             h1(properties) {
+              // @ts-expect-error TODO configure TypeScript project references
               return <h1 style={{color: 'tomato'}} {...properties} />
             },
+            // @ts-expect-error TODO configure TypeScript project references
             h2(properties) {
+              // @ts-expect-error TODO configure TypeScript project references
               return <h2 style={{color: 'rebeccapurple'}} {...properties} />
             }
           }}
         >
           <MDXProvider
+            // @ts-expect-error TODO configure TypeScript project references
             components={function () {
               return {
                 h2(properties) {
+                  // @ts-expect-error TODO configure TypeScript project references
                   return <h2 style={{color: 'papayawhip'}} {...properties} />
                 }
               }
@@ -160,7 +176,9 @@ test('@mdx-js/preact', async function (t) {
         render(
           <MDXProvider
             components={{
+              // @ts-expect-error TODO configure TypeScript project references
               h1(properties) {
+                // @ts-expect-error TODO configure TypeScript project references
                 return <h1 style={{color: 'tomato'}} {...properties} />
               }
             }}
@@ -187,16 +205,20 @@ test('@mdx-js/preact', async function (t) {
         render(
           <MDXProvider
             components={{
+              // @ts-expect-error TODO configure TypeScript project references
               h1(properties) {
+                // @ts-expect-error TODO configure TypeScript project references
                 return <h1 style={{color: 'tomato'}} {...properties} />
               }
             }}
           >
             <MDXProvider
               disableParentContext
+              // @ts-expect-error TODO configure TypeScript project references
               components={function () {
                 return {
                   h2(properties) {
+                    // @ts-expect-error TODO configure TypeScript project references
                     return <h2 style={{color: 'papayawhip'}} {...properties} />
                   }
                 }

packages/react/lib/index.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('mdx/types.js').MDXComponents} MDXComponents
- * @typedef {import('react').Component<{}, {}, unknown>} Component
- * @typedef {import('react').ReactNode} ReactNode
+ * @import {MDXComponents} from 'mdx/types.js'
+ * @import {Component, ReactElement, ReactNode} from 'react'
  */
 
 /**
@@ -59,7 +58,7 @@ export function useMDXComponents(components) {
  *
  * @param {Readonly<Props>} properties
  *   Properties.
- * @returns {JSX.Element}
+ * @returns {ReactElement}
  *   Element.
  * @satisfies {Component}
  */

packages/react/test/index.jsx

@@ -1,6 +1,6 @@
 /**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
+ * @import {Fragment, Jsx} from '@mdx-js/mdx'
+ * @import {ComponentProps} from 'react'
  */
 
 import assert from 'node:assert/strict'
@@ -59,7 +59,7 @@ test('@mdx-js/react', async function (t) {
         <MDXProvider
           components={{
             /**
-             * @param {JSX.IntrinsicElements['div']} properties
+             * @param {ComponentProps<'div'>} properties
              */
             wrapper(properties) {
               return <div id="layout" {...properties} />

packages/remark-mdx/lib/index.js

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('mdast-util-mdx').ToMarkdownOptions} ToMarkdownOptions
- * @typedef {import('micromark-extension-mdxjs').Options} MicromarkOptions
- * @typedef {import('unified').Processor} Processor
+ * @import {ToMarkdownOptions} from 'mdast-util-mdx'
+ * @import {Options as MicromarkOptions} from 'micromark-extension-mdxjs'
+ * @import {Processor} from 'unified'
  */
 
 /**

packages/remark-mdx/readme.md

@@ -205,11 +205,15 @@ with `@types/mdast` by adding a reference:
 // Register MDX nodes in mdast:
 /// <reference types="remark-mdx" />
 
+/**
+ * @import {Root} from 'mdast'
+ */
+
 import {visit} from 'unist-util-visit'
 
 function myRemarkPlugin() {
   /**
-   * @param {import('mdast').Root} tree
+   * @param {Root} tree
    *   Tree.
    * @returns {undefined}
    *   Nothing.

packages/remark-mdx/test/index.js

@@ -1,8 +1,10 @@
 /**
- * @typedef {import('mdast').Nodes} Nodes
- * @typedef {import('mdast-util-mdx').MdxJsxAttribute} MdxJsxAttribute
- * @typedef {import('mdast-util-mdx').MdxJsxAttributeValueExpression} MdxJsxAttributeValueExpression
- * @typedef {import('mdast-util-mdx').MdxJsxExpressionAttribute} MdxJsxExpressionAttribute
+ * @import {Nodes} from 'mdast'
+ * @import {
+      MdxJsxAttribute,
+      MdxJsxAttributeValueExpression,
+      MdxJsxExpressionAttribute
+ * } from 'mdast-util-mdx'
  */
 
 import assert from 'node:assert/strict'

packages/rollup/lib/index.js

@@ -1,8 +1,8 @@
 /**
- * @typedef {import('@mdx-js/mdx/internal-create-format-aware-processors').FormatAwareProcessors} FormatAwareProcessors
- * @typedef {import('@mdx-js/mdx').CompileOptions} CompileOptions
- * @typedef {import('@rollup/pluginutils').FilterPattern} FilterPattern
- * @typedef {import('rollup').SourceDescription} SourceDescription
+ * @import {FormatAwareProcessors} from '@mdx-js/mdx/internal-create-format-aware-processors'
+ * @import {CompileOptions} from '@mdx-js/mdx'
+ * @import {FilterPattern} from '@rollup/pluginutils'
+ * @import {SourceDescription} from 'rollup'
  */
 
 /**

packages/rollup/test/index.js

@@ -1,6 +1,6 @@
 /**
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- * @typedef {import('rollup').RollupOutput} RollupOutput
+ * @import {MDXModule} from 'mdx/types.js'
+ * @import {RollupOutput} from 'rollup'
  */
 
 import assert from 'node:assert/strict'

packages/vue/lib/index.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('mdx/types.js').MDXComponents} MDXComponents
- * @typedef {import('vue').Component<Props>} Provider
- * @typedef {import('vue').ComponentPublicInstance} ComponentPublicInstance
+ * @import {MDXComponents} from 'mdx/types.js'
+ * @import {Component, ComponentPublicInstance} from 'vue'
  */
 
 /**
@@ -16,7 +15,7 @@ import {Fragment, createVNode, inject, provide} from 'vue'
 /**
  * Provider for MDX context.
  *
- * @type {Provider}
+ * @type {Component<Props>}
  *   Provider.
  */
 export const MDXProvider = {

packages/vue/test/index.js

@@ -1,8 +1,7 @@
 /**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
- * @typedef {import('mdx/types.js').MDXModule} MDXModule
- * @typedef {import('vue').Component} AnyComponent
+ * @import {Fragment, Jsx} from '@mdx-js/mdx'
+ * @import {MDXModule} from 'mdx/types.js'
+ * @import {Component} from 'vue'
  */
 
 import assert from 'node:assert/strict'
@@ -138,7 +137,7 @@ async function evaluate(value) {
 }
 
 /**
- * @param {AnyComponent} root
+ * @param {Component} root
  *   Component.
  * @param {Record<string, unknown> | null | undefined} [rootProperties]
  *   Props.

website/generate.js

@@ -1,12 +1,9 @@
 #!/usr/bin/env node
 /**
- * @typedef {import('hast').Element} Element
- * @typedef {import('hast').Properties} Properties
- * @typedef {import('hast').Root} Root
- * @typedef {import('mdx/types.js').MDXContent} MDXContent
- * @typedef {Exclude<import('vfile').Data['meta'], undefined>} Meta
- * @typedef {Exclude<import('vfile').Data['matter'], undefined>} Matter
- * @typedef {import('../docs/_component/sort.js').Item} Item
+ * @import {Element, Properties, Root} from 'hast'
+ * @import {MDXContent} from 'mdx/types.js'
+ * @import {DataMapMatter, DataMapMeta} from 'vfile'
+ * @import {Item} from '../docs/_component/sort.js'
  */
 
 /**
@@ -81,7 +78,7 @@ const allInfo = await pAll(
         config.ghBlob
       )
 
-      /** @type {{default: MDXContent, info?: Info, matter: Matter, meta: Meta, navExclude?: boolean | undefined, navSortSelf?: number | undefined}} */
+      /** @type {{default: MDXContent, info?: Info, matter: DataMapMatter, meta: DataMapMeta, navExclude?: boolean | undefined, navSortSelf?: number | undefined}} */
       const imported = await import(url.href)
       const {default: Content, info, ...data} = imported
       // Handle `author` differently.

website/mdx-config.js

@@ -1,10 +1,9 @@
 /**
- * @typedef {import('@mdx-js/mdx').CompileOptions} CompileOptions
- * @typedef {import('@wooorm/starry-night').Grammar} Grammar
- * @typedef {import('estree').Program} Program
- * @typedef {import('hast').ElementContent} ElementContent
- * @typedef {import('hast').Root} Root
- * @typedef {import('vfile').VFile} VFile
+ * @import {CompileOptions} from '@mdx-js/mdx'
+ * @import {Grammar} from '@wooorm/starry-night'
+ * @import {Program} from 'estree'
+ * @import {ElementContent, Root} from 'hast'
+ * @import {VFile} from 'vfile'
  */
 
 /**

website/post.js

@@ -1,17 +1,15 @@
 /**
- * @typedef {import('node:fs').Stats} Stats
- * @typedef {import('hast').Root} Root
- * @typedef {Exclude<import('vfile').Data['meta'], undefined>} Meta
- * @typedef {Exclude<import('vfile').Data['matter'], undefined>} Matter
- * @typedef {import('xast-util-feed').Entry} Entry
+ * @import {Stats} from 'node:fs'
+ * @import {DataMapMatter, DataMapMeta} from 'vfile'
+ * @import {Entry} from 'xast-util-feed'
  */
 
 /**
  * @typedef Info
  *   Info.
- * @property {Readonly<Meta>} meta
+ * @property {Readonly<DataMapMeta>} meta
  *   Meta.
- * @property {Readonly<Matter>} matter
+ * @property {Readonly<DataMapMatter>} matter
  *   Matter.
  * @property {boolean | undefined} [navExclude=false]
  *   Whether to exclude from the navigation (default: `false`).

website/prep.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @typedef {import('hast').Root} Root
+ * @import {Root} from 'hast'
  */
 
 /**

website/schema-description.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('hast-util-sanitize').Schema} Schema
+ * @import {Schema} from 'hast-util-sanitize'
  */
 
 /**