preparing to use immer

Author: forman

dashi/package-lock.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "immer": "^10.1.1",
     "plotly.js": "^2.35.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

dashi/package.json

@@ -0,0 +1,38 @@
+import { expect, test } from "vitest";
+import { get } from "./get.js";
+
+test("get from flat object", () => {
+  const obj = { a: 1, b: 2 };
+  expect(get(obj, "a")).toBe(1);
+  expect(get(obj, "b")).toBe(2);
+  expect(get(obj, "c")).toBeUndefined();
+});
+
+test("get from nested object", () => {
+  const obj = { a: { b: 2, c: "X" } };
+  expect(get(obj, "a.b")).toBe(2);
+  expect(get(obj, "a.c")).toBe("X");
+  expect(get(obj, "a.d")).toBeUndefined();
+});
+
+test("get from array", () => {
+  const arr = [1, 2];
+  expect(get(arr, "0")).toBe(1);
+  expect(get(arr, "1")).toBe(2);
+  expect(get(arr, "2")).toBeUndefined();
+});
+
+test("get from array of objects", () => {
+  const arr = [{ a: 1, b: 2 }, 2];
+  expect(get(arr, "0.a")).toBe(1);
+  expect(get(arr, "0.b")).toBe(2);
+  expect(get(arr, "0.c")).toBeUndefined();
+  expect(get(arr, "1")).toBe(2);
+  expect(get(arr, "2")).toBeUndefined();
+});
+
+test("get from object with array of objects with array", () => {
+  const arr = { a: [{ b: [{ x: 27 }] }, 38] };
+  expect(get(arr, "a.0.b.0.x")).toBe(27);
+  expect(get(arr, "a.1")).toBe(38);
+});

dashi/src/utils/get.test.ts

@@ -0,0 +1,23 @@
+/**
+ * Get value from `obj` at `path`.
+ *
+ * For example
+ * ```
+ * > get({a: {b: [13, 14, 15]}}, "a.b.1")
+ * < 14
+ * ```
+ *
+ * @param obj and object or array
+ * @param path a property path with dot `.` as separator.
+ * @returns value from `obj` at `path`
+ */
+export function get<T extends object | unknown[]>(
+  obj: T,
+  path: string,
+): unknown {
+  let result = obj;
+  path.split(".").forEach((key) => {
+    result = result[key];
+  });
+  return result;
+}

dashi/src/utils/get.ts

@@ -0,0 +1,41 @@
+import { expect, test } from "vitest";
+import { set } from "./set";
+
+test("set flat object", () => {
+  const obj = { a: 1, b: 2 };
+  expect(set(obj, "a", 3)).toEqual({ a: 3, b: 2 });
+  expect(set(obj, "b", 4)).toEqual({ a: 3, b: 4 });
+  expect(set(obj, "c", 5)).toEqual({ a: 3, b: 4, c: 5 });
+});
+
+test("set nested object", () => {
+  const obj = { a: { b: 2, c: "X" } };
+  expect(set(obj, "a.b", 3)).toEqual({ a: { b: 3, c: "X" } });
+  expect(set(obj, "a.c", "Y")).toEqual({ a: { b: 3, c: "Y" } });
+  expect(set(obj, "a.d", true)).toEqual({ a: { b: 3, c: "Y", d: true } });
+});
+
+test("set array", () => {
+  const arr = [1, 2];
+  expect(set(arr, "0", 3)).toEqual([3, 2]);
+  expect(set(arr, "1", 4)).toEqual([3, 4]);
+  expect(set(arr, "2", 5)).toEqual([3, 4, 5]);
+});
+
+test("set array of objects", () => {
+  const arr = [{ a: 1, b: 2 }, 3];
+  expect(set(arr, "0.a", 4)).toEqual([{ a: 4, b: 2 }, 3]);
+  expect(set(arr, "0.b", 5)).toEqual([{ a: 4, b: 5 }, 3]);
+  expect(set(arr, "1", 7)).toEqual([{ a: 4, b: 5 }, 7]);
+  expect(set(arr, "2", 8)).toEqual([{ a: 4, b: 5 }, 7, 8]);
+});
+
+test("set object with array of objects with array", () => {
+  const arr = { a: [{ b: [{ x: 27, y: 28 }] }, 38] };
+  expect(set(arr, "a.0.b.0.x", 28)).toEqual({
+    a: [{ b: [{ x: 28, y: 28 }] }, 38],
+  });
+  expect(set(arr, "a.0.b.0.y", 29)).toEqual({
+    a: [{ b: [{ x: 28, y: 29 }] }, 38],
+  });
+});

dashi/src/utils/set.test.ts

@@ -0,0 +1,42 @@
+/**
+ * Set value of `obj` at `path`.
+ *
+ * For example
+ * ```
+ * > set({a: {b: [13, 14, 15]}}, "a.b.1", -1)
+ * < {a: {b: [13, -1, 15]}}
+ * ```
+ *
+ * The function does not create new object instances,
+ * but modifies the `obj` in place.
+ * The intended use is with `immer`, pass the _draft_ object of
+ * `produce`, i.e.,
+ *
+ * ```
+ * obj = produce(draft => {
+ *   set(draft, ...)
+ * })
+ * ```
+ *
+ * @param obj and object or array.
+ * @param path a property path with dot `.` as separator.
+ * @param value a value to set.
+ * @returns the `obj` to allow for nested `set()` calls.
+ */
+export function set<T extends object | unknown[]>(
+  obj: T,
+  path: string,
+  value: unknown,
+): T {
+  const keys = path.split(".");
+  const lastIndex = keys.length - 1;
+  let lastObj = obj;
+  keys.forEach((key, index: number) => {
+    if (index === lastIndex) {
+      lastObj[key] = value;
+    } else {
+      lastObj = lastObj[key];
+    }
+  });
+  return obj;
+}