thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.
https://solid-dnd.com
MIT License
505 stars 35 forks source link

Memoise a bunch of stuff #107

Open N0tExisting opened 7 months ago

N0tExisting commented 7 months ago

This PR fixes overly eager execution of effects in components

[!WARNING] I have not yet finished tested this in my project

import { Show, type Component, createEffect } from 'solid-js';
import { createDraggable } from '@thisbeyond/solid-dnd';

export interface CardProps {
  title: string;
  details?: string;
}

const Card: Component<CardProps> = (p) => {
  const drag = createDraggable(p.title);
  // This effect will run even when a different draggable is dragged
  createEffect(() => console.log('Drag State Updated:', drag.isActiveDraggable, id));
  return (
    <article
      use:drag
      k-card={p.title}
      drag-id={id}
      class="rounded-2 border py-2 px-3 dark:(bg-slate-800 border-coolgray) light:(bg-sky-200 border-stone-900) min-h-20"
      classList={{ '-rot-4': drag.isActiveDraggable }}
    >
      <h3 class="text-xl font-bold pb-2">{p.title}</h3>
       <p>{p.details}</p>
    </article>
  );
};

export default Card

Updates:

File Change
colision.ts
combine-refs.ts
create-dragable.ts
create-dropable.ts
create-pointer-sensor.ts
create-sortable.ts
drag-drop-context.tsx
drag-drop-debugger.tsx
drag-drop-sensors.tsx
drag-overlay.tsx
index.tsx
layout.ts
move-array-item.ts
sortable-context.tsx
style.ts
danieltroger commented 4 months ago

Appreciate this, since even just taking the sortable list example and rendering 1000 items makes this library unbearably slow.

I built out on this and added a bunch more memoisation and some performance optimisation where I saw using the chrome performance devtools that time was spent, my work is here: https://github.com/danieltroger/faster-solid-dnd/commits/main/, mainly this commit: https://github.com/danieltroger/faster-solid-dnd/commit/020c07fa8759057ac3d869f492081a416c7c180e

Seems like this lib looks umaintained anyways so I won't bother anymore trying to upstream my changes (for now).It's still too slow, mostly due to the solid stores being slow - dragging around, multiple seconds are spent in there. With no low hanging fruits spotted I'll look for other solutions (was just exploring this lib)

martinpengellyphillips commented 3 months ago

Thanks for taking a look. I think virtualisation support would be the way forward to deal with larger numbers of items.