@fun-land/fun-web 0.6.0 → 1.1.0

package/src/dom.test.ts

@@ -6,6 +6,7 @@ import {
   attrs,
   append,
   bindProperty,
+  bindView,
   addClass,
   toggleClass,
   removeClass,
@@ -14,7 +15,7 @@ import {
   querySelectorAll,
   renderWhen,
 } from "./dom";
-import { funState } from "@fun-land/fun-state";
+import { funState, mapRead, derive } from "@fun-land/fun-state";
 
 describe("h()", () => {
   it("should create an element", () => {
@@ -171,6 +172,44 @@ describe("hx()", () => {
       "hx: signal is required"
     );
   });
+
+  it("should accept FunRead from mapRead in bind", () => {
+    const controller = new AbortController();
+    const num = funState(5);
+    const doubled = mapRead(num, (n) => String(n * 2));
+
+    const el = hx("div", {
+      signal: controller.signal,
+      bind: { textContent: doubled },
+    });
+
+    expect(el.textContent).toBe("10");
+
+    num.set(3);
+    expect(el.textContent).toBe("6");
+
+    controller.abort();
+  });
+
+  it("should accept FunRead from derive in bind", () => {
+    const controller = new AbortController();
+    const a = funState(2);
+    const b = funState(3);
+    const sum = derive(a, b, (x, y) => x + y);
+
+    const el = hx("input", {
+      signal: controller.signal,
+      props: { type: "number" },
+      bind: { valueAsNumber: sum },
+    });
+
+    expect(el.valueAsNumber).toBe(5);
+
+    a.set(10);
+    expect(el.valueAsNumber).toBe(13);
+
+    controller.abort();
+  });
 });
 
 describe("text()", () => {
@@ -372,6 +411,60 @@ describe("bindProperty()", () => {
     expect(result).toBe(el);
     controller.abort();
   });
+
+  it("should bind FunRead from mapRead", () => {
+    const el = h("div");
+    const controller = new AbortController();
+
+    const num = funState(5);
+    const doubled = mapRead(num, (n) => String(n * 2));
+    enhance(el, bindProperty("textContent", doubled, controller.signal));
+
+    expect(el.textContent).toBe("10");
+
+    num.set(7);
+    expect(el.textContent).toBe("14");
+
+    controller.abort();
+  });
+
+  it("should bind FunRead from derive", () => {
+    const el = h("div");
+    const controller = new AbortController();
+
+    const first = funState("John");
+    const last = funState("Doe");
+    const full = derive(first, last, (f, l) => `${f} ${l}`);
+    enhance(el, bindProperty("textContent", full, controller.signal));
+
+    expect(el.textContent).toBe("John Doe");
+
+    first.set("Jane");
+    expect(el.textContent).toBe("Jane Doe");
+
+    last.set("Smith");
+    expect(el.textContent).toBe("Jane Smith");
+
+    controller.abort();
+  });
+
+  it("should compose mapRead over derive", () => {
+    const el = h("span");
+    const controller = new AbortController();
+
+    const price = funState(42);
+    const quantity = funState(3);
+    const total = derive(price, quantity, (p, q) => p * q);
+    const formatted = mapRead(total, (n) => `$${n.toFixed(2)}`);
+    enhance(el, bindProperty("textContent", formatted, controller.signal));
+
+    expect(el.textContent).toBe("$126.00");
+
+    price.set(50);
+    expect(el.textContent).toBe("$150.00");
+
+    controller.abort();
+  });
 });
 
 describe("on()", () => {
@@ -406,6 +499,76 @@ describe("on()", () => {
   });
 });
 
+describe("bindView()", () => {
+  it("should default to a div container", () => {
+    const controller = new AbortController();
+    const state = funState(0);
+
+    const container = bindView(controller.signal, state, (_signal, value) =>
+      h("div", null, String(value))
+    ) as HTMLElement;
+
+    state.set(1);
+
+    expect(container.tagName).toBe("DIV");
+    expect(container.textContent).toBe("1");
+
+    controller.abort();
+  });
+
+  it("should render into the provided container tag", () => {
+    const controller = new AbortController();
+    const state = funState(0);
+
+    const container = bindView(
+      controller.signal,
+      state,
+      (_signal, value) => h("div", null, String(value)),
+      { tagName: "section" }
+    ) as HTMLElement;
+
+    state.set(1);
+
+    expect(container.tagName).toBe("SECTION");
+    expect(container.children.length).toBe(1);
+    expect(container.textContent).toBe("1");
+
+    controller.abort();
+  });
+
+  it("should abort previous render on state changes", () => {
+    const controller = new AbortController();
+    const state = funState(0);
+    let abortCount = 0;
+    let renderCount = 0;
+
+    const container = bindView(
+      controller.signal,
+      state,
+      (signal, value) => {
+        renderCount += 1;
+        signal.addEventListener("abort", () => {
+          abortCount += 1;
+        });
+        return h("div", null, String(value));
+      },
+      { tagName: "div" }
+    );
+
+    state.set(1);
+    expect(renderCount).toBe(1);
+    expect(abortCount).toBe(0);
+
+    state.set(2);
+    expect(renderCount).toBe(2);
+    expect(abortCount).toBe(1);
+    expect(container.textContent).toBe("2");
+
+    controller.abort();
+    expect(abortCount).toBe(2);
+  });
+});
+
 describe("pipeEndo()", () => {
   it("should apply functions in order", () => {
     const el = document.createElement("div");
@@ -493,7 +656,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(1);
@@ -513,7 +676,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(0);
@@ -529,7 +692,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(0);
@@ -550,7 +713,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     const child = container.children[0] as HTMLElement;
@@ -581,7 +744,7 @@ describe("renderWhen", () => {
       state: showState,
       component: ComponentWithAbortListener,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(abortCallback).not.toHaveBeenCalled();
@@ -610,7 +773,7 @@ describe("renderWhen", () => {
       state: showState,
       component: ComponentWithAbortListener,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(abortCallback).not.toHaveBeenCalled();
@@ -628,7 +791,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(0);
@@ -656,7 +819,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     }) as HTMLElement;
 
     expect(container.style.display).toBe("contents");
@@ -672,7 +835,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(1);
@@ -692,18 +855,14 @@ describe("renderWhen", () => {
       _signal: AbortSignal,
       props: { text: string; count: number }
     ) => {
-      return h(
-        "div",
-        null,
-        `${props.text}: ${props.count}`
-      );
+      return h("div", null, `${props.text}: ${props.count}`);
     };
 
     const container = renderWhen({
       state: showState,
       component: PropsComponent,
       props: { text: "Count", count: 42 },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children[0].textContent).toBe("Count: 42");
@@ -713,7 +872,11 @@ describe("renderWhen", () => {
 
   test("should work with predicate function", () => {
     const controller = new AbortController();
-    enum Status { Loading, Success, Error }
+    enum Status {
+      Loading,
+      Success,
+      Error,
+    }
     const statusState = funState(Status.Loading);
 
     const container = renderWhen({
@@ -721,7 +884,7 @@ describe("renderWhen", () => {
       predicate: (status) => status === Status.Success,
       component: TestComponent,
       props: { text: "Success!" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     // Should not render initially
@@ -742,4 +905,4 @@ describe("renderWhen", () => {
 
     controller.abort();
   });
-});
+});

package/src/dom.ts

@@ -1,5 +1,5 @@
 /** DOM utilities for functional element creation and manipulation */
-import { type FunState } from "@fun-land/fun-state";
+import { type FunState, type FunRead } from "@fun-land/fun-state";
 import type { Component, ElementChild } from "./types";
 import { Accessor } from "@fun-land/accessor";
 
@@ -11,7 +11,8 @@ export type Enhancer<El extends Element> = (element: El) => El;
  */
 const entries = <T extends Record<string, unknown>>(
   obj: T
-): Array<[keyof T, T[keyof T]]> => Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
+): Array<[keyof T, T[keyof T]]> =>
+  Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
 
 /**
  * Create an HTML element with attributes and children
@@ -30,6 +31,7 @@ export const h = <Tag extends keyof HTMLElementTagNameMap>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   attrs?: Record<string, any> | null,
   children?: ElementChild | ElementChild[]
+  // eslint-disable-next-line complexity
 ): HTMLElementTagNameMap[Tag] => {
   const element = document.createElement(tag);
 
@@ -82,7 +84,7 @@ type HxHandlers<El extends Element> = Partial<{
 }>;
 
 type HxBindings<El extends Element> = Partial<{
-  [K in WritableKeys<El> & string]: FunState<El[K]>;
+  [K in WritableKeys<El> & string]: FunRead<El[K]>;
 }>;
 
 type HxOptionsBase<El extends Element> = {
@@ -145,15 +147,13 @@ export function hx<Tag extends keyof HTMLElementTagNameMap>(
   }
 
   if (bind) {
-    const bindElementProperty = <K extends WritableKeys<HTMLElementTagNameMap[Tag]> & string>(
+    const bindElementProperty = <
+      K extends WritableKeys<HTMLElementTagNameMap[Tag]> & string,
+    >(
       key: K,
-      state: FunState<HTMLElementTagNameMap[Tag][K]>
+      state: FunRead<HTMLElementTagNameMap[Tag][K]>
     ): void => {
-      bindProperty<HTMLElementTagNameMap[Tag], K>(
-        key,
-        state,
-        signal
-      )(element);
+      bindProperty<HTMLElementTagNameMap[Tag], K>(key, state, signal)(element);
     };
 
     for (const key of Object.keys(bind) as Array<
@@ -161,10 +161,7 @@ export function hx<Tag extends keyof HTMLElementTagNameMap>(
     >) {
       const state = bind[key];
       if (!state) continue;
-      bindElementProperty(
-        key,
-        state
-      );
+      bindElementProperty(key, state);
     }
   }
 
@@ -240,7 +237,7 @@ export const attrs =
 export const bindProperty =
   <E extends Element, K extends keyof E & string>(
     key: K,
-    state: FunState<E[K]>,
+    state: FunRead<E[K]>,
     signal: AbortSignal
   ) =>
   (el: E): E => {
@@ -254,6 +251,38 @@ export const bindProperty =
     return el;
   };
 
+/**
+ * Render a single slot from state and abort previous render on updates.
+ * Useful when render creates subscriptions, timers, or event handlers.
+ * Defaults to a "div" container when no tagName is provided.
+ */
+export const bindView = <
+  Tag extends keyof HTMLElementTagNameMap = "div",
+  T = unknown,
+>(
+  signal: AbortSignal,
+  state: FunRead<T>,
+  render: (regionSignal: AbortSignal, data: T) => Element,
+  options?: { tagName?: Tag }
+): HTMLElementTagNameMap[Tag] => {
+  const tagName = (options?.tagName ?? "div") as Tag;
+  const element = document.createElement(tagName);
+  let childCtrl: AbortController | null = null;
+  state.watch(signal, (data) => {
+    childCtrl?.abort();
+    childCtrl = new AbortController();
+    element.replaceChildren(render(childCtrl.signal, data));
+  });
+  signal.addEventListener(
+    "abort",
+    () => {
+      childCtrl?.abort();
+    },
+    { once: true }
+  );
+  return element;
+};
+
 /**
  * Add CSS classes to an element (returns element for chaining)
  * @returns {Enhancer}
@@ -386,6 +415,7 @@ export const bindListChildren =
       rows.clear();
     };
 
+    // eslint-disable-next-line complexity
     const reconcile = (): void => {
       const items = list.get();
 
@@ -468,7 +498,7 @@ export const bindListChildren =
  * });
  */
 export function renderWhen<State, Props>(options: {
-  state: FunState<State>;
+  state: FunRead<State>;
   predicate?: (value: State) => boolean;
   component: Component<Props>;
   props: Props;
@@ -487,6 +517,7 @@ export function renderWhen<State, Props>(options: {
   let childCtrl: AbortController | null = null;
   let childEl: Element | null = null;
 
+  // eslint-disable-next-line complexity
   const reconcile = () => {
     const shouldRender = predicate(state.get());
 
@@ -524,11 +555,11 @@ export function renderWhen<State, Props>(options: {
 
 /** add passed class (idempotent) to element when state returns true */
 export const bindClass =
-  (className: string, state: FunState<boolean>, signal: AbortSignal) =>
+  (className: string, state: FunRead<boolean>, signal: AbortSignal) =>
   <E extends Element>(el: E): E => {
     state.watch(signal, (active) => el.classList.toggle(className, active));
     return el;
   };
 
 export const querySelectorAll = <T extends Element>(selector: string): T[] =>
-  Array.from(document.querySelectorAll(selector));
+  Array.from(document.querySelectorAll(selector));

package/src/mount.test.ts

@@ -1,7 +1,7 @@
 import { mount } from "./mount";
 import { h } from "./dom";
-import { funState } from "./state";
-import type { Component, FunState } from "./index";
+import type { Component } from "./index";
+import { funState, type FunState } from "@fun-land/fun-state";
 
 describe("mount()", () => {
   let container: HTMLDivElement;