Merge pull request #110 from smooth-code/upgrade-dependencies

chore: upgrade dependencies
gregberge · Aug 16, 2018 · b9d78bd · b9d78bd
2 parents ac93b49 + 9b99cd8
commit b9d78bd
Show file tree

Hide file tree

Showing 16 changed files with 1,710 additions and 690 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,6 +9,7 @@
     "no-param-reassign": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
     "react/jsx-wrap-multilines": "off",
-    "react/no-unused-state": "off"
+    "react/no-unused-state": "off",
+    "react/destructuring-assignment": "off"
   }
 }
diff --git a/README.md b/README.md
@@ -430,8 +430,8 @@ getLoadableState(app).then(loadableState => {
 
 A loadable state has two methods to extract state:
 
-* `loadableState.getScriptTag()`: Returns a string representing a script tag.
-* `loadableState.getScriptElement()`: Returns a React element.
+- `loadableState.getScriptTag()`: Returns a string representing a script tag.
+- `loadableState.getScriptElement()`: Returns a React element.
 
 ## Interoperability
 
@@ -482,15 +482,15 @@ class ComponentWithTranslations extends React.Component {
 
 The main difference between these two libraries is the server-side rendering approach:
 
-* `react-loadable` requires a webpack plugin and a babel plugin. I think it's too complicated and we should not rely on it.
-* `react-async-component` has a better approach, analyzing tree + context, it also rely on another library. I like the idea but not the API.
+- `react-loadable` requires a webpack plugin and a babel plugin. I think it's too complicated and we should not rely on it.
+- `react-async-component` has a better approach, analyzing tree + context, it also rely on another library. I like the idea but not the API.
 
 Loadable Components has a simpler approach, it relies on [dynamic-import-specification](https://github.com/tc39/proposal-dynamic-import) and assumes that [it is working for node and Webpack](https://babeljs.io/docs/plugins/syntax-dynamic-import/). Then it analyzes the tree server-side and waiting for every modules to be loaded. Client-side it loads modules before rendering the application. The API is as simple as possible, no context, no magic variable.
 
 ## Inspirations
 
-* API inspired by [Styled Components](https://github.com/styled-components/styled-components)
-* React tree traversing from [React Apollo](https://github.com/apollographql/react-apollo)
+- API inspired by [Styled Components](https://github.com/styled-components/styled-components)
+- React tree traversing from [React Apollo](https://github.com/apollographql/react-apollo)
 
 ## MIT
 

diff --git a/example/src/hot-reloading-sandbox/HotReloadingSandbox.js b/example/src/hot-reloading-sandbox/HotReloadingSandbox.js
@@ -5,7 +5,8 @@ const AsyncCounter = loadable(() => import('./Counter'))
 
 const HotReloadingSandbox = () => (
   <React.Fragment>
-    Counter: <AsyncCounter />
+    Counter:
+    <AsyncCounter />
   </React.Fragment>
 )
 

diff --git a/example/src/multiple-load/MultipleLoad.js b/example/src/multiple-load/MultipleLoad.js
@@ -11,7 +11,8 @@ const MultipleLoad = loadable(
     } = await import(/* webpackChunkName: "Amazing" */ './Amazing')
     return () => (
       <React.Fragment>
-        <Amazing /> <World />
+        <Amazing />
+        <World />
       </React.Fragment>
     )
   },

diff --git a/example/src/nesting/AmazingWorld.js b/example/src/nesting/AmazingWorld.js
@@ -5,7 +5,8 @@ const AsyncWorld = loadable(() => import('./World'))
 
 const AmazingWorld = () => (
   <React.Fragment>
-    Amazing <AsyncWorld />
+    Amazing
+    <AsyncWorld />
   </React.Fragment>
 )
 

diff --git a/example/src/nesting/Nesting.js b/example/src/nesting/Nesting.js
@@ -5,7 +5,8 @@ const AsyncAmazingWorld = loadable(() => import('./AmazingWorld'))
 
 const Nesting = () => (
   <React.Fragment>
-    This is an <AsyncAmazingWorld />
+    This is an
+    <AsyncAmazingWorld />
   </React.Fragment>
 )
 

diff --git a/example/src/same-modules/SameModules.js b/example/src/same-modules/SameModules.js
@@ -4,7 +4,8 @@ import B from './B'
 
 const Nesting = () => (
   <React.Fragment>
-    <A /> <B />
+    <A />
+    <B />
   </React.Fragment>
 )
 

diff --git a/example/src/server.js b/example/src/server.js
@@ -18,7 +18,10 @@ app.use(async (req, res) => {
     const loadableState = await getLoadableState(reactApp)
     const stream = ReactDOMServer.renderToNodeStream(reactApp)
     res.write(`<!DOCTYPE html><html><body><div id="root">`)
-    stream.pipe(res, { end: false })
+    stream.pipe(
+      res,
+      { end: false },
+    )
     stream.on('end', () => {
       res.end(
         `</div>${loadableState.getScriptTag()}<script src="bundle.js"></script></body></html>`,
@@ -30,4 +33,5 @@ app.use(async (req, res) => {
   }
 })
 
+// eslint-disable-next-line no-console
 app.listen(3000, () => console.log('http://localhost:3000'))
diff --git a/package.json b/package.json
@@ -35,49 +35,49 @@
     "react": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@types/react": "^16.3.14",
+    "@types/react": "^16.4.11",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-jest": "^22.4.3",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-eslint": "^8.2.6",
+    "babel-jest": "^23.4.2",
+    "babel-plugin-dynamic-import-node": "^2.0.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "bundlesize": "^0.17.0",
-    "codecov": "^3.0.1",
-    "conventional-github-releaser": "^2.0.2",
+    "codecov": "^3.0.4",
+    "conventional-github-releaser": "^3.1.2",
     "dtslint": "^0.3.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.11.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "jest": "^22.4.3",
-    "prettier": "^1.12.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-router": "^4.2.0",
-    "react-test-renderer": "^16.3.2",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-json": "^2.3.0",
+    "enzyme": "^3.4.2",
+    "enzyme-adapter-react-16": "^1.2.0",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^3.0.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.1",
+    "jest": "^23.5.0",
+    "prettier": "^1.14.2",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-router": "^4.3.1",
+    "react-test-renderer": "^16.4.2",
+    "rollup": "^0.64.1",
+    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-commonjs": "^9.1.5",
+    "rollup-plugin-json": "^3.0.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-uglify": "^3.0.0",
-    "rollup-plugin-visualizer": "^0.6.0",
-    "standard-version": "^4.3.0"
+    "rollup-plugin-uglify": "^4.0.0",
+    "rollup-plugin-visualizer": "^0.9.0",
+    "standard-version": "^4.4.0"
   },
   "dependencies": {
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "hoist-non-react-statics": "^2.5.0"
+    "hoist-non-react-statics": "^3.0.1"
   },
   "jest": {
     "setupFiles": [

diff --git a/rollup.config.js b/rollup.config.js
@@ -4,7 +4,7 @@ import replace from 'rollup-plugin-replace'
 import commonjs from 'rollup-plugin-commonjs'
 import babel from 'rollup-plugin-babel'
 import json from 'rollup-plugin-json'
-import uglify from 'rollup-plugin-uglify'
+import { uglify } from 'rollup-plugin-uglify'
 import visualizer from 'rollup-plugin-visualizer'
 import sourceMaps from 'rollup-plugin-sourcemaps'
 import pkg from './package.json'
@@ -29,7 +29,10 @@ const umdConfig = Object.assign({}, configBase, {
     format: 'umd',
     name: 'loadable',
     exports: 'named',
-    globals: { react: 'React', 'hoist-non-react-statics': 'hoistNonReactStatics' },
+    globals: {
+      react: 'React',
+      'hoist-non-react-statics': 'hoistNonReactStatics',
+    },
     sourcemap: true,
   },
 })
@@ -60,14 +63,20 @@ const esConfig = Object.assign({}, configBase, {
     {
       file: 'dist/loadable-components.es.js',
       format: 'es',
-      globals: { react: 'React', 'hoist-non-react-statics': 'hoistNonReactStatics' },
+      globals: {
+        react: 'React',
+        'hoist-non-react-statics': 'hoistNonReactStatics',
+      },
       sourcemap: true,
     },
     {
       file: 'dist/loadable-components.cjs.js',
       format: 'cjs',
       exports: 'named',
-      globals: { react: 'React', 'hoist-non-react-statics': 'hoistNonReactStatics' },
+      globals: {
+        react: 'React',
+        'hoist-non-react-statics': 'hoistNonReactStatics',
+      },
       sourcemap: true,
     },
   ],

diff --git a/src/getState.test.js b/src/getState.test.js
@@ -1,4 +1,4 @@
-import { getState } from './'
+import { getState } from '.'
 import loadable from './loadable'
 
 describe('#getState', () => {

diff --git a/src/loadComponents.js b/src/loadComponents.js
@@ -10,26 +10,36 @@ function loadState(rootState) {
       const component = componentTracker.get(state.id)
 
       if (!component) {
-        console.warn( // eslint-disable-line
+        // eslint-disable-next-line
+        console.warn(
           'loadable-component client modules:',
           componentTracker.getAll(),
         )
-        console.warn( // eslint-disable-line
+        // eslint-disable-next-line
+        console.warn(
           'loadable-component server modules:',
           window[LOADABLE_STATE],
         )
 
-        return Promise.reject(new Error(`loadable-components: module "${
-          state.id
-        }" is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.`))
+        return Promise.reject(
+          new Error(
+            `loadable-components: module "${
+              state.id
+            }" is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.`,
+          ),
+        )
       }
 
       const getLoadable = component[LOADABLE]
 
       if (typeof getLoadable !== 'function') {
-        return Promise.reject(new Error(`loadable-components: module "${
-          state.id
-        }" is not a loadable component, please verify your SSR setup`))
+        return Promise.reject(
+          new Error(
+            `loadable-components: module "${
+              state.id
+            }" is not a loadable component, please verify your SSR setup`,
+          ),
+        )
       }
 
       return getLoadable()
@@ -41,15 +51,23 @@ function loadState(rootState) {
 
 function loadComponents() {
   if (typeof window === 'undefined') {
-    return Promise.reject(new Error('loadable-components: `loadComponents` must ' +
-      'be called client-side: `window` is undefined'))
+    return Promise.reject(
+      new Error(
+        'loadable-components: `loadComponents` must ' +
+          'be called client-side: `window` is undefined',
+      ),
+    )
   }
 
   const state = window[LOADABLE_STATE]
   if (!state) {
-    return Promise.reject(new Error('loadable-components state not found. ' +
-      'You have a problem server-side. ' +
-      'Please verify that you have called `loadableState.getScriptTag()` server-side.'))
+    return Promise.reject(
+      new Error(
+        'loadable-components state not found. ' +
+          'You have a problem server-side. ' +
+          'Please verify that you have called `loadableState.getScriptTag()` server-side.',
+      ),
+    )
   }
 
   return loadState(state)

diff --git a/src/loadComponents.test.js b/src/loadComponents.test.js
@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { LOADABLE_STATE } from './constants'
-import loadable from './'
+import loadable from '.'
 import * as componentTracker from './componentTracker'
 import loadComponents from './loadComponents'
 
@@ -38,29 +38,33 @@ describe('loadComponents', () => {
 
   it('rejects when no component is found in componentTracker', async () => {
     window[LOADABLE_STATE] = {
-      children: [{ id: null } ]
+      children: [{ id: null }],
     }
 
     expect.assertions(1)
     try {
       await loadComponents()
     } catch (error) {
-      expect(error.message).toMatch(/loadable-components: module "null" is not found/)
+      expect(error.message).toMatch(
+        /loadable-components: module "null" is not found/,
+      )
     }
   })
 
   it('rejects when found component is not a function', async () => {
     const BadComponent = -1
     const badId = componentTracker.track(BadComponent, ['./BadComponent'])
     window[LOADABLE_STATE] = {
-      children: [{ id: badId } ]
+      children: [{ id: badId }],
     }
 
     expect.assertions(1)
     try {
       await loadComponents()
     } catch (error) {
-      expect(error.message).toMatch(/loadable-components: module ".\/BadComponent" is not a loadable component/)
+      expect(error.message).toMatch(
+        /loadable-components: module ".\/BadComponent" is not a loadable component/,
+      )
     }
   })
 

diff --git a/src/loadable.js b/src/loadable.js
@@ -19,6 +19,7 @@ function loadable(
 ) {
   class LoadableComponent extends React.Component {
     static Component = null
+
     static loadingPromise = null
 
     static load() {

diff --git a/src/server/index.test.js b/src/server/index.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react'
 import { Route, StaticRouter } from 'react-router'
-import { getLoadableState } from './'
+import { getLoadableState } from '.'
 import { Books } from '../__fixtures__/Routes'
 
 describe('server side rendering', () => {