fix: namespace layout global and move layout to wrap page to pre… (#167)

fix: namespace layout global and move layout to wrap page to prevent

example/.eslintrc.json

@@ -1,5 +1,5 @@
 {
   "globals": {
-    "GATSBY_LAYOUT_COMPONENT_PATH": false
+    "TL__GATSBY_LAYOUT_COMPONENT_PATH": false
   }
 }

package.json

@@ -21,8 +21,8 @@
 	"license": "MIT",
 	"scripts": {
 		"release": "standard-version",
-		"copy-files": "mkdir lib || true && cp .eslintrc.json readme.md package.json lib",
-		"copy-files-src": "mkdir src || true && cp .eslintrc.json readme.md package.json src",
+		"copy-files": "mkdir lib || true && cp readme.md package.json lib",
+		"copy-files-src": "mkdir src || true && cp readme.md package.json src",
 		"build": "yarn copy-files && babel src --out-dir lib --copy-files --ignore **/__tests__",
 		"watch": "yarn copy-files && babel -w src --out-dir lib --copy-files --ignore **/__tests__ --verbose",
 		"npm-publish": "git push --follow-tags origin master && yarn build && cd lib && npm publish && cd ../"

src/components/Layout.js

@@ -1,18 +1,19 @@
+/* eslint-disable no-undef */
 const React = require('react')
 
 const preferDefault = m => (m && m.default) || m
 let Layout = false
 
 if (
-	typeof GATSBY_LAYOUT_COMPONENT_PATH !== `undefined` &&
-	!!GATSBY_LAYOUT_COMPONENT_PATH
+	typeof TL__GATSBY_LAYOUT_COMPONENT_PATH !== `undefined` &&
+	!!TL__GATSBY_LAYOUT_COMPONENT_PATH
 ) {
 	try {
-		Layout = preferDefault(require(GATSBY_LAYOUT_COMPONENT_PATH))
+		Layout = preferDefault(require(TL__GATSBY_LAYOUT_COMPONENT_PATH))
 	} catch (e) {
 		if (e.toString().indexOf(`Error: Cannot find module`) !== -1) {
 			throw new Error(
-				`Couldn't find layout component at "${GATSBY_LAYOUT_COMPONENT_PATH}.\n\n` +
+				`Couldn't find layout component at "${TL__GATSBY_LAYOUT_COMPONENT_PATH}.\n\n` +
 					`Please create layout component in that location or specify path to layout component in gatsby-config.js`
 			)
 		} else {

src/components/TransitionHandler.js

@@ -3,7 +3,6 @@ import { Transition, TransitionGroup } from 'react-transition-group'
 import { Location } from '@reach/router'
 
 import TransitionRenderer from './TransitionRenderer'
-import { LayoutComponent as Layout } from './Layout'
 import delayTransitionRender from './delayTransitionRender'
 import { Consumer } from '../context/createTransitionContext'
 import { returnTransitionState } from '../utils/returnTransitionState'
@@ -44,121 +43,117 @@ export default class TransitionHandler extends Component {
 					return (
 						<Location>
 							{({ location: { action, pathname } }) => (
-								<Layout {...props}>
-									<div className="tl-edges">
-										<TransitionGroup component={null}>
-											<DelayedTransition
-												key={pathname} // we're using seconds but transitiongroup uses ms
-												delay={getMs(entryDelay)}
-												timeout={{
-													enter: getMs(entryLength),
-													exit: getMs(exitLength),
-												}}
-												onEnter={node =>
-													!!node &&
-													!window.__tl_back_button_pressed &&
-													onEnter({
-														node,
-														action,
-														inTransition,
-														entryTrigger,
-														entryProps,
-														exitProps,
-														pathname,
-														updateContext,
-														triggerResolve,
-														preventScrollJump,
-														hash,
-														appearAfter: getMs(
-															appearAfter
-														),
-														e,
-													})
+								<div className="tl-edges">
+									<TransitionGroup component={null}>
+										<DelayedTransition
+											key={pathname} // we're using seconds but transitiongroup uses ms
+											delay={getMs(entryDelay)}
+											timeout={{
+												enter: getMs(entryLength),
+												exit: getMs(exitLength),
+											}}
+											onEnter={node =>
+												!!node &&
+												!window.__tl_back_button_pressed &&
+												onEnter({
+													node,
+													action,
+													inTransition,
+													entryTrigger,
+													entryProps,
+													exitProps,
+													pathname,
+													updateContext,
+													triggerResolve,
+													preventScrollJump,
+													hash,
+													appearAfter: getMs(
+														appearAfter
+													),
+													e,
+												})
+											}
+											onExit={node =>
+												!!node &&
+												!window.__tl_back_button_pressed &&
+												onExit({
+													node,
+													inTransition,
+													exitTrigger,
+													entryProps,
+													exitProps,
+													triggerResolve,
+													e,
+												})
+											}>
+											{transitionStatus => {
+												const mount =
+													transitionStatus ===
+														'entering' ||
+													transitionStatus ===
+														'entered'
+
+												const states = {
+													entry: {
+														state: entryState,
+														delay: entryDelay,
+														length: entryLength,
+													},
+													exit: {
+														state: exitState,
+														delay: exitDelay,
+														length: exitLength,
+													},
 												}
-												onExit={node =>
-													!!node &&
-													!window.__tl_back_button_pressed &&
-													onExit({
-														node,
-														inTransition,
-														exitTrigger,
-														entryProps,
-														exitProps,
-														triggerResolve,
-														e,
-													})
-												}>
-												{transitionStatus => {
-													const mount =
-														transitionStatus ===
-															'entering' ||
-														transitionStatus ===
-															'entered'
 
-													const states = {
-														entry: {
-															state: entryState,
-															delay: entryDelay,
-															length: entryLength,
-														},
-														exit: {
-															state: exitState,
-															delay: exitDelay,
-															length: exitLength,
-														},
+												const current = mount
+													? states.entry
+													: states.exit
+
+												const transitionState = returnTransitionState(
+													{
+														inTransition,
+														location:
+															props.location,
+														transitionIdHistory,
+														transitionStatus,
+														current,
+														mount,
+														...states,
 													}
+												)
 
-													const current = mount
-														? states.entry
-														: states.exit
+												const exitZindex =
+													exitProps.zIndex || 0
+												const entryZindex =
+													entryProps.zIndex || 1
 
-													const transitionState = returnTransitionState(
-														{
-															inTransition,
-															location:
-																props.location,
-															transitionIdHistory,
-															transitionStatus,
-															current,
-															mount,
-															...states,
+												return (
+													<TransitionRenderer
+														mount={mount}
+														entryZindex={
+															entryZindex
 														}
-													)
-
-													const exitZindex =
-														exitProps.zIndex || 0
-													const entryZindex =
-														entryProps.zIndex || 1
-
-													return (
-														<TransitionRenderer
-															mount={mount}
-															entryZindex={
-																entryZindex
-															}
-															exitZindex={
-																exitZindex
-															}
-															transitionStatus={
-																transitionStatus
-															}
-															transitionState={
-																transitionState
-															}
-															children={children}
-															injectPageProps={
-																injectPageProps
-															}
-															appearAfter={getMs(
-																appearAfter
-															)}
-														/>
-													)
-												}}
-											</DelayedTransition>
-										</TransitionGroup>
-									</div>
-								</Layout>
+														exitZindex={exitZindex}
+														transitionStatus={
+															transitionStatus
+														}
+														transitionState={
+															transitionState
+														}
+														children={children}
+														injectPageProps={
+															injectPageProps
+														}
+														appearAfter={getMs(
+															appearAfter
+														)}
+													/>
+												)
+											}}
+										</DelayedTransition>
+									</TransitionGroup>
+								</div>
 							)}
 						</Location>
 					)

src/gatsby-node.js

@@ -22,7 +22,7 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => {
 	actions.setWebpackConfig({
 		plugins: [
 			plugins.define({
-				GATSBY_LAYOUT_COMPONENT_PATH: JSON.stringify(
+				TL__GATSBY_LAYOUT_COMPONENT_PATH: JSON.stringify(
 					absoluteComponentPath
 				),
 			}),

src/wrap-page.js

@@ -1,12 +1,14 @@
 const React = require('react')
 const TransitionHandler = require('./components/TransitionHandler').default
-const InternalProvider = require('./context/InternalProvider').default
+const Layout = require('./components/Layout').LayoutComponent
 
 // eslint-disable-next-line react/prop-types,react/display-name
 module.exports = ({ element, props }, pluginOptions) => {
 	return (
-		<TransitionHandler {...props} {...pluginOptions}>
-			{element}
-		</TransitionHandler>
+		<Layout {...props}>
+			<TransitionHandler {...props} {...pluginOptions}>
+				{element}
+			</TransitionHandler>
+		</Layout>
 	)
 }