[Proposal] Enhance Html only element

[bigopon]

I'm submitting a feature request

• Library Version:
  1.4.0

Current behavior:
Currently, one can only define html only element in following way:

<!-- Globally available -->
<!-- my-input.html -->
<template bindable='name, value'>
  <label>
    ${name}
    <input value.bind='value' />
  </label>
</template>

<!-- app.html -->
<template>
  <my-input value.two-way='appInputValue' name.bind='appInputLabel' />
</template>

Binding mode has to be specified whenever my-input is consumed.

Desired behavior:

Ability to define binding mode in html only element definition, in following syntax:

bindable = [prop] & [bindingMode = oneWay]

Example:

<!-- my-input.html -->
<template bindable='value & twoWay, name'>
  <label>
    ${name}
    <input value.bind='value' />
  </label>
</template>

<!-- app.html -->
<template>
  <my-input value.bind='appInputValue' name.bind='appInputLabel' />
</template>

Breaking changes: none. As user needs to define bindingMode explicitly otherwise resolves to oneWay, which is the current behavior.

Changes require

In dynamic-element.js.

/*eslint padded-blocks:0*/
import {useView, customElement, bindable} from 'aurelia-templating';
import {bindingMode} from 'aurelia-binding'; // <------- new

export function _createDynamicElement(name: string, viewUrl: string, bindableNames: string[]): Function {
  @customElement(name)
  @useView(viewUrl)
  class DynamicElement {
    bind(bindingContext) {
      this.$parent = bindingContext;
    }
  }
  for (let i = 0, ii = bindableNames.length; i < ii; ++i) {
    let parts = bindableName[i].split('&');
    let config;
    if (parts.length === 2) {
      config = {
        name: parts[0].trim(),
        defaultBindingModel: parts[1].trim()
      }
    } else {
      config = parts[0].trim();
    }
    bindable(config)(DynamicElement);
  }
  return DynamicElement;
}

Further enhancements

Syntax could be extended to also support notifying changes via event. This is to support common pattern prop-down event up

bindable = [prop] ^ [event-to-dispatch-to-notify-change] & [bindingMode = oneWay]

example:

<!-- my-input.html -->
<template bindable='value ^ valueChanged, name'>
  <label>
    ${name}
    <input value.bind='value' />
  </label>
</template>

<!-- app.html -->
<template>
  <my-input value.bind='appInputValue' name.bind='appInputLabel' valueChanged.trigger='inputChanged($event.detail)' />
</template>

Draft implementation: Gist;

• What is the motivation / use case for changing the behavior?

This enhancement, followed by let element for declaration, will make development in Aurelia truly pleasure experience.

cc @EisenbergEffect @jdanyow

[EisenbergEffect]

What do you think about enabling type coercion as well? e.g. value:int & twoWay. I'd be interested in doing that before thinking about the event scenario. Thoughts?

[bigopon]

It works well when you don't bind it to any prop that automatically coerce value to string [update: see comment of decorator-observable PR]. (such as input's value)

I haven't been able to solve the problem of different value between property & input when doing type coercion.

example:

<template bindable='num:number & twoWay'>
  <input type='number' value.bind='num' />
</template>

After updating view model num, a number as newValue will be thrown back to input value observer, which will trigger update again... (Which is also the issue I currently have with type coercion in @bindable and @observable. @EisenbergEffect

[bigopon]

@EisenbergEffect on a second thought, I think we can solve it by modifying class ValueAttributeObserver

class ValueAttributeObserver {
  constructor(element, propertyName, handler, hasCoercce) { // <=== hasCoerce new
    this.element = element;
    this.propertyName = propertyName;
    this.handler = handler;
    this.hasCoerce = hasCoerce;
    if (propertyName === 'files') {
      // input.files cannot be assigned.
      this.setValue = () => {};
    }
  }
  }

Base on this, the hasCoerce will be passed base on the binding expression. so in its setValue

  setValue(newValue) {
    let currentValue = this.element[this.propertyName];
    currentValue = this.hasCoerce ? coerce(currentValue) : currentValue;
    newValue = newValue === undefined || newValue === null ? '' : newValue;
    if (currentValue !== newValue) {
      this.element[this.propertyName] = newValue;
      this.notify();
    }
  }

Update: There could also be potential conflict with coerce, consider the following example:

export class ViewModel {
  @bindable({ coerce: 'boolean' }) prop
  // Or even simple like this
  @bindable prop // coerce or not ?
}

<template>
  <input value.bind='prop:int' />
</template>

How would we decide the right type ?

[bigopon]

the main PR that makes this compelling was closed, and enabled in plugin form. If anyone interested in this feature, please discuss at https://github.com/aurelia-contrib/aurelia-typed-observable-plugin