hdomy fiddling

NotHdom.js

    const DomDriver = {};
    const assemble = () => null;
    const at = () => null;
    const range = () => null;
    const render = () => null;
    const set = () => null;
    
    const DEC = "intent:DECREMENT";
    const INC = "intent:INCREMENT";
    const ADD_COUNTER = "intent:ADD_COUNTER";
    
    const Counter = ({ t }, counter, lens) => [
      ["button", { onClick: [INC, lens], title: t["app.increment"] }, "+"],
      `${counter}`,
      ["button", { onClick: [DEC, lens], title: t["app.decrement"] }, "-"],
    ];
    
    const View = ({ t }, { count }) => [
      ["main#root",
        t["app.title"],
        ["ul.counters",
          range(0, count).map(
            (ix) => ["li", [Counter, at(["values", ix]), { class: "bam" }]],
          ),
        ],
        ["button", { onClick: [ADD_COUNTER, at(["count"])] }, t["app.addcounter"]],
      ],
    ];
    
    const add1 = (it) => it + 1;
    const sub1 = (it) => it - 1;
    
    const behavior = (intent, lens, { count, values }) => {
      switch (intent) {
        case DEC:
          return set(sub1, lens);
        case INC:
          return set(add1, lens);
        case ADD_COUNTER:
          return set(add1, lens);
        default:
          return null;
      }
    };
    
    const ctx = {
      t: {
        "app.addcounter": "Add Another Counter",
        "app.decrement": "Subtract One",
        "app.increment": "Add One",
      },
    };
    const App = assemble(View, behavior, ctx, DomDriver);
    
    render(App, document.querySelector("main"), {
      count: 2,
      values: [1, 2],
    });