Aurelia Observer Test + evaluate

app.html

<template>
  <require from="./binding-intercept"></require>
  <binding-intercept-example if.bind="show"></binding-intercept-example>
</template>

app.js

export class App {
  show = true;
  
  // constructor() {
  //   setInterval(() => this.show = !this.show, 2000);
  // }
}

binding-intercept.html

<template>
  <p>Promise Binding: ${somePromise + ' test'} <button click.delegate="changePromise()">Change Promise</button></p>
  
  <br/><br/>
  <p>Obj Promise Binding (work in progress): ${someObjPromise.value}</p>
  
  <br/><br/>
  <p>Timer Binding: ${someTimer}</p>
  
  <br/><br/>
  Two Way Binding (see console):<br/>
  <input value.bind="firstName">
  <button click.delegate="changeFirstName()">Change Name to Bazyli</button>
</template>

binding-intercept.js

export class BindingInterceptExample {
  @bindingIntercept(promiseBinding)
  somePromise = new Promise(resolve => setTimeout(() => resolve('Hello!'), 2000));
  
  changePromise() {
    this.somePromise = new Promise(resolve => setTimeout(() => resolve('Awesome!'), 2000));
  }
  
  @bindingIntercept(promiseBinding)
  someObjPromise = new Promise(resolve => setTimeout(() => resolve({value: 'Obj Promise!'}), 2000));
  
  @bindingIntercept(timer) someTimer;
  
  @bindingIntercept(twoWayIntercept) firstName = 'Rob';
  
  changeFirstName() {
    this.firstName = 'Bazyli';
  }
}

function promiseBinding(promise, bindingValueSetter) {
  bindingValueSetter(undefined); // by default let's set undefined
  promise.then(value => bindingValueSetter(value));
}

function timer(any, bindingValueSetter) {
  let i = 0;
  let timer = setInterval(() => bindingValueSetter(i++), 1000);
  return {
    dispose: () => clearInterval(timer)
  }
}

function twoWayIntercept(value, bindingValueSetter) {
  console.log('ViewModel changed value to:', value);
  bindingValueSetter(value);
  
  return {
    next: (value) => {
      console.log('View changed value to:', value)
    }
  }
}

function bindingIntercept(interceptor) {
  return function interception(definition, propertyName, descriptor) {
    let viewModelValue = descriptor.initializer && descriptor.initializer();
    
    let observersBound = new Set();
    
    function getBindingValueSetter(observer) {
      return function (value) {
        if (observer.binding && observer.lastValue !== value) {
          observer.lastValue = value;
          observer.binding.call('Binding:source');
        }
      }
    }
    
    function updateObservers() {
      for (let observer of observersBound) {
        if (observer.interceptorInstance.dispose)
          observer.interceptorInstance.dispose();
        observer.interceptorInstance = interceptor(viewModelValue, getBindingValueSetter(observer)) || {};
        observer.binding.call('Binding:source');
      }
    }
    
    const observableGetter = function() { return viewModelValue; }

    observableGetter.getObserver = function(targetClass) {
      return {
        subscribe: function(context, binding) {
          this.lastValue = undefined;
          
          this.interceptorInstance = interceptor(viewModelValue, getBindingValueSetter(this)) || {};

          // NOTE: this should be the assign and evaluate methods of the AccessScope, not the whole Binding Expression
          console.log(binding.sourceExpression);
          binding.sourceExpression.assign = (scope, value) => {
            // assignement coming from View
            if (this.interceptorInstance.next)
              this.interceptorInstance.next(value);
          }
          binding.sourceExpression.evaluate = (scope, lookupFunctions) => {
            return this.lastValue;
          }
          
          this.binding = binding;
          observersBound.add(this);
        },
        unsubscribe: function(context, binding) {
          if (this.interceptorInstance.dispose)
            this.interceptorInstance.dispose();
          observersBound.delete(this);
        }
      }
    }
    
    delete descriptor.writable;
    delete descriptor.initializer;
    
    Object.defineProperty(descriptor, 'set', {
      value: function (newViewModelValue) {
        // assignement coming from ViewModel:
        viewModelValue = newViewModelValue;
        updateObservers();
      }
    });
    Object.defineProperty(descriptor, 'get', {
      value: observableGetter
    });
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

two-way-test.js

export function twoWayExample(definition, propertyName, descriptor) {
  let val = descriptor.initializer && descriptor.initializer();
  let bindingsBound = new Set();
  
  const observableGetter = function() {
    return val;
  }

  observableGetter.getObserver = function(targetClass) {
    return {
      subscribe: function(context, binding) {
        bindingsBound.add(binding);
        binding.updateTarget(val);
        console.log('subscribed', this, targetClass, binding);
        binding.sourceExpression.assign = function(scope, value) {
          // assignement coming from View
          console.log('View set:', value);
          val = value;
        }
      },
      unsubscribe: function(context, binding) {
        bindingsBound.delete(binding);
      }
    }
  }
  
  delete descriptor.writable;
  delete descriptor.initializer;
  
  Object.defineProperty(descriptor, 'set', {
    value: function (value) {
      // assignement coming from ViewModel:
      val = value;
      // update bindings
      for (let binding of bindingsBound) {
        binding.updateTarget(value);
      }
      console.log('ViewModel set:', value);
    }
  });
  Object.defineProperty(descriptor, 'get', {
    value: observableGetter
  });
  
  return descriptor;
}