charlespockert/app.html

## app.html
<template>
  <require from="./composition"></require>
  <component-renderer view-model.bind="testVm" element.bind="comp" ref="comp"></component-renderer>
</template>

## app.js
import {Test} from 'test';

export class App {
  message = 'Hello World';
  testVm = null;

  constructor() {
    this.testVm = new Test();
  }
}

## composition.html
<template>

</template>

## composition.js
import { noView, inject, bindable, observable, autoinject, CompositionEngine, CompositionContext, Container, ViewSlot } from "aurelia-framework";

@inject(CompositionEngine, Container, Element)
@noView
export class ComponentRenderer {
  @bindable
  model = null;
  @bindable
  viewModel = null;

  @bindable
  element;
  container;
  compositionEngine;

  constructor(compositionEngine, container) {
    this.container = container;
    this.compositionEngine = compositionEngine;
  }

  activate() {
    this.elementChanged();
  }

  elementChanged() {
    console.log("element changed");
    if (this.element !== null) {
      let context = this.createContext(this.viewModel, this.element, this.model);
      let _this = this;
      this.compositionEngine.compose(context).then((view) => {
        console.log("rendered")
      });
    }
  }

  createContext(viewModel, host, model): CompositionContext {
    return {
      container: this.container.createChild(),
      viewModel: viewModel,
      model: model,
      host: host,
      bindingContext: null,
      viewResources: null,
      viewSlot: new ViewSlot(host, true)
    };
  }

  detached() {
    this.element = null;
    this.viewModel = null;
    this.model = null;
  }
}

## 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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## test.html
<template>
  <h1>${message}</h1>
</template>

## test.js
export class Test {
  message = "hello World";

  constructor(){
    console.log("new test");
  }

  activate() {
    console.log("new test activated");

    this.message = this.message + " ...I was activated";
  }
}
	<template>
	<require from="./composition"></require>
	<component-renderer view-model.bind="testVm" element.bind="comp" ref="comp"></component-renderer>
	</template>
	import {Test} from 'test';

	export class App {
	message = 'Hello World';
	testVm = null;

	constructor() {
	this.testVm = new Test();
	}
	}
	import { noView, inject, bindable, observable, autoinject, CompositionEngine, CompositionContext, Container, ViewSlot } from "aurelia-framework";

	@inject(CompositionEngine, Container, Element)
	@noView
	export class ComponentRenderer {
	@bindable
	model = null;
	@bindable
	viewModel = null;

	@bindable
	element;
	container;
	compositionEngine;

	constructor(compositionEngine, container) {
	this.container = container;
	this.compositionEngine = compositionEngine;
	}

	activate() {
	this.elementChanged();
	}

	elementChanged() {
	console.log("element changed");
	if (this.element !== null) {
	let context = this.createContext(this.viewModel, this.element, this.model);
	let _this = this;
	this.compositionEngine.compose(context).then((view) => {
	console.log("rendered")
	});
	}
	}

	createContext(viewModel, host, model): CompositionContext {
	return {
	container: this.container.createChild(),
	viewModel: viewModel,
	model: model,
	host: host,
	bindingContext: null,
	viewResources: null,
	viewSlot: new ViewSlot(host, true)
	};
	}

	detached() {
	this.element = null;
	this.viewModel = null;
	this.model = null;
	}
	}
	<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export class Test {
	message = "hello World";

	constructor(){
	console.log("new test");
	}

	activate() {
	console.log("new test activated");

	this.message = this.message + " ...I was activated";
	}
	}