@headless-tree/core 0.0.0-20230802230636

package/src/index.ts

@@ -0,0 +1,26 @@
+export * from "./types/core";
+export * from "./core/create-tree";
+
+export * from "./features/tree/types";
+export * from "./features/main/types";
+export * from "./features/drag-and-drop/types";
+export * from "./features/selection/types";
+export * from "./features/async-data-loader/types";
+export * from "./features/sync-data-loader/types";
+export * from "./features/hotkeys-core/types";
+export * from "./features/search/types";
+export * from "./features/renaming/types";
+export * from "./features/expand-all/types";
+
+export * from "./features/selection/feature";
+export * from "./features/hotkeys-core/feature";
+export * from "./features/async-data-loader/feature";
+export * from "./features/sync-data-loader/feature";
+export * from "./features/drag-and-drop/feature";
+export * from "./features/search/feature";
+export * from "./features/renaming/feature";
+export * from "./features/expand-all/feature";
+
+export * from "./utilities/create-on-drop-handler";
+export * from "./utilities/insert-items-at-target";
+export * from "./utilities/remove-items-from-parents";

package/src/mddocs-entry.ts

@@ -0,0 +1,26 @@
+import { MainFeatureDef } from "./features/main/types";
+import { DragAndDropFeatureDef } from "./features/drag-and-drop/types";
+
+export * from ".";
+
+/** @interface */
+export type MainFeatureConfig = MainFeatureDef["config"];
+/** @interface */
+export type MainFeatureState = MainFeatureDef["state"];
+/** @interface */
+export type MainFeatureTreeInstance = MainFeatureDef["treeInstance"];
+/** @interface */
+export type MainFeatureItemInstance = MainFeatureDef["itemInstance"];
+export type MainFeatureHotkeys = MainFeatureDef["hotkeys"];
+
+/** @interface */
+export type DragAndDropFeatureConfig<T> = DragAndDropFeatureDef<T>["config"];
+/** @interface */
+export type DragAndDropFeatureState<T> = DragAndDropFeatureDef<T>["state"];
+/** @interface */
+export type DragAndDropFeatureTreeInstance<T> =
+  DragAndDropFeatureDef<T>["treeInstance"];
+/** @interface */
+export type DragAndDropFeatureItemInstance<T> =
+  DragAndDropFeatureDef<T>["itemInstance"];
+export type DragAndDropFeatureHotkeys<T> = DragAndDropFeatureDef<T>["hotkeys"];

package/src/types/core.ts

