Cleanup

dev/App.tsx

@@ -6,6 +6,7 @@ import {
   horizontalLayout,
   move,
   sortableHandle,
+  splice,
   verticalLayout,
 } from "../src";
 
@@ -71,7 +72,7 @@ const App: Component = () => {
         each={data()}
         layout={getLayout(layouts[layoutIdx()]!, aligns[alignIdx()]!)}
         onMove={(_item, from, to) => {
-          setData((cur) => move([...cur], from, to));
+          setData((cur) => move(cur, from, to));
         }}
         autoscroll={document.documentElement}
       >
@@ -84,13 +85,7 @@ const App: Component = () => {
             <div use:sortableHandle class={styles.handle} />
             <button
               class={styles.button}
-              onClick={() =>
-                setData((cur) => {
-                  const tmp = [...cur];
-                  tmp.splice(idx(), 1);
-                  return tmp;
-                })
-              }
+              onClick={() => setData((cur) => splice(cur, idx(), 1))}
             >
               Remove
             </button>

src/assorted.ts

@@ -51,18 +51,30 @@ export function difference<T>(set1: Set<T>, set2: Set<T>): Set<T> {
 }
 
 export function move<T>(
-  arr: Array<T>,
+  arr: ReadonlyArray<T>,
   fromIdx: number,
   toIdx: number,
-): Array<T> {
+): ReadonlyArray<T> {
   const elem = arr[fromIdx];
   if (elem == null) {
     console.error("index out of bounds");
     return arr;
   }
-  arr.splice(fromIdx, 1);
-  arr.splice(toIdx, 0, elem);
-  return arr;
+  const ret = [...arr];
+  ret.splice(fromIdx, 1);
+  ret.splice(toIdx, 0, elem);
+  return ret;
+}
+
+export function splice<T>(
+  arr: ReadonlyArray<T>,
+  index: number,
+  count: number,
+  ...items: T[]
+) {
+  const tmp = [...arr];
+  tmp.splice(index, count, ...items);
+  return tmp;
 }
 
 export function zip<A, B>(

src/index.tsx

@@ -1,7 +1,7 @@
 import { Accessor, Component, createComputed, createSignal } from "solid-js";
 export * from "./Sortable";
 export * from "./layout";
-export { move } from "./assorted";
+export { move, splice } from "./assorted";
 
 export function createHello(): [Accessor<string>, (to: string) => void] {
   const [hello, setHello] = createSignal("Hello World!");