@headless-tree/core 0.0.10 → 0.0.11

package/src/test-utils/test-tree-expect.ts

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Mock, expect } from "vitest";
+import { DragEvent } from "react";
+import { TestTree } from "./test-tree";
+import { DropTarget } from "../features/drag-and-drop/types";
+
+export class TestTreeExpect<T> {
+  protected itemInstance(itemId: string) {
+    return this.tree.instance.getItemInstance(itemId);
+  }
+
+  protected itemProps(itemId: string) {
+    return this.itemInstance(itemId).getProps();
+  }
+
+  constructor(private tree: TestTree<T>) {}
+
+  foldersExpanded(...itemIds: string[]) {
+    for (const itemId of itemIds) {
+      expect(
+        this.tree.instance.getItemInstance(itemId).isExpanded(),
+        `Expected ${itemId} to be expanded`,
+      ).toBe(true);
+    }
+  }
+
+  foldersCollapsed(...itemIds: string[]) {
+    for (const itemId of itemIds) {
+      expect(
+        this.tree.instance.getItemInstance(itemId).isExpanded(),
+        `Expected ${itemId} to be collapsed`,
+      ).toBe(false);
+    }
+  }
+
+  hasChildren(itemId: string, children: string[]) {
+    const item = this.tree.instance.getItemInstance(itemId);
+    const itemChildren = item.getChildren().map((child) => child.getId());
+    expect(itemChildren).toEqual(children);
+  }
+
+  dropped(draggedItems: string[], target: DropTarget<any>) {
+    expect(this.tree.instance.getConfig().onDrop).toBeCalledWith(
+      draggedItems.map((id) => this.tree.item(id)),
+      target,
+    );
+  }
+
+  dragOverNotAllowed(itemId: string, event?: DragEvent) {
+    const e = event ?? TestTree.dragEvent();
+    (e.preventDefault as Mock).mockClear();
+    this.itemProps(itemId).onDragOver(e);
+    this.itemProps(itemId).onDragOver(e);
+    this.itemProps(itemId).onDragOver(e);
+    expect(
+      e.preventDefault,
+      "onDragOver shouldn't call e.preventDefault if drag is not allowed",
+    ).not.toBeCalled();
+
+    this.itemProps(itemId).onDrop(e);
+    expect(
+      e.preventDefault,
+      "onDrop shouldn't call e.preventDefault if drag is not allowed",
+    ).not.toBeCalled();
+    expect(
+      this.tree.instance.getConfig().onDrop,
+      "onDrop handler shouldn't be called if drag is not allowed",
+    ).not.toBeCalled();
+    return e;
+  }
+
+  defaultDragLineProps(indent = 0) {
+    expect(this.tree.instance.getDragLineData()).toEqual({
+      indent,
+      left: indent * 20,
+      right: 100,
+      top: 0,
+    });
+    expect(this.tree.instance.getDragLineStyle(0, 0)).toEqual({
+      left: `${indent * 20}px`,
+      pointerEvents: "none",
+      top: "0px",
+      width: `${100 - indent * 20}px`,
+    });
+  }
+}

package/src/test-utils/test-tree.ts

