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

let SetClassAttributeRenderer = class SetClassAttributeRenderer {
    render(flags, dom, context, renderable, target, instruction) {
        addClasses(target.classList, instruction.value);
    }
};
SetClassAttributeRenderer = __decorate([
    instructionRenderer("hf" /* setClassAttribute */)
], SetClassAttributeRenderer);
export { SetClassAttributeRenderer };
let SetStyleAttributeRenderer = class SetStyleAttributeRenderer {
    render(flags, dom, context, renderable, target, instruction) {
        target.style.cssText += instruction.value;
    }
};
SetStyleAttributeRenderer = __decorate([
    instructionRenderer("hg" /* setStyleAttribute */)
], SetStyleAttributeRenderer);
export { SetStyleAttributeRenderer };
let StylePropertyBindingRenderer = 
/** @internal */
class StylePropertyBindingRenderer {
    constructor(parser, observerLocator) {
        this.parser = parser;
        this.observerLocator = observerLocator;
    }
    render(flags, dom, context, renderable, target, instruction) {
        const expr = ensureExpression(this.parser, instruction.from, 48 /* IsPropertyCommand */ | BindingMode.toView);
        const binding = applyBindingBehavior(new PropertyBinding(expr, target.style, instruction.to, BindingMode.toView, this.observerLocator, context), expr, context);
        addBinding(renderable, binding);
    }
};
StylePropertyBindingRenderer = __decorate([

let ListenerBindingRenderer = 
/** @internal */
class ListenerBindingRenderer {
    constructor(parser, eventManager) {
        this.parser = parser;
        this.eventManager = eventManager;
    }
    render(flags, dom, context, renderable, target, instruction) {
        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
        const expr = ensureExpression(this.parser, instruction.from, 80 /* IsEventCommand */ | (instruction.strategy + 6 /* DelegationStrategyDelta */));
        const binding = applyBindingBehavior(new Listener(dom, instruction.to, instruction.strategy, expr, target, instruction.preventDefault, this.eventManager, context), expr, context);
        addBinding(renderable, binding);
    }
};
ListenerBindingRenderer = __decorate([
    instructionRenderer("hb" /* listenerBinding */)
    /** @internal */
    ,
    __param(0, IExpressionParser),
    __param(1, IEventManager),
    __metadata("design:paramtypes", [Object, Object])
], ListenerBindingRenderer);
export { ListenerBindingRenderer };
let SetAttributeRenderer = 
/** @internal */
class SetAttributeRenderer {
    render(flags, dom, context, renderable, target, instruction) {
        target.setAttribute(instruction.to, instruction.value);
    }
};
SetAttributeRenderer = __decorate([
    instructionRenderer("he" /* setAttribute */)

render(flags, dom, context, renderable, target, instruction) {
            target.setAttribute(instruction.to, instruction.value);
        }
    };
    SetAttributeRenderer = tslib_1.__decorate([
        runtime_1.instructionRenderer("he" /* setAttribute */)
        /** @internal */
    ], SetAttributeRenderer);
    exports.SetAttributeRenderer = SetAttributeRenderer;
    let SetClassAttributeRenderer = class SetClassAttributeRenderer {
        render(flags, dom, context, renderable, target, instruction) {
            addClasses(target.classList, instruction.value);
        }
    };
    SetClassAttributeRenderer = tslib_1.__decorate([
        runtime_1.instructionRenderer("hf" /* setClassAttribute */)
    ], SetClassAttributeRenderer);
    exports.SetClassAttributeRenderer = SetClassAttributeRenderer;
    let SetStyleAttributeRenderer = class SetStyleAttributeRenderer {
        render(flags, dom, context, renderable, target, instruction) {
            target.style.cssText += instruction.value;
        }
    };
    SetStyleAttributeRenderer = tslib_1.__decorate([
        runtime_1.instructionRenderer("hg" /* setStyleAttribute */)
    ], SetStyleAttributeRenderer);
    exports.SetStyleAttributeRenderer = SetStyleAttributeRenderer;
    let StylePropertyBindingRenderer = 
    /** @internal */
    class StylePropertyBindingRenderer {
        constructor(parser, observerLocator) {
            this.parser = parser;

let ListenerBindingRenderer = 
    /** @internal */
    class ListenerBindingRenderer {
        constructor(parser, eventManager) {
            this.parser = parser;
            this.eventManager = eventManager;
        }
        render(flags, dom, context, renderable, target, instruction) {
            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
            const expr = runtime_1.ensureExpression(this.parser, instruction.from, 80 /* IsEventCommand */ | (instruction.strategy + 6 /* DelegationStrategyDelta */));
            const binding = runtime_1.applyBindingBehavior(new listener_1.Listener(dom, instruction.to, instruction.strategy, expr, target, instruction.preventDefault, this.eventManager, context), expr, context);
            runtime_1.addBinding(renderable, binding);
        }
    };
    ListenerBindingRenderer = tslib_1.__decorate([
        runtime_1.instructionRenderer("hb" /* listenerBinding */)
        /** @internal */
        ,
        tslib_1.__param(0, runtime_1.IExpressionParser),
        tslib_1.__param(1, event_manager_1.IEventManager),
        tslib_1.__metadata("design:paramtypes", [Object, Object])
    ], ListenerBindingRenderer);
    exports.ListenerBindingRenderer = ListenerBindingRenderer;
    let SetAttributeRenderer = 
    /** @internal */
    class SetAttributeRenderer {
        render(flags, dom, context, renderable, target, instruction) {
            target.setAttribute(instruction.to, instruction.value);
        }
    };
    SetAttributeRenderer = tslib_1.__decorate([
        runtime_1.instructionRenderer("he" /* setAttribute */)

let AttributeBindingRenderer = 
/** @internal */
class AttributeBindingRenderer {
    constructor(parser, observerLocator) {
        this.parser = parser;
        this.observerLocator = observerLocator;
    }
    render(flags, dom, context, renderable, target, instruction) {
        const expr = ensureExpression(this.parser, instruction.from, 48 /* IsPropertyCommand */ | BindingMode.toView);
        const binding = new AttributeBinding(expr, target, instruction.attr /*targetAttribute*/, instruction.to /*targetKey*/, BindingMode.toView, this.observerLocator, context);
        addBinding(renderable, binding);
    }
};
AttributeBindingRenderer.inject = [IExpressionParser, IObserverLocator];
AttributeBindingRenderer = __decorate([
    instructionRenderer("hc" /* attributeBinding */)
    /** @internal */
], AttributeBindingRenderer);

const defaultShadowOptions = {
    mode: 'open'
};
class HTMLProjectorLocator {
    static register(container) {
        return Registration.singleton(IProjectorLocator, this).register(container);
    }
    getElementProjector(dom, $component, host, def) {
        if (def.shadowOptions || def.hasSlots) {
            if (def.containerless) {
                throw Reporter.error(21);
            }
            return new ShadowDOMProjector(dom, $component, host, def);

return false;
  }
}

export class AuTextInstruction implements ITargetedInstruction {
  public readonly type: 'au';
  public readonly from: IsBindingBehavior;

  public constructor(from: IsBindingBehavior) {
    this.type = 'au';
    this.from = from;
  }
}

@inject(IObserverLocator)
@instructionRenderer('au')
/** @internal */
export class AuTextRenderer implements IInstructionRenderer {
  private readonly observerLocator: IObserverLocator;

  public constructor(observerLocator: IObserverLocator) {
    this.observerLocator = observerLocator;
  }

  public render(flags: LifecycleFlags, dom: IDOM, context: IRenderContext, renderable: IController, target: AuNode, instruction: AuTextInstruction): void {
    let realTarget: AuNode;
    if (target.isRenderLocation) {
      realTarget = AuNode.createText();
      target.parentNode!.insertBefore(realTarget, target);
    } else {
      realTarget = target;
    }

public constructor(
    public from: IsBindingBehavior,
    public to: string,
  ) {}
}

@bindingCommand(attribute)
export class TranslationParametersBindingCommand implements BindingCommandInstance {
  public readonly bindingType: BindingType.BindCommand = BindingType.BindCommand;

  public compile(binding: PlainAttributeSymbol | BindingSymbol): TranslationParametersBindingInstruction {
    return new TranslationParametersBindingInstruction(binding.expression as IsBindingBehavior, getTarget(binding, false));
  }
}

@instructionRenderer(TranslationParametersInstructionType)
export class TranslationParametersBindingRenderer implements IInstructionRenderer {
  public constructor(
    @IExpressionParser private readonly parser: IExpressionParser,
    @IObserverLocator private readonly observerLocator: IObserverLocator,
  ) { }

  public render(flags: LifecycleFlags, dom: IDOM, context: IRenderContext, renderable: IController, target: HTMLElement, instruction: ICallBindingInstruction): void {
    TranslationBinding.create({ parser: this.parser, observerLocator: this.observerLocator, context, renderable, target, instruction, isParameterContext: true });
  }
}

if (dom.isMarker(target)) {
      dom.remove(target);
    }
    let binding: MultiInterpolationBinding | InterpolationBinding;
    const expr = ensureExpression(this.parser, instruction.from, BindingType.Interpolation);
    if (expr.isMulti) {
      binding = new MultiInterpolationBinding(this.observerLocator, expr, next, 'textContent', BindingMode.toView, context);
    } else {
      binding = new InterpolationBinding(expr.firstExpression, expr, next, 'textContent', BindingMode.toView, this.observerLocator, context, true);
    }
    addBinding(renderable, binding);
    if (Tracer.enabled) { Tracer.leave(); }
  }
}

@instructionRenderer(HTMLTargetedInstructionType.listenerBinding)
/** @internal */
export class ListenerBindingRenderer implements IInstructionRenderer {
  public static readonly inject: ReadonlyArray = [IExpressionParser, IEventManager];
  public static readonly register: IRegistry['register'];

  private readonly parser: IExpressionParser;
  private readonly eventManager: IEventManager;

  constructor(parser: IExpressionParser, eventManager: IEventManager) {
    this.parser = parser;
    this.eventManager = eventManager;
  }

  public render(flags: LifecycleFlags, dom: IDOM, context: IRenderContext, renderable: IRenderable, target: HTMLElement, instruction: IListenerBindingInstruction): void {
    if (Tracer.enabled) { Tracer.enter('ListenerBindingRenderer', 'render', slice.call(arguments)); }
    const expr = ensureExpression(this.parser, instruction.from, BindingType.IsEventCommand | (instruction.strategy + BindingType.DelegationStrategyDelta));

compile(binding) {
            return new TranslationBindingInstruction(binding.expression, jit_1.getTarget(binding, false));
        }
    }
    exports.TranslationBindingCommand = TranslationBindingCommand;
    let TranslationBindingRenderer = class TranslationBindingRenderer {
        constructor(parser, observerLocator) {
            this.parser = parser;
            this.observerLocator = observerLocator;
        }
        render(flags, context, controller, target, instruction) {
            translation_binding_1.TranslationBinding.create({ parser: this.parser, observerLocator: this.observerLocator, context, controller, target, instruction });
        }
    };
    TranslationBindingRenderer = tslib_1.__decorate([
        runtime_1.instructionRenderer(exports.TranslationInstructionType),
        tslib_1.__param(0, runtime_1.IExpressionParser),
        tslib_1.__param(1, runtime_1.IObserverLocator),
        tslib_1.__metadata("design:paramtypes", [Object, Object])
    ], TranslationBindingRenderer);
    exports.TranslationBindingRenderer = TranslationBindingRenderer;
    exports.TranslationBindInstructionType = 'tbt';
    class TranslationBindAttributePattern {
        static registerAlias(alias) {
            const bindPattern = `${alias}.bind`;
            this.prototype[bindPattern] = function (rawName, rawValue, parts) {
                return new jit_1.AttrSyntax(rawName, rawValue, parts[1], bindPattern);
            };
        }
    }
    exports.TranslationBindAttributePattern = TranslationBindAttributePattern;
    class TranslationBindBindingInstruction {

}
    compile(binding) {
        return new TranslationBindingInstruction(binding.expression, getTarget(binding, false));
    }
}
let TranslationBindingRenderer = class TranslationBindingRenderer {
    constructor(parser, observerLocator) {
        this.parser = parser;
        this.observerLocator = observerLocator;
    }
    render(flags, context, controller, target, instruction) {
        TranslationBinding.create({ parser: this.parser, observerLocator: this.observerLocator, context, controller, target, instruction });
    }
};
TranslationBindingRenderer = __decorate([
    instructionRenderer(TranslationInstructionType),
    __param(0, IExpressionParser),
    __param(1, IObserverLocator),
    __metadata("design:paramtypes", [Object, Object])
], TranslationBindingRenderer);
export { TranslationBindingRenderer };
export const TranslationBindInstructionType = 'tbt';
export class TranslationBindAttributePattern {
    static registerAlias(alias) {
        const bindPattern = `${alias}.bind`;
        this.prototype[bindPattern] = function (rawName, rawValue, parts) {
            return new AttrSyntax(rawName, rawValue, parts[1], bindPattern);
        };
    }
}
export class TranslationBindBindingInstruction {
    constructor(from, to) {