generator-jhipster 7.3.1 → 7.4.0

package/generators/client/templates/react/package.json

@@ -4,85 +4,86 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.1.16",
     "@reduxjs/toolkit": "1.6.2",
-    "axios": "0.21.4",
-    "bootstrap": "4.6.0",
+    "axios": "0.24.0",
+    "bootstrap": "5.1.3",
     "bootswatch": "5.1.3",
     "lodash": "4.17.21",
     "path-browserify": "1.0.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-hook-form": "7.17.4",
-    "react-jhipster": "0.17.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-hook-form": "7.19.5",
+    "react-jhipster": "0.18.0",
     "react-loadable": "5.5.0",
-    "react-redux": "7.2.5",
+    "react-redux": "7.2.6",
     "react-redux-loading-bar": "5.0.2",
     "react-router-dom": "5.3.0",
-    "react-toastify": "8.0.3",
+    "react-toastify": "8.1.0",
     "react-transition-group": "4.4.2",
-    "reactstrap": "8.10.0",
-    "redux": "4.1.1",
-    "redux-thunk": "2.3.0",
+    "reactstrap": "9.0.1",
+    "redux": "4.1.2",
+    "redux-thunk": "2.4.0",
     "sonar-scanner": "3.1.0",
     "tslib": "2.3.1",
     "uuid": "8.3.2"
   },
   "devDependencies": {
     "@testing-library/react": "12.1.2",
-    "@types/jest": "27.0.2",
-    "@types/lodash": "4.14.175",
-    "@types/node": "16.11.1",
-    "@types/react": "17.0.30",
-    "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.19",
-    "@types/react-router-dom": "5.3.1",
+    "@types/jest": "27.0.3",
+    "@types/lodash": "4.14.177",
+    "@types/node": "16.11.8",
+    "@types/react": "17.0.35",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.20",
+    "@types/react-router-dom": "5.3.2",
     "@types/redux": "3.6.31",
     "@types/webpack-env": "1.16.3",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "autoprefixer": "10.3.7",
-    "browser-sync": "2.27.5",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
+    "autoprefixer": "10.4.0",
+    "browser-sync": "2.27.7",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "9.0.1",
-    "core-js": "3.18.3",
+    "copy-webpack-plugin": "9.1.0",
+    "core-js": "3.19.1",
     "cross-env": "7.0.3",
-    "css-loader": "6.4.0",
-    "css-minimizer-webpack-plugin": "3.1.1",
-    "eslint": "7.32.0",
+    "css-loader": "6.5.1",
+    "css-minimizer-webpack-plugin": "3.1.4",
+    "eslint": "8.2.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-react": "7.26.1",
-    "eslint-webpack-plugin": "3.0.1",
+    "eslint-plugin-react": "7.27.0",
+    "eslint-webpack-plugin": "3.1.1",
     "folder-hash": "4.0.1",
-    "fork-ts-checker-webpack-plugin": "6.3.4",
-    "html-webpack-plugin": "5.4.0",
+    "fork-ts-checker-webpack-plugin": "6.4.0",
+    "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.3.0",
+    "jest": "27.3.1",
     "jest-junit": "13.0.0",
     "jest-sonar-reporter": "2.0.0",
     "json-loader": "0.5.7",
     "merge-jsons-webpack-plugin": "1.0.21",
-    "mini-css-extract-plugin": "2.4.2",
+    "mini-css-extract-plugin": "2.4.5",
     "postcss-loader": "6.2.0",
+    "postcss-rtlcss": "3.5.0",
     "react-infinite-scroller": "1.2.4",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
-    "sass": "1.43.2",
-    "sass-loader": "12.2.0",
+    "sass": "1.43.4",
+    "sass-loader": "12.3.0",
     "simple-progress-webpack-plugin": "2.0.0",
-    "sinon": "11.1.2",
+    "sinon": "12.0.1",
     "source-map-loader": "3.0.0",
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
-    "style-loader": "3.3.0",
-    "swagger-ui-dist": "3.52.5",
-    "terser-webpack-plugin": "5.2.4",
+    "style-loader": "3.3.1",
+    "swagger-ui-dist": "4.1.0",
+    "terser-webpack-plugin": "5.2.5",
     "thread-loader": "3.0.4",
     "ts-jest": "27.0.7",
     "ts-loader": "9.2.6",
-    "typescript": "4.4.4",
-    "webpack": "5.58.2",
+    "typescript": "4.5.2",
+    "webpack": "5.64.1",
     "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.3.1",
+    "webpack-dev-server": "4.5.0",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.14.1",
-    "workbox-webpack-plugin": "6.3.0"
+    "workbox-webpack-plugin": "6.4.1"
   }
 }

package/generators/client/templates/react/package.json.ejs

@@ -123,6 +123,9 @@
     "mocha": "7.1.2",
 <%_ } _%>
     "postcss-loader": "<%= dependabotPackageJson.devDependencies['postcss-loader'] %>",
+<%_ if (enableI18nRTL) { _%>
+    "postcss-rtlcss": "<%= dependabotPackageJson.devDependencies['postcss-rtlcss'] %>",
+<%_ } _%>
     "prettier": "<%= dependabotPackageJson.devDependencies['prettier'] %>",
 <%_ if (!skipServer) { _%>
     "prettier-plugin-java": "<%= dependabotPackageJson.devDependencies['prettier-plugin-java'] %>",

package/generators/client/templates/react/src/main/webapp/app/app.scss.ejs

@@ -25,9 +25,6 @@
 <%_ if (!clientThemeNone) { _%>
 @import "~bootswatch/dist/<%= clientTheme %>/bootswatch";
 <%_ } _%>
-<%_ if (enableI18nRTL) { _%>
-@import '../content/scss/rtl.scss';
-<%_ } _%>
 body {
 <%_ if (clientThemeNone) { _%>
   background: #fafafa;

package/generators/client/templates/react/src/main/webapp/app/modules/administration/configuration/configuration.tsx.ejs

@@ -88,7 +88,7 @@ export const ConfigurationPage = () => {
                         <Row key={index}>
                           <Col md="4">{propKey}</Col>
                           <Col md="8">
-                            <Badge className="float-right badge-secondary break">{JSON.stringify(property['properties'][propKey])}</Badge>
+                            <Badge className="float-end bg-secondary break">{JSON.stringify(property['properties'][propKey])}</Badge>
                           </Col>
                         </Row>
                       ))}
@@ -118,7 +118,7 @@ export const ConfigurationPage = () => {
                       <tr key={propIndex}>
                         <td className="break">{propKey}</td>
                         <td className="break">
-                          <span className="float-right badge badge-secondary break">{envKey.properties[propKey].value}</span>
+                          <span className="float-end badge bg-secondary break">{envKey.properties[propKey].value}</span>
                         </td>
                       </tr>
                     ))}

package/generators/client/templates/react/src/main/webapp/app/modules/administration/gateway/gateway.tsx.ejs

@@ -38,8 +38,8 @@ export const GatewayPage = () => {
     Object.keys(instance).map((key, index) => {
       spans.push((
         <span key={key.toString() + 'value'}>
-          <Badge key={key.toString() + '-containerbadge'} className="font-weight-normal">
-            <Badge key={key.toString() + '-badge'} color="info" className="font-weight-normal" pill>{key}</Badge>
+          <Badge key={key.toString() + '-containerbadge'} className="fw-normal">
+            <Badge key={key.toString() + '-badge'} color="info" className="fw-normal" pill>{key}</Badge>
             {instance[key]}
           </Badge>
         </span>

package/generators/client/templates/react/src/main/webapp/app/modules/administration/metrics/metrics.tsx.ejs

@@ -74,11 +74,11 @@ export const MetricsPage = () => {
           <h3>JVM Metrics</h3>
           <Row>
             <Col md="4">
-              {metrics && metrics.jvm ? <JvmMemory jvmMetrics={metrics.jvm} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}
+              {metrics?.jvm ? <JvmMemory jvmMetrics={metrics.jvm} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}
             </Col>
             <Col md="4">{threadDump ? <JvmThreads jvmThreads={threadDump} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}</Col>
             <Col md="4">
-              {metrics && metrics.processMetrics ? (
+              {metrics?.processMetrics ? (
                 <SystemMetrics
                   systemMetrics={metrics.processMetrics}
                   wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT}
@@ -92,7 +92,7 @@ export const MetricsPage = () => {
         </Col>
       </Row>
 
-      {metrics && metrics.garbageCollector ? (
+      {metrics?.garbageCollector ? (
         <GarbageCollectorMetrics garbageCollectorMetrics={metrics.garbageCollector} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} />
       ) : (
         ''
@@ -106,13 +106,13 @@ export const MetricsPage = () => {
       ) : (
         ''
       )}
-      {metrics && metrics.services ? (
+      {metrics?.services ? (
         <EndpointsRequestsMetrics endpointsRequestsMetrics={metrics.services} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} />
       ) : (
         ''
       )}
 
-      {metrics.cache ? (
+      {metrics?.cache ? (
         <Row>
           <Col sm="12">
             <CacheMetrics cacheMetrics={metrics.cache} twoDigitAfterPointFormat={APP_TWO_DIGITS_AFTER_POINT_NUMBER_FORMAT} />
@@ -122,7 +122,7 @@ export const MetricsPage = () => {
         ''
       )}
 
-      {metrics.databases && JSON.stringify(metrics.databases) !== '{}' ? (
+      {metrics?.databases && JSON.stringify(metrics.databases) !== '{}' ? (
         <Row>
           <Col sm="12">
             <DatasourceMetrics datasourceMetrics={metrics.databases} twoDigitAfterPointFormat={APP_TWO_DIGITS_AFTER_POINT_NUMBER_FORMAT} />

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs

@@ -18,7 +18,7 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
-import { Button, Table, Row, Badge } from 'reactstrap';
+import { Button, Table, Badge } from 'reactstrap';
 import {
   Translate,
   TextFormat,
@@ -108,7 +108,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
       <h2 id="user-management-page-heading" data-cy="userManagementPageHeading">
         <Translate contentKey="userManagement.home.title">Users</Translate>
         <div className="d-flex justify-content-end">
-          <Button className="mr-2" color="info" onClick={handleSyncList} disabled={loading}>
+          <Button className="me-2" color="info" onClick={handleSyncList} disabled={loading}>
             <FontAwesomeIcon icon="sync" spin={loading} /> <Translate contentKey="userManagement.home.refreshListLabel">Refresh List</Translate>
           </Button>
           <Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity">
@@ -188,7 +188,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
                 ) : null}
               </td>
 <%_ } _%>
-              <td className="text-right">
+              <td className="text-end">
                 <div className="btn-group flex-btn-group-container">
                   <Button
                     tag={Link} to={`${match.url}/${user.login}`}
@@ -216,11 +216,11 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
         </tbody>
       </Table>
 <%_ if (!databaseTypeCassandra) { _%>
-        { totalItems ? (<div className={ users && users.length > 0 ? '' : 'd-none' }>
-          <Row className="justify-content-center">
+        { totalItems ? (<div className={ users?.length > 0 ? '' : 'd-none' }>
+          <div className="justify-content-center d-flex">
             <JhiItemCount page={pagination.activePage} total={totalItems} itemsPerPage={pagination.itemsPerPage} i18nEnabled />
-          </Row>
-          <Row className="justify-content-center">
+          </div>
+          <div className="justify-content-center d-flex">
             <JhiPagination
               activePage={pagination.activePage}
               onSelect={handlePagination}
@@ -228,7 +228,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
               itemsPerPage={pagination.itemsPerPage}
               totalItems={totalItems}
             />
-          </Row>
+          </div>
         </div>) : '' }
 <%_ } _%>
     </div>

package/generators/client/templates/react/src/main/webapp/app/modules/home/home.tsx.ejs

@@ -53,7 +53,7 @@ export const Home = () => {
         <h2><Translate contentKey="home.title">Welcome, <%= backendName %> Hipster!</Translate></h2>
         <p className="lead"><Translate contentKey="home.subtitle">This is your homepage</Translate></p>
         {
-          (account && account.login) ? (
+          (account?.login) ? (
             <div>
               <Alert color="success">
                 <Translate contentKey="home.logged.message" interpolate={{ username: account.login }}>You are logged in as user {account.login}.</Translate>

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.tsx.ejs

@@ -93,7 +93,7 @@ const Header = (props: IHeaderProps) => {
         <NavbarToggler aria-label="Menu" onClick={toggleMenu} />
         <Brand />
         <Collapse isOpen={menuOpen} navbar>
-          <Nav id="header-tabs" className="ml-auto" navbar>
+          <Nav id="header-tabs" className="ms-auto" navbar>
             <Home />
             {props.isAuthenticated && <EntitiesMenu />}
             {props.isAuthenticated && props.isAdmin &&

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/account.tsx.ejs

@@ -29,7 +29,7 @@ import { getLoginUrl } from 'app/shared/util/url-utils';
 import { NavDropdown } from './menu-components';
 
 
-const accountMenuItemsAuthenticated = (
+const accountMenuItemsAuthenticated = () => (
   <>
 <%_ if (!skipUserManagement) { _%>
     <MenuItem icon="wrench" to="/account/settings" data-cy="settings"><Translate contentKey="global.menu.account.settings">Settings</Translate></MenuItem>
@@ -42,7 +42,7 @@ const accountMenuItemsAuthenticated = (
   </>
   );
 
-const accountMenuItems = (
+const accountMenuItems = () => (
   <>
 <%_ if (!authenticationTypeOauth2) { _%>
     <MenuItem id="login-item" icon="sign-in-alt" to="/login" data-cy="login"><Translate contentKey="global.menu.account.login">Sign in</Translate></MenuItem>
@@ -57,7 +57,7 @@ const accountMenuItems = (
 
 export const AccountMenu = ({ isAuthenticated = false }) => (
   <NavDropdown icon="user" name={translate('global.menu.account.main')} id="account-menu" data-cy="accountMenu">
-    {isAuthenticated ? accountMenuItemsAuthenticated : accountMenuItems}
+    {isAuthenticated ? accountMenuItemsAuthenticated() : accountMenuItems()}
   </NavDropdown>
 );
 

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/admin.tsx.ejs

@@ -25,7 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavDropdown } from './menu-components';
 import { Translate, translate } from 'react-jhipster';
 
-const adminMenuItems = (
+const adminMenuItems = () => (
   <>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
     <MenuItem icon="road" to="/admin/gateway"><Translate contentKey="global.menu.admin.gateway">Gateway</Translate></MenuItem>
@@ -44,14 +44,14 @@ const adminMenuItems = (
 <%_ } _%>
     {/* jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here */}
   </>
-  );
+);
 
-const openAPIItem = (
+const openAPIItem = () => (
   <MenuItem icon="book" to="/admin/docs"><Translate contentKey="global.menu.admin.apidocs">API</Translate></MenuItem>
 );
 
 <% if (devDatabaseTypeH2Any) { %>
-const databaseItem = (
+const databaseItem = () => (
   <DropdownItem tag="a" href="<% if (reactive) { %>http://localhost:8092/<% } else { %>./h2-console/<% } %>" target="_tab">
     <FontAwesomeIcon icon="database" fixedWidth /> <Translate contentKey="global.menu.admin.database">Database</Translate>
   </DropdownItem>
@@ -60,10 +60,10 @@ const databaseItem = (
 
 export const AdminMenu = ({ showOpenAPI <% if (devDatabaseTypeH2Any) { %>, showDatabase <%_ } _%>}) => (
   <NavDropdown icon="users-cog" name={translate('global.menu.admin.main')} id="admin-menu" data-cy="adminMenu">
-      {adminMenuItems}
-      {showOpenAPI && openAPIItem}
+      {adminMenuItems()}
+      {showOpenAPI && openAPIItem()}
 <% if (devDatabaseTypeH2Any) { %>
-      {showDatabase && databaseItem}
+      {showDatabase && databaseItem()}
 <%_ } _%>
   </NavDropdown>
 );

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-components.tsx.ejs

@@ -27,7 +27,7 @@ export const NavDropdown = props => (
     <FontAwesomeIcon icon={props.icon} />
     <span>{props.name}</span>
   </DropdownToggle>
-  <DropdownMenu right style={props.style}>
+  <DropdownMenu end style={props.style}>
     {props.children}
   </DropdownMenu>
 </UncontrolledDropdown>

package/generators/client/templates/react/webpack/webpack.dev.js.ejs

@@ -23,6 +23,9 @@ const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
 const path = require('path');
 const sass = require('sass');
+<%_ if (enableI18nRTL) { _%>
+const postcssRTLCSS = require('postcss-rtlcss');
+<%_ } _%>
 
 const utils = require('./utils.js');
 const commonConfig = require('./webpack.common.js');
@@ -47,7 +50,20 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader', {
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+<%_ if (enableI18nRTL) { _%>
+            options: {
+              postcssOptions: {
+                plugins: [postcssRTLCSS()],
+              },
+            },
+<%_ } _%>
+          },
+          {
             loader: 'sass-loader',
             options: { implementation: sass }
           }

package/generators/client/templates/react/webpack/webpack.prod.js.ejs

@@ -23,6 +23,9 @@ const WorkboxPlugin = require('workbox-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const sass = require('sass');
+<%_ if (enableI18nRTL) { _%>
+const postcssRTLCSS = require('postcss-rtlcss');
+<%_ } _%>
 
 const utils = require('./utils.js');
 const commonConfig = require('./webpack.common.js');
@@ -52,7 +55,16 @@ module.exports = async () => webpackMerge(await commonConfig({ env: ENV }), {
             }
           },
           'css-loader',
-          'postcss-loader',
+          {
+            loader: 'postcss-loader',
+<%_ if (enableI18nRTL) { _%>
+            options: {
+              postcssOptions: {
+                plugins: [postcssRTLCSS()],
+              },
+            },
+<%_ } _%>
+          },
           {
             loader: 'sass-loader',
             options: { implementation: sass }

package/generators/client/templates/vue/.eslintrc.js.ejs

@@ -19,26 +19,29 @@
 module.exports = {
     root: true,
     env: {
-      node: true
+      node: true,
     },
     extends: [
       'plugin:vue/essential',
       'eslint:recommended',
       '@vue/typescript/recommended',
       '@vue/prettier',
-      '@vue/prettier/@typescript-eslint'
+      '@vue/prettier/@typescript-eslint',
     ],
     parserOptions: {
-      ecmaVersion: 2020
+      ecmaVersion: 2020,
+      project: ['./tsconfig.spec.json'],
     },
     rules: {
       'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/multi-word-component-names': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off'
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
     },
-    "ignorePatterns": ["**/src/main docker/**/*.js"],
+    'ignorePatterns': ['<%= BUILD_DIR %>'],
   };

package/generators/client/templates/vue/package.json

@@ -3,77 +3,70 @@
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "2.0.6",
-    "axios": "0.23.0",
-    "bootstrap": "4.6.0",
+    "axios": "0.24.0",
+    "bootstrap": "4.6.1",
     "bootstrap-vue": "2.21.2",
     "bootswatch": "5.1.3",
-    "swagger-ui-dist": "3.52.5",
+    "swagger-ui-dist": "4.1.0",
     "vue": "2.6.14",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
-    "vue-router": "3.5.2",
-    "vue-i18n": "8.26.5",
+    "vue-router": "3.5.3",
+    "vue-i18n": "8.26.7",
     "vue-property-decorator": "9.1.2",
     "vuelidate": "0.7.6",
     "vuex": "3.6.2",
     "vue2-filters": "0.13.0"
   },
   "devDependencies": {
-    "@types/jest": "27.0.2",
-    "@types/node": "16.11.1",
-    "@types/sinon": "10.0.4",
+    "@types/jest": "27.0.3",
+    "@types/node": "16.11.8",
+    "@types/sinon": "10.0.6",
     "@types/vuelidate": "0.7.15",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
     "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/eslint-config-typescript": "7.0.0",
-    "@vue/cli-plugin-eslint": "4.5.14",
-    "@vue/cli-plugin-typescript": "4.5.14",
-    "@vue/cli-service": "4.5.14",
-    "@vue/test-utils": "1.2.2",
+    "@vue/eslint-config-typescript": "9.1.0",
+    "@vue/vue2-jest": "27.0.0-alpha.3",
+    "@vue/test-utils": "1.3.0",
     "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.3.7",
-    "babel-core": "7.0.0-bridge.0",
-    "browser-sync": "2.27.5",
+    "autoprefixer": "10.4.0",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "9.0.1",
-    "css-loader": "6.4.0",
-    "css-minimizer-webpack-plugin": "3.1.1",
-    "file-loader": "6.2.0",
+    "copy-webpack-plugin": "10.0.0",
+    "css-loader": "6.5.1",
+    "css-minimizer-webpack-plugin": "3.1.4",
     "folder-hash": "4.0.1",
-    "fork-ts-checker-webpack-plugin": "6.3.4",
-    "html-webpack-plugin": "5.4.0",
-    "jest": "27.3.0",
+    "fork-ts-checker-webpack-plugin": "6.4.0",
+    "html-webpack-plugin": "5.5.0",
+    "jest": "27.3.1",
     "jest-junit": "13.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
     "jest-vue-preprocessor": "1.7.1",
     "merge-jsons-webpack-plugin": "1.0.21",
-    "mini-css-extract-plugin": "2.4.2",
+    "mini-css-extract-plugin": "2.4.5",
     "numeral": "2.0.6",
-    "postcss": "8.3.9",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.2.0",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.43.2",
-    "sass-loader": "12.2.0",
-    "sinon": "11.1.2",
-    "terser-webpack-plugin": "5.2.4",
+    "sass": "1.43.4",
+    "sass-loader": "12.3.0",
+    "sinon": "12.0.1",
+    "terser-webpack-plugin": "5.2.5",
     "ts-jest": "27.0.7",
     "ts-loader": "9.2.6",
-    "eslint": "6.8.0",
+    "eslint": "8.2.0",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-vue": "7.19.1",
-    "typescript": "4.4.4",
-    "url-loader": "4.1.1",
-    "webpack": "5.58.2",
+    "eslint-plugin-vue": "8.1.1",
+    "typescript": "4.5.2",
+    "webpack": "5.64.1",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.3.1",
+    "webpack-dev-server": "4.5.0",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.3.0",
+    "workbox-webpack-plugin": "6.4.1",
     "vue-jest": "3.0.7",
     "vue-loader": "15.9.8"
   }