Memoise a bunch of stuff

src/create-draggable.ts

@@ -1,6 +1,7 @@
 import {
   createEffect,
   createSignal,
+  createMemo,
   onCleanup,
   onMount,
   Setter,
@@ -42,10 +43,10 @@ const createDraggable = (id: Id, data: Record<string, any> = {}): Draggable => {
   });
   onCleanup(() => removeDraggable(id));
 
-  const isActiveDraggable = () => state.active.draggableId === id;
-  const transform = () => {
+  const isActiveDraggable = createMemo(() => state.active.draggableId === id);
+  const transform = createMemo(() => {
     return state.draggables[id]?.transform || noopTransform();
-  };
+  });
 
   const draggable = Object.defineProperties(
     (element: HTMLElement, accessor?: () => { skipTransform?: boolean }) => {
@@ -96,9 +97,7 @@ const createDraggable = (id: Id, data: Record<string, any> = {}): Draggable => {
       },
       dragActivators: {
         enumerable: true,
-        get: () => {
-          return draggableActivators(id, true);
-        },
+        get: createMemo(() => draggableActivators(id, true)),
       },
       transform: {
         enumerable: true,

src/create-droppable.ts

@@ -1,5 +1,6 @@
 import {
   createEffect,
+  createMemo,
   createSignal,
   onCleanup,
   onMount,
@@ -40,10 +41,10 @@ const createDroppable = (id: Id, data: Record<string, any> = {}): Droppable => {
   });
   onCleanup(() => removeDroppable(id));
 
-  const isActiveDroppable = () => state.active.droppableId === id;
-  const transform = () => {
+  const isActiveDroppable = createMemo(() => state.active.droppableId === id);
+  const transform = createMemo(() => {
     return state.droppables[id]?.transform || noopTransform();
-  };
+  });
   const droppable = Object.defineProperties(
     (element: HTMLElement, accessor?: () => { skipTransform?: boolean }) => {
       const config = accessor ? accessor() : {};

src/create-pointer-sensor.ts

@@ -1,4 +1,4 @@
-import { onCleanup, onMount } from "solid-js";
+import { createMemo, onCleanup, onMount } from "solid-js";
 
 import {
   Coordinates,
@@ -32,7 +32,7 @@ const createPointerSensor = (id: Id = "pointer-sensor"): void => {
     removeSensor(id);
   });
 
-  const isActiveSensor = () => state.active.sensorId === id;
+  const isActiveSensor = createMemo(() => state.active.sensorId === id);
 
   const initialCoordinates: Coordinates = { x: 0, y: 0 };
 

src/create-sortable.ts

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup, onMount } from "solid-js";
+import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
 
 import { createDraggable } from "./create-draggable";
 import { createDroppable } from "./create-droppable";
@@ -30,12 +30,16 @@ const createSortable = (id: Id, data: Record<string, any> = {}): Sortable => {
   const droppable = createDroppable(id, data);
   const setNode = combineRefs(draggable.ref, droppable.ref);
 
-  const initialIndex = (): number => sortableState.initialIds.indexOf(id);
-  const currentIndex = (): number => sortableState.sortedIds.indexOf(id);
+  const initialIndex = createMemo((): number =>
+    sortableState.initialIds.indexOf(id)
+  );
+  const currentIndex = createMemo((): number =>
+    sortableState.sortedIds.indexOf(id)
+  );
   const layoutById = (id: Id): Layout | null =>
     dndState.droppables[id]?.layout || null;
 
-  const sortedTransform = (): Transform => {
+  const sortedTransform = createMemo((): Transform => {
     const delta = noopTransform();
     const resolvedInitialIndex = initialIndex();
     const resolvedCurrentIndex = currentIndex();
@@ -53,7 +57,7 @@ const createSortable = (id: Id, data: Record<string, any> = {}): Sortable => {
     }
 
     return delta;
-  };
+  });
 
   const transformer: Transformer = {
     id: "sortableOffset",
@@ -67,13 +71,13 @@ const createSortable = (id: Id, data: Record<string, any> = {}): Sortable => {
   onMount(() => addTransformer("droppables", id, transformer));
   onCleanup(() => removeTransformer("droppables", id, transformer.id));
 
-  const transform = (): Transform => {
+  const transform = createMemo((): Transform => {
     return (
       (id === dndState.active.draggableId && !dndState.active.overlay
         ? dndState.draggables[id]?.transform
         : dndState.droppables[id]?.transform) || noopTransform()
     );
-  };
+  });
 
   const sortable = Object.defineProperties(
     (element: HTMLElement) => {

src/drag-overlay.tsx

@@ -1,5 +1,5 @@
 import { Portal } from "solid-js/web";
-import { Component, JSX, Show } from "solid-js";
+import { Component, JSX, Show, createMemo } from "solid-js";
 
 import { Draggable, useDragDropContext } from "./drag-drop-context";
 import { transformStyle } from "./style";
@@ -39,7 +39,7 @@ const DragOverlay: Component<DragOverlayProps> = (props) => {
 
   onDragEnd(() => queueMicrotask(clearOverlay));
 
-  const style = (): JSX.CSSProperties => {
+  const style = createMemo((): JSX.CSSProperties => {
     const overlay = state.active.overlay;
     const draggable = state.active.draggable;
     if (!overlay || !draggable) return {};
@@ -54,7 +54,7 @@ const DragOverlay: Component<DragOverlayProps> = (props) => {
       ...transformStyle(overlay.transform),
       ...props.style,
     };
-  };
+  });
 
   return (
     <Portal mount={document.body}>
@@ -70,4 +70,3 @@ const DragOverlay: Component<DragOverlayProps> = (props) => {
 };
 
 export { DragOverlay };
-