use hooks to organize features

[Coooooooola]

trafficstars

I love your great project! I have a suggestion for the API design. it can organize features like that:

const dnd = useDnd({
    onDrag() {},
    onDrop() {},
})

const hotkey = useHotkey({})

const rename = useRename({
    onRename() {}
})

const tree = useTree({
    initState: {},
    features: {
        dnd,
        hotkey,
        rename,
    }
})

console.log(dnd.dragging)
const trigger = () => hotkey.trigger('w', {})

<TreeUI tree={tree} itemRender={TreeItemUI} />

[lukasbach]

Hi, thank you for your proposal!

Regarding the idea to seperate feature-related configuration into feature-scoped variables themselves, I do like how the API for that looks like, but there are parts of the core architecture that kinda bump with that idea. Not all features are completely independent of each other, and in fact there are quite a few features that interact with each other or overwrite/extend each other. For example, the hotkeys feature implements the key event listeners, but the actual hotkeys, such as F2/start-renaming, are implemented by the other features, in this case the renaming feature. Also, while HT exposes the core API as React Hook, the majority of it is written framework-agnostic, and I want to keep it that way and implement ports to other UI Frameworks in the future, so I want to keep friction with framework-specific things low.

Regarding the idea of having a <TreeUI tree={tree} /> component that does the rendering - the idea of HT being headless also means that the user would provide all the rendering logic, but I did actually think about providing such a tree ui component with a "prebuilt" Tree UI, not really to act as primarily intended integration use case, but as easy starting-point for people that just want to experiment with HT or just want to quickly add a tree to a personal project where they don't really care too much how it looks like.