1 files changed, 70 insertions, 25 deletions

diff --git a/src/example.ts b/src/example.ts
index 5a22419..9b19c28 100644
--- a/src/example.ts
+++ b/src/example.ts
@@ -1,7 +1,8 @@
-import { h, withState, mount, sequence2, RxAble } from 'rx'
+import { h, Html, RxAble } from 'rx'
+import * as rx from 'rx'
 
 const imbricatedMaps =
-  withState(1, counter => [
+  rx.withState(1, counter => [
     counterComponent({
       value: counter,
       onSub: () => counter.update(n => n - 1),
@@ -20,7 +21,7 @@ const imbricatedMaps =
   ])
 
 const flatMap =
-  withState(1, counter => [
+  rx.withState(1, counter => [
     counterComponent({
       value: counter,
       onSub: () => counter.update(n => n - 1),
@@ -36,17 +37,17 @@ const flatMap =
   ])
 
 const checkbox =
-  withState(false, checked => [
+  rx.withState(false, checked => [
     checkboxComponent({
       label: 'Checkbox',
       isChecked: checked,
       onCheck: (isChecked: boolean) => checked.update(_ => isChecked),
     }),
-    checked.map(isChecked => isChecked ? 'C’est coché!' : 'Ça n’est pas coché')
+    h('div', checked.map(isChecked => isChecked ? 'C’est coché!' : 'Ça n’est pas coché'))
   ])
 
 const rxChildren =
-  withState(3, count => [
+  rx.withState(3, count => [
     h('input', {
       type: 'number',
       value: count,
@@ -60,7 +61,7 @@ const rxChildren =
   ])
 
 const nodesCancel =
-  withState(false, checked => [
+  rx.withState(false, checked => [
     checkboxComponent({
       label: 'Checkbox',
       isChecked: checked,
@@ -70,7 +71,7 @@ const nodesCancel =
   ])
 
 const counters =
-  withState<Array<number>>([], counters => {
+  rx.withState<Array<number>>([], counters => {
     return [
       counterComponent({
         value: counters.map(cs => cs.length),
@@ -97,7 +98,7 @@ const counters =
   })
 
 const rows =
-  withState(1, count => [
+  rx.withState(1, count => [
     h('input', {
       type: 'number',
       value: count,
@@ -107,13 +108,13 @@ const rows =
   ])
 
 const chrono =
-  withState(false, isChecked => [
+  rx.withState(false, isChecked => [
     checkboxComponent({
       label: 'Show counter',
       isChecked,
       onCheck: b => isChecked.update(_ => b)
     }),
-    isChecked.map(b => b && withState(0, elapsed => {
+    isChecked.map(b => b && rx.withState(0, elapsed => {
       const interval = window.setInterval(
         () => elapsed.update(n => n + 1),
         1000
@@ -127,8 +128,8 @@ const chrono =
   ])
 
 const doubleMapChild =
-  withState(true, isEven =>
-    withState('', search => {
+  rx.withState(true, isEven =>
+    rx.withState('', search => {
       const books = [...Array(50).keys()]
 
       const filteredBooks = isEven.flatMap(f => search.map(s =>
@@ -162,9 +163,9 @@ const doubleMapChild =
   )
 
 const seq =
-  withState(0, a =>
-    withState(0, b =>
-      withState(0, c => [
+  rx.withState(0, a =>
+    rx.withState(0, b =>
+      rx.withState(0, c => [
         counterComponent({
           value: a,
           onSub: () => a.update(n => n - 1),
@@ -180,13 +181,13 @@ const seq =
           onSub: () => c.update(n => n - 1),
           onAdd: () => c.update(n => n + 1)
         }),
-        sequence2([a, b, c]).map(xs => xs.reduce((a, b) => a + b, 0))
+        rx.sequence2([a, b, c]).map(xs => xs.reduce((a, b) => a + b, 0))
       ])
     )
   )
 
 const indirectCheckbox =
-  withState(false, checked => [
+  rx.withState(false, checked => [
     checkboxComponent({
       label: 'C1',
       isChecked: checked,
@@ -199,13 +200,6 @@ const indirectCheckbox =
     })
   ])
 
-const view = h('main',
-  h('h1', 'Rx'),
-  indirectCheckbox
-)
-
-mount(document.body, view)
-
 // Checkbox
 
 interface CheckboxParams {
@@ -242,3 +236,54 @@ function counterComponent({ value, onAdd, onSub}: CounterParams) {
     ]
   )
 }
+
+// View
+
+interface Item {
+    name: string
+    html: Html
+}
+
+const view = rx.withState<string>('imbricatedMaps', exVar => {
+  const menuItem = ({ name }: Item) =>
+    h('li',
+      h('button',
+        {
+          onclick: () => exVar.update(_ => name),
+          className: exVar.map(ex => ex == name && 'selected')
+        },
+        name
+      )
+    )
+
+  const items: Array<Item> = [
+    { name: 'imbricatedMaps', html: imbricatedMaps },
+    { name: 'flatMap', html: flatMap },
+    { name: 'checkbox', html: checkbox },
+    { name: 'rxChildren', html: rxChildren },
+    { name: 'nodesCancel', html: nodesCancel },
+    { name: 'counters', html: counters },
+    { name: 'rows', html: rows },
+    { name: 'chrono', html: chrono },
+    { name: 'doubleMapChild', html: doubleMapChild },
+    { name: 'seq', html: seq },
+    { name: 'indirectCheckbox', html: indirectCheckbox },
+  ]
+
+  return [
+    h('header', h('h1', 'Rx')),
+    h('main',
+      h('nav',
+        h('ul', items.map(menuItem))
+      ),
+      h('section',
+        exVar.map(ex => {
+          const item = items.find(item => item.name == ex)
+          return item && item.html
+        })
+      )
+    )
+  ]
+})
+
+rx.mount(document.body, view)