Update React to v16 (kriasoft#1417)

arnigudj · Oct 2, 2017 · b9c9778 · b9c9778
1 parent 375bc7f
commit b9c9778
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 168 deletions.
diff --git a/package.json b/package.json
@@ -18,23 +18,23 @@
     "express-graphql": "^0.6.11",
     "express-jwt": "^5.3.0",
     "graphql": "^0.11.6",
-    "history": "^4.6.3",
+    "history": "^4.7.2",
     "isomorphic-style-loader": "^4.0.0",
     "jsonwebtoken": "^8.0.1",
     "node-fetch": "^1.7.3",
     "normalize.css": "^7.0.0",
     "passport": "^0.4.0",
     "passport-facebook": "^2.1.1",
     "pretty-error": "^2.1.1",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
     "query-string": "^5.0.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "sequelize": "^4.13.2",
     "serialize-javascript": "^1.3.0",
     "source-map-support": "^0.4.18",
     "sqlite3": "^3.1.8",
-    "universal-router": "^4.0.0",
+    "universal-router": "^4.2.0",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
@@ -55,7 +55,7 @@
     "browser-sync": "^2.18.13",
     "chokidar": "^1.7.0",
     "css-loader": "^0.28.7",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.0.0",
     "eslint": "^4.8.0",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-config-prettier": "^2.6.0",
@@ -98,10 +98,10 @@
     "postcss-selector-not": "^3.0.1",
     "prettier": "^1.7.3",
     "raw-loader": "^0.5.1",
-    "react-deep-force-update": "^2.0.1",
+    "react-deep-force-update": "^2.1.1",
     "react-error-overlay": "^1.0.9",
     "react-hot-loader": "^3.0.0-beta.7",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.2",
     "stylelint": "^8.1.1",
     "stylelint-config-standard": "^17.0.0",

diff --git a/src/client.js b/src/client.js
@@ -39,60 +39,17 @@ const context = {
   }),
 };
 
+const container = document.getElementById('app');
+let appInstance;
+let currentLocation = history.location;
+
 // Switch off the native scroll restoration behavior and handle it manually
 // https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
 const scrollPositionsHistory = {};
 if (window.history && 'scrollRestoration' in window.history) {
   window.history.scrollRestoration = 'manual';
 }
 
-let onRenderComplete = function initialRenderComplete() {
-  const elem = document.getElementById('css');
-  if (elem) elem.parentNode.removeChild(elem);
-  onRenderComplete = function renderComplete(route, location) {
-    document.title = route.title;
-
-    updateMeta('description', route.description);
-    // Update necessary tags in <head> at runtime here, ie:
-    // updateMeta('keywords', route.keywords);
-    // updateCustomMeta('og:url', route.canonicalUrl);
-    // updateCustomMeta('og:image', route.imageUrl);
-    // updateLink('canonical', route.canonicalUrl);
-    // etc.
-
-    let scrollX = 0;
-    let scrollY = 0;
-    const pos = scrollPositionsHistory[location.key];
-    if (pos) {
-      scrollX = pos.scrollX;
-      scrollY = pos.scrollY;
-    } else {
-      const targetHash = location.hash.substr(1);
-      if (targetHash) {
-        const target = document.getElementById(targetHash);
-        if (target) {
-          scrollY = window.pageYOffset + target.getBoundingClientRect().top;
-        }
-      }
-    }
-
-    // Restore the scroll position if it was saved into the state
-    // or scroll to the given #hash anchor
-    // or scroll to top of the page
-    window.scrollTo(scrollX, scrollY);
-
-    // Google Analytics tracking. Don't send 'pageview' event after
-    // the initial rendering, as it was already sent
-    if (window.ga) {
-      window.ga('send', 'pageview', createPath(location));
-    }
-  };
-};
-
-const container = document.getElementById('app');
-let appInstance;
-let currentLocation = history.location;
-
 // Re-render the app when window.location changes
 async function onLocationChange(location, action) {
   // Remember the latest scroll position for the previous location
@@ -126,10 +83,53 @@ async function onLocationChange(location, action) {
       return;
     }
 
-    appInstance = ReactDOM.render(
+    appInstance = ReactDOM[action ? 'render' : 'hydrate'](
       <App context={context}>{route.component}</App>,
       container,
-      () => onRenderComplete(route, location),
+      () => {
+        if (!action) {
+          const elem = document.getElementById('css');
+          if (elem) elem.parentNode.removeChild(elem);
+          return; // Initial render complete
+        }
+
+        document.title = route.title;
+
+        updateMeta('description', route.description);
+        // Update necessary tags in <head> at runtime here, ie:
+        // updateMeta('keywords', route.keywords);
+        // updateCustomMeta('og:url', route.canonicalUrl);
+        // updateCustomMeta('og:image', route.imageUrl);
+        // updateLink('canonical', route.canonicalUrl);
+        // etc.
+
+        let scrollX = 0;
+        let scrollY = 0;
+        const pos = scrollPositionsHistory[location.key];
+        if (pos) {
+          scrollX = pos.scrollX;
+          scrollY = pos.scrollY;
+        } else {
+          const targetHash = location.hash.substr(1);
+          if (targetHash) {
+            const target = document.getElementById(targetHash);
+            if (target) {
+              scrollY = window.pageYOffset + target.getBoundingClientRect().top;
+            }
+          }
+        }
+
+        // Restore the scroll position if it was saved into the state
+        // or scroll to the given #hash anchor
+        // or scroll to top of the page
+        window.scrollTo(scrollX, scrollY);
+
+        // Google Analytics tracking. Don't send 'pageview' event after
+        // the initial rendering, as it was already sent
+        if (window.ga) {
+          window.ga('send', 'pageview', createPath(location));
+        }
+      },
     );
   } catch (error) {
     if (__DEV__) {

diff --git a/tools/lib/markdown-loader.js b/tools/lib/markdown-loader.js
@@ -7,8 +7,9 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-const MarkdownIt = require('markdown-it');
+const path = require('path');
 const fm = require('front-matter');
+const MarkdownIt = require('markdown-it');
 
 module.exports = function markdownLoader(source) {
   const md = new MarkdownIt({
@@ -17,6 +18,7 @@ module.exports = function markdownLoader(source) {
   });
 
   const frontmatter = fm(source);
+  frontmatter.attributes.key = path.basename(this.resourcePath, '.md');
   frontmatter.attributes.html = md.render(frontmatter.body);
 
   return `module.exports = ${JSON.stringify(frontmatter.attributes)};`;