fix(gatsby-plugin-theme-ui): Fast Refresh Compatibility (#1659)

LekoArts · web-flow · commit ce95a2d252a3 · 2021-04-19T10:07:28.000-04:00
diff --git a/examples/custom-pragma/gatsby-browser.js b/examples/custom-pragma/gatsby-browser.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/custom-pragma/gatsby-ssr.js b/examples/custom-pragma/gatsby-ssr.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/custom-pragma/src/index.js b/examples/custom-pragma/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { ThemeProvider, Themed } from 'theme-ui'
 import theme from './theme'
 
-export const wrapRootElement = ({ element }) => (
+export const WrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>
     <Themed.root>{element}</Themed.root>
   </ThemeProvider>
diff --git a/examples/dark-mode/gatsby-browser.js b/examples/dark-mode/gatsby-browser.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/dark-mode/gatsby-ssr.js b/examples/dark-mode/gatsby-ssr.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/dark-mode/src/index.js b/examples/dark-mode/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { ThemeProvider, Themed } from 'theme-ui'
 import theme from './theme'
 
-export const wrapRootElement = ({ element }) => (
+export const WrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>
     <Themed.root>{element}</Themed.root>
   </ThemeProvider>
diff --git a/examples/dark-mode/src/layout.js b/examples/dark-mode/src/layout.js
@@ -2,7 +2,7 @@
 import { jsx, useColorMode, Layout, Header, Main, Container } from 'theme-ui'
 import { Global } from '@emotion/react'
 
-export default (props) => {
+const Layout = (props) => {
   const [mode, setMode] = useColorMode()
   const toggleMode = (e) => {
     setMode(mode === 'dark' ? 'light' : 'dark')
@@ -31,3 +31,5 @@ export default (props) => {
     </Layout>
   )
 }
+
+export default Layout
diff --git a/examples/dark-mode/src/theme.js b/examples/dark-mode/src/theme.js
@@ -1,4 +1,4 @@
-export default {
+const theme = {
   colors: {
     text: '#000',
     background: '#fff',
@@ -39,3 +39,5 @@ export default {
     },
   },
 }
+
+export default theme
diff --git a/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js b/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js
@@ -1,4 +1,4 @@
-export default {
+const theme = {
   useCustomProperties: true,
   initialColorMode: 'light',
   colors: {
@@ -37,3 +37,5 @@ export default {
     },
   },
 }
+
+export default theme
diff --git a/examples/gatsby-plugin/src/layout.js b/examples/gatsby-plugin/src/layout.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Themed } from 'theme-ui'
 
-export default (props) => (
+const Layout = (props) => (
   <Themed.root>
     <header>
       <h2>Theme UI Gatsby Example</h2>
@@ -11,3 +11,5 @@ export default (props) => (
     </main>
   </Themed.root>
 )
+
+export default Layout
diff --git a/examples/gatsby/gatsby-browser.js b/examples/gatsby/gatsby-browser.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/gatsby/gatsby-ssr.js b/examples/gatsby/gatsby-ssr.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/gatsby/src/index.tsx b/examples/gatsby/src/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, ReactNode } from 'react'
 import { ThemeProvider, Themed } from 'theme-ui'
 import theme from './theme'
 
-export const wrapRootElement: FC<{ element: ReactNode }> = ({ element }) => (
+export const WrapRootElement: FC<{ element: ReactNode }> = ({ element }) => (
   <ThemeProvider theme={theme}>
     <Themed.root>{element}</Themed.root>
   </ThemeProvider>
diff --git a/examples/prism/gatsby-browser.js b/examples/prism/gatsby-browser.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/prism/gatsby-ssr.js b/examples/prism/gatsby-ssr.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/prism/src/index.js b/examples/prism/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { ThemeProvider, Themed } from 'theme-ui'
 import theme from './theme'
 
-export const wrapRootElement = ({ element }) => (
+export const WrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>
     <Themed.root>{element}</Themed.root>
   </ThemeProvider>
diff --git a/examples/prism/src/layout.js b/examples/prism/src/layout.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Layout, Header, Main, Container } from 'theme-ui'
 
-export default (props) => (
+const Layout = (props) => (
   <Layout>
     <Header>
       <h2>Theme UI Gatsby Example</h2>
@@ -11,3 +11,5 @@ export default (props) => (
     </Main>
   </Layout>
 )
+
+export default Layout
diff --git a/examples/prism/src/theme.js b/examples/prism/src/theme.js
@@ -1,4 +1,4 @@
-export default {
+const theme = {
   colors: {
     text: '#000',
     background: '#fff',
@@ -89,3 +89,5 @@ export default {
     },
   },
 }
+
+export default theme
diff --git a/examples/typography/gatsby-browser.js b/examples/typography/gatsby-browser.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/typography/gatsby-ssr.js b/examples/typography/gatsby-ssr.js
@@ -1 +1,6 @@
-export { wrapRootElement } from './src'
+import * as React from 'react'
+import { WrapRootElement } from './src'
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)
diff --git a/examples/typography/src/index.js b/examples/typography/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { ThemeProvider, Themed } from 'theme-ui'
 import theme from './theme'
 
-export const wrapRootElement = ({ element }) => (
+export const WrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>
     <Themed.root>{element}</Themed.root>
   </ThemeProvider>
diff --git a/examples/typography/src/layout.js b/examples/typography/src/layout.js
@@ -1,10 +1,12 @@
 /** @jsx jsx */
 import { jsx, Layout, Main, Container } from 'theme-ui'
 
-export default (props) => (
+const Layout = (props) => (
   <Layout>
     <Main>
       <Container>{props.children}</Container>
     </Main>
   </Layout>
 )
+
+export default Layout
diff --git a/examples/typography/src/theme.js b/examples/typography/src/theme.js
@@ -4,7 +4,7 @@ import fairyGates from 'typography-theme-fairy-gates'
 
 const typography = toTheme(fairyGates)
 
-export default merge(typography, {
+const theme = merge(typography, {
   colors: {
     text: '#000',
     background: '#fff',
@@ -26,3 +26,5 @@ export default merge(typography, {
     },
   },
 })
+
+export default theme
diff --git a/packages/docs/gatsby-browser.js b/packages/docs/gatsby-browser.js
@@ -1 +1,5 @@
-export { wrapPageElement } from './src'
+import * as React from 'react'
+
+import { WrapPageElement } from './src'
+
+export const wrapPageElement = (props) => <WrapPageElement {...props} />
diff --git a/packages/docs/gatsby-ssr.js b/packages/docs/gatsby-ssr.js
@@ -1 +1,5 @@
-export { wrapPageElement } from './src'
+import * as React from 'react'
+
+import { WrapPageElement } from './src'
+
+export const wrapPageElement = (props) => <WrapPageElement {...props} />
diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
@@ -39,10 +39,11 @@ const getModeName = (mode) => {
   }
 }
 
-export default (props) => {
+export default function DocsLayout(props) {
   const [menuOpen, setMenuOpen] = useState(false)
   const nav = useRef(null)
   const [mode, setMode] = useColorMode()
+
   const fullwidth =
     (props.pageContext.frontmatter &&
       props.pageContext.frontmatter.fullwidth) ||
diff --git a/packages/docs/src/gatsby-plugin-theme-ui/components.js b/packages/docs/src/gatsby-plugin-theme-ui/components.js
@@ -22,7 +22,7 @@ const heading = (Tag) => (props) =>
     <Tag {...props} />
   )
 
-export default {
+const components = {
   code,
   pre: (props) => props.children,
   h2: heading('h2'),
@@ -33,3 +33,5 @@ export default {
   // "shortcodes"
   Note,
 }
+
+export default components
diff --git a/packages/docs/src/gatsby-plugin-theme-ui/index.js b/packages/docs/src/gatsby-plugin-theme-ui/index.js
@@ -9,7 +9,7 @@ const tableCellStyle = {
   borderBottomStyle: 'solid',
 }
 
-export default {
+const theme = {
   colors: {
     text: '#000000',
     background: '#ffffff',
@@ -357,3 +357,5 @@ export default {
   },
   prism,
 }
+
+export default theme
diff --git a/packages/docs/src/index.js b/packages/docs/src/index.js
@@ -2,7 +2,7 @@
 import { jsx } from 'theme-ui'
 import Layout from './components/layout'
 
-export const wrapPageElement = ({ element, props }) => (
+export const WrapPageElement = ({ element, props }) => (
   <Layout {...props} children={element} />
 )
 
diff --git a/packages/docs/src/pages/getting-started/gatsby.mdx b/packages/docs/src/pages/getting-started/gatsby.mdx
@@ -22,12 +22,14 @@ Create a theme file located at `src/gatsby-plugin-theme-ui/index.js`.
 
 ```js
 // example theme file
-export default {
+const theme = {
   colors: {
     text: '#000',
     background: '#fff',
   },
 }
+
+export default theme
 ```
 
 With `gatsby-plugin-theme-ui`, there is no need to manually use the `ThemeProvider` component.
diff --git a/packages/docs/src/pages/guides/syntax-highlighting.mdx b/packages/docs/src/pages/guides/syntax-highlighting.mdx
@@ -32,11 +32,13 @@ Import and add a syntax theme from the Prism component to your theme object.
 // src/gatsby-plugin-theme-ui/index.js
 import nightOwl from '@theme-ui/prism/presets/night-owl'
 
-export default {
+const theme = {
   styles: {
     pre: {
       ...nightOwl,
     },
   },
 }
+
+export default theme
 ```
diff --git a/packages/docs/src/pages/packages/gatsby-theme-ui-blog.mdx b/packages/docs/src/pages/packages/gatsby-theme-ui-blog.mdx
@@ -53,7 +53,7 @@ module.exports = {
 // shadow src/gatsby-plugin-theme-ui/index.js
 import base from 'gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui'
 
-export default {
+const theme = {
   ...base,
   colors: {
     text: 'white',
@@ -62,6 +62,8 @@ export default {
     secondary: 'magenta',
   },
 }
+
+export default theme
 ```
 
 ## Options
diff --git a/packages/gatsby-plugin-theme-ui/README.md b/packages/gatsby-plugin-theme-ui/README.md
diff --git a/packages/gatsby-plugin-theme-ui/gatsby-browser.js b/packages/gatsby-plugin-theme-ui/gatsby-browser.js
diff --git a/packages/gatsby-plugin-theme-ui/gatsby-ssr.js b/packages/gatsby-plugin-theme-ui/gatsby-ssr.js
diff --git a/packages/gatsby-plugin-theme-ui/src/components.js b/packages/gatsby-plugin-theme-ui/src/components.js
diff --git a/packages/gatsby-plugin-theme-ui/src/index.js b/packages/gatsby-plugin-theme-ui/src/index.js
diff --git a/packages/gatsby-plugin-theme-ui/src/provider.js b/packages/gatsby-plugin-theme-ui/src/provider.js
diff --git a/packages/gatsby-plugin-theme-ui/test/provider.js b/packages/gatsby-plugin-theme-ui/test/provider.js

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`import { jsx, useColorMode, Layout, Header, Main, Container } from 'theme-ui'`
`3`	`3`	`import { Global } from '@emotion/react'`
`4`	`4`
`5`		`-export default (props) => {`
	`5`	`+const Layout = (props) => {`
`6`	`6`	`const [mode, setMode] = useColorMode()`
`7`	`7`	`const toggleMode = (e) => {`
`8`	`8`	`setMode(mode === 'dark' ? 'light' : 'dark')`
`@@ -31,3 +31,5 @@ export default (props) => {`
`31`	`31`	`</Layout>`
`32`	`32`	`)`
`33`	`33`	`}`
	`34`	`+`
	`35`	`+export default Layout`