Rename output to use and a few other tweaks

examples/continuous-time/index.ts

@@ -37,7 +37,7 @@ const model = fgo(function*({ snapClick }: ViewOut) {
 const view = ({ time, message }: ToView) => [
   h1("Continuous time example"),
   p(map(formatTime, time)),
-  p(button("Click to snap time").output({ snapClick: "click" })),
+  p(button("Click to snap time").use({ snapClick: "click" })),
   p(message)
 ];
 

examples/counters/src/index.ts

@@ -19,7 +19,7 @@ const selectorButton = (n: AppId, selected: Behavior<AppId>) =>
         class: ["btn btn-default", { active: selected.map((m) => n === m) }]
       },
       `Version ${n}`
-    ).output((o) => ({ selectVersion: o.click.mapTo(n).log(n) }))
+    ).use((o) => ({ selectVersion: o.click.mapTo(n).log(n) }))
   );
 
 type FromView = {
@@ -34,16 +34,16 @@ const versionSelector = component<FromView, FromModel>(
   fgo(function*({ selectVersion }) {
     const selected = yield stepper("1", selectVersion);
     return div({ class: "btn-group" }, [
-      selectorButton("1", selected).output({ selectVersion: "selectVersion" }),
-      selectorButton("2", selected).output({ selectVersion: "selectVersion" }),
-      selectorButton("3", selected).output({ selectVersion: "selectVersion" }),
-      selectorButton("4", selected).output({ selectVersion: "selectVersion" })
-    ]).result({ selected });
+      selectorButton("1", selected).use({ selectVersion: "selectVersion" }),
+      selectorButton("2", selected).use({ selectVersion: "selectVersion" }),
+      selectorButton("3", selected).use({ selectVersion: "selectVersion" }),
+      selectorButton("4", selected).use({ selectVersion: "selectVersion" })
+    ]).output({ selected });
   })
 );
 
 const main = go(function*() {
-  const { selected } = yield versionSelector.output({ selected: "selected" });
+  const { selected } = yield versionSelector.use({ selected: "selected" });
   const currentApp = selected.map((n: AppId) => numberToApp[n]);
   yield div(currentApp);
   return {};

examples/counters/src/version2.ts

@@ -18,11 +18,11 @@ const counter = component<On>(
       "Counter ",
       count,
       " ",
-      button({ class: "btn btn-default" }, " + ").output({
+      button({ class: "btn btn-default" }, " + ").use({
         incrementClick: "click"
       }),
       " ",
-      button({ class: "btn btn-default" }, " - ").output({
+      button({ class: "btn btn-default" }, " - ").use({
         decrementClick: "click"
       })
     ]);

examples/counters/src/version3.ts

@@ -33,14 +33,14 @@ const counter = () =>
         "Counter ",
         count,
         " ",
-        button({ class: "btn btn-default" }, " + ").output({
+        button({ class: "btn btn-default" }, " + ").use({
           incrementClick: "click"
         }),
         " ",
-        button({ class: "btn btn-default" }, " - ").output({
+        button({ class: "btn btn-default" }, " - ").use({
           decrementClick: "click"
         })
-      ]).result({ count });
+      ]).output({ count });
     })
   );
 
@@ -62,7 +62,7 @@ const counterList = component<ListOn>(
     );
     return [
       h1("Counters"),
-      button({ class: "btn btn-primary" }, "Add counter").output({
+      button({ class: "btn btn-primary" }, "Add counter").use({
         addCounter: "click"
       }),
       br,

examples/counters/src/version4.ts

@@ -43,18 +43,18 @@ const counter = (id: Id) =>
         "Counter ",
         count,
         " ",
-        button({ class: "btn btn-default" }, " + ").output({
+        button({ class: "btn btn-default" }, " + ").use({
           incrementClick: "click"
         }),
         " ",
-        button({ class: "btn btn-default" }, " - ").output({
+        button({ class: "btn btn-default" }, " - ").use({
           decrementClick: "click"
         }),
         " ",
-        button({ class: "btn btn-default" }, "x").output({
+        button({ class: "btn btn-default" }, "x").use({
           deleteClick: "click"
         })
-      ]).result({ count, deleteS });
+      ]).output({ count, deleteS });
     })
   );
 
@@ -90,12 +90,12 @@ const counterList = component<ToModel>(
     return [
       h1("Counters"),
       p(["Sum ", sum]),
-      button({ class: "btn btn-primary" }, "Add counter").output({
+      button({ class: "btn btn-primary" }, "Add counter").use({
         addCounter: "click"
       }),
       br,
       ul(
-        list((n) => counter(n).output((o) => o), counterIds).output((o) => ({
+        list((n) => counter(n).use((o) => o), counterIds).use((o) => ({
           listOut: o
         }))
       )

examples/drag/src/index.ts

@@ -68,7 +68,7 @@ const boxView = ({ isBeingDragged, position }: BoxViewInput, color: string) =>
       left: position.map(({ x }) => x + "px"),
       top: position.map(({ y }) => y + "px")
     }
-  }).output({ startDrag: "mousedown", endDrag: "mouseup" });
+  }).use({ startDrag: "mousedown", endDrag: "mouseup" });
 
 const box = modelView(boxModel, boxView);
 

examples/fahrenheit-celsius/index.ts

@@ -1,14 +1,9 @@
-import { Behavior, combine, stepper, Stream } from "@funkia/hareactive";
-import { elements, fgo, modelView, runComponent } from "../../src";
+import { combine, Stream } from "@funkia/hareactive";
+import { elements, runComponent, component } from "../../src";
 
 const { input, div, label } = elements;
 
-type Model = {
-  celsius: Behavior<number>;
-  fahren: Behavior<number>;
-};
-
-type View = {
+type On = {
   fahrenChange: Stream<string>;
   celsiusChange: Stream<string>;
 };
@@ -18,36 +13,33 @@ const getValue = (ev: any) => ev.currentTarget.value;
 const parseNumbers = (s: Stream<string>) =>
   s.map(parseFloat).filter((n) => !isNaN(n));
 
-const model = fgo(function*({ fahrenChange, celsiusChange }: View) {
-  const fahrenNrChange = parseNumbers(fahrenChange);
-  const celsiusNrChange = parseNumbers(celsiusChange);
-  const celsius = yield stepper(
-    0,
-    combine(celsiusNrChange, fahrenNrChange.map((f) => (f - 32) / 1.8))
+const main = component<On>((on) => {
+  const fahrenNrChange = parseNumbers(on.fahrenChange);
+  const celsiusNrChange = parseNumbers(on.celsiusChange);
+  const celsius = combine(
+    celsiusNrChange,
+    fahrenNrChange.map((f) => (f - 32) / 1.8)
   );
-  const fahren = yield stepper(
-    0,
-    combine(fahrenNrChange, celsiusNrChange.map((c) => (c * 9) / 5 + 32))
+  const fahren = combine(
+    fahrenNrChange,
+    celsiusNrChange.map((c) => (c * 9) / 5 + 32)
   );
-  return { celsius, fahren };
-});
 
-const view = ({ fahren, celsius }: Model) =>
-  div([
+  return div([
     div([
       label("Fahrenheit"),
-      input({ value: fahren }).output({ fahrenInput: "input" })
+      input({ value: fahren }).use((o) => ({
+        fahrenChange: o.input.map(getValue)
+      }))
     ]),
     div([
       label("Celsius"),
-      input({ value: celsius }).output({ celsiusInput: "input" })
+      input({ value: celsius }).use((o) => ({
+        celsiusChange: o.input.map(getValue)
+      }))
     ])
-  ]).output((o) => ({
-    fahrenChange: o.fahrenInput.map(getValue),
-    celsiusChange: o.celsiusInput.map(getValue)
-  }));
-
-const main = modelView<Model, View>(model, view)();
+  ]);
+});
 
 // `runMain` should be the only impure function in application code
 runComponent("#mount", main);

examples/simple/index.ts

@@ -10,7 +10,7 @@ const app = component<On>((on) => {
   const isValid = on.email.map(isValidEmail);
   return [
     span("Please enter an email address: "),
-    input().output({ email: "value" }),
+    input().use({ email: "value" }),
     div(["The address is ", isValid.map((b) => (b ? "valid" : "invalid"))])
   ];
 });

examples/todo/src/Item.ts

@@ -91,15 +91,15 @@ export default (props: Props) =>
           checkbox({
             class: "toggle",
             props: { checked: completed }
-          }).output({ toggleTodo: "checkedChange" }),
-          label(taskName).output({ startEditing: "dblclick" }),
-          button({ class: "destroy" }).output({ deleteClicked: "click" })
+          }).use({ toggleTodo: "checkedChange" }),
+          label(taskName).use({ startEditing: "dblclick" }),
+          button({ class: "destroy" }).use({ deleteClicked: "click" })
         ]),
         input({
           class: "edit",
           value: H.snapshot(on.taskName, on.startEditing),
           actions: { focus: on.startEditing }
-        }).output((o) => ({
+        }).use((o) => ({
           newName: o.value,
           stopEditing: H.combine(
             o.keyup.filter((ev) => ev.keyCode === enter).mapTo(true),
@@ -108,7 +108,7 @@ export default (props: Props) =>
           )
         }))
       ])
-        .output(() => ({ taskName, editing }))
-        .result({ destroyItemId, completed, id: props.id });
+        .use(() => ({ taskName, editing }))
+        .output({ destroyItemId, completed, id: props.id });
     })
   );

examples/todo/src/TodoApp.ts

@@ -112,7 +112,7 @@ export const app = component<FromView>(
       section({ class: "todoapp" }, [
         header({ class: "header" }, [
           h1("todos"),
-          todoInput.output({ addItem: "addItem" })
+          todoInput.use({ addItem: "addItem" })
         ]),
         section(
           {
@@ -123,22 +123,20 @@ export const app = component<FromView>(
               class: "toggle-all",
               attrs: { id: "toggle-all" },
               props: { checked: areAllCompleted }
-            }).output({ toggleAll: "checkedChange" }),
+            }).use({ toggleAll: "checkedChange" }),
             label({ attrs: { for: "toggle-all" } }, "Mark all as complete"),
             ul(
               { class: "todo-list" },
               list(
                 (n) =>
-                  item({ toggleAll: on.toggleAll, currentFilter, ...n }).output(
-                    {
-                      completed: "completed",
-                      destroyItemId: "destroyItemId",
-                      id: "id"
-                    }
-                  ),
+                  item({ toggleAll: on.toggleAll, currentFilter, ...n }).use({
+                    completed: "completed",
+                    destroyItemId: "destroyItemId",
+                    id: "id"
+                  }),
                 todoNames,
                 (o) => o.id
-              ).output((o) => ({ itemOutputs: o }))
+              ).use((o) => ({ itemOutputs: o }))
             )
           ]
         ),
