Merge pull request #4300 from element-hq/johannes/pure-layout-functions

Make the layout decisions pure / testable functions

src/utils/object.test.ts

@@ -0,0 +1,40 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+import { shallowEquals } from "./object";
+
+interface Thing {
+  type: string;
+  items: object[];
+  value: number;
+  extra?: object;
+}
+
+const item = {};
+const withArray: Thing = { type: "a", items: [item], value: 1 };
+
+test("shallowEquals considers an object to be equal to its shallow clone", () =>
+  expect(shallowEquals(withArray, { ...withArray })).toBe(true));
+
+test("shallowEquals detects a missing key", () => {
+  expect(shallowEquals(withArray, { ...withArray, extra: item })).toBe(false);
+  expect(shallowEquals({ ...withArray, extra: item }, withArray)).toBe(false);
+});
+
+test("shallowEquals detects a differing value", () =>
+  expect(shallowEquals(withArray, { ...withArray, value: 2 })).toBe(false));
+
+test("shallowEquals considers arrays with equal contents to be equal", () =>
+  expect(
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items] }),
+  ).toBe(true));
+
+test("shallowEquals detects arrays with different contents", () =>
+  expect(
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items, {}] }),
+  ).toBe(false));

src/utils/object.ts

@@ -0,0 +1,38 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { shallowEquals as arrayShallowEquals } from "./array.ts";
+
+/**
+ * Determine whether two objects are equal by shallow comparison of their
+ * top-level properties. Array-valued properties are themselves compared
+ * shallowly, so two objects holding distinct arrays with the same elements are
+ * considered equal.
+ */
+export function shallowEquals<T extends object>(
+  a: Readonly<T>,
+  b: Readonly<T>,
+): boolean {
+  // If a and b have the same number of keys and every key in a is also in b,
+  // then they have the same keys.
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!(key in b)) return false;
+
+    // Now check that they have the same values.
+    const aValue = (a as any)[key];
+    const bValue = (b as any)[key];
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
+  }
+
+  return true;
+}