feat(gatsby): Make __experimentalThemes part of plugin APIs (#15144)

packages/gatsby/src/bootstrap/index.js

@@ -80,13 +80,17 @@ module.exports = async (args: BootstrapArgs) => {
 
   // theme gatsby configs can be functions or objects
   if (config && config.__experimentalThemes) {
-    const themes = await loadThemes(config)
+    // TODO: deprecation message for old __experimentalThemes
+    const themes = await loadThemes(config, { useLegacyThemes: true })
     config = themes.config
 
     store.dispatch({
       type: `SET_RESOLVED_THEMES`,
       payload: themes.themes,
     })
+  } else if (config) {
+    const plugins = await loadThemes(config, { useLegacyThemes: false })
+    config = plugins.config
   }
 
   if (config && config.polyfill) {

packages/gatsby/src/bootstrap/load-themes/index.js

@@ -9,7 +9,14 @@ const getConfigFile = require(`../get-config-file`)
 // get the gatsby-config file for a theme
 const resolveTheme = async themeSpec => {
   const themeName = themeSpec.resolve || themeSpec
-  const themeDir = path.dirname(require.resolve(themeName))
+  let themeDir
+  try {
+    themeDir = path.dirname(require.resolve(themeName))
+  } catch (e) {
+    // this can be local plugin, and require.resolve will throw
+    // in this case - let's return partial entry
+    return { themeName, themeSpec }
+  }
   const theme = await preferDefault(getConfigFile(themeDir, `gatsby-config`))
   // if theme is a function, call it with the themeConfig
   let themeConfig = theme
@@ -26,16 +33,22 @@ const resolveTheme = async themeSpec => {
 // Theoretically, there could be an infinite loop here but in practice there is
 // no use case for a loop so I expect that to only happen if someone is very
 // off track and creating their own set of themes
-const processTheme = ({ themeName, themeConfig, themeSpec, themeDir }) => {
+const processTheme = (
+  { themeName, themeConfig, themeSpec, themeDir },
+  { useLegacyThemes }
+) => {
+  const themesList = useLegacyThemes
+    ? themeConfig && themeConfig.__experimentalThemes
+    : themeConfig && themeConfig.plugins
   // gatsby themes don't have to specify a gatsby-config.js (they might only use gatsby-node, etc)
   // in this case they're technically plugins, but we should support it anyway
   // because we can't guarantee which files theme creators create first
-  if (themeConfig && themeConfig.__experimentalThemes) {
+  if (themeConfig && themesList) {
     // for every parent theme a theme defines, resolve the parent's
     // gatsby config and return it in order [parentA, parentB, child]
-    return Promise.mapSeries(themeConfig.__experimentalThemes, async spec => {
+    return Promise.mapSeries(themesList, async spec => {
       const themeObj = await resolveTheme(spec)
-      return processTheme(themeObj)
+      return processTheme(themeObj, { useLegacyThemes })
     }).then(arr =>
       arr.concat([{ themeName, themeConfig, themeSpec, themeDir }])
     )
@@ -45,12 +58,12 @@ const processTheme = ({ themeName, themeConfig, themeSpec, themeDir }) => {
   }
 }
 
-module.exports = async config => {
+module.exports = async (config, { useLegacyThemes = false }) => {
   const themesA = await Promise.mapSeries(
-    config.__experimentalThemes,
+    useLegacyThemes ? config.__experimentalThemes : config.plugins,
     async themeSpec => {
       const themeObj = await resolveTheme(themeSpec)
-      return processTheme(themeObj)
+      return processTheme(themeObj, { useLegacyThemes })
     }
   ).then(arr => _.flattenDeep(arr))
 

packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/gatsby-node.js

@@ -4,18 +4,22 @@ exports.onCreateWebpackConfig = (
   { store, stage, getConfig, rules, loaders, actions },
   pluginOptions
 ) => {
-  const { program, themes } = store.getState()
+  const { themes, flattenedPlugins } = store.getState()
 
-  if (themes.themes) {
-    actions.setWebpackConfig({
-      resolve: {
-        plugins: [
-          new GatsbyThemeComponentShadowingResolverPlugin({
-            themes: themes.themes,
-            projectRoot: program.directory,
-          }),
-        ],
-      },
-    })
-  }
+  actions.setWebpackConfig({
+    resolve: {
+      plugins: [
+        new GatsbyThemeComponentShadowingResolverPlugin({
+          themes: themes.themes
+            ? themes.themes
+            : flattenedPlugins.map(plugin => {
+                return {
+                  themeDir: plugin.pluginFilepath,
+                  themeName: plugin.name,
+                }
+              }),
+        }),
+      ],
+    },
+  })
 }

packages/gatsby/src/query/query-compiler.js

@@ -362,11 +362,19 @@ export { Runner, resolveThemes }
 
 export default async function compile(): Promise<Map<string, RootQuery>> {
   // TODO: swap plugins to themes
-  const { program, schema, themes } = store.getState()
+  const { program, schema, themes, flattenedPlugins } = store.getState()
 
   const runner = new Runner(
     program.directory,
-    resolveThemes(themes.themes),
+    resolveThemes(
+      themes.themes
+        ? themes.themes
+        : flattenedPlugins.map(plugin => {
+            return {
+              themeDir: plugin.pluginFilepath,
+            }
+          })
+    ),
     schema
   )
 

packages/gatsby/src/utils/get-static-dir.js

@@ -10,21 +10,24 @@ const { store } = require(`../redux`)
  */
 exports.copyStaticDirs = () => {
   // access the store to get themes
-  const { themes } = store.getState() // ensure there are themes
+  const { themes, flattenedPlugins } = store.getState()
+  // if there are legacy themes, only use them. Otherwise proceed with plugins
+  const themesSet = themes.themes
+    ? themes.themes
+    : flattenedPlugins.map(plugin => {
+        return {
+          themeDir: plugin.pluginFilepath,
+          themeName: plugin.name,
+        }
+      })
 
-  if (themes && themes.themes) {
-    themes.themes
-      // create an array of potential theme static folders
-      .map(theme => nodePath.resolve(theme.themeDir, `static`))
-      // filter out the static folders that don't exist
-      .filter(themeStaticPath => fs.existsSync(themeStaticPath))
-      // copy the files for each folder into the user's build
-      .map(folder =>
-        fs.copySync(folder, nodePath.join(process.cwd(), `public`), {
-          dereference: true,
-        })
-      )
-  }
+  themesSet
+    // create an array of potential theme static folders
+    .map(theme => nodePath.resolve(theme.themeDir, `static`))
+    // filter out the static folders that don't exist
+    .filter(themeStaticPath => fs.existsSync(themeStaticPath))
+    // copy the files for each folder into the user's build
+    .map(folder => fs.copySync(folder, nodePath.join(process.cwd(), `public`)))
 
   const staticDir = nodePath.join(process.cwd(), `static`)
   if (!fs.existsSync(staticDir)) return Promise.resolve()

packages/gatsby/src/utils/webpack.config.js

@@ -282,6 +282,7 @@ module.exports = async (program, directory, suppliedStage) => {
         })
       )
     }
+
     switch (stage) {
       case `develop`: {
         // get schema to pass to eslint config and program for directory