feat: add waitBeforeTransition option on link (#3)

Author: gregberge

examples/wordpress/src/pages/index.js

@@ -46,7 +46,9 @@ export default function Page({ title, book, specificBook, allBooks, blocks }) {
       <ul>
         {allBooks.map(b => (
           <li key={b.metadata.id}>
-            <Link to={`/books/${b.metadata.slug}`}>{b.name}</Link>
+            <Link waitBeforeTransition to={`/books/${b.metadata.slug}`}>
+              {b.name}
+            </Link>
           </li>
         ))}
       </ul>

packages/smooth-core/src/client/ErrorBoundary.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import loadable from '@loadable/component'
-import { Status } from '../router'
+import { Status } from '../router/Status'
 
 const ErrorPage = loadable(() => import('__smooth_error'))
 

packages/smooth-core/src/client/Routes.js

@@ -1,38 +1,50 @@
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import Page, { getPages } from './Page'
+import HiddenRouter from '../router/HiddenRouter'
+import { Provider as HiddenHistoryContextProvider } from '../router/HiddenHistoryContext'
 
 const pages = getPages()
 
 export default function Routes() {
   return (
-    <Route
-      path="/:lang(.{2})?"
-      render={({
-        match: {
-          url,
-          params: { lang = null },
-        },
-      }) => (
-        <Switch>
-          {pages.map((page, index) => (
-            <Route
-              key={index}
-              path={`${url}${page.routePath}`}
-              render={({ history, match, location }) => (
-                <Page
-                  lang={lang}
-                  indexUrl={`${url}${page.indexPath}`}
-                  page={page}
-                  history={history}
-                  match={match}
-                  location={location}
+    <HiddenHistoryContextProvider>
+      <Route
+        path="/:lang(.{2})?"
+        render={({
+          match: {
+            url,
+            params: { lang = null },
+          },
+        }) => {
+          const routes = (
+            <Switch>
+              {pages.map((page, index) => (
+                <Route
+                  key={index}
+                  path={`${url}${page.routePath}`}
+                  render={({ history, match, location }) => (
+                    <Page
+                      lang={lang}
+                      indexUrl={`${url}${page.indexPath}`}
+                      page={page}
+                      history={history}
+                      match={match}
+                      location={location}
+                    />
+                  )}
                 />
-              )}
-            />
-          ))}
-        </Switch>
-      )}
-    />
+              ))}
+            </Switch>
+          )
+          return (
+            <>
+              {routes}
+              <HiddenRouter>{routes}</HiddenRouter>
+            </>
+          )
+        }}
+      />
+    </HiddenHistoryContextProvider>
   )
 }

packages/smooth-core/src/content/Query.js

@@ -1,12 +1,13 @@
-import React from 'react'
+import React, { useContext, useEffect } from 'react'
 import camelcase from 'camelcase'
 import gql from 'graphql-tag'
 import qs from 'query-string'
 import { Redirect } from 'react-router-dom'
 import { Query as ApolloQuery } from 'react-apollo'
 import PageContext from '../client/PageContext'
-import { HTTPError } from '../router'
+import { HTTPError } from '../router/HTTPError'
 import { applyHook } from '../plugin/browser'
+import { HiddenRouterContext } from '../router/HiddenRouter'
 import {
   getFragmentDefinition,
   getFragment,
@@ -65,6 +66,24 @@ function getVariables(location, lang, slug = 'index') {
   return variables
 }
 
+function Handler({ children, ...props }) {
+  const hiddenRouter = useContext(HiddenRouterContext)
+  useEffect(() => {
+    if (hiddenRouter && !props.loading) {
+      hiddenRouter.onPrefetched()
+    }
+  }, [props.loading])
+
+  if (!props.loading && !props.error && !props.data.contentProps) {
+    return children({
+      ...props,
+      error: new HTTPError({ statusCode: 404 }),
+    })
+  }
+
+  return children(props)
+}
+
 export function Query({ children }) {
   return (
     <PageContext.Consumer>
@@ -85,20 +104,7 @@ export function Query({ children }) {
             query={getQuery(page)}
             variables={getVariables(location, lang, slug)}
           >
-            {apolloProps => {
-              if (
-                !apolloProps.loading &&
-                !apolloProps.error &&
-                !apolloProps.data.contentProps
-              ) {
-                return children({
-                  ...apolloProps,
-                  error: new HTTPError({ statusCode: 404 }),
-                })
-              }
-
-              return children(apolloProps)
-            }}
+            {apolloProps => <Handler {...apolloProps}>{children}</Handler>}
           </ApolloQuery>
         )
       }}

packages/smooth-core/src/router/HttpError.js renamed to packages/smooth-core/src/router/HTTPError.js

@@ -0,0 +1,25 @@
+import React, { createContext, useState } from 'react'
+
+const HiddenHistoryContext = createContext()
+
+export function Provider({ children }) {
+  const [state, setState] = useState({ location: null, action: null })
+  return (
+    <HiddenHistoryContext.Provider
+      value={{
+        location: state.location,
+        action: state.action,
+        push(location) {
+          setState({ location, action: 'PUSH' })
+        },
+        replace(location) {
+          setState({ location, action: 'REPLACE' })
+        },
+      }}
+    >
+      {children}
+    </HiddenHistoryContext.Provider>
+  )
+}
+
+export default HiddenHistoryContext

packages/smooth-core/src/router/HiddenHistoryContext.js

@@ -0,0 +1,12 @@
+import React, { useContext, useMemo } from 'react'
+import { withRouter, Router } from 'react-router-dom'
+import HiddenHistoryContext from './HiddenHistoryContext'
+
+function HiddenLinkRouter({ history, children }) {
+  const hiddenHistory = useContext(HiddenHistoryContext)
+  const newHistory = useMemo(() => ({ ...history }), [history])
+  newHistory.push = hiddenHistory.push
+  return <Router history={newHistory}>{children}</Router>
+}
+
+export default withRouter(HiddenLinkRouter)

packages/smooth-core/src/router/HiddenLinkRouter.js

@@ -0,0 +1,39 @@
+import React, { createContext, useContext } from 'react'
+import { StaticRouter, withRouter } from 'react-router-dom'
+import HiddenHistoryContext from './HiddenHistoryContext'
+
+export const HiddenRouterContext = createContext()
+
+function HiddenRouter({ history, children }) {
+  const hiddenHistory = useContext(HiddenHistoryContext)
+  return (
+    <div style={{ display: 'none' }}>
+      {hiddenHistory.location && (
+        <HiddenRouterContext.Provider
+          value={{
+            onPrefetched: () => {
+              switch (hiddenHistory.action) {
+                case 'PUSH':
+                  history.push(hiddenHistory.location)
+                  break
+                case 'REPLACE':
+                  history.replace(hiddenHistory.location)
+                  break
+                default:
+                  return
+              }
+
+              hiddenHistory.push(null)
+            },
+          }}
+        >
+          <StaticRouter context={{}} location={hiddenHistory.location}>
+            {children}
+          </StaticRouter>
+        </HiddenRouterContext.Provider>
+      )}
+    </div>
+  )
+}
+
+export default withRouter(HiddenRouter)

packages/smooth-core/src/router/HiddenRouter.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link as BaseLink, NavLink as BaseNavLink } from 'react-router-dom'
 import PageContext from '../client/PageContext'
+import HiddenLinkRouter from './HiddenLinkRouter'
 
 function computeTo(to, lang) {
   if (lang) {
@@ -10,16 +11,24 @@ function computeTo(to, lang) {
 }
 
 function createLink(Component) {
-  return props => (
-    <PageContext.Consumer>
-      {pageContext => (
-        <Component
-          {...props}
-          to={computeTo(props.to, pageContext ? pageContext.lang : null)}
-        />
-      )}
-    </PageContext.Consumer>
-  )
+  return ({ waitBeforeTransition, ...props }) => {
+    const link = (
+      <PageContext.Consumer>
+        {pageContext => (
+          <Component
+            {...props}
+            to={computeTo(props.to, pageContext ? pageContext.lang : null)}
+          />
+        )}
+      </PageContext.Consumer>
+    )
+
+    return waitBeforeTransition ? (
+      <HiddenLinkRouter>{link}</HiddenLinkRouter>
+    ) : (
+      link
+    )
+  }
 }
 
 export const Link = createLink(BaseLink)

packages/smooth-core/src/router/Link.js

@@ -11,4 +11,4 @@ export {
 } from 'react-router-dom'
 export * from './Link'
 export * from './Status'
-export * from './HttpError'
+export * from './HTTPError'