[feature] - Update js package dependency (#1362)

.travis.yml

@@ -4,10 +4,10 @@ os:
     - linux
 
 dist:
-   - xenial
+    - bionic
 
 php:
-    # one version fo Behat is enought
+    # one version fo Behat is enough
     - '7.4'
 
 services:
@@ -29,8 +29,8 @@ install:
   - Xvfb :99 -screen 0 1280x1024x16 +extension RANDR > /dev/null 2>&1 &
 
 before_install:
-    - npm get prefix
-    - npm install -g less less-plugin-clean-css uglify-js
+    - npm install -g npm
+    - npm install -g less less-plugin-clean-css
 
 before_script:
     # Setup selenium

demos/Dockerfile

@@ -13,6 +13,10 @@ RUN apt-get update && apt-get install -y \
     && docker-php-ext-install intl \
     && docker-php-ext-install pdo pdo_mysql
 
+RUN curl -sL https://deb.nodesource.com/setup_12.x  | bash - \
+    && apt-get update && apt-get -y install nodejs \
+    && npm install -g npm
+
 WORKDIR /var/www/html/
 
 RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

js/.gitignore

@@ -13,6 +13,9 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
+# Bundle Profile directory
+profile
+
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 

js/README.md

@@ -85,6 +85,31 @@ the package. Once load in your page, code can be debugged in browser from the we
 
 Any change made to the source, will also be re-compile automatically when using the "dev" script.
 
+#### Analyzing bundle profile
+
+Bundle profile may be analyze using various tools. npm script are availabe for producing 
+the json file for this. 
+
+```
+    npm run profile
+```
+
+This command will create a profile json file `atkjs-bundle-profile.json` with bundle information inside the profile folder. You can use this file with your 
+favorite bundle analyzer. 
+
+Another npm script is available for analyzing the bundle using the webpack-bundle-analyzer tool.
+
+```
+    npm run analyze-profile
+```
+
+Note: In order to use this script, make sure that the webpack-bundle-analyzer package is intall
+globally.
+
+```
+    npm install -g webpack-bundle-analyzer
+```
+
 ### Production
 
 For production, simply use the "build" script supply in package.json.
@@ -93,4 +118,4 @@ For production, simply use the "build" script supply in package.json.
     npm run build
 ```
 
-This command will output the atkjs-ui.min.js file, also in /public folder. 
+This command will output the atkjs-ui.min.js file, also in /public folder.

js/Release.md

@@ -1,5 +1,8 @@
 ## Release note
 
+### version 1.14.3 (2020-07-13)
+ - Update dependencies.
+
 ### version 1.14.2 (2020-05-04)
  - Build releases automatically on ui.agiletoolkit.org deploy
 

js/babel.config.js

@@ -10,9 +10,12 @@ const presets = [
     {
       targets: "> 1% , not dead",
       "corejs": { version: '3.6', proposals: true },
-      "useBuiltIns": "usage"
+      "useBuiltIns": "usage",
     },
   ],
+  {
+    "plugins" : ["@babel/plugin-transform-runtime"]
+  }
 ];
 
 module.exports = { presets };

js/package.json

@@ -1,11 +1,13 @@
 {
   "name": "atkjs-ui",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "description": "Agile Toolkit Javascript library.",
   "main": "lib/atkjs-ui.js",
   "scripts": {
     "build": "webpack --env.production",
     "dev": "webpack --progress --colors --watch --env.development",
+    "profile": "webpack  --env.production --profile --json > ./profile/atkjs-bundle-profile.json",
+    "analyze-profile": "webpack-bundle-analyzer ./profile/atkjs-bundle-profile.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -19,23 +21,30 @@
   },
   "homepage": "http://www.agiletoolkit.org/",
   "devDependencies": {
-    "@babel/cli": "^7.8.3",
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
-    "babel-loader": "^8.0.6",
-    "eslint": "^5.16.0",
-    "serialize-javascript": "^3.0.0",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.6"
+    "@babel/cli": "^7.10.1",
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.2.0",
+    "serialize-javascript": "^4.0.0",
+    "terser-webpack-plugin": "^3.0.6",
+    "vue-loader": "^15.9.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "column-resizer": "^1.3.2",
-    "core-js": "^3.6.4",
+    "@babel/runtime": "^7.10.2",
+    "column-resizer": "^1.3.5",
+    "core-js": "^3.6.5",
     "debounce": "^1.1.0",
     "locutus": "^2.0.11",
     "lodash.throttle": "^4.1.1",
-    "semantic-ui-vue": "^0.8.1",
-    "vue": "^2.6.10"
+    "semantic-ui-vue": "^0.11.0",
+    "v-calendar": "^1.0.8",
+    "vue": "^2.6.10",
+    "vue-query-builder": "^0.8.2"
   }
 }

js/webpack.config.js

@@ -23,7 +23,9 @@
  */
 const webpack = require('webpack');
 const path = require('path');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+// VUe file loader.
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const packageVersion = require("./package.json").version;
 
 module.exports = env => {
@@ -55,14 +57,28 @@ module.exports = env => {
       umdNamedDefine: true,
     },
     optimization: {
-      minimizer: [new UglifyJsPlugin()]
+      minimizer: [new TerserPlugin()]
     },
     module: {
       rules: [
         {
           test: /(\.jsx|\.js)$/,
           loader: 'babel-loader',
           exclude: /(node_modules|bower_components)/
+        },
+        // load .vue file
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader'
+        },
+        // this will apply to both plain `.css` files
+        // AND `<style>` blocks in `.vue` files
+        {
+          test: /\.css$/,
+          use: [
+            'vue-style-loader',
+            'css-loader'
+          ]
         }
       ]
     },
@@ -81,7 +97,8 @@ module.exports = env => {
     plugins: [
       new webpack.DefinePlugin({
         _ATKVERSION_ : JSON.stringify(packageVersion)
-      })
+      }),
+      new VueLoaderPlugin(),
     ]
   };
 };

public/.gitignore

@@ -2,5 +2,3 @@
 !logo.png
 !agileui.less
 !.gitignore
-!atkjs-ui.min.js
-!agileui.css