mobx and yo-yo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>John Lindquist</title>
    <script>console.clear();</script>
    <script src="https://npmcdn.com/systemjs/dist/system.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<script src="systemjs.config.js"></script>
<script>System.import('app');</script>
</body>
</html>

import yo from 'yo-yo';
import {observable, autorun} from "mobx";

const appState = observable({
    name: "Susan",
    age: 42
});


const inputComp = state =>
  yo`<input value="${state.name}" oninput=${ev => state.name = ev.target.value}>`

const buttonComp = state => 
  yo`<button onclick=${ev => state.age++}>Age up!</button>`;

const appComp = state => yo`<div>
  ${inputComp(state)}
  ${buttonComp(state)}
  <hr>
  ${state.name} is ${state.age}
</div>`;

const ref = document.body.appendChild(appComp(appState));

autorun(() => yo.update(ref, appComp(appState)));

:root{
  font-family: Arial;
}

(function(global) {
  const map = {
    'app': 'app',
    'bel': 'https://npmcdn.com/bel',
    'global/document': 'https://npmcdn.com/global/document',
    'hyperx': 'https://npmcdn.com/hyperx',
    'hyperscript-attribute-to-property': 'https://npmcdn.com/hyperscript-attribute-to-property',
    'min-document': 'https://npmcdn.com/min-document',
    'mobx': 'https://npmcdn.com/mobx',
    'morphdom': 'https://npmcdn.com/morphdom',
    'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript': 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js',
    'yo-yo': 'https://npmcdn.com/yo-yo@1.2.2'
 };

  const packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'symbol-observable': {main: 'index.js'},
    'yo-yo': {main: 'index.js'}
  };

  const config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },

    map: map,
    packages: packages
  }

  System.config(config);

})(this);