Extend themes with subplugins

[lannonbr]

@lannonbr Any idea what I'm doing wrong here? I'm hoping to extend @narative/gatsby-theme-novela's use of gatsby-transformer-remark: https://github.com/AryanJ-NYC/webdev-coach-blog/blob/move-to-narrative/gatsby-config.js#L32.

Originally posted by @AryanJ-NYC in #15549 (comment)

With plugins that have sub-plugins, how do we particularly extend the a plugin like this so we can add more sub-plugins inside a theme. In this instance @AryanJ-NYC wants to add in an additional remark plugin.

[lannonbr]

cc: @ChristopherBiscardi

[ChristopherBiscardi]

in the future we'll have an onPluginOptions lifecycle so that all gatsby-transformer-remark sub-plugins could be combined into a single instance. For now themes have to expose the optionality to modify sub-plugins or allow users to turn off the gatsby-transformer-remark plugin and instantiate their own.

[ChristopherBiscardi]

Closing in favor of the feature request ticket at #16697

[daaain]

@AryanJ-NYC For now, you can do a pretty gross but effective workaround by extending the existing config after requiring it like so:

const narativeMdxConfig = require("@narative/gatsby-theme-novela/gatsby-config.js")(
  {}
).plugins.find(i => i.resolve == "gatsby-plugin-mdx")

module.exports = {
  plugins: [
    {
      resolve: "@narative/gatsby-theme-novela",
      options: {
        contentPosts: "content/posts",
        contentAuthors: "content/authors",
        basePath: "/",
        authorsPage: true,
        sources: {
          local: true
          // contentful: true,
        }
      }
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        ...narativeMdxConfig.options,
        gatsbyRemarkPlugins: [
          ...narativeMdxConfig.options.gatsbyRemarkPlugins,
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin: 0 0 1.0725rem 0`
            }
          }
        ]
      }
    }
    }
  ]
}