From 5e7fcf9fa84d6552dc1a10eaa2992610bb566573 Mon Sep 17 00:00:00 2001
From: Rob Barber <robarb@microsoft.com>
Date: Mon, 7 Dec 2020 09:08:13 -0800
Subject: [PATCH] Automatically updating proxy on attribute changes

---
 .../fast-element/src/attributes.ts            |  6 ++-
 .../src/observation/observable.ts             |  4 ++
 .../fast-foundation/src/button/button.ts      | 29 -----------
 .../fast-foundation/src/checkbox/checkbox.ts  | 14 +-----
 .../src/form-associated/form-associated.ts    | 44 ++++++----------
 .../src/listbox-option/listbox-option.ts      | 27 +++-------
 .../fast-foundation/src/radio/radio.ts        |  9 ----
 .../fast-foundation/src/slider/slider.ts      | 20 +-------
 .../fast-foundation/src/switch/switch.ts      |  8 ---
 .../src/text-area/text-area.ts                | 30 -----------
 .../src/text-field/text-field.ts              | 50 +++----------------
 11 files changed, 41 insertions(+), 200 deletions(-)

diff --git a/packages/web-components/fast-element/src/attributes.ts b/packages/web-components/fast-element/src/attributes.ts
index 6c6ed79d7ab..a5d02d1c89a 100644
--- a/packages/web-components/fast-element/src/attributes.ts
+++ b/packages/web-components/fast-element/src/attributes.ts
@@ -175,7 +175,7 @@ export class AttributeDefinition implements Accessor {
      * @param source - The source element to access.
      * @param value - The value to set the attribute/property to.
      */
-    public setValue(source: HTMLElement, newValue: any): void {
+    public setValue(source: any, newValue: any): void {
         const oldValue = source[this.fieldName];
         const converter = this.converter;
 
@@ -192,6 +192,10 @@ export class AttributeDefinition implements Accessor {
                 source[this.callbackName](oldValue, newValue);
             }
 
+            if (source.updateProxy) {
+                source.updateProxy(this.name, newValue);
+            }
+
             ((source as any).$fastController as Notifier).notify(this.name);
         }
     }
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index d5a65d94882..3aaf408b32a 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -63,6 +63,10 @@ class DefaultObservableAccessor implements Accessor {
                 callback.call(source, oldValue, newValue);
             }
 
+            if (source.updateProxy) {
+                source.updateProxy(this.name, newValue);
+            }
+
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
             getNotifier(source).notify(this.name);
         }
diff --git a/packages/web-components/fast-foundation/src/button/button.ts b/packages/web-components/fast-foundation/src/button/button.ts
index 2b971f11dcd..f157ebc2266 100644
--- a/packages/web-components/fast-foundation/src/button/button.ts
+++ b/packages/web-components/fast-foundation/src/button/button.ts
@@ -39,11 +39,6 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formaction: string;
-    private formactionChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.formAction = this.formaction;
-        }
-    }
 
     /**
      * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
@@ -54,11 +49,6 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formenctype: string;
-    private formenctypeChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.formEnctype = this.formenctype;
-        }
-    }
 
     /**
      * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
@@ -69,11 +59,6 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formmethod: string;
-    private formmethodChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.formMethod = this.formmethod;
-        }
-    }
 
     /**
      * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
@@ -84,11 +69,6 @@ export class Button extends FormAssociatedButton {
      */
     @attr({ mode: "boolean" })
     public formnovalidate: boolean;
-    private formnovalidateChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.formNoValidate = this.formnovalidate;
-        }
-    }
 
     /**
      * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
@@ -99,11 +79,6 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formtarget: "_self" | "_blank" | "_parent" | "_top";
-    private formtargetChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.formTarget = this.formtarget;
-        }
-    }
 
     /**
      * The button type.
@@ -118,10 +93,6 @@ export class Button extends FormAssociatedButton {
         previous: "submit" | "reset" | "button" | void,
         next: "submit" | "reset" | "button"
     ): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.type = this.type;
-        }
-
         next === "submit" && this.addEventListener("click", this.handleSubmission);
         previous === "submit" && this.removeEventListener("click", this.handleSubmission);
         next === "reset" && this.addEventListener("click", this.handleFormReset);
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
index 3b7c17e744b..b01248cc595 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
@@ -17,11 +17,6 @@ export class Checkbox extends FormAssociatedCheckbox {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
 
     /**
      * The element's value to be included in form submission when checked.
@@ -81,16 +76,11 @@ export class Checkbox extends FormAssociatedCheckbox {
             this.dirtyChecked = true;
         }
 
-        this.updateForm();
-
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.checked = this.checked;
-        }
-
         if (this.constructed) {
             this.$emit("change");
         }
 
+        this.updateForm();
         this.validate();
     }
 
@@ -124,7 +114,7 @@ export class Checkbox extends FormAssociatedCheckbox {
     public connectedCallback(): void {
         super.connectedCallback();
 
-        this.proxy.setAttribute("type", "checkbox");
+        this.updateProxy("type", "checkbox");
 
         this.updateForm();
     }
diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
index 38dcf4b1aed..cc65dd3040a 100644
--- a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
@@ -290,10 +290,6 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
         public valueChanged(previous: string, next: string) {
             this.dirtyValue = true;
 
-            if (this.proxy instanceof HTMLElement) {
-                this.proxy.value = this.value;
-            }
-
             this.setFormValue(this.value);
             this.validate();
         }
@@ -347,10 +343,6 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
          * proper functioning of `FormAssociated`
          */
         public disabledChanged(previous: boolean, next: boolean): void {
-            if (this.proxy instanceof HTMLElement) {
-                this.proxy.disabled = this.disabled;
-            }
-
             DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
         }
 
