@headless-tree/core 0.0.9 → 0.0.11

package/lib/cjs/test-utils/test-tree.js

@@ -0,0 +1,195 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestTree = void 0;
+/* eslint-disable import/no-extraneous-dependencies */
+const vitest_1 = require("vitest");
+const create_tree_1 = require("../core/create-tree");
+const test_tree_do_1 = require("./test-tree-do");
+const test_tree_expect_1 = require("./test-tree-expect");
+const feature_1 = require("../features/sync-data-loader/feature");
+const feature_2 = require("../features/async-data-loader/feature");
+const build_proxified_instance_1 = require("../core/build-proxified-instance");
+vitest_1.vi.useFakeTimers({ shouldAdvanceTime: true });
+class TestTree {
+    forSuits(runSuite) {
+        vitest_1.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 = (0, create_tree_1.createTree)(this.config);
+        }
+        return this.treeInstance;
+    }
+    constructor(config) {
+        this.config = config;
+        this.do = new test_tree_do_1.TestTreeDo(this);
+        this.expect = new test_tree_expect_1.TestTreeExpect(this);
+        this.treeInstance = null;
+        this.suits = {
+            sync: () => ({
+                tree: this.withFeatures(feature_1.syncDataLoaderFeature),
+                title: "Synchronous Data Loader",
+            }),
+            async: () => ({
+                tree: this.withFeatures(feature_2.asyncDataLoaderFeature),
+                title: "Asynchronous Data Loader",
+            }),
+            proxifiedSync: () => ({
+                tree: this.withFeatures(feature_1.syncDataLoaderFeature).with({
+                    instanceBuilder: build_proxified_instance_1.buildProxiedInstance,
+                }),
+                title: "Proxified Synchronous Data Loader",
+            }),
+            proxifiedAsync: () => ({
+                tree: this.withFeatures(feature_2.asyncDataLoaderFeature).with({
+                    instanceBuilder: build_proxified_instance_1.buildProxiedInstance,
+                }),
+                title: "Proxified Asynchronous Data Loader",
+            }),
+        };
+    }
+    static resolveAsyncLoaders() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            while (TestTree.asyncLoaderResolvers.length) {
+                (_a = TestTree.asyncLoaderResolvers.shift()) === null || _a === void 0 ? void 0 : _a();
+                yield new Promise((r) => {
+                    setTimeout(r);
+                });
+            }
+        });
+    }
+    resolveAsyncVisibleItems() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.instance.getItems();
+            yield TestTree.resolveAsyncLoaders();
+            this.instance.getItems().forEach((i) => i.getItemName());
+            yield TestTree.resolveAsyncLoaders();
+        });
+    }
+    static default(config) {
+        return new TestTree(Object.assign({ rootItemId: "x", createLoadingItemData: () => "loading", dataLoader: {
+                getItem: (id) => id,
+                getChildren: (id) => [`${id}1`, `${id}2`, `${id}3`, `${id}4`],
+            }, asyncDataLoader: {
+                getItem: (id) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise((r) => {
+                        r.debugName = `Loading getItem ${id}`;
+                        TestTree.asyncLoaderResolvers.push(r);
+                    });
+                    return id;
+                }),
+                getChildren: (id) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise((r) => {
+                        r.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) {
+        return new TestTree(Object.assign(Object.assign({}, this.config), config));
+    }
+    resetBeforeEach() {
+        (0, vitest_1.beforeEach)(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.createTestCaseTree();
+        }));
+    }
+    createTestCaseTree() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.reset();
+            vitest_1.vi.clearAllMocks();
+            // trigger instance creation
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            this.instance;
+            yield this.resolveAsyncVisibleItems();
+            return this;
+        });
+    }
+    withFeatures(...features) {
+        var _a;
+        return this.with({
+            features: [...((_a = this.config.features) !== null && _a !== void 0 ? _a : []), ...features],
+        });
+    }
+    mockedHandler(handlerName) {
+        var _a;
+        const mock = vitest_1.vi.fn();
+        if (this.treeInstance) {
+            (_a = this.treeInstance) === null || _a === void 0 ? void 0 : _a.setConfig((prev) => (Object.assign(Object.assign({}, prev), { [handlerName]: mock })));
+        }
+        else {
+            this.config[handlerName] = mock;
+        }
+        return mock;
+    }
+    item(itemId) {
+        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, bb = {
+        left: 0,
+        right: 100,
+        top: 0,
+        height: 20,
+    }) {
+        this.instance.getItemInstance(itemId).registerElement({
+            getBoundingClientRect: () => bb,
+        });
+    }
+    static dragEvent(pageX = 1000, pageY = 0) {
+        return {
+            preventDefault: vitest_1.vi.fn(),
+            stopPropagation: vitest_1.vi.fn(),
+            dataTransfer: {
+                setData: vitest_1.vi.fn(),
+                getData: vitest_1.vi.fn(),
+                dropEffect: "unchaged-from-test",
+            },
+            pageX,
+            pageY,
+        };
+    }
+    createTopDragEvent(indent = 0) {
+        return TestTree.dragEvent(indent * 20, 1);
+    }
+    createBottomDragEvent(indent = 0) {
+        return TestTree.dragEvent(indent * 20, 19);
+    }
+}
+exports.TestTree = TestTree;
+TestTree.asyncLoaderResolvers = [];

