feat(gatsby-transformer-remark): use subplugin annotation to use automatic subplugin module loading (#33039)

Author: pieh

packages/gatsby-transformer-remark/src/create-schema-customization.js

@@ -40,7 +40,9 @@ module.exports = (nodeApiArgs, pluginOptions = {}) => {
   // to customize the GraphQL schema. This makes it possible for subplugins to
   // modify types owned by `gatsby-transformer-remark`.
   plugins.forEach(plugin => {
-    const resolvedPlugin = require(plugin.resolve)
+    const resolvedPlugin =
+      _CFLAGS_.GATSBY_MAJOR === `4` ? plugin.module : require(plugin.resolve)
+
     if (typeof resolvedPlugin.createSchemaCustomization === `function`) {
       resolvedPlugin.createSchemaCustomization(
         nodeApiArgs,

packages/gatsby-transformer-remark/src/extend-node-type.js

@@ -123,7 +123,8 @@ module.exports = function remarkExtendNodeType(
     }
 
     for (const plugin of pluginOptions.plugins) {
-      const requiredPlugin = require(plugin.resolve)
+      const requiredPlugin =
+        _CFLAGS_.GATSBY_MAJOR === `4` ? plugin.module : require(plugin.resolve)
       if (_.isFunction(requiredPlugin.setParserPlugins)) {
         for (const parserPlugin of requiredPlugin.setParserPlugins(
           plugin.pluginOptions
@@ -201,7 +202,10 @@ module.exports = function remarkExtendNodeType(
       }
       // Use a for loop to run remark plugins serially.
       for (const plugin of pluginOptions.plugins) {
-        const requiredPlugin = require(plugin.resolve)
+        const requiredPlugin =
+          _CFLAGS_.GATSBY_MAJOR === `4`
+            ? plugin.module
+            : require(plugin.resolve)
         // Allow both exports = function(), and exports.default = function()
         const defaultFunction = _.isFunction(requiredPlugin)
           ? requiredPlugin
@@ -242,7 +246,10 @@ module.exports = function remarkExtendNodeType(
       //
       // Use for loop to run remark plugins serially.
       for (const plugin of pluginOptions.plugins) {
-        const requiredPlugin = require(plugin.resolve)
+        const requiredPlugin =
+          _CFLAGS_.GATSBY_MAJOR === `4`
+            ? plugin.module
+            : require(plugin.resolve)
         if (typeof requiredPlugin.mutateSource === `function`) {
           await requiredPlugin.mutateSource(
             {

packages/gatsby-transformer-remark/src/gatsby-node.js

@@ -22,16 +22,22 @@ exports.pluginOptionsSchema = function ({ Joi }) {
     excerpt_separator: Joi.string().description(
       `If your Markdown file contains HTML, excerpt will not return a value. In that case, you can set an excerpt_separator to an HTML tag. Edit your Markdown files to include that HTML tag after the text you’d like to appear in the excerpt.`
     ),
-    plugins: Joi.array()
-      .items(
-        Joi.string(),
-        Joi.object({
-          resolve: Joi.string(),
-          options: Joi.object({}).unknown(true),
-        })
-      )
-      .description(
-        `A list of remark plugins. See also: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark for examples`
-      ),
+    plugins:
+      _CFLAGS_.GATSBY_MAJOR === `4`
+        ? Joi.subPlugins({ entry: `index` }).description(
+            `A list of remark plugins. See also: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark for examples`
+          )
+        : Joi.array()
+            .items(
+              Joi.string(),
+              Joi.object({
+                resolve: Joi.string(),
+                options: Joi.object({}).unknown(true),
+              })
+            )
+            .default([])
+            .description(
+              `A list of remark plugins. See also: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark for examples`
+            ),
   })
 }