@fun-land/fun-web 0.3.1 → 0.4.0

package/src/dom.test.ts

@@ -13,6 +13,7 @@ import {
   keyedChildren,
   $,
   $$,
+  renderWhen,
 } from "./dom";
 import { FunState, funState } from "./state";
 
@@ -764,3 +765,271 @@ describe("$$ (querySelectorAll)", () => {
     expect(typeof results.filter).toBe("function");
   });
 });
+
+describe("renderWhen", () => {
+  const TestComponent = (signal: AbortSignal, props: { text: string }) => {
+    const el = h("div", { className: "test-component" }, props.text);
+    signal.addEventListener("abort", () => {
+      el.dataset.aborted = "true";
+    });
+    return el;
+  };
+
+  test("should render component when state is initially true", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].textContent).toBe("Hello");
+    expect(container.children[0].classList.contains("test-component")).toBe(
+      true
+    );
+
+    controller.abort();
+  });
+
+  test("should not render component when state is initially false", () => {
+    const controller = new AbortController();
+    const showState = funState(false);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(container.children.length).toBe(0);
+
+    controller.abort();
+  });
+
+  test("should mount component when state changes from false to true", () => {
+    const controller = new AbortController();
+    const showState = funState(false);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(container.children.length).toBe(0);
+
+    showState.set(true);
+
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].textContent).toBe("Hello");
+
+    controller.abort();
+  });
+
+  test("should unmount component when state changes from true to false", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    const child = container.children[0] as HTMLElement;
+    expect(container.children.length).toBe(1);
+
+    showState.set(false);
+
+    expect(container.children.length).toBe(0);
+    expect(child.dataset.aborted).toBe("true");
+
+    controller.abort();
+  });
+
+  test("should abort component signal on unmount", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+    const abortCallback = jest.fn();
+
+    const ComponentWithAbortListener = (
+      signal: AbortSignal,
+      props: { text: string }
+    ) => {
+      signal.addEventListener("abort", abortCallback);
+      return h("div", null, props.text);
+    };
+
+    renderWhen({
+      state: showState,
+      component: ComponentWithAbortListener,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(abortCallback).not.toHaveBeenCalled();
+
+    showState.set(false);
+
+    expect(abortCallback).toHaveBeenCalledTimes(1);
+
+    controller.abort();
+  });
+
+  test("should cleanup when parent signal aborts", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+    const abortCallback = jest.fn();
+
+    const ComponentWithAbortListener = (
+      signal: AbortSignal,
+      props: { text: string }
+    ) => {
+      signal.addEventListener("abort", abortCallback);
+      return h("div", null, props.text);
+    };
+
+    renderWhen({
+      state: showState,
+      component: ComponentWithAbortListener,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(abortCallback).not.toHaveBeenCalled();
+
+    controller.abort();
+
+    expect(abortCallback).toHaveBeenCalledTimes(1);
+  });
+
+  test("should toggle component multiple times", () => {
+    const controller = new AbortController();
+    const showState = funState(false);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(container.children.length).toBe(0);
+
+    showState.set(true);
+    expect(container.children.length).toBe(1);
+
+    showState.set(false);
+    expect(container.children.length).toBe(0);
+
+    showState.set(true);
+    expect(container.children.length).toBe(1);
+
+    showState.set(false);
+    expect(container.children.length).toBe(0);
+
+    controller.abort();
+  });
+
+  test("should have display: contents to not affect layout", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    }) as HTMLElement;
+
+    expect(container.style.display).toBe("contents");
+
+    controller.abort();
+  });
+
+  test("should stop reacting to state changes after parent abort", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+
+    const container = renderWhen({
+      state: showState,
+      component: TestComponent,
+      props: { text: "Hello" },
+      signal: controller.signal
+    });
+
+    expect(container.children.length).toBe(1);
+
+    controller.abort();
+
+    // Should not react to state changes after abort
+    showState.set(false);
+    expect(container.children.length).toBe(1);
+  });
+
+  test("should pass props to component", () => {
+    const controller = new AbortController();
+    const showState = funState(true);
+
+    const PropsComponent = (
+      _signal: AbortSignal,
+      props: { text: string; count: number }
+    ) => {
+      return h(
+        "div",
+        null,
+        `${props.text}: ${props.count}`
+      );
+    };
+
+    const container = renderWhen({
+      state: showState,
+      component: PropsComponent,
+      props: { text: "Count", count: 42 },
+      signal: controller.signal
+    });
+
+    expect(container.children[0].textContent).toBe("Count: 42");
+
+    controller.abort();
+  });
+
+  test("should work with predicate function", () => {
+    const controller = new AbortController();
+    enum Status { Loading, Success, Error }
+    const statusState = funState(Status.Loading);
+
+    const container = renderWhen({
+      state: statusState,
+      predicate: (status) => status === Status.Success,
+      component: TestComponent,
+      props: { text: "Success!" },
+      signal: controller.signal
+    });
+
+    // Should not render initially
+    expect(container.children.length).toBe(0);
+
+    // Should render when predicate matches
+    statusState.set(Status.Success);
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].textContent).toBe("Success!");
+
+    // Should unmount when predicate doesn't match
+    statusState.set(Status.Error);
+    expect(container.children.length).toBe(0);
+
+    // Should mount again when predicate matches
+    statusState.set(Status.Success);
+    expect(container.children.length).toBe(1);
+
+    controller.abort();
+  });
+});

