upgrade to webpack 4

Author: Rajat Sancheti

package.json

@@ -35,18 +35,22 @@
     "react": ">=0.14.0"
   },
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.1",
+    "@types/react-dom": "^16.9.1",
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "7",
     "eslint-plugin-react": "^3.5.1",
     "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.10.0",
+    "html-webpack-plugin": "^3.2.0",
     "prop-types": "~15.5.8",
     "react": "~15.5.4",
     "react-dom": "~15.5.4",
     "react-hot-loader": "^1.3.0",
+    "ts-loader": "^6.1.2",
     "typescript": "^3.6.3",
-    "webpack": "^1.10.1",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^1.10.1",
     "webpack-hot-middleware": "^2.10.0"
   },

src/index.tsx

@@ -4,26 +4,26 @@ import { ThresholdUnits, parseThreshold } from "./utils/threshold";
 
 type Fn = () => any;
 interface Props {
-  next: Fn;
-  hasMore: boolean;
-  children: ReactNode;
+  next?: Fn;
+  hasMore?: boolean;
+  children?: ReactNode;
   loader: ReactNode;
-  scrollThreshold: number | string;
-  endMessage: ReactNode;
-  style: CSSProperties;
-  height: number;
-  scrollableTarget: ReactNode;
-  hasChildren: boolean;
-  pullDownToRefresh: boolean;
-  pullDownToRefreshContent: ReactNode;
-  releaseToRefreshContent: ReactNode;
-  pullDownToRefreshThreshold: number;
-  refreshFunction: Fn;
-  onScroll: (e: MouseEvent) => any;
+  scrollThreshold?: number | string;
+  endMessage?: ReactNode;
+  style?: CSSProperties;
+  height?: number;
+  scrollableTarget?: ReactNode;
+  hasChildren?: boolean;
+  pullDownToRefresh?: boolean;
+  pullDownToRefreshContent?: ReactNode;
+  releaseToRefreshContent?: ReactNode;
+  pullDownToRefreshThreshold?: number;
+  refreshFunction?: Fn;
+  onScroll?: (e: MouseEvent) => any;
   dataLength: number;
-  initialScrollY: number;
-  key: string;
-  className: string;
+  initialScrollY?: number;
+  key?: string;
+  className?: string;
 }
 
 interface State {
@@ -191,7 +191,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     // user is scrolling down to up
     if (this.currentY < this.startY) return;
 
-    if (this.currentY - this.startY >= this.props.pullDownToRefreshThreshold) {
+    if (this.currentY - this.startY >= Number(this.props.pullDownToRefreshThreshold)) {
       this.setState({
         pullToRefreshThresholdBreached: true
       });
@@ -207,7 +207,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
   };
 
-  onEnd: EventListener = evt => {
+  onEnd: EventListener = () => {
     this.startY = 0;
     this.currentY = 0;
 
@@ -254,7 +254,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     if (typeof this.props.onScroll === "function") {
       // Execute this callback in next tick so that it does not affect the
       // functionality of the library.
-      setTimeout(() => this.props.onScroll(event), 0);
+      setTimeout(() => this.props.onScroll && this.props.onScroll(event), 0);
     }
 
     let target =
@@ -274,7 +274,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     if (atBottom && this.props.hasMore) {
       this.actionTriggered = true;
       this.setState({ showLoader: true });
-      this.props.next();
+      this.props.next && this.props.next();
     }
 
     this.lastScrollTop = target.scrollTop;

webpack.config.js

@@ -9,20 +9,29 @@ var common = {
   entry: {},
   output: {},
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
-      { test: /\.css$/, exclude: /node_modules/, loader: 'style!css' }
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
+      { test: /\.css$/, exclude: /node_modules/, use: 'style!css' },
+      { test: /\.tsx?$/, exclude: /node_modules/, use: 'ts-loader' },
     ]
   },
   plugins: [
-    new webpack.NoErrorsPlugin()
-  ]
+    new webpack.NoEmitOnErrorsPlugin()
+  ],
+  resolve: {
+    modules: [
+        path.join(__dirname, "src"),
+        "node_modules"
+      ],
+    extensions: ['.js', '.ts', '.tsx'],
+  },
 };
 
 var finalConf;
 if (isDevelopment) {
   finalConf = Object.assign({}, common);
-  finalConf.entry.app = ['webpack-hot-middleware/client', './demos/index.js']; // HMR
+  finalConf.mode = 'development';
+  finalConf.entry.app = ['./demos/index.tsx']; // HMR
   finalConf.output = {
     path: BUILD_PATH,
     filename: 'demo.js'
@@ -31,13 +40,12 @@ if (isDevelopment) {
   finalConf.plugins = [...finalConf.plugins,
     new HtmlWebpackPlugin({
       template: './index.html'
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin()];
+    })];
 } else {
   // production config
   finalConf = Object.assign({}, common);
-  finalConf.entry.app = './app/index.js';
+  finalConf.entry.app = './src/index.tsx';
+  finalConf.mode = 'production';
   finalConf.output = {
     path: BUILD_PATH,
     filename: 'index.js',
@@ -54,8 +62,6 @@ if (isDevelopment) {
     }
   };
   finalConf.plugins = [...finalConf.plugins,
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
     })