DEP Upgrade frontend build stack

.editorconfig

@@ -10,8 +10,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[{*.yml,*.js,*.scss,package.json}]
 indent_size = 2
+indent_style = space
 
 # The indent size used in the package.json file cannot be changed:
 # https://github.com/npm/npm/pull/3180#issuecomment-16336516

.eslintrc.js

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

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/**/*.js.map
+/**/*.css.map
+/vendor/

.nvmrc

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

babel.config.json

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

client/src/js/multivaluefield.js

@@ -0,0 +1,75 @@
+/* global jQuery */
+jQuery(($) => {
+  function addNewField() {
+    const self = $(this);
+    const val = self.val();
+    const keySep = '__';
+
+    // check to see if the one after us is there already - if so, we don't need a new one
+    const li = $(this).closest('li').next('li');
+
+    if (!val) {
+      // lets also clean up if need be
+      const nextText = li.find('input.mventryfield');
+      let detach = true;
+
+      nextText.each(function () {
+        if ($(this) && $(this).val() && $(this).val().length > 0) {
+          detach = false;
+        }
+      });
+
+      if (detach) {
+        li.detach();
+      }
+    } else {
+      if (li.length) {
+        return;
+      }
+
+      const append = self.closest('li')
+        .clone()
+        .find('.has-chzn')
+        .show()
+        .removeClass('')
+        .data('chosen', null)
+        .end()
+        .find('.chzn-container')
+        .remove()
+        .end();
+
+      // Assign the new inputs a unique ID, so that chosen picks up
+      // the correct container.
+      append.find('input, select, textarea').val('').each(function () {
+        let pos = this.id.lastIndexOf(keySep);
+        if (pos !== -1) {
+          pos += keySep.length;
+
+          const maxId = parseInt(this.id.substr(pos), 10);
+          const nextId = maxId + 1;
+
+          this.id = this.id.substr(0, pos) + nextId; // nextId auto-converted to string here
+        }
+      });
+
+      append.appendTo(self.parents('ul.multivaluefieldlist'));
+    }
+
+    $(this).trigger('multiValueFieldAdded');
+  }
+
+  $(document).on('keyup', '.mventryfield', addNewField);
+  $(document).on('change', '.mventryfield:not(input)', addNewField);
+
+  if ($.fn.sortable) {
+    if ($.entwine) {
+      $('ul.multivaluefieldlist').entwine({
+        onmatch() {
+          $(this).sortable();
+        }
+      });
+    } else {
+      $('ul.multivaluefieldlist').sortable();
+    }
+  }
+});

client/src/styles/multivaluefield.scss

@@ -0,0 +1,37 @@
+ul.multivaluefieldlist {
+  margin: 0px;
+  padding: 0px;
+}
+
+.multivaluefieldlist > li {
+  margin-bottom: 4px;
+  min-width: 250px;
+  list-style-type: none;
+}
+
+.multivaluefieldlist > li::after {
+  content: '↕';
+  cursor: pointer;
+}
+
+.multivaluefieldlist > li:last-child {
+  margin-bottom: 0;
+}
+
+.mventryfield {
+  max-width: 200px !important;
+  display: inline;
+}
+
+textarea.mventryfield {
+  max-width: none !important;
+  vertical-align: top;
+}
+
+.multivaluefieldlist .chosen-container {
+  max-width: 90% !important;
+}
+
+.field .multivaluefieldlist input.text, .field .multivaluefieldlist select {
+  display: inline;
+}

composer.json

@@ -24,7 +24,7 @@
     },
     "extra": {
         "expose": [
-            "client"
+            "client/dist"
         ],
         "installer-name": "multivaluefield"
     },

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "multivaluefield",
+  "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 && sass-lint client/src"
+  },
+  "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/Fields/KeyValueField.php

@@ -80,11 +80,8 @@ public function __construct($name, $title = null, $sourceKeys = [], $sourceValue
 
     public function Field($properties = [])
     {
-        if (Controller::curr() instanceof ContentController) {
-            Requirements::javascript('silverstripe/admin: thirdparty/jquery/jquery.js');
-        }
-        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/javascript/multivaluefield.js');
-        Requirements::css('symbiote/silverstripe-multivaluefield: client/css/multivaluefield.css');
+        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/dist/js/multivaluefield.js');
+        Requirements::css('symbiote/silverstripe-multivaluefield: client/dist/styles/multivaluefield.css');
 
         $nameKey = $this->name.'[key][]';
         $nameVal = $this->name.'[val][]';

src/Fields/MultiValueDropdownField.php

@@ -45,11 +45,8 @@ public function setSource(array $source)
 
     public function Field($properties = [])
     {
-        if (Controller::curr() instanceof ContentController) {
-            Requirements::javascript('silverstripe/admin: thirdparty/jquery/jquery.js');
-        }
-        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/javascript/multivaluefield.js');
-        Requirements::css('symbiote/silverstripe-multivaluefield: client/css/multivaluefield.css');
+        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/dist/js/multivaluefield.js');
+        Requirements::css('symbiote/silverstripe-multivaluefield: client/dist/styles/multivaluefield.css');
 
         $name   = $this->name.'[]';
         $fields = [];

src/Fields/MultiValueListField.php

@@ -27,11 +27,8 @@ public function __construct($name, $title = null, $source = [], $value = null)
 
     public function Field($properties = [])
     {
-        if (Controller::curr() instanceof ContentController) {
-            Requirements::javascript('silverstripe/admin: thirdparty/jquery/jquery.js');
-        }
-        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/javascript/multivaluefield.js');
-        Requirements::css('symbiote/silverstripe-multivaluefield: client/css/multivaluefield.css');
+        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/dist/js/multivaluefield.js');
+        Requirements::css('symbiote/silverstripe-multivaluefield: client/dist/styles/multivaluefield.css');
 
         $name = $this->name.'[]';
 

src/Fields/MultiValueTextField.php

@@ -24,11 +24,8 @@ class MultiValueTextField extends FormField
 
     public function Field($properties = [])
     {
-        if (Controller::curr() instanceof ContentController) {
-            Requirements::javascript('silverstripe/admin: thirdparty/jquery/jquery.js');
-        }
-        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/javascript/multivaluefield.js');
-        Requirements::css('symbiote/silverstripe-multivaluefield: client/css/multivaluefield.css');
+        Requirements::javascript('symbiote/silverstripe-multivaluefield: client/dist/js/multivaluefield.js');
+        Requirements::css('symbiote/silverstripe-multivaluefield: client/dist/styles/multivaluefield.css');
 
         $name   = $this->name.'[]';
         $fields = [];

webpack.config.js

@@ -0,0 +1,34 @@
+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'),
+};
+
+// Main JS bundle
+const jsConfig = new JavascriptWebpackConfig('js', PATHS, 'symbiote/silverstripe-multivaluefield')
+  .setEntry({
+    multivaluefield: `${PATHS.SRC}/js/multivaluefield.js`
+  })
+  .getConfig();
+// Tell webpack that jquery is externally accessible, but don't include default externals as this can be used on the frontend
+jsConfig.externals = {
+  jquery: 'jQuery'
+};
+
+const config = [
+  jsConfig,
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
+      multivaluefield: `${PATHS.SRC}/styles/multivaluefield.scss`
+    })
+    .getConfig(),
+];
+
+// Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
+module.exports = (process.env.WEBPACK_CHILD)
+  ? config.find((entry) => entry.name === process.env.WEBPACK_CHILD)
+  : config;