@fun-land/fun-web 0.2.0 → 0.3.0

package/examples/todo-app/Todo.ts

@@ -1,9 +1,11 @@
+import { viewed } from "accessor";
 import {
   h,
-  bindProperty,
-  on,
   type Component,
   type FunState,
+  enhance,
+  bindPropertyTo,
+  onTo,
 } from "../../src/index";
 
 export interface TodoState {
@@ -18,62 +20,47 @@ export interface TodoProps {
   state: FunState<TodoState>;
 }
 
+// a special Accessor that reads as string but writes as number
+const stringNumberView = viewed(String, Number);
+
 export const Todo: Component<TodoProps> = (signal, { state, removeItem }) => {
+  const priorityState = state.prop("priority").focus(stringNumberView);
   // h is a much more ergonomic way of creating html but it's just document.createElement under the hood
-  const prioritySelect = h("select", {}, [
-    h("option", { value: "0" }, "High"),
-    h("option", { value: "1" }, "Low"),
-  ]);
-  // 😓 You can manually set initial state
-  prioritySelect.value = String(state.get().priority);
-  // 😓 and listen to when a state updates to update the element
-  state.prop("priority").subscribe(signal, (priority) => {
-    prioritySelect.value = String(priority);
-  });
-  // 😓 native event binding works but requires casting and dev must remember to pass signal so they don't leak memory
-  prioritySelect.addEventListener(
-    "change",
-    (e) => {
-      state.prop("priority").set(+(e.currentTarget as HTMLSelectElement).value);
-    },
-    { signal }
+  const prioritySelect = enhance(
+    h("select", {}, [
+      h("option", { value: "0" }, "High"),
+      h("option", { value: "1" }, "Low"),
+    ]),
+    bindPropertyTo("value", priorityState, signal),
+    // native event binding works but for easier event binding use `on` helper for better type inferrence and you can't forget to cleanup
+    onTo("change", (e) => priorityState.set(e.currentTarget.value), signal)
   );
 
-  const checkbox = h("input", { type: "checkbox" });
-  // 😎 For easier binding you can bind property to a reactive state
-  bindProperty(checkbox, "checked", state.prop("checked"), signal); // when state.checked updates the checkbox.checked updates
-  // 😎 For easier event binding use `on` helper for better type inferrence and you can't forget to cleanup
-  on(
-    checkbox,
-    "change",
-    (e) => {
-      state.prop("checked").set(e.currentTarget.checked);
-    },
-    signal
+  const checkedState = state.prop("checked");
+  const checkbox = enhance(
+    h("input", { type: "checkbox" }),
+    // use bindPropertyTo to automatically update a property when the focused state changes
+    bindPropertyTo("checked", checkedState, signal), // when state.checked updates the checkbox.checked updates
+    onTo("change", (e) => checkedState.set(e.currentTarget.checked), signal)
   );
 
   // 😎 or do both at the same time since they both return the element
-  const labelInput = on(
-    bindProperty(
-      h("input", {
-        type: "text",
-      }),
-      "value",
-      state.prop("label"),
-      signal
-    ),
-    "input",
-    (e) => {
-      state.prop("label").set(e.currentTarget.value);
-    },
-    signal
+  const labelState = state.prop("label");
+  const labelInput = enhance(
+    h("input", {
+      type: "text",
+    }),
+    bindPropertyTo("value", labelState, signal),
+    onTo("input", (e) => labelState.set(e.currentTarget.value), signal)
   );
 
   return h("li", {}, [
     checkbox,
     prioritySelect,
     labelInput,
-    // you can even inline to go tacit
-    on(h("button", { textContent: "X" }), "click", removeItem, signal),
+    enhance(
+      h("button", { textContent: "X" }),
+      onTo("click", removeItem, signal)
+    ),
   ]);
 };

package/examples/todo-app/todo-app.ts

@@ -2,11 +2,11 @@ import {
   h,
   funState,
   mount,
-  bindProperty,
-  on,
+  bindPropertyTo,
+  onTo,
   keyedChildren,
   type Component,
-  type FunState,
+  enhance,
 } from "../../src/index";
 import { prepend, flow, Acc } from "@fun-land/accessor";
 import { TodoState, Todo } from "./Todo";
@@ -36,9 +36,6 @@ const clearValue = stateFoci.prop("value").set("");
 
 const markAllDone = stateFoci.prop("items").all().prop("checked").set(true);
 
-const removeByKey = (key: string) =>
-  stateFoci.prop("items").mod((xs) => xs.filter((t) => t.key !== key));
-
 // ===== Todo App Component =====
 
 const initialState: TodoAppState = {
@@ -51,49 +48,49 @@ const initialState: TodoAppState = {
 
 const TodoApp: Component = (signal) => {
   const state = funState(initialState);
-  const input = bindProperty(
+  const input = enhance(
     h("input", {
       type: "text",
       value: state.get().value,
       placeholder: "Add a todo...",
     }),
-    "value",
-    state.prop("value"),
-    signal
-  );
-  on(
-    input,
-    "input",
-    (e) => {
-      state.prop("value").set(e.currentTarget.value);
-    },
-    signal
+    bindPropertyTo("value", state.prop("value"), signal),
+    onTo(
+      "input",
+      (e) => {
+        state.prop("value").set(e.currentTarget.value);
+      },
+      signal
+    )
   );
 
   const addBtn = h("button", { type: "submit", textContent: "Add" });
 
-  const form = on(
+  const form = enhance(
     h("form", {}, [input, addBtn]),
-    "submit",
-    (e) => {
-      e.preventDefault();
-      if (state.get().value.trim()) {
-        state.mod(flow(addItem, clearValue));
-      }
-    },
-    signal
+    onTo(
+      "submit",
+      (e) => {
+        e.preventDefault();
+        if (state.get().value.trim()) {
+          state.mod(flow(addItem, clearValue));
+        }
+      },
+      signal
+    )
   );
 
   // Because `on` returns the element you can pipe through
-  const markAllBtn = on(
+  const markAllBtn = enhance(
     h("button", { textContent: "Mark All Done" }),
-    "click",
-    () => {
-      state.mod(markAllDone);
-    },
-    signal
+    onTo(
+      "click",
+      () => {
+        state.mod(markAllDone);
+      },
+      signal
+    )
   );
-  const allDoneText = h("span", { textContent: "" });
 
   const todoList = h("ul", {});
   keyedChildren(todoList, signal, state.prop("items"), (row) =>
@@ -106,7 +103,7 @@ const TodoApp: Component = (signal) => {
   return h("div", { className: "todo-app" }, [
     h("h1", { textContent: "Todo App" }),
     form,
-    h("div", {}, [markAllBtn, allDoneText]),
+    h("div", {}, [markAllBtn, h("span", { textContent: "" })]),
     todoList,
   ]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fun-land/fun-web",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A web library for component-based development using fun-land",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -24,26 +24,28 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@fun-land/accessor": "^4.0.0"
+    "@fun-land/accessor": "workspace:*",
+    "@fun-land/fun-state": "workspace:*"
   },
   "devDependencies": {
-    "@fun-land/accessor": "^4.0.1"
+    "@fun-land/accessor": "4.0.2",
+    "@fun-land/fun-state": "9.0.0"
   },
   "scripts": {
     "build-cjs": "tsc -p ./tsconfig.publish.json",
     "build-esm": "tsc -p ./tsconfig.publish.json --module esnext --outDir dist/esm",
-    "build": "yarn build-cjs && yarn build-esm",
+    "build": "pnpm run build-cjs && pnpm run build-esm",
     "build:counter": "npx esbuild examples/counter/counter.ts --bundle --outfile=examples/counter/bundle.js --format=iife",
     "build:todo": "npx esbuild examples/todo-app/todo-app.ts --bundle --outfile=examples/todo-app/todo-bundle.js --format=iife",
-    "build:examples": "yarn build:counter && yarn build:todo",
+    "build:examples": "pnpm run build:counter && pnpm run build:todo",
     "lint": "eslint . --ext .ts",
     "test": "jest",
     "test-cover": "jest --coverage",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "pnpm run build"
   },
   "bugs": {
     "url": "https://github.com/fun-land/fun-land/issues"
   },
   "license": "MIT",
-  "gitHead": "3fc5d08b05d975dd25d77b7af91f9551be55f123"
+  "gitHead": "fda8ca2be51c862ceaf3657b040ba7f60d354098"
 }

package/src/dom.test.ts

@@ -2,10 +2,14 @@ import {
   h,
   text,
   attr,
+  attrs,
+  append,
+  bindProperty,
   addClass,
+  toggleClass,
   removeClass,
   on,
-  pipeEndo,
+  enhance,
   keyedChildren,
   $,
   $$,
@@ -149,7 +153,6 @@ describe("attr()", () => {
 describe("attrs()", () => {
   it("should set multiple attributes", () => {
     const el = document.createElement("div");
-    const { attrs } = require("./dom");
     attrs({ "data-test": "value", "aria-label": "Test" })(el);
     expect(el.getAttribute("data-test")).toBe("value");
     expect(el.getAttribute("aria-label")).toBe("Test");
@@ -157,7 +160,6 @@ describe("attrs()", () => {
 
   it("should return element for chaining", () => {
     const el = document.createElement("div");
-    const { attrs } = require("./dom");
     const result = attrs({ "data-test": "value" })(el);
     expect(result).toBe(el);
   });
@@ -203,14 +205,12 @@ describe("removeClass()", () => {
 describe("toggleClass()", () => {
   it("should toggle a class on", () => {
     const el = document.createElement("div");
-    const { toggleClass } = require("./dom");
     toggleClass("foo")(el);
     expect(el.classList.contains("foo")).toBe(true);
   });
 
   it("should toggle a class off", () => {
     const el = document.createElement("div");
-    const { toggleClass } = require("./dom");
     el.classList.add("foo");
     toggleClass("foo")(el);
     expect(el.classList.contains("foo")).toBe(false);
@@ -218,7 +218,6 @@ describe("toggleClass()", () => {
 
   it("should force add with true", () => {
     const el = document.createElement("div");
-    const { toggleClass } = require("./dom");
     toggleClass("foo", true)(el);
     expect(el.classList.contains("foo")).toBe(true);
     toggleClass("foo", true)(el);
@@ -227,7 +226,6 @@ describe("toggleClass()", () => {
 
   it("should force remove with false", () => {
     const el = document.createElement("div");
-    const { toggleClass } = require("./dom");
     el.classList.add("foo");
     toggleClass("foo", false)(el);
     expect(el.classList.contains("foo")).toBe(false);
@@ -235,7 +233,6 @@ describe("toggleClass()", () => {
 
   it("should return element for chaining", () => {
     const el = document.createElement("div");
-    const { toggleClass } = require("./dom");
     const result = toggleClass("foo")(el);
     expect(result).toBe(el);
   });
@@ -245,7 +242,6 @@ describe("append()", () => {
   it("should append a single child", () => {
     const parent = document.createElement("div");
     const child = document.createElement("span");
-    const { append } = require("./dom");
     append(child)(parent);
     expect(parent.children.length).toBe(1);
     expect(parent.children[0]).toBe(child);
@@ -255,7 +251,6 @@ describe("append()", () => {
     const parent = document.createElement("div");
     const child1 = document.createElement("span");
     const child2 = document.createElement("p");
-    const { append } = require("./dom");
     append(child1, child2)(parent);
     expect(parent.children.length).toBe(2);
     expect(parent.children[0]).toBe(child1);
@@ -265,7 +260,6 @@ describe("append()", () => {
   it("should return element for chaining", () => {
     const parent = document.createElement("div");
     const child = document.createElement("span");
-    const { append } = require("./dom");
     const result = append(child)(parent);
     expect(result).toBe(parent);
   });
@@ -275,7 +269,6 @@ describe("bindProperty()", () => {
   it("should set initial property value from state", () => {
     const el = document.createElement("input") as HTMLInputElement;
     const controller = new AbortController();
-    const { bindProperty } = require("./dom");
 
     const state = funState("hello");
     bindProperty(el, "value", state, controller.signal);
@@ -287,7 +280,6 @@ describe("bindProperty()", () => {
   it("should update property when state changes", () => {
     const el = document.createElement("input") as HTMLInputElement;
     const controller = new AbortController();
-    const { bindProperty } = require("./dom");
 
     const state = funState("hello");
     bindProperty(el, "value", state, controller.signal);
@@ -303,7 +295,6 @@ describe("bindProperty()", () => {
   it("should stop updating after signal aborts", () => {
     const el = document.createElement("input") as HTMLInputElement;
     const controller = new AbortController();
-    const { bindProperty } = require("./dom");
 
     const state = funState("hello");
     bindProperty(el, "value", state, controller.signal);
@@ -317,7 +308,6 @@ describe("bindProperty()", () => {
   it("should return element for chaining", () => {
     const el = document.createElement("input") as HTMLInputElement;
     const controller = new AbortController();
-    const { bindProperty } = require("./dom");
 
     const state = funState("hello");
     const result = bindProperty(el, "value", state, controller.signal);
@@ -362,11 +352,12 @@ describe("on()", () => {
 describe("pipeEndo()", () => {
   it("should apply functions in order", () => {
     const el = document.createElement("div");
-    const result = pipeEndo(
+    const result = enhance(
+      el,
       text("Hello"),
       addClass("foo", "bar"),
       attr("data-test", "value")
-    )(el);
+    );
 
     expect(result).toBe(el);
     expect(el.textContent).toBe("Hello");
@@ -396,7 +387,7 @@ function makeAbortSignal(): {
 function setupKeyedChildrenWithKeyAwareRenderer(
   parent: Element,
   signal: AbortSignal,
-  listState: { get: () => Item[]; subscribe: FunState<Item[]>["subscribe"] }
+  listState: { get: () => Item[]; watch: FunState<Item[]>["watch"] }
 ) {
   const mountCountByKey = new Map<string, number>();
   const abortCountByKey = new Map<string, number>();
@@ -512,12 +503,12 @@ describe("keyedChildren", () => {
       focus: (acc: any) =>
         ({
           get: () => acc.query(items)[0],
-          subscribe: (_s: AbortSignal, _cb: any) => void 0,
+          watch: (_s: AbortSignal, _cb: any) => void 0,
         }) as any,
       prop: () => {
         throw new Error("not used");
       },
-      subscribe: (sig: AbortSignal, cb: (items: Item[]) => void) => {
+      watch: (sig: AbortSignal, cb: (items: Item[]) => void) => {
         listeners.add(cb);
         sig.addEventListener(
           "abort",
@@ -527,6 +518,9 @@ describe("keyedChildren", () => {
           { once: true }
         );
       },
+      watchAll: (_sig: AbortSignal, _cb: (values: Item[][]) => void) => {
+        throw new Error("watchAll not used in these tests");
+      },
     };
 
     const { mountCountByKey } = setupKeyedChildrenWithKeyAwareRenderer(
@@ -589,12 +583,12 @@ describe("keyedChildren", () => {
       focus: (acc: any) =>
         ({
           get: () => acc.query(items)[0],
-          subscribe: (_s: AbortSignal, _cb: any) => void 0,
+          watch: (_s: AbortSignal, _cb: any) => void 0,
         }) as any,
       prop: () => {
         throw new Error("not used");
       },
-      subscribe: (sig: AbortSignal, cb: (items: Item[]) => void) => {
+      watch: (sig: AbortSignal, cb: (items: Item[]) => void) => {
         listeners.add(cb);
         sig.addEventListener(
           "abort",
@@ -604,6 +598,9 @@ describe("keyedChildren", () => {
           { once: true }
         );
       },
+      watchAll: (_sig: AbortSignal, _cb: (values: Item[][]) => void) => {
+        throw new Error("watchAll not used in these tests");
+      },
     };
 
     const { abortCountByKey } = setupKeyedChildrenWithKeyAwareRenderer(
@@ -634,16 +631,17 @@ describe("keyedChildren", () => {
 
     // Subscribe and verify callback is called before abort
     const callback = jest.fn();
-    list.subscribe(signal, callback);
+    list.watch(signal, callback);
 
     list.set([{ key: "a", label: "A2" }]);
-    expect(callback).toHaveBeenCalledTimes(1);
+    // Called with initial value, then with updated value
+    expect(callback).toHaveBeenCalledTimes(2);
 
     // After abort, callback should not be called
     controller.abort();
 
     list.set([{ key: "a", label: "A3" }]);
-    expect(callback).toHaveBeenCalledTimes(1); // Still 1, not called again
+    expect(callback).toHaveBeenCalledTimes(2); // Still 2, not called again
 
     void container;
   });

package/src/dom.ts

@@ -1,8 +1,10 @@
 /** DOM utilities for functional element creation and manipulation */
-import { FunState } from "./state";
+import { type FunState } from "@fun-land/fun-state";
 import type { ElementChild } from "./types";
 import { filter } from "@fun-land/accessor";
 
+export type Enhancer<El extends Element> = (element: El) => El;
+
 /**
  * Create an HTML element with attributes and children
  *
@@ -75,32 +77,32 @@ const appendChildren = (
  */
 export const text =
   (content: string | number) =>
-  (el: Element): Element => {
+  <El extends Element>(el: El): El => {
     el.textContent = String(content);
     return el;
-  };
+  };;
 
 /**
  * Set an attribute on an element (returns element for chaining)
  */
 export const attr =
   (name: string, value: string) =>
-  (el: Element): Element => {
+  <El extends Element>(el: El): El => {
     el.setAttribute(name, value);
     return el;
-  };
+  };;
 
 /**
  * Set multiple attributes on an element (returns element for chaining)
  */
 export const attrs =
   (obj: Record<string, string>) =>
-  (el: Element): Element => {
+  <El extends Element>(el: El): El => {
     Object.entries(obj).forEach(([name, value]) => {
       el.setAttribute(name, value);
     });
     return el;
-  };
+  };;
 
 export function bindProperty<E extends Element, K extends keyof E>(
   el: E,
@@ -112,31 +114,40 @@ export function bindProperty<E extends Element, K extends keyof E>(
   el[key] = fs.get();
 
   // reactive sync
-  fs.subscribe(signal, (v: E[K]) => {
+  fs.watch(signal, (v: E[K]) => {
     el[key] = v;
   });
   return el;
 }
 
+export const bindPropertyTo =
+  <E extends Element, K extends keyof E & string>(
+    key: K,
+    state: FunState<E[K]>,
+    signal: AbortSignal
+  ) =>
+  (el: E): E =>
+    bindProperty(el, key, state, signal);
+
 /**
  * Add CSS classes to an element (returns element for chaining)
  */
 export const addClass =
   (...classes: string[]) =>
-  (el: Element): Element => {
+  <El extends Element>(el: El): El => {
     el.classList.add(...classes);
     return el;
-  };
+  };;
 
 /**
  * Remove CSS classes from an element (returns element for chaining)
  */
 export const removeClass =
   (...classes: string[]) =>
-  (el: Element): Element => {
+  <El extends Element>(el: El): El => {
     el.classList.remove(...classes);
     return el;
-  };
+  };;
 
 /**
  * Toggle a CSS class on an element (returns element for chaining)
@@ -150,13 +161,14 @@ export const toggleClass =
 
 /**
  * Append children to an element (returns parent for chaining)
+ * @returns {Enhancer}
  */
 export const append =
   (...children: Element[]) =>
-  (el: Element): Element => {
+  <El extends Element>(el: El): El => {
     children.forEach((child) => el.appendChild(child));
     return el;
-  };
+  };;
 
 /**
  * Add event listener with required AbortSignal (returns element for chaining)
@@ -172,13 +184,23 @@ export const on = <E extends Element, K extends keyof HTMLElementEventMap>(
   return el;
 };
 
+/** Enhancer version of `on()` */
+export const onTo =
+  <E extends Element, K extends keyof HTMLElementEventMap>(
+    type: K,
+    handler: (ev: HTMLElementEventMap[K] & { currentTarget: E }) => void,
+    signal: AbortSignal
+  ) =>
+  (el: E): E =>
+    on(el, type, handler, signal);
+
 /**
- * Functional composition - apply endomorphic functions (`<T>(x: T) => T`) left to right
+ * Apply enhancers to an HTMLElement.
  */
-export const pipeEndo =
-  <T>(...fns: Array<(x: T) => T>) =>
-  (x: T): T =>
-    fns.reduce((acc, fn) => fn(acc), x);
+export const enhance = <El extends Element>(
+  x: El,
+  ...fns: Array<Enhancer<El>>
+) => fns.reduce((acc, fn) => fn(acc), x);
 
 /**
  *
@@ -259,7 +281,8 @@ export function keyedChildren<T extends Keyed>(
         const el = renderRow({
           signal: ctrl.signal,
           state: itemState,
-          remove: () => list.mod((list) => list.filter((t) => t.key !== k)),
+          remove: () =>
+            list.mod((list: T[]) => list.filter((t) => t.key !== k)),
         });
         rows.set(k, { key: k, el, ctrl });
       }
@@ -278,7 +301,7 @@ export function keyedChildren<T extends Keyed>(
   };
 
   // Reconcile whenever the list changes; `subscribe` will unsubscribe on abort (per your fix).
-  list.subscribe(signal, reconcile);
+  list.watch(signal, reconcile);
 
   // Ensure all children clean up when parent aborts
   signal.addEventListener("abort", dispose, { once: true });

package/src/index.ts

@@ -16,9 +16,11 @@ export {
   toggleClass,
   append,
   on,
+  onTo,
   bindProperty,
+  bindPropertyTo,
   keyedChildren,
-  pipeEndo,
+  enhance,
   $,
   $$,
 } from "./dom";

package/src/mount.test.ts

@@ -115,7 +115,7 @@ describe("mount()", () => {
       const { state } = props;
       const div = h("div", { textContent: String(state.get().count) });
 
-      state.prop("count").subscribe(signal, (count: number) => {
+      state.prop("count").watch(signal, (count: number) => {
         div.textContent = String(count);
       });
 
@@ -149,7 +149,7 @@ describe("mount()", () => {
     const Component: Component<Props> = (signal, props) => {
       const { state } = props;
       const div = h("div");
-      state.prop("count").subscribe(signal, callback);
+      state.prop("count").watch(signal, callback);
       return div;
     };
 
@@ -190,11 +190,11 @@ describe("mount()", () => {
         settingsState.get().theme
       );
 
-      userState.prop("name").subscribe(signal, (name: string) => {
+      userState.prop("name").watch(signal, (name: string) => {
         nameEl.textContent = name;
       });
 
-      settingsState.prop("theme").subscribe(signal, (theme: string) => {
+      settingsState.prop("theme").watch(signal, (theme: string) => {
         themeEl.textContent = theme;
       });