feat: fine-grained readonly markers (#195)

Co-authored-by: Ignatius Bagus <[email protected]>

Author: davidjayb

workspace/extension/src/client/utils.js

@@ -16,8 +16,12 @@ function clone(value, seen = new Map()) {
 			/** @type {Record<string, any>} */
 			const o = {};
 			seen.set(value, o);
+
+			const descriptors = Object.getOwnPropertyDescriptors(value);
 			for (const [key, v] of Object.entries(value)) {
-				o[key] = clone(v, seen);
+				const { get, writable } = descriptors[key];
+				const readonly = !writable || get !== undefined;
+				o[key] = { key, value: clone(v, seen), readonly };
 			}
 			return o;
 		}
@@ -37,13 +41,13 @@ export function serialize(node) {
 	switch (node.type) {
 		case 'component': {
 			const { $$: internal = {} } = node.detail;
-			const ctx = clone(node.detail.$capture_state?.() || {});
+			const captured = node.detail.$capture_state?.() || {};
 			const bindings = Object.values(internal.bound || {}).map(
 				/** @param {Function} f */ (f) => f.name,
 			);
 			const props = Object.keys(internal.props || {}).flatMap((key) => {
-				const value = ctx[key];
-				delete ctx[key]; // deduplicate for ctx
+				const value = clone(captured[key]);
+				delete captured[key]; // deduplicate for ctx
 				if (value === undefined) return [];
 
 				const bounded = bindings.some((f) => f.includes(key));
@@ -55,7 +59,7 @@ export function serialize(node) {
 				listeners: Object.entries(internal.callbacks || {}).flatMap(([event, value]) =>
 					value.map(/** @param {Function} f */ (f) => ({ event, handler: f.toString() })),
 				),
-				ctx: Object.entries(ctx).map(([key, value]) => ({ key, value })),
+				ctx: Object.entries(captured).map(([key, v]) => ({ key, value: clone(v) })),
 			};
 			break;
 		}

workspace/extension/src/lib/panel/PropertyList.svelte

@@ -86,11 +86,7 @@
 						<span class="object">Object &lbrace;&hellip;&rbrace;</span>
 
 						{#if expanded[key]}
-							{@const entries = Object.entries(value).map(([key, v]) => {
-								return { key, value: v, readonly };
-							})}
-
-							<PropertyList {entries} {keys} />
+							<PropertyList entries={Object.values(value)} {keys} />
 						{/if}
 					{:else}
 						<span class="object">Object &lbrace; &rbrace;</span>