@fun-land/fun-web 1.0.0 → 2.0.0

package/src/dom.test.ts

@@ -6,6 +6,7 @@ import {
   attrs,
   append,
   bindProperty,
+  bindView,
   addClass,
   toggleClass,
   removeClass,
@@ -80,26 +81,24 @@ describe("h()", () => {
     expect(el.children.length).toBe(2);
   });
 
-  it("should attach event listeners", () => {
+  it("should reject event listeners", () => {
     const handler = jest.fn();
-    const el = h("button", { onclick: handler });
-    el.click();
-    expect(handler).toHaveBeenCalled();
+    expect(() => h("button", { onclick: handler })).toThrow(
+      "Setting event handlers on dom elements without abort signal leads to memory leaks. Use `hx` or `on` instead."
+    );
   });
 
-  it("should handle multiple event types", () => {
+  it("should reject multiple event types", () => {
     const clickHandler = jest.fn();
     const mouseoverHandler = jest.fn();
-    const el = h("button", {
-      onclick: clickHandler,
-      onmouseover: mouseoverHandler,
-    });
-
-    el.click();
-    expect(clickHandler).toHaveBeenCalled();
-
-    el.dispatchEvent(new MouseEvent("mouseover"));
-    expect(mouseoverHandler).toHaveBeenCalled();
+    expect(() =>
+      h("button", {
+        onclick: clickHandler,
+        onmouseover: mouseoverHandler,
+      })
+    ).toThrow(
+      "Setting event handlers on dom elements without abort signal leads to memory leaks. Use `hx` or `on` instead."
+    );
   });
 
   it("should skip null and undefined attributes", () => {
@@ -498,6 +497,80 @@ 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" }
+    );
+
+    expect(renderCount).toBe(1);
+    expect(abortCount).toBe(0);
+
+    state.set(1);
+    expect(renderCount).toBe(2);
+    expect(abortCount).toBe(1);
+    expect(container.textContent).toBe("1");
+
+    state.set(2);
+    expect(renderCount).toBe(3);
+    expect(abortCount).toBe(2);
+    expect(container.textContent).toBe("2");
+
+    controller.abort();
+    expect(abortCount).toBe(3);
+  });
+});
+
 describe("pipeEndo()", () => {
   it("should apply functions in order", () => {
     const el = document.createElement("div");
@@ -585,7 +658,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(1);
@@ -605,7 +678,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(0);
@@ -621,7 +694,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(0);
@@ -642,7 +715,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     const child = container.children[0] as HTMLElement;
@@ -673,7 +746,7 @@ describe("renderWhen", () => {
       state: showState,
       component: ComponentWithAbortListener,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(abortCallback).not.toHaveBeenCalled();
@@ -702,7 +775,7 @@ describe("renderWhen", () => {
       state: showState,
       component: ComponentWithAbortListener,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(abortCallback).not.toHaveBeenCalled();
@@ -720,7 +793,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(0);
@@ -748,7 +821,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     }) as HTMLElement;
 
     expect(container.style.display).toBe("contents");
@@ -764,7 +837,7 @@ describe("renderWhen", () => {
       state: showState,
       component: TestComponent,
       props: { text: "Hello" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     expect(container.children.length).toBe(1);
@@ -784,18 +857,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");
@@ -805,7 +874,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({
@@ -813,7 +886,7 @@ describe("renderWhen", () => {
       predicate: (status) => status === Status.Success,
       component: TestComponent,
       props: { text: "Success!" },
-      signal: controller.signal
+      signal: controller.signal,
     });
 
     // Should not render initially
@@ -834,4 +907,4 @@ describe("renderWhen", () => {
 
     controller.abort();
   });
-});
+});

package/src/dom.ts

@@ -5,21 +5,11 @@ import { Accessor } from "@fun-land/accessor";
 
 export type Enhancer<El extends Element> = (element: El) => El;
 
-/**
- * Type-preserving Object.entries helper for objects with known keys
- * @internal
- */
-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]]>;
-
 /**
  * Create an HTML element with attributes and children
  *
  * Convention:
  * - Properties with dashes (data-*, aria-*) become attributes
- * - Properties starting with 'on' become event listeners
  * - Everything else becomes element properties
  *
  * @example
@@ -41,10 +31,9 @@ export const h = <Tag extends keyof HTMLElementTagNameMap>(
       if (value == null) continue;
 
       if (key.startsWith("on") && typeof value === "function") {
-        // Event listener: onclick, onchange, etc.
-        const eventName = key.slice(2).toLowerCase();
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        element.addEventListener(eventName, value);
+        throw new Error(
+          "Setting event handlers on dom elements without abort signal leads to memory leaks. Use `hx` or `on` instead."
+        );
       } else if (key.includes("-") || key === "role") {
         // Attribute: data-*, aria-*, role, etc.
         element.setAttribute(key, String(value));
@@ -75,7 +64,8 @@ type WritableKeys<T> = {
 
 type HxProps<El extends Element> = Partial<{
   [K in WritableKeys<El> & string]: El[K] | null | undefined;
-}>;
+}> &
+  Record<string, unknown>;
 
 type HxHandlers<El extends Element> = Partial<{
   [K in keyof GlobalEventHandlersEventMap]: (
@@ -83,9 +73,12 @@ type HxHandlers<El extends Element> = Partial<{
   ) => void;
 }>;
 
-type HxBindings<El extends Element> = Partial<{
-  [K in WritableKeys<El> & string]: FunRead<El[K]>;
-}>;
+type BindableRead = {
+  get: () => unknown;
+  watch: (signal: AbortSignal, callback: (value: unknown) => void) => void;
+};
+
+type HxBindings = Record<string, BindableRead>;
 
 type HxOptionsBase<El extends Element> = {
   props?: HxProps<El>;
@@ -95,7 +88,7 @@ type HxOptionsBase<El extends Element> = {
 type HxOptions<El extends Element> = HxOptionsBase<El> & {
   signal: AbortSignal;
   on?: HxHandlers<El>;
-  bind?: HxBindings<El>;
+  bind?: HxBindings;
 };
 
 /**
@@ -129,9 +122,9 @@ export function hx<Tag extends keyof HTMLElementTagNameMap>(
   const element = document.createElement(tag);
 
   if (props) {
-    for (const [key, value] of entries(props)) {
+    for (const [key, value] of Object.entries(props)) {
       if (value == null) continue;
-      element[key] = value;
+      (element as Record<string, unknown>)[key] = value;
     }
   }
 
@@ -147,21 +140,12 @@ export function hx<Tag extends keyof HTMLElementTagNameMap>(
   }
 
   if (bind) {
-    const bindElementProperty = <
-      K extends WritableKeys<HTMLElementTagNameMap[Tag]> & string,
-    >(
-      key: K,
-      state: FunRead<HTMLElementTagNameMap[Tag][K]>
-    ): void => {
-      bindProperty<HTMLElementTagNameMap[Tag], K>(key, state, signal)(element);
-    };
-
-    for (const key of Object.keys(bind) as Array<
-      WritableKeys<HTMLElementTagNameMap[Tag]> & string
-    >) {
-      const state = bind[key];
+    for (const [key, state] of Object.entries(bind)) {
       if (!state) continue;
-      bindElementProperty(key, state);
+      (element as Record<string, unknown>)[key] = state.get();
+      state.watch(signal, (value) => {
+        (element as Record<string, unknown>)[key] = value;
+      });
     }
   }
 
@@ -251,6 +235,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}
@@ -530,4 +546,4 @@ export const bindClass =
   };
 
 export const querySelectorAll = <T extends Element>(selector: string): T[] =>
-  Array.from(document.querySelectorAll(selector));
+  Array.from(document.querySelectorAll(selector));

package/dist/esm/src/state.d.ts

@@ -1,2 +0,0 @@
-/** Re-export FunState and funState from fun-state with subscribe support */
-export { funState, type FunState } from "@fun-land/fun-state";

package/dist/esm/src/state.js

@@ -1,3 +0,0 @@
-/** Re-export FunState and funState from fun-state with subscribe support */
-export { funState } from "@fun-land/fun-state";
-//# sourceMappingURL=state.js.map

package/dist/esm/src/state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../src/state.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,OAAO,EAAE,QAAQ,EAAiB,MAAM,qBAAqB,CAAC"}

package/dist/src/state.d.ts

@@ -1,2 +0,0 @@
-/** Re-export FunState and funState from fun-state with subscribe support */
-export { funState, type FunState } from "@fun-land/fun-state";

package/dist/src/state.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.funState = void 0;
-/** Re-export FunState and funState from fun-state with subscribe support */
-var fun_state_1 = require("@fun-land/fun-state");
-Object.defineProperty(exports, "funState", { enumerable: true, get: function () { return fun_state_1.funState; } });
-//# sourceMappingURL=state.js.map

package/dist/src/state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/state.ts"],"names":[],"mappings":";;;AAAA,4EAA4E;AAC5E,iDAA8D;AAArD,qGAAA,QAAQ,OAAA"}