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

import { bindable, customAttribute, INode, LifecycleFlags, LifecycleTask } from '@aurelia/runtime';
import { I18N, I18nService } from './i18n';

// TODO write unit tests
/**
 * `t` custom attribute to facilitate the translation via HTML
 * @export
 */
@customAttribute({ name: 't' })
export class TCustomAttribute {
  @bindable public value: string = (void 0)!;
  constructor(
    @INode private readonly node: Node,
    @I18N private readonly i18n: I18nService) {
  }

  public binding(flags: LifecycleFlags) {
    return this.isStringValue(this.value)
      ? this.i18n.updateValue(this.node, this.value)
      : LifecycleTask.done;
  }

  private isStringValue(value: unknown): value is string {
    const valueType = typeof value;
    if (valueType !== 'string') {

import {
  bindable,
  BindingMode,
  customAttribute,
  IController,
  IDOM,
  INode,
  State
} from '@aurelia/runtime';
import { HTMLDOM } from '../../dom';

/**
 * Focus attribute for element focus binding
 */
@customAttribute('focus')
export class Focus {

  @bindable({ mode: BindingMode.twoWay })
  public value: unknown;

  /**
   * Indicates whether `apply` should be called when `attached` callback is invoked
   */
  private needsApply: boolean = false;

  // This is set by the controller after this instance is constructed
  private readonly $controller!: IController;

  private readonly element: HTMLElement;

  public constructor(

it('works with alias property in customAttribute decorator', function () {
    let created = false;

    @customAttribute({ name: 'au-name', aliases: ['au-alias'] })
    class AuAttr {
      public constructor() { created = true; }
    }

    @customElement({ name: 'app', template: '<div></div>', dependencies: [AuAttr] })
    class App {}

    startAndStop(App);

    assert.strictEqual(created, true, 'created');
  });

describe('05. with setter/getter', function () {
    this.afterEach(assert.isSchedulerEmpty);

    /**
     * Specs:
     * - with setter coercing to string for "prop" property
     */
    @customAttribute('foo1')
    class Foo1 {
      @bindable({
        set: String
      })
      public prop: any;
    }

    /**
     * Specs:
     * - plain bindable "prop"
     */
    @customAttribute('foo2')
    class Foo2 {
      @bindable()
      public prop: any;
    }

describe('0.2 Multiple bindings', function () {

    @customAttribute('multi')
    class Multi {
        @bindable public a: boolean;
        @bindable public b: string;
        public aResult: boolean;
        public bResult: string;
        private readonly element: Element;
        public constructor(@INode element: INode) {
          this.element = element as Element;
          this.element.innerHTML = 'Created';
        }
        public bound() {
          this.aChanged();
          this.bChanged();
        }
        public aChanged() {
          this.aResult = this.a;

@customAttribute({ name: 'foo5', aliases: ['foo53'] })
    @alias(...['foo51', 'foo52'])
    class Fooatt5 {
      @bindable({ primary: true })
      public value: any;
      private readonly element: Element;
      public constructor(@INode element: INode) {
        this.element = element as Element;
      }

      public bound() {
        this.element.setAttribute('test', this.value);
      }
    }

    @customAttribute({ name: 'foo4', aliases: ['foo43'] })
    @alias('foo41', 'foo42')
    class Fooatt4 {
      @bindable({ primary: true })
      public value: any;
      private readonly element: Element;
      public constructor(@INode element: INode) {
        this.element = element as Element;
      }

      public bound() {
        this.element.setAttribute('test', this.value);
      }
    }

    @customAttribute({ name: 'foo44', aliases: ['foo431'] })
    @alias('foo411', 'foo421')

attrResources: () => {
          @customAttribute({ name: 'square' })
          class Square {
            public value: string;
            private readonly el: HTMLElement;
            public constructor(@INode el: INode) {
              this.el = el as HTMLElement;
            }

            public beforeBind() {
              const value = this.value === 'literal:literal' ? 'red' : this.value;
              this.el.style.background = value;
            }
          }

          @valueConverter('identity')
          class Identity {
            public toView(val: any, alternativeValue: any) {

ResizeShardContextInterface,
  BindingContextInterface,
  OverrideContextInterface,
  ColumnBindingContext,
  ColumBindingContextObjectInterface
} from '../../interfaces';


/**
 * Custom attribute "v-resize-col"
 * logic behind resizing of columns
 * Used by default by the simple html setup
 * Can be used with custom html
 *
 */
@customAttribute('v-resize-col')
@inject(Element, VGrid)
export class VGridAttributesResizeCol {
  private vGrid: VGrid;
  private ctx: ResizeShardContextInterface;
  private element: Element;
  private screenX: number;
  private originalWidth: number;
  private column: Element;
  private colType: string;
  private colNo: number;
  private context: ColumBindingContextObjectInterface;
  private columnsArray: ColumBindingContextObjectInterface[];
  private columnBindingContext: ColumnBindingContext;
  private bindingContext: BindingContextInterface;
  private overrideContext: OverrideContextInterface;
  private onmousedownBinded: EventListenerOrEventListenerObject;

valueChanged() {
                    if (!this.value) {
                        this.element.className = '';
                        return;
                    }
                    this.element.className = class_attribute_accessor_1.getClassesToAdd(this.value)
                        .map(x => classLookup[x] || x)
                        .join(' ');
                }
            };
            tslib_1.__decorate([
                runtime_1.bindable,
                tslib_1.__metadata("design:type", String)
            ], ClassCustomAttribute.prototype, "value", void 0);
            ClassCustomAttribute = tslib_1.__decorate([
                runtime_1.customAttribute('class'),
                tslib_1.__param(0, runtime_1.INode),
                tslib_1.__metadata("design:paramtypes", [Object])
            ], ClassCustomAttribute);
            container.register(ClassCustomAttribute);
        }
    }

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


/**
 * Custom attribute "v-resize-col"
 * logic behind sorting in grid/sort icons
 * Used by default by the simple html setup
 * Can be used with custom html
 *
 */
@customAttribute('v-sort')
@inject(Element, VGrid)
export class VGridAttributesSort {
  @bindable private field: string;
  @bindable private asc: string;
  private vGrid: VGrid;
  private element: HTMLElement;
  private bindingContext: BindingContextInterface;
  private overrideContext: OverrideContextInterface;
  private attribute: string;
  private sortIcon: HTMLElement;
  private firstTime: boolean;



  constructor(element: HTMLElement, vGrid: VGrid) {
    this.vGrid = vGrid;