package/src/dom.ts

@@ -312,6 +312,77 @@ export function keyedChildren<T extends Keyed>(
   return { reconcile, dispose };
 }
 
+/**
+ * Conditionally render a component based on state and an optional predicate.
+ * Returns a container element that mounts/unmounts the component as the condition changes.
+ *
+ * @example
+ * // With boolean state
+ * const showDetails = funState(false);
+ * const detailsEl = renderWhen({
+ *   state: showDetails,
+ *   component: DetailsComponent,
+ *   props: {id: 123},
+ *   signal
+ * });
+ * parent.appendChild(detailsEl);
+ *
+ * @example
+ * // With predicate
+ * const rollType = funState(RollType.action);
+ * const actionEl = renderWhen({
+ *   state: rollType,
+ *   predicate: (type) => type === RollType.action,
+ *   component: ActionForm,
+ *   props: {roll, uid},
+ *   signal
+ * });
+ */
+export function renderWhen<State, Props>(options: {
+  state: FunState<State>
+  predicate?: (value: State) => boolean
+  component: (signal: AbortSignal, props: Props) => Element
+  props: Props
+  signal: AbortSignal
+}): Element {
+  const { state, predicate = (x) => x as unknown as boolean, component, props, signal } = options;
+
+  const container = document.createElement("span");
+  container.style.display = "contents";
+  let childCtrl: AbortController | null = null;
+  let childEl: Element | null = null;
+
+  const reconcile = () => {
+    const shouldRender = predicate(state.get());
+
+    if (shouldRender && !childEl) {
+      // Mount the component
+      childCtrl = new AbortController();
+      childEl = component(childCtrl.signal, props);
+      container.appendChild(childEl);
+    } else if (!shouldRender && childEl) {
+      // Unmount the component
+      childCtrl?.abort();
+      childEl.remove();
+      childEl = null;
+      childCtrl = null;
+    }
+  };
+
+  // React to state changes
+  state.watch(signal, reconcile);
+
+  // Clean up when parent aborts
+  signal.addEventListener("abort", () => {
+    childCtrl?.abort();
+  }, { once: true });
+
+  // Initial render
+  reconcile();
+
+  return container;
+}
+
 export const $ = <T extends Element>(selector: string): T | undefined =>
   document.querySelector<T>(selector) ?? undefined;
 

package/src/index.ts

@@ -20,6 +20,7 @@ export {
   bindProperty,
   bindPropertyTo,
   keyedChildren,
+  renderWhen,
   enhance,
   $,
   $$,