feat: support prop updates on objects with functions (#194)

Author: davidjayb

src/client/index.js

@@ -3,10 +3,44 @@ import { addListener } from './listener.js';
 // import { profiler } from './profiler.js';
 import { getNode } from './svelte.js';
 
+const propClones = new Map();
+
+/**
+ * @param {*} orig
+ * @param {*} value
+ * @returns {any}
+ */
+function updateProp(orig, value, seen = new Map()) {
+	switch (typeof value) {
+		case 'object': {
+			if (value === window || value === null) return null;
+			if (Array.isArray(value)) return value.map((o, index) => updateProp(orig[index], o, seen));
+			if (seen.has(value)) return seen.get(value);
+
+			/** @type {Record<string, any>} */
+			const o = {};
+			seen.set(value, o);
+			for (const [key, v] of Object.entries(value)) {
+				orig[key] = updateProp(orig[key], v, seen);
+			}
+
+			return orig;
+		}
+		default:
+			return value;
+	}
+}
+
 // @ts-ignore - possibly find an alternative
 window.__svelte_devtools_inject_state = function (id, key, value) {
 	const { detail: component } = getNode(id) || {};
-	component && component.$inject_state({ [key]: value });
+	if (component) {
+		const clone = updateProp(propClones.get(id)[key], value);
+
+		component.$inject_state({
+			[key]: clone,
+		});
+	}
 };
 
 // @ts-ignore - possibly find an alternative
@@ -131,19 +165,38 @@ function serialize(node) {
 	switch (node.type) {
 		case 'component': {
 			const { $$: internal = {} } = node.detail;
-			const ctx = clone(node.detail.$capture_state?.() || {});
+			const nodeState = node.detail.$capture_state?.() || {};
 			const bindings = Object.values(internal.bound || {}).map(
 				/** @param {Function} f */ (f) => f.name,
 			);
+
+			/** @type {Record<string, any>} */
+			// clone original prop objects for update
+			const _propClones = {};
 			const props = Object.keys(internal.props || {}).flatMap((key) => {
-				const value = ctx[key];
-				delete ctx[key]; // deduplicate for ctx
+				const prop = nodeState[key];
+
+				if (prop) {
+					const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+						Object.getPrototypeOf(nodeState[key]),
+					);
+					const protoClone = Object.create(null, prototypeDescriptors);
+					const clone = Object.create(protoClone, Object.getOwnPropertyDescriptors(prop));
+					_propClones[key] = clone;
+				}
+
+				const value = clone(prop);
+				delete nodeState[key]; // deduplicate for ctx
 				if (value === undefined) return [];
 
 				const bounded = bindings.some((f) => f.includes(key));
 				return { key, value, bounded };
 			});
 
+			propClones.set(res.id, _propClones);
+
+			const ctx = clone(nodeState);
+
 			res.detail = {
 				attributes: props,
 				listeners: Object.entries(internal.callbacks || {}).flatMap(([event, value]) =>

src/lib/panel/Expandable.svelte

@@ -20,9 +20,12 @@
 			case 'number':
 				return value.toString();
 			case 'object':
-				return `{${Object.entries(value)
-					.map(([key, value]) => `"${key}":${key == k ? v : stringify(value)}`)
-					.join(',')}}`;
+				// only return updated key
+				if (k) {
+					return `{${k}: ${v}}`;
+				} else {
+					return `{}`;
+				}
 
 			default: // when is this ever the case?
 				return value?.toString() ?? 'undefined';