fix(Landing): switch to react-snap (#478)

* fix(Landing): switch to react-snap & ncu update & node 9 * update
MCS-Lite · Nov 16, 2017 · 87b924f · 87b924f
1 parent a98ef18
commit 87b924f
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 91 deletions.
diff --git a/docs/licenses.csv b/docs/licenses.csv
@@ -102,6 +102,7 @@
 "[email protected]","MIT","https://github.com/benjamn/ast-types"
 "[email protected]","MIT","https://github.com/kevva/astral-regex"
 "[email protected]","MIT","https://github.com/paulmillr/async-each"
+"[email protected]","MIT","https://github.com/strml/async-limiter"
 "[email protected]","ISC","https://github.com/othiym23/async-some"
 "[email protected]","MIT","https://github.com/caolan/async"
 "[email protected]","MIT","https://github.com/caolan/async"
@@ -454,11 +455,14 @@
 "[email protected]","MIT","https://github.com/css-modules/css-selector-tokenizer"
 "[email protected]","MIT","https://github.com/styled-components/css-to-react-native"
 "[email protected]","MIT","https://github.com/anandthakker/css-tokenize"
+"[email protected]","MIT","https://github.com/csstree/csstree"
+"[email protected]","MIT","https://github.com/csstree/csstree"
 "[email protected]","BSD*","https://github.com/fb55/css-what"
 "[email protected]","MIT","https://github.com/reworkcss/css"
 "[email protected]","MIT","https://github.com/mathiasbynens/cssesc"
 "[email protected]","MIT","https://github.com/ben-eb/cssnano"
 "[email protected]","MIT","https://github.com/css/csso"
+"[email protected]","MIT","https://github.com/css/csso"
 "[email protected]","MIT","https://github.com/NV/CSSOM"
 "[email protected]","MIT","https://github.com/chad3814/CSSStyleDeclaration"
 "[email protected]","MIT","https://github.com/jamestalmage/currently-unhandled"
@@ -619,12 +623,14 @@
 "[email protected]","MIT","https://github.com/jonschlinkert/expand-range"
 "[email protected]","MIT","https://github.com/jonschlinkert/expand-tilde"
 "[email protected]","MIT","https://github.com/facebook/jest"
+"[email protected]","ISC","git+https://gitlab.com/sebdeckers/express-history-api-fallback"
 "[email protected]","MIT","https://github.com/expressjs/express"
 "[email protected]","MIT","https://github.com/justmoon/node-extend"
 "[email protected]","MIT","https://github.com/justmoon/node-extend"
 "[email protected]","MIT","https://github.com/mrkmg/node-external-editor"
 "[email protected]","MIT","https://github.com/jonschlinkert/extglob"
 "[email protected]","MIT","https://github.com/webpack-contrib/extract-text-webpack-plugin"
+"[email protected]","BSD-2-Clause","https://github.com/maxogden/extract-zip"
 "[email protected]","MIT*","https://github.com/davepacheco/node-extsprintf"
 "[email protected]","MIT","https://github.com/davepacheco/node-extsprintf"
 "[email protected]","MIT","https://github.com/epoberezkin/fast-deep-equal"
@@ -638,6 +644,7 @@
 "[email protected]","Apache-2.0","https://github.com/facebook/watchman"
 "[email protected]","Apache-2.0","https://github.com/facebook/watchman"
 "[email protected]","MIT","https://github.com/facebook/fbjs"
+"[email protected]","MIT","https://github.com/andrewrk/node-fd-slicer"
 "[email protected]","MIT","https://github.com/sindresorhus/figures"
 "[email protected]","MIT","https://github.com/royriojas/file-entry-cache"
 "[email protected]","MIT","https://github.com/webpack/file-loader"
@@ -719,7 +726,6 @@
 "[email protected]","MIT","https://github.com/jonschlinkert/glob-base"
 "[email protected]","ISC","https://github.com/es128/glob-parent"
 "[email protected]","ISC","https://github.com/es128/glob-parent"
-"[email protected]","BSD*","https://github.com/fitzgen/glob-to-regexp"
 "[email protected]","ISC","https://github.com/isaacs/node-glob"
 "[email protected]","ISC","https://github.com/isaacs/node-glob"
 "[email protected]","ISC","https://github.com/isaacs/node-glob"
@@ -761,6 +767,7 @@
 "[email protected]","BSD-3-Clause","https://github.com/hueniverse/hawk"
 "[email protected]","MIT","https://github.com/mathiasbynens/he"
 "[email protected]","MIT","https://github.com/garetmckinley/hedron"
+"[email protected]","Apache-2.0","https://github.com/caolan/highland"
 "[email protected]","BSD-3-Clause","https://github.com/isagalaev/highlight.js"
 "[email protected]","MIT","https://github.com/ReactTraining/history"
 "[email protected]","MIT","https://github.com/indutny/hmac-drbg"
@@ -1104,6 +1111,7 @@
 "[email protected]","MIT","https://github.com/MCS-Lite/mcs-lite"
 "[email protected]","MIT","https://github.com/MCS-Lite/mcs-lite"
 "[email protected]","MIT","https://github.com/crypto-browserify/md5.js"
+"[email protected]","MPL-2.0","https://github.com/mdn/data"
 "[email protected]","MIT","https://github.com/jshttp/media-typer"
 "[email protected]","MIT","https://github.com/sindresorhus/mem"
 "[email protected]","MIT","https://github.com/webpack/memory-fs"
@@ -1123,6 +1131,7 @@
 "[email protected]","MIT","https://github.com/broofa/node-mime"
 "[email protected]","MIT","https://github.com/sindresorhus/mimic-fn"
 "[email protected]","MIT","https://github.com/Raynos/min-document"
+"[email protected]","MIT","https://github.com/peterbe/minimalcss"
 "[email protected]","ISC","https://github.com/calvinmetcalf/minimalistic-assert"
 "[email protected]","MIT","https://github.com/indutny/minimalistic-crypto-utils"
 "[email protected]","ISC","https://github.com/isaacs/minimatch"
@@ -1133,6 +1142,7 @@
 "[email protected]","MIT","https://github.com/substack/minimist"
 "[email protected]","BSD-2-Clause","https://github.com/maxogden/mississippi"
 "[email protected]","MIT","https://github.com/substack/node-mkdirp"
+"[email protected]","MIT","https://github.com/substack/node-mkdirp"
 "[email protected]","MIT","https://github.com/substack/node-mkdirp"
 "[email protected]","MIT","https://github.com/mobxjs/mobx"
 "[email protected]","MIT","https://github.com/sindresorhus/modify-values"
@@ -1273,6 +1283,7 @@
 "[email protected]","MIT","https://github.com/sindresorhus/path-type"
 "[email protected]","MIT","https://github.com/sindresorhus/path-type"
 "[email protected]","MIT","https://github.com/crypto-browserify/pbkdf2"
+"[email protected]","MIT","https://github.com/andrewrk/node-pend"
 "[email protected]","MIT","https://github.com/meryn/performance-now"
 "[email protected]","MIT","https://github.com/braveg1rl/performance-now"
 "[email protected]","MIT","https://github.com/sindresorhus/pify"
@@ -1364,13 +1375,16 @@
 "[email protected]","ISC","https://github.com/isaacs/proto-list"
 "[email protected]","CC0-1.0","https://github.com/zkat/protoduck"
 "[email protected]","MIT","https://github.com/jshttp/proxy-addr"
+"[email protected]","MIT","https://github.com/Rob--W/proxy-from-env"
 "[email protected]","MIT","https://github.com/rvagg/prr"
 "[email protected]","ISC","https://github.com/isaacs/pseudomap"
 "[email protected]","MIT","https://github.com/crypto-browserify/publicEncrypt"
 "[email protected]","MIT","https://github.com/mafintosh/pump"
 "[email protected]","MIT","https://github.com/mafintosh/pumpify"
 "[email protected]","MIT","https://github.com/bestiejs/punycode.js"
 "[email protected]","MIT","https://github.com/bestiejs/punycode.js"
+"[email protected]","Apache-2.0","https://github.com/GoogleChrome/puppeteer"
+"[email protected]","Apache-2.0","https://github.com/GoogleChrome/puppeteer"
 "[email protected]","MIT","https://github.com/kriskowal/q"
 "[email protected]","MIT","https://github.com/kriskowal/q"
 "[email protected]","BSD-3-Clause","https://github.com/ljharb/qs"
@@ -1437,7 +1451,7 @@
 "[email protected]","MIT","https://github.com/gaearon/react-side-effect"
 "[email protected]","MIT","https://github.com/kadirahq/react-simple-di"
 "[email protected]","MIT","https://github.com/recharts/react-smooth"
-"react-[email protected]","ISC","https://github.com/geelen/react-snapshot"
+"react-[email protected]","MIT","https://github.com/stereobooster/react-snap"
 "[email protected]","MIT","https://github.com/tomkp/react-split-pane"
 "[email protected]","MIT","https://github.com/kadirahq/react-stubber"
 "[email protected]","MIT","https://github.com/brigand/react-style-proptype"
@@ -1554,7 +1568,7 @@
 "[email protected]","MIT","https://github.com/sindresorhus/semver-diff"
 "[email protected]","ISC","https://github.com/npm/node-semver"
 "[email protected]","ISC","https://github.com/npm/node-semver"
-"[email protected].0","ISC","https://github.com/npm/node-semver"
+"[email protected].1","ISC","https://github.com/npm/node-semver"
 "[email protected]","ISC","https://github.com/npm/node-semver"
 "[email protected]","ISC","https://github.com/npm/node-semver"
 "[email protected]","MIT","https://github.com/pillarjs/send"
@@ -1601,6 +1615,7 @@
 "[email protected]","BSD-3-Clause","https://github.com/mozilla/source-map"
 "[email protected]","BSD-3-Clause","https://github.com/mozilla/source-map"
 "[email protected]","BSD-3-Clause","https://github.com/mozilla/source-map"
+"[email protected]","BSD-3-Clause","https://github.com/stereobooster/sourcemapped-stacktrace"
 "[email protected]","MIT","https://github.com/kemitchell/spdx-compare.js"
 "[email protected]","Apache-2.0","https://github.com/kemitchell/spdx-correct.js"
 "[email protected]","Apache-2.0","https://github.com/jslicense/spdx-correct.js"
@@ -1744,6 +1759,7 @@
 "[email protected]","MIT","https://github.com/ForbesLindesay/uglify-to-browserify"
 "[email protected]","MIT","https://github.com/webpack-contrib/uglifyjs-webpack-plugin"
 "[email protected]","ISC","https://github.com/isaacs/uid-number"
+"[email protected]","MIT","https://github.com/unshiftio/ultron"
 "[email protected]","MIT","https://github.com/smikes/umask"
 "[email protected]","MIT*","https://github.com/documentcloud/underscore"
 "[email protected]","MIT","https://github.com/jashkenas/underscore"
@@ -1841,6 +1857,7 @@
 "[email protected]","MIT","https://github.com/sindresorhus/write-json-file"
 "[email protected]","MIT","https://github.com/sindresorhus/write-pkg"
 "[email protected]","MIT","https://github.com/jonschlinkert/write"
+"[email protected]","MIT","https://github.com/websockets/ws"
 "[email protected]","MIT","https://github.com/sindresorhus/xdg-basedir"
 "[email protected]","MIT","https://github.com/sindresorhus/xdg-basedir"
 "[email protected]","MIT","https://github.com/sindresorhus/xml-char-classes"
@@ -1864,3 +1881,4 @@
 "[email protected]","MIT","https://github.com/yargs/yargs"
 "[email protected]","MIT","https://github.com/yargs/yargs"
 "[email protected]","MIT","https://github.com/yargs/yargs"
+"[email protected]","MIT","https://github.com/thejoshwolfe/yauzl"
diff --git a/packages/mcs-lite-landing-web/package.json b/packages/mcs-lite-landing-web/package.json
@@ -12,13 +12,19 @@
   "license": "MIT",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && react-snapshot",
+    "build": "react-scripts build && react-snap",
     "build:netlify": "REACT_APP_GA_ID='UA-58128356-6' npm run build",
     "test": "CI=true react-scripts test --env=jsdom --coverage --runInBand",
     "test:watch": "react-scripts test --env=jsdom",
     "extract:messages": "react-intl-cra 'src/**/*.js' '../mcs-lite-translation/src/mcs-lite-landing-web/messages.json'",
     "extract:pot": "react-intl-po json2pot '../mcs-lite-translation/src/mcs-lite-landing-web/messages.json' -o '../mcs-lite-translation/src/mcs-lite-landing-web/messages.pot'"
   },
