How to use the @aurelia/runtime-html.DOM.createElement function in @aurelia/runtime-html

export const hJsx = function (name, attrs, ...children) {
    const el = DOM.createElement(name === 'let$' ? 'let' : name);
    if (attrs != null) {
        let value;
        for (const attr in attrs) {
            value = attrs[attr];
            // if attr is class or its alias
            // split up by splace and add to element via classList API
            if (attr === 'class' || attr === 'className' || attr === 'cls') {
                value = value == null
                    ? []
                    : Array.isArray(value)
                        ? value
                        : (`${value}`).split(' ');
                el.classList.add(...value);
            }
            else if (attr in el || attr === 'data' || attr.startsWith('_')) {
                // for attributes with matching properties, simply assign

export const hJsx = function(name: string, attrs: Record | null, ...children: (Node | string | (Node | string)[])[]) {
  const el = DOM.createElement(name === 'let$' ? 'let' : name);
  if (attrs != null) {
    let value: string | string[];
    for (const attr in attrs) {
      value = attrs[attr];
      // if attr is class or its alias
      // split up by splace and add to element via classList API
      if (attr === 'class' || attr === 'className' || attr === 'cls') {
        value = value == null
          ? []
          : Array.isArray(value)
            ? value
            : (`${value}`).split(' ');
        el.classList.add(...value as string[]);
      } else if (attr in el || attr === 'data' || attr.startsWith('_')) {
        // for attributes with matching properties, simply assign
        // other if special attribute like data, or ones start with _

export function h(name, attrs = null, ...children) {
    const el = DOM.createElement(name);
    for (const attr in attrs) {
        if (attr === 'class' || attr === 'className' || attr === 'cls') {
            let value = attrs[attr];
            value = value === undefined || value === null
                ? emptyArray
                : Array.isArray(value)
                    ? value
                    : (`${value}`).split(' ');
            el.classList.add(...value.filter(Boolean));
        }
        else if (attr in el || attr === 'data' || attr.startsWith('_')) {
            el[attr.replace(/^_/, '')] = attrs[attr];
        }
        else {
            el.setAttribute(attr, attrs[attr]);
        }

it('#render instantiates TranslationBinding if there are none existing', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationParametersBindingRenderer(container.get(IExpressionParser), container.get(IObserverLocator));
    const expressionParser = container.get(IExpressionParser);
    const renderable = ({} as unknown as IController);
    const callBindingInstruction: ICallBindingInstruction = { from: expressionParser.parse('{foo: "bar"}', BindingType.BindCommand) } as unknown as ICallBindingInstruction;

    sut.render(
      LifecycleFlags.none,
      DOM,
      container,
      renderable,
      DOM.createElement('span'),
      callBindingInstruction
    );

    assert.instanceOf(renderable.bindings[0], TranslationBinding);
  });

it('#render instantiates TranslationBinding - simple string literal', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    const expressionParser = container.get(IExpressionParser);
    const renderable = ({} as unknown as IController);

    const from = expressionParser.parse('simple.key', BindingType.BindCommand);
    const callBindingInstruction: ICallBindingInstruction = { from, to: '.bind' } as unknown as ICallBindingInstruction;
    sut.render(
      LifecycleFlags.none,
      DOM,
      container as unknown as IRenderContext,
      renderable,
      DOM.createElement('span'),
      callBindingInstruction);

    assert.instanceOf(renderable.bindings[0], TranslationBinding);
  });

export function h(
  name: T,
  attrs: Record | null = null,
  ...children: TChildren
): T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : HTMLElement {
  const el = DOM.createElement(name);
  for (const attr in attrs) {
    if (attr === 'class' || attr === 'className' || attr === 'cls') {
      let value = attrs[attr];
      value = value === undefined || value === null
        ? emptyArray
        : Array.isArray(value)
          ? value
          : (`${value}`).split(' ');
      el.classList.add(...value.filter(Boolean));
    } else if (attr in el || attr === 'data' || attr.startsWith('_')) {
      (el as any)[attr.replace(/^_/, '')] = attrs[attr];
    } else {
      el.setAttribute(attr, attrs[attr] as string);
    }
  }
  const childrenCt = el.tagName === 'TEMPLATE' ? (el as HTMLTemplateElement).content : el;

it('#render add the paramExpr to the existing TranslationBinding for the target element', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationParametersBindingRenderer(container.get(IExpressionParser), container.get(IObserverLocator));
    const expressionParser = container.get(IExpressionParser);
    const targetElement = DOM.createElement('span');
    const binding = new TranslationBinding(targetElement, container.get(IObserverLocator), container);
    const renderable = ({ bindings: [binding] } as unknown as IController);
    const paramExpr = expressionParser.parse('{foo: "bar"}', BindingType.BindCommand);
    const callBindingInstruction: ICallBindingInstruction = { from: paramExpr } as unknown as ICallBindingInstruction;

    sut.render(
      LifecycleFlags.none,
      DOM,
      container,
      renderable,
      targetElement,
      callBindingInstruction
    );

    assert.equal(binding.parametersExpr, paramExpr);
  });

it('#render adds expr to the existing TranslationBinding for the target element', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    const expressionParser = container.get(IExpressionParser);
    const targetElement = DOM.createElement('span');
    const binding = new TranslationBinding(targetElement, {} as unknown as IObserverLocator, container);
    const renderable = ({ bindings: [binding] } as unknown as IController);

    const from = expressionParser.parse('simple.key', BindingType.CustomCommand);
    const callBindingInstruction: ICallBindingInstruction = { from } as unknown as ICallBindingInstruction;
    sut.render(
      LifecycleFlags.none,
      DOM,
      container as unknown as IRenderContext,
      renderable,
      targetElement,
      callBindingInstruction);

    assert.equal(binding.expr, from);
  });
});