@danielkalen/simplybind/comparison/dist/bower_components/aurelia-binding/doc/example/binding-how-it-works/ast/expression.html

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

<template>
  <style>
    ul.expression-tree {
      padding: 0;
      margin: 0;
      list-style-type: none;
      position: relative;
      font-family: sans-serif;
    }

    ul.expression-tree li {
      list-style-type: none;
      border-left: 2px solid #808080;
      margin-left: 1em;
    }

    ul.expression-tree li div {
      padding-left: 1em;
      position: relative;
    }

    ul.expression-tree li div::before {
      content: '';
      position: absolute;
      top: 0;
      left: -2px;
      bottom: 50%;
      width: 0.75em;
      border: 2px solid #808080;
      border-top: 0 none transparent;
      border-right: 0 none transparent;
    }

    ul.expression-tree > li:last-child {
      border-left: 2px solid transparent;
    }

    .expression-type {
      color: blue;
      font-weight: bold;
    }

    .expression-role {
      color: green;
    }

    .expression-text {
      font-family: monospace;
      color: #808080;
    }
  </style>
  <ul class="expression-tree">
    <div>
      <span class="expression-type">${type}</span>
      <span class="expression-role">[${value.role}]</span>
      <code class="expression-text">${value.expression}</code>
    </div>
    <li repeat.for="child of children">
      <expression value.bind="child"></expression>
    </li>
  </ul>
</template>