@headless-tree/core 0.0.1

package/src/types/core.ts

@@ -0,0 +1,182 @@
+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;
+  dependingFeatures?: string[];
+
+  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;
+
+  setState?: (instance: MergedFeatures<F>["treeInstance"]) => void;
+  onConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
+  onStateOrConfigChange?: (instance: 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/utils.ts

@@ -0,0 +1,136 @@
+import { ItemInstance, TreeState, Updater } from "./types/core";
+import { DropTarget } from "./features/drag-and-drop/types";
+
+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 scrollIntoView = (element: Element | undefined | null) => {
+  if (!element) {
+    return;
+  }
+
+  if ((element as any).scrollIntoViewIfNeeded) {
+    (element as any).scrollIntoViewIfNeeded();
+  } else {
+    const boundingBox = element.getBoundingClientRect();
+    const isElementInViewport =
+      boundingBox.top >= 0 &&
+      boundingBox.left >= 0 &&
+      boundingBox.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      boundingBox.right <=
+        (window.innerWidth || document.documentElement.clientWidth);
+    if (!isElementInViewport) {
+      element.scrollIntoView();
+    }
+  }
+};
+
+export const performItemsMove = <T>(
+  items: ItemInstance<T>[],
+  target: DropTarget<T>,
+  onChangeChildren: (
+    item: ItemInstance<T>,
+    newChildren: ItemInstance<T>[]
+  ) => void
+) => {
+  const numberOfDragItemsBeforeTarget = !target.childIndex
+    ? 0
+    : target.item
+        .getChildren()
+        .slice(0, target.childIndex)
+        .filter((child) => items.some((item) => item.getId() === child.getId()))
+        .length;
+
+  // TODO bulk sibling changes together
+  for (const item of items) {
+    const siblings = item.getParent()?.getChildren();
+    if (siblings) {
+      onChangeChildren(
+        item.getParent(),
+        siblings.filter((sibling) => sibling.getId() !== item.getId())
+      );
+    }
+  }
+
+  if (target.childIndex === null) {
+    onChangeChildren(target.item, [...target.item.getChildren(), ...items]);
+    items[0].getTree().rebuildTree();
+    return;
+  }
+
+  const oldChildren = target.item.getChildren();
+  const newChildren = [
+    ...oldChildren.slice(0, target.childIndex - numberOfDragItemsBeforeTarget),
+    ...items,
+    ...oldChildren.slice(target.childIndex - numberOfDragItemsBeforeTarget),
+  ];
+
+  onChangeChildren(target.item, newChildren);
+
+  items[0].getTree().rebuildTree();
+};
+
+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"
+  }
+}

package/typedoc.json

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