@@ -0,0 +1,183 @@
+import { DragAndDropFeatureDef } from "../features/drag-and-drop/types";
+import { MainFeatureDef } from "../features/main/types";
+import { SelectionFeatureDef } from "../features/selection/types";
+import { TreeFeatureDef } from "../features/tree/types";
+import {
+  HotkeyConfig,
+  HotkeysCoreFeatureDef,
+} from "../features/hotkeys-core/types";
+import { SyncDataLoaderFeatureDef } from "../features/sync-data-loader/types";
+import { AsyncDataLoaderFeatureDef } from "../features/async-data-loader/types";
+import { SearchFeatureDef } from "../features/search/types";
+import { RenamingFeatureDef } from "../features/renaming/types";
+import { ExpandAllFeatureDef } from "../features/expand-all/types";
+
+export type Updater<T> = T | ((old: T) => T);
+export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
+
+export type FeatureDef = {
+  state: object;
+  config: object;
+  treeInstance: object;
+  itemInstance: object;
+  hotkeys: string;
+};
+
+export type EmptyFeatureDef = {
+  state: {};
+  config: {};
+  treeInstance: {};
+  itemInstance: {};
+  hotkeys: never;
+};
+
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (
+  x: infer R
+) => any
+  ? R
+  : never;
+
+export type DefaultFeatures<T> = MainFeatureDef | TreeFeatureDef<T>;
+
+export type FeatureDefs<T> =
+  | MainFeatureDef
+  | TreeFeatureDef<T>
+  | SelectionFeatureDef<T>
+  | DragAndDropFeatureDef<T>
+  | HotkeysCoreFeatureDef<T>
+  | SyncDataLoaderFeatureDef<T>
+  | AsyncDataLoaderFeatureDef<T>
+  | SearchFeatureDef<T>
+  | RenamingFeatureDef<T>
+  | ExpandAllFeatureDef;
+
+type MergedFeatures<F extends FeatureDef> = {
+  state: UnionToIntersection<F["state"]>;
+  config: UnionToIntersection<F["config"]>;
+  treeInstance: UnionToIntersection<F["treeInstance"]>;
+  itemInstance: UnionToIntersection<F["itemInstance"]>;
+  hotkeys: F["hotkeys"];
+};
+
+type TreeStateType<T> = MainFeatureDef["state"] &
+  TreeFeatureDef<T>["state"] &
+  SelectionFeatureDef<T>["state"] &
+  DragAndDropFeatureDef<T>["state"] &
+  HotkeysCoreFeatureDef<T>["state"] &
+  SyncDataLoaderFeatureDef<T>["state"] &
+  AsyncDataLoaderFeatureDef<T>["state"] &
+  SearchFeatureDef<T>["state"] &
+  RenamingFeatureDef<T>["state"] &
+  ExpandAllFeatureDef["state"];
+export interface TreeState<T> extends TreeStateType<T> {}
+
+type TreeConfigType<T> = MainFeatureDef["config"] &
+  TreeFeatureDef<T>["config"] &
+  SelectionFeatureDef<T>["config"] &
+  DragAndDropFeatureDef<T>["config"] &
+  HotkeysCoreFeatureDef<T>["config"] &
+  SyncDataLoaderFeatureDef<T>["config"] &
+  AsyncDataLoaderFeatureDef<T>["config"] &
+  SearchFeatureDef<T>["config"] &
+  RenamingFeatureDef<T>["config"] &
+  ExpandAllFeatureDef["config"];
+export interface TreeConfig<T> extends TreeConfigType<T> {}
+
+type TreeInstanceType<T> = MainFeatureDef["treeInstance"] &
+  TreeFeatureDef<T>["treeInstance"] &
+  SelectionFeatureDef<T>["treeInstance"] &
+  DragAndDropFeatureDef<T>["treeInstance"] &
+  HotkeysCoreFeatureDef<T>["treeInstance"] &
+  SyncDataLoaderFeatureDef<T>["treeInstance"] &
+  AsyncDataLoaderFeatureDef<T>["treeInstance"] &
+  SearchFeatureDef<T>["treeInstance"] &
+  RenamingFeatureDef<T>["treeInstance"] &
+  ExpandAllFeatureDef["treeInstance"];
+export interface TreeInstance<T> extends TreeInstanceType<T> {}
+
+type ItemInstanceType<T> = MainFeatureDef["itemInstance"] &
+  TreeFeatureDef<T>["itemInstance"] &
+  SelectionFeatureDef<T>["itemInstance"] &
+  DragAndDropFeatureDef<T>["itemInstance"] &
+  HotkeysCoreFeatureDef<T>["itemInstance"] &
+  SyncDataLoaderFeatureDef<T>["itemInstance"] &
+  AsyncDataLoaderFeatureDef<T>["itemInstance"] &
+  SearchFeatureDef<T>["itemInstance"] &
+  RenamingFeatureDef<T>["itemInstance"] &
+  ExpandAllFeatureDef["itemInstance"];
+export interface ItemInstance<T> extends ItemInstanceType<T> {}
+
+export type HotkeyName<F extends FeatureDef = FeatureDefs<any>> =
+  MergedFeatures<F>["hotkeys"];
+
+export type HotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Record<
+  HotkeyName<F>,
+  HotkeyConfig<T>
+>;
+
+export type CustomHotkeysConfig<
+  T,
+  F extends FeatureDef = FeatureDefs<T>
+> = Partial<
+  Record<HotkeyName<F> | `custom${string}`, Partial<HotkeyConfig<T>>>
+>;
+
+export type FeatureImplementation<
+  T = any,
+  D extends FeatureDef = any,
+  F extends FeatureDef = EmptyFeatureDef
+> = {
+  key?: string;
+  deps?: string[];
+  overwrites?: string[];
+
+  stateHandlerNames?: Partial<
+    Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>
+  >;
+
+  getInitialState?: (
+    initialState: Partial<MergedFeatures<F>["state"]>,
+    tree: MergedFeatures<F>["treeInstance"]
+  ) => Partial<D["state"] & MergedFeatures<F>["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"];
+
+  onTreeMount?: (
+    instance: MergedFeatures<F>["treeInstance"],
+    treeElement: HTMLElement
+  ) => void;
+
+  onTreeUnmount?: (
+    instance: MergedFeatures<F>["treeInstance"],
+    treeElement: HTMLElement
+  ) => void;
+
+  onItemMount?: (
+    instance: MergedFeatures<F>["itemInstance"],
+    itemElement: HTMLElement,
+    tree: MergedFeatures<F>["treeInstance"]
+  ) => void;
+
+  onItemUnmount?: (
+    instance: MergedFeatures<F>["itemInstance"],
+    itemElement: HTMLElement,
+    tree: MergedFeatures<F>["treeInstance"]
+  ) => void;
+
+  hotkeys?: HotkeysConfig<T, D>;
+};

