feat: resolve custom remark config on parsing (#337)

package.json

@@ -29,25 +29,24 @@
     "@1stg/tslint-config": "^2.0.0",
     "@types/eslint": "^7.28.0",
     "@types/eslint-plugin-markdown": "^2.0.0",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^16.3.1",
-    "@types/react": "^17.0.14",
-    "@types/unist": "^2.0.5",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.1",
+    "@types/react": "^17.0.19",
+    "@types/unist": "^2.0.6",
     "lerna": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
+    "remark-frontmatter": "2",
     "remark-validate-links": "^10.0.4",
-    "ts-jest": "^27.0.3",
-    "ts-node": "^10.1.0",
+    "ts-jest": "^27.0.5",
+    "ts-node": "^10.2.1",
     "tslint": "^6.1.3",
     "type-coverage": "^2.18.0",
     "typescript": "^4.3.5",
     "yarn-deduplicate": "^3.1.0"
   },
   "resolutions": {
-    "@babel/core": "^7.14.6",
-    "prettier": "^2.3.2",
-    "tslib": "^2.3.0"
+    "prettier": "^2.3.2"
   },
   "commitlint": {
     "extends": [
@@ -83,6 +82,7 @@
   "prettier": "@1stg/prettier-config",
   "remarkConfig": {
     "plugins": [
+      "remark-frontmatter",
       "@1stg/remark-config",
       [
         "lint-no-duplicate-headings",

packages/eslint-mdx/package.json

@@ -32,9 +32,11 @@
     "eslint": ">=5.0.0"
   },
   "dependencies": {
+    "cosmiconfig": "^7.0.0",
     "remark-mdx": "^1.6.22",
     "remark-parse": "^8.0.3",
-    "tslib": "^2.3.0",
+    "remark-stringify": "^8.1.1",
+    "tslib": "^2.3.1",
     "unified": "^9.2.1"
   }
 }

packages/eslint-mdx/src/index.ts

@@ -1,5 +1,6 @@
 export * from './helpers'
 export * from './parser'
+export * from './processor'
 export * from './regexp'
 export * from './traverse'
 export * from './types'

packages/eslint-mdx/src/parser.ts

@@ -2,9 +2,6 @@ import path from 'path'
 
 import type { ExpressionStatement } from '@babel/types'
 import type { AST, Linter } from 'eslint'
-import remarkMdx from 'remark-mdx'
-import remarkParse from 'remark-parse'
-import unified from 'unified'
 
 import {
   arrayify,
@@ -16,6 +13,7 @@ import {
   normalizePosition,
   restoreNodeLocation,
 } from './helpers'
+import { getPhysicalFilename, getRemarkProcessor } from './processor'
 import {
   COMMENT_CONTENT_REGEX,
   COMMENT_CONTENT_REGEX_GLOBAL,
@@ -32,9 +30,6 @@ import type {
   ParserServices,
 } from './types'
 
-export const mdProcessor = unified().use(remarkParse).freeze()
-export const mdxProcessor = mdProcessor().use(remarkMdx).freeze()
-
 export const AST_PROPS = ['body', 'comments', 'tokens'] as const
 export const ES_NODE_TYPES: readonly string[] = ['export', 'import', 'jsx']
 
@@ -43,6 +38,8 @@ export const LOC_ERROR_PROPERTIES = ['column', 'lineNumber'] as const
 export const DEFAULT_EXTENSIONS: readonly string[] = ['.mdx']
 export const MARKDOWN_EXTENSIONS: readonly string[] = ['.md']
 
+export const PLACEHOLDER_FILE_PATH = '__placeholder__.mdx'
+
 export const DEFAULT_PARSER_OPTIONS: ParserOptions = {
   comment: true,
   ecmaFeatures: {
@@ -52,7 +49,7 @@ export const DEFAULT_PARSER_OPTIONS: ParserOptions = {
     new Date().getUTCFullYear() as Linter.ParserOptions['ecmaVersion'],
   sourceType: 'module',
   tokens: true,
-  filePath: '__placeholder__.mdx',
+  filePath: PLACEHOLDER_FILE_PATH,
   // required for @typescript-eslint/parser
   // reference: /~https://github.com/typescript-eslint/typescript-eslint/pull/2028
   loc: true,
@@ -170,7 +167,10 @@ export class Parser {
       return this._eslintParse(code, options)
     }
 
-    const root = (isMdx ? mdxProcessor : mdProcessor).parse(code) as Parent
+    const root = getRemarkProcessor(
+      getPhysicalFilename(options.filePath),
+      isMdx,
+    ).parse(code) as Parent
 
     this._ast = {
       ...normalizePosition(root.position),

packages/eslint-plugin-mdx/src/rules/helpers.ts → packages/eslint-mdx/src/processor.ts

@@ -2,13 +2,13 @@ import fs from 'fs'
 import path from 'path'
 
 import { cosmiconfigSync } from 'cosmiconfig'
-import { arrayify } from 'eslint-mdx'
 import remarkMdx from 'remark-mdx'
 import remarkParse from 'remark-parse'
 import remarkStringify from 'remark-stringify'
 import type { FrozenProcessor } from 'unified'
 import unified from 'unified'
 
+import { arrayify } from './helpers'
 import type { RemarkConfig, RemarkPlugin } from './types'
 
 export const requirePkg = <T>(

packages/eslint-mdx/src/types.ts

@@ -1,5 +1,6 @@
 import type { JSXElement, JSXFragment } from '@babel/types'
 import type { AST, Linter } from 'eslint'
+import type { Attacher } from 'unified'
 import type { Node as _Node, Parent as _Parent, Point } from 'unist'
 
 export interface Node<T = string> extends _Node {
@@ -70,3 +71,10 @@ export interface Comment {
 export interface ParserServices {
   JSXElementsWithHTMLComments: Node[]
 }
+
+export type RemarkPlugin = Attacher | string
+
+export interface RemarkConfig {
+  settings: Record<string, string>
+  plugins: Array<RemarkPlugin | [RemarkPlugin, ...unknown[]]>
+}

packages/eslint-plugin-mdx/package.json

@@ -32,15 +32,10 @@
     "eslint": ">=5.0.0"
   },
   "dependencies": {
-    "cosmiconfig": "^7.0.0",
     "eslint-mdx": "^1.14.1",
     "eslint-plugin-markdown": "^2.2.0",
-    "remark-mdx": "^1.6.22",
-    "remark-parse": "^8.0.3",
-    "remark-stringify": "^8.1.1",
     "synckit": "^0.3.4",
-    "tslib": "^2.3.0",
-    "unified": "^9.2.1",
+    "tslib": "^2.3.1",
     "vfile": "^4.2.1"
   }
 }

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

@@ -4,7 +4,6 @@ import { noJsxHtmlComments } from './no-jsx-html-comments'
 import { noUnusedExpressions } from './no-unused-expressions'
 import { remark } from './remark'
 
-export * from './helpers'
 export * from './types'
 
 export { noJsxHtmlComments, noUnusedExpressions, remark }

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

@@ -2,13 +2,17 @@ import path from 'path'
 
 import type { Rule } from 'eslint'
 import type { ParserOptions } from 'eslint-mdx'
-import { DEFAULT_EXTENSIONS, MARKDOWN_EXTENSIONS } from 'eslint-mdx'
+import {
+  DEFAULT_EXTENSIONS,
+  MARKDOWN_EXTENSIONS,
+  getPhysicalFilename,
+  getRemarkProcessor,
+} from 'eslint-mdx'
 import { createSyncFn } from 'synckit'
 import type { FrozenProcessor } from 'unified'
 import type { VFile, VFileOptions } from 'vfile'
 import vfile from 'vfile'
 
-import { getPhysicalFilename, getRemarkProcessor } from './helpers'
 import type { RemarkLintMessage } from './types'
 
 const workerPath = require.resolve('../worker')

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

@@ -1,6 +1,5 @@
 import type { Linter } from 'eslint'
 import type { ExpressionStatement, Node } from 'estree'
-import type { Attacher } from 'unified'
 
 export interface WithParent {
   parent: NodeWithParent
@@ -12,13 +11,6 @@ export interface ExpressionStatementWithParent
   extends ExpressionStatement,
     WithParent {}
 
-export type RemarkPlugin = Attacher | string
-
-export interface RemarkConfig {
-  settings: Record<string, string>
-  plugins: Array<RemarkPlugin | [RemarkPlugin, ...unknown[]]>
-}
-
 export interface RemarkLintMessage {
   reason: string
   source: string

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

@@ -1,10 +1,8 @@
+import { getRemarkProcessor } from 'eslint-mdx'
 import { runAsWorker } from 'synckit'
 import type { VFileOptions } from 'vfile'
 import vfile from 'vfile'
 
-import { getRemarkProcessor } from './rules'
-
-// eslint-disable-next-line @typescript-eslint/no-floating-promises
 runAsWorker(
   async (
     fileOptions: VFileOptions,
@@ -25,4 +23,4 @@ runAsWorker(
       content: file.toString(),
     }
   },
-)
+).catch(console.error)

test/__snapshots__/fixtures.test.ts.snap

@@ -71,6 +71,8 @@ exports[`fixtures should match all snapshots: 292.mdx 1`] = `Array []`;
 
 exports[`fixtures should match all snapshots: 334.mdx 1`] = `Array []`;
 
+exports[`fixtures should match all snapshots: 336.mdx 1`] = `Array []`;
+
 exports[`fixtures should match all snapshots: adjacent.mdx 1`] = `Array []`;
 
 exports[`fixtures should match all snapshots: basic.mdx 1`] = `Array []`;

test/fixtures/336.mdx

@@ -0,0 +1,6 @@
+---
+title: Code Splitting
+related:
+  - title: <link rel="prefetch/preload" > in webpack
+    url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
+---

test/helpers.test.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 
-import { arrayify, getPositionAt } from 'eslint-mdx'
-import { getGlobals, getShortLang, requirePkg } from 'eslint-plugin-mdx'
+import { arrayify, getPositionAt, requirePkg } from 'eslint-mdx'
+import { getGlobals, getShortLang } from 'eslint-plugin-mdx'
 
 describe('Helpers', () => {
   it('should arrayify items correctly', () => {

test/parser.test.ts

@@ -2,16 +2,20 @@
 import type { Node, Parent, ParserConfig, ParserOptions } from 'eslint-mdx'
 import {
   DEFAULT_PARSER_OPTIONS as parserOptions,
+  PLACEHOLDER_FILE_PATH,
   first,
-  mdxProcessor,
+  getRemarkProcessor,
   normalizeParser,
   parser,
 } from 'eslint-mdx'
 
 import { noop } from './helpers'
 
 const stringToNode = (text: string) =>
-  first((mdxProcessor.parse(text) as Parent).children)
+  first(
+    (getRemarkProcessor(PLACEHOLDER_FILE_PATH, true).parse(text) as Parent)
+      .children,
+  )
 
 describe('parser', () => {
   it('should transform html style comment in jsx into jsx comment', () => {

test/remark.test.ts

@@ -1,9 +1,12 @@
 import path from 'path'
 
-import { DEFAULT_PARSER_OPTIONS as parserOptions } from 'eslint-mdx'
-// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore
-import { processorCache, remark } from 'eslint-plugin-mdx'
+import {
+  DEFAULT_PARSER_OPTIONS as parserOptions,
+  // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+  // @ts-ignore
+  processorCache,
+} from 'eslint-mdx'
+import { remark } from 'eslint-plugin-mdx'
 import { homedir } from 'os'
 
 import { parser, ruleTester } from './helpers'