@@ -362,23 +354,6 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
          */
         public name: string;
 
-        /**
-         * Invoked when the `name` property changes
-         *
-         * @param previous - the previous value
-         * @param next - the new value
-         *
-         * @remarks
-         * If elements extending `FormAssociated` implement a `nameChanged` method
-         * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
-         * proper functioning of `FormAssociated`
-         */
-        public nameChanged(previous, next): void {
-            if (this.proxy instanceof HTMLElement) {
-                this.proxy.name = this.name;
-            }
-        }
-
         /**
          * Require the field to be completed prior to form submission.
          *
@@ -399,10 +374,6 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
          * proper functioning of `FormAssociated`
          */
         public requiredChanged(prev: boolean, next: boolean): void {
-            if (this.proxy instanceof HTMLElement) {
-                this.proxy.required = this.required;
-            }
-
             DOM.queueUpdate(() => this.classList.toggle("required", this.required));
             this.validate();
         }
@@ -568,6 +539,21 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
             this.appendChild(this.proxy);
         }
 
+        /**
+         * Updates attributes on the proxy element
+         * @param name - The name of the attribute to be updated
+         * @param value - The value of the attribute
+         */
+        public updateProxy(name: string, value: any): void {
+            if (this.proxy instanceof HTMLElement) {
+                if (value === null || value === false) {
+                    this.proxy.removeAttribute(name);
+                } else {
+                    this.proxy.setAttribute(name, `${value}`);
+                }
+            }
+        }
+
         /**
          * Detach the proxy element from the DOM
          */
diff --git a/packages/web-components/fast-foundation/src/listbox-option/listbox-option.ts b/packages/web-components/fast-foundation/src/listbox-option/listbox-option.ts
index 66962a3f90f..84a2b2f6907 100644
--- a/packages/web-components/fast-foundation/src/listbox-option/listbox-option.ts
+++ b/packages/web-components/fast-foundation/src/listbox-option/listbox-option.ts
@@ -20,10 +20,6 @@ export class ListboxOption extends FASTElement {
     protected defaultSelectedChanged(): void {
         if (!this.dirtySelected) {
             this.selected = this.defaultSelected;
-
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.defaultSelected;
-            }
         }
     }
 
@@ -41,11 +37,6 @@ export class ListboxOption extends FASTElement {
      */
     @attr({ mode: "boolean" })
     public disabled: boolean;
-    protected disabledChanged(prev, next): void {
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.disabled = this.disabled;
-        }
-    }
 
     /**
      * The selected attribute value. This sets the initial selected value.
@@ -58,10 +49,6 @@ export class ListboxOption extends FASTElement {
     public selectedAttribute: boolean;
     protected selectedAttributeChanged(): void {
         this.defaultSelected = this.selectedAttribute;
-
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.defaultSelected = this.defaultSelected;
-        }
     }
 
     /**
@@ -77,10 +64,6 @@ export class ListboxOption extends FASTElement {
                 this.dirtySelected = true;
             }
 
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.selected;
-            }
-
             this.$emit("change");
         }
     }
@@ -120,16 +103,18 @@ export class ListboxOption extends FASTElement {
     public value: string;
     public valueChanged(previous: string, next: string) {
         this.dirtyValue = true;
-
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.value = this.value;
-        }
     }
 
     public get form(): HTMLFormElement | null {
         return this.proxy ? this.proxy.form : null;
     }
 
+    public updateProxy(name: string, value: any): void {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy[name] = value;
+        }
+    }
+
     public constructor(
         text?: string,
         value?: string,
diff --git a/packages/web-components/fast-foundation/src/radio/radio.ts b/packages/web-components/fast-foundation/src/radio/radio.ts
index 1c7e8552011..9553eb6b603 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.ts
@@ -26,11 +26,6 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
 
     /**
      * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
@@ -102,10 +97,6 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
 
             this.updateForm();
 
-            if (this.proxy instanceof HTMLElement) {
-                this.proxy.checked = this.checked;
-            }
-
             this.$emit("change");
 
             this.validate();
diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
index f0b3a9b4712..4078235eb94 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -49,12 +49,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
      * HTML Attribute: readonly
      */
     @attr({ attribute: "readonly", mode: "boolean" })
