fix(react-loadable): Upgrade to babel 7, fix warnings (see jamiebuilds/react-loadable#216)

Author: Dimitri Kopriwa

.babelrc

@@ -1,12 +1,16 @@
 {
   "presets": [
-    ["es2015", {
-      "loose": true,
-    }],
-    "react",
+    [
+      "@babel/preset-env",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-flow"
   ],
   "plugins": [
-    "transform-class-properties",
-    "transform-object-assign",
-  ],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-object-assign"
+  ]
 }

.flowconfig

@@ -1,5 +1,5 @@
 [ignore]
-<PROJECT_ROOT>/node_modules/chalk/.*
+.*/node_modules/chalk/.*
 
 [include]
 

.gitignore

@@ -4,3 +4,4 @@ node_modules
 lib
 coverage
 example/dist
+reports

.npmrc

@@ -0,0 +1 @@
+package-lock=false

.travis.yml

@@ -1,8 +1,85 @@
 language: node_js
-node_js:
-  - '4'
-  - '6'
-  - '8'
-  - '10'
-cache: yarn
-script: yarn test -- --runInBand --coverage && yarn flow
+sudo: required
+dist: trusty
+
+# Blocklist
+branches:
+  except:
+    - gh-pages # will be deployed to, no need to build it
+
+cache:
+  directories:
+    - node_modules
+
+before_install:
+  - npm install -g npm
+  # const
+  - export PACKAGE_NAME=$(node -p "require('./package.json').name")
+  - export PACKAGE_VERSION=$(node -p "require('./package.json').version")
+  - export SONAR_VERSION=${PACKAGE_VERSION}-b${TRAVIS_BUILD_ID}-${TRAVIS_BRANCH}
+  - export NODE_VERSION=$(node --version)
+  - export NPM_VERSION=$(npm --version)
+
+  # logging
+  - npm --version || echo npm not installed
+  - node --version || echo node not installed
+  - echo "package version $PACKAGE_VERSION"
+
+stages:
+  - build
+  - test
+  - release
+  - deploy
+
+jobs:
+  include:
+
+    # Job: Build
+    - stage: build
+      node_js:
+        - 'lts/*'
+        - '10'
+        - '8'
+      script:
+        - npm run build
+    # Job: Test
+    - stage: test
+      node_js:
+        - 'lts/*'
+        - '10'
+        - '8'
+      addons:
+        sonarcloud:
+          organization: $(echo $TRAVIS_REPO_SLUG | awk -F '/' '{print $1}')
+      script:
+        - npm run test -- --coverage --runInBand
+#        - npm run flow  (Disable reason: https://github.com/jamiebuilds/react-loadable/pull/216#issuecomment-566027008)
+
+    # Job: Release
+    - stage: release
+      if: branch = master AND type = push AND fork = false
+      node_js:
+        - 'lts/*'
+      skip_cleanup: true
+      script:
+        - npx semantic-release
+
+#    # Job: Page
+#    - stage: deploy
+#      if: branch = master AND type = push AND fork = false
+#      node_js:
+#        - 'lts/*'
+#      script:
+#        - git fetch --tags
+#        - git checkout refs/tags/$(git describe --tags `git rev-list --tags --max-count=1`)
+#        - npm install
+#        - chmod +x styleguide/prepare.sh
+#        - styleguide/prepare.sh
+#        - npm run styleguide:build
+#      deploy:
+#        - provider: pages
+#          skip_cleanup: true
+#          github_token: $GH_TOKEN  # Set in the settings page of your repository, as a secure variable
+#          keep_history: true
+#          local_dir: public/
+#

README.md

@@ -1,3 +1,11 @@
+## Why did we fork
+
+This project was originally hosted at https://github.com/jamiebuilds/react-loadable
+
+Since PR https://github.com/jamiebuilds/react-loadable/pull/216, we marked this project being unmaintained.
+
+## Readme
+
 ![React Loadable](http://thejameskyle.com/img/react-loadable-header.png)
 
 > A higher order component for loading components with dynamic imports.
@@ -11,7 +19,7 @@ yarn add react-loadable
 ## Example
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 import Loading from './my-loading-component';
 
 const LoadableComponent = Loadable({
@@ -174,7 +182,7 @@ class MyComponent extends React.Component {
     Bar: null
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     import('./components/Bar').then(Bar => {
       this.setState({ Bar: Bar.default });
     });
@@ -197,7 +205,7 @@ What about when `import()` fails? What about server-side rendering?
 Instead you can use `Loadable` to abstract away the problem.
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 
 const LoadableBar = Loadable({
   loader: () => import('./components/Bar'),
@@ -527,7 +535,7 @@ For this, there is [`Loadable.Capture`](#loadablecapture) component which can
 be used to collect all the modules that were rendered.
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 
 app.get('/', (req, res) => {
   let modules = [];
@@ -578,7 +586,7 @@ To convert from modules to bundles, import the [`getBundles`](#getbundles)
 method from `react-loadable/webpack` and the data from Webpack.
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 import { getBundles } from 'react-loadable/webpack'
 import stats from './dist/react-loadable.json';
 
@@ -655,7 +663,7 @@ which on resolution means that we can hydrate our app.
 // src/entry.js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 import App from './components/App';
 
 Loadable.preloadReady().then(() => {
@@ -1063,7 +1071,7 @@ you:
 **Input**
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 
 const LoadableMyComponent = Loadable({
   loader: () => import('./MyComponent'),
@@ -1080,7 +1088,7 @@ const LoadableComponents = Loadable.Map({
 **Output**
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 import path from 'path';
 
 const LoadableMyComponent = Loadable({
@@ -1154,7 +1162,7 @@ Specifying the same `loading` component or `delay` every time you use
 own Higher-Order Component (HOC) to set default options.
 
 ```js
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 import Loading from './my-loading-component';
 
 export default function MyLoadable(opts) {

__tests__/.babelrc

@@ -1,11 +1,15 @@
 {
   "presets": [
-    ["es2015", {
-      "loose": true,
-    }],
-    "react",
+    [
+      "@babel/preset-env",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-flow"
   ],
   "plugins": [
-    "transform-async-to-generator",
-  ],
+    "@babel/plugin-transform-async-to-generator"
+  ]
 }

__tests__/test.js

@@ -1,5 +1,5 @@
 'use strict';
-
+require('babel-polyfill');
 const path = require('path');
 const React = require('react');
 const renderer = require('react-test-renderer');
@@ -34,7 +34,7 @@ function MyComponent(props) {
 afterEach(async () => {
   try {
     await Loadable.preloadAll();
-  } catch (err) {}
+  } catch (err) { }
 });
 
 test('loading success', async () => {
@@ -140,7 +140,7 @@ test('render', async () => {
     loader: createLoader(400, () => ({ MyComponent })),
     loading: MyLoadingComponent,
     render(loaded, props) {
-      return <loaded.MyComponent {...props}/>;
+      return <loaded.MyComponent {...props} />;
     }
   });
   let component = renderer.create(<LoadableMyComponent prop="baz" />);
@@ -161,8 +161,8 @@ test('loadable map success', async () => {
     render(loaded, props) {
       return (
         <div>
-          <loaded.a.MyComponent {...props}/>
-          <loaded.b.MyComponent {...props}/>
+          <loaded.a.MyComponent {...props} />
+          <loaded.b.MyComponent {...props} />
         </div>
       );
     }
@@ -186,8 +186,8 @@ test('loadable map error', async () => {
     render(loaded, props) {
       return (
         <div>
-          <loaded.a.MyComponent {...props}/>
-          <loaded.b.MyComponent {...props}/>
+          <loaded.a.MyComponent {...props} />
+          <loaded.b.MyComponent {...props} />
         </div>
       );
     }
@@ -272,9 +272,9 @@ describe('preloadReady', () => {
       delay: 0,
       timeout: 200,
     });
-  
+
     let loadingComponent = renderer.create(<LoadableMyComponent prop="foo" />);
-  
+
     expect(loadingComponent.toJSON()).toMatchSnapshot(); // loading
   });
 });

example/.babelrc

@@ -1,18 +1,22 @@
 {
   "presets": [
-    "es2015",
-    "react",
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-flow"
   ],
   "plugins": [
     "dynamic-import-node",
-    "transform-class-properties",
+    "@babel/plugin-proposal-class-properties",
     "../babel",
-    ["module-resolver", {
-      "alias": {
-        "react-loadable": "./src/index.js",
-        "react-loadable/server": "./src/server.js",
-        "react-loadable/webpack": "./src/webpack.js",
-      },
-    }]
-  ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "@yeutech-lab/react-loadable": "./src/index.js",
+          "@yeutech-lab/react-loadable/server": "./src/server.js",
+          "@yeutech-lab/react-loadable/webpack": "./src/webpack.js"
+        }
+      }
+    ]
+  ]
 }

example/client.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Loadable from 'react-loadable';
+import Loadable from '@yeutech-lab/react-loadable';
 import App from './components/App';
 
 window.main = () => {