@@ -0,0 +1,217 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { beforeEach, describe, vi } from "vitest";
+import { DragEvent } from "react";
+import { TreeConfig, TreeInstance } from "../types/core";
+import { createTree } from "../core/create-tree";
+import { TestTreeDo } from "./test-tree-do";
+import { TestTreeExpect } from "./test-tree-expect";
+import { syncDataLoaderFeature } from "../features/sync-data-loader/feature";
+import { asyncDataLoaderFeature } from "../features/async-data-loader/feature";
+import { buildProxiedInstance } from "../core/build-proxified-instance";
+
+vi.useFakeTimers({ shouldAdvanceTime: true });
+
+export class TestTree<T = string> {
+  public readonly do = new TestTreeDo(this);
+
+  public readonly expect = new TestTreeExpect(this);
+
+  private treeInstance: TreeInstance<T> | null = null;
+
+  private static asyncLoaderResolvers: (() => void)[] = [];
+
+  suits = {
+    sync: () => ({
+      tree: this.withFeatures(syncDataLoaderFeature),
+      title: "Synchronous Data Loader",
+    }),
+    async: () => ({
+      tree: this.withFeatures(asyncDataLoaderFeature),
+      title: "Asynchronous Data Loader",
+    }),
+    proxifiedSync: () => ({
+      tree: this.withFeatures(syncDataLoaderFeature).with({
+        instanceBuilder: buildProxiedInstance,
+      }),
+      title: "Proxified Synchronous Data Loader",
+    }),
+    proxifiedAsync: () => ({
+      tree: this.withFeatures(asyncDataLoaderFeature).with({
+        instanceBuilder: buildProxiedInstance,
+      }),
+      title: "Proxified Asynchronous Data Loader",
+    }),
+  };
+
+  forSuits(runSuite: (tree: TestTree<T>) => void) {
+    describe.for([
+      this.suits.sync(),
+      this.suits.async(),
+      this.suits.proxifiedSync(),
+      this.suits.proxifiedAsync(),
+    ])("$title", ({ tree }) => {
+      tree.resetBeforeEach();
+      runSuite(tree);
+    });
+  }
+
+  get instance() {
+    if (!this.treeInstance) {
+      this.treeInstance = createTree(this.config);
+    }
+    return this.treeInstance;
+  }
+
+  private constructor(private config: TreeConfig<T>) {}
+
+  static async resolveAsyncLoaders() {
+    while (TestTree.asyncLoaderResolvers.length) {
+      TestTree.asyncLoaderResolvers.shift()?.();
+      await new Promise<void>((r) => {
+        setTimeout(r);
+      });
+    }
+  }
+
+  async resolveAsyncVisibleItems() {
+    this.instance.getItems();
+    await TestTree.resolveAsyncLoaders();
+    this.instance.getItems().forEach((i) => i.getItemName());
+    await TestTree.resolveAsyncLoaders();
+  }
+
+  static default(config: Partial<TreeConfig<string>>) {
+    return new TestTree({
+      rootItemId: "x",
+      createLoadingItemData: () => "loading",
+      dataLoader: {
+        getItem: (id) => id,
+        getChildren: (id) => [`${id}1`, `${id}2`, `${id}3`, `${id}4`],
+      },
+      asyncDataLoader: {
+        getItem: async (id) => {
+          await new Promise<void>((r) => {
+            (r as any).debugName = `Loading getItem ${id}`;
+            TestTree.asyncLoaderResolvers.push(r);
+          });
+          return id;
+        },
+        getChildren: async (id) => {
+          await new Promise<void>((r) => {
+            (r as any).debugName = `Loading getChildren ${id}`;
+            TestTree.asyncLoaderResolvers.push(r);
+          });
+          return [`${id}1`, `${id}2`, `${id}3`, `${id}4`];
+        },
+      },
+      getItemName: (item) => item.getItemData(),
+      indent: 20,
+      isItemFolder: (item) => item.getItemMeta().level < 2,
+      initialState: {
+        expandedItems: ["x1", "x11"],
+      },
+      features: [],
+      ...config,
+    });
+  }
+
+  with(config: Partial<TreeConfig<T>>) {
+    return new TestTree({ ...this.config, ...config });
+  }
+
+  resetBeforeEach() {
+    beforeEach(async () => {
+      await this.createTestCaseTree();
+    });
+  }
+
+  async createTestCaseTree() {
+    this.reset();
+    vi.clearAllMocks();
+    // trigger instance creation
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    this.instance;
+    await this.resolveAsyncVisibleItems();
+    return this;
+  }
+
+  withFeatures(...features: any) {
+    return this.with({
+      features: [...(this.config.features ?? []), ...features],
+    });
+  }
+
+  mockedHandler(handlerName: keyof TreeConfig<T>) {
+    const mock = vi.fn();
+    if (this.treeInstance) {
+      this.treeInstance?.setConfig((prev) => ({
+        ...prev,
+        [handlerName as any]: mock,
+      }));
+    } else {
+      (this.config as any)[handlerName as any] = mock;
+    }
+    return mock;
+  }
+
+  item(itemId: string) {
+    return this.instance.getItemInstance(itemId);
+  }
+
+  reset() {
+    this.treeInstance = null;
+    TestTree.asyncLoaderResolvers = [];
+  }
+
+  debug() {
+    console.log(
+      this.instance
+        .getItems()
+        .map((item) =>
+          [
+            "  ".repeat(item.getItemMeta().level),
+            '"',
+            item.getItemName(),
+            '"',
+          ].join(""),
+        )
+        .join("\n"),
+    );
+  }
+
+  setElementBoundingBox(
+    itemId: string,
+    bb: Partial<DOMRect> = {
+      left: 0,
+      right: 100,
+      top: 0,
+      height: 20,
+    },
+  ) {
+    this.instance.getItemInstance(itemId).registerElement({
+      getBoundingClientRect: () => bb as DOMRect,
+    } as HTMLElement);
+  }
+
+  static dragEvent(pageX = 1000, pageY = 0) {
+    return {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+      dataTransfer: {
+        setData: vi.fn(),
+        getData: vi.fn(),
+        dropEffect: "unchaged-from-test",
+      },
+      pageX,
+      pageY,
+    } as unknown as DragEvent;
+  }
+
+  createTopDragEvent(indent = 0) {
+    return TestTree.dragEvent(indent * 20, 1);
+  }
+
+  createBottomDragEvent(indent = 0) {
+    return TestTree.dragEvent(indent * 20, 19);
+  }
+}

