more tmp

gatsbyjs · Feb 26, 2021 · 7e1a0f4 · 7e1a0f4
1 parent 27bc687
commit 7e1a0f4
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 50 deletions.
diff --git a/e2e-tests/development-runtime/gatsby-browser.js b/e2e-tests/development-runtime/gatsby-browser.js
@@ -1,4 +1,6 @@
-const Wrapper = require(`./src/wrap-root-element`).default
+// const Wrapper = require(`./src/wrap-root-element`).default
+import WrapRootElement from "./src/wrap-root-element"
+import * as React from "react"
 
 if (typeof window !== `undefined`) {
   window.___PageComponentLifecycleCallsLog = []
@@ -11,16 +13,21 @@ const addLogEntry = (action, location) => {
   })
 }
 
-exports.onPreRouteUpdate = ({ location }) => {
-  addLogEntry(`onPreRouteUpdate`, location)
-}
+// export const onPreRouteUpdate = ({ location }) => {
+//   addLogEntry(`onPreRouteUpdate`, location)
+// }
 
-exports.onRouteUpdate = ({ location }) => {
-  addLogEntry(`onRouteUpdate`, location)
-}
+// export const onRouteUpdate = ({ location }) => {
+//   addLogEntry(`onRouteUpdate`, location)
+// }
+// export const onPrefetchPathname = ({ pathname }) => {
+//   addLogEntry(`onPrefetchPathname`, pathname)
+// }
 
-exports.onPrefetchPathname = ({ pathname }) => {
-  addLogEntry(`onPrefetchPathname`, pathname)
+export const wrapPageElement = ({ element }) => {
+  return <div style={{ borderLeft: "30px solid yellow" }}>{element}</div>
 }
 
-exports.wrapRootElement = Wrapper
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/e2e-tests/development-runtime/src/wrap-root-element.js b/e2e-tests/development-runtime/src/wrap-root-element.js
@@ -1,34 +1,40 @@
 import React from "react"
 import { StaticQuery, graphql } from "gatsby"
 
-const WrapRootElement = ({ element }) => (
-  <StaticQuery
-    query={graphql`
-      query MetaQuery {
-        site {
-          siteMetadata {
-            title
+const Wat = ({ element }, ...args) => {
+  console.log(`re-render`, args)
+  return (
+    <>
+      {/* <StaticQuery
+        query={graphql`
+          query MetaQuery {
+            site {
+              siteMetadata {
+                title
+              }
+            }
           }
-        }
-      }
-    `}
-    render={({
-      site: {
-        siteMetadata: { title },
-      },
-    }) => (
-      <>
-        {element}
-        <div>
-          StaticQuery in wrapRootElement test (should show site title):
-          <span data-testid="wrap-root-element-result">{title}</span>
-          <div data-testid="gatsby-browser-hmr">
-            %TEST_HMR_IN_GATSBY_BROWSER%
-          </div>
-        </div>
-      </>
-    )}
-  />
-)
-
-export default WrapRootElement
+        `}
+        render={({
+          site: {
+            siteMetadata: { title },
+          },
+        }) => (
+          <>
+            {element}
+            <div>
+              StaticQuery in wrapRootElement test (should show site title):
+              <span data-testid="wrap-root-element-result">{title}</span>
+            </div>
+          </>
+        )}
+      /> */}
+      {element}
+      <div data-testid="gatsby-browser-hmr">
+        aHMR_IN_GATSBY_BROWSER_WORKS9xzzzvaaddadsabgg
+      </div>
+    </>
+  )
+}
+export default Wat
+// export { WrapRootElement }
diff --git a/packages/gatsby/cache-dir/api-runner-browser.js b/packages/gatsby/cache-dir/api-runner-browser.js
@@ -5,6 +5,20 @@ const {
   loadPageSync,
 } = require(`./loader`).publicLoader
 
+function getApi(api, plugin) {
+  if (plugin[api]) {
+    return plugin[api]
+  }
+
+  if (api === `wrapPageElement`) {
+    return plugin[`WrapPageElement`]
+  } else if (api === `wrapRootElement`) {
+    return plugin[`WrapRootElement`]
+  }
+
+  return false
+}
+
 exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => {
   // Hooks for gatsby-cypress's API handler
   if (process.env.CYPRESS_SUPPORT) {
@@ -18,15 +32,19 @@ exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => {
   }
 
   let results = plugins.map(plugin => {
-    if (!plugin.plugin[api]) {
+    const apiToRun = getApi(api, plugin.plugin)
+    if (!apiToRun) {
       return undefined
     }
+    // if (!plugin.plugin[api]) {
+    //   return undefined
+    // }
 
     args.getResourceURLsForPathname = getResourceURLsForPathname
     args.loadPage = loadPage
     args.loadPageSync = loadPageSync
 
-    const result = plugin.plugin[api](args, plugin.options)
+    const result = apiToRun(args, plugin.options)
     if (result && argTransform) {
       args = argTransform({ args, result, plugin })
     }
@@ -46,10 +64,10 @@ exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => {
 }
 
 exports.apiRunnerAsync = (api, args, defaultReturn) =>
-  plugins.reduce(
-    (previous, next) =>
-      next.plugin[api]
-        ? previous.then(() => next.plugin[api](args, next.options))
-        : previous,
-    Promise.resolve()
-  )
+  plugins.reduce((previous, next) => {
+    const apiToRun = getApi(api, next.plugin)
+
+    return apiToRun
+      ? previous.then(() => apiToRun(args, next.options))
+      : previous
+  }, Promise.resolve())
diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -272,7 +272,7 @@ module.exports = async (
   function getDevtool() {
     switch (stage) {
       case `develop`:
-        return `eval-cheap-module-source-map`
+        return `cheap-module-source-map`
       // use a normal `source-map` for the html phases since
       // it gives better line and column numbers
       case `develop-html`: