Removing jQuery from prestashop native modules

_dev/css/theme/components/product/_index.scss

@@ -5,4 +5,3 @@
 @import "stars";
 @import "products-list";
 @import "product-slider";
-@import "comments-pagination";

_dev/css/theme/components/product/_stars.scss

@@ -5,26 +5,31 @@
   top: 0;
   left: 0;
   display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+
+  &.star-content-empty {
+    position: static;
+  }
 
   .star,
   .star-on,
   .star-hover {
+    flex: 0 0 auto;
     display: block;
-    flex: auto;
     width: 20px;
     height: 20px;
     margin-left: 3px;
     background: url("../img/icons/star_gray.svg") no-repeat 0 0 transparent;
     background-size: 20px;
-  }
 
-  .star-on,
-  .star-hover {
-    background-image: url("../img/icons/star_active.svg");
-  }
+    &:first-child {
+      margin-left: 0;
+    }
 
-  .star-hover {
-    cursor: pointer;
+    &.star-on {
+      background-image: url("../img/icons/star_active.svg");
+    }
   }
 
   .small-stars & {
@@ -35,18 +40,20 @@
       height: 16px;
       margin-left: 2px;
       background-size: 16px;
+
+      &:first-child {
+        margin-left: 0;
+      }
     }
   }
 }
 
 .grade-stars {
   position: relative;
   display: inline-block;
-  min-width: 120px;
   height: 20px;
 
   &.small-stars {
-    min-width: 70px;
     height: 16px;
   }
 }
@@ -61,6 +68,6 @@
   background: rgba($white, 0.4);
 
   .grade-stars {
-    display: block;
+    display: inline-block;
   }
 }

_dev/js/jquery.js

@@ -0,0 +1 @@
+import 'jquery'; // ONLY FOR CHUNK

_dev/js/theme.js

@@ -1,3 +1 @@
-import 'jquery'; // ONLY FOR CHUNK
-
 import './theme/index';

_dev/js/theme/index.js

@@ -2,7 +2,7 @@ import EventEmitter from 'events';
 
 import './windowExpose';
 import './core/index';
-import './vendors/bootstrap/bootstrap-imports';
+import './vendors/index';
 import './components/dynamic-bootstrap-components';
 import bsCustomFileInput from 'bs-custom-file-input';
 import './components/header/index';

_dev/js/theme/vendors/index.js

@@ -0,0 +1 @@
+import './bootstrap/bootstrap-imports';

_dev/js/theme/windowExpose.js

@@ -13,6 +13,8 @@ import { getAllSiblingsBeforeElement, getAllSiblingsAfterElement } from '../util
 import { fromSerializeObject, fromSerialize, formSerializeArray } from '../utils/form/formSerialize';
 import useToggleDisplay from '../utils/display/useToggleDisplay';
 
+const { hide, show, toggle } = useToggleDisplay();
+
 exposeToWindow('eventHandlerOn', on);
 exposeToWindow('eventHandlerOne', one);
 exposeToWindow('eventHandlerOff', off);
@@ -31,3 +33,6 @@ exposeToWindow('fromSerializeObject', fromSerializeObject);
 exposeToWindow('fromSerialize', fromSerialize);
 exposeToWindow('formSerializeArray', formSerializeArray);
 exposeToWindow('useToggleDisplay', useToggleDisplay);
+exposeToWindow('hide', hide);
+exposeToWindow('show', show);
+exposeToWindow('toggle', toggle);

_dev/js/utils/http/useHttpRequest.js

@@ -22,6 +22,11 @@ const useHttpRequest = (url, options = {}, addons = []) => {
     options.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
   }
 
+  // Set default accept header
+  if (!(options.headers?.accept)) {
+    options.headers.accept = 'application/json, text/javascript, */*;';
+  }
+
   // Set default X-Requested-With header
   if (!(options.headers?.['X-Requested-With'])) {
     options.headers['X-Requested-With'] = 'XMLHttpRequest';

_dev/webpack/webpack.parts.js

@@ -158,12 +158,6 @@ exports.extractVendorsChunks = () => ({
           filename: 'js/swipervendor.js',
           chunks: 'initial',
         },
-        jquery: {
-          test: /[\\/]node_modules[\\/](jquery)[\\/]/,
-          name: 'jquery',
-          filename: 'js/jquery.js',
-          chunks: 'initial',
-        },
         shared: {
           name: 'shared',
           chunks: 'initial',

_dev/webpack/webpack.production.js

@@ -11,6 +11,7 @@ const plugins = (purge, analyze) => ([
   new EsbuildPlugin({
     target: 'es2016',
     format: 'iife',
+    minify: true,
   }),
   analyze ? new BundleAnalyzerPlugin() : false,
   purge ? new PurgeCSSPlugin({

_dev/webpack/webpack.vars.js

@@ -67,6 +67,8 @@ exports.webpackVars = {
       ]
     }
 
+    resultEntries.jquery = path.resolve(themeDev, `./js/jquery.js`);
+
     return resultEntries;
   },
   getOutput: ({ mode, publicPath, siteURL, port, devServer }) => ({

config/assets.yml

@@ -30,9 +30,9 @@ js:
   runtime: # This file is only used to handle HMR for multiple entry points
     fileName: runtime.js
     priority: 1
-  jquery:
-    fileName: jquery.js
-    priority: 1
+#  jquery: # Uncomment this if you want to use jQuery
+#    fileName: jquery.js
+#    priority: 1
   shared: # Shared code between all pages autogenerated by Webpack
     fileName: shared.js
     priority: 1