refactor and pair down to a singular option

Author: Laurie Barth

packages/gatsby-plugin-theme-ui/README.md

@@ -20,9 +20,7 @@ prevent a flash of unstyled colors when using color modes.
 
 | Key                      | Default value    | Description                                                                      |
 | ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
-| `themeModule`               | `null`            | JSON theme object, use the `require` syntax to include it in options. Make sure the package you're requiring is installed in your dependencies.               |
-| `themeModulePath`            | `null`  | A string package name that the plugin will require for you. Make sure the package you're requiring is installed in your dependencies.                                                             |
-
+| `themePreset`               | `null`            | This can be a JSON theme object or a string package name. Make sure the package you're requiring is installed in your dependencies.               |
 
 > Note that this plugin assumes the theme object is exported as `default`.
 

packages/gatsby-plugin-theme-ui/gatsby-node.js

@@ -1,60 +1,58 @@
 exports.onPreInit = (__, options) => {
-    let {themeModulePath} = options
-    
-    if(themeModulePath) {
-      try {
-        options.themeModulePath = require(themeModulePath)
-      } catch {
-        reporter.error(`It appears your theme dependency is not installed. Try running \`${generateInstallInstructions()} ${themeModulePath}\``)
-      }
+  let { themePreset } = options
+
+  if (typeof themePreset === 'string') {
+    try {
+      options.themePreset = require(themePreset)
+    } catch {
+      reporter.error(
+        `It appears your theme dependency is not installed. Try running \`${generateInstallInstructions()} ${themeModule}\``
+      )
+    }
   }
 }
 
-
 function generateInstallInstructions() {
   const { getConfigStore } = require(`gatsby-core-utils`)
 
   const packageMangerConfigKey = `cli.packageManager`
   const PACKAGE_MANGER = getConfigStore().get(packageMangerConfigKey) || `yarn`
 
-  const installKeyWord = PACKAGE_MANGER === `yarn` ? "add" : "install"
+  const installKeyWord = PACKAGE_MANGER === `yarn` ? 'add' : 'install'
 
   return `${PACKAGE_MANGER} ${installKeyWord}`
 }
 
 exports.createSchemaCustomization = ({ actions }) => {
-    const { createTypes } = actions
-  
-    createTypes(`
+  const { createTypes } = actions
+
+  createTypes(`
       type ThemeUiConfig implements Node {
-        themeModule: JSON,
-        themeModulePath: JSON,
+        themePreset: JSON,
       }
     `)
+}
+
+exports.sourceNodes = (
+  { actions, createContentDigest },
+  { themePreset = {} }
+) => {
+  const { createNode } = actions
+
+  const themeUiConfig = {
+    themePreset,
   }
-  
-  exports.sourceNodes = (
-    { actions, createContentDigest },
-    { themeModule, themeModulePath}
-  ) => {      
-    const { createNode } = actions
-  
-    const themeUiConfig = {
-        themeModule,
-        themeModulePath,
-    }
-  
-    createNode({
-      ...themeUiConfig,
-      id: `gatsby-plugin-theme-ui-config`,
-      parent: null,
-      children: [],
-      internal: {
-        type: `ThemeUiConfig`,
-        contentDigest: createContentDigest(themeUiConfig),
-        content: JSON.stringify(themeUiConfig),
-        description: `Options for gatsby-plugin-theme-ui`,
-      },
-    })
-  } 
 
+  createNode({
+    ...themeUiConfig,
+    id: `gatsby-plugin-theme-ui-config`,
+    parent: null,
+    children: [],
+    internal: {
+      type: `ThemeUiConfig`,
+      contentDigest: createContentDigest(themeUiConfig),
+      content: JSON.stringify(themeUiConfig),
+      description: `Options for gatsby-plugin-theme-ui`,
+    },
+  })
+}

packages/gatsby-plugin-theme-ui/src/hooks/configOptions.js

@@ -1,16 +1,15 @@
-import { useStaticQuery, graphql } from "gatsby"
+import { useStaticQuery, graphql } from 'gatsby'
 
 const useThemeUiConfig = () => {
   const data = useStaticQuery(graphql`
     query {
       themeUiConfig(id: { eq: "gatsby-plugin-theme-ui-config" }) {
-        themeModule
-        themeModulePath
+        themePreset
       }
     }
   `)
 
   return data.themeUiConfig
 }
 
-export default useThemeUiConfig
+export default useThemeUiConfig

packages/gatsby-plugin-theme-ui/src/provider.js

@@ -1,44 +1,24 @@
 /** @jsx jsx */
-import {
-  jsx,
-  ThemeProvider,
-  merge
-} from 'theme-ui'
+import { jsx, ThemeProvider, merge } from 'theme-ui'
 import theme from './index'
 import components from './components'
 import useThemeUiConfig from './hooks/configOptions'
 
-
-const Root = ({children}) => {
+const Root = ({ children }) => {
   const themeUiConfig = useThemeUiConfig()
-  const {themeModule, themeModulePath} = themeUiConfig
+  const { themePreset } = themeUiConfig
 
-  let themeWrapper
-  if (themeModule) {
-    themeWrapper = themeModule
-  }
+  const theme = themePreset.default || themePreset
 
-  if (themeModulePath) {
-    themeWrapper = themeModulePath
-  }
-  
-  if(themeWrapper && ('default' in themeWrapper)) {
-    themeWrapper = themeWrapper.default
-  }
+  const fullTheme = merge(theme, localTheme)
 
-  themeWrapper = merge(themeWrapper, {
-    ...theme
-  })
   return (
-    <ThemeProvider theme={themeWrapper} components={components}>
-    {children}
+    <ThemeProvider theme={fullTheme} components={components}>
+      {children}
     </ThemeProvider>
   )
 }
 
 export const wrapRootElement = ({ element }) => {
-  return (
-    <Root>{element}</Root>
-  )
+  return <Root>{element}</Root>
 }
-