-    public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
+    public readOnly: boolean;
 
     /**
      * @internal
@@ -145,11 +140,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     @attr({ converter: nullableNumberConverter })
     public min: number = 0; // Map to proxy element.
     private minChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.min = `${this.min}`;
-        }
-
-        this.validate;
+        this.validate();
     }
 
     /**
@@ -163,9 +154,6 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     @attr({ converter: nullableNumberConverter })
     public max: number = 10; // Map to proxy element.
     private maxChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.max = `${this.max}`;
-        }
         this.validate();
     }
 
@@ -179,10 +167,6 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     @attr({ converter: nullableNumberConverter })
     public step: number = 1; // Map to proxy element.
     private stepChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.step = `${this.step}`;
-        }
-
         this.validate();
     }
 
diff --git a/packages/web-components/fast-foundation/src/switch/switch.ts b/packages/web-components/fast-foundation/src/switch/switch.ts
index 8e4b91f7d51..a2f1d79949d 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.ts
@@ -18,10 +18,6 @@ export class Switch extends FormAssociatedSwitch {
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
     private readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-
         this.readOnly
             ? this.classList.add("readonly")
             : this.classList.remove("readonly");
@@ -85,10 +81,6 @@ export class Switch extends FormAssociatedSwitch {
 
         this.updateForm();
 
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.checked = this.checked;
-        }
-
         this.$emit("change");
 
         this.checked ? this.classList.add("checked") : this.classList.remove("checked");
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.ts b/packages/web-components/fast-foundation/src/text-area/text-area.ts
index 17306ad6279..20876c4b9ef 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.ts
@@ -21,11 +21,6 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ mode: "boolean" })
     public readOnly: boolean;
-    private readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
 
     /**
      * The resize mode of the element.
@@ -50,11 +45,6 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ mode: "boolean" })
     public autofocus: boolean;
-    private autofocusChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.autofocus = this.autofocus;
-        }
-    }
 
     /**
      * The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id | id} of the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form | form} the element is associated to
@@ -71,11 +61,6 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr
     public list: string;
-    private listChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.setAttribute("list", this.list);
-        }
-    }
 
     /**
      * The maximum number of characters a user can enter.
@@ -85,11 +70,6 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ converter: nullableNumberConverter })
     public maxlength: number;
-    private maxlengthChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.maxLength = this.maxlength;
-        }
-    }
 
     /**
      * The minimum number of characters a user can enter.
@@ -99,11 +79,6 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ converter: nullableNumberConverter })
     public minlength: number;
-    private minlengthChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.minLength = this.minlength;
-        }
-    }
 
     /**
      * The name of the element.
@@ -153,11 +128,6 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ mode: "boolean" })
     public spellcheck: boolean;
-    private spellcheckChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
-    }
 
     /**
      * @internal
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts
index 4f96f5eaf8d..24e31e44d68 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.ts
@@ -22,10 +22,7 @@ export class TextField extends FormAssociatedTextField {
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
     private readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -37,10 +34,7 @@ export class TextField extends FormAssociatedTextField {
     @attr({ mode: "boolean" })
     public autofocus: boolean;
     private autofocusChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.autofocus = this.autofocus;
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -52,11 +46,6 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr
     public placeholder: string;
-    private placeholderChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.placeholder = this.placeholder;
-        }
-    }
 
     /**
      * Allows setting a type or mode of text.
@@ -67,10 +56,7 @@ export class TextField extends FormAssociatedTextField {
     @attr
     public type: TextFieldType = TextFieldType.text;
     private typeChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.type = this.type;
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -82,10 +68,7 @@ export class TextField extends FormAssociatedTextField {
     @attr
     public list: string;
     private listChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.setAttribute("list", this.list);
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -97,10 +80,7 @@ export class TextField extends FormAssociatedTextField {
     @attr({ converter: nullableNumberConverter })
     public maxlength: number;
     private maxlengthChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.maxLength = this.maxlength;
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -112,10 +92,7 @@ export class TextField extends FormAssociatedTextField {
     @attr({ converter: nullableNumberConverter })
     public minlength: number;
     private minlengthChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.minLength = this.minlength;
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -127,10 +104,7 @@ export class TextField extends FormAssociatedTextField {
     @attr
     public pattern: string;
     private patternChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.pattern = this.pattern;
-            this.validate();
-        }
+        this.validate();
     }
 
     /**
@@ -141,11 +115,6 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ converter: nullableNumberConverter })
     public size: number;
-    private sizeChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.size = this.size;
-        }
-    }
 
     /**
      * Sets the width of the element to a specified number of characters.
@@ -155,11 +124,6 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ mode: "boolean" })
     public spellcheck: boolean;
-    private spellcheckChanged(): void {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
-    }
 
     /**
      * @internal