How to use the aurelia-framework.processContent function in aurelia-framework

], UxSelect.prototype, "disabled", void 0);
    __decorate([
        bindable({ defaultValue: false })
    ], UxSelect.prototype, "multiple", void 0);
    __decorate([
        bindable()
    ], UxSelect.prototype, "placeholder", void 0);
    __decorate([
        computedFrom('multiple')
    ], UxSelect.prototype, "isMultiple", null);
    __decorate([
        computedFrom('disabled')
    ], UxSelect.prototype, "isDisabled", null);
    UxSelect = __decorate([
        inject(Element, StyleEngine, ObserverLocator, TaskQueue),
        processContent(extractUxOption),
        customElement('ux-select')
        // @inlineView(UX_SELECT_VIEW)
    ], UxSelect);
    return UxSelect;
}());
export { UxSelect };

], UxSelect.prototype, "disabled", void 0);
__decorate([
    bindable({ defaultValue: false })
], UxSelect.prototype, "multiple", void 0);
__decorate([
    bindable()
], UxSelect.prototype, "placeholder", void 0);
__decorate([
    computedFrom('multiple')
], UxSelect.prototype, "isMultiple", null);
__decorate([
    computedFrom('disabled')
], UxSelect.prototype, "isDisabled", null);
UxSelect = __decorate([
    inject(Element, StyleEngine, ObserverLocator, TaskQueue),
    processContent(extractUxOption),
    customElement('ux-select')
    // @inlineView(UX_SELECT_VIEW)
], UxSelect);
export { UxSelect };
function extractUxOption(_, __, node) {
    if (node.hasAttribute('containerless')) {
        logger.warn('Cannot use containerless on . Consider using as-element instead.');
        node.removeAttribute('containerless');
    }
    let currentChild = node.firstChild;
    while (currentChild) {
        const nextSibling = currentChild.nextSibling;
        if (currentChild.nodeName === 'UX-OPTION' || currentChild.nodeName === 'UX-OPTGROUP') {
            currentChild = nextSibling;
            continue;
        }

], UIColumn.prototype, "format", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], UIColumn.prototype, "type", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], UIColumn.prototype, "align", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", Object)
    ], UIColumn.prototype, "locked", void 0);
    UIColumn = __decorate([
        customElement("ui-column"),
        processContent(false),
        noView(),
        __metadata("design:paramtypes", [Element])
    ], UIColumn);
    return UIColumn;
}());

/**
 * @author    : Adarsh Pastakia
 * @version   : 5.0.0
 * @copyright : 2019
 * @license   : MIT
 */

import { containerless, inlineView, processContent } from "aurelia-framework";
import view from "./input-wrapper.html";

@containerless()
@inlineView(view)
@processContent((compiler, resources, node, instruction) => {
  instruction.inheritBindingContext = true;
  return true;
})
export class InputWrapper {}

/*****************************************************************************************************************
 *    VGridRowRepeat
 *    Custom element just repeating the heml inside it for each row
 *    Created by vegar ringdal
 *
 ****************************************************************************************************************/
import {inject, noView, customElement, processContent, Container, TargetInstruction,bindable, ViewSlot} from 'aurelia-framework';
//import {noView, customElement, processContent, bindable, ViewSlot,TargetInstruction} from 'aurelia-templating';
//import {inject, Container} from 'aurelia-dependency-injection';
import {VGrid} from './v-grid';


