Update front end dependencies, purge unused CSS from bundle

.eslintrc.json

@@ -4,6 +4,7 @@
         "es6": true
     },
     "parserOptions": {
+        "ecmaVersion": 2017,
         "sourceType": "module"
     }
 }

.github/workflows/lint.yaml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '15'
+          node-version: '20'
       - run: npm --version
       - run: npm ci
       - run: npm run eslint

.nvmrc

@@ -0,0 +1 @@
+20.6.0

package.json

@@ -1,14 +1,19 @@
 {
     "devDependencies": {
-        "@symfony/webpack-encore": "^1.8.2",
-        "bootstrap": "^5.1.3",
-        "date-fns": "^2.28.0",
-        "eslint-webpack-plugin": "^3.1.1",
-        "husky": "^7.0.4",
-        "lint-staged": "^12.3.7",
-        "prettier": "^2.6.0",
-        "sass": "^1.49.9",
-        "sass-loader": "^12.6.0"
+        "@babel/core": "^7.22.17",
+        "@babel/preset-env": "^7.22.15",
+        "@symfony/webpack-encore": "^4.4.0",
+        "bootstrap": "^5.3.1",
+        "date-fns": "^2.30.0",
+        "eslint-webpack-plugin": "^4.0.1",
+        "husky": "^8.0.3",
+        "lint-staged": "^14.0.1",
+        "prettier": "3.0.3",
+        "purgecss-webpack-plugin": "^5.0.0",
+        "sass": "^1.66.1",
+        "sass-loader": "^13.3.2",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4"
     },
     "license": "MIT",
     "private": true,

views/assets/css/style.scss

@@ -4,6 +4,8 @@
 // Imports only used Bootstrap
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+@import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
@@ -68,7 +70,9 @@ pre.file {
         top: 100%;
         left: 0;
         transform: translateY(-50%);
-        transition: opacity 0.25s, transform 0.25s;
+        transition:
+            opacity 0.25s,
+            transform 0.25s;
         &.show {
             transform: none;
         }

views/assets/js/App/Collapse.js

@@ -1,10 +1,10 @@
 class Collapse {
     constructor() {
         this.toggleElements = Array.prototype.slice.call(
-            document.querySelectorAll('[data-toggle="collapse"]')
+            document.querySelectorAll('[data-toggle="collapse"]'),
         );
         this.collapsibleElements = Array.prototype.slice.call(
-            document.querySelectorAll(".collapse")
+            document.querySelectorAll(".collapse"),
         );
         this.handleClick = this.handleClick.bind(this);
         this.init();
@@ -60,7 +60,7 @@ class Collapse {
             element.style.transition = "max-height 0.25s";
             element.setAttribute(
                 "aria-expanded",
-                initiallyVisible ? "true" : "false"
+                initiallyVisible ? "true" : "false",
             );
         });
     }

views/assets/js/App/CopySnippet.js

@@ -19,7 +19,7 @@ class CopySnippet {
         this.clipboardButton = document.querySelector(clipboardButton);
         this.tooltip = document.querySelector(tooltip);
         this.releases = Array.prototype.slice.call(
-            document.querySelectorAll(releases)
+            document.querySelectorAll(releases),
         );
 
         // Vars
@@ -91,7 +91,7 @@ class CopySnippet {
                 .then((result) => {
                     if (result.state == "granted" || result.state == "prompt") {
                         navigator.clipboard.writeText(
-                            this.snippetTextField.value
+                            this.snippetTextField.value,
                         );
                         updatedClipboardViaAPI = true;
                     }
@@ -103,7 +103,7 @@ class CopySnippet {
             if ("clipboardData" in window) {
                 window.clipboardData.setData(
                     "Text",
-                    this.snippetTextField.value
+                    this.snippetTextField.value,
                 );
             } else {
                 document.execCommand("copy");
@@ -135,17 +135,17 @@ class CopySnippet {
     init() {
         this.releases.forEach((elem) =>
             elem.addEventListener("click", (event) =>
-                this.showCodeSnippetToCopy(event)
-            )
+                this.showCodeSnippetToCopy(event),
+            ),
         );
         this.snippetTextField.addEventListener("focus", (event) =>
-            event.target.select()
+            event.target.select(),
         );
         this.clipboardButton.addEventListener("click", () =>
-            this.copyCodeSnippetToClipboard()
+            this.copyCodeSnippetToClipboard(),
         );
         this.tooltip.addEventListener("transitionend", (event) =>
-            this.tooltipFadeout(event)
+            this.tooltipFadeout(event),
         );
     }
 }

views/assets/js/App/PackageFilter.js

@@ -16,7 +16,7 @@ class PackageFilter {
         this.itemContainer = document.querySelector(itemContainer);
         this.filterBy = document.querySelector(filterBy);
         this.allPackages = Array.prototype.slice.call(
-            this.itemContainer.querySelectorAll(item)
+            this.itemContainer.querySelectorAll(item),
         );
 
         // Vars
@@ -50,7 +50,7 @@ class PackageFilter {
      */
     updateHash() {
         window.location.hash = window.encodeURIComponent(
-            this.searchField.value
+            this.searchField.value,
         );
     }
 
@@ -70,7 +70,7 @@ class PackageFilter {
             // Get content either from specific fields, or the whole package
             const filterableContent = this.filterByValue
                 ? elem.querySelector(
-                      ".field-" + this.filterByValue + ".filter-by"
+                      ".field-" + this.filterByValue + ".filter-by",
                   ).textContent
                 : elem.textContent;
 
@@ -101,7 +101,7 @@ class PackageFilter {
 
     init() {
         this.filterBy.addEventListener("change", (event) =>
-            this.handleFilterByChange(event)
+            this.handleFilterByChange(event),
         );
         this.searchField.addEventListener("search", () => {
             if (!this.searchField.value) {
@@ -114,7 +114,7 @@ class PackageFilter {
             window.clearTimeout(this.inputTimeout);
             this.inputTimeout = window.setTimeout(
                 this.filterPackages.bind(this),
-                350
+                350,
             );
         });
         document.addEventListener("keyup", (event) => {

views/assets/js/App/PackageFilterSettings.js

@@ -11,7 +11,7 @@ class PackageFilterSettings {
      */
     constructor(defaultFilterBy, activeFilter, useThisField) {
         this.defaultFilterBy = Array.prototype.slice.call(
-            document.querySelectorAll(defaultFilterBy)
+            document.querySelectorAll(defaultFilterBy),
         );
         this.activeFilter = document.querySelector(activeFilter);
         this.useThisField = document.querySelector(useThisField);
@@ -33,15 +33,21 @@ class PackageFilterSettings {
             elem.addEventListener("change", (event) =>
                 window.localStorage.setItem(
                     "satisDefaultFilterBy",
-                    event.target.value
-                )
-            )
+                    event.target.value,
+                ),
+            ),
         );
         this.useThisField.addEventListener("change", (event) =>
-            window.localStorage.setItem("satisUseThisField", event.target.value)
+            window.localStorage.setItem(
+                "satisUseThisField",
+                event.target.value,
+            ),
         );
         this.activeFilter.addEventListener("change", (event) =>
-            window.localStorage.setItem("satisActiveFilter", event.target.value)
+            window.localStorage.setItem(
+                "satisActiveFilter",
+                event.target.value,
+            ),
         );
     }
 
@@ -52,7 +58,7 @@ class PackageFilterSettings {
         const defaultFilterBy =
             window.localStorage.getItem("satisDefaultFilterBy") || "all";
         this.defaultFilterBy.forEach(
-            (elem) => (elem.checked = defaultFilterBy === elem.value)
+            (elem) => (elem.checked = defaultFilterBy === elem.value),
         );
         const useThisField = window.localStorage.getItem("satisUseThisField");
         if (useThisField) {

views/assets/js/App/Settings.js

@@ -38,7 +38,7 @@ class Settings {
         this.settingsFormButton.classList.remove("d-none");
         this.settingsFormButton.addEventListener(
             "click",
-            this.handleButtonActiveState
+            this.handleButtonActiveState,
         );
     }
 }

views/assets/js/App/ToggleFields.js

@@ -12,7 +12,7 @@ class ToggleFields {
         this.packageFieldsByFieldName = {};
         this.showAllButton = document.querySelector(showAllButton);
         this.checkboxes = Array.prototype.slice.call(
-            document.querySelectorAll(checkboxesToToggle)
+            document.querySelectorAll(checkboxesToToggle),
         );
         if (this.showAllButton && this.checkboxes.length) {
             this.init();
@@ -25,7 +25,7 @@ class ToggleFields {
     populateCheckboxesFromStorage() {
         let showAllButtonIsDisabled = true;
         const fieldStatus = JSON.parse(
-            window.localStorage.getItem("satisFieldStatus") || "{}"
+            window.localStorage.getItem("satisFieldStatus") || "{}",
         );
         this.checkboxes.forEach((elem) => {
             if (elem.value in fieldStatus) {
@@ -54,7 +54,7 @@ class ToggleFields {
         });
         window.localStorage.setItem(
             "satisFieldStatus",
-            JSON.stringify(fieldStatus)
+            JSON.stringify(fieldStatus),
         );
         this.showAllButton.disabled = showAllButtonIsDisabled;
     }
@@ -89,15 +89,15 @@ class ToggleFields {
      */
     init() {
         this.showAllButton.addEventListener("click", () =>
-            this.showAllFields()
+            this.showAllFields(),
         );
         this.checkboxes.forEach((elem) => {
             elem.addEventListener("change", () =>
-                this.saveCheckboxesToStorage()
+                this.saveCheckboxesToStorage(),
             );
             this.packageFieldsByFieldName[elem.value] =
                 Array.prototype.slice.call(
-                    document.querySelectorAll(".field-" + elem.value)
+                    document.querySelectorAll(".field-" + elem.value),
                 );
         });
         this.populateCheckboxesFromStorage();

views/assets/js/app.js

@@ -17,13 +17,13 @@ document.addEventListener("DOMContentLoaded", function () {
     new PackageFilterSettings(
         '[name="default-filter"]',
         ".filter-field",
-        ".default-filter-field"
+        ".default-filter-field",
     );
     new PackageFilter(
         "input#search",
         "#package-list",
         ".card",
-        ".filter-field"
+        ".filter-field",
     );
 
     // Copy code snippet from a release for a project's composer.json
@@ -32,7 +32,7 @@ document.addEventListener("DOMContentLoaded", function () {
         ".copy-snippet__input",
         ".copy-snippet__button",
         ".copy-snippet__tooltip",
-        ".field-releases .badge"
+        ".field-releases .badge",
     );
 
     new ToggleFields("#toggle-field-all", ".toggle-field");

webpack.config.js

@@ -1,5 +1,8 @@
 const Encore = require("@symfony/webpack-encore");
 const ESLintPlugin = require("eslint-webpack-plugin");
+const glob = require("glob");
+const path = require("path");
+const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
 
 Encore.addEntry("app", "./views/assets/js/app.js")
     .addStyleEntry("style", "./views/assets/css/style.scss")
@@ -9,7 +12,14 @@ Encore.addEntry("app", "./views/assets/js/app.js")
     .addPlugin(new ESLintPlugin())
     .enableSourceMaps(!Encore.isProduction())
     .setOutputPath("views/build/")
-    .setPublicPath("/build");
+    .setPublicPath("/build")
+    .addPlugin(
+        new PurgeCSSPlugin({
+            paths: glob.sync(`${path.join(__dirname, "views")}/**/*`, {
+                nodir: true,
+            }),
+        }),
+    );
 
 const config = Encore.getWebpackConfig();