@realglebivanov/reactive 1.0.3 → 1.0.4

package/README.md

@@ -12,7 +12,9 @@ import {
     mapObservable,
     router,
     tags,
-    dedupObservable
+    dedupObservable,
+    tag,
+    once
 } from "@realglebivanov/reactive";
 
 import { ReactiveArray } from "@realglebivanov/reactive";
@@ -43,7 +45,7 @@ const counter = () => component({
         imageSource$: mapObservable(
             (hard) => hard ? "KashaHard.gif" : "Kasha.png",
             dedupObservable(hard$)),
-        hexCounter$: mapObservable((x) => x.toString(2), count$)
+        hexCounter$: mapObservable((x) => x.toString(16), count$)
     }),
     render: function ({ count$, hard$, veryHard$, imageSource$, hexCounter$ }) {
         const onClick = () => {
@@ -65,22 +67,27 @@ const counter = () => component({
 });
 
 const shoppingForm = () => component({
-    render: () => div(
-        div(span('Name: '), input('text').att('id', 'itemName')),
-        div(span('Price: '), input('text').att('id', 'itemPrice')),
-        button(span('Add')).clk(() => {
-            const itemName = document.getElementById('itemName') as HTMLInputElement;
-            const itemPrice = document.getElementById('itemPrice') as HTMLInputElement;
-
-            if (itemName.value == "" || itemPrice.value == "") return;
-
-            shoppingItems.push({
-                name: itemName.value,
-                price$: observable(itemPrice.value)
-            });
-
-            itemName.value = "";
-            itemPrice.value = "";
+    observables: () => ({
+        name$: observable(''),
+        price$: observable(''),
+    }),
+    derivedObservables: ({ name$, price$ }) => ({
+        formInvalid$:
+            mapObservable((name, price) => !!!name || !!!price, name$, price$)
+    }),
+    render: ({ name$, price$, formInvalid$ }) => div(
+        cond({
+            if$: formInvalid$,
+            otherwise: () => div(tag('h4', template`Pending item: ${name$} : ${price$}`))
+        }),
+        div(span('Name: '), input('text').att('id', 'itemName').model$(name$)),
+        div(span('Price: '), input('text').att('id', 'itemPrice').model$(price$)),
+        button(span('Add')).prop$('disabled', formInvalid$).clk(() => {
+            once((name, price) => {
+                shoppingItems.push({ name, price$: observable(price) });
+                name$.update((_) => "");
+                price$.update((_) => "");
+            }, name$, price$);
         })
     )
 });
@@ -101,7 +108,7 @@ const shoppingList = () => component({
 
 const exampleRouter = router({
     "/": div(
-        h1("Grecha.js"),
+        h1("Reactive"),
         div(a("Foo").att("href", "#/foo")),
         div(a("Bar").att("href", "#/bar")),
         counter(),
@@ -136,7 +143,6 @@ function numberToHexColor(number: number) {
 
 exampleRouter.mount(document.getElementById('entry')!);
 exampleRouter.activate();
-
 ```
 ## Restrictions & Edge Cases
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realglebivanov/reactive",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A simple and permissive observable-driven UI toolkit",
   "type": "module",
   "main": "./dist/index.js",