Merge pull request #252 from puikinsh/dependabot-dependency-update

Dependabot dependency update

.babelrc

@@ -1,12 +0,0 @@
-{
-  "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread"
-  ],
-  "presets": [
-    ["env", {
-      "modules": false
-    }],
-    "stage-0"
-  ]
-}

.eslintrc.yml

@@ -2,8 +2,7 @@
   extends:
     airbnb-base
 
-  parser:
-    @babel/eslint-parser
+  parser: "@babel/eslint-parser"
 
   settings:
     ecmascript: 7

.gitignore

@@ -30,3 +30,4 @@ package-lock.json
 # ----------------------------
 
 build/
+dist/

CHANGELOG.md

@@ -3,3 +3,7 @@
 #### 1.0.0
 
 - Intial release
+
+#### 1.1.0
+
+- Upgrade to webpack 5

browserslist

@@ -1 +1,2 @@
 Last 3 versions
+IE 11

package.json

@@ -1,14 +1,14 @@
 {
   "name": "adminator",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
-    "start": "webpack-dev-server",
-    "dev": "webpack-dashboard -t 'Project' -- webpack-dev-server",
-    "clean": "shx rm -rf ./build",
-    "build": "npm run clean && cross-env NODE_ENV=\"production\" webpack",
-    "preview": "cross-env NODE_ENV=\"production\" webpack-dev-server",
+    "start": "webpack server",
+    "dev": "webpack-dashboard -t 'Project' -- webpack server",
+    "clean": "shx rm -rf ./dist",
+    "build": "npm run clean && cross-env webpack",
+    "preview": "cross-env webpack server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
     "lint": "npm run lint:js && npm run lint:scss"
@@ -21,32 +21,41 @@
     "@babel/plugin-transform-runtime": "^7.13.9",
     "@babel/runtime": "^7.13.9",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
+    "babel-loader": "^8.2.2",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^9.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^0.28.11",
+    "css-loader": "^5.2.6",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "2.22.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
+    "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^4.14.1",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^5.3.0",
     "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^11.1.1",
     "shx": "^0.3.3",
-    "style-loader": "^0.23.1",
-    "stylelint": "^13.11.0",
-    "stylelint-config-standard": "^20.0.0",
-    "webpack": "^3.10.0",
+    "style-loader": "^2.0.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0",
     "webpack-dashboard": "^3.3.1",
-    "webpack-dev-server": "^2.11.5"
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@fullcalendar/core": "^5.7.0",
+    "@fullcalendar/daygrid": "^5.7.0",
+    "@fullcalendar/interaction": "^5.7.0",
+    "@fullcalendar/list": "^5.7.0",
+    "@fullcalendar/timegrid": "^5.7.0",
+    "@popperjs/core": "^2.9.2",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.6.0",
     "bootstrap-datepicker": "^1.9.0",
@@ -54,17 +63,17 @@
     "chart.js": "^2.9.4",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
-    "file-loader": "^2.0.0",
-    "fullcalendar": "^3.10.0",
+    "file-loader": "^6.2.0",
+    "fullcalendar": "^5.7.0",
     "jquery": "^3.6.0",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "^2.0.4",
-    "load-google-maps-api": "^1.3.3",
+    "load-google-maps-api": "^2.0.2",
     "lodash": "^4.17.21",
     "masonry-layout": "^4.2.2",
     "moment": "^2.29.1",
     "perfect-scrollbar": "^1.5.0",
-    "popper.js": "^1.14.3",
+    "popper.js": "^1.16.1",
     "skycons": "^1.0.0"
   }
 }

src/assets/scripts/fullcalendar/index.js

@@ -1,59 +1,81 @@
 import * as $ from 'jquery';
-import 'fullcalendar/dist/fullcalendar.min.js';
-import 'fullcalendar/dist/fullcalendar.min.css';
+import { Calendar } from '@fullcalendar/core';
+import interactionPlugin from '@fullcalendar/interaction';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
 
