bigopon/app.html

## app.html
<template>
  <require from='./value-converter'></require>
  <require from='./clock.html'></require>

  <div>
    Change locale to
    <div>
      <button
        repeat.for='locale of locales'
        click.delegate='changeLocale(locale.locale)'>${locale.name}</button>
    </div>
  </div>

  <div>
    <h2>Flights</h2>
    <table repeat.for='flight of flights' style='margin-bottom: 15px'>
      <tr>
        <th>
         From ${flight.from}
        </th>
        <th style='width: 10px'></th>
        <th>
          To ${flight.to}
        </th>
      </tr>
      <tr>
        <td>
          <clock time.bind='flight.depart'></clock>
        </td>
        <td style='width: 10px'></td>
        <td>
          <clock time.bind='flight.arrive'></clock>
        </td>
      </tr>
    </table>
  </div>

</template>

## app.js
import './converter-signaler';
import {signalBindings} from './signals'

Array.prototype.random = function() {
  return this[Math.floor(Math.random() * this.length)];
}

export class App {

  locales = [
    { locale: "en-US", name: 'US' },
    { locale: 'en-GB', name: 'UK' },
    { locale: 'ko-KR', name: 'Korean' },
    { locale: 'ar-EG', name: 'Arabic' },
    { locale: 'ja-JP-u-ca-japanese', name: 'Japan' },
    { locale: 'de-DE', name: 'Germany' },
    { locale: 'pt-BR', name: 'Brazil' },
    { locale: 'ru-RU', name: 'Russia' },
    { locale: 'es-ES', name: 'Spain' },
    { locale: 'it-IT', name: 'Italy' },
    { locale: 'zh-CN', name: 'China' },
    { locale: 'zh-HK', name: 'Hong Kong' },
    { locale: 'zh-TW', name: 'Taiwan' }
  ];

  changeLocale(locale) {
    window.currentLocale = locale;
    signalBindings('locale-changed');
  }

  attached() {
    window.app = this;
  }

  flights = [
    { from: 'Los Angeles', to: 'San Fran', depart: new Date(), arrive: addDate(0, 1) },
    { from: 'Melbourne', to: 'Sydney', depart: addDate(0, 2), arrive: addDate(0, 3) },
    { from: 'Hawaii', to: 'Crescent', depart: addDate(0, -1), arrive: addDate(0, 1) }
  ]
}

function addDate(date, number) {
  const d = new Date(date || new Date());
  d.setDate(d.getDate() + number);
  return d;
}


## clock.html
<template bindable='time'
  style='display: inline-block;
    width: 200px;
    padding: 4px 6px;
    border-radius: 10px;
    border: 2px solid #1e1e1e;
    font-size: 16px;
    text-align: center;'>
  <require from='./value-converter'></require>
  ${time | locale}
</template>

## converter-signaler.js
import {ValueConverter} from 'aurelia-framework';
import {connectBindingToSignal} from './signals';

ValueConverter.prototype.connect = function(binding, scope) {
  let expressions = this.allArgs;
  let i = expressions.length;
  while (i--) {
    expressions[i].connect(binding, scope);
  }
  let converter = binding.lookupFunctions.valueConverters(this.name);
  if (!converter) {
    throw new Error(`No ValueConverter named "${this.name}" was found!`);
  }
  let signals = converter.signals;
  if (signals === undefined) {
    return;
  }
  // support both input type 'signal' & ['signal-1', 'signal-2']
  signals = Array.isArray(signals) ? signals : [signals];
  i = signals.length;
  while (i--) {
    connectBindingToSignal(binding, signals[i]);
  }
}

## 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='main'>
    <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>

## main.js
export function configure(aurelia) {
  aurelia.use.standardConfiguration();

  aurelia.start().then(() => aurelia.setRoot())
    .catch(r => {
      console.log(r)
    })
}

## signals.js
const signals = window.signals = {};

export function connectBindingToSignal(binding, name) {
  if (!name in signals) {
    signals[name] = 0;
  }
  binding.observeProperty(signals, name);
}

export function signalBindings(name) {
  if (name in signals) {
    signals[name]++;
  }
}

## value-converter.js
export class LocaleValueConverter {
  signals = 'locale-changed'