@noView()
@customElement('v-grid-row-repeat')
@processContent((compiler, resources, element, instruction) => {

  var headerTemplateElement = element.getElementsByTagName("V-HEADER-TEMPLATE")[0];
  let headerTemplateHtml = headerTemplateElement ? headerTemplateElement.innerHTML:null;
  if (headerTemplateHtml !== '') {
    instruction.headerTemplate = headerTemplateHtml;
  }

  var rowTemplateElement = element.getElementsByTagName("V-ROW-TEMPLATE")[0];
  let rowTemplateHtml = rowTemplateElement ? rowTemplateElement.innerHTML:null;
  if (rowTemplateHtml !== '') {
    instruction.rowTemplate = rowTemplateHtml;
  }

  //if we didnt get anything we use it all
  if(!rowTemplateHtml){
    instruction.rowTemplate = element.innerHTML;

* @author    : Adarsh Pastakia
 * @version   : 5.0.0
 * @copyright : 2019
 * @license   : MIT
 */
import { bindable, computedFrom, customElement, noView, processContent, View } from "aurelia-framework";
import { UIFormat } from "../../utils/ui-format";
import { UIInternal } from "../../utils/ui-internal";

interface ICallbackModel {
  value: string;
  record: KeyValue;
}

@customElement("ui-column")
@processContent(false)
@noView()
export class UIColumn {
  @computedFrom("width", "minWidth", "maxWidth")
  get css() {
    return {
      width: this.width,
      minWidth: this.minWidth,
      maxWidth: this.maxWidth
    };
  }

  @bindable()
  public dataId: string;

  @bindable()
  public label: string = "";

interface UxOption {
    optGroup: UxOptGroup | null;
  }
}

export interface UxOptGroupElement extends HTMLElement {
  nodeName: 'UX-OPTGROUP';
  options: UxOptionElement[];
}

export interface OptGroupOptionsCt extends HTMLElement {
  children: HTMLCollectionOf;
}

@inject(DOM.Element, BindingEngine)
@processContent(ensureOnlyUxOption)
@customElement('ux-optgroup')
export class UxOptGroup {

  private subscriptions: Disposable[];
  private parentDisabled: boolean;

  @bindable()
  public label: string;

  public disabled: boolean;
  public isDisabled: boolean;
  public readonly optionsCt: OptGroupOptionsCt;

  constructor(
    public readonly element: UxOptGroupElement,
    private bindingEngine: BindingEngine

__decorate([
    bindable(),
    __metadata("design:type", Object)
], UIDgTplColumn.prototype, "minWidth", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UIDgTplColumn.prototype, "class", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UIDgTplColumn.prototype, "summary", void 0);
UIDgTplColumn = __decorate([
    noView(),
    autoinject(),
    processContent(false),
    customElement('ui-dg-tpl'),
    __metadata("design:paramtypes", [Element])
], UIDgTplColumn);
export { UIDgTplColumn };
let UIDgColumn = class UIDgColumn extends UIDataColumn {
    constructor(element) {
        super(element);
        this.element = element;
        this.type = "normal";
        this.width = '120px';
        this.minWidth = '40px';
        this.dataType = 'text';
        this.class = '';
        this.format = '';
        this.symbol = '$';
        this.summary = '';

****************************************************************************************************************/
import {noView, processContent, ObserverLocator, customAttribute, bindable} from 'aurelia-framework';
import {VGridGenerator} from './v-grid-generator';
import {VGridFilter} from './v-grid-filter';
import {VGridSort} from './v-grid-sort';
import {VGridInterpolate} from './v-grid-interpolate';
import {VGridSortable} from './v-grid-sortable';
import {VGridCellEdit} from './v-grid-cell-edit';
import {VGridObservables} from './v-grid-observables';
import {VGridConfig} from './v-grid-config';
import {VGridSelection} from './v-grid-selection';



@noView
@processContent(false)
@customAttribute("config")
export class VGrid {
  static inject = [Element, ObserverLocator, VGridFilter, VGridSort, VGridInterpolate];
  @bindable gridContext;
  @bindable collection;
  @bindable currentEntity;



  constructor(element, observerLocator, vGridFilter, vGridSort, vGridInterpolate) {

    this.vGridFilter = vGridFilter; //helper for filtering the cloned collection
    this.vGridSort = vGridSort; //helper for sorting the columns
    this.vGridInterpolate = vGridInterpolate; //populates mustache tags
    this.observerLocator = observerLocator; //listen for event
    this.gridContext = null;

case 'datetime': retVal = UIFormat.datetime(value, this.format); break;
        case 'fromnow': retVal = UIFormat.fromNow(value); break;
        case 'number': retVal = UIFormat.number(value, this.format); break;
        case 'currency': retVal = UIFormat.currency(value, record[this.symbol] || this.symbol || '$', this.format); break;
        case 'percent': retVal = UIFormat.percent(value); break;
        case 'exrate': retVal = UIFormat.exRate(value); break;
        default: retVal = value; break;
      }
    }
    return isEmpty(retVal) ? ' ' : retVal;
  }
}

@noView()
@autoinject()
@processContent(false)
@customElement('ui-dg-tpl')
export class UIDgTplColumn extends UIDataColumn {
  type = "normal";
  constructor(public element: Element) {
    super(element);
    this.tpl = this.element.innerHTML;
    this.element.innerHTML = "";
  }

  @bindable() dataId;
  @bindable() headerTitle = '';

  @bindable() width: any = '120px';
  @bindable() minWidth = '40px';

  @bindable() class = '';