add uniform wrapPageElement and wrapRootElement apis to SSR and Browser #7204

pieh · 2018-08-10T01:02:56Z

We are missing proper hooks and method to wrap either Page components (to restore layout, get some transition solution using plugins) or Router/Root components (to setup Providers) that can be used in both SSR and Browser envs.

Because of that other APIs were missused and their restrictions often caused problems (like limitation to single use of API).

This adds:

wrapRootElement to both gatsby-ssr and gatsby-browser
wrapPageElement to both gatsby-ssr and gatsby-browser
wrapRootElement and wrapPageElement hooks are chainable - meaning more than 1 plugin can use them.

wrapRootComponent is getting removed in favour of wrapPageElement - It also slightly modifies signature of wrapRootComponent, which now should be simpler - return componets and not function that returns components. Also because it is now chainable - Root react component is no longer passed - now component Element is passed which is instance of react component - this was done mainly because I wanted to keep signatures of new APIs as close as possible and this way we won't have to pass page props to components we know nothing about in wrapPageComponent - it's enough that we use component instance that is already created.

Because of this change I added some checks in development - there is still TODO to add this change to migration guide, generate short link and link to it.

This is first part of resolution for #6127

… input for another

KyleAMathews · 2018-08-10T01:06:20Z

Deploy preview for using-postcss-sass failed.

Built with commit e50552b

https://app.netlify.com/sites/using-postcss-sass/deploys/5b754edbdd28ef648dced780

gatsbybot · 2018-08-10T01:09:14Z

Deploy preview for gatsbygram ready!

Built with commit e50552b

https://deploy-preview-7204--gatsbygram.netlify.com

gatsbybot · 2018-08-10T01:09:27Z

Deploy preview for using-drupal ready!

Built with commit e50552b

https://deploy-preview-7204--using-drupal.netlify.com

KyleAMathews · 2018-08-10T08:39:53Z

Deploy preview for gatsbyjs failed.

Built with commit e50552b

https://app.netlify.com/sites/gatsbyjs/deploys/5b754edadd28ef648dced774

KyleAMathews · 2018-08-10T09:59:58Z

Deploy preview for using-styled-components failed.

Built with commit b1625e2

https://app.netlify.com/sites/using-styled-components/deploys/5b74c472fdd72a20a5f6639c

KyleAMathews · 2018-08-10T10:00:18Z

Deploy preview for using-contentful failed.

Built with commit b1625e2

https://app.netlify.com/sites/using-contentful/deploys/5b74c473fdd72a20a5f6639f

KyleAMathews · 2018-08-10T10:00:20Z

Deploy preview for using-glamor failed.

Built with commit b1625e2

https://app.netlify.com/sites/using-glamor/deploys/5b74c471fdd72a20a5f66399

KyleAMathews · 2018-08-10T10:00:23Z

Deploy preview for using-jss failed.

Built with commit b1625e2

https://app.netlify.com/sites/using-jss/deploys/5b74c475fdd72a20a5f663b7

KyleAMathews · 2018-08-10T10:00:41Z

Deploy preview for image-processing failed.

Built with commit b1625e2

https://app.netlify.com/sites/image-processing/deploys/5b74c471fdd72a20a5f66396

…tion guide

pieh · 2018-08-16T00:44:50Z

packages/gatsby/src/bootstrap/load-plugins/validate.js

