Sort inspected object properties

Author: marvinhagemeister

src/adapter/shared/serialize.ts

@@ -41,6 +41,10 @@ export function isReadOnlySignal(signal: Signal): boolean {
 	);
 }
 
+function sortStrings(a: string, b: string) {
+	return a.localeCompare(b);
+}
+
 export function jsonify(
 	data: any,
 	getVNode: (x: any) => SerializedVNode | null,
@@ -118,10 +122,12 @@ export function jsonify(
 					}),
 				};
 			}
-			const out = { ...data };
-			Object.keys(out).forEach(key => {
-				out[key] = jsonify(out[key], getVNode, seen);
-			});
+			const out = {};
+			Object.keys(data)
+				.sort(sortStrings)
+				.forEach(key => {
+					(out as any)[key] = jsonify((data as any)[key], getVNode, seen);
+				});
 			return out;
 		}
 		default:
@@ -162,7 +168,10 @@ export function setInCopy<T = any>(
 	if (idx >= path.length) return value;
 
 	// Signals bypass everything
-	if (path[path.length - 1] === "value" && maybeSetSignal(obj, path, value)) {
+	if (
+		path[path.length - 1] === "value" &&
+		maybeSetSignal(obj as any, path, value)
+	) {
 		return obj;
 	}
 

test-e2e/fixtures/apps/props.jsx

@@ -0,0 +1,13 @@
+import { h, Fragment, render } from "preact";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function NestedObjProps(props) {
+	return <div style="padding: 2rem;">Nested props</div>;
+}
+
+render(
+	<Fragment>
+		<NestedObjProps {...{ c: 3, a: 1, b: { c: 3, a: 1, b: 2 } }} />
+	</Fragment>,
+	document.getElementById("app"),
+);

test-e2e/tests/inspect-props-sort.test.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+import { gotoTest, locateTreeItem, getProps } from "../pw-utils";
+
+test("Inspect should sort object keys", async ({ page }) => {
+	const { devtools } = await gotoTest(page, "props");
+
+	await devtools.click(locateTreeItem("NestedObjProps"));
+	await devtools.waitForSelector('[data-testid="Props"]');
+
+	await devtools.waitForSelector('[data-testid="props-row"]');
+
+	const props = await getProps(devtools);
+	expect(props).toEqual({
+		a: "1",
+		b: "{a: 1, b: 2, c: 3}",
+		c: "3",
+	});
+});

test-e2e/tests/inspect-truncate.test.ts

@@ -13,10 +13,10 @@ test("Format inspected data", async ({ page }) => {
 
 		texts = texts.map(x => x.replace(/\n/g, ""));
 		expect(texts).toEqual([
+			"arr[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39]",
 			"blobBlob {}",
-			'obj{type: "foo", props: null}',
+			'obj{props: null, type: "foo"}',
 			"obj2{foobarA: 1, foobarB: 1, foobarC: 1, foobarD: 1, foobarE: 1, foobarF: 1, foobarG: 1, foobarH: 1}",
-			"arr[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39]",
 			"vnode<div />",
 			"vnode2<Child />",
 		]);

test-e2e/tests/prop-input.test.ts

@@ -92,7 +92,7 @@ test("Input various data types into DataInput", async ({ page }) => {
 
 	data = await enterText(page, devtools, input, '{"foo":123, "bar": [1,2]}');
 	expect(data).toEqual({
-		value: "{foo: 123, bar: [1, 2]}",
+		value: "{bar: [1, 2], foo: 123}",
 		rendered: { foo: 123, bar: [1, 2] },
 		type: "non-editable",
 	});