New build;

Examples build configured;

Author: xobotyi

.gitignore

@@ -1,5 +1,5 @@
 node_modules/
 coverage/
 .idea/
-examples/static/bundle.js
+examples/static/
 package-lock.json

dist/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var loopIsActive = false;
+var animationFrame = null;
+var loopRegister = [];
+
+var LoopController =
+/*#__PURE__*/
+function () {
+  function LoopController() {
+    _classCallCheck(this, LoopController);
+
+    this.rafStep = this.rafStep.bind(this);
+  }
+
+  _createClass(LoopController, [{
+    key: "getRegisteredItems",
+    value: function getRegisteredItems() {
+      return loopRegister.concat();
+    }
+  }, {
+    key: "registerScrollbar",
+    value: function registerScrollbar(scrollbar) {
+      if (!loopRegister.includes(scrollbar)) {
+        loopRegister.push(scrollbar);
+        this.start();
+      }
+
+      return this;
+    }
+  }, {
+    key: "unregisterScrollbar",
+    value: function unregisterScrollbar(scrollbar) {
+      var index = loopRegister.indexOf(scrollbar);
+
+      if (index !== -1) {
+        loopRegister.length === 1 && this.stop();
+        loopRegister.splice(index, 1);
+      }
+
+      return this;
+    }
+  }, {
+    key: "start",
+    value: function start() {
+      if (!loopIsActive) {
+        loopIsActive = true;
+        animationFrame && cancelAnimationFrame(animationFrame);
+        animationFrame = requestAnimationFrame(this.rafStep);
+      }
+
+      return this;
+    }
+  }, {
+    key: "rafStep",
+    value: function rafStep() {
+      if (!loopIsActive) {
+        return;
+      }
+
+      for (var i = 0; i < loopRegister.length; i++) {
+        loopRegister[i].update();
+      }
+
+      animationFrame = requestAnimationFrame(this.rafStep);
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      if (loopIsActive) {
+        loopIsActive = false;
+        animationFrame && cancelAnimationFrame(animationFrame);
+      }
+
+      return this;
+    }
+  }]);
+
+  return LoopController;
+}();
+
+var instance = new LoopController();
+var _default = instance;
+exports.default = _default;

dist/util/LoopController.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInnerHeight = getInnerHeight;
+exports.getInnerWidth = getInnerWidth;
+exports.getInnerSizes = getInnerSizes;
+
+/**
+ * @description Returns element"s height without padding
+ * @param {HTMLElement} el
+ * @return {number}
+ */
+function getInnerHeight(el) {
+  var styles = getComputedStyle(el);
+  return el.clientHeight - styles.paddingTop.slice(0, -2) - styles.paddingBottom.slice(0, -2);
+}
+/**
+ * @description Returns element"s width without padding
+ * @param {HTMLElement} el
+ * @return {number}
+ */
+
+
+function getInnerWidth(el) {
+  var styles = getComputedStyle(el);
+  return el.clientWidth - styles.paddingLeft.slice(0, -2) - styles.paddingRight.slice(0, -2);
+}
+/**
+ * @description Returns element"s dimensions without padding
+ * @param {HTMLElement} el
+ * @return {{width: number, height: number}}
+ */
+
+
+function getInnerSizes(el) {
+  var styles = getComputedStyle(el);
+  return {
+    width: el.clientHeight - styles.paddingLeft.slice(0, -2) - styles.paddingRight.slice(0, -2),
+    height: el.clientHeight - styles.paddingTop.slice(0, -2) - styles.paddingBottom.slice(0, -2)
+  };
+}

dist/util/getInnerSizes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isset = isset;
+exports.getScrollbarWidth = getScrollbarWidth;
+
+/**
+ * @description Check if variable defined and not null
+ * @param v
+ * @return {boolean}
+ */
+function isset(v) {
+  return typeof v !== "undefined" && v !== null;
+}
+
+var scrollbarWidth = null;
+/**
+ * @description Returns scrollbar width specific for current environment
+ * @return {number}
+ */
+
+function getScrollbarWidth() {
+  if (!isset(document)) {
+    return 0;
+  }
+
+  if (scrollbarWidth !== null) {
+    return scrollbarWidth;
+  }
+
+  var el = document.createElement("div");
+  el.setAttribute("style", "display:block;position:absolute;width:100px;height:100px;top:-9999px;overflow:scroll;");
+  document.body.appendChild(el);
+  scrollbarWidth = el.offsetWidth - el.clientWidth || 0;
+  document.body.removeChild(el);
+  return scrollbarWidth;
+}

dist/util/utilities.js

@@ -0,0 +1,75 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CleanDirWebpackPlugin = require("cleandir-webpack-plugin");
+
+const distPath = path.join(__dirname, "/static");
+
+module.exports = {
+    mode:         "production",
+    target:       "web",
+    entry:        {
+        "bundle.js": path.join(__dirname, "/app/app.js"),
+        "style":     path.join(__dirname, "/app/style.scss"),
+    },
+    output:       {
+        path:       distPath,
+        filename:   "[name]",
+        publicPath: "/",
+    },
+    resolve:      {
+        alias:      {
+            "react-scrollbars-custom": path.join(__dirname, "..", "src"),
+        },
+        extensions: [".js"],
+    },
+    optimization: {
+        minimize:       true,
+        noEmitOnErrors: true,
+        nodeEnv:        "production",
+    },
+    plugins:      [
+        new MiniCssExtractPlugin({
+                                     filename: "[name].css",
+                                 }),
+        new CleanDirWebpackPlugin(path.join(distPath, "/style"), {stage: "after"}),
+    ],
+    module:       {
+        rules: [
+            {
+                test:    /\.scss$/,
+                exclude: /node_modules/,
+                use:     [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "sass-loader",
+                ],
+            },
+            {
+                test:    /\.jsx?$/,
+                exclude: /node_modules/,
+                use:     {
+                    loader:  "babel-loader",
+                    options: {
+                        sourceMaps:     false,
+                        comments:       true,
+                        cacheDirectory: false,
+                        presets:        [
+                            "@babel/preset-react",
+                            [
+                                "@babel/preset-env",
+                                {
+                                    "targets": {
+                                        "chrome": 58,
+                                    },
+                                },
+                            ],
+                        ],
+                        plugins:        [
+                            "@babel/plugin-proposal-class-properties",
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+};

examples/webpack.config.prod.js

@@ -29,12 +29,14 @@
     "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.1.2",
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-istanbul": "^5.1.0",
+    "cleandir-webpack-plugin": "^0.1.4",
     "codacy-coverage": "^3.1.0",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
@@ -64,8 +66,10 @@
     "webpack-dev-server": "^3.1.9"
   },
   "scripts": {
-    "examples:devserver": "cd ./examples && webpack-dev-server --mode development --hot --colors --progress --config webpack.config.dev.js",
+    "build": "rimraf ./dist && babel src -d dist --ignore \"node-modules/**\" --presets \"@babel/preset-react,@babel/preset-env\" --plugins \"@babel/plugin-proposal-class-properties\"",
     "push-codacy-coverage": "cat ./coverage/lcov.info | codacy-coverage -p .",
+    "examples": "cd ./examples && webpack-dev-server --mode development --hot --colors --progress --config webpack.config.dev.js",
+    "examples:build": "cd ./examples && rimraf ./static && cross-env NODE_ENV=production webpack --colors --progress --config webpack.config.prod.js",
     "test": "cross-env NODE_ENV=test karma start",
     "test:watch": "cross-env NODE_ENV=test karma start --auto-watch --no-single-run",
     "test:coverage": "cross-env NODE_ENV=test COVERAGE=true karma start --single-run",