sidebar items rely on attribute gridstacknode, it should be data-gridstacknode instead for react+TS compatiblity

[BrannJoly]

in a React + Typescript environment, to use sidebar items, one would write this:

<div className={`sidebar`}>
 <div className="sidebar-item" gridstacknode='{"w":2, "h":2, "content":"..."}'> // ts error : property 'gridstacknode' does not exist on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>
         ...
  </div>
</div>

and then, following the docs example

  const myClone = (el: HTMLElement): HTMLElement => {
    const clone = el.cloneNode(true) as HTMLElement;
    const content = el.getAttribute('gridstacknode') || 'Dropped Item';
    clone.innerHTML = content;
    return clone;
  };

Unfortunatley, this code doesnt compile :

Type '{ children: string; className: string; gridstacknode: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.
Property 'gridstacknode' does not exist on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.ts(2322)

The normal fix would be to prefix the unknown attribute by data (ie data-gridstacknode), so I tried that in both the div and the myclone function, but it doesnt work. I dug around, and it turns out 'gridstacknode' is actually hardcoded in gridstack.ts

In order to retain backwards compatiblity, maybe it would make sense to first check 'gridstacknode' and then, if it is not found, to fall back on data-gridstacknode ?

[BrannJoly]

I fixed the issue in my codebase by doing this, but this should be handled in gridstack IMHO!

declare module 'react' {
  interface HTMLAttributes<T> {
    gridstacknode?: string;
  }
}