package/src/types/core.ts

@@ -15,11 +15,13 @@ import { ExpandAllFeatureDef } from "../features/expand-all/types";
 export type Updater<T> = T | ((old: T) => T);
 export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
 
+type FunctionMap = Record<string, (...args: any[]) => any>;
+
 export type FeatureDef = {
-  state: object;
-  config: object;
-  treeInstance: object;
-  itemInstance: object;
+  state: any;
+  config: any;
+  treeInstance: FunctionMap;
+  itemInstance: FunctionMap;
   hotkeys: string;
 };
 
@@ -52,7 +54,8 @@ export type FeatureDefs<T> =
   | ExpandAllFeatureDef;
 
 type MergedFeatures<F extends FeatureDef> = {
-  // TODO remove in favor of types below
+  // type can't be removed because it's used for individual feature sets as feature deps in feature implementations
+  // to my future self, yes I'm already aware this sounds dumb when I first write this
   state: UnionToIntersection<F["state"]>;
   config: UnionToIntersection<F["config"]>;
   treeInstance: UnionToIntersection<F["treeInstance"]>;
@@ -123,62 +126,118 @@ export type CustomHotkeysConfig<
   Record<HotkeyName<F> | `custom${string}`, Partial<HotkeyConfig<T>>>
 >;
 
+type MayReturnNull<T extends (...x: any[]) => any> = (
+  ...args: Parameters<T>
+) => ReturnType<T> | null;
+
+export type ItemInstanceOpts<
+  ItemInstance extends FunctionMap = FunctionMap,
+  TreeInstance extends FunctionMap = FunctionMap,
+  Key extends keyof ItemInstance = any,
+> = {
+  item: ItemInstance;
+  tree: TreeInstance;
+  itemId: string;
+  prev?: MayReturnNull<ItemInstance[Key]>;
+};
+
+export type TreeInstanceOpts<
+  TreeInstance extends FunctionMap = FunctionMap,
+  Key extends keyof TreeInstance = any,
+> = {
+  tree: TreeInstance;
+  prev?: MayReturnNull<TreeInstance[Key]>;
+};
+
 export type FeatureImplementation<
   T = any,
-  D extends FeatureDef = any,
-  F extends FeatureDef = EmptyFeatureDef,
+  SelfFeatureDef extends FeatureDef = any,
+  DepFeaturesDef extends FeatureDef = any,
+  // /** @internal */
+  // AllFeatures extends FeatureDef = MergedFeatures<
+  //   DepFeaturesDef | SelfFeatureDef
+  // >,
+  // /** @internal */
+  // DepFeatures extends FeatureDef = MergedFeatures<DepFeaturesDef>,
 > = {
   key?: string;
   deps?: string[];
   overwrites?: string[];
 
   stateHandlerNames?: Partial<
-    Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>
+    Record<
+      keyof MergedFeatures<DepFeaturesDef>["state"],
+      keyof MergedFeatures<DepFeaturesDef>["config"]
+    >
   >;
 
   getInitialState?: (
-    initialState: Partial<MergedFeatures<F>["state"]>,
-    tree: MergedFeatures<F>["treeInstance"],
-  ) => Partial<D["state"] & MergedFeatures<F>["state"]>;
+    initialState: Partial<MergedFeatures<DepFeaturesDef>["state"]>,
+    tree: MergedFeatures<DepFeaturesDef>["treeInstance"],
+  ) => Partial<
+    SelfFeatureDef["state"] & MergedFeatures<DepFeaturesDef>["state"]
+  >;
 
   getDefaultConfig?: (
-    defaultConfig: Partial<MergedFeatures<F>["config"]>,
-    tree: MergedFeatures<F>["treeInstance"],
-  ) => Partial<D["config"] & MergedFeatures<F>["config"]>;
-
-  createTreeInstance?: (
-    prev: MergedFeatures<F>["treeInstance"],
-    instance: MergedFeatures<F>["treeInstance"],
-  ) => D["treeInstance"] & MergedFeatures<F>["treeInstance"];
-
-  createItemInstance?: (
-    prev: MergedFeatures<F>["itemInstance"],
-    item: MergedFeatures<F>["itemInstance"],
-    tree: MergedFeatures<F>["treeInstance"],
-    itemId: string,
-  ) => D["itemInstance"] & MergedFeatures<F>["itemInstance"];
+    defaultConfig: Partial<MergedFeatures<DepFeaturesDef>["config"]>,
+    tree: MergedFeatures<DepFeaturesDef>["treeInstance"],
+  ) => Partial<
+    SelfFeatureDef["config"] & MergedFeatures<DepFeaturesDef>["config"]
+  >;
+
+  treeInstance?: {
+    [key in keyof (SelfFeatureDef["treeInstance"] &
+      MergedFeatures<DepFeaturesDef>["treeInstance"])]?: (
+      opts: TreeInstanceOpts<
+        SelfFeatureDef["treeInstance"] &
+          MergedFeatures<DepFeaturesDef>["treeInstance"],
+        key
+      >,
+      ...args: Parameters<
+        (SelfFeatureDef["treeInstance"] &
+          MergedFeatures<DepFeaturesDef>["treeInstance"])[key]
+      >
+    ) => void;
+  };
+
+  itemInstance?: {
+    [key in keyof (SelfFeatureDef["itemInstance"] &
+      MergedFeatures<DepFeaturesDef>["itemInstance"])]?: (
+      opts: ItemInstanceOpts<
+        SelfFeatureDef["itemInstance"] &
+          MergedFeatures<DepFeaturesDef>["itemInstance"],
+        SelfFeatureDef["treeInstance"] &
+          MergedFeatures<DepFeaturesDef>["treeInstance"],
+        key
+      >,
+      ...args: Parameters<
+        (SelfFeatureDef["itemInstance"] &
+          MergedFeatures<DepFeaturesDef>["itemInstance"])[key]
+      >
+    ) => void;
+  };
 
   onTreeMount?: (
-    instance: MergedFeatures<F>["treeInstance"],
+    instance: MergedFeatures<DepFeaturesDef>["treeInstance"],
     treeElement: HTMLElement,
   ) => void;
 
   onTreeUnmount?: (
-    instance: MergedFeatures<F>["treeInstance"],
+    instance: MergedFeatures<DepFeaturesDef>["treeInstance"],
     treeElement: HTMLElement,
   ) => void;
 
   onItemMount?: (
-    instance: MergedFeatures<F>["itemInstance"],
+    instance: MergedFeatures<DepFeaturesDef>["itemInstance"],
     itemElement: HTMLElement,
-    tree: MergedFeatures<F>["treeInstance"],
+    tree: MergedFeatures<DepFeaturesDef>["treeInstance"],
   ) => void;
 
   onItemUnmount?: (
-    instance: MergedFeatures<F>["itemInstance"],
+    instance: MergedFeatures<DepFeaturesDef>["itemInstance"],
     itemElement: HTMLElement,
-    tree: MergedFeatures<F>["treeInstance"],
+    tree: MergedFeatures<DepFeaturesDef>["treeInstance"],
   ) => void;
 
