From b6eeec50cae8a2cca3f69de3999d89fb2514a3d3 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sat, 23 Dec 2017 22:55:51 +0100 Subject: [PATCH] Improve size --- package.json | 8 ++++---- src/index.js | 14 ++++++++------ src/snapshot.js | 13 +++++++++---- yarn.lock | 44 +++++++++++++++++++++++--------------------- 4 files changed, 44 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index a679b3a..e33d539 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,12 @@ "babel-plugin-add-module-exports": "^0.2.1", "babel-preset-es2015": "^6.13.2", "babel-preset-es2016": "^6.11.3", - "react": "^15.3.0", - "react-dom": "^15.3.0" + "react": "^16.2.0", + "react-dom": "^16.2.0" }, "peerDependencies": { - "react": "^15.3.0 || ^16.0.0", - "react-dom": "^15.3.0 || ^16.0.0" + "react": "^16.0.0", + "react-dom": "^16.0.0" }, "babel": { "presets": [ diff --git a/src/index.js b/src/index.js index 8a79fe0..113db61 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,13 @@ -import ReactDOM from 'react-dom'; -import ReactDOMServer from 'react-dom/server'; +import { render as renderToDom, hydrate } from 'react-dom'; export const render = (rootComponent, domElement) => { - if (navigator.userAgent.match(/Node\.js/i) && window && window.reactSnapshotRender) { - domElement.innerHTML = ReactDOMServer.renderToString(rootComponent) - window.reactSnapshotRender() + if (navigator.userAgent === 'ReactSnapshot' && window && window.reactSnapshotRender) { + domElement.innerHTML = window.reactSnapshotRender(rootComponent); } else { - ReactDOM.render(rootComponent, domElement) + if (domElement.hasChildNodes()) { + hydrate(rootComponent, domElement) + } else { + renderToDom(rootComponent, domElement) + } } } diff --git a/src/snapshot.js b/src/snapshot.js index 524d826..2cd209b 100644 --- a/src/snapshot.js +++ b/src/snapshot.js @@ -1,6 +1,7 @@ /* Wraps a jsdom call and returns the full page */ -import jsdom from 'jsdom' +import jsdom from "jsdom" +import { renderToString } from "react-dom/server" export default (protocol, host, path, delay) => { return new Promise((resolve, reject) => { @@ -8,7 +9,10 @@ export default (protocol, host, path, delay) => { const url = `${protocol}//${host}${path}` jsdom.env({ url, - headers: { Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8" }, + headers: { + Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8", + "User-Agent": "ReactSnapshot" + }, resourceLoader(resource, callback) { if (resource.url.host === host) { resource.defaultFetch(callback); @@ -25,11 +29,12 @@ export default (protocol, host, path, delay) => { created: (err, window) => { if (err) return reject(err) if (!window) return reject(`Looks like no page exists at ${url}`) - window.reactSnapshotRender = () => { - reactSnapshotRenderCalled = true + window.reactSnapshotRender = (rootComponent) => { + reactSnapshotRenderCalled = true; setTimeout(() => { resolve(window) }, delay) + return renderToString(rootComponent); } }, done: (err, window) => { diff --git a/yarn.lock b/yarn.lock index 0c3e23c..29c53bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -919,9 +919,9 @@ fast-levenshtein@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" -fbjs@^0.8.9: - version "0.8.12" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1" @@ -1380,7 +1380,7 @@ lodash@^4.17.2, lodash@^4.2.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" -loose-envify@^1.0.0, loose-envify@^1.1.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -1521,7 +1521,7 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@^4.1.0: +object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -1629,11 +1629,13 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.7, prop-types@~15.5.7: - version "15.5.8" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" +prop-types@^15.6.0: + version "15.6.0" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: - fbjs "^0.8.9" + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" proxy-addr@~1.1.3: version "1.1.4" @@ -1670,23 +1672,23 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^15.3.0: - version "15.5.4" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da" +react-dom@^16.2.0: + version "16.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" dependencies: - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "~15.5.7" + object-assign "^4.1.1" + prop-types "^15.6.0" -react@^15.3.0: - version "15.5.4" - resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047" +react@^16.2.0: + version "16.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" dependencies: - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "^15.5.7" + object-assign "^4.1.1" + prop-types "^15.6.0" readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4: version "2.2.9"