dependency bumps and cleanup

.eslintrc

@@ -1,15 +1,12 @@
 {
-  "env": {
-    "browser": true
-  },
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "plugins": [
-    "react",
-    "jsx-a11y",
-    "import"
-  ],
-  "rules": {
-    "react/jsx-filename-extension": 0
-  }
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "parser": "babel-eslint",
+    "extends": ["plugin:prettier/recommended"],
+    "plugins": ["react", "jsx-a11y", "import"],
+    "rules": {
+        "react/jsx-filename-extension": 0
+    }
 }

components/ReactFullpage/index.js

@@ -72,20 +72,16 @@ class ReactFullpage extends React.Component {
 
   getSectionCount() {
     const { sectionSelector = '.section' } = this.props;
-    return document
-      .querySelectorAll(sectionSelector)
-      .length;
+    return document.querySelectorAll(sectionSelector).length;
   }
 
   getSlideCount() {
     const { slideSelector = '.slide' } = this.props;
-    return document
-      .querySelectorAll(slideSelector)
-      .length;
+    return document.querySelectorAll(slideSelector).length;
   }
 
   init(opts) {
-    new Fullpage('#fullpage', opts); // eslint-disable-line
+        new Fullpage('#fullpage', opts) // eslint-disable-line
     this.fullpageApi = window.fullpage_api;
     this.fpUtils = window.fp_utils;
     this.fpEasings = window.fp_easings;
@@ -94,9 +90,7 @@ class ReactFullpage extends React.Component {
   destroy() {
     // NOTE: need to check for init to support SSR
     if (typeof window !== 'undefined') {
-      this
-        .fullpageApi
-        .destroy('all');
+      this.fullpageApi.destroy('all');
     }
   }
 
@@ -109,18 +103,14 @@ class ReactFullpage extends React.Component {
   }
 
   buildOptions() {
-    const filterCb = key => !!Object
-      .keys(this.props)
-      .find(cb => cb === key);
+    const filterCb = key => !!Object.keys(this.props).find(cb => cb === key);
     const registered = fullpageCallbacks.filter(filterCb);
     const listeners = registered.reduce((result, key) => {
       const agg = {
         ...result,
       };
       agg[key] = (...args) => {
-        const newArgs = [
-          key, ...args,
-        ];
+        const newArgs = [key, ...args];
         this.update(...newArgs);
       };
 
@@ -146,11 +136,12 @@ class ReactFullpage extends React.Component {
       lastEvent,
     });
 
-    const fromArgs = argList => argList.reduce((result, key, i) => {
-      const value = args[i];
-      result[key] = value; // eslint-disable-line
-      return result;
-    }, {});
+    const fromArgs = argList =>
+      argList.reduce((result, key, i) => {
+        const value = args[i];
+                result[key] = value // eslint-disable-line
+        return result;
+      }, {});
 
     // NOTE: remapping callback args to v3
     // https://github.com/alvarotrigo/fullPage.js#callbacks
@@ -169,16 +160,26 @@ class ReactFullpage extends React.Component {
         break;
 
       case 'afterSlideLoad':
-        state = makeState(fromArgs(['section', 'origin', 'destination', 'direction']));
+        state = makeState(
+          fromArgs(['section', 'origin', 'destination', 'direction'])
+        );
         break;
 
-        // On-*
+      // On-*
       case 'onLeave':
         state = makeState(fromArgs(['origin', 'destination', 'direction']));
         break;
 
       case 'onSlideLeave':
-        state = makeState(fromArgs(['section', 'origin', 'slideIndex', 'destination', 'direction']));
+        state = makeState(
+          fromArgs([
+            'section',
+            'origin',
+            'slideIndex',
+            'destination',
+            'direction',
+          ])
+        );
         break;
 
       default:
@@ -191,11 +192,7 @@ class ReactFullpage extends React.Component {
   }
 
   render() {
-    return (
-      <div id="fullpage">
-        {this.props.render(this)}
-      </div>
-    );
+    return <div id="fullpage">{this.props.render(this)}</div>;
   }
 }
 

components/Utils/index.js

@@ -1,8 +1,4 @@
-const {
-  author,
-  name,
-  version
-} = require('../../package.json')
+const { author, name, version } = require('../../package.json');
 
 exports.banner = `/*!
  * ${name} ${version}
@@ -10,4 +6,4 @@ exports.banner = `/*!
  * @license https://github.com/alvarotrigo/react-fullpage#license
  *
  * Copyright (C) 2018 alvarotrigo.com - A project by Alvaro Trigo & Michael Walker
- */`
+ */`;

components/Wrapper/index.js

@@ -2,6 +2,6 @@
 
 import React, { Fragment } from 'react';
 
-const Wrapper = ({ children }) => <Fragment>{children}</Fragment>
+const Wrapper = ({ children }) => <Fragment>{children}</Fragment>;
 
 export default Wrapper;

components/index.js

@@ -1,17 +1,17 @@
 /* eslint-disable */
-import Wrapper from './Wrapper';
+import Wrapper from './Wrapper'
 
 export default (() => {
-  let exported;
+    let exported
 
-  if (typeof window !== 'undefined') {
-    exported = require('./ReactFullpage').default;
-  } else {
-    // NOTE: SSR support
-    exported = require('./ReactFullpageShell').default;
-  }
+    if (typeof window !== 'undefined') {
+        exported = require('./ReactFullpage').default
+    } else {
+        // NOTE: SSR support
+        exported = require('./ReactFullpageShell').default
+    }
 
-  exported.Wrapper = Wrapper;
+    exported.Wrapper = Wrapper
 
-  return exported;
-})();
+    return exported
+})()

dist/index.html

@@ -7,5 +7,5 @@
 </head>
 <body>
   <div id="react-root"></div>
-<script type="text/javascript" src="react-fullpage-commonjs.js"></script></body>
+<script type="text/javascript" src="react-fullpage.js"></script></body>
 </html>

example/README.md

@@ -1,17 +0,0 @@
-# Demo using Webpack
-
-> A React.js project
-
-## Build Setup
-
-In order to generate the compiled examples files just run the following commands from this folder.
-
-``` bash
-# install dependencies
-npm install
-
-# build for production with minification
-npm run build
-```
-
-This will create the bundle file `dist/main.js` containing the whole application. This file is then loaded in `dist/index.html`.

example/dist/index.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <title>React-fullpage example</title>
-    <meta name="author" content="Alvaro Trigo Lopez" />
-    <meta name="description" content="react-fullpage.js. Official React.js component for fullPage.js. An easy to use wrapper for your react application.">
-    <meta name="keywords" content="fullpage, react wrapper,react.js,react-fullpage,react-component,adapter,component,react,sections,slides,scrolling,snap,snapping,scroll">
-    <meta name="Resource-type" content="Document" />
-
-    <!-- custom styles for the example -->
-    <style>
-    body {
-        font-family: arial,helvetica;
-    }
-    h3{
-        font-size: 5em;
-        text-align: center;
-        color: #fff;
-        font-weight: 700;
-    }
-    #section1{
-        color: #fff;
-    }
-    .fp-section{
-        text-align: center;
-    }
-    button{
-        padding: .93em 1.87em;
-        background: #35495e;
-        border-radius: 5px;
-        border-color: transparent;
-        display: block;
-        color: #fff;
-        margin: 0 auto;
-        cursor: pointer;
-        font-size: 0.85em;
-    }
-    </style>
-</head>
-<body>
-
-    <div id="react-root"></div>
-
-</div>
-
-<script src="main.js"></script>
-
-</body>
-</html>

example/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "example",
-  "version": "0.0.0",
-  "private": true,
-  "dependencies": {
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2"
-  },
-  "scripts": {
-    "build": "npx webpack --config webpack.config.js"
-  },
-  "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "css-loader": "^1.0.1",
-    "html-loader": "^0.5.5",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.1"
-  }
-}

