Description
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 ?