  toView(val) {
    let newVal = val instanceof Date ? val.toLocaleString(window.currentLocale) : val == null ? '' : val;
    return newVal;
  }
}
	<template>
	<require from='./value-converter'></require>
	<require from='./clock.html'></require>

	<div>
	Change locale to
	<div>
	<button
	repeat.for='locale of locales'
	click.delegate='changeLocale(locale.locale)'>${locale.name}</button>
	</div>
	</div>

	<div>
	<h2>Flights</h2>
	<table repeat.for='flight of flights' style='margin-bottom: 15px'>
	<tr>
	<th>
	From ${flight.from}
	</th>
	<th style='width: 10px'></th>
	<th>
	To ${flight.to}
	</th>
	</tr>
	<tr>
	<td>
	<clock time.bind='flight.depart'></clock>
	</td>
	<td style='width: 10px'></td>
	<td>
	<clock time.bind='flight.arrive'></clock>
	</td>
	</tr>
	</table>
	</div>

	</template>
	import './converter-signaler';
	import {signalBindings} from './signals'

	Array.prototype.random = function() {
	return this[Math.floor(Math.random() * this.length)];
	}

	export class App {

	locales = [
	{ locale: "en-US", name: 'US' },
	{ locale: 'en-GB', name: 'UK' },
	{ locale: 'ko-KR', name: 'Korean' },
	{ locale: 'ar-EG', name: 'Arabic' },
	{ locale: 'ja-JP-u-ca-japanese', name: 'Japan' },
	{ locale: 'de-DE', name: 'Germany' },
	{ locale: 'pt-BR', name: 'Brazil' },
	{ locale: 'ru-RU', name: 'Russia' },
	{ locale: 'es-ES', name: 'Spain' },
	{ locale: 'it-IT', name: 'Italy' },
	{ locale: 'zh-CN', name: 'China' },
	{ locale: 'zh-HK', name: 'Hong Kong' },
	{ locale: 'zh-TW', name: 'Taiwan' }
	];

	changeLocale(locale) {
	window.currentLocale = locale;
	signalBindings('locale-changed');
	}

	attached() {
	window.app = this;
	}

	flights = [
	{ from: 'Los Angeles', to: 'San Fran', depart: new Date(), arrive: addDate(0, 1) },
	{ from: 'Melbourne', to: 'Sydney', depart: addDate(0, 2), arrive: addDate(0, 3) },
	{ from: 'Hawaii', to: 'Crescent', depart: addDate(0, -1), arrive: addDate(0, 1) }
	]
	}

	function addDate(date, number) {
	const d = new Date(date \|\| new Date());
	d.setDate(d.getDate() + number);
	return d;
	}
	<template bindable='time'
	style='display: inline-block;
	width: 200px;
	padding: 4px 6px;
	border-radius: 10px;
	border: 2px solid #1e1e1e;
	font-size: 16px;
	text-align: center;'>
	<require from='./value-converter'></require>
	${time \| locale}
	</template>
	import {ValueConverter} from 'aurelia-framework';
	import {connectBindingToSignal} from './signals';

	ValueConverter.prototype.connect = function(binding, scope) {
	let expressions = this.allArgs;
	let i = expressions.length;
	while (i--) {
	expressions[i].connect(binding, scope);
	}
	let converter = binding.lookupFunctions.valueConverters(this.name);
	if (!converter) {
	throw new Error(`No ValueConverter named "${this.name}" was found!`);
	}
	let signals = converter.signals;
	if (signals === undefined) {
	return;
	}
	// support both input type 'signal' & ['signal-1', 'signal-2']
	signals = Array.isArray(signals) ? signals : [signals];
	i = signals.length;
	while (i--) {
	connectBindingToSignal(binding, signals[i]);
	}
	}
	<!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='main'>
	<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>
	export function configure(aurelia) {
	aurelia.use.standardConfiguration();

	aurelia.start().then(() => aurelia.setRoot())
	.catch(r => {
	console.log(r)
	})
	}
	const signals = window.signals = {};

	export function connectBindingToSignal(binding, name) {
	if (!name in signals) {
	signals[name] = 0;
	}
	binding.observeProperty(signals, name);
	}

	export function signalBindings(name) {
	if (name in signals) {
	signals[name]++;
	}
	}
	export class LocaleValueConverter {
	signals = 'locale-changed'

	toView(val) {
	let newVal = val instanceof Date ? val.toLocaleString(window.currentLocale) : val == null ? '' : val;
	return newVal;
	}
	}