Init version

1 files changed, 171 insertions, 0 deletions

diff --git a/src/example.ts b/src/example.ts
new file mode 100644
index 0000000..c23a4eb
--- /dev/null
+++ b/src/example.ts
@@ -0,0 +1,171 @@
+import { h, withVar, mount, RxAble } from 'rx'
+
+const imbricatedMaps =
+  withVar(1, (counter, updateCounter) => [
+    counterComponent({
+      value: counter,
+      onSub: () => updateCounter(n => n - 1),
+      onAdd: () => updateCounter(n => n + 1)
+    }),
+    counter.map(c1 => {
+      console.log('c1')
+      return [
+        h('div', 'Inside first count'),
+        counter.map(c2 => {
+          console.log('c2')
+          return h('div', `Inside second count ${c2}`)
+        })
+      ]
+    })
+  ])
+
+const flatMap =
+  withVar(1, (counter, updateCounter) => [
+    counterComponent({
+      value: counter,
+      onSub: () => updateCounter(n => n - 1),
+      onAdd: () => updateCounter(n => n + 1)
+    }),
+    counter.flatMap(c1 => {
+      console.log('c1')
+      return counter.map(c2 => {
+        console.log('c2')
+        return h('div', `Inside second count ${c2}`)
+      })
+    })
+  ])
+
+const checkbox =
+  withVar(false, (checked, update) => [
+    checkboxComponent({
+      label: 'Checkbox',
+      isChecked: checked,
+      onCheck: (isChecked: boolean) => update(_ => isChecked),
+    }),
+    checked.map(isChecked => isChecked ? 'C’est coché!' : 'Ça n’est pas coché')
+  ])
+
+const rxChildren =
+  withVar(3, (count, update) => [
+    h('input', {
+      type: 'number',
+      value: count,
+      onchange: (event: Event) => update(_ => parseInt((event.target as HTMLInputElement).value))
+    }),
+    h('div', 'FOO'),
+    count.map(n => Array(n).fill(null).map((_, i) => h('div', `A ${i}!`))),
+    h('div', 'BAR'),
+    count.map(n => Array(n).fill(null).map((_, i) => h('div', `B ${i}!`))),
+    h('div', 'BAZ')
+  ])
+
+const nodesCancel =
+  withVar(false, (checked, update) => [
+    checkboxComponent({
+      label: 'Checkbox',
+      isChecked: checked,
+      onCheck: (isChecked: boolean) => update(_ => isChecked),
+    }),
+    checked.map(isChecked => isChecked ? rxChildren : undefined)
+  ])
+
+const counters =
+  withVar<Array<number>>([], (counters, update) => {
+    return [
+      counterComponent({
+        value: counters.map(cs => cs.length),
+        onSub: () => update(cs => cs.slice(0, -1)),
+        onAdd: () => 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 => {
+              cs[i] = c - 1
+              return cs
+            }),
+            onAdd: () => update(cs => {
+              cs[i] = c + 1
+              return cs
+            })
+          })
+        )
+      ))
+    ]
+  })
+
+const rows =
+  withVar(1, (count, updateCount) => [
+    h('input', {
+      type: 'number',
+      value: count,
+      onchange: (event: Event) => updateCount(_ => parseInt((event.target as HTMLInputElement).value))
+    }),
+    count.map(n => Array(n).fill(null).map((_, i) => h('div', i)))
+  ])
+
+const chrono =
+  withVar(false, (isChecked, updateCheck) => [
+    checkboxComponent({
+      label: 'Show counter',
+      isChecked,
+      onCheck: b => updateCheck(_ => b)
+    }),
+    isChecked.map(b => b && withVar(0, (elapsed, updateElapsed) => {
+      const interval = window.setInterval(
+        () => updateElapsed(n => n + 1),
+        1000
+      )
+      return h(
+        'div',
+        { onunmount: () => clearInterval(interval) },
+        elapsed
+      )
+    }))
+  ])
+
+const view = h('main',
+  h('h1', 'Rx'),
+  chrono
+)
+
+mount(view)
+
+// Checkbox
+
+interface CheckboxParams {
+  label: RxAble<string>
+  isChecked: RxAble<boolean>
+  onCheck: (isChecked: boolean) => void
+}
+
+function checkboxComponent({ label, isChecked, onCheck }: CheckboxParams) {
+  return h('label',
+    h('input',
+      { type: 'checkbox',
+        onchange: (event: Event) => onCheck((event.target as HTMLInputElement).checked),
+        checked: isChecked,
+      }
+    ),
+    label
+  )
+}
+
+// Counter
+
+interface CounterParams {
+  value: RxAble<number>
+  onAdd: () => void
+  onSub: () => void
+}
+
+function counterComponent({ value, onAdd, onSub}: CounterParams) {
+  return h('div',
+    [ h('span', { style: 'margin-right: 5px' }, value),
+      h('button', { onclick: () => onSub() }, '-'),
+      h('button', { onclick: () => onAdd() }, '+'),
+    ]
+  )
+}