package/src/types/deep-merge.ts

@@ -0,0 +1,31 @@
+type TAllKeys<T> = T extends any ? keyof T : never;
+
+type TIndexValue<T, K extends PropertyKey, D = never> = T extends any
+  ? K extends keyof T
+    ? T[K]
+    : D
+  : never;
+
+type TPartialKeys<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>> extends infer O
+  ? { [P in keyof O]: O[P] }
+  : never;
+
+type TFunction = (...a: any[]) => any;
+
+type TPrimitives =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | Date
+  | TFunction;
+
+export type TMerged<T> = [T] extends [Array<any>]
+  ? { [K in keyof T]: TMerged<T[K]> }
+  : [T] extends [TPrimitives]
+  ? T
+  : [T] extends [object]
+  ? TPartialKeys<{ [K in TAllKeys<T>]: TMerged<TIndexValue<T, K>> }, never>
+  : T;

package/src/utilities/create-on-drop-handler.ts

@@ -0,0 +1,14 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+import { removeItemsFromParents } from "./remove-items-from-parents";
+import { insertItemsAtTarget } from "./insert-items-at-target";
+
+export const createOnDropHandler =
+  <T>(
+    onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void
+  ) =>
+  (items: ItemInstance<T>[], target: DropTarget<T>) => {
+    const itemIds = items.map((item) => item.getId());
+    removeItemsFromParents(items, onChangeChildren);
+    insertItemsAtTarget(itemIds, target, onChangeChildren);
+  };

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

@@ -0,0 +1,30 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+
+export const insertItemsAtTarget = <T>(
+  itemIds: string[],
+  target: DropTarget<T>,
+  onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void
+) => {
+  // add moved items to new common parent, if dropped onto parent
+  if (target.childIndex === null) {
+    onChangeChildren(target.item, [
+      ...target.item.getChildren().map((item) => item.getId()),
+      ...itemIds,
+    ]);
+    // TODO items[0].getTree().rebuildTree();
+    return;
+  }
+
+  // add moved items to new common parent, if dropped between siblings
+  const oldChildren = target.item.getChildren();
+  const newChildren = [
+    ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+    ...itemIds,
+    ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+  ];
+
+  onChangeChildren(target.item, newChildren);
+
+  target.item.getTree().rebuildTree();
+};

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

@@ -0,0 +1,21 @@
+import { ItemInstance } from "../types/core";
+
+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())
+      );
+    }
+  }
+
+  movedItems[0].getTree().rebuildTree();
+};

package/src/utils.ts

@@ -0,0 +1,68 @@
+import { TreeState, Updater } from "./types/core";
+
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+
+export const memo = <D extends readonly any[], R>(
+  fn: (...args: [...D]) => R,
+  deps: () => [...D]
+) => {
+  let value: R | undefined;
+  let oldDeps: D | null = null;
+
+  return () => {
+    const newDeps = deps();
+
+    if (!value) {
+      value = fn(...newDeps);
+      oldDeps = newDeps;
+      return value;
+    }
+
+    const match =
+      oldDeps &&
+      oldDeps.length === newDeps.length &&
+      !oldDeps.some((dep, i) => dep !== newDeps[i]);
+
+    if (match) {
+      return value;
+    }
+
+    value = fn(...newDeps);
+    oldDeps = newDeps;
+    return value;
+  };
+};
+
+export function functionalUpdate<T>(updater: Updater<T>, input: T): T {
+  return typeof updater === "function"
+    ? (updater as (input: T) => T)(input)
+    : updater;
+}
+export function makeStateUpdater<K extends keyof TreeState<any>>(
+  key: K,
+  instance: unknown
+) {
+  return (updater: Updater<TreeState<any>[K]>) => {
+    (instance as any).setState(<TTableState>(old: TTableState) => {
+      return {
+        ...old,
+        [key]: functionalUpdate(updater, (old as any)[key]),
+      };
+    });
+  };
+}
+
+export const poll = (fn: () => boolean, interval = 100, timeout = 1000) =>
+  new Promise<void>((resolve) => {
+    let clear: ReturnType<typeof setTimeout>;
+    const i = setInterval(() => {
+      if (fn()) {
+        resolve();
+        clearInterval(i);
+        clearTimeout(clear);
+      }
+    }, interval);
+    clear = setTimeout(() => {
+      clearInterval(i);
+    }, timeout);
+  });

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "outDir": "lib/esm"
+  }
+}

package/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../typedoc.base.json"],
+  "entryPoints": ["src/index.ts"]
+}