+  "reactSnap": {
+    "inlineCss": false,
+    "preloadResources": false,
+    "fixWebpackChunksIssue": true,
+    "skipThirdPartyRequests": true
+  },
   "devDependencies": {
     "browser-locale": "^1.0.3",
     "enzyme": "^3.1.0",
@@ -50,7 +56,7 @@
     "react-responsive": "^3.0.0",
     "react-router": "^3.0.2",
     "react-scripts": "^1.0.16",
-    "react-snapshot": "^1.2.0",
+    "react-snap": "^0.7.4",
     "recompose": "^0.26.0",
     "styled-components": "^2.2.3"
   }

diff --git a/packages/mcs-lite-landing-web/src/__tests__/index.test.js b/packages/mcs-lite-landing-web/src/__tests__/index.test.js
@@ -1,8 +1,6 @@
 it('should render without error', async () => {
   const mockRender = jest.fn();
-  jest.mock('react-snapshot', () => ({
-    render: mockRender,
-  }));
+  jest.mock('react-dom', () => ({ render: mockRender }));
 
   try {
     await import('../index');

diff --git a/packages/mcs-lite-landing-web/src/index.js b/packages/mcs-lite-landing-web/src/index.js
@@ -1,7 +1,7 @@
 /* global document */
 
 import React from 'react';
-import { render } from 'react-snapshot';
+import { hydrate, render } from 'react-dom';
 import { Router, Route, useRouterHistory, IndexRedirect } from 'react-router';
 import createHistory from 'history/lib/createBrowserHistory';
 import browserLocale from 'browser-locale';
@@ -18,7 +18,12 @@ import './utils/i18n';
 
 const history = useRouterHistory(createHistory)();
 
-render(
+/**
+ * Remind: React-Snap
+ * ref: https://github.com/stereobooster/react-snap
+ */
+const rootElement = document.getElementById('root');
+const Root = (
   <ThemeProvider theme={landingTheme}>
     <BreakpointProvider breakpoints={BREAKPOINTS}>
       <Router history={history}>
@@ -28,8 +33,14 @@ render(
         </Route>
       </Router>
     </BreakpointProvider>
-  </ThemeProvider>,
-  document.getElementById('root'),
+  </ThemeProvider>
 );
+
+if (rootElement && rootElement.hasChildNodes()) {
+  hydrate(Root, rootElement);
+} else {
+  render(Root, rootElement);
+}
+
 registerServiceWorker();
 autotrack(process.env.REACT_APP_GA_ID, BREAKPOINTS);
diff --git a/tasks/build.sh b/tasks/build.sh
@@ -8,9 +8,6 @@ set -e
 node_modules/.bin/lerna run build --ignore \
   '{mcs-lite-introduction,mcs-lite-*-web}'
 
-# TODO: react-snapshot 2.0
-rm -rf {node_modules/react-snapshot/node_modules/react,node_modules/react-snapshot/node_modules/react-dom}
-
 # Duplicate at prepack stage
 # node_modules/.bin/lerna run build --scope mcs-lite-introduction
 # node_modules/.bin/lerna run build --scope mcs-lite-mobile-web