+      },
+      wrapRootComponent: {
+        replacement: `wrapRootElement`,
+        migrationLink: `https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#browser-api-wraprootcomponent-was-removed`,


TODO: setup short link once this is merged

…s done in node env now

KyleAMathews

Looks fantastic! Only found a few copy nits that need corrected. Super excited for this to land!

KyleAMathews · 2018-08-16T17:30:40Z

docs/docs/migrating-from-v1-to-v2.md

@@ -874,6 +895,26 @@ Import graphql types from `gatsby/graphql` to prevent `Schema must contain uniqu
 +const { GraphQLString } = require(`gatsby/graphql`)
 ```

+### Browser API `wrapRootComponent` was removed


Maybe say, "was replaced with wrapRootElement"?

KyleAMathews · 2018-08-16T17:57:00Z

packages/gatsby-plugin-layout/README.md

+
+Wrap pages in component that won't get remounted on page changes.
+
+Wrapping component will have access to all props available in Page components. This is escape hatch to get basic v1 layouts back.


Missing an "an" — "This is a escape"

KyleAMathews · 2018-08-16T17:57:54Z

packages/gatsby-plugin-layout/README.md

+)
+```
+
+And then You can use it anywhere:


lower case y in you.

pieh · 2018-08-16T18:48:14Z

Add mention in layout removal section in migration guide pointing to gatsby-plugin-layout

chasemccoy · 2018-08-16T20:20:28Z

Glad to see this wrapping up, I've been waiting to get this into my site! Thanks for the hard work!

m-allanson

🕺

…er (gatsbyjs#7204) * Remove not used API hook * save browser plugin names in development to identify plugins * update using-redux example * allow ssr and browser api runners to use return of previous plugin as input for another * allow chaining of browser wrapRootComponent api * add chainable wrapRootComponent api to ssr * api docs corrections * add wrapPageComponent to both ssr and browser APIs * update replaceRouterComponent migration section * add migration guide section on wrapRootComponent signature change * add example to wrapPageComponent / wrapRootComponent * add link to migration guide in console error * update gatsby-plugin-jss * styletron plugin and example update * add gatsby-plugin-layout * update styled-components plugin * add using-multiple-providers-example * fix lint * add some clarification to docs * gatsby-plugin-layout version sanity check + readme update * let preferDefault do its jon - thanks porfirioribeiro * rename wrapXcomponent to wrapXelement * update migration guide * migration guide docs update * add console warning when wrapRootComponent is used with link to migration guide * [gatsby-plugin-layout] default to `src/layouts/index.js` * update gatsby-plugin-layout readme with default settings * [gatsby-plugin-layout] proper version syntax * use shortlink * no need for plugin name, in browser requires list - migration check is done in node env now * typos * migration guide section rename * link to gatsby-plugin-layout in layout component removal section * missed typo

@amberleyromo

* Part of #7204 Also added in some language from a quick review. Signed-off-by: moxiegirl <[email protected]> * Responding to @amberleyromo comment Signed-off-by: moxiegirl <[email protected]> * tweaks

@amberleyromo

* Part of gatsbyjs#7204 Also added in some language from a quick review. Signed-off-by: moxiegirl <[email protected]> * Responding to @amberleyromo comment Signed-off-by: moxiegirl <[email protected]> * tweaks

pieh added 8 commits August 9, 2018 15:03

Remove not used API hook

9377d6f

save browser plugin names in development to identify plugins

19ab8ca

update using-redux example

ac151e2

allow ssr and browser api runners to use return of previous plugin as…

2dcf1a8

… input for another

allow chaining of browser wrapRootComponent api

c086f0b

add chainable wrapRootComponent api to ssr

874e909

api docs corrections

6da6cc8

add wrapPageComponent to both ssr and browser APIs

c6ddf76

pieh mentioned this pull request Aug 10, 2018

[v2] Guidelines around layout changes #6127

Closed

Merge remote-tracking branch 'origin/master' into browser-ssr-wrappers

df8a9b5

pieh added 5 commits August 10, 2018 10:23

update replaceRouterComponent migration section

92a24e3

add migration guide section on wrapRootComponent signature change

c99f907

add example to wrapPageComponent / wrapRootComponent

fec0a2f

add link to migration guide in console error

ca7f56c

Merge remote-tracking branch 'origin/master' into browser-ssr-wrappers

83c179b

pieh added 6 commits August 10, 2018 12:41

update gatsby-plugin-jss

a31ba3c

styletron plugin and example update

0f849e8

add gatsby-plugin-layout

c4ba68d

update styled-components plugin

648460c

add using-multiple-providers-example

a5fe8e7

fix lint

b8042f9

pieh changed the title ~~add uniform wrapPageComponent and wrapRootComponent apis to SSR and Browser~~ add uniform wrapPageElement and wrapRootElement apis to SSR and Browser Aug 15, 2018

HriBB mentioned this pull request Aug 15, 2018

Support for [email protected] and [email protected] porteta/gatsby-plugin-material-ui#4

Open

pieh added 6 commits August 16, 2018 02:10

migration guide docs update

4ec799e

add console warning when wrapRootComponent is used with link to migra…

112788d

…tion guide

[gatsby-plugin-layout] default to src/layouts/index.js

77cba0c

Merge remote-tracking branch 'upstream/master' into browser-ssr-wrappers

c8e8365

update gatsby-plugin-layout readme with default settings

b1625e2

[gatsby-plugin-layout] proper version syntax

2f4944b

pieh commented Aug 16, 2018

View reviewed changes

pieh added 2 commits August 16, 2018 12:03

use shortlink

b2858da

no need for plugin name, in browser requires list - migration check i…

e50552b

…s done in node env now

m-allanson assigned pieh Aug 16, 2018

KyleAMathews previously approved these changes Aug 16, 2018

View reviewed changes

pieh added 3 commits August 16, 2018 21:31

typos

0c97f79

migration guide section rename

fe3660b

link to gatsby-plugin-layout in layout component removal section

2afc895

pieh dismissed KyleAMathews’s stale review via 2afc895 August 16, 2018 19:32

missed typo

86c2da6

Merge remote-tracking branch 'upstream/master' into browser-ssr-wrappers

802e26f

m-allanson approved these changes Aug 16, 2018

View reviewed changes

KyleAMathews approved these changes Aug 16, 2018

View reviewed changes

m-allanson merged commit 8029c66 into gatsbyjs:master Aug 16, 2018

pieh mentioned this pull request Aug 17, 2018

wrapXElement docs fixes #7409

Merged

cpboyd mentioned this pull request Aug 23, 2018

[v2] wrapRootElement issues with material-ui #7568

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add uniform wrapPageElement and wrapRootElement apis to SSR and Browser #7204

add uniform wrapPageElement and wrapRootElement apis to SSR and Browser #7204

pieh commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

gatsbybot commented Aug 10, 2018 •

edited

Loading

gatsbybot commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

pieh Aug 16, 2018

KyleAMathews left a comment

KyleAMathews Aug 16, 2018

KyleAMathews Aug 16, 2018 •

edited by pieh

Loading

KyleAMathews Aug 16, 2018

pieh commented Aug 16, 2018

chasemccoy commented Aug 16, 2018

m-allanson left a comment


		Wrap pages in component that won't get remounted on page changes.

		Wrapping component will have access to all props available in Page components. This is escape hatch to get basic v1 layouts back.

add uniform wrapPageElement and wrapRootElement apis to SSR and Browser #7204

add uniform wrapPageElement and wrapRootElement apis to SSR and Browser #7204

Conversation

pieh commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

gatsbybot commented Aug 10, 2018 • edited Loading

gatsbybot commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

KyleAMathews commented Aug 10, 2018 • edited Loading

pieh Aug 16, 2018

Choose a reason for hiding this comment

KyleAMathews left a comment

Choose a reason for hiding this comment

KyleAMathews Aug 16, 2018

Choose a reason for hiding this comment

KyleAMathews Aug 16, 2018 • edited by pieh Loading

Choose a reason for hiding this comment

KyleAMathews Aug 16, 2018

Choose a reason for hiding this comment

pieh commented Aug 16, 2018

chasemccoy commented Aug 16, 2018

m-allanson left a comment

Choose a reason for hiding this comment

pieh commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

gatsbybot commented Aug 10, 2018 •

edited

Loading

gatsbybot commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews commented Aug 10, 2018 •

edited

Loading

KyleAMathews Aug 16, 2018 •

edited by pieh

Loading