@assistant-ui/tap 0.3.4 → 0.3.5

package/src/__tests__/basic/resourceHandle.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import { createResource } from "../../core/createResource";
+import { resource } from "../../core/resource";
+
+describe("ResourceHandle - Basic Usage", () => {
+  it("should create a resource handle with const API", () => {
+    const TestResource = resource((props: number) => {
+      return {
+        value: props * 2,
+        propsUsed: props,
+      };
+    });
+    const handle = createResource(TestResource(5));
+
+    // The handle provides a const API
+    expect(typeof handle.getState).toBe("function");
+    expect(typeof handle.subscribe).toBe("function");
+    expect(typeof handle.render).toBe("function");
+
+    // Initial state
+    expect(handle.getState().value).toBe(10);
+    expect(handle.getState().propsUsed).toBe(5);
+  });
+
+  it("should allow updating props", () => {
+    const TestResource = resource((props: { multiplier: number }) => {
+      return { result: 10 * props.multiplier };
+    });
+    const handle = createResource(TestResource({ multiplier: 2 }));
+
+    // Initial state
+    expect(handle.getState().result).toBe(20);
+
+    // Can call render to update props
+    expect(() => handle.render(TestResource({ multiplier: 3 }))).not.toThrow();
+  });
+
+  it("should support subscribing and unsubscribing", () => {
+    const TestResource = resource(() => ({ timestamp: Date.now() }));
+    const handle = createResource(TestResource());
+
+    const subscriber1 = vi.fn();
+    const subscriber2 = vi.fn();
+
+    // Can subscribe multiple callbacks
+    const unsub1 = handle.subscribe(subscriber1);
+    const unsub2 = handle.subscribe(subscriber2);
+
+    // Can unsubscribe individually
+    expect(typeof unsub1).toBe("function");
+    expect(typeof unsub2).toBe("function");
+
+    unsub1();
+    unsub2();
+  });
+});

package/src/__tests__/basic/tapEffect.basic.test.ts

