chore(gatsby-plugin-mdx): add pluginOptionsSchema export (#27445)

Author: Marvin Frachet

packages/gatsby-plugin-mdx/__tests__/gatsby-node.js

@@ -0,0 +1,59 @@
+import { testPluginOptionsSchema } from "gatsby-plugin-utils"
+import { pluginOptionsSchema } from "../gatsby-node"
+
+describe(`pluginOptionsSchema`, () => {
+  it(`should provide meaningful errors when fields are invalid`, () => {
+    const expectedErrors = [
+      `"extensions" "[0]" must be a string. "[1]" must be a string. "[2]" must be a string`,
+      `"defaultLayout" must be of type object`,
+      `"gatsbyRemarkPlugins" "[0]" does not match any of the allowed types. "[1]" does not match any of the allowed types`,
+      `"remarkPlugins" must be an array`,
+      `"rehypePlugins" must be an array`,
+      `"mediaTypes" "[0]" must be a string. "[1]" must be a string`,
+      `"shouldBlockNodeFromTransformation" must have an arity lesser or equal to 1`,
+    ]
+
+    const { errors } = testPluginOptionsSchema(pluginOptionsSchema, {
+      extensions: [1, 2, 3],
+      defaultLayout: `this should be an object`,
+      gatsbyRemarkPlugins: [1, { not: `existing prop` }, `valid one`],
+      remarkPlugins: `this should be an array of object`,
+      rehypePlugins: `this should be an array of object`,
+      mediaTypes: [1, 2],
+      shouldBlockNodeFromTransformation: (wrong, number) => null,
+    })
+
+    expect(errors).toEqual(expectedErrors)
+  })
+
+  it(`should validate the schema`, () => {
+    const { isValid } = testPluginOptionsSchema(pluginOptionsSchema, {
+      extensions: [`.mdx`, `.mdxx`],
+      defaultLayout: {
+        posts: `../post-layout.js`,
+        default: `../default-layout.js`,
+      },
+      gatsbyRemarkPlugins: [
+        {
+          resolve: `gatsby-remark-images`,
+          options: {
+            maxWidth: 590,
+          },
+        },
+        `gatsby-remark-other-plugin`,
+      ],
+      remarkPlugins: [
+        require(`../gatsby-node.js`),
+        [require(`../gatsby-node.js`), { target: false }],
+      ],
+      rehypePlugins: [
+        require(`../gatsby-node.js`),
+        [require(`../gatsby-node.js`), { behavior: `wrap` }],
+      ],
+      mediaTypes: [`text/markdown`, `text/x-markdown`, `custom-media/type`],
+      shouldBlockNodeFromTransformation: node => Boolean(node),
+    })
+
+    expect(isValid).toBe(true)
+  })
+})

packages/gatsby-plugin-mdx/gatsby-node.js

@@ -57,3 +57,58 @@ exports.onPostBootstrap = ({ cache }, pluginOptions) => {
     )
   }
 }
+
+if (process.env.GATSBY_EXPERIMENTAL_PLUGIN_OPTION_VALIDATION) {
+  exports.pluginOptionsSchema = function ({ Joi }) {
+    return Joi.object({
+      extensions: Joi.array()
+        .items(Joi.string())
+        .default([".mdx"])
+        .description(
+          `Configure the file extensions that gatsby-plugin-mdx will process`
+        ),
+      defaultLayout: Joi.object({})
+        .unknown(true)
+        .default({})
+        .description(`Set the layout components for MDX source types`),
+      gatsbyRemarkPlugins: Joi.array()
+        .items(
+          Joi.string(),
+          Joi.object({
+            resolve: Joi.string(),
+            options: Joi.object({}).unknown(true),
+          })
+        )
+        .default([])
+        .description(`Use Gatsby-specific remark plugins`),
+      remarkPlugins: Joi.array()
+        .items(
+          Joi.alternatives().try(
+            Joi.object({}).unknown(true),
+            Joi.array().items(Joi.object({}).unknown(true))
+          )
+        )
+        .default([])
+        .description(`Specify remark plugins`),
+      rehypePlugins: Joi.array()
+        .items(
+          Joi.alternatives().try(
+            Joi.object({}).unknown(true),
+            Joi.array().items(Joi.object({}).unknown(true))
+          )
+        )
+        .default([])
+        .description(`Specify rehype plugins`),
+      mediaTypes: Joi.array()
+        .items(Joi.string())
+        .default(["text/markdown", "text/x-markdown"])
+        .description(`Determine which media types are processed by MDX`),
+      shouldBlockNodeFromTransformation: Joi.function()
+        .maxArity(1)
+        .default(() => false)
+        .description(
+          `Disable MDX transformation for nodes where this function returns true`
+        ),
+    })
+  }
+}

packages/gatsby-plugin-mdx/package.json

@@ -58,6 +58,7 @@
   "devDependencies": {
     "@mdx-js/mdx": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
+    "gatsby-plugin-utils": "^0.2.31",
     "jest": "^24.9.0",
     "js-combinatorics": "^1.4.5",
     "react-test-renderer": "^16.13.1"