Integrate update function with Var

But still don’t expose `Var`, so that it would be still passed as a Rx.

1 files changed, 28 insertions, 28 deletions

diff --git a/src/example.ts b/src/example.ts
index 360bf8b..1362fbd 100644
--- a/src/example.ts
+++ b/src/example.ts
@@ -1,11 +1,11 @@
 import { h, withVar, mount, RxAble } from 'rx'
 
 const imbricatedMaps =
-  withVar(1, (counter, updateCounter) => [
+  withVar(1, counter => [
     counterComponent({
       value: counter,
-      onSub: () => updateCounter(n => n - 1),
-      onAdd: () => updateCounter(n => n + 1)
+      onSub: () => counter.update(n => n - 1),
+      onAdd: () => counter.update(n => n + 1)
     }),
     counter.map(c1 => {
       console.log('c1')
@@ -20,11 +20,11 @@ const imbricatedMaps =
   ])
 
 const flatMap =
-  withVar(1, (counter, updateCounter) => [
+  withVar(1, counter => [
     counterComponent({
       value: counter,
-      onSub: () => updateCounter(n => n - 1),
-      onAdd: () => updateCounter(n => n + 1)
+      onSub: () => counter.update(n => n - 1),
+      onAdd: () => counter.update(n => n + 1)
     }),
     counter.flatMap(c1 => {
       console.log('c1')
@@ -36,21 +36,21 @@ const flatMap =
   ])
 
 const checkbox =
-  withVar(false, (checked, update) => [
+  withVar(false, checked => [
     checkboxComponent({
       label: 'Checkbox',
       isChecked: checked,
-      onCheck: (isChecked: boolean) => update(_ => isChecked),
+      onCheck: (isChecked: boolean) => checked.update(_ => isChecked),
     }),
     checked.map(isChecked => isChecked ? 'C’est coché!' : 'Ça n’est pas coché')
   ])
 
 const rxChildren =
-  withVar(3, (count, update) => [
+  withVar(3, count => [
     h('input', {
       type: 'number',
       value: count,
-      onchange: (event: Event) => update(_ => parseInt((event.target as HTMLInputElement).value))
+      onchange: (event: Event) => count.update(_ => parseInt((event.target as HTMLInputElement).value))
     }),
     h('div', 'FOO'),
     count.map(n => Array(n).fill(null).map((_, i) => h('div', `A ${i}!`))),
@@ -60,33 +60,33 @@ const rxChildren =
   ])
 
 const nodesCancel =
-  withVar(false, (checked, update) => [
+  withVar(false, checked => [
     checkboxComponent({
       label: 'Checkbox',
       isChecked: checked,
-      onCheck: (isChecked: boolean) => update(_ => isChecked),
+      onCheck: (isChecked: boolean) => checked.update(_ => isChecked),
     }),
     checked.map(isChecked => isChecked ? rxChildren : undefined)
   ])
 
 const counters =
-  withVar<Array<number>>([], (counters, update) => {
+  withVar<Array<number>>([], counters => {
     return [
       counterComponent({
         value: counters.map(cs => cs.length),
-        onSub: () => update(cs => cs.slice(0, -1)),
-        onAdd: () => update(cs => cs.concat(0))
+        onSub: () => counters.update(cs => cs.slice(0, -1)),
+        onAdd: () => counters.update(cs => cs.concat(0))
       }),
       h('hr'),
       h('div', { style: 'margin-top: 1rem' }, counters.map(cs =>
         cs.map((c, i) =>
           counterComponent({
             value: c,
-            onSub: () => update(cs => {
+            onSub: () => counters.update(cs => {
               cs[i] = c - 1
               return cs
             }),
-            onAdd: () => update(cs => {
+            onAdd: () => counters.update(cs => {
               cs[i] = c + 1
               return cs
             })
@@ -97,25 +97,25 @@ const counters =
   })
 
 const rows =
-  withVar(1, (count, updateCount) => [
+  withVar(1, count => [
     h('input', {
       type: 'number',
       value: count,
-      onchange: (event: Event) => updateCount(_ => parseInt((event.target as HTMLInputElement).value))
+      onchange: (event: Event) => count.update(_ => parseInt((event.target as HTMLInputElement).value))
     }),
     count.map(n => Array(n).fill(null).map((_, i) => h('div', i)))
   ])
 
 const chrono =
-  withVar(false, (isChecked, updateCheck) => [
+  withVar(false, isChecked => [
     checkboxComponent({
       label: 'Show counter',
       isChecked,
-      onCheck: b => updateCheck(_ => b)
+      onCheck: b => isChecked.update(_ => b)
     }),
-    isChecked.map(b => b && withVar(0, (elapsed, updateElapsed) => {
+    isChecked.map(b => b && withVar(0, elapsed => {
       const interval = window.setInterval(
-        () => updateElapsed(n => n + 1),
+        () => elapsed.update(n => n + 1),
         1000
       )
       return h(
@@ -127,8 +127,8 @@ const chrono =
   ])
 
 const doubleMapChild = 
-  withVar(true, (isEven, updateIsEven) =>
-    withVar('', (search, updateSearch) => {
+  withVar(true, isEven =>
+    withVar('', search => {
       const books = [...Array(50).keys()]
 
       const filteredBooks = isEven.flatMap(f => search.map(s =>
@@ -140,11 +140,11 @@ const doubleMapChild =
         checkboxComponent({
           label: 'Even?',
           isChecked: isEven,
-          onCheck: checked => updateIsEven(_ => checked)
+          onCheck: checked => isEven.update(_ => checked)
         }),
         h(
           'input',
-          { oninput: (event: Event) => updateSearch(_ => (event.target as HTMLInputElement).value)
+          { oninput: (event: Event) => search.update(_ => (event.target as HTMLInputElement).value)
           , style: 'margin-left: 1rem'
           }
         ),
@@ -163,7 +163,7 @@ const doubleMapChild =
 
 const view = h('main',
   h('h1', 'Rx'),
-  doubleMapChild
+  chrono
 )
 
 mount(view)