-export default (function () {
-  const date = new Date();
-  const d    = date.getDate();
-  const m    = date.getMonth();
-  const y    = date.getFullYear();
+document.addEventListener('DOMContentLoaded', function() {
+  var calendarEl = document.getElementById('calendar');
 
-  const events = [{
-    title  : 'All Day Event',
-    start  : new Date(y, m, 1),
-    desc   : 'Meetings',
-    bullet : 'success',
-  }, {
-    title  : 'Long Event',
-    start  : new Date(y, m, d - 5),
-    end    : new Date(y, m, d - 2),
-    desc   : 'Hangouts',
-    bullet : 'success',
-  }, {
-    title  : 'Repeating Event',
-    start  : new Date(y, m, d - 3, 16, 0),
-    allDay : false,
-    desc   : 'Product Checkup',
-    bullet : 'warning',
-  }, {
-    title  : 'Repeating Event',
-    start  : new Date(y, m, d + 4, 16, 0),
-    allDay : false,
-    desc   : 'Conference',
-    bullet : 'danger',
-  }, {
-    title  : 'Birthday Party',
-    start  : new Date(y, m, d + 1, 19, 0),
-    end    : new Date(y, m, d + 1, 22, 30),
-    allDay : false,
-    desc   : 'Gathering',
-  }, {
-    title  : 'Click for Google',
-    start  : new Date(y, m, 28),
-    end    : new Date(y, m, 29),
-    url    : 'http ://google.com/',
-    desc   : 'Google',
-    bullet : 'success',
-  }];
-
-  $('#full-calendar').fullCalendar({
-    events,
-    height   : 800,
-    editable : true,
-    header: {
-      left   : 'month,agendaWeek,agendaDay',
-      center : 'title',
-      right  : 'today prev,next',
+  var calendar = new Calendar(calendarEl, {
+    plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
     },
+    initialDate: '2018-01-12',
+    navLinks: true, // can click day/week names to navigate views
+    editable: true,
+    dayMaxEvents: true, // allow "more" link when too many events
+    events: [
+      {
+        title: 'All Day Event',
+        start: '2018-01-01',
+      },
+      {
+        title: 'Long Event',
+        start: '2018-01-07',
+        end: '2018-01-10'
+      },
+      {
+        groupId: 999,
+        title: 'Repeating Event',
+        start: '2018-01-09T16:00:00'
+      },
+      {
+        groupId: 999,
+        title: 'Repeating Event',
+        start: '2018-01-16T16:00:00'
+      },
+      {
+        title: 'Conference',
+        start: '2018-01-11',
+        end: '2018-01-13'
+      },
+      {
+        title: 'Meeting',
+        start: '2018-01-12T10:30:00',
+        end: '2018-01-12T12:30:00'
+      },
+      {
+        title: 'Lunch',
+        start: '2018-01-12T12:00:00'
+      },
+      {
+        title: 'Meeting',
+        start: '2018-01-12T14:30:00'
+      },
+      {
+        title: 'Happy Hour',
+        start: '2018-01-12T17:30:00'
+      },
+      {
+        title: 'Dinner',
+        start: '2018-01-12T20:00:00'
+      },
+      {
+        title: 'Birthday Party',
+        start: '2018-01-13T07:00:00'
+      },
+      {
+        title: 'Click for Google',
+        url: 'http://google.com/',
+        start: '2018-01-28'
+      }
+    ]
   });
-}())
+
+  calendar.render();
+});

src/calendar.html

@@ -637,7 +637,7 @@
                   </div>
                 </div>
                 <div class="col-md-8">
-                  <div id='full-calendar'></div>
+                  <div id='calendar'></div>
                 </div>
               </div>
               <div class="modal fade" id="calendar-edit">

webpack/config.js

@@ -50,15 +50,16 @@ const resolve = {
 // -----------------
 
 module.exports = {
-  devtool: manifest.IS_PRODUCTION ? false : 'cheap-eval-source-map',
+  devtool: manifest.IS_PRODUCTION ? false : 'source-map',
   context: path.join(manifest.paths.src, manifest.entries.js),
-  watch: !manifest.IS_PRODUCTION,
+  // watch: !manifest.IS_PRODUCTION,
   entry,
-  output: {
-    path: manifest.paths.build,
-    publicPath: '',
-    filename: manifest.outputFiles.bundle,
-  },
+  mode: manifest.NODE_ENV,
+  // output: {
+  //   path: manifest.paths.build,
+  //   publicPath: '',
+  //   filename: manifest.outputFiles.bundle,
+  // },
   module: {
     rules,
   },

webpack/manifest.js

@@ -45,7 +45,7 @@ const
 const
   paths = {
     src   : dir('../src'),
-    build : dir('../build'),
+    build : dir('../dist'),
   };
 
 

webpack/plugins/copyPlugin.js

@@ -3,9 +3,11 @@ const
   manifest          = require('../manifest'),
   CopyWebpackPlugin = require('copy-webpack-plugin');
 
-module.exports = new CopyWebpackPlugin([
+module.exports = new CopyWebpackPlugin({
+  patterns: [
   {
     from : path.join(manifest.paths.src, 'assets/static'),
     to   : path.join(manifest.paths.build, 'assets/static'),
   },
-]);
+]
+});

webpack/plugins/extractPlugin.js

@@ -1,8 +1,8 @@
 const
   manifest          = require('../manifest'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin');
+  ExtractTextPlugin = require('mini-css-extract-plugin');
 
 module.exports = new ExtractTextPlugin({
   filename: manifest.outputFiles.css,
-  allChunks: true,
+  // allChunks: true,
 });

webpack/plugins/index.js

@@ -8,7 +8,8 @@ plugins.push(
   ...(require('./htmlPlugin')),
   ...(require('./internal')),
   require('./caseSensitivePlugin'),
-  require('./extractPlugin')
+  require('./extractPlugin'),
+  require('./copyPlugin')
 );
 
 if (manifest.IS_DEVELOPMENT) {

webpack/plugins/internal.js

@@ -28,20 +28,21 @@ const
   plugins  = [];
 
 plugins.push(
-  new webpack.DefinePlugin({
-    'process.env': {
-      NODE_ENV: JSON.stringify(manifest.NODE_ENV),
-    },
-  }),
-
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor',
-    filename: manifest.outputFiles.vendor,
-    minChunks(module) {
-      const { context } = module;
-      return context && context.indexOf('node_modules') >= 0;
-    },
-  }),
+  // new webpack.DefinePlugin({
+  //   'process.env': {
+  //     NODE_ENV: JSON.stringify(manifest.NODE_ENV),
+  //   },
+  // }),
+
+
+  // new webpack.optimize.CommonsChunkPlugin({
+  //   name: 'vendor',
+  //   filename: manifest.outputFiles.vendor,
+  //   minChunks(module) {
+  //     const { context } = module;
+  //     return context && context.indexOf('node_modules') >= 0;
+  //   },
+  // }),
 
   new webpack.ProvidePlugin({
     $: 'jquery',
@@ -56,29 +57,29 @@ plugins.push(
 // @Merging Production Plugins
 // ---------------------------
 
-if (manifest.IS_PRODUCTION) {
-  plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        comparisons   : true,
-        conditionals  : true,
-        dead_code     : true,
-        drop_debugger : true,
-        evaluate      : true,
-        if_return     : true,
-        join_vars     : true,
-        screw_ie8     : true,
-        sequences     : true,
-        unused        : true,
-        warnings      : false,
-      },
-
-      output: {
-        comments: false,
-      },
-    })
-  );
-}
+// if (manifest.IS_PRODUCTION) {
+//   plugins.push(
+//     new webpack.optimize.UglifyJsPlugin({
+//       compress: {
+//         comparisons   : true,
+//         conditionals  : true,
+//         dead_code     : true,
+//         drop_debugger : true,
+//         evaluate      : true,
+//         if_return     : true,
+//         join_vars     : true,
+//         screw_ie8     : true,
+//         sequences     : true,
+//         unused        : true,
+//         warnings      : false,
+//       },
+
+//       output: {
+//         comments: false,
+//       },
+//     })
+//   );
+// }
 
 
 // ----------------------------
@@ -87,8 +88,8 @@ if (manifest.IS_PRODUCTION) {
 
 if (manifest.IS_DEVELOPMENT) {
   plugins.push(
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.NamedModulesPlugin(),
+    // new webpack.NoEmitOnErrorsPlugin(),
+    // new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
   );
 }

webpack/rules/css.js

@@ -17,7 +17,7 @@
 
 const
   manifest          = require('../manifest'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin');
+  ExtractTextPlugin = require('mini-css-extract-plugin');
 
 
 // ---------------
@@ -31,7 +31,8 @@ const loaders = [
     loader: 'css-loader',
     options: {
       sourceMap : manifest.IS_DEVELOPMENT,
-      minimize  : manifest.IS_PRODUCTION,
+      // minimize  : manifest.IS_PRODUCTION,
+      importLoaders: 1,
     },
   },
 ];
@@ -44,9 +45,10 @@ const loaders = [
 if (manifest.IS_PRODUCTION) {
   rule = {
     test: /\.css$/,
-    loader: ExtractTextPlugin.extract({
-      use: loaders,
-    }),
+    // loader: ExtractTextPlugin({
+    //   use: loaders,
+    // }),
+    use: [ExtractTextPlugin.loader, loaders],
   };
 }
 

webpack/rules/images.js

@@ -1,5 +1,5 @@
 module.exports = {
-  test    : /\.(png|gif|jpg|svg)$/i,
+  test    : /\.(png|gif|jpg?g|svg)$/i,
   exclude : /(node_modules)/,
   use     : [{
     loader: 'file-loader',

webpack/rules/sass.js

@@ -28,27 +28,33 @@ const loaders = [
     loader: 'css-loader',
     options: {
       sourceMap : manifest.IS_DEVELOPMENT,
-      minimize  : manifest.IS_PRODUCTION,
+      // minimize  : manifest.IS_PRODUCTION,
     },
   },
   {
     loader: 'postcss-loader',
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
-      plugins: () => [
-        cssNext(),
-      ],
+      postcssOptions: {
+        plugins: [
+          [
+            cssNext(),
+          ],
+        ],
+      },
     },
   },
   {
     loader: 'sass-loader',
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
-      includePaths: [
-        path.join('../../', 'node_modules'),
-        path.join(manifest.paths.src, 'assets', 'styles'),
-        path.join(manifest.paths.src, ''),
-      ],
+      sassOptions: {
+        includePaths: [
+          path.join('../../', 'node_modules'),
+          path.join(manifest.paths.src, 'assets', 'styles'),
+          path.join(manifest.paths.src, ''),
+        ],
+      },
     },
   },
 ];