refactor: convert pluginOptions into MdxPluginOptions instead of extending PluginOptions

Author: axe312ger

packages/gatsby-plugin-mdx/src/compile-mdx.ts

@@ -1,5 +1,5 @@
 import deepmerge from "deepmerge"
-import type { NodePluginArgs } from "gatsby"
+import type { NodePluginArgs, PluginOptions } from "gatsby"
 import type { ProcessorOptions } from "@mdx-js/mdx"
 import type { IFileNode, IMdxMetadata, IMdxNode } from "./types"
 
@@ -77,7 +77,7 @@ export const compileMDXWithCustomOptions = async ({
   cache,
   mdxNode,
 }: {
-  pluginOptions: IMdxPluginOptions
+  pluginOptions: PluginOptions
   customOptions: Partial<IMdxPluginOptions>
   getNode: NodePluginArgs["getNode"]
   getNodesByType: NodePluginArgs["getNodesByType"]

packages/gatsby-plugin-mdx/src/gatsby-node.ts

@@ -8,11 +8,7 @@ import { sentenceCase } from "change-case"
 import fs from "fs-extra"
 import grayMatter from "gray-matter"
 
-import {
-  defaultOptions,
-  enhanceMdxOptions,
-  IMdxPluginOptions,
-} from "./plugin-options"
+import { defaultOptions, enhanceMdxOptions } from "./plugin-options"
 import { IGatsbyLayoutLoaderOptions } from "./gatsby-layout-loader"
 import { compileMDX, compileMDXWithCustomOptions } from "./compile-mdx"
 import { IGatsbyMDXLoaderOptions } from "./gatsby-mdx-loader"
@@ -25,7 +21,7 @@ import { ERROR_MAP } from "./error-utils"
 export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] =
   async (
     { actions, loaders, getNode, getNodesByType, pathPrefix, reporter, cache },
-    pluginOptions: IMdxPluginOptions
+    pluginOptions
   ) => {
     const mdxNodes = getNodesByType(`Mdx`)
     const nodeMap: NodeMap = new Map()
@@ -105,17 +101,18 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] =
  */
 export const resolvableExtensions: GatsbyNode["resolvableExtensions"] = (
   _data,
-  pluginOptions: IMdxPluginOptions
+  pluginOptions
 ) => defaultOptions(pluginOptions).extensions
 
 /**
  * Convert MDX to JSX so that Gatsby can extract the GraphQL queries and render the pages.
  */
 export const preprocessSource: GatsbyNode["preprocessSource"] = async (
   { filename, getNode, getNodesByType, pathPrefix, reporter, cache },
-  pluginOptions: IMdxPluginOptions
+  pluginOptions
 ) => {
-  const { extensions } = defaultOptions(pluginOptions)
+  const options = defaultOptions(pluginOptions)
+  const { extensions } = options
   const splitPath = filename.split(`__mdxPath=`)
   const mdxPath = splitPath.length === 2 ? splitPath[1] : splitPath[0]
 
@@ -169,7 +166,7 @@ export const preprocessSource: GatsbyNode["preprocessSource"] = async (
 export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
   async (
     { getNode, getNodesByType, pathPrefix, reporter, cache, actions, schema },
-    pluginOptions: IMdxPluginOptions
+    pluginOptions
   ) => {
     const { createTypes } = actions
     const typeDefs = [
@@ -271,7 +268,7 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_shouldOnCreateNode: GatsbyNode["unstable_shouldOnCreateNode"] =
-  ({ node }: { node: FileSystemNode }, pluginOptions: IMdxPluginOptions) => {
+  ({ node }: { node: FileSystemNode }, pluginOptions) => {
     const { extensions } = defaultOptions(pluginOptions)
     return node.internal.type === `File` && extensions.includes(node.ext)
   }
@@ -324,7 +321,7 @@ export const onCreateNode: GatsbyNode<FileSystemNode>["onCreateNode"] = async ({
  */
 export const onCreatePage: GatsbyNode["onCreatePage"] = async (
   { page, actions },
-  pluginOptions: IMdxPluginOptions
+  pluginOptions
 ) => {
   const { createPage, deletePage } = actions
   const { extensions } = defaultOptions(pluginOptions)

packages/gatsby-plugin-mdx/src/plugin-options.ts

@@ -1,13 +1,13 @@
 import type { ProcessorOptions } from "@mdx-js/mdx"
-import type { PluginOptions, GatsbyCache, NodePluginArgs } from "gatsby"
+import type { GatsbyCache, NodePluginArgs, PluginOptions } from "gatsby"
 import deepmerge from "deepmerge"
 import { IPluginRefObject } from "gatsby-plugin-utils/types"
 import { getSourcePluginsAsRemarkPlugins } from "./get-source-plugins-as-remark-plugins"
 import rehypeMdxMetadataExtractor from "./rehype-metadata-extractor"
 import { remarkMdxHtmlPlugin } from "./remark-mdx-html-plugin"
 import { remarkPathPlugin } from "./remark-path-prefix-plugin"
 
-export interface IMdxPluginOptions extends Partial<PluginOptions> {
+export interface IMdxPluginOptions {
   extensions: [string]
   mdxOptions: ProcessorOptions
   gatsbyRemarkPlugins?: [IPluginRefObject]
@@ -19,7 +19,7 @@ interface IHelpers {
   reporter: NodePluginArgs["reporter"]
   cache: GatsbyCache
 }
-type MdxDefaultOptions = (pluginOptions: IMdxPluginOptions) => IMdxPluginOptions
+type MdxDefaultOptions = (pluginOptions: PluginOptions) => IMdxPluginOptions
 
 export const defaultOptions: MdxDefaultOptions = pluginOptions => {
   const mdxOptions: ProcessorOptions = {
@@ -28,19 +28,20 @@ export const defaultOptions: MdxDefaultOptions = pluginOptions => {
     providerImportSource: `@mdx-js/react`,
     jsxRuntime: `classic`,
   }
-  const options: IMdxPluginOptions = deepmerge(
-    {
-      extensions: [`.mdx`],
-      mdxOptions,
-    },
+  const defaults = {
+    extensions: [`.mdx`],
+    mdxOptions,
+  }
+  const options = deepmerge(
+    defaults,
     pluginOptions
-  )
+  ) as unknown as IMdxPluginOptions
 
   return options
 }
 
 type EnhanceMdxOptions = (
-  pluginOptions: IMdxPluginOptions,
+  pluginOptions: PluginOptions,
   helpers: IHelpers
 ) => Promise<ProcessorOptions>
 

packages/gatsby/index.d.ts

@@ -795,7 +795,7 @@ export interface GatsbySSR<
 }
 
 export interface PluginOptions {
-  // plugins: unknown[]
+  plugins: unknown[]
   [key: string]: unknown
 }