From 7fc2693d13996868312f9f60ffb41603735fe7d1 Mon Sep 17 00:00:00 2001 From: slorber Date: Tue, 17 Apr 2018 15:39:29 +0200 Subject: [PATCH 1/5] Add getRenderer method Signed-off-by: slorber --- packages/gatsby/cache-dir/app.js | 4 +++- packages/gatsby/cache-dir/production-app.js | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js index e64f76cb8ceb7..65485ecefecc1 100644 --- a/packages/gatsby/cache-dir/app.js +++ b/packages/gatsby/cache-dir/app.js @@ -39,8 +39,10 @@ apiRunnerAsync(`onClientEntry`).then(() => { Root = Root.default } + const renderer = apiRunner(`getRenderer`, undefined, ReactDOM.render)[0] + domReady(() => - ReactDOM.render( + renderer( , diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 24b913542b3ae..0b4fccd1c414e 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -186,8 +186,11 @@ apiRunnerAsync(`onClientEntry`).then(() => { ) const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] + + const renderer = apiRunner(`getRenderer`, undefined, ReactDOM.render)[0] + domReady(() => - ReactDOM.render( + renderer( , typeof window !== `undefined` ? document.getElementById(`___gatsby`) From 6086a430b6c667bb730da32d2510cafd0fb30878 Mon Sep 17 00:00:00 2001 From: slorber Date: Tue, 17 Apr 2018 15:54:12 +0200 Subject: [PATCH 2/5] upgrade example versions Signed-off-by: slorber --- examples/using-react-native-web/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/using-react-native-web/package.json b/examples/using-react-native-web/package.json index b1348f0ff930b..9d5d805455f0a 100644 --- a/examples/using-react-native-web/package.json +++ b/examples/using-react-native-web/package.json @@ -4,17 +4,17 @@ "description": "Example usage of gatsby-plugin-react-native-web", "author": "Sebastien Lorber ", "dependencies": { - "gatsby": "^1.9.221", + "gatsby": "^1.9.251", "gatsby-link": "^1.6.37", "gatsby-plugin-google-analytics": "latest", - "gatsby-plugin-react-native-web": "^0.1.2", + "gatsby-plugin-react-native-web": "^0.2.0", "gatsby-plugin-react-next": "^1.0.11", "react": "^16.2.0", "react-dom": "^16.2.0", - "react-native-web": "^0.5.1" + "react-native-web": "^0.6.0" }, "devDependencies": { - "babel-plugin-react-native-web": "^0.5.1" + "babel-plugin-react-native-web": "^0.6.0" }, "license": "MIT", "scripts": { From 77bdadf327396fe5e60e9c42127787dc3a634347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Sat, 21 Apr 2018 11:22:03 +0200 Subject: [PATCH 3/5] change name to renderer --- packages/gatsby/cache-dir/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js index 65485ecefecc1..b2716ccc892a6 100644 --- a/packages/gatsby/cache-dir/app.js +++ b/packages/gatsby/cache-dir/app.js @@ -39,7 +39,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { Root = Root.default } - const renderer = apiRunner(`getRenderer`, undefined, ReactDOM.render)[0] + const renderer = apiRunner(`replaceHydrateFunction`, undefined, ReactDOM.render)[0] domReady(() => renderer( @@ -59,7 +59,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { if (NextRoot.default) { NextRoot = NextRoot.default } - ReactDOM.render( + renderer( , From ddcb3aad56ca41588b34df043212ecb57be986f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Sat, 21 Apr 2018 11:22:27 +0200 Subject: [PATCH 4/5] Change name to replaceHydrateFunction --- packages/gatsby/cache-dir/production-app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 0b4fccd1c414e..946e771e3432b 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -187,7 +187,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] - const renderer = apiRunner(`getRenderer`, undefined, ReactDOM.render)[0] + const renderer = apiRunner(`replaceHydrateFunction`, undefined, ReactDOM.render)[0] domReady(() => renderer( From 8eb15379a8e65387f4b2043360d3418724707fc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Mon, 23 Apr 2018 17:18:02 +0200 Subject: [PATCH 5/5] document replaceHydrateFunction --- packages/gatsby/src/utils/api-browser-docs.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/gatsby/src/utils/api-browser-docs.js b/packages/gatsby/src/utils/api-browser-docs.js index 131f6bbbc2f85..1e5cb2cd414c5 100644 --- a/packages/gatsby/src/utils/api-browser-docs.js +++ b/packages/gatsby/src/utils/api-browser-docs.js @@ -72,3 +72,13 @@ exports.replaceHistory = true * @param {object} $0.Root The "Root" component built by Gatsby. */ exports.wrapRootComponent = true + +/** + * Allow a plugin to replace the ReactDOM.render function call by a custom renderer. + * This method receives the same parameters as ReactDOM.render takes. + * Note it's very important to call the provided callback after rendering, otherwise Gatsby will not be able to call `onInitialClientRender` + * @param {object} $0 element + * @param {object} $1 container + * @param {object} $2 callback + */ +exports.replaceHydrateFunction = true