Repository navigation
sidebar items rely on attribute gridstacknode, it should be data-gridstacknode instead for react+TS compatiblity #2900
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 ?
Activity
BrannJoly commentedon Dec 11, 2024
I fixed the issue in my codebase by doing this, but this should be handled in gridstack IMHO!
adumesny commentedon Dec 28, 2024
@BrannJoly thank you for the find. are you saying using
gives no error ? honestly I don't tend to use DOM for attr (all done in json instead) so this didn't cross my mind. easy enough switch...
Also assume you meant
adumesny commentedon Dec 28, 2024
and wouldn't that be the same issues with attr
gs-we've been using for years (before TS was used) ? yeah I could fix to usedata-gridstack-nodebut I assuming you also need the type definition above as well or is that not needed ?if so I probably should just have
gs-nodeactually to match the rest...use attr `data-gs-widget`
BrannJoly commentedon Dec 28, 2024
the type definiton above is a ugly hack (I'm modifying the react lib !) needed to use custom attributes not prefixed by data-
Attributes starting by data- are considered valid, you could add data-foo='bar' to any div and react/ts wouldn't complain about anything
adumesny commentedon Dec 28, 2024
Right, but I don't really want to change all existing attr to
data-gs-xyzforgs-x, gs-y, gs-w, etc... html and even angular template are not typed, so this is likely React specific since your templates are in your .tsx files.So the Q is, can gridstack export some types that would spell out those attr (which is great of TS) instead of you doing it since I know all valid attr, and not use
data-since I don't want to break all existing code and would rather spell custom attr instead of blinddata-*which would not be checked for typing errors anyway.BrannJoly commentedon Dec 28, 2024
That's a good point. I think exporting the types would work.
I'm not sure it's a good practice to mess with other libs type (eg react), but this would probably solve the issue...
And in the meantime, adding this somewhere in the documentation would probably help :)
Tahnk you for your work on this very useful library!
adumesny commentedon Dec 28, 2024
| I think exporting the types would work.
what woulkd this look like on the GS side ? any chance you you also post a React example that uses
gs-*attr (like the one above) so I could have something to test against ? the TS React example uses JSON (better way)attr `data-gs-widget` doc
attr `data-gs-widget` doc
attr `data-gs-widget` doc