DEP Upgrade frontend build stack

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.eslintrc');

.gitignore

@@ -0,0 +1,2 @@
+/vendor/
+node_modules/

.nvmrc

@@ -0,0 +1 @@
+18

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/dist/styles/BrokenExternalLinksReport.css

@@ -0,0 +1 @@
+.external-links-report__create-report,.external-links-report__report-progress{margin-top:20px}

client/javascript/BrokenExternalLinksReport.js → client/src/js/BrokenExternalLinksReport.js

@@ -1,29 +1,31 @@
-(function($) {
-  $.entwine('ss', function($) {
+/* global jQuery */
+(function ($) {
+  // eslint-disable-next-line no-shadow
+  $.entwine('ss', ($) => {
     $('.external-links-report__create-report').entwine({
       PollTimeout: null,
       ButtonIsLoading: false,
 
-      onclick: function(e) {
+      onclick(e) {
         e.preventDefault();
 
         this.buttonLoading();
         this.start();
       },
 
-      onmatch: function() {
+      onmatch() {
         // poll the current job and update the front end status
         this.poll();
       },
 
-      start: function() {
+      start() {
         // initiate a new job
         $('.external-links-report__report-progress')
           .empty()
           .text('Running report 0%');
 
         $.ajax({
-          url: "admin/externallinks/start",
+          url: 'admin/externallinks/start',
           async: true,
           timeout: 3000
         });
@@ -36,83 +38,83 @@
        *
        * @return {Object}
        */
-      getButton: function() {
+      getButton() {
         return $('.external-links-report__create-report');
       },
 
       /**
        * Sets the button into a loading state. See LeftAndMain.js.
        */
-      buttonLoading: function() {
+      buttonLoading() {
         if (this.getButtonIsLoading()) {
           return;
         }
         this.setButtonIsLoading(true);
 
-        var $button = this.getButton();
+        const $button = this.getButton();
 
         // set button to "submitting" state
         $button.addClass('btn--loading loading');
         $button.attr('disabled', true);
 
         if ($button.is('button')) {
           $button.append($(
-            '<div class="btn__loading-icon">'+
-              '<span class="btn__circle btn__circle--1" />'+
-              '<span class="btn__circle btn__circle--2" />'+
-              '<span class="btn__circle btn__circle--3" />'+
+            '<div class="btn__loading-icon">' +
+              '<span class="btn__circle btn__circle--1" />' +
+              '<span class="btn__circle btn__circle--2" />' +
+              '<span class="btn__circle btn__circle--3" />' +
             '</div>'));
 
-          $button.css($button.outerWidth() + 'px');
+          $button.css(`${$button.outerWidth()}px`);
         }
       },
 
       /**
        * Reset the button back to its original state after loading. See LeftAndMain.js.
        */
-      buttonReset: function() {
+      buttonReset() {
         this.setButtonIsLoading(false);
 
-        var $button = this.getButton();
+        const $button = this.getButton();
 
         $button.removeClass('btn--loading loading');
         $button.attr('disabled', false);
         $button.find('.btn__loading-icon').remove();
         $button.css('width', 'auto');
       },
 
-      poll: function() {
-        var self = this;
+      poll() {
+        const self = this;
         this.buttonLoading();
 
         $.ajax({
-          url: "admin/externallinks/getJobStatus",
+          url: 'admin/externallinks/getJobStatus',
           async: true,
-          success: function(data) {
+          success(data) {
             // No report, so let user create one
             if (!data) {
               self.buttonReset();
               return;
             }
 
             // Parse data
-            var completed = data.Completed ? data.Completed : 0;
-            var total = data.Total ? data.Total : 0;
+            const completed = data.Completed ? data.Completed : 0;
+            const total = data.Total ? data.Total : 0;
 
             // If complete status
             if (data.Status === 'Completed') {
               $('.external-links-report__report-progress')
-                .text('Report finished ' + completed + '/' + total);
+                .text(`Report finished ${completed}/${total}`);
 
               self.buttonReset();
               return;
             }
 
             // If incomplete update status
             if (completed < total) {
-              var percent = (completed / total) * 100;
+              const percent = (completed / total) * 100;
               $('.external-links-report__report-progress')
-                .text('Running report  ' + completed + '/' +  total + ' (' + percent.toFixed(2) + '%)');
+                .text(`Running report  ${completed}/${total} (${percent.toFixed(2)}%)`);
             }
 
             // Ensure the regular poll method is run
@@ -121,13 +123,13 @@
               clearTimeout(self.getPollTimeout());
             }
 
-            self.setPollTimeout(setTimeout(function() {
+            self.setPollTimeout(setTimeout(() => {
               $('.external-links-report__create-report').poll();
             }, 1000));
           },
-          error: function(e) {
+          error(e) {
             if (typeof console !== 'undefined') {
-              console.log(e);
+              console.error(e);
             }
           }
         });

composer.json

@@ -36,8 +36,7 @@
     },
     "extra": {
         "expose": [
-            "client/css",
-            "client/javascript"
+            "client/dist"
         ]
     },
     "minimum-stability": "dev",

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "silverstripe-externallinks",
+  "license": "BSD-3-Clause",
+  "author": "SilverStripe Ltd",
+  "engines": {
+    "node": ">=18.x"
+  },
+  "scripts": {
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
+    "dev": "NODE_ENV=development webpack --progress",
+    "watch": "NODE_ENV=development webpack --watch --progress",
+    "lint": "eslint client/src/js && sass-lint client/src/styles"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
+  },
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
+}

src/Reports/BrokenExternalLinksReport.php

@@ -79,8 +79,8 @@ public function sourceRecords()
 
     public function getCMSFields()
     {
-        Requirements::css('silverstripe/externallinks: client/css/BrokenExternalLinksReport.css');
-        Requirements::javascript('silverstripe/externallinks: client/javascript/BrokenExternalLinksReport.js');
+        Requirements::css('silverstripe/externallinks: client/dist/styles/BrokenExternalLinksReport.css');
+        Requirements::javascript('silverstripe/externallinks: client/dist/js/BrokenExternalLinksReport.js');
 
         $fields = parent::getCMSFields();
 

webpack.config.js

@@ -0,0 +1,25 @@
+const Path = require('path');
+const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
+
+const PATHS = {
+  ROOT: Path.resolve(),
+  SRC: Path.resolve('client/src'),
+  DIST: Path.resolve('client/dist'),
+};
+
+const config = [
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/externallinks')
+    .setEntry({
+      BrokenExternalLinksReport: `${PATHS.SRC}/js/BrokenExternalLinksReport.js`,
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
+      BrokenExternalLinksReport: `${PATHS.SRC}/styles/BrokenExternalLinksReport.scss`,
+    })
+    .getConfig(),
+];
+
+module.exports = config;