feat: use processor to display remark reports directly

.eslintrc.js

@@ -1,12 +1,6 @@
 const tsNode = require('ts-node')
 
-tsNode.register({
-  compilerOptions: {
-    module: 'commonjs',
-    pretty: true,
-  },
-  transpileOnly: true,
-})
+tsNode.register()
 
 module.exports = {
   root: true,

package.json

@@ -75,7 +75,13 @@
   "prettier": "@1stg/prettier-config",
   "remarkConfig": {
     "plugins": [
-      "@1stg/remark-config"
+      "@1stg/remark-config",
+      [
+        "lint-no-duplicate-headings",
+        [
+          2
+        ]
+      ]
     ]
   },
   "renovate": {

packages/eslint-plugin-mdx/src/configs/base.ts

@@ -1,4 +1,7 @@
-export const base = {
+import { Linter } from 'eslint'
+
+export const base: Linter.Config = {
   parser: 'eslint-mdx',
   plugins: ['mdx'],
+  processor: 'mdx/remark',
 }

packages/eslint-plugin-mdx/src/configs/overrides.ts

@@ -1,3 +1,5 @@
+import { Linter } from 'eslint'
+
 import { base } from './base'
 import { getGlobals } from './helper'
 
@@ -12,7 +14,7 @@ try {
   rebass = ['Box', 'Flex', 'Text', 'Heading', 'Link', 'Button', 'Image', 'Card']
 }
 
-export const overrides = {
+export const overrides: Linter.Config = {
   ...base,
   globals: getGlobals(rebass, {
     React: false,

packages/eslint-plugin-mdx/src/configs/recommended.ts

@@ -1,10 +1,11 @@
+import { Linter } from 'eslint'
 import { version } from 'eslint/package.json'
 
 import { base } from './base'
 
 const minorVersion = +version.split('.').slice(0, 2).join('.')
 
-export const recommended = {
+export const recommended: Linter.Config = {
   ...base,
   rules: {
     'mdx/no-jsx-html-comments': 2,

packages/eslint-plugin-mdx/src/index.ts

@@ -1,4 +1,5 @@
 export * as configs from './configs'
 
 export * from './configs/helper'
+export * from './processors'
 export * from './rules'

packages/eslint-plugin-mdx/src/processors/index.ts

@@ -0,0 +1,4 @@
+import { remark } from './remark'
+
+// related to https://github.com/benmosher/eslint-plugin-import/issues/2002
+export const processors = { remark }

packages/eslint-plugin-mdx/src/processors/remark.ts

@@ -0,0 +1,37 @@
+import { Linter } from 'eslint'
+
+import { RemarkLintMessage } from '../rules'
+
+export const remark = {
+  postprocess(lintMessages: Linter.LintMessage[][]): Linter.LintMessage[] {
+    const messages: Linter.LintMessage[] = []
+    for (const lintMessageList of lintMessages) {
+      messages.push(
+        ...lintMessageList.map(lintMessage => {
+          const {
+            message,
+            ruleId: eslintRuleId,
+            severity: eslintSeverity,
+          } = lintMessage
+          if (eslintRuleId !== 'mdx/remark') {
+            return lintMessage
+          }
+
+          // related to https://github.com/eslint/eslint/issues/14198
+          const { source, ruleId, reason, severity } = JSON.parse(
+            message,
+          ) as RemarkLintMessage
+
+          return {
+            ...lintMessage,
+            ruleId: `${source}-${ruleId}`,
+            message: reason,
+            severity: Math.max(eslintSeverity, severity) as Linter.Severity,
+          }
+        }),
+      )
+    }
+    return messages
+  },
+  supportsAutofix: true,
+}

packages/eslint-plugin-mdx/src/rules/remark.ts

@@ -5,6 +5,7 @@ import { DEFAULT_EXTENSIONS, MARKDOWN_EXTENSIONS } from 'eslint-mdx'
 import vfile from 'vfile'
 
 import { getRemarkProcessor } from './helper'
+import { RemarkLintMessage } from './types'
 
 export const remark: Rule.RuleModule = {
   meta: {
@@ -14,9 +15,6 @@ export const remark: Rule.RuleModule = {
       category: 'Stylistic Issues',
       recommended: true,
     },
-    messages: {
-      remarkReport: '{{ source }}:{{ ruleId }} - {{ reason }}',
-    },
     fixable: 'code',
   },
   create(context) {
@@ -34,6 +32,7 @@ export const remark: Rule.RuleModule = {
       options.markdownExtensions || [],
     ).includes(extname)
     return {
+      // eslint-disable-next-line sonarjs/cognitive-complexity
       Program(node) {
         /* istanbul ignore if */
         if (!isMdx && !isMarkdown) {
@@ -59,15 +58,24 @@ export const remark: Rule.RuleModule = {
           source,
           reason,
           ruleId,
+          fatal,
           location: { start, end },
         } of file.messages) {
+          // https://github.com/remarkjs/remark-lint/issues/65#issuecomment-220800231
+          /* istanbul ignore next */
+          const severity = fatal ? 2 : fatal == null ? 0 : 1
+          /* istanbul ignore if */
+          if (!severity) {
+            continue
+          }
+          const message: RemarkLintMessage = {
+            reason,
+            source,
+            ruleId,
+            severity,
+          }
           context.report({
-            messageId: 'remarkReport',
-            data: {
-              reason,
-              source,
-              ruleId,
-            },
+            message: JSON.stringify(message),
             loc: {
               // ! eslint ast column is 0-indexed, but unified is 1-indexed
               start: {

packages/eslint-plugin-mdx/src/rules/types.ts

@@ -1,3 +1,4 @@
+import { Linter } from 'eslint'
 // eslint-disable-next-line node/no-extraneous-import
 import { ExpressionStatement, Node } from 'estree'
 import { Attacher } from 'unified'
@@ -18,3 +19,10 @@ export interface RemarkConfig {
   settings: Record<string, string>
   plugins: Array<RemarkPlugin | [RemarkPlugin, ...unknown[]]>
 }
+
+export interface RemarkLintMessage {
+  reason: string
+  source: string
+  ruleId: string
+  severity: Linter.Severity
+}

test/__snapshots__/fixtures.test.ts.snap

@@ -18,10 +18,9 @@ Array [
       "text": "# Hello, world!",
     },
     "line": 27,
-    "message": "remark-lint:no-multiple-toplevel-headings - Don’t use multiple top level headings (3:1)",
-    "messageId": "remarkReport",
+    "message": "Don’t use multiple top level headings (3:1)",
     "nodeType": "Program",
-    "ruleId": "mdx/remark",
+    "ruleId": "remark-lint-no-multiple-toplevel-headings",
     "severity": 1,
   },
   Object {
@@ -56,10 +55,9 @@ Array [
       "text": "# Here's a text gradient shortcode!",
     },
     "line": 35,
-    "message": "remark-lint:no-multiple-toplevel-headings - Don’t use multiple top level headings (3:1)",
-    "messageId": "remarkReport",
+    "message": "Don’t use multiple top level headings (3:1)",
     "nodeType": "Program",
-    "ruleId": "mdx/remark",
+    "ruleId": "remark-lint-no-multiple-toplevel-headings",
     "severity": 1,
   },
   Object {
@@ -133,6 +131,45 @@ Array [
 ]
 `;
 
+exports[`fixtures should match all snapshots: processor.mdx 1`] = `
+Array [
+  Object {
+    "column": 1,
+    "endColumn": 6,
+    "endLine": 3,
+    "fix": Object {
+      "range": Array [
+        7,
+        12,
+      ],
+      "text": "# abc",
+    },
+    "line": 3,
+    "message": "Do not use headings with similar content (1:1)",
+    "nodeType": "Program",
+    "ruleId": "remark-lint-no-duplicate-headings",
+    "severity": 2,
+  },
+  Object {
+    "column": 1,
+    "endColumn": 6,
+    "endLine": 3,
+    "fix": Object {
+      "range": Array [
+        7,
+        12,
+      ],
+      "text": "# abc",
+    },
+    "line": 3,
+    "message": "Don’t use multiple top level headings (1:1)",
+    "nodeType": "Program",
+    "ruleId": "remark-lint-no-multiple-toplevel-headings",
+    "severity": 1,
+  },
+]
+`;
+
 exports[`fixtures should match all snapshots: remark.md 1`] = `Array []`;
 
 exports[`fixtures should match all snapshots: remark.mdx 1`] = `Array []`;

test/fixtures/processor.mdx

@@ -0,0 +1,3 @@
+# abc
+
+# abc

tsconfig.base.json

@@ -1,6 +1,7 @@
 {
   "extends": "./node_modules/@1stg/tsconfig/lib.json",
   "compilerOptions": {
+    "declarationMap": false,
     "strictFunctionTypes": false,
     "strictNullChecks": false
   }

tsconfig.json

@@ -3,6 +3,13 @@
   "compilerOptions": {
     "noEmit": true
   },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs",
+      "pretty": true
+    },
+    "transpileOnly": true
+  },
   "references": [
     {
       "path": "packages/eslint-mdx"