feat(FEC-10290): upgrade NPM packages

.babelrc

@@ -1,21 +1,23 @@
 {
-  "presets": [
-    "es2015"
-  ],
+  "env": {
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  },
+  "ignore": ["node_modules/**/*"],
   "plugins": [
-    "transform-flow-strip-types",
-    "transform-class-properties",
-    ["transform-react-jsx",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-flow-strip-types",
+    "@babel/plugin-transform-property-mutators",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-classes",
+    [
+      "@babel/plugin-transform-react-jsx",
       {
         "pragma": "KalturaPlayer.ui.h"
       }
     ]
   ],
-  "env": {
-    "test": {
-      "plugins": [
-        "istanbul"
-      ]
-    }
-  }
+  "presets": ["@babel/preset-env", "@babel/preset-flow"]
 }

.eslintignore

@@ -1,5 +1,3 @@
 /flow-typed/
 /coverage
 /dist
-karma.conf.js
-webpack.config.js

.eslintrc.json

@@ -16,7 +16,9 @@
     "should": true,
     "sinon": true,
     "__VERSION__": true,
-    "__NAME__": true
+    "__NAME__": true,
+    "process": true,
+    "__dirname": true
   },
   "rules": {
     "prettier/prettier": "error",

.flowconfig

@@ -4,4 +4,3 @@
 [libs]
 node_modules/@playkit-js/playkit-js/flow-typed/
 [options]
-unsafe.enable_getters_and_setters=true

.prettierignore

@@ -4,3 +4,4 @@ CHANGELOG.md
 yarn.lock
 yarn-error.log
 LICENSE
+coverage

.travis.yml

@@ -3,7 +3,7 @@ sudo: required
 dist: xenial
 language: node_js
 node_js:
-  - "node"
+  - 'node'
 
 addons:
   chrome: stable
@@ -31,7 +31,7 @@ jobs:
   include:
     # https://docs.travis-ci.com/user/build-stages/deploy-github-releases/
     - stage: Release
-      name: "Releasing a new version"
+      name: 'Releasing a new version'
       if: tag IS present
       env: TRAVIS_MODE=release
       deploy:
@@ -78,13 +78,13 @@ jobs:
     # Required tests
     - stage: Tests
       if: (branch = master) OR (tag IS present) OR (type = pull_request)
-      name: "Running lint"
-      env:   TRAVIS_MODE=lint
+      name: 'Running lint'
+      env: TRAVIS_MODE=lint
     - stage: Tests
       if: (branch = master) OR (tag IS present) OR (type = pull_request)
-      name: "Running Flow type check"
-      env:   TRAVIS_MODE=flow
+      name: 'Running Flow type check'
+      env: TRAVIS_MODE=flow
     - stage: Tests
       if: (branch = master) OR (tag IS present) OR (type = pull_request)
-      name: "Running unit tests"
-      env:   TRAVIS_MODE=unitTests
+      name: 'Running unit tests'
+      env: TRAVIS_MODE=unitTests

README.md

@@ -1,6 +1,5 @@
 # PlayKit JS Visibility - Visibility plugin for the [PlayKit JS Player]
 
-
 PlayKit JS Visibility is written in [ECMAScript6], statically analysed using [Flow] and transpiled in ECMAScript5 using [Babel].
 
 [flow]: https://flow.org/
@@ -40,28 +39,31 @@ yarn run build
 Finally, add the bundle as a script tag in your page, and initialize the player
 
 ```html
-<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>                     <!--PlayKit player-->
-<script type="text/javascript" src="/PATH/TO/FILE/playkit-visibility.js"></script>                 <!--PlayKit Visibility plugin-->
+<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
+<!--PlayKit player-->
+<script type="text/javascript" src="/PATH/TO/FILE/playkit-visibility.js"></script>
+<!--PlayKit Visibility plugin-->
 <div id="player-placeholder" style="height:360px; width:640px">
-<script type="text/javascript">
-var playerContainer = document.querySelector("#player-placeholder");
-var config = {
- ...
- plugins: {
-   visibility: {
-   }
- }
- ...
-};
-var player = playkit.core.loadPlayer(config);
-playerContainer.appendChild(player.getView());
-player.play();
-</script>
+  <script type="text/javascript">
+    var playerContainer = document.querySelector("#player-placeholder");
+    var config = {
+     ...
+     plugins: {
+       visibility: {
+       }
+     }
+     ...
+    };
+    var player = playkit.core.loadPlayer(config);
+    playerContainer.appendChild(player.getView());
+    player.play();
+  </script>
+</div>
 ```
 
 ## Documentation
 
-* **[Configuration](docs/configuration.md)**
+- **[Configuration](docs/configuration.md)**
 
 ## Running the tests
 

docs/configuration.md

@@ -1,5 +1,7 @@
 ## Configuration
+
 Visibility plugin configuration parameters are provided whenever a player instance is created.
+
 ```js
 var config = {
   plugins: {
@@ -21,6 +23,7 @@ The configuration uses the following structure:
 ```
 
 #### Default Configuration Values
+
 ```js
 {
 }

flow-typed/types/visibility-types.js

@@ -1,2 +1,2 @@
 // @flow
-declare type PKVisibilityTypes = { [type: string]: string };
+declare type PKVisibilityTypes = {[type: string]: string};

karma.conf.js

@@ -14,7 +14,7 @@ const customLaunchers = {
   }
 };
 
-module.exports = function(config) {
+module.exports = function (config) {
   let karmaConf = {
     logLevel: config.LOG_INFO,
     browsers: ['Chrome', 'Firefox'],

package.json

@@ -5,16 +5,17 @@
   "scripts": {
     "clean": "rm -rf ./dist",
     "prebuild": "npm run clean",
-    "build": "NODE_ENV=production webpack",
-    "dev": "webpack-dev-server",
-    "watch": "webpack --progress --colors --watch",
-    "test": "NODE_ENV=test karma start --color",
+    "build": "webpack --mode production",
+    "dev": "webpack-dev-server --mode development",
+    "watch": "webpack --progress --colors --watch --mode development",
+    "test": "NODE_ENV=test karma start --color --mode development",
     "release": "standard-version",
     "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
     "eslint": "eslint . --color",
     "flow": "flow check",
     "commit:dist": "git add --force --all dist && (git commit -m 'chore: update dist' || exit 0)",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "prettier:fix": "prettier --write ."
   },
   "lint-staged": {
     "*.{js,jsx}": [
@@ -30,60 +31,64 @@
     "access": "public"
   },
   "devDependencies": {
-    "@playkit-js/playkit-js": "0.61.2",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-classes": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
+    "@babel/plugin-transform-property-mutators": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/register": "^7.10.5",
+    "@playkit-js/playkit-js": "0.62.1-canary.724715e",
     "@playkit-js/playkit-js-ui": "0.55.0",
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.18.2",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.7",
-    "babel-plugin-istanbul": "^4.0.0",
-    "babel-plugin-transform-class-properties": "^6.22.0",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-register": "^6.23.0",
-    "chai": "^3.5.0",
-    "copy-webpack-plugin": "^4.3.1",
-    "cross-env": "^3.1.4",
-    "css-loader": "^0.28.4",
-    "eslint": "^3.10.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-flowtype": "^2.30.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-mocha-no-only": "^0.0.5",
-    "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react": "^7.20.0",
-    "flow-bin": "latest",
-    "husky": "0.14.3",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-istanbul": "^6.0.0",
+    "chai": "^4.2.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^4.0.0",
+    "eslint": "^7.4.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-mocha-no-only": "^1.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "flow-bin": "^0.129.0",
+    "husky": "^4.2.5",
     "istanbul": "^0.4.5",
-    "karma": "^1.5.0",
+    "karma": "^5.1.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-coverage": "^1.1.1",
-    "karma-firefox-launcher": "^1.0.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-cli": "^2.0.0",
+    "karma-coverage": "^2.0.2",
+    "karma-firefox-launcher": "^1.3.0",
     "karma-ie-launcher": "^1.0.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.2",
-    "lint-staged": "7.0.5",
-    "mocha": "^3.2.0",
+    "karma-webpack": "^4.0.2",
+    "lint-staged": "^10.2.11",
+    "mocha": "^8.0.1",
     "mocha-cli": "^1.0.1",
-    "prettier": "^1.13.5",
-    "sinon": "^2.0.0",
-    "sinon-chai": "^2.8.0",
-    "standard-version": "^4.2.0",
-    "style-loader": "^0.18.2",
-    "uglifyjs-webpack-plugin": "^0.4.3",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "latest"
+    "prettier": "^2.0.5",
+    "sinon": "^9.0.2",
+    "sinon-chai": "^3.5.0",
+    "standard-version": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "peerDependencies": {
-    "@playkit-js/playkit-js": "0.61.2",
+    "@playkit-js/playkit-js": "0.62.1-canary.724715e",
     "@playkit-js/playkit-js-ui": "0.55.0"
   },
   "keywords": [

src/index.js

@@ -5,8 +5,11 @@ import {Visibility} from './visibility';
 declare var __VERSION__: string;
 declare var __NAME__: string;
 
+const VERSION = __VERSION__;
+const NAME = __NAME__;
+
 export {Visibility as Plugin};
-export {__VERSION__ as VERSION, __NAME__ as NAME};
+export {VERSION, NAME};
 export {EventType} from './event-type';
 
 const pluginName: string = 'visibility';

test/src/visibility.spec.js

@@ -1,3 +1,3 @@
-describe('Visibility Plugin', function() {
+describe('Visibility Plugin', function () {
   it('dummy test', () => {});
 });

webpack.config.js

@@ -1,9 +1,7 @@
 'use strict';
 
 const webpack = require('webpack');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
-const PROD = process.env.NODE_ENV === 'production';
 const packageData = require('./package.json');
 
 const plugins = [
@@ -13,19 +11,6 @@ const plugins = [
   })
 ];
 
-if (PROD) {
-  plugins.push(new webpack.optimize.UglifyJsPlugin({sourceMap: true}));
-} else {
-  plugins.push(
-    new CopyWebpackPlugin([
-      {
-        from: '',
-        to: '.'
-      }
-    ])
-  );
-}
-
 module.exports = {
   context: __dirname + '/src',
   entry: {
@@ -42,12 +27,6 @@ module.exports = {
   devtool: 'source-map',
   plugins: plugins,
   module: {
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      }
-    ],
     rules: [
       {
         test: /\.js$/,
@@ -105,6 +84,5 @@ module.exports = {
       amd: 'playkit-js-ui',
       root: ['KalturaPlayer', 'ui']
     }
-
   }
 };