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;
  }
}

[adumesny]

@BrannJoly thank you for the find. are you saying using

<div className="sidebar-item" data-gridstack-node='{"w":2, "h":2, "content":"..."}'>

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

const content = el.getAttribute('gridstacknode')?.content || 'Dropped Item';

[adumesny]

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 use data-gridstack-node but I assuming you also need the type definition above as well or is that not needed ?
if so I probably should just have gs-node actually to match the rest...

[BrannJoly]

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 use data-gridstack-node but I assuming you also need the type definition above as well or is that not needed ? if so I probably should just have gs-node actually to match the rest...

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]

Right, but I don't really want to change all existing attr to data-gs-xyz for gs-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 blind data-* which would not be checked for typing errors anyway.

[BrannJoly]

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]

| 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)