update package and use @loadable/component instead of loadable-components

Author: osamu38

.babelrc

@@ -21,7 +21,7 @@
       }
     ],
     "add-module-exports",
-    "loadable-components/babel",
+    "@loadable/babel-plugin",
     [
       "@babel/plugin-transform-runtime",
       {

README.md

@@ -73,7 +73,7 @@ Basically page component is implemented using React.PureComponent.
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import Button from 'components/Button';
 import Title from 'components/Title';
 import SubTitle from 'components/SubTitle';

index.js

@@ -1,5 +1,4 @@
 if (process.env.NODE_ENV === 'production') {
-  global.manifest = require('./dist/public/static/javascripts/manifest.json');
   require('./dist/server');
 } else {
   require('@babel/register');

package.json

@@ -34,89 +34,91 @@
     "heroku-postbuild": "npm run build"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.4.4",
+    "@babel/polyfill": "^7.6.0",
+    "@loadable/babel-plugin": "^5.10.3",
+    "@loadable/component": "^5.10.3",
+    "@loadable/server": "^5.10.3",
+    "@loadable/webpack-plugin": "^5.7.1",
     "axios": "^0.19.0",
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.4",
     "express": "^5.0.0-alpha.7",
-    "helmet": "^3.18.0",
+    "helmet": "^3.21.1",
     "hpp": "^0.2.2",
     "html-minifier": "^4.0.0",
     "jsonwebtoken": "^8.5.1",
-    "loadable-components": "^2.2.3",
     "morgan": "^1.9.1",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^3.0.0",
-    "react": "^16.8.6",
+    "path-to-regexp": "^3.1.0",
+    "react": "^16.10.1",
     "react-cookie": "1.0.5",
-    "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.1",
+    "react-dom": "^16.10.1",
+    "react-helmet-async": "^1.0.3",
     "react-redux": "5.1.1",
-    "react-router-config": "5.0.1",
-    "react-router-dom": "^4.3.1",
+    "react-router-config": "5.1.1",
+    "react-router-dom": "^5.1.2",
     "redux": "^4.0.4",
-    "redux-nprogress": "^1.0.2",
     "redux-thunk": "^2.3.0",
-    "serialize-javascript": "^1.7.0",
+    "serialize-javascript": "^2.1.0",
     "serve-favicon": "^2.5.0",
-    "styled-components": "^4.3.2",
-    "styled-reset": "^3.0.0"
+    "styled-components": "^4.4.0",
+    "styled-reset": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.4",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.4.4",
-    "@storybook/addon-links": "^5.1.9",
-    "@storybook/react": "^5.1.9",
-    "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.8.0",
+    "@babel/register": "^7.6.2",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/react": "^5.2.1",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dynamic-import-node": "^2.3.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-styled-components": "^1.10.6",
     "clean-webpack-plugin": "1.0.1",
-    "copy-webpack-plugin": "^5.0.3",
+    "copy-webpack-plugin": "^5.0.4",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.3.5",
-    "eslint": "^6.0.1",
-    "eslint-config-airbnb": "^17.1.1",
-    "eslint-config-prettier": "^6.0.0",
+    "enzyme-to-json": "^3.4.1",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.3.0",
     "eslint-import-resolver-babel-module": "^5.1.0",
-    "eslint-plugin-flowtype": "^3.11.1",
-    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-flowtype": "^4.3.0",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.2",
-    "flow-bin": "^0.102.0",
-    "flow-typed": "^2.5.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.15.1",
+    "flow-bin": "^0.109.0",
+    "flow-typed": "^2.6.1",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
     "jest-styled-components": "^6.3.3",
     "json-loader": "^0.5.7",
-    "nodemon": "^1.19.1",
+    "nodemon": "^1.19.3",
     "prettier": "^1.18.2",
     "raf": "^3.4.1",
-    "react-hot-loader": "^4.12.6",
+    "react-hot-loader": "^4.12.14",
     "redux-logger": "^3.0.6",
     "string-replace-webpack-plugin": "^0.1.3",
-    "stylelint": "^10.1.0",
-    "stylelint-config-prettier": "^5.2.0",
-    "stylelint-config-standard": "^18.3.0",
+    "stylelint": "^11.0.0",
+    "stylelint-config-prettier": "^6.0.0",
+    "stylelint-config-standard": "^19.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.8.0",
-    "uglifyjs-webpack-plugin": "^2.1.3",
-    "webpack": "^4.35.3",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "^3.3.5",
-    "webpack-dev-middleware": "^3.7.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.41.0",
+    "webpack-bundle-analyzer": "^3.5.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-manifest-plugin": "^2.2.0",
     "webpack-node-externals": "^1.7.2",
     "workbox-sw": "^4.3.1",
     "workbox-webpack-plugin": "^4.3.1"

src/client.js

@@ -5,7 +5,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import { loadComponents } from 'loadable-components';
+import { HelmetProvider } from 'react-helmet-async';
+import { loadableReady } from '@loadable/component';
 import configureStore from 'utils/configureStore';
 import App from 'components/App';
 import { isDevelopment } from 'config/env';
@@ -14,12 +15,14 @@ const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 const root: ?Element = document.getElementById('root');
 
-loadComponents().then(() => {
+loadableReady().then(() => {
   if (root) {
-    ReactDOM.render(
+    ReactDOM[isDevelopment ? 'render' : 'hydrate'](
       <Provider store={store}>
         <BrowserRouter>
-          <App />
+          <HelmetProvider>
+            <App />
+          </HelmetProvider>
         </BrowserRouter>
       </Provider>,
       root

src/components/App/index.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { bindActionCreators, compose } from 'redux';
 import { connect } from 'react-redux';
 import { Route, withRouter } from 'react-router-dom';
-import Helmet from 'react-helmet';
-import { NProgress } from 'redux-nprogress';
+import { Helmet } from 'react-helmet-async';
 import Container from 'components/Container';
 import Footer from 'components/Footer';
 import Header from 'components/Header';
@@ -59,7 +58,6 @@ class App extends React.PureComponent<PageProps> {
       <Container>
         <Helmet meta={metaData} link={linkData} />
         <GlobalStyle />
-        <NProgress />
         {error ? <Error hideError={hideError}>{error}</Error> : null}
         <Header
           isLoggedIn={isLoggedIn}

src/components/PreloadLink/index.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { beginTask, endTask } from 'redux-nprogress';
 import pathToRegexp from 'path-to-regexp';
 import { endpoint } from 'config/url';
 import routes from 'routes';
@@ -23,12 +22,11 @@ type DispatchProps = {
   state: ReduxState,
 };
 
-function loadComponent(targetRoute, targetComponent) {
-  if (targetRoute && targetComponent.loadingPromise === null) {
-    targetComponent.load();
-    return targetComponent.loadingPromise;
+function loadComponent(targetRoute) {
+  if (targetRoute && targetRoute.component && targetRoute.component.load) {
+    return targetRoute.component.load();
   }
-  return Promise.resolve();
+  return Promise.resolve({ default: { loadData: null } });
 }
 function getPageName(href) {
   return Object.keys(endpoint).find(key =>
@@ -58,33 +56,24 @@ function PreloadLink(props: StateProps & DispatchProps & Props) {
     history: { push },
     dispatch,
     state,
-    isProgress = true,
     isLoadData = true,
   } = props;
   const authRoutes = routes[0].routes;
   const pageName = getPageName(href);
   const targetEndpoint = pageName ? endpoint[pageName] : '';
   const targetRoute = authRoutes.find(route => route.path === targetEndpoint);
-  const targetComponent = targetRoute ? targetRoute.component : {};
   const params = getParams(targetEndpoint, href);
 
   return React.cloneElement(children, {
     href,
     onClick: async e => {
       e.preventDefault();
-      if (isProgress) {
-        dispatch(beginTask());
-      }
-      await loadComponent(targetRoute, targetComponent);
-
-      const { loadData } = targetComponent;
+      const loadedComponent = await loadComponent(targetRoute);
+      const { loadData } = loadedComponent.default;
 
       if (loadData && isLoadData) {
         await loadData(dispatch, state, params);
       }
-      if (isProgress) {
-        dispatch(endTask());
-      }
       push(href);
     },
   });

src/pages/About/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import Title from 'components/Title';
 import SubTitle from 'components/SubTitle';
 import StackList from 'components/StackList';

src/pages/Home/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import Button from 'components/Button';
 import Title from 'components/Title';
 import SubTitle from 'components/SubTitle';

src/pages/Landing/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import LoginForm from 'components/LoginForm';
 import Title from 'components/Title';
 import type { PageProps } from 'types';

src/pages/NotFound/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import Title from 'components/Title';
 
 export default function NotFoundPage() {

src/pages/RedirectAbout/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { endpoint } from 'config/url';
 import type { PageProps } from 'types';
 

src/pages/UserDetail/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import Title from 'components/Title';
 import UserDetail from 'components/UserDetail';
 import { fetchUser as fetchUserFromServer } from 'actions/user';

src/reducers/index.js

@@ -1,13 +1,11 @@
 /* @flow */
 
 import { combineReducers } from 'redux';
-import { nprogress } from 'redux-nprogress';
 import user from 'reducers/user';
 import ui from 'reducers/ui';
 import type { Action } from 'types';
 
 const reducers = {
-  nprogress,
   user,
   ui,
 };