refactor: extract our two custom remark into their own files

Author: axe312ger

packages/gatsby-plugin-mdx/package.json

@@ -58,7 +58,6 @@
     "mdast-util-mdx": "^2.0.0",
     "mdast-util-to-markdown": "^1.3.0",
     "unified": "^10.1.2",
-    "unist-util-map": "^3.1.1",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
   },

packages/gatsby-plugin-mdx/src/get-source-plugins-as-remark-plugins.ts

@@ -3,6 +3,8 @@ import type { GatsbyCache, Reporter, NodePluginArgs } from "gatsby"
 import type { Pluggable } from "unified"
 
 import { IMdxPluginOptions } from "./plugin-options"
+import { remarkMdxHtmlPlugin } from "./remark-mdx-html-plugin"
+import { pathPlugin } from "./remark-path-prefix-plugin"
 
 interface IGetSourcePluginsAsRemarkPlugins {
   gatsbyRemarkPlugins: IMdxPluginOptions["gatsbyRemarkPlugins"]
@@ -13,10 +15,6 @@ interface IGetSourcePluginsAsRemarkPlugins {
   cache: GatsbyCache
 }
 
-// ensure only one `/` in new url
-const withPathPrefix = (url: string, pathPrefix: string): string =>
-  (pathPrefix + url).replace(/\/\//, `/`)
-
 export async function getSourcePluginsAsRemarkPlugins({
   gatsbyRemarkPlugins,
   getNode,
@@ -27,35 +25,12 @@ export async function getSourcePluginsAsRemarkPlugins({
 }: IGetSourcePluginsAsRemarkPlugins): Promise<
   ProcessorOptions["remarkPlugins"]
 > {
-  const { visit } = await import(`unist-util-visit`)
-  const { map } = await import(`unist-util-map`)
-
-  // Ensure relative links include `pathPrefix`
-  const pathPlugin = () =>
-    async function transformer(markdownAST): Promise<any> {
-      if (!pathPrefix) {
-        return markdownAST
-      }
-      visit(markdownAST, [`link`, `definition`], node => {
-        if (
-          node.url &&
-          typeof node.url === `string` &&
-          node.url.startsWith(`/`) &&
-          !node.url.startsWith(`//`)
-        ) {
-          // TODO: where does withPathPrefix
-          node.url = withPathPrefix(node.url, pathPrefix)
-        }
-      })
-      return markdownAST
-    }
-
   const userPluginsFiltered = gatsbyRemarkPlugins.filter(
     plugin => typeof plugin.module === `function`
   )
 
   if (!userPluginsFiltered.length) {
-    return pathPrefix ? [pathPlugin] : []
+    return pathPrefix ? [[pathPlugin, { pathPrefix }]] : []
   }
 
   const userPlugins = userPluginsFiltered.map(plugin => {
@@ -81,67 +56,15 @@ export async function getSourcePluginsAsRemarkPlugins({
             },
             plugin.options || {}
           )
-
-          const divAST = map(markdownAST, node => {
-            if (node.type !== `html`) {
-              return node
-            }
-            return {
-              type: `mdxJsxFlowElement`,
-              name: `div`,
-              attributes: [
-                {
-                  type: `mdxJsxAttribute`,
-                  name: `dangerouslySetInnerHTML`,
-                  value: {
-                    type: `mdxJsxAttributeValueExpression`,
-                    data: {
-                      estree: {
-                        type: `Program`,
-                        body: [
-                          {
-                            type: `ExpressionStatement`,
-                            expression: {
-                              type: `ObjectExpression`,
-                              properties: [
-                                {
-                                  type: `Property`,
-                                  method: false,
-                                  shorthand: false,
-                                  computed: false,
-                                  key: {
-                                    type: `Identifier`,
-                                    name: `__html`,
-                                  },
-                                  value: {
-                                    type: `Literal`,
-                                    value: node.value,
-                                  },
-                                  kind: `init`,
-                                },
-                              ],
-                            },
-                          },
-                        ],
-                        sourceType: `module`,
-                      },
-                    },
-                  },
-                },
-              ],
-            }
-          })
-
-          return divAST
         }
       }
 
     return wrappedGatsbyPlugin
   })
 
   if (pathPrefix) {
-    return [pathPlugin, ...userPlugins]
+    return [[pathPlugin, { pathPrefix }], ...userPlugins, remarkMdxHtmlPlugin]
   } else {
-    return userPlugins
+    return [...userPlugins, remarkMdxHtmlPlugin]
   }
 }

packages/gatsby-plugin-mdx/src/remark-mdx-html-plugin.ts

@@ -0,0 +1,59 @@
+import type { Node } from "unist-util-visit"
+
+// This plugin replaces html nodes with JSX divs that render given HTML via dangerouslySetInnerHTML
+// We have to find out if this is really a good idea, but its processing footprint is very low
+// compared to other solutions that would traverse the given HTML.
+export const remarkMdxHtmlPlugin = () =>
+  async function transformer(markdownAST: Node): Promise<Node> {
+    const { visit } = await import(`unist-util-visit`)
+
+    visit(markdownAST, node => {
+      if (node.type !== `html`) {
+        return
+      }
+      node.type = `mdxJsxFlowElement`
+      node.name = `div`
+      node.attributes = [
+        {
+          type: `mdxJsxAttribute`,
+          name: `dangerouslySetInnerHTML`,
+          value: {
+            type: `mdxJsxAttributeValueExpression`,
+            data: {
+              estree: {
+                type: `Program`,
+                body: [
+                  {
+                    type: `ExpressionStatement`,
+                    expression: {
+                      type: `ObjectExpression`,
+                      properties: [
+                        {
+                          type: `Property`,
+                          method: false,
+                          shorthand: false,
+                          computed: false,
+                          key: {
+                            type: `Identifier`,
+                            name: `__html`,
+                          },
+                          value: {
+                            type: `Literal`,
+                            value: node.value,
+                          },
+                          kind: `init`,
+                        },
+                      ],
+                    },
+                  },
+                ],
+                sourceType: `module`,
+              },
+            },
+          },
+        },
+      ]
+    })
+
+    return markdownAST
+  }

packages/gatsby-plugin-mdx/src/remark-path-prefix-plugin.ts

@@ -0,0 +1,27 @@
+import type { Node } from "unist-util-visit"
+
+// ensure only one `/` in new url
+const withPathPrefix = (url: string, pathPrefix: string): string =>
+  (pathPrefix + url).replace(/\/\//, `/`)
+
+// Ensure relative links include `pathPrefix`
+export const pathPlugin = ({ pathPrefix }: { pathPrefix: string }) =>
+  async function transformer(markdownAST: Node): Promise<Node> {
+    if (!pathPrefix) {
+      return markdownAST
+    }
+    const { visit } = await import(`unist-util-visit`)
+
+    visit(markdownAST, [`link`, `definition`], node => {
+      if (
+        node.url &&
+        typeof node.url === `string` &&
+        node.url.startsWith(`/`) &&
+        !node.url.startsWith(`//`)
+      ) {
+        // TODO: where does withPathPrefix
+        node.url = withPathPrefix(node.url, pathPrefix)
+      }
+    })
+    return markdownAST
+  }

yarn.lock

@@ -25456,13 +25456,6 @@ unist-util-map@^2.0.1:
     "@types/mdast" "^3.0.0"
     object-assign "^4.0.0"
 
-unist-util-map@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/unist-util-map/-/unist-util-map-3.1.1.tgz#e69e23fc36a9dd6dfebc90ce8c3cc8e426ed2a71"
-  integrity sha512-n36sjBn4ibPtAzrFweyT4FOcCI/UdzboaEcsZvwoAyD/gVw5B3OLlMBySePMO6r+uzjxQEyRll2akfVaT4SHhw==
-  dependencies:
-    "@types/unist" "^2.0.0"
-
 unist-util-modify-children@^1.0.0, unist-util-modify-children@^1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/unist-util-modify-children/-/unist-util-modify-children-1.1.6.tgz#1587130ca0ab5c56155fa60837ff524c3fbfbfaa"