DEP Upgrade frontend build stack (#71)

.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/src/js/GridFieldQueuedExportButton.js

@@ -0,0 +1,55 @@
+/* global jQuery, ss */
+(function ($) {
+  // eslint-disable-next-line no-shadow
+  $.entwine('ss', ($) => {
+    $('.gridfield-queued-export__status-pending').entwine({
+
+      onadd() {
+        const self = this;
+        setTimeout(() => { self.checkStatus(); }, 2000);
+      },
+
+      checkStatus() {
+        const url = this.parents('.gridfield-queued-export').attr('data-url');
+        if (!url) return;
+
+        if ($('.gridfield-queued-export__loading').length < 1) {
+          $('.cms-content-header-info').append('<span class="icon font-icon-spinner gridfield-queued-export__loading"></span>');
+        }
+
+        const self = this;
+        jQuery.ajax({
+          headers: { 'X-Pjax': 'CurrentForm,Breadcrumbs' },
+          url,
+          type: 'GET',
+          success(data, status, xhr) {
+            if (!$.contains(document, self[0])) return;
+            $('.cms-container').handleAjaxResponse(data, status, xhr);
+          }
+        });
+      }
+    });
+
+    $('.gridfield-queued-export__status-available').entwine({
+      onadd() {
+        this.checkForDownloadStart();
+      },
+
+      checkForDownloadStart() {
+        const self = this;
+        if (!$.contains(document, self[0])) return;
+
+        const id = this.parents('.gridfield-queued-export').attr('data-id');
+        if (!id) return;
+
+        if (document.cookie.match(new RegExp(`(^|;\\s*)downloaded_${id}\\s*=\\s*true(\\s*;|$)`, 'i'))) {
+          this.replaceWith(
+            `<p>${ss.i18n._t('GridFieldQueuedExportButton.DOWNLOADED', 'Your export has been downloaded.')}</p>`
+          );
+        }
+
+        setTimeout(() => { self.checkForDownloadStart(); }, 500);
+      }
+    });
+  });
+}(jQuery));

client/src/styles/GridFieldQueuedExportButton.scss

@@ -0,0 +1,20 @@
+.cms .gridfield-queued-export__status {
+  padding-top: 1em;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.gridfield-queued-export__loading {
+  animation-name: rotate;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}

composer.json

@@ -24,7 +24,8 @@
     },
     "extra": {
         "expose": [
-            "client"
+            "client/dist",
+            "client/lang"
         ]
     },
     "autoload": {

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "silverstripe-gridfieldqueuedexport",
+  "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/Forms/GridFieldQueuedExportButton.php

@@ -220,8 +220,8 @@ public function checkExport($gridField, $request = null)
         }
 
         Requirements::add_i18n_javascript('silverstripe/gridfieldqueuedexport:client/lang');
-        Requirements::javascript('silverstripe/gridfieldqueuedexport:client/GridFieldQueuedExportButton.js');
-        Requirements::css('silverstripe/gridfieldqueuedexport:client/GridFieldQueuedExportButton.css');
+        Requirements::javascript('silverstripe/gridfieldqueuedexport:client/dist/js/GridFieldQueuedExportButton.js');
+        Requirements::css('silverstripe/gridfieldqueuedexport:client/dist/styles/GridFieldQueuedExportButton.css');
 
         $return = $data->renderWith(GridFieldQueuedExportButton::class);
 

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/gridfieldqueuedexport')
+    .setEntry({
+      GridFieldQueuedExportButton: `${PATHS.SRC}/js/GridFieldQueuedExportButton.js`,
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
+      GridFieldQueuedExportButton: `${PATHS.SRC}/styles/GridFieldQueuedExportButton.scss`,
+    })
+    .getConfig(),
+];
+
+module.exports = config;