example/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactFullpage from '../../components';
 
-//import 'fullpage.js/vendors/scrolloverflow'; // Optional. When using scrollOverflow:true
+// import 'fullpage.js/vendors/scrolloverflow'; // Optional. When using scrollOverflow:true
 
 const originalColors = ['#282c34', '#ff5f45', '#0798ec'];
 
@@ -14,7 +14,9 @@ class App extends React.Component {
       fullpages: [
         {
           text: 'section 1',
-          id: Math.random(),
+        },
+        {
+          text: 'section 2',
         },
       ],
     };
@@ -27,14 +29,17 @@ class App extends React.Component {
   }
 
   handleChangeColors() {
-    const newColors = this.state.sectionsColor[0] === 'yellow' ? [...originalColors] : ['yellow', 'blue', 'white']
+    const newColors =
+      this.state.sectionsColor[0] === 'yellow'
+        ? [...originalColors]
+        : ['yellow', 'blue', 'white'];
     this.setState({
       sectionsColor: newColors,
     });
   }
 
   handleAddSection() {
-    this.setState((state) => {
+    this.setState(state => {
       const { fullpages } = state;
       const { length } = fullpages;
       fullpages.push({
@@ -49,7 +54,7 @@ class App extends React.Component {
   }
 
   handleRemoveSection() {
-    this.setState((state) => {
+    this.setState(state => {
       const { fullpages } = state;
       const newPages = [...fullpages];
       newPages.pop();
@@ -69,16 +74,20 @@ class App extends React.Component {
       <div
         className="menu"
         style={{
-        position: 'fixed',
-        top: 0,
-        zIndex: 100,
-      }}
+          position: 'fixed',
+          top: 0,
+          zIndex: 100,
+        }}
       >
         <ul>
           <li>
             <button onClick={() => this.handleAddSection()}>+ Section</button>
-            <button onClick={() => this.handleRemoveSection()}>- Section</button>
-            <button onClick={() => this.handleChangeColors()}>Change colors</button>
+            <button onClick={() => this.handleRemoveSection()}>
+              - Section
+            </button>
+            <button onClick={() => this.handleChangeColors()}>
+              Change colors
+            </button>
           </li>
         </ul>
       </div>
@@ -91,15 +100,17 @@ class App extends React.Component {
           navigation
           onLeave={this.onLeave.bind(this)}
           sectionsColor={this.state.sectionsColor}
-          render={comp => console.log('render prop change') || (
-            <ReactFullpage.Wrapper>
-              {fullpages.map(({ text, id }) => (
-                <div key={id} className="section">
-                  <h1>{text}</h1>
-                </div>
-              ))}
-            </ReactFullpage.Wrapper>
-          )}
+          render={comp =>
+            console.log('render prop change') || (
+              <ReactFullpage.Wrapper>
+                {fullpages.map(({ text }) => (
+                  <div key={text} className="section">
+                    <h1>{text}</h1>
+                  </div>
+                ))}
+              </ReactFullpage.Wrapper>
+            )
+          }
         />
       </div>
     );
@@ -107,4 +118,4 @@ class App extends React.Component {
 }
 
 const rootElement = document.getElementById('react-root');
-ReactDOM.render(<App />, rootElement);
+ReactDOM.render(<App />, rootElement);

example/webpack.config.js

@@ -1,43 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  mode: 'production',
-  entry: './src/index.js',
-  output: {
-    filename: 'main.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-
-  optimization: {
-    minimize: true,
-  },
-
-  module: {
-    rules: [
-
-      // BABEL
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-
-      // STYLES
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-

package.json

@@ -33,13 +33,16 @@
     "cypress": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-prettier": "^3.3.0",
     "eslint-plugin-cypress": "^2.0.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
     "file-loader": "1.1.11",
     "html-webpack-plugin": "3.2.0",
     "node-sass": "4.9.0",
+    "prettier": "^1.15.2",
     "prettier-eslint": "^8.8.1",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};

webpack.config.build.js

@@ -19,8 +19,8 @@ const shared = {
 
   externals: {
     // Don't bundle react or react-dom
-    react: 'react',
-    'react-dom': 'react-dom',
+    react: 'React',
+    'react-dom': 'ReactDOM',
   },
 };
 
@@ -34,12 +34,4 @@ module.exports = [
       umdNamedDefine: true,
     },
   }),
-  merge(webpackConfig, shared, {
-    output: {
-      path: path.join(__dirname, 'dist'),
-      filename: 'react-fullpage-commonjs.js',
-      library: 'ReactFullpage',
-      libraryTarget: 'commonjs2',
-    },
-  }),
 ];

webpack.config.js

@@ -5,7 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { name } = require('./package.json');
 
 const { NODE_ENV = 'dev' } = process.env;
-const IS_DEV = (NODE_ENV === 'dev');
+const IS_DEV = NODE_ENV === 'dev';
 const dirNode = 'node_modules';
 const dirApp = path.join(__dirname, 'example', 'src');
 const dirAssets = path.join(__dirname, 'assets');
@@ -21,11 +21,7 @@ module.exports = {
     bundle: path.join(dirApp, 'index'),
   },
   resolve: {
-    modules: [
-      dirNode,
-      dirApp,
-      dirAssets,
-    ],
+    modules: [dirNode, dirApp, dirAssets],
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -42,7 +38,7 @@ module.exports = {
     new webpack.BannerPlugin({
       banner,
       raw: true,
-      entryOnly: true
+      entryOnly: true,
     }),
   ],
   module: {