naive_tree_apprun_1.tsx

import app, { Component, EventOptions } from 'apprun';

export class TreeComponent extends Component {
  view = (state) => {
    var li = <li>
      {state.id || "1"}
      <button onclick={() => this.run("-1")}>-1</button>
      <button onclick={() => this.run("+1")}>+1</button>
    </li>;
    if (state['sub']) {
        li.children.push(<ul>
            {state.sub.map((childState)=> app.createElement(TreeComponent, childState, {history: true}))}
        </ul>)
    }
    return li
  }
  update = {
    '+1': (state) => {
      var sub = state.sub?state.sub.slice():[]
      sub.push({"id": (state.id||"1") + "." + (sub.length+1), "sub": []})
      return {...state, sub}
    },
    '-1': (state) => {
      var sub = state.sub || []
      var len = sub.length
      if (len) {
        sub = sub.slice(0, len-1)
      }
      return {...state, sub}
    },
  }
}