davismj/app.html

## app.html
<template>
  <style>
    label {display: block; padding: 4px 0;}
  </style>

  <hr/>
  <label>
    First Name: <input value.bind='firstName' />
  </label>
  <label>
    Last name: <input value.bind='lastName' />
  </label>
  <br/>
  <div repeat.for='country of countries' style='padding: 5px 0;'>
    <button>${showWelcomeMessage(country, firstName, lastName)}</button>
  </div>
  <hr/>
</template>

## app.js
import {computedFrom} from './computed-from';

export class App {

  countries = ['us', 'aus', 'coconut'];

  firstName = 'Crab'
  lastName = 'Fox'

  showWelcomeMessage(country, firstName, lastName) {
    return `${messages[country].hello} to ${firstName} ${this.lastName}`;
  }
}
const messages = {
  us: {
    hello: 'Hello '
  },
  aus: {
    hello: 'G\'day '
  },
  coconut: {
    hello: 'Coconut'
  }
}

## call-scope.js
import {
  CallScope
} from 'aurelia-framework';

/**
 * @param {Binding} binding
 * @param {Scope} scope
 */
CallScope.prototype.connect = function(binding, scope) {
  let context = getContextFor(this.name, scope, this.ancestor);
  let func = getFunction(context, this.name, false);
  if (func && func.dependencies) {
    /**@type {string[] | Expression[]} */
    let dependencies = func.dependencies;
    let i = dependencies.length;
    while (i--) {
      let dependency = dependencies[i];
      if (typeof dependency === 'string') {
        dependency = dependencies[i] = binding.observerLocator.parser.parse(dependency);
      }
      dependency.connect(binding, scope);
    }
  }
  let args = this.args;
  let i = args.length;
  while (i--) {
    args[i].connect(binding, scope);
  }
}

function getFunction(obj, name, mustExist) {
  let func = obj === null || obj === undefined ? null : obj[name];
  if (typeof func === 'function') {
    return func;
  }
  if (!mustExist && (func === null || func === undefined)) {
    return null;
  }
  throw new Error(`${ name } is not a function`);
}

function getContextFor(name, scope, ancestor) {
  let oc = scope.overrideContext;

  if (ancestor) {
    while (ancestor && oc) {
      ancestor--;
      oc = oc.parentOverrideContext;
    }
    if (ancestor || !oc) {
      return undefined;
    }
    return name in oc ? oc : oc.bindingContext;
  }

  while (oc && !(name in oc) && !(oc.bindingContext && name in oc.bindingContext)) {
    oc = oc.parentOverrideContext;
  }
  if (oc) {
    return name in oc ? oc : oc.bindingContext;
  }

  return scope.bindingContext || scope.overrideContext;
}

## computed-from.js
import './call-scope';

export function computedFrom(...rest) {
  return deco;
  /**
   * @param {Function} target
   * @param {string} key
   * @param {PropertyDescriptor} descriptor
   */
  function deco(target, key, descriptor) {
    const realTarget = key === undefined ? target : target.constructor;
    if (descriptor === undefined
      || (descriptor.get === undefined && descriptor.value === undefined)
    ) {
      throw new Error(`Cannot place 'computedFrom' on property '${key}' for '${realTarget.name}'. No getter or method found. Is it on a normal class field ?`);
    }
    // decorator on method
    if (descriptor.get === undefined) {
      descriptor.value.dependencies = rest;
    } else { // decorator on getter
      descriptor.get.dependencies = rest;
    }
    return descriptor;
  };
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
      body {
        padding: 20px;
      }
      .form-component {
        display: block;
        margin-bottom: 20px;
      }
    </style>
  </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>
	<template>
	<style>
	label {display: block; padding: 4px 0;}
	</style>

	<hr/>
	<label>
	First Name: <input value.bind='firstName' />
	</label>
	<label>
	Last name: <input value.bind='lastName' />
	</label>
	<br/>
	<div repeat.for='country of countries' style='padding: 5px 0;'>
	<button>${showWelcomeMessage(country, firstName, lastName)}</button>
	</div>
	<hr/>
	</template>
	import {computedFrom} from './computed-from';

	export class App {

	countries = ['us', 'aus', 'coconut'];

	firstName = 'Crab'
	lastName = 'Fox'

	showWelcomeMessage(country, firstName, lastName) {
	return `${messages[country].hello} to ${firstName} ${this.lastName}`;
	}
	}
	const messages = {
	us: {
	hello: 'Hello '
	},
	aus: {
	hello: 'G\'day '
	},
	coconut: {
	hello: 'Coconut'
	}
	}
	import {
	CallScope
	} from 'aurelia-framework';

	/**
	* @param {Binding} binding
	* @param {Scope} scope
	*/
	CallScope.prototype.connect = function(binding, scope) {
	let context = getContextFor(this.name, scope, this.ancestor);
	let func = getFunction(context, this.name, false);
	if (func && func.dependencies) {
	/*@type {string[] \| Expression[]} /
	let dependencies = func.dependencies;
	let i = dependencies.length;
	while (i--) {
	let dependency = dependencies[i];
	if (typeof dependency === 'string') {
	dependency = dependencies[i] = binding.observerLocator.parser.parse(dependency);
	}
	dependency.connect(binding, scope);
	}
	}
	let args = this.args;
	let i = args.length;
	while (i--) {
	args[i].connect(binding, scope);
	}
	}

	function getFunction(obj, name, mustExist) {
	let func = obj === null \|\| obj === undefined ? null : obj[name];
	if (typeof func === 'function') {
	return func;
	}
	if (!mustExist && (func === null \|\| func === undefined)) {
	return null;
	}
	throw new Error(`${ name } is not a function`);
	}

	function getContextFor(name, scope, ancestor) {
	let oc = scope.overrideContext;

	if (ancestor) {
	while (ancestor && oc) {
	ancestor--;
	oc = oc.parentOverrideContext;
	}
	if (ancestor \|\| !oc) {
	return undefined;
	}
	return name in oc ? oc : oc.bindingContext;
	}

	while (oc && !(name in oc) && !(oc.bindingContext && name in oc.bindingContext)) {
	oc = oc.parentOverrideContext;
	}
	if (oc) {
	return name in oc ? oc : oc.bindingContext;
	}

	return scope.bindingContext \|\| scope.overrideContext;
	}
	import './call-scope';

	export function computedFrom(...rest) {
	return deco;
	/**
	* @param {Function} target
	* @param {string} key
	* @param {PropertyDescriptor} descriptor
	*/
	function deco(target, key, descriptor) {
	const realTarget = key === undefined ? target : target.constructor;
	if (descriptor === undefined
	\|\| (descriptor.get === undefined && descriptor.value === undefined)
	) {
	throw new Error(`Cannot place 'computedFrom' on property '${key}' for '${realTarget.name}'. No getter or method found. Is it on a normal class field ?`);
	}
	// decorator on method
	if (descriptor.get === undefined) {
	descriptor.value.dependencies = rest;
	} else { // decorator on getter
	descriptor.get.dependencies = rest;
	}
	return descriptor;
	};
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<style>
	body {
	padding: 20px;
	}
	.form-component {
	display: block;
	margin-bottom: 20px;
	}
	</style>
	</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>