calculator.jsx

// Input
function NumberPad({ onPadPressed } = props) {
  let keys = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  return keys.map(digit => <button key={digit} onClick={(event) => { onPadPressed({ digit: digit }); }}>{key}</button>);
}

function Calculator({ result, set} = props) {
  return <div style={{ backgroundColor: 'gray' }}>
           <input type="text" readOnly="true" value={result} />
           <NumberPad onPadPressed={(event) => {
             set({ result: result + event.digit });
           }} />
         </div>;
}

export function Main(props) {
 return <Calculator result={0} /> 
}

// Transform 
function NumberPad({ onPadPressed, set } = props, root) {
  let keys = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  return keys.map(digit => {
    elementOpen('button', digit, null, 'onclick', (event) => { onPadPressed({ digit: digit }); });
      text(digit);
    elementClose('button');
  });
}
  
function Calculator({ result, set } = props, root) {
  elementOpen('div', null, null, 
   'style', {
      backgroundColor: gray 
    });
  elementVoid('input', null, null, 'type', 'text', 'readonly', 'true', 'value', result);
  NumberPad({ onPadPressed:(event) => { set({ result: result + event.digit }); }, set: function set(props) {
    patch(root, Calculator, props);
  }});
  elementClose('div');
}
  
export function Main(props, root) {
  Calculator({ result: 0, set: function set(props) {
    patch(root, Main, props);
  }}, root);
}