MaximBalaganskiy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.ts.
-->
<body aurelia-app="main">
  <script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
}

## src\app.html
<template>
  <require from="./tree-view"></require>
  <h1>${message}</h1>
  <tree-view nodes.bind="nodes">
    <tree-node>${n.name}</tree-node>
  </tree-view>

</template>

## src\app.ts
export class App {
  public message: string = 'Hello Aurelia!';

    nodes = [
    { name: 'item1', children: [{ name: 'child11', children: [{ name: 'child111' }, { name: 'child112' }] }, { name: 'child12' }] },
    { name: 'item2', children: [{ name: 'child21' }, { name: 'child22' }] }
  ];
}

## src\main.ts
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info');
  aurelia.start().then(() => aurelia.setRoot());
}

## src\tree-node.ts
import { inject, bindable, noView, ViewSlot, customElement } from 'aurelia-framework';

@inject(Element)
@customElement('tree-node')
@noView()
export class TreeNode {
  @bindable factory;

  constructor(element: Element) {
    this.element = element;
    this.viewSlot = new ViewSlot(element, true);
  }

  bind(bindingContext, overrideContext) {
    this.build();
    this.viewSlot.bind(bindingContext, overrideContext);
  }

  attached() {
    this.viewSlot.attached();
  }

  detached() {
    this.viewSlot.detached();
  }

  unbind() {
    this.viewSlot.unbind();
  }

  private build() {
    if (this.built) {
      return;
    }
    this.built = true;
    if (!this.factory) {
      return;
    }
    this.view = this.factory.create();
    this.viewSlot.add(this.view);
  }
}

## src\tree-view.html
<template>
  <require from="./tree-node"></require>
  <ul>
    <li repeat.for="n of nodes">
      <tree-node factory.bind="nodeViewFactory"></tree-node>
      <tree-view if.bind="n.children" nodes.bind="n.children"></tree-view>
    </li>
  </ul>
</template>

## src\tree-view.ts
import {
  customElement,
  bindable,
  useView,
  PLATFORM,
  child,
  processContent,
  ViewCompiler,
  ViewResources,
  BehaviorInstruction,
  ViewCompileInstruction,
  inject,
  Optional,
  Container
} from 'aurelia-framework';

let id = 0;
const templateLookup: Record<string, string> = {};
const getNextNodeTemplateId = () => ++id;

const NodeTemplateKey = {};

@inject(Element, Container)
@customElement('tree-view')
@useView(PLATFORM.moduleName('./tree-view.html'))
@processContent(processTreeViewContent)
export class TreeView {

  @bindable
  nodes: INode[];

  constructor(host: Element, container: Container) {
    this.host = host;
    const parent = container.parent.get(Optional.of(TreeView));
    const isRoot = !parent;
    if (isRoot) {
      const nodeTemplateId = host.getAttribute('data-template-id');
      if (templateLookup[nodeTemplateId]) {
        const nodeTemplate = templateLookup[nodeTemplateId];
        const nodeViewFactory = container.get(ViewCompiler).compile(
          `<template>${nodeTemplate}</template>`,
          container.get(ViewResources)
        );
        this.nodeViewFactory = nodeViewFactory;
      } else {
        // create a default <tree-node/> factory
        this.nodeViewFactory = container.get(ViewCompiler).compile(
          '<template>${n}</template>',
          container.get(ViewResources)
        );
      }
    } else {
      this.nodeViewFactory = parent.nodeViewFactory;
    }
  }
}