@@ -0,0 +1,247 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { tapEffect } from "../../hooks/tap-effect";
+import { tapState } from "../../hooks/tap-state";
+import {
+  createTestResource,
+  renderTest,
+  cleanupAllResources,
+  TestResourceManager,
+} from "../test-utils";
+
+describe("tapEffect - Basic Functionality", () => {
+  afterEach(() => {
+    cleanupAllResources();
+  });
+
+  describe("Effect Lifecycle", () => {
+    it("should run effect after mount and commit", () => {
+      const executionOrder: string[] = [];
+
+      const testFiber = createTestResource(() => {
+        executionOrder.push("render");
+
+        tapEffect(() => {
+          executionOrder.push("effect");
+        });
+
+        return null;
+      });
+
+      // Use TestResourceManager for fine-grained control
+      const manager = new TestResourceManager(testFiber);
+
+      // Mount and render
+      manager.renderAndMount(undefined);
+
+      // Effect should run after commit
+      expect(executionOrder).toEqual(["render", "effect"]);
+
+      manager.cleanup();
+    });
+
+    it("should call cleanup function on unmount", () => {
+      const cleanup = vi.fn();
+      const effect = vi.fn(() => cleanup);
+
+      const testFiber = createTestResource(() => {
+        tapEffect(effect);
+        return null;
+      });
+
+      const manager = new TestResourceManager(testFiber);
+      manager.renderAndMount(undefined);
+
+      // Effect should be called, but not cleanup
+      expect(effect).toHaveBeenCalledTimes(1);
+      expect(cleanup).not.toHaveBeenCalled();
+
+      // Cleanup should be called on unmount
+      manager.cleanup();
+      expect(cleanup).toHaveBeenCalledTimes(1);
+    });
+
+    it("should cleanup effects in reverse order", () => {
+      const cleanupOrder: string[] = [];
+
+      const testFiber = createTestResource(() => {
+        tapEffect(() => {
+          return () => cleanupOrder.push("first");
+        });
+
+        tapEffect(() => {
+          return () => cleanupOrder.push("second");
+        });
+
+        tapEffect(() => {
+          return () => cleanupOrder.push("third");
+        });
+
+        return null;
+      });
+
+      const manager = new TestResourceManager(testFiber);
+      manager.renderAndMount(undefined);
+      manager.cleanup();
+
+      // Cleanup should run in reverse order (LIFO)
+      expect(cleanupOrder).toEqual(["third", "second", "first"]);
+    });
+  });
+
+  describe("Multiple Effects", () => {
+    it("should execute multiple effects in registration order", () => {
+      const executionOrder: string[] = [];
+      const effects = [
+        () => {
+          executionOrder.push("effect1");
+        },
+        () => {
+          executionOrder.push("effect2");
+        },
+        () => {
+          executionOrder.push("effect3");
+        },
+      ];
+
+      const testFiber = createTestResource(() => {
+        effects.forEach((fn) => tapEffect(fn));
+        return null;
+      });
+
+      renderTest(testFiber, undefined);
+      expect(executionOrder).toEqual(["effect1", "effect2", "effect3"]);
+    });
+
+    it("should handle mixed effects with and without dependencies", () => {
+      const effectCalls = {
+        always: 0,
+        once: 0,
+        conditional: 0,
+      };
+
+      const testFiber = createTestResource((props: { value: number }) => {
+        // Effect without deps - runs on every render
+        tapEffect(() => {
+          effectCalls.always++;
+        });
+
+        // Effect with empty deps - runs only once
+        tapEffect(() => {
+          effectCalls.once++;
+        }, []);
+
+        // Effect with deps - runs when deps change
+        tapEffect(() => {
+          effectCalls.conditional++;
+        }, [props.value]);
+
+        return effectCalls;
+      });
+
+      // Initial render
+      renderTest(testFiber, { value: 1 });
+      expect(effectCalls).toEqual({ always: 1, once: 1, conditional: 1 });
+
+      // Re-render with same props
+      renderTest(testFiber, { value: 1 });
+      expect(effectCalls).toEqual({ always: 2, once: 1, conditional: 1 });
+
+      // Re-render with different props
+      renderTest(testFiber, { value: 2 });
+      expect(effectCalls).toEqual({ always: 3, once: 1, conditional: 2 });
+    });
+  });
+
+  describe("Effect Dependencies", () => {
+    it("should not re-run effect with empty dependency array", () => {
+      const effect = vi.fn();
+      let triggerRerender: (() => void) | null = null;
+
+      const testFiber = createTestResource(() => {
+        const [, setState] = tapState(0);
+
+        tapEffect(() => {
+          triggerRerender = () => setState((prev) => prev + 1);
+        });
+
+        tapEffect(effect, []);
+
+        return null;
+      });
+
+      // Initial render
+      renderTest(testFiber, undefined);
+      expect(effect).toHaveBeenCalledTimes(1);
+
+      // Trigger re-render
+      triggerRerender!();
+
+      // Effect with empty deps should not re-run
+      expect(effect).toHaveBeenCalledTimes(1);
+    });
+
+    it("should re-run effect when dependencies change", () => {
+      const effect = vi.fn();
+
+      const testFiber = createTestResource((props: { dep: string }) => {
+        tapEffect(() => {
+          effect(props.dep);
+        }, [props.dep]);
+
+        return null;
+      });
+
+      // Initial render
+      renderTest(testFiber, { dep: "a" });
+      expect(effect).toHaveBeenCalledTimes(1);
+      expect(effect).toHaveBeenLastCalledWith("a");
+
+      // Re-render with same dependency
+      renderTest(testFiber, { dep: "a" });
+      expect(effect).toHaveBeenCalledTimes(1);
+
+      // Re-render with different dependency
+      renderTest(testFiber, { dep: "b" });
+      expect(effect).toHaveBeenCalledTimes(2);
+      expect(effect).toHaveBeenLastCalledWith("b");
+    });
+  });
+
+  describe("Effect Timing", () => {
+    it("should run effects after state updates are committed", () => {
+      const events: string[] = [];
+
+      const testFiber = createTestResource(() => {
+        const [count, setCount] = tapState(0);
+
+        events.push(`render: ${count}`);
+
+        tapEffect(() => {
+          events.push(`effect: ${count}`);
+
+          // Only update on first effect to avoid infinite loop
+          if (count === 0) {
+            setCount(1);
+          }
+        });
+
+        return count;
+      });
+
+      const manager = new TestResourceManager(testFiber);
+
+      // Initial render
+      manager.renderAndMount(undefined);
+      // Without mount tracking, the effect runs immediately during commit
+      // This triggers setState which causes a synchronous re-render
+      expect(events).toEqual([
+        "render: 0",
+        "effect: 0",
+        "render: 1",
+        "effect: 1",
+      ]);
+
+      manager.cleanup();
+    });
+  });
+});

package/src/__tests__/basic/tapResources.basic.test.ts

