Merged PR 44771: Remove class property in validation-directive.js

## What's being changed Our validation-directive.js file. ## Why it's being changed We had class properties here that caused an error in some lower versions of Shopware 6.4.x (certainly 6.4.9). The error was triggered when running: ``` bin/build-administration.sh ``` and the error was: ``` Support for the experimental syntax 'classProperties' isn't currently enabled ``` ## How to review / test this change - Checkout this branch in a Shopware 6.4.9 - Run `bin/build-administration.sh` ## Notes You may need to add `--legacy-peer-deps` to the `npm install` command on L53 of `build-administration.sh` Related work items: #209832
dotmailer · Apr 27, 2023 · e629c97 · e629c97
1 parent 22ec97a
commit e629c97
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -27,6 +27,11 @@ in order to rebuild the JS for Flow Builder.
 
 ## Changelog
 
+### 1.1.1
+
+#### Bug fixes
+- We fixed an error in validation-directive.js relating to unsupported 'classProperties'.
+
 ### 1.1.0
 
 #### What's new

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "dotdigital/dotdigital-for-shopware-flowbuilder",
   "description": "Integrate with Dotdigital using Flow Builder actions.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "shopware-platform-plugin",
   "license": "MIT",
   "authors": [

diff --git a/src/Resources/app/administration/src/directives/validation-directive.js b/src/Resources/app/administration/src/directives/validation-directive.js
@@ -2,160 +2,155 @@ const { Directive } = Shopware;
 const DDValidationRepository = new Map();
 
 class Validator {
-/**
-* Allowed validation types
-*
-* @type {string[]}
-*/
-static Types = [
-    'number',
-    'required',
-]
-
-/**
-* Validator constructor.
-*
-* @param identifier
-*/
-constructor(
-    identifier,
-) {
-    const validationGroup = Validator.getGroup(identifier);
-    if (!validationGroup) {
-        throw new DOMException(`Unable to find validation group ${identifier}`);
+    /**
+     * Validator constructor.
+     *
+     * @param identifier
+     */
+    constructor(
+        identifier,
+    ) {
+        const validationGroup = Validator.getGroup(identifier);
+        if (!validationGroup) {
+            throw new DOMException(`Unable to find validation group ${identifier}`);
+        }
+
+        this.Types = [
+            'number',
+            'required',
+        ];
+
+        if (!this.Types.includes(validationGroup.config.type)) {
+            throw new DOMException(`${validationGroup.config.type} is not supported by validator`);
+        }
+
+        this.identifier = identifier;
+        this.vNode = validationGroup.node;
+        this.expression = validationGroup.node.data.model.expression;
+        this.parent = validationGroup.parent;
+        this.message = validationGroup.config.message;
+        this.type = validationGroup.config.type;
+        this.passes = true;
     }
 
-    if (!Validator.Types.includes(validationGroup.config.type)) {
-        throw new DOMException(`${validationGroup.config.type} is not supported by validator`);
+    /**
+     * Build new validation object on vNode element
+     *
+     * @param element
+     * @param binding
+     * @param node
+     * @param eventType
+     */
+    static build(element, binding, node, eventType = 'blur') {
+        const input = element.querySelector('input');
+        const messageElement = document.createElement('div');
+        const identifier = `dd-validation-${input.getAttribute('name')}`;
+
+        messageElement.setAttribute('id', identifier);
+        messageElement.classList.add('sw-field__error');
+        messageElement.style.visibility = 'hidden';
+
+        element.appendChild(messageElement);
+
+        input.addEventListener(eventType, event => Validator.handleValidationEvent(event));
+
+        Validator.addGroup(identifier, {
+            parent: element,
+            node: node,
+            config: binding.value,
+        });
     }
 
-    this.identifier = identifier;
-    this.vNode = validationGroup.node;
-    this.expression = validationGroup.node.data.model.expression;
-    this.parent = validationGroup.parent;
-    this.message = validationGroup.config.message;
-    this.type = validationGroup.config.type;
-    this.passes = true;
-}
-
-/**
- * Build new validation object on vNode element
- *
- * @param element
- * @param binding
- * @param node
- * @param eventType
- */
-static build(element, binding, node, eventType = 'blur') {
-    const input = element.querySelector('input');
-    const messageElement = document.createElement('div');
-    const identifier = `dd-validation-${input.getAttribute('name')}`;
-
-    messageElement.setAttribute('id', identifier);
-    messageElement.classList.add('sw-field__error');
-    messageElement.style.visibility = 'hidden';
-
-    element.appendChild(messageElement);
-
-    input.addEventListener(eventType, event => Validator.handleValidationEvent(event));
-
-    Validator.addGroup(identifier, {
-        parent: element,
-        node: node,
-        config: binding.value,
-    });
-}
-
-/**
- * Add group to repository
- *
- * @param identifier
- * @param data
- */
-static addGroup(identifier, data) {
-    DDValidationRepository.set(identifier, data);
-}
-
-/**
- * Get group from repository
- *
- * @param identifier
- * @returns {any}
- */
-static getGroup(identifier) {
-    return DDValidationRepository.get(identifier);
-}
-
-/**
- * Emit validation results
- *
- * @param data
- */
-emitValidationResults(data) {
-    const handlers = (this.vNode.data && this.vNode.data.on) ||
-        (this.vNode.componentOptions && this.vNode.componentOptions.listeners);
-
-    if (handlers && handlers['dd-validation']) {
-        handlers['dd-validation'].fns(data);
+    /**
+     * Add group to repository
+     *
+     * @param identifier
+     * @param data
+     */
+    static addGroup(identifier, data) {
+        DDValidationRepository.set(identifier, data);
     }
-}
 
-/**
- * Hande a validation run event
- *
- * @param event
- */
-static handleValidationEvent(event, passive = false) {
-    const identifier = `dd-validation-${event.target.getAttribute('name')}`;
-    const validator = new Validator(identifier);
-    const messageContainer = document.getElementById(identifier);
-
-    messageContainer.style.visibility = 'hidden';
-    messageContainer.innerText = '';
-    validator.parent.classList.remove('has--error');
-
-    if (!validator.validate() && !passive) {
-        validator.parent.classList.add('has--error');
-        messageContainer.style.visibility = 'visible';
-        messageContainer.innerText = validator.message;
+    /**
+     * Get group from repository
+     *
+     * @param identifier
+     * @returns {any}
+     */
+    static getGroup(identifier) {
+        return DDValidationRepository.get(identifier);
     }
-}
 
-/**
- * Valid value
- *
- * @returns {boolean}
- */
-validate() {
-    const value = this.vNode.componentInstance.currentValue;
-    const isNumber = Number.isNaN(Number(value));
-    switch (this.type) {
-        case 'number':
-            this.passes = !(!value || /^\s*$/.test(value)) && !isNumber && value > 0;
-            break;
-        case 'required':
-            this.passes = !(!value || /^\s*$/.test(value));
-            break;
-        default:
-            break;
+    /**
+     * Emit validation results
+     *
+     * @param data
+     */
+    emitValidationResults(data) {
+        const handlers = (this.vNode.data && this.vNode.data.on) ||
+            (this.vNode.componentOptions && this.vNode.componentOptions.listeners);
+
+        if (handlers && handlers['dd-validation']) {
+            handlers['dd-validation'].fns(data);
+        }
     }
 
-    this.emitValidationResults({
-        key: this.expression,
-        error: this.message,
-        passes: this.passes,
-    });
+    /**
+     * Hande a validation run event
+     *
+     * @param event
+     */
+    static handleValidationEvent(event, passive = false) {
+        const identifier = `dd-validation-${event.target.getAttribute('name')}`;
+        const validator = new Validator(identifier);
+        const messageContainer = document.getElementById(identifier);
+
+        messageContainer.style.visibility = 'hidden';
+        messageContainer.innerText = '';
+        validator.parent.classList.remove('has--error');
+
+        if (!validator.validate() && !passive) {
+            validator.parent.classList.add('has--error');
+            messageContainer.style.visibility = 'visible';
+            messageContainer.innerText = validator.message;
+        }
+    }
 
-    return this.passes;
-}
+    /**
+     * Valid value
+     *
+     * @returns {boolean}
+     */
+    validate() {
+        const value = this.vNode.componentInstance.currentValue;
+        const isNumber = Number.isNaN(Number(value));
+        switch (this.type) {
+            case 'number':
+                this.passes = !(!value || /^\s*$/.test(value)) && !isNumber && value > 0;
+                break;
+            case 'required':
+                this.passes = !(!value || /^\s*$/.test(value));
+                break;
+            default:
+                break;
+        }
+
+        this.emitValidationResults({
+            key: this.expression,
+            error: this.message,
+            passes: this.passes,
+        });
+
+        return this.passes;
+    }
 }
 
 Directive.register('dd-validate', {
-/**
- * Initialize the validation once it has been inserted to the DOM.
- * @param el
- * @param binding
- * @param node
- */
+    /**
+     * Initialize the validation once it has been inserted to the DOM.
+     * @param el
+     * @param binding
+     * @param node
+     */
     inserted: (el, binding, node) => Validator.build(el, binding, node, 'blur'),
 });