function processTreeViewContent(
  viewCompiler: ViewCompiler,
  resources: ViewResources,
  element: Element,
  instruction: BehaviorInstruction
) {
  const treeNode = element.querySelector('tree-node');
  const hasNodeTemplate = !!treeNode;
  if (hasNodeTemplate) {
    const nodeTemplateId =  getNextNodeTemplateId();
    element.setAttribute('data-template-id', nodeTemplateId);
    templateLookup[nodeTemplateId] = treeNode.innerHTML;
  }
  element.innerHTML = '';
  return false;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to aurelia-bootstrapper
	(data-main attribute on script) for Aurelia,
	The aurelia bootstrapper then loads up user module "main"
	(aurelia-app attribute on <body>) which is your src/main.ts.
	-->
	<body aurelia-app="main">
	<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
	</body>
	</html>
	<template>
	<require from="./tree-view"></require>
	<h1>${message}</h1>
	<tree-view nodes.bind="nodes">
	<tree-node>${n.name}</tree-node>
	</tree-view>

	</template>
	export class App {
	public message: string = 'Hello Aurelia!';

	nodes = [
	{ name: 'item1', children: [{ name: 'child11', children: [{ name: 'child111' }, { name: 'child112' }] }, { name: 'child12' }] },
	{ name: 'item2', children: [{ name: 'child21' }, { name: 'child22' }] }
	];
	}
	import {Aurelia} from 'aurelia-framework';

	export function configure(aurelia: Aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging('info');
	aurelia.start().then(() => aurelia.setRoot());
	}
	import { inject, bindable, noView, ViewSlot, customElement } from 'aurelia-framework';

	@inject(Element)
	@customElement('tree-node')
	@noView()
	export class TreeNode {
	@bindable factory;

	constructor(element: Element) {
	this.element = element;
	this.viewSlot = new ViewSlot(element, true);
	}

	bind(bindingContext, overrideContext) {
	this.build();
	this.viewSlot.bind(bindingContext, overrideContext);
	}

	attached() {
	this.viewSlot.attached();
	}

	detached() {
	this.viewSlot.detached();
	}

	unbind() {
	this.viewSlot.unbind();
	}

	private build() {
	if (this.built) {
	return;
	}
	this.built = true;
	if (!this.factory) {
	return;
	}
	this.view = this.factory.create();
	this.viewSlot.add(this.view);
	}
	}
	<template>
	<require from="./tree-node"></require>
	<ul>
	<li repeat.for="n of nodes">
	<tree-node factory.bind="nodeViewFactory"></tree-node>
	<tree-view if.bind="n.children" nodes.bind="n.children"></tree-view>
	</li>
	</ul>
	</template>
	import {
	customElement,
	bindable,
	useView,
	PLATFORM,
	child,
	processContent,
	ViewCompiler,
	ViewResources,
	BehaviorInstruction,
	ViewCompileInstruction,
	inject,
	Optional,
	Container
	} from 'aurelia-framework';

	let id = 0;
	const templateLookup: Record<string, string> = {};
	const getNextNodeTemplateId = () => ++id;

	const NodeTemplateKey = {};

	@inject(Element, Container)
	@customElement('tree-view')
	@useView(PLATFORM.moduleName('./tree-view.html'))
	@processContent(processTreeViewContent)
	export class TreeView {

	@bindable
	nodes: INode[];

	constructor(host: Element, container: Container) {
	this.host = host;
	const parent = container.parent.get(Optional.of(TreeView));
	const isRoot = !parent;
	if (isRoot) {
	const nodeTemplateId = host.getAttribute('data-template-id');
	if (templateLookup[nodeTemplateId]) {
	const nodeTemplate = templateLookup[nodeTemplateId];
	const nodeViewFactory = container.get(ViewCompiler).compile(
	`<template>${nodeTemplate}</template>`,
	container.get(ViewResources)
	);
	this.nodeViewFactory = nodeViewFactory;
	} else {
	// create a default <tree-node/> factory
	this.nodeViewFactory = container.get(ViewCompiler).compile(
	'<template>${n}</template>',
	container.get(ViewResources)
	);
	}
	} else {
	this.nodeViewFactory = parent.nodeViewFactory;
	}
	}
	}

	function processTreeViewContent(
	viewCompiler: ViewCompiler,
	resources: ViewResources,
	element: Element,
	instruction: BehaviorInstruction
	) {
	const treeNode = element.querySelector('tree-node');
	const hasNodeTemplate = !!treeNode;
	if (hasNodeTemplate) {
	const nodeTemplateId = getNextNodeTemplateId();
	element.setAttribute('data-template-id', nodeTemplateId);
	templateLookup[nodeTemplateId] = treeNode.innerHTML;
	}
	element.innerHTML = '';
	return false;
	}