-  hotkeys?: HotkeysConfig<T, D>;
+  hotkeys?: HotkeysConfig<T, SelfFeatureDef>;
 };

package/src/utilities/errors.ts

@@ -0,0 +1,2 @@
+export const throwError = (message: string) =>
+  Error(`Headless Tree: ${message}`);

package/src/utilities/insert-items-at-target.ts

@@ -8,11 +8,15 @@ export const insertItemsAtTarget = <T>(
 ) => {
   // add moved items to new common parent, if dropped onto parent
   if (target.childIndex === null) {
-    onChangeChildren(target.item, [
+    const newChildren = [
       ...target.item.getChildren().map((item) => item.getId()),
       ...itemIds,
-    ]);
-    // TODO items[0].getTree().rebuildTree();
+    ];
+    onChangeChildren(target.item, newChildren);
+    if (target.item && "updateCachedChildrenIds" in target.item) {
+      target.item.updateCachedChildrenIds(newChildren);
+    }
+    target.item.getTree().rebuildTree();
     return;
   }
 
@@ -26,5 +30,8 @@ export const insertItemsAtTarget = <T>(
 
   onChangeChildren(target.item, newChildren);
 
+  if (target.item && "updateCachedChildrenIds" in target.item) {
+    target.item.updateCachedChildrenIds(newChildren);
+  }
   target.item.getTree().rebuildTree();
 };

package/src/utilities/remove-items-from-parents.ts

@@ -4,16 +4,21 @@ export const removeItemsFromParents = <T>(
   movedItems: ItemInstance<T>[],
   onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void,
 ) => {
-  // TODO bulk sibling changes together
-  for (const item of movedItems) {
-    const siblings = item.getParent()?.getChildren();
-    if (siblings) {
-      onChangeChildren(
-        item.getParent(),
-        siblings
-          .filter((sibling) => sibling.getId() !== item.getId())
-          .map((i) => i.getId()),
-      );
+  const movedItemsIds = movedItems.map((item) => item.getId());
+  const uniqueParents = [
+    ...new Set(movedItems.map((item) => item.getParent())),
+  ];
+
+  for (const parent of uniqueParents) {
+    const siblings = parent?.getChildren();
+    if (siblings && parent) {
+      const newChildren = siblings
+        .filter((sibling) => !movedItemsIds.includes(sibling.getId()))
+        .map((i) => i.getId());
+      onChangeChildren(parent, newChildren);
+      if (parent && "updateCachedChildrenIds" in parent) {
+        parent?.updateCachedChildrenIds(newChildren);
+      }
     }
   }
 

package/src/utils.spec.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from "vitest";
+import { makeStateUpdater, memo, poll } from "./utils";
+
+vi.useFakeTimers({ shouldAdvanceTime: true });
+
+describe("utilities", () => {
+  describe("memo", () => {
+    it("returns same value for same arguments", () => {
+      const fn = vi.fn(
+        (a: number, b: number, c: number, d: number) => a + b + c + d,
+      );
+      const memoized = memo((c: number, d: number) => [1, 1, c, d], fn);
+      expect(memoized(1, 1)).toBe(4);
+      expect(memoized(1, 1)).toBe(4);
+      expect(memoized(1, 1)).toBe(4);
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+
+    it("returns different values for different arguments", () => {
+      const fn = vi.fn(
+        (a: number, b: number, c: number, d: number) => a + b + c + d,
+      );
+      const memoized = memo((c: number, d: number) => [1, 1, c, d], fn);
+      expect(memoized(1, 1)).toBe(4);
+      expect(memoized(1, 2)).toBe(5);
+      expect(memoized(1, 2)).toBe(5);
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("makeStateUpdater", () => {
+    it("updates the state correctly", () => {
+      const instance = {
+        setState: vi.fn((updater) => {
+          const oldState = { focusedItem: "oldValue" };
+          const newState = updater(oldState);
+          return newState;
+        }),
+      };
+
+      const updater = makeStateUpdater("focusedItem", instance);
+      updater("newValue");
+
+      expect(instance.setState).toHaveBeenCalledTimes(1);
+      expect(instance.setState).toHaveBeenCalledWith(expect.any(Function));
+      const stateUpdateFn = instance.setState.mock.calls[0][0];
+      expect(stateUpdateFn({ focusedItem: "oldValue" })).toEqual({
+        focusedItem: "newValue",
+      });
+    });
+
+    it("updates the state using a function updater", () => {
+      const instance = {
+        setState: vi.fn((updater) => {
+          const oldState = { focusedItem: "oldValue" };
+          const newState = updater(oldState);
+          return newState;
+        }),
+      };
+
+      const updater = makeStateUpdater("focusedItem", instance);
+      updater((prev) => `${prev}Updated`);
+
+      expect(instance.setState).toHaveBeenCalledTimes(1);
+      expect(instance.setState).toHaveBeenCalledWith(expect.any(Function));
+      const stateUpdateFn = instance.setState.mock.calls[0][0];
+      expect(stateUpdateFn({ focusedItem: "oldValue" })).toEqual({
+        focusedItem: "oldValueUpdated",
+      });
+    });
+  });
+
+  describe("poll", () => {
+    it("resolves when the condition is met within the timeout", async () => {
+      const condition = vi
+        .fn()
+        .mockReturnValueOnce(false)
+        .mockReturnValueOnce(true);
+      await expect(poll(condition, 50, 200)).resolves.toBeUndefined();
+      expect(condition).toHaveBeenCalledTimes(2);
+    });
+
+    it("resolves immediately if the condition is already met", async () => {
+      const condition = vi.fn().mockReturnValue(true);
+      await expect(poll(condition, 50, 200)).resolves.toBeUndefined();
+      expect(condition).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/utils.ts

@@ -1,16 +1,16 @@
-import { TreeState, Updater } from "./types/core";
+import { SetStateFn, TreeState, Updater } from "./types/core";
 
 export type NoInfer<T> = [T][T extends any ? 0 : never];
 
-export const memo = <D extends readonly any[], R>(
+export const memo = <D extends readonly any[], P extends readonly any[], R>(
+  deps: (...args: [...P]) => [...D],
   fn: (...args: [...D]) => R,
-  deps: () => [...D],
 ) => {
   let value: R | undefined;
   let oldDeps: D | null = null;
 
-  return () => {
-    const newDeps = deps();
+  return (...a: [...P]) => {
+    const newDeps = deps(...a);
 
     if (!value) {
       value = fn(...newDeps);
@@ -41,7 +41,7 @@ export function functionalUpdate<T>(updater: Updater<T>, input: T): T {
 export function makeStateUpdater<K extends keyof TreeState<any>>(
   key: K,
   instance: unknown,
-) {
+): SetStateFn<TreeState<any>[K]> {
   return (updater: Updater<TreeState<any>[K]>) => {
     (instance as any).setState(<TTableState>(old: TTableState) => {
       return {

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["./src/**/*"],
+  "exclude": ["./src/**/*.spec.tsx", "./src/**/*.spec.ts", "./src/**/*.stories.tsx"],
   "compilerOptions": {
     "outDir": "lib/esm"
   }

package/vitest.config.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {},
+});