How to use @aurelia/runtime-html - 10 common examples

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 _

//   let cmd = attr.slice(lastIdx + 1);
                        //   cmd = cmd ? kebabCase(cmd) : 'bind';
                        //   el.setAttribute(`${kebabCase(attr.slice(0, lastIdx))}.${cmd}`, value);
                        // }
                    }
                }
            }
        }
        const appender = el.content != null ? el.content : el;
        for (const child of children) {
            if (child == null) {
                continue;
            }
            if (Array.isArray(child)) {
                for (const child_child of child) {
                    appender.appendChild(runtime_html_1.DOM.isNodeInstance(child_child) ? child_child : runtime_html_1.DOM.createTextNode(`${child_child}`));
                }
            }
            else {
                appender.appendChild(runtime_html_1.DOM.isNodeInstance(child) ? child : runtime_html_1.DOM.createTextNode(`${child}`));
            }
        }
        return el;
    };
});

braces[0] = `${getPrefix(constructor, tag, 'Object')}{`;
                }
            }
        }
        if (recurseTimes > ctx.depth && ctx.depth !== null) {
            return ctx.stylize(`[${getCtxStyle(constructor, tag)}]`, 'special');
        }
        recurseTimes += 1;
        ctx.seen.push(value);
        ctx.currentDepth = recurseTimes;
        let output;
        const indentationLvl = ctx.indentationLvl;
        try {
            output = formatter(ctx, value, recurseTimes, keys, braces);
            let $key;
            const isNotNode = !(value instanceof runtime_html_1.DOM.Node);
            for (i = 0; i < keys.length; i++) {
                $key = keys[i];
                if (
                // Aurelia-specific:
                // Don't deep inspect html nodes, they are huge, have many irrelevant properties and make the diff unreadable
                (isNotNode || $key === 'textContent' || $key === 'outerHTML')
                    // Aurelia-specific:
                    // By convention we use $$calls for the CallCollection tracker, never deep inspect that as it's never relevant to the assertion
                    && $key !== '$$calls') {
                    output.push(formatProperty(ctx, value, recurseTimes, keys[i], extrasType));
                }
            }
        }
        catch (err) {
            return handleMaxCallStackSize(ctx, err, constructor, tag, indentationLvl);
        }

//   let cmd = attr.slice(lastIdx + 1);
          //   cmd = cmd ? kebabCase(cmd) : 'bind';
          //   el.setAttribute(`${kebabCase(attr.slice(0, lastIdx))}.${cmd}`, value);
          // }
        }
      }
    }
  }
  const appender = (el as HTMLTemplateElement).content != null ? (el as HTMLTemplateElement).content : el;
  for (const child of children) {
    if (child == null) {
      continue;
    }
    if (Array.isArray(child)) {
      for (const child_child of child) {
        appender.appendChild(DOM.isNodeInstance(child_child) ? child_child : DOM.createTextNode(`${child_child}`));
      }
    } else {
      appender.appendChild(DOM.isNodeInstance(child) ? child : DOM.createTextNode(`${child}`));
    }
  }
  return el;
};

// }
        }
      }
    }
  }
  const appender = (el as HTMLTemplateElement).content != null ? (el as HTMLTemplateElement).content : el;
  for (const child of children) {
    if (child == null) {
      continue;
    }
    if (Array.isArray(child)) {
      for (const child_child of child) {
        appender.appendChild(DOM.isNodeInstance(child_child) ? child_child : DOM.createTextNode(`${child_child}`));
      }
    } else {
      appender.appendChild(DOM.isNodeInstance(child) ? child : DOM.createTextNode(`${child}`));
    }
  }
  return el;
};

//   let cmd = attr.slice(lastIdx + 1);
                    //   cmd = cmd ? kebabCase(cmd) : 'bind';
                    //   el.setAttribute(`${kebabCase(attr.slice(0, lastIdx))}.${cmd}`, value);
                    // }
                }
            }
        }
    }
    const appender = el.content != null ? el.content : el;
    for (const child of children) {
        if (child == null) {
            continue;
        }
        if (Array.isArray(child)) {
            for (const child_child of child) {
                appender.appendChild(DOM.isNodeInstance(child_child) ? child_child : DOM.createTextNode(`${child_child}`));
            }
        }
        else {
            appender.appendChild(DOM.isNodeInstance(child) ? child : DOM.createTextNode(`${child}`));
        }
    }
    return el;
};
//# sourceMappingURL=h.js.map

compileChildNodes(parent) {
        if (parent.flags & 8192 /* hasChildNodes */) {
            const { childNodes } = parent;
            let childNode;
            const ii = childNodes.length;
            for (let i = 0; i < ii; ++i) {
                childNode = childNodes[i];
                if (childNode.flags & 128 /* isText */) {
                    this.instructionRows.push([new TextBindingInstruction(childNode.interpolation)]);
                }
                else if (childNode.flags & 32 /* isLetElement */) {
                    const bindings = childNode.bindings;
                    const instructions = [];
                    let binding;
                    const jj = bindings.length;
                    for (let j = 0; j < jj; ++j) {
                        binding = bindings[j];
                        instructions[j] = new LetBindingInstruction(binding.expression, binding.target);
                    }
                    this.instructionRows.push([new LetElementInstruction(instructions, childNode.toViewModel)]);
                }
                else {
                    this.compileParentNode(childNode);
                }
            }

private compilePlainAttribute(symbol: PlainAttributeSymbol): HTMLAttributeInstruction {
    if (symbol.command == null) {
      if (symbol.expression == null) {
        // a plain attribute on a surrogate
        return new SetAttributeInstruction(symbol.syntax.rawValue, symbol.syntax.target);
      } else {
        // a plain attribute with an interpolation
        return new InterpolationInstruction(symbol.expression as IInterpolationExpression, symbol.syntax.target);
      }
    } else {
      // a plain attribute with a binding command
      return symbol.command.compile(symbol) as HTMLAttributeInstruction;
    }
  }

private compilePlainAttribute(symbol: PlainAttributeSymbol): HTMLAttributeInstruction {
    if (symbol.command == null) {
      if (symbol.expression == null) {
        // a plain attribute on a surrogate
        return new SetAttributeInstruction(symbol.syntax.rawValue, symbol.syntax.target);
      } else {
        // a plain attribute with an interpolation
        return new InterpolationInstruction(symbol.expression as IInterpolationExpression, symbol.syntax.target);
      }
    } else {
      // a plain attribute with a binding command
      return symbol.command.compile(symbol) as HTMLAttributeInstruction;
    }
  }