fix: rework props editing (#205)

Author: ignatiusmb

src/client/core.js

@@ -7,12 +7,25 @@ import { serialize } from './utils.js';
 window['#SvelteDevTools'] = {
 	/**
 	 * @param {string} id
-	 * @param {string} key
+	 * @param {string[]} keys
 	 * @param {any} value
 	 */
-	inject(id, key, value) {
+	inject(id, keys, value) {
 		const { detail: component } = v4.map.get(id) || {};
-		component && component.$inject_state({ [key]: value });
+		if (component) {
+			const [prop, ...rest] = keys;
+			const original = component.$capture_state()[prop];
+			if (typeof original === 'object') {
+				let ref = original;
+				for (let i = 0; i < rest.length - 1; i += 1) {
+					ref = ref[rest[i]];
+				}
+				ref[rest[rest.length - 1]] = value;
+				component.$inject_state({ [prop]: original });
+			} else {
+				component.$inject_state({ [prop]: value });
+			}
+		}
 	},
 };
 

src/client/utils.js

@@ -68,7 +68,7 @@ export function serialize(node) {
 			const listeners = node.detail.__listeners || [];
 
 			res.detail = {
-				attributes: attributes.map(({ name: key, value }) => ({ key, value })),
+				attributes: attributes.map(({ name: key, value }) => ({ key, value, readonly: true })),
 				listeners: listeners.map((o) => ({ ...o, handler: o.handler.toString() })),
 			};
 			break;
@@ -86,7 +86,7 @@ export function serialize(node) {
 			const { ctx, source } = node.detail;
 			const cloned = Object.entries(clone(ctx));
 			res.detail = {
-				ctx: cloned.map(([key, value]) => ({ key, value })),
+				ctx: cloned.map(([key, value]) => ({ key, value, readonly: true })),
 				source: source.slice(source.indexOf('{'), source.indexOf('}') + 1),
 			};
 			break;

src/lib/panel/Editable.svelte

@@ -1,38 +1,66 @@
 <script lang="ts">
 	interface Props {
 		type: 'string' | 'number' | 'null';
-		value: any;
+		value: string;
 		readonly: boolean;
-		onchange(updated: unknown): void;
+		onchange(updated: string): void;
 	}
 
 	let { type, value, readonly, onchange }: Props = $props();
 
 	let editing = $state(false);
+
+	function update(v: string) {
+		editing = false;
+		switch (true) {
+			case v === '':
+			case v === 'undefined': {
+				type = 'null';
+				v = 'undefined';
+				break;
+			}
+			case v === 'null': {
+				type = v = 'null';
+				break;
+			}
+			case v === 'true' || v === 'false': {
+				type = 'number';
+				v = `${v === 'true'}`;
+				break;
+			}
+			case !Number.isNaN(Number(v)): {
+				type = 'number';
+				v = `${Number(v)}`;
+				break;
+			}
+			default: {
+				type = 'string';
+				break;
+			}
+		}
+		value = v;
+		onchange(type === 'string' ? `"${v.replace(/"/g, '\\"')}"` : v);
+	}
 </script>
 
 {#if editing}
 	<input
-		value={JSON.stringify(value)}
+		value={value === null ? 'null' : value === undefined ? 'undefined' : value}
 		onblur={({ target }) => {
-			editing = false;
 			// @ts-expect-error - target and value exists
-			const updated = target.value;
-			onchange((value = JSON.parse(updated)));
+			update(target.value);
 		}}
 		onkeydown={({ key, target }) => {
 			if (key !== 'Enter') return;
-			editing = false;
 			// @ts-expect-error - target and value exists
-			const updated = target.value;
-			onchange((value = JSON.parse(updated)));
+			update(target.value);
 		}}
 	/>
 {:else}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<span class:readonly class={type} onclick={() => (editing = !readonly)}>
-		{JSON.stringify(value)}
+		{type === 'string' ? `"${value}"` : `${value}`}
 	</span>
 {/if}