Merge pull request #3 from SyncfusionExamples/972599-DependabotIssue

972599: To resolve Git Dependabot alerts

Author: Saranya13

.babelrc

@@ -1,6 +1,5 @@
 {
   "presets": [
-    ["env", { "modules": false }],
-    "stage-3"
+    ["@babel/preset-env", { "modules": false }]
   ]
 }

package.json

@@ -6,30 +6,31 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server",
+    "build": "cross-env NODE_ENV=production webpack --progress"
   },
   "dependencies": {
-    "@syncfusion/ej2-vue-dropdowns": "^17.3.28",
-    "@syncfusion/ej2-vue-grids": "^17.3.28",
-    "vue": "^2.5.11"
+    "@syncfusion/ej2-vue-dropdowns": "^24.2.9",
+    "@syncfusion/ej2-vue-grids": "^24.2.9",
+    "vue": "^3.4.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ],
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
-    "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.4.4",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@vue/compiler-sfc": "^3.4.0",
+    "babel-loader": "^9.1.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "file-loader": "^6.2.0",
+    "vue-loader": "^17.4.0",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.2"
   }
 }

src/App.vue

@@ -16,14 +16,17 @@
   </div>
 </template>
 <script>
-import Vue from 'vue';
-import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
-import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
+import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
+import { GridComponent, ColumnsDirective, ColumnDirective, Page } from "@syncfusion/ej2-vue-grids";
 import { Ajax } from '@syncfusion/ej2-base';
 
-Vue.use(DropDownListPlugin);
-Vue.use(GridPlugin);
 export default {
+  components: {
+    'ejs-dropdownlist': DropDownListComponent,
+    'ejs-grid': GridComponent,
+    'e-columns': ColumnsDirective,
+    'e-column': ColumnDirective
+  },
   data (){
     return {
       themes: ['material', 'fabric', 'bootstrap'],
@@ -38,25 +41,26 @@ export default {
           { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
           { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
       ],
-      pageSettings: { pageSize: 5 },
-      provide: {
-        grid: [Page]
-      }
+      pageSettings: { pageSize: 5 }
     }
-},
- methods: {
+  },
+  provide: {
+    grid: [Page]
+  },
+  methods: {
     onChange: function(e) {
-        debugger
         console.log(e);
         if (e && e.itemData.value) {
             let ajax = new Ajax('src/assets/styles/' + e.itemData.value + '.css', 'GET', true);
             ajax.send().then((result) => {
               let styleTag = document.getElementById('theme');
-              styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
+              if (styleTag) {
+                styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
+              }
             });
-          }
+        }
     }
- }
+  }
 }
 
 </script>

src/main.js

@@ -1,7 +1,4 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-new Vue({
-  el: '#app',
-  render: h => h(App)
-})
+createApp(App).mount('#app')

webpack.config.js

@@ -1,12 +1,15 @@
-var path = require('path')
-var webpack = require('webpack')
+const path = require('path')
+const webpack = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
 
 module.exports = {
+  mode: process.env.NODE_ENV || 'development',
   entry: './src/main.js',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
-    filename: 'build.js'
+    filename: 'build.js',
+    clean: true
   },
   module: {
     rules: [
@@ -16,14 +19,10 @@ module.exports = {
           'vue-style-loader',
           'css-loader'
         ],
-      },      {
+      },
+      {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-          }
-          // other vue-loader options go here
-        }
+        loader: 'vue-loader'
       },
       {
         test: /\.js$/,
@@ -32,47 +31,36 @@ module.exports = {
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
+        type: 'asset/resource',
+        generator: {
+          filename: '[name].[hash][ext]'
         }
       }
     ]
   },
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false
+    })
+  ],
   resolve: {
     alias: {
-      'vue$': 'vue/dist/vue.esm.js'
+      'vue': 'vue/dist/vue.esm-bundler.js'
     },
-    extensions: ['*', '.js', '.vue', '.json']
+    extensions: ['.js', '.vue', '.json']
   },
   devServer: {
+    static: {
+      directory: path.join(__dirname)
+    },
     historyApiFallback: true,
-    noInfo: true,
-    overlay: true
+    hot: true,
+    open: true
   },
   performance: {
     hints: false
   },
-  devtool: '#eval-source-map'
-}
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ])
+  devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-source-map'
 }