How to use the @aurelia/runtime.customElement function in @aurelia/runtime

import { IRouter } from '@aurelia/router';
import { customElement } from '@aurelia/runtime';

import * as template from './child-router.html';

@customElement({ name: 'child-router', template })
export class ChildRouter {
  // public reentryBehavior: ReentryBehavior = ReentryBehavior.refresh;

  public heading: string = 'Child Router';

  public constructor(
    @IRouter public readonly router: IRouter,
  ) {}

  public binding() {
    this.router.setNav('child-menu', [
      { title: 'Welcome', route: 'welcome' },
      { title: 'Users', route: 'users' },
      { title: 'Child router', route: 'child-router' },
    ]);
  }

import { inject } from '@aurelia/kernel';
// import { VGrid } from './v-grid';
import {
  ColConfigInterface,
  BindingContextInterface,
  OverrideContextInterface
} from '../interfaces';



/**
 * Custom element 
 * This is used for creating the simple html columns
 *
 */
@customElement({
  name: 'v-grid-col',
  templateOrNode: '',
  build: {
    required: true,
    compiler: 'default'
  },
  instructions: []
})
@inject(Element /*, VGrid*/)
export class VGridElementColConfig {
  // private vGrid: VGrid;
  private element: Element;
  private colRowTemplate: string;
  private colHeaderTemplate: string;
  private colCss: string;
  private bindingContext: BindingContextInterface;

import { bindable, customElement, valueConverter } from '@aurelia/runtime';
import { Thing, ThingViewer } from './thing-viewer';
import { Camera, CameraSpecsViewer } from './camera-specs-viewer';
import { Laptop, LaptopSpecsViewer } from './laptop-specs-viewer';
import template from './specs-viewer.html';

@customElement({ name: 'specs-viewer', template })
export class SpecsViewer {
  @bindable public things: Thing[];
  private pairs: { vm: typeof ThingViewer; thing: Thing }[];

  public beforeBind() {
    const toVm = (thing: Thing) => {
      switch (true) {
        case thing instanceof Camera: return CameraSpecsViewer;
        case thing instanceof Laptop: return LaptopSpecsViewer;
        case thing instanceof Thing: return ThingViewer;
        default: throw new Error(`Unsupported type ${thing.constructor.prototype}`);
      }
    };
    this.pairs = this.things.map((thing) => ({ thing, vm: toVm(thing) }));
  }
}

import { customElement } from '@aurelia/runtime';

@customElement({ name: 'redirect-information', template: `<template>
<p>This just redirects to information.</p>
</template>` })
export class RedirectInformation {
  public canEnter() {
    return 'information';
  }
}

import { customElement } from '@aurelia/runtime';

@customElement({
  name: 'chat', template: `<template>
<h3>Chat <a class="close" href="-@chat" data-test="chat-element-close">X</a></h3>


</template>` })
export class Chat { }

import { customElement } from '@aurelia/runtime';
import template from './app.html';

@customElement({ name: 'app', template })
export class App {
  message = 'Hello World!';
}

import { inject } from '@aurelia/kernel';
import { customElement } from '@aurelia/runtime';
import { Router } from '../../../../../router/src/index';

@inject(Router)
@customElement({
  name: 'app', template:
    `<template>
  <div style="padding: 20px;">
    <p>A layout test, with game and lobby "layouts".</p>
    <a href="lobby">Lobby</a>
    <a href="game">Game</a>
    <a href="lobby@app+contacts@lobby+contact@contact(123)">Lobby + contacts + 123</a>
    <a href="lobby@app+contact@contact(123)+contacts@lobby">Lobby + 123 + contacts</a>
    <a href="game+board@game">Game + board (5 + 5, parent-child)</a>
    <a href="game+delayed">Game + delayed (5 + 5, siblings)</a>
    <a href="cancel">Cancel</a>
    
    
  </div>
</template>
` })

import { customElement } from '@aurelia/runtime';
import view from 'view!./app.html';

class Todo {
  done = false;
  public constructor(public description: string) {}
}

@customElement(view)
export class App {
  message = 'Hello World';
  duplicateMessage = true;
  todos: Todo[] = [];

  get computedMessage() {
    let value = `
      ${this.message} Computed:
      Todo Count ${this.todos.length}
      Descriptions:
      ${this.todos.map(x => x.description).join('\n')}
    `;

    return value;
  }

import { inject } from '@aurelia//kernel';
import { customElement } from '@aurelia/runtime';
import { ContactList } from '../contact-list';

@customElement({
  name: 'contact', template: `<template>CONTACT <input>
<p>Id: \${contact.id}</p>
<p>Name: \${contact.name}</p>
</template>` })
@inject(ContactList)
export class Contact {
  public static parameters = ['id'];

  public contact = {};
  public constructor(private readonly contactList: ContactList) { }

  public enter(parameters) {
    if (parameters.id) {
      this.contact = this.contactList.contact(parameters.id);
    }
  }

import { customElement } from '@aurelia/runtime';
import template from './app.html';

@customElement({ name: 'app', template })
export class App {
  message = 'Hello World!';
}