Repo: Use mdast-util-from-markdown in Docusaurus plugins

[JoshuaKGoldberg]

Suggestion

Right now our generated-rule-docs.ts file manually inserts POJO objects for the MDAST. It'd be great if we could use a package like https://github.com/syntax-tree/mdast-util-from-markdown to clean up that code.

However, that package is written in ESM, which Docusaurus doesn't support yet. Adding this inside a plugin:

import { fromMarkdown } from 'mdast-util-from-markdown';

...gives a loading failure:

[INFO] Starting the development server...
[ERROR] Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/josh/repos/typescript-eslint/node_modules/mdast-util-from-markdown/index.js from /Users/josh/repos/typescript-eslint/packages/website/plugins/generated-rule-docs.ts not supported.
Instead change the require of index.js in /Users/josh/repos/typescript-eslint/packages/website/plugins/generated-rule-docs.ts to a dynamic import() which is available in all CommonJS modules.
    at Object.require.extensions.<computed> [as .js] (/Users/josh/repos/typescript-eslint/node_modules/ts-node/dist/index.js:785:20)
    at Object.<anonymous> (/Users/josh/repos/typescript-eslint/packages/website/plugins/generated-rule-docs.ts:8:30)
    at Module.m._compile (/Users/josh/repos/typescript-eslint/node_modules/ts-node/dist/index.js:791:29)
    at Object.require.extensions.<computed> [as .ts] (/Users/josh/repos/typescript-eslint/node_modules/ts-node/dist/index.js:793:16)
    at Object.<anonymous> (/Users/josh/repos/typescript-eslint/packages/website/docusaurusConfig.ts:5:26)
    at Module.m._compile (/Users/josh/repos/typescript-eslint/node_modules/ts-node/dist/index.js:791:29)
    at Object.require.extensions.<computed> [as .ts] (/Users/josh/repos/typescript-eslint/node_modules/ts-node/dist/index.js:793:16)
    at Object.<anonymous> (/Users/josh/repos/typescript-eslint/packages/website/docusaurus.config.js:10:18)
    at module.exports (/Users/josh/repos/typescript-eslint/node_modules/import-fresh/index.js:32:59)
    at loadSiteConfig (/Users/josh/repos/typescript-eslint/node_modules/@docusaurus/core/lib/server/config.js:36:55)
    at async loadContext (/Users/josh/repos/typescript-eslint/node_modules/@docusaurus/core/lib/server/index.js:31:63)
    at async load (/Users/josh/repos/typescript-eslint/node_modules/@docusaurus/core/lib/server/index.js:75:21)
    at async start (/Users/josh/repos/typescript-eslint/node_modules/@docusaurus/core/lib/commands/start.js:41:19)

Switching to an async import:

const { fromMarkdown } = await import('mdast-util-from-markdown');

Delays the failure until each rule docs page's generation:

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/
ℹ Compiling Client
✔ Client: Compiled with some errors in 5.85s

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/josh/repos/typescript-eslint/node_modules/mdast-util-from-markdown/index.js from /Users/josh/repos/typescript-eslint/packages/website/plugins/generated-rule-docs.ts not supported.
Instead change the require of index.js in /Users/josh/repos/typescript-eslint/packages/website/plugins/generated-rule-docs.ts to a dynamic import() which is available in all CommonJS modules.
...
client (webpack 5.73.0) compiled with 127 errors

cc @Josh-Cena, our resident Docusaurus expert! 😄

[Josh-Cena]

The correct way is to downgrade this...

Also the reason you still get require of ESM after using dynamic import is because your tsconfig is set to CommonJS I think. Need to use Node16 but that doesn't work either (see #5377; it blocks website typechecking because it should really be module: webpack)

[Josh-Cena]

Also the correct™️ way to do that is to reuse the mdx infra instead of pulling in another utility. I would take a look later—shouldn't be too complicated.

[JoshuaKGoldberg]

This is coming up on my issue triage queue but it's not really actionable right now or particularly important. Marking as blocked on facebook/docusaurus#6520; once everything is ESM-compatible it'll be easier to do ecosystem-y refactors like this.