feat(BindableProperty): Reflect prop to attribute

src/bindable-property.js

@@ -35,7 +35,13 @@ export class BindableProperty {
   * Creates an instance of BindableProperty.
   * @param nameOrConfig The name of the property or a cofiguration object.
   */
-  constructor(nameOrConfig: string | Object) {
+  constructor(nameOrConfig: string | {
+    defaultBindingMode?: number,
+    reflect?: boolean | {(el: Element, name: string, newVal, oldVal): any},
+    name?: string,
+    attribute?: any,
+    changeHandler?: string
+  }) {
     if (typeof nameOrConfig === 'string') {
       this.name = nameOrConfig;
     } else {
@@ -58,17 +64,55 @@ export class BindableProperty {
   * @param descriptor The property descriptor for this property.
   */
   registerWith(target: Function, behavior: HtmlBehaviorResource, descriptor?: Object): void {
+    let { reflect } = this;
     behavior.properties.push(this);
     behavior.attributes[this.attribute] = this;
     this.owner = behavior;
 
+    if (reflect) {
+      behavior._registerReflection(this.name, typeof reflect === 'function' ? reflect : propToAttr);
+      this._configureReflection(target);
+    }
+
     if (descriptor) {
       this.descriptor = descriptor;
       return this._configureDescriptor(descriptor);
     }
 
     return undefined;
   }
+
+  _configureReflection(target) {
+    if (target.__reflectionConfigured__) return;
+
+    let method = 'propertyChanged';
+    let onChanged = target.prototype[method];
+    let hasHandler = !!onChanged;
+
+    let alteredHandler;
+    if (hasHandler) { // avoid ternary to make it consisten with the rest ?
+      alteredHandler = function propertyChanged(name, newVal, oldVal) {
+        onChanged.call(this, name, newVal, oldVal);
+        let { __element__, __reflections__ } = this.__observers__;
+        if (!__element__) return;
+        __reflections__[name].call(this, __element__, name, newVal, oldVal)
+      }
+    } else {
+      alteredHandler = function propertyChanged(name, newVal, oldVal) {
+        let { __element__, __reflections__ } = this.__observers__;
+        if (!__element__) return;
+        __reflections__[name].call(this, __element__, name, newVal, oldVal);
+      }
+    }
+
+    if (!Reflect.defineProperty(target.prototype, method, {
+      configurable: true,
+      value: alteredHandler
+    })) {
+      throw new Error(`Cannot setup property reflection on <${this.name}/> for ${target.name}`);
+    };
+    target.__reflectionConfigured__ = true;
+  }
 
   _configureDescriptor(descriptor: Object): Object {
     let name = this.name;
@@ -248,3 +292,18 @@ export class BindableProperty {
     observer.selfSubscriber = selfSubscriber;
   }
 }
+
+/**
+ * @private
+ * Used for avoid creating mapping function multiple times
+ * @param {Element} element 
+ * @param {string} propertyName 
+ * @param {any} newValue 
+ */
+function propToAttr(element, propertyName, newValue) {
+  if (newValue == null) {
+    element.removeAttribute(propertyName);
+  } else {
+    element.setAttribute(propertyName, newValue);
+  }
+}

src/html-behavior.js

@@ -330,6 +330,10 @@ export class HtmlBehaviorResource {
     let childBindings = this.childBindings;
     let viewFactory;
 
+    if (element !== null) {
+      this._setupReflections(element, viewModel);
+    }
+
     if (this.liftsContent) {
       //template controller
       au.controller = controller;
@@ -401,6 +405,33 @@ export class HtmlBehaviorResource {
     return controller;
   }
 
+  /**
+   * Allow a bindable property on custom element to register how to reflect prop value to attribute
+   * @param {string} propertyName 
+   * @param {{(element: Element, name: string, newVal, oldVal) => any}} instruction A function with suitable parameters to react for setting attribute on the element
+   */
+  _registerReflection(propertyName, instruction) {
+    let reflections = this.reflections || (this.reflections = {});
+    if (propertyName in reflections) {
+      throw new Error(`Reflection for ${propertyName} was already registered`);
+    }
+    if (typeof instruction !== 'function') {
+      throw new Error('Invalid reflection instruction');
+    }
+    reflections[propertyName] = instruction;
+  }
+
+  /**
+   * @param {Element} element 
+   * @param {object} viewModel 
+   */
+  _setupReflections(element, viewModel) {
+    if (!this.reflections) return;
+    let lookup = this.observerLocator.getOrCreateObserversLookup(viewModel);
+    lookup.__reflections__ = this.reflections;
+    lookup.__element__ = element;
+  }
+
   _ensurePropertiesDefined(instance: Object, lookup: Object) {
     let properties;
     let i;

src/view-factory.js

@@ -104,6 +104,10 @@ function setAttribute(name, value) {
   this._element.setAttribute(name, value);
 }
 
+function removeAttribute(name) {
+  this._element.removeAttribute(name);
+}
+
 function makeElementIntoAnchor(element, elementInstruction) {
   let anchor = DOM.createComment('anchor');
 
@@ -119,6 +123,7 @@ function makeElementIntoAnchor(element, elementInstruction) {
     anchor.hasAttribute = hasAttribute;
     anchor.getAttribute = getAttribute;
     anchor.setAttribute = setAttribute;
+    anchor.removeAttribute = removeAttribute;
   }
 
   DOM.replaceNode(anchor, element);

test/html-behavior.spec.js

@@ -3,6 +3,7 @@ import {Container} from 'aurelia-dependency-injection';
 import {ObserverLocator, bindingMode} from 'aurelia-binding';
 import {TaskQueue} from 'aurelia-task-queue';
 import {HtmlBehaviorResource} from '../src/html-behavior';
+import {BindableProperty} from '../src/bindable-property';
 import {ViewResources} from '../src/view-resources';
 
 describe('html-behavior', () => {
@@ -58,4 +59,26 @@ describe('html-behavior', () => {
 
     expect(resource.attributes['test'].defaultBindingMode).toBe(bindingMode.twoWay);
   });
+
+  describe('Prop to attribute reflection', () => {
+    it('should have reflections when bindable properties are registered with `reflect`', () => {
+      let resource = new HtmlBehaviorResource();
+      let Target = class {};
+
+      var prop1 = new BindableProperty({
+        reflect: true,
+        name: 'prop1'
+      });
+      prop1.registerWith(Target, resource);
+
+      var prop2 = new BindableProperty({
+        reflect() {},
+        name: 'prop2'
+      });
+      prop2.registerWith(Target, resource);
+
+      expect(typeof resource.reflections.prop1).toBe('function');
+      expect(resource.reflections.prop2).toBe(prop2.reflect);
+    });
+  });
 });