Improve connectors

Currently the usage is this

const { connectors: { connect, drag } } = useNode();

// and then
   return <div ref={connect}>

// which is basically this
   return <div ref={ref => connect(ref)}>

// or with drag
   return <div ref={ref => connect(drag(ref))}>

Could we instead use this pattern, so that in future, when there are more methods, we can combine them simpler?

   return <div ref={ref => connect(ref, drag, drop)}>
  
// instead of
   return <div ref={ref => connect(drag(drop(ref)))}/>

or even let connect() return curried itself if it doesn’t detect a ref for these cases

   return <div ref={connect}> // this is OK already
   return <div ref={ref => connect(ref)}> // this is OK already

   return <div ref={connect()}>
   return <div ref={ref => connect()(ref)}>
   return <div ref={connect(drag)}>
   return <div ref={connect(drag, drop)}>
   return <div ref={ref => connect(drag, drop)(ref)}>

[prevwong]

I will reply your question regarding why we don’t have a drop connector from the earlier issue here as it seems more fitting.

There is no drop connector because of the core concepts in Craft.js (Nodes and Canvas Nodes). The <Canvas /> component, creates a Canvas Node (droppable region) and enables each of its immediate child Node to be draggable. The <Canvas /> component then renders each Node by its element type.

If we expose a drop connector, then it must somehow also control what the connected DOM would render, which is not ideal since we want React to handle rendering.

p.s. Consider joining our Discord server 👋🏽

[ackvf]

The thing is that all the suggested patterns would be supported.

ref={connect} // or ref={drag}
ref={ref => connect(ref)

ref={connect(drag)}
ref={ref => connect(drag)(ref)}

ref={dom => {  
  // this won't be necessary 
  connect()(dom);
  drag()(dom);

  // as this will work
  connect(dom);
  drag(dom);
}}

A possible implementation is that all connectors would be abstracted away behind a common “invoker”, which would be allowed to accept other connectors or ref and would return another invoker until it receives a ref. Playground Link

interface Connector {
    (ref: HTMLElement): HTMLElement
    (...connectors: Connector[]): Connector
    (ref: HTMLElement, ...connectors: Connector[]): HTMLElement // this is also allowed by design of the recursive invoker
}

// this is the internal implementation
declare const invokeDrag: (ref: HTMLElement) => void;
declare const invokeConnect: (ref: HTMLElement) => void;

const invoker:Connector = (...args: any[]): any => {
    let ref = args[0]
    if (ref instanceof HTMLElement) {
        const connectors = args.slice(1)
        if (connectors.length) {
            // call each connector with the ref instance
            connectors.forEach(c => c(ref))
        }        
        return ref
    } else if (ref instanceof Function) { // we can even specify arg === drag || arg === connect
        return (args2: any) => invoker(...args2, ...args)
    }
}


// only this is exported to user

export const connect = invoker(invokeConnect as Connector)
export const drag = invoker(invokeDrag as Connector)


// examples

declare let ref: HTMLElement

const r1 = connect(ref) // HTMLElement
const r2 = connect(drag) // Connector

const r3 = drag(connect(ref)) // HTMLElement
const r4 = drag(connect)(ref) // HTMLElement