@@ -147,7 +145,7 @@ export const app = component<FromView>(
           areAnyCompleted,
           currentFilter,
           hidden
-        }).output({ clearCompleted: "clearCompleted" })
+        }).use({ clearCompleted: "clearCompleted" })
       ]),
       footer({ class: "info" }, [
         p("Double-click to edit a todo"),

examples/todo/src/TodoFooter.ts

@@ -22,7 +22,7 @@ const filterItem = (
           class: { selected: currentFilter.map((s) => s === path) }
         },
         name
-      ).output({ click: "click" })
+      ).use({ click: "click" })
     )
   );
 
@@ -41,7 +41,7 @@ const todoFooter = (props: Props) =>
       button(
         { class: ["clear-completed", { hidden: props.areAnyCompleted }] },
         "Clear completed"
-      ).output({ clearCompleted: "click" })
+      ).use({ clearCompleted: "click" })
     ])
   );
 

examples/todo/src/TodoInput.ts

@@ -31,10 +31,10 @@ export default component<FromView, Out>(
       autocomplete: "off",
       placeholder: "What needs to be done?"
     })
-      .output((o) => ({
+      .use((o) => ({
         value: o.value,
         enterPressed: o.keyup.filter((ev) => ev.keyCode === KEYCODE_ENTER)
       }))
-      .result({ addItem });
+      .output({ addItem });
   })
 );

examples/zip-codes/index.ts

@@ -89,7 +89,7 @@ const view = ({ status }: ToView) => [
   span("Please type a valid US zip code: "),
   input({
     props: { placeholder: "Zip code" }
-  }).output({ zipCode: "value" }),
+  }).use({ zipCode: "value" }),
   br,
   span(status)
 ];