import {Observable, map} from '../../src/Observable';
import {h} from '../../src/DOMBuilder';
import run from '../../src/run';


const app = (input$: Observable<string>) => {
  let inputOn;

  const DOM = h('div', [
    h('span', ['Hello ']), h('span', [input$]),
    h('br'),
    h('label', ['Name: ']),
    {on: inputOn} = h('input')
  ]);

  const inputEvent$ = inputOn('input');
  input$.def = map(ev => ev.target.value, inputEvent$);

  return DOM;
};

run('body', app);


import {Observable, map} from '../../src/Observable';
import {h} from '../../src/DOMBuilder';
import run from '../../src/run';


const app = (input$: Observable<string>) => {
  let inputOn;

  const DOM = h('div', [
    h('label', ['Name: ']),
    h('br'),
    h('span', ['Hello ']), h('span', [input$]),
    h('h1', [
      {on: inputOn} = h('input'),
      input$
    ])
  ]);

  const inputEvent$ = inputOn('input');
  input$.def = map(ev => ev.target.value, inputEvent$);

  return DOM;
};

run('body', app);


--- 
+++ 
@@ -7,13 +7,10 @@
   let inputOn;
 
   const DOM = h('div', [
+    h('span', ['Hello ']), h('span', [input$]),
+    h('br'),
     h('label', ['Name: ']),
-    h('br'),
-    h('span', ['Hello ']), h('span', [input$]),
-    h('h1', [
-      {on: inputOn} = h('input'),
-      input$
-    ])
+    {on: inputOn} = h('input')
   ]);
 
   const inputEvent$ = inputOn('input');
Tweak DOM so input isn't inside h1