package/lib/cjs/types/core.d.ts

@@ -10,11 +10,12 @@ 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;
+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;
 };
 export type EmptyFeatureDef = {
@@ -49,19 +50,34 @@ 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> = {
+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, SelfFeatureDef extends FeatureDef = any, DepFeaturesDef extends FeatureDef = any> = {
     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>;
+    stateHandlerNames?: Partial<Record<keyof MergedFeatures<DepFeaturesDef>["state"], keyof MergedFeatures<DepFeaturesDef>["config"]>>;
+    getInitialState?: (initialState: Partial<MergedFeatures<DepFeaturesDef>["state"]>, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => Partial<SelfFeatureDef["state"] & MergedFeatures<DepFeaturesDef>["state"]>;
+    getDefaultConfig?: (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<DepFeaturesDef>["treeInstance"], treeElement: HTMLElement) => void;
+    onTreeUnmount?: (instance: MergedFeatures<DepFeaturesDef>["treeInstance"], treeElement: HTMLElement) => void;
+    onItemMount?: (instance: MergedFeatures<DepFeaturesDef>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => void;
+    onItemUnmount?: (instance: MergedFeatures<DepFeaturesDef>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => void;
+    hotkeys?: HotkeysConfig<T, SelfFeatureDef>;
 };
 export {};

package/lib/cjs/utilities/errors.d.ts

@@ -0,0 +1 @@
+export declare const throwError: (message: string) => Error;

package/lib/cjs/utilities/errors.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throwError = void 0;
+const throwError = (message) => Error(`Headless Tree: ${message}`);
+exports.throwError = throwError;

package/lib/cjs/utilities/insert-items-at-target.js

@@ -4,11 +4,15 @@ exports.insertItemsAtTarget = void 0;
 const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
     // 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;
     }
     // add moved items to new common parent, if dropped between siblings
@@ -19,6 +23,9 @@ const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
         ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
     ];
     onChangeChildren(target.item, newChildren);
+    if (target.item && "updateCachedChildrenIds" in target.item) {
+        target.item.updateCachedChildrenIds(newChildren);
+    }
     target.item.getTree().rebuildTree();
 };
 exports.insertItemsAtTarget = insertItemsAtTarget;

package/lib/cjs/utilities/remove-items-from-parents.js

@@ -2,14 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeItemsFromParents = void 0;
 const removeItemsFromParents = (movedItems, onChangeChildren) => {
-    var _a;
-    // TODO bulk sibling changes together
-    for (const item of movedItems) {
-        const siblings = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.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 === null || parent === void 0 ? void 0 : 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 === null || parent === void 0 ? void 0 : parent.updateCachedChildrenIds(newChildren);
+            }
         }
     }
     movedItems[0].getTree().rebuildTree();

package/lib/cjs/utils.d.ts

@@ -1,6 +1,6 @@
-import { TreeState, Updater } from "./types/core";
+import { SetStateFn, TreeState, Updater } from "./types/core";
 export type NoInfer<T> = [T][T extends any ? 0 : never];
-export declare const memo: <D extends readonly any[], R>(fn: (...args_0: D) => R, deps: () => [...D]) => () => R;
+export declare const memo: <D extends readonly any[], P extends readonly any[], R>(deps: (...args: [...P]) => [...D], fn: (...args: [...D]) => R) => (...a: P) => R;
 export declare function functionalUpdate<T>(updater: Updater<T>, input: T): T;
-export declare function makeStateUpdater<K extends keyof TreeState<any>>(key: K, instance: unknown): (updater: Updater<TreeState<any>[K]>) => void;
+export declare function makeStateUpdater<K extends keyof TreeState<any>>(key: K, instance: unknown): SetStateFn<TreeState<any>[K]>;
 export declare const poll: (fn: () => boolean, interval?: number, timeout?: number) => Promise<void>;

package/lib/cjs/utils.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.poll = exports.makeStateUpdater = exports.functionalUpdate = exports.memo = void 0;
-const memo = (fn, deps) => {
+exports.poll = exports.memo = void 0;
+exports.functionalUpdate = functionalUpdate;
+exports.makeStateUpdater = makeStateUpdater;
+const memo = (deps, fn) => {
     let value;
     let oldDeps = null;
-    return () => {
-        const newDeps = deps();
+    return (...a) => {
+        const newDeps = deps(...a);
         if (!value) {
             value = fn(...newDeps);
             oldDeps = newDeps;
@@ -28,7 +30,6 @@ function functionalUpdate(updater, input) {
         ? updater(input)
         : updater;
 }
-exports.functionalUpdate = functionalUpdate;
 function makeStateUpdater(key, instance) {
     return (updater) => {
         instance.setState((old) => {
@@ -36,7 +37,6 @@ function makeStateUpdater(key, instance) {
         });
     };
 }
-exports.makeStateUpdater = makeStateUpdater;
 const poll = (fn, interval = 100, timeout = 1000) => new Promise((resolve) => {
     let clear;
     const i = setInterval(() => {

package/lib/esm/core/build-proxified-instance.d.ts

@@ -0,0 +1,2 @@
+import { InstanceBuilder } from "../features/main/types";
+export declare const buildProxiedInstance: InstanceBuilder;

package/lib/esm/core/build-proxified-instance.js

@@ -0,0 +1,54 @@
+import { throwError } from "../utilities/errors";
+const noop = () => { };
+const findPrevInstanceMethod = (features, instanceType, methodKey, featureSearchIndex) => {
+    var _a;
+    for (let i = featureSearchIndex; i >= 0; i--) {
+        const feature = features[i];
+        const itemInstanceMethod = (_a = feature[instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
+        if (itemInstanceMethod) {
+            return i;
+        }
+    }
+    return null;
+};
+const invokeInstanceMethod = (features, instanceType, opts, methodKey, featureIndex, args) => {
+    var _a;
+    const prevIndex = findPrevInstanceMethod(features, instanceType, methodKey, featureIndex - 1);
+    const itemInstanceMethod = (_a = features[featureIndex][instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
+    return itemInstanceMethod(Object.assign(Object.assign({}, opts), { prev: prevIndex !== null
+            ? (...newArgs) => invokeInstanceMethod(features, instanceType, opts, methodKey, prevIndex, newArgs)
+            : null }), ...args);
+};
+export const buildProxiedInstance = (features, instanceType, buildOpts) => {
+    // demo with prototypes: https://jsfiddle.net/bgenc58r/
+    const opts = {};
+    const item = new Proxy({}, {
+        has(target, key) {
+            if (typeof key === "symbol") {
+                return false;
+            }
+            if (key === "toJSON") {
+                return false;
+            }
+            const hasInstanceMethod = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
+            return Boolean(hasInstanceMethod);
+        },
+        get(target, key) {
+            if (typeof key === "symbol") {
+                return undefined;
+            }
+            if (key === "toJSON") {
+                return {};
+            }
+            return (...args) => {
+                const featureIndex = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
+                if (featureIndex === null) {
+                    throw throwError(`feature missing for method ${key}`);
+                }
+                return invokeInstanceMethod(features, instanceType, opts, key, featureIndex, args);
+            };
+        },
+    });
+    Object.assign(opts, buildOpts(item));
+    return [item, noop];
+};

package/lib/esm/core/build-static-instance.d.ts

@@ -0,0 +1,2 @@
+import { InstanceBuilder } from "../features/main/types";
+export declare const buildStaticInstance: InstanceBuilder;

package/lib/esm/core/build-static-instance.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-continue,no-labels,no-extra-label */
+export const buildStaticInstance = (features, instanceType, buildOpts) => {
+    const instance = {};
+    const finalize = () => {
+        const opts = buildOpts(instance);
+        featureLoop: for (let i = 0; i < features.length; i++) {
+            // Loop goes in forward order, because later features overwrite previous ones
+            // TODO loop order correct? I think so...
+            const definition = features[i][instanceType];
+            if (!definition)
+                continue featureLoop;
+            methodLoop: for (const [key, method] of Object.entries(definition)) {
+                if (!method)
+                    continue methodLoop;
+                const prev = instance[key];
+                instance[key] = (...args) => {
+                    return method(Object.assign(Object.assign({}, opts), { prev }), ...args);
+                };
+            }
+        }
+    };
+    return [instance, finalize];
+};

package/lib/esm/core/create-tree.js

@@ -1,22 +1,13 @@
 import { treeFeature } from "../features/tree/feature";
-const buildItemInstance = (features, tree, itemId) => {
-    var _a, _b;
-    const itemInstance = {};
-    for (const feature of features) {
-        Object.assign(
-        // TODO dont run createItemInstance, but assign prototype objects instead?
-        // https://jsfiddle.net/bgenc58r/
-        itemInstance, (_b = (_a = feature.createItemInstance) === null || _a === void 0 ? void 0 : _a.call(feature, Object.assign({}, itemInstance), itemInstance, tree, itemId)) !== null && _b !== void 0 ? _b : {});
-    }
-    return itemInstance;
-};
+import { buildStaticInstance } from "./build-static-instance";
+import { throwError } from "../utilities/errors";
 const verifyFeatures = (features) => {
     var _a;
     const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
     for (const feature of features !== null && features !== void 0 ? features : []) {
         const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
         if (missingDependency) {
-            throw new Error(`${feature.key} needs ${missingDependency}`);
+            throw throwError(`${feature.key} needs ${missingDependency}`);
         }
     }
 };
@@ -29,14 +20,16 @@ const compareFeatures = (feature1, feature2) => {
 };
 const sortFeatures = (features = []) => features.sort(compareFeatures);
 export const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e;
-    const treeInstance = {};
+    var _a, _b, _c, _d;
+    const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : buildStaticInstance;
     const additionalFeatures = [
         treeFeature,
         ...sortFeatures(initialConfig.features),
     ];
     verifyFeatures(additionalFeatures);
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = (_a = initialConfig.initialState) !== null && _a !== void 0 ? _a : initialConfig.state) !== null && _b !== void 0 ? _b : {});
+    const features = [...additionalFeatures];
+    const [treeInstance, finalizeTree] = buildInstance(features, "treeInstance", (tree) => ({ tree }));
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
@@ -47,11 +40,12 @@ export const createTree = (initialConfig) => {
     const itemDataRefs = {};
     let itemMetaMap = {};
     const hotkeyPresets = {};
-    const rebuildItemMeta = (main) => {
+    const rebuildItemMeta = () => {
         // TODO can we find a way to only run this for the changed substructure?
         itemInstances = [];
         itemMetaMap = {};
-        const rootInstance = buildItemInstance([main, ...additionalFeatures], treeInstance, config.rootItemId);
+        const [rootInstance, finalizeRootInstance] = buildInstance(features, "itemInstance", (item) => ({ item, tree: treeInstance, itemId: config.rootItemId }));
+        finalizeRootInstance();
         itemInstancesMap[config.rootItemId] = rootInstance;
         itemMetaMap[config.rootItemId] = {
             itemId: config.rootItemId,
@@ -64,7 +58,12 @@ export const createTree = (initialConfig) => {
         for (const item of treeInstance.getItemsMeta()) {
             itemMetaMap[item.itemId] = item;
             if (!itemInstancesMap[item.itemId]) {
-                const instance = buildItemInstance([main, ...additionalFeatures], treeInstance, item.itemId);
+                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
+                    item: instance,
+                    tree: treeInstance,
+                    itemId: item.itemId,
+                }));
+                finalizeInstance();
                 itemInstancesMap[item.itemId] = instance;
                 itemInstances.push(instance);
             }
@@ -80,25 +79,36 @@ export const createTree = (initialConfig) => {
     };
     const mainFeature = {
         key: "main",
-        createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
+        treeInstance: {
+            getState: () => state,
+            setState: ({}, updater) => {
                 var _a;
                 // Not necessary, since I think the subupdate below keeps the state fresh anyways?
                 // state = typeof updater === "function" ? updater(state) : updater;
-                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            }, applySubStateUpdate: (stateName, updater) => {
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state); // TODO this cant be right... This doesnt allow external state updates
+            },
+            applySubStateUpdate: ({}, stateName, updater) => {
                 state[stateName] =
                     typeof updater === "function" ? updater(state[stateName]) : updater;
-                config[stateHandlerNames[stateName]](state[stateName]);
-            }, rebuildTree: () => {
+                const externalStateSetter = config[stateHandlerNames[stateName]];
+                externalStateSetter === null || externalStateSetter === void 0 ? void 0 : externalStateSetter(state[stateName]);
+            },
+            // TODO rebuildSubTree: (itemId: string) => void;
+            rebuildTree: () => {
                 var _a;
-                rebuildItemMeta(mainFeature);
+                rebuildItemMeta();
                 (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            }, getConfig: () => config, setConfig: (updater) => {
+            },
+            getConfig: () => config,
+            setConfig: (_, updater) => {
                 config = typeof updater === "function" ? updater(config) : updater;
                 if (config.state) {
                     state = Object.assign(Object.assign({}, state), config.state);
                 }
-            }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
+            },
+            getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+            getItems: () => itemInstances,
+            registerElement: ({}, element) => {
                 if (treeElement === element) {
                     return;
                 }
@@ -109,28 +119,37 @@ export const createTree = (initialConfig) => {
                     eachFeature((feature) => { var _a; return (_a = feature.onTreeMount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, element); });
                 }
                 treeElement = element;
-            }, getElement: () => treeElement, getDataRef: () => treeDataRef, getHotkeyPresets: () => hotkeyPresets })),
-        createItemInstance: (prev, instance, _, itemId) => (Object.assign(Object.assign({}, prev), { registerElement: (element) => {
+            },
+            getElement: () => treeElement,
+            getDataRef: () => treeDataRef,
+            getHotkeyPresets: () => hotkeyPresets,
+        },
+        itemInstance: {
+            // TODO just change to a getRef method that memoizes, maybe as part of getProps
+            registerElement: ({ itemId, item }, element) => {
                 if (itemElementsMap[itemId] === element) {
                     return;
                 }
                 const oldElement = itemElementsMap[itemId];
                 if (oldElement && !element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, oldElement, treeInstance); });
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, item, oldElement, treeInstance); });
                 }
                 else if (!oldElement && element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, element, treeInstance); });
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, item, element, treeInstance); });
                 }
                 itemElementsMap[itemId] = element;
-            }, getElement: () => itemElementsMap[itemId], 
+            },
+            getElement: ({ itemId }) => itemElementsMap[itemId],
             // eslint-disable-next-line no-return-assign
-            getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
+            getDataRef: ({ itemId }) => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); },
+            getItemMeta: ({ itemId }) => itemMetaMap[itemId],
+        },
     };
-    const features = [mainFeature, ...additionalFeatures];
+    features.unshift(mainFeature);
     for (const feature of features) {
-        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
-        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
+        Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
-    rebuildItemMeta(mainFeature);
+    finalizeTree();
+    rebuildItemMeta();
     return treeInstance;
 };