@fun-land/fun-web 0.5.0 → 1.0.0

package/src/dom.ts

@@ -1,10 +1,19 @@
 /** 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";
 
 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
  *
@@ -22,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);
 
@@ -54,6 +64,119 @@ export const h = <Tag extends keyof HTMLElementTagNameMap>(
   return element;
 };
 
+// Helper type to extract only writable properties
+type WritableKeys<T> = {
+  [K in keyof T]-?: (<F>() => F extends { [Q in K]: T[K] } ? 1 : 2) extends <
+    F,
+  >() => F extends { -readonly [Q in K]: T[K] } ? 1 : 2
+    ? K
+    : never;
+}[keyof T];
+
+type HxProps<El extends Element> = Partial<{
+  [K in WritableKeys<El> & string]: El[K] | null | undefined;
+}>;
+
+type HxHandlers<El extends Element> = Partial<{
+  [K in keyof GlobalEventHandlersEventMap]: (
+    ev: GlobalEventHandlersEventMap[K] & { currentTarget: El }
+  ) => void;
+}>;
+
+type HxBindings<El extends Element> = Partial<{
+  [K in WritableKeys<El> & string]: FunRead<El[K]>;
+}>;
+
+type HxOptionsBase<El extends Element> = {
+  props?: HxProps<El>;
+  attrs?: Record<string, string | number | boolean | null | undefined>;
+};
+
+type HxOptions<El extends Element> = HxOptionsBase<El> & {
+  signal: AbortSignal;
+  on?: HxHandlers<El>;
+  bind?: HxBindings<El>;
+};
+
+/**
+ * Create an element with structured props, attrs, event handlers, and bindings.
+ *
+ * @example
+ * hx("input", {
+ *   signal,
+ *   props: { type: "text" },
+ *   attrs: { "data-test": "name" },
+ *   bind: { value: nameState },
+ *   on: { input: (e) => nameState.set(e.currentTarget.value) },
+ * });
+ */
+export function hx<Tag extends keyof HTMLElementTagNameMap>(
+  tag: Tag,
+  options: HxOptions<HTMLElementTagNameMap[Tag]>,
+  children?: ElementChild | ElementChild[]
+): HTMLElementTagNameMap[Tag];
+// eslint-disable-next-line complexity
+export function hx<Tag extends keyof HTMLElementTagNameMap>(
+  tag: Tag,
+  options: HxOptions<HTMLElementTagNameMap[Tag]>,
+  children?: ElementChild | ElementChild[]
+): HTMLElementTagNameMap[Tag] {
+  if (!options?.signal) {
+    throw new Error("hx: signal is required");
+  }
+
+  const { signal, props, attrs: attrMap, on: onMap, bind } = options;
+  const element = document.createElement(tag);
+
+  if (props) {
+    for (const [key, value] of entries(props)) {
+      if (value == null) continue;
+      element[key] = value;
+    }
+  }
+
+  if (attrMap) {
+    for (const [key, value] of Object.entries(attrMap)) {
+      if (value == null) continue;
+      element.setAttribute(key, String(value));
+    }
+  }
+
+  if (children != null) {
+    appendChildren(children)(element);
+  }
+
+  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];
+      if (!state) continue;
+      bindElementProperty(key, state);
+    }
+  }
+
+  if (onMap) {
+    for (const [event, handler] of Object.entries(onMap)) {
+      if (!handler) continue;
+      element.addEventListener(event, handler as EventListener, {
+        signal,
+      });
+    }
+  }
+
+  return element;
+}
+
 /**
  * Append children to an element, flattening arrays and converting primitives to text nodes
  * @returns {Enhancer}
@@ -114,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 => {
@@ -260,6 +383,7 @@ export const bindListChildren =
       rows.clear();
     };
 
+    // eslint-disable-next-line complexity
     const reconcile = (): void => {
       const items = list.get();
 
@@ -342,7 +466,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;
@@ -361,6 +485,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());
 
@@ -396,8 +521,13 @@ export function renderWhen<State, Props>(options: {
   return container;
 }
 
-export const $ = <T extends Element>(selector: string): T | undefined =>
-  document.querySelector<T>(selector) ?? undefined;
+/** add passed class (idempotent) to element when state returns true */
+export const bindClass =
+  (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 $$ = <T extends Element>(selector: string): T[] =>
+export const querySelectorAll = <T extends Element>(selector: string): T[] =>
   Array.from(document.querySelectorAll(selector));

package/src/index.ts

@@ -1,26 +1,7 @@
 // @fun-land/fun-web - Web component library for fun-land
 
 export type { Component, ElementChild } from "./types";
-export type { FunState } from "./state";
 export type { MountedComponent } from "./mount";
 export type { KeyedChildren } from "./dom";
-
-export { funState } from "./state";
-export {
-  h,
-  text,
-  attr,
-  attrs,
-  addClass,
-  removeClass,
-  toggleClass,
-  append,
-  on,
-  bindProperty,
-  bindListChildren,
-  renderWhen,
-  enhance,
-  $,
-  $$,
-} from "./dom";
+export * from "./dom";
 export { mount } from "./mount";

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;

package/src/state.test.ts

@@ -1,251 +0,0 @@
-import { funState } from "./state";
-import { prop } from "@fun-land/accessor";
-
-describe("funState", () => {
-  it("should create state with initial value", () => {
-    const state = funState({ count: 0 });
-    expect(state.get()).toEqual({ count: 0 });
-  });
-
-  it("should update state with set", () => {
-    const state = funState({ count: 0 });
-    state.set({ count: 5 });
-    expect(state.get()).toEqual({ count: 5 });
-  });
-
-  it("should update state with mod", () => {
-    const state = funState({ count: 0 });
-    state.mod((s: { count: number }) => ({ count: s.count + 1 }));
-    expect(state.get()).toEqual({ count: 1 });
-  });
-
-  it("should focus on property", () => {
-    const state = funState({ count: 0, name: "test" });
-    const countState = state.prop("count");
-    expect(countState.get()).toBe(0);
-  });
-
-  it("should update focused state", () => {
-    const state = funState({ count: 0, name: "test" });
-    const countState = state.prop("count");
-    countState.set(5);
-    expect(state.get()).toEqual({ count: 5, name: "test" });
-  });
-
-  describe("subscribe subscriptions", () => {
-    it("should call subscriber when state changes", () => {
-      const state = funState({ count: 0 });
-      const controller = new AbortController();
-      const callback = jest.fn();
-
-      state.watch(controller.signal, callback);
-      state.set({ count: 1 });
-
-      // Called with initial value, then with new value
-      expect(callback).toHaveBeenCalledTimes(2);
-      expect(callback).toHaveBeenNthCalledWith(1, { count: 0 });
-      expect(callback).toHaveBeenNthCalledWith(2, { count: 1 });
-    });
-
-    it("should call subscriber multiple times", () => {
-      const state = funState({ count: 0 });
-      const controller = new AbortController();
-      const callback = jest.fn();
-
-      state.watch(controller.signal, callback);
-      state.set({ count: 1 });
-      state.set({ count: 2 });
-
-      // watch calls immediately with initial value, then on each change
-      expect(callback).toHaveBeenCalledTimes(3);
-      expect(callback).toHaveBeenNthCalledWith(1, { count: 0 });
-      expect(callback).toHaveBeenNthCalledWith(2, { count: 1 });
-      expect(callback).toHaveBeenNthCalledWith(3, { count: 2 });
-    });
-
-    it("should call focused state subscriber only when that property changes", () => {
-      const state = funState({ count: 0, name: "test" });
-      const countState = state.prop("count");
-      const controller = new AbortController();
-      const callback = jest.fn();
-
-      countState.watch(controller.signal, callback);
-
-      // Initial call with 0
-      expect(callback).toHaveBeenCalledWith(0);
-
-      // Change count - should trigger
-      state.set({ count: 1, name: "test" });
-      expect(callback).toHaveBeenCalledWith(1);
-
-      // Change name only - should not trigger
-      callback.mockClear();
-      state.set({ count: 1, name: "changed" });
-      expect(callback).not.toHaveBeenCalled();
-
-      // Change count again - should trigger
-      state.set({ count: 2, name: "changed" });
-      expect(callback).toHaveBeenCalledWith(2);
-    });
-
-    it("should support multiple subscribers", () => {
-      const state = funState({ count: 0 });
-      const controller = new AbortController();
-      const callback1 = jest.fn();
-      const callback2 = jest.fn();
-
-      state.watch(controller.signal, callback1);
-      state.watch(controller.signal, callback2);
-
-      state.set({ count: 1 });
-
-      // Both should be called with initial value, then with new value
-      expect(callback1).toHaveBeenCalledTimes(2);
-      expect(callback1).toHaveBeenNthCalledWith(1, { count: 0 });
-      expect(callback1).toHaveBeenNthCalledWith(2, { count: 1 });
-      expect(callback2).toHaveBeenCalledTimes(2);
-      expect(callback2).toHaveBeenNthCalledWith(1, { count: 0 });
-      expect(callback2).toHaveBeenNthCalledWith(2, { count: 1 });
-    });
-
-    it("should work with accessor-based focus", () => {
-      interface User {
-        name: string;
-        age: number;
-      }
-      const state = funState<User>({ name: "Alice", age: 30 });
-      const nameState = state.focus(prop<User>()("name"));
-      const controller = new AbortController();
-      const callback = jest.fn();
-
-      nameState.watch(controller.signal, callback);
-
-      state.set({ name: "Bob", age: 30 });
-
-      // Called with initial value "Alice", then "Bob"
-      expect(callback).toHaveBeenCalledTimes(2);
-      expect(callback).toHaveBeenNthCalledWith(1, "Alice");
-      expect(callback).toHaveBeenNthCalledWith(2, "Bob");
-    });
-  });
-
-  describe("query with accessors", () => {
-    it("should query state using accessor", () => {
-      const state = funState({ count: 5 });
-      const result = state.query(prop<{ count: number }>()("count"));
-      expect(result).toEqual([5]);
-    });
-
-    it("should query focused state using accessor", () => {
-      interface User {
-        profile: {
-          name: string;
-          age: number;
-        };
-      }
-      const state = funState<User>({
-        profile: { name: "Alice", age: 30 },
-      });
-      const profileState = state.prop("profile");
-      const result = profileState.query(prop<User["profile"]>()("name"));
-      expect(result).toEqual(["Alice"]);
-    });
-  });
-
-  describe("nested focus", () => {
-    it("should support focusing a focused state", () => {
-      interface AppState {
-        user: {
-          profile: {
-            name: string;
-          };
-        };
-      }
-      const state = funState<AppState>({
-        user: { profile: { name: "Alice" } },
-      });
-
-      const userState = state.prop("user");
-      const profileState = userState.prop("profile");
-      const nameState = profileState.prop("name");
-
-      expect(nameState.get()).toBe("Alice");
-
-      nameState.set("Bob");
-      expect(state.get().user.profile.name).toBe("Bob");
-    });
-
-    it("should trigger subscriptions on nested focused states", () => {
-      interface AppState {
-        user: {
-          profile: {
-            name: string;
-          };
-        };
-      }
-      const state = funState<AppState>({
-        user: { profile: { name: "Alice" } },
-      });
-
-      const userState = state.prop("user");
-      const profileState = userState.prop("profile");
-      const nameState = profileState.prop("name");
-
-      const controller = new AbortController();
-      const callback = jest.fn();
-
-      nameState.watch(controller.signal, callback);
-
-      state.set({ user: { profile: { name: "Bob" } } });
-
-      // Called with initial value "Alice", then "Bob"
-      expect(callback).toHaveBeenCalledTimes(2);
-      expect(callback).toHaveBeenNthCalledWith(1, "Alice");
-      expect(callback).toHaveBeenNthCalledWith(2, "Bob");
-
-      controller.abort();
-    });
-
-    it("should not trigger deeply focused subscription when unrelated field changes", () => {
-      interface AppState {
-        user: {
-          profile: {
-            name: string;
-            age: number;
-          };
-        };
-      }
-      const state = funState<AppState>({
-        user: { profile: { name: "Alice", age: 30 } },
-      });
-
-      const userState = state.prop("user");
-      const profileState = userState.prop("profile");
-      const nameState = profileState.prop("name");
-
-      const controller = new AbortController();
-      const callback = jest.fn();
-
-      nameState.watch(controller.signal, callback);
-
-      // Initial call with "Alice"
-      expect(callback).toHaveBeenCalledTimes(1);
-      expect(callback).toHaveBeenCalledWith("Alice");
-
-      callback.mockClear();
-
-      // Change age, not name - should not trigger again
-      state.set({ user: { profile: { name: "Alice", age: 31 } } });
-
-      expect(callback).not.toHaveBeenCalled();
-
-      // Change name - should trigger
-      state.set({ user: { profile: { name: "Bob", age: 31 } } });
-
-      expect(callback).toHaveBeenCalledWith("Bob");
-      expect(callback).toHaveBeenCalledTimes(1);
-
-      controller.abort();
-    });
-  });
-});

package/src/state.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";