@@ -0,0 +1,222 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { tapResources } from "../../hooks/tap-resources";
+import { tapState } from "../../hooks/tap-state";
+import { resource } from "../../core/resource";
+import {
+  createTestResource,
+  renderTest,
+  cleanupAllResources,
+  createCounterResource,
+} from "../test-utils";
+
+// ============================================================================
+// Test Resources
+// ============================================================================
+
+// Simple counter that just returns the value
+const SimpleCounter = resource(createCounterResource());
+
+// Stateful counter that tracks its own count
+const StatefulCounter = resource((props: { initial: number }) => {
+  const [count] = tapState(props.initial);
+  return { count };
+});
+
+// Display component for testing type changes
+const Display = resource((props: { text: string }) => {
+  return { type: "display", text: props.text };
+});
+
+// Counter with render tracking for testing instance preservation
+const renderCounts = new Map<string, number>();
+const instances = new Map<string, object>();
+const TrackingCounter = resource((props: { value: number; id: string }) => {
+  const currentCount = (renderCounts.get(props.id) || 0) + 1;
+  renderCounts.set(props.id, currentCount);
+
+  if (!instances.has(props.id)) {
+    instances.set(props.id, { id: `fiber-${props.id}` });
+  }
+
+  return {
+    value: props.value,
+    id: props.id,
+    renderCount: currentCount,
+    instance: instances.get(props.id),
+  };
+});
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe("tapResources - Basic Functionality", () => {
+  afterEach(() => {
+    cleanupAllResources();
+  });
+
+  describe("Basic Rendering", () => {
+    it("should render multiple resources with keys", () => {
+      const testFiber = createTestResource(() => {
+        const results = tapResources(
+          { a: 10, b: 20, c: 30 },
+          (value) => SimpleCounter({ value }),
+          [],
+        );
+
+        return results;
+      });
+
+      const result = renderTest(testFiber, undefined);
+      expect(result).toEqual({
+        a: { count: 10 },
+        b: { count: 20 },
+        c: { count: 30 },
+      });
+    });
+
+    it("should work with resource constructor syntax", () => {
+      const Counter = resource((props: { value: number }) => {
+        const [count] = tapState(props.value);
+        return { count, double: count * 2 };
+      });
+
+      const testFiber = createTestResource(() => {
+        const items = {
+          first: { value: 5 },
+          second: { value: 10 },
+          third: { value: 15 },
+        };
+
+        const results = tapResources(
+          items,
+          (item) => Counter({ value: item.value }),
+          [],
+        );
+
+        return results;
+      });
+
+      const result = renderTest(testFiber, undefined);
+      expect(result).toEqual({
+        first: { count: 5, double: 10 },
+        second: { count: 10, double: 20 },
+        third: { count: 15, double: 30 },
+      });
+    });
+  });
+
+  describe("Instance Preservation", () => {
+    it("should maintain resource instances when keys remain the same", () => {
+      const testFiber = createTestResource(
+        (props: { items: Record<string, { value: number; id: string }> }) => {
+          return tapResources(
+            props.items,
+            (item) => TrackingCounter({ value: item.value, id: item.id }),
+
+            [],
+          );
+        },
+      );
+
+      // Initial render
+      const result1 = renderTest(testFiber, {
+        items: { a: { value: 1, id: "a" }, b: { value: 2, id: "b" } },
+      });
+
+      // Verify initial state
+      expect(result1.a).toMatchObject({
+        id: "a",
+        value: 1,
+        renderCount: 1,
+      });
+      expect(result1.b).toMatchObject({
+        id: "b",
+        value: 2,
+        renderCount: 1,
+      });
+
+      // Re-render with same keys but different values
+      const result2 = renderTest(testFiber, {
+        items: { b: { value: 20, id: "b" }, a: { value: 10, id: "a" } },
+      });
+
+      // Verify instances are preserved
+      expect(result2.b).toMatchObject({
+        id: "b",
+        value: 20,
+        renderCount: 2,
+      });
+      expect(result2.a).toMatchObject({
+        id: "a",
+        value: 10,
+        renderCount: 2,
+      });
+    });
+  });
+
+  describe("Dynamic List Management", () => {
+    it("should handle adding and removing resources", () => {
+      const testFiber = createTestResource(
+        (props: { items: Record<string, number> }) => {
+          const results = tapResources(
+            props.items,
+            (value) => SimpleCounter({ value }),
+
+            [],
+          );
+          return results;
+        },
+      );
+
+      // Initial render with 3 items
+      const result1 = renderTest(testFiber, { items: { a: 0, b: 10, c: 20 } });
+      expect(result1).toEqual({
+        a: { count: 0 },
+        b: { count: 10 },
+        c: { count: 20 },
+      });
+
+      // Remove middle item
+      const result2 = renderTest(testFiber, { items: { a: 0, c: 10 } });
+      expect(result2).toEqual({
+        a: { count: 0 },
+        c: { count: 10 },
+      });
+
+      // Add new item
+      const result3 = renderTest(testFiber, { items: { a: 0, c: 10, d: 20 } });
+      expect(result3).toEqual({
+        a: { count: 0 },
+        c: { count: 10 },
+        d: { count: 20 },
+      });
+    });
+
+    it("should handle changing resource types for the same key", () => {
+      const testFiber = createTestResource((props: { useCounter: boolean }) => {
+        const results = tapResources(
+          { item: props.useCounter },
+          (useCounter) =>
+            useCounter
+              ? StatefulCounter({ initial: 42 })
+              : Display({ text: "Hello" }),
+          [],
+        );
+        return results;
+      });
+
+      // Start with Counter
+      const result1 = renderTest(testFiber, { useCounter: true });
+      expect(result1).toEqual({ item: { count: 42 } });
+
+      // Switch to Display
+      const result2 = renderTest(testFiber, { useCounter: false });
+      expect(result2).toEqual({ item: { type: "display", text: "Hello" } });
+
+      // Switch back to Counter (new instance)
+      const result3 = renderTest(testFiber, { useCounter: true });
+      expect(result3).toEqual({ item: { count: 42 } });
+    });
+  });
+});