TSX support for the example code

[ken-okabe]

Thanks for the great component I've been lookin for.

Sortable list (vertical) in
https://solid-dnd.com/#examples
https://gist.github.com/stken2050/84de233a3f759c679dc0a6cbcfff6c50
as Sortable.jsx wokrs fine, but basically my projects are based on TS, TSX, so tried as Sortable.tsx, then unsurprisingly had errors.

(property) use:sortable: true
Type '{ children: any; "use:sortable": true; class: string; classList: { "opacity-25": boolean; "transition-transform": boolean; }; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'use:sortable' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

Type 'Element' is not assignable to type '(Element | ((activeDraggable: Draggable) => Element)) & Element'.
  Type 'number' is not assignable to type '(Element | ((activeDraggable: Draggable) => Element)) & Element'.ts(2322)
drag-overlay.d.ts(4, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & DragOverlayProps & { children?: Element; }'

What is the proper way to avoid this error?

TSX support would be very nice. Thanks!

[martinpengellyphillips]

1. You need to declare the custom Directives you are using. E.g you can add a types.d.tsx with the following:

import "solid-js";

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      draggable: boolean;
      droppable: boolean;
      sortable: boolean;
    }
  }
}

2. This was a bug in the typings and should now be fixed in 0.7.2

[thdxr]

I'm also seeing an issue where the transforms aren't applied with the code in the gist. Am I missing something?

[martinpengellyphillips]

@thdxr that gist is running correctly on the solid-dnd.com site so hard to say without more info from you. Please open a new issue though as I'm closing this one.