refactor: standardize messaging format (#173)

Author: ignatiusmb

src/client/index.js

@@ -19,18 +19,18 @@ window.addEventListener('message', ({ data, source }) => {
 	// only accept messages from our application or script
 	if (source !== window || data?.source !== 'svelte-devtools') return;
 
-	if (data.type === 'ext/select') {
+	if (data.type === 'bridge::ext/select') {
 		const node = getNode(data.payload);
 		// @ts-expect-error - saved for `inspect()`
 		if (node) window.$n = node.detail;
-	} else if (data.type === 'ext/highlight') {
+	} else if (data.type === 'bridge::ext/highlight') {
 		const node = getNode(data.payload);
 		return highlight(node);
 	}
 
 	// --- TODO: cleanup/implement below ---
 
-	// case 'ext/inspect': {
+	// case 'bridge::ext/inspect': {
 	// 	console.log(data.payload, data.payload instanceof HTMLElement);
 	// 	/** @param {MouseEvent} event  */
 	// 	const move = ({ target }) => highlight({ type: 'element', detail: target });
@@ -54,7 +54,7 @@ window.addEventListener('message', ({ data, source }) => {
 	// 	return highlight(undefined);
 	// }
 
-	// case 'ext/profiler': {
+	// case 'bridge::ext/profiler': {
 	// 	return data.payload ? startProfiler() : stopProfiler();
 	// }
 
@@ -185,22 +185,22 @@ function send(type, payload) {
 
 addListener({
 	add(node, anchor) {
-		send('courier/node:add', {
+		send('bridge::courier/node->add', {
 			node: serialize(node),
 			target: node.parent?.id ?? null,
 			anchor: anchor?.id ?? null,
 		});
 	},
 
 	remove(node) {
-		send('courier/node:remove', { node: serialize(node) });
+		send('bridge::courier/node->remove', { node: serialize(node) });
 	},
 
 	update(node) {
-		send('courier/node:update', { node: serialize(node) });
+		send('bridge::courier/node->update', { node: serialize(node) });
 	},
 
 	profile(/** frame */) {
-		// send('courier/profile:update', { frame });
+		// send('bridge::courier/profile->update', { frame });
 	},
 });

src/lib/nodes/Node.svelte

@@ -38,7 +38,7 @@
 		on:click|stopPropagation={() => selected.set(node)}
 		on:mousemove|stopPropagation={() => {
 			if ($hovered?.id === node.id) return;
-			background.send('ext/highlight', node.id);
+			background.send('bridge::ext/highlight', node.id);
 			hovered.set(node);
 		}}
 	>

src/lib/runtime.ts

@@ -3,10 +3,10 @@ import { type DebugNode, hovered, root, selected } from './store';
 const tabId = chrome.devtools.inspectedWindow.tabId;
 const port = chrome.runtime.connect({ name: `${tabId}` });
 
-port.postMessage({ source: 'svelte-devtools', tabId, type: 'ext/init' });
+port.postMessage({ source: 'svelte-devtools', tabId, type: 'bypass::ext/init' });
 
 export const background = {
-	send(type: `${'ext' | 'page'}/${string}`, payload?: any) {
+	send(type: `bridge::${'ext' | 'page'}/${string}` | 'bypass::ext/page->refresh', payload?: any) {
 		port.postMessage({ source: 'svelte-devtools', tabId, type, payload });
 	},
 };
@@ -39,18 +39,18 @@ function resolveEventBubble(node: any) {
 
 port.onMessage.addListener(({ type, payload }) => {
 	switch (type) {
-		case 'ext/clear': {
+		case 'bridge::ext/clear': {
 			selected.set(undefined);
 			hovered.set(undefined);
 			return root.set([]);
 		}
 
-		case 'ext/inspect': {
+		case 'bridge::ext/inspect': {
 			const current = nodes.get(payload.node.id);
 			return selected.set(current);
 		}
 
-		case 'courier/node:add': {
+		case 'bridge::courier/node->add': {
 			const { node, target, anchor } = payload as {
 				node: DebugNode;
 				target: null | number;
@@ -73,7 +73,7 @@ port.onMessage.addListener(({ type, payload }) => {
 			return (node.parent = parent).invalidate();
 		}
 
-		case 'courier/node:remove': {
+		case 'bridge::courier/node->remove': {
 			const node = payload.node as SvelteBlockDetail;
 			const current = nodes.get(node.id);
 			if (current) nodes.delete(current.id);
@@ -84,7 +84,7 @@ port.onMessage.addListener(({ type, payload }) => {
 			return current.parent.invalidate();
 		}
 
-		case 'courier/node:update': {
+		case 'bridge::courier/node->update': {
 			const node = payload.node as SvelteBlockDetail;
 			const current = nodes.get(node.id);
 			if (!current) return;
@@ -95,7 +95,7 @@ port.onMessage.addListener(({ type, payload }) => {
 			return current.invalidate();
 		}
 
-		// case 'courier/profile:update': {
+		// case 'bridge::courier/profile->update': {
 		// 	resolveFrame(frame);
 		// 	profileFrame.set(frame);
 		// 	break;

src/routes/+layout.svelte

@@ -18,7 +18,7 @@
 	import { hovered, root, selected, visibility } from '$lib/store';
 
 	$: if ($selected) {
-		background.send('ext/select', $selected.id);
+		background.send('bridge::ext/select', $selected.id);
 
 		let current = $selected;
 		let invalid = null;
@@ -32,7 +32,7 @@
 	}
 
 	function reset() {
-		background.send('ext/highlight', null);
+		background.send('bridge::ext/highlight', null);
 		hovered.set(undefined);
 	}
 </script>

src/routes/ConnectMessage.svelte

@@ -7,7 +7,7 @@
 	<p style:display="inline-flex" style:font-size="1.25rem">
 		<span>No Svelte app detected</span>
 
-		<button on:click={() => background.send('page/refresh')}>reload</button>
+		<button on:click={() => background.send('bypass::ext/page->refresh')}>reload</button>
 	</p>
 
 	<footer>

src/routes/PickerButton.svelte

@@ -9,7 +9,7 @@
 	function click() {
 		if (active) {
 			active = false;
-			background.send('ext/inspect', 'stop');
+			background.send('bridge::ext/inspect', 'stop');
 			return;
 		}
 
@@ -24,7 +24,7 @@
 			}, 120);
 		});
 		active = true;
-		background.send('ext/inspect', 'start');
+		background.send('bridge::ext/inspect', 'start');
 	}
 </script>
 

src/routes/ProfileButton.svelte

@@ -5,7 +5,7 @@
 	let enabled = false;
 </script>
 
-<Button on:click={() => background.send('ext/profiler', enabled)}>
+<Button on:click={() => background.send('bridge::ext/profiler', enabled)}>
 	{#if enabled}
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 			<path d="M12.7,1.4 11.3,0l-8,8 8,8 1.4,-1.4L6,8Z" />

static/background.js

@@ -9,16 +9,22 @@ chrome.runtime.onConnect.addListener((port) => {
 
 	// messages are from the devtools page and not content script (courier.js)
 	port.onMessage.addListener((message, sender) => {
-		if (message.type === 'ext/init') {
-			ports.set(message.tabId, sender);
-
-			return chrome.tabs.onUpdated.addListener(courier);
-		} else if (message.type === 'page/refresh') {
-			return chrome.tabs.reload(message.tabId, { bypassCache: true });
+		switch (message.type) {
+			case 'bypass::ext/init': {
+				ports.set(message.tabId, sender);
+				if (!chrome.tabs.onUpdated.hasListener(courier)) {
+					chrome.tabs.onUpdated.addListener(courier);
+				}
+				break;
+			}
+			case 'bypass::ext/page->refresh': {
+				chrome.tabs.reload(message.tabId, { bypassCache: true });
+				break;
+			}
+
+			default: // relay messages from devtools to tab
+				chrome.tabs.sendMessage(message.tabId, message);
 		}
-
-		// relay messages from devtools page to `chrome.scripting`
-		return chrome.tabs.sendMessage(message.tabId, message);
 	});
 
 	port.onDisconnect.addListener((disconnected) => {
@@ -34,7 +40,7 @@ chrome.runtime.onConnect.addListener((port) => {
 chrome.runtime.onMessage.addListener((message, sender) => {
 	if (sender.id !== chrome.runtime.id) return; // unexpected sender
 
-	if (message.type === 'ext/icon:set') {
+	if (message.type === 'bypass::ext/icon:set') {
 		const selected = message.payload ? 'default' : 'disabled';
 		const icons = [16, 24, 48, 96, 128].map((s) => [s, `icons/${selected}-${s}.png`]);
 		return chrome.action.setIcon({ path: Object.fromEntries(icons) });
@@ -67,7 +73,7 @@ function courier(tabId, changed) {
 			document.documentElement.appendChild(script);
 
 			// // TODO: reenable profiler
-			// if (message.type === 'ext/profiler' && message.payload) {
+			// if (message.type === 'bridge::ext/profiler' && message.payload) {
 			// 	// start profiler
 			// }
 
@@ -80,7 +86,7 @@ function courier(tabId, changed) {
 				// 		window.sessionStorage.SvelteDevToolsProfilerEnabled = 'true';
 				// 		break;
 				// 	case 'stopProfiler':
-				// 	case 'ext/clear':
+				// 	case 'bridge::ext/clear':
 				// 		delete window.sessionStorage.SvelteDevToolsProfilerEnabled;
 				// 		break;
 				// }
@@ -94,7 +100,7 @@ function courier(tabId, changed) {
 			});
 
 			window.addEventListener('unload', () => {
-				chrome.runtime.sendMessage({ type: 'ext/clear' });
+				chrome.runtime.sendMessage({ type: 'bridge::ext/clear' });
 			});
 		},
 	});

static/register.js

@@ -5,7 +5,7 @@ chrome.devtools.panels.create(
 	// (panel) => {
 	// 	panel.onShown.addListener((win) =>
 	// 		chrome.devtools.inspectedWindow.eval('$0', (payload) =>
-	// 			win.postMessage({ source: 'svelte-devtools', type: 'ext/inspect', payload }),
+	// 			win.postMessage({ source: 'svelte-devtools', type: 'bridge::ext/inspect', payload }),
 	// 		),
 	// 	);
 	// },

static/sensor.js

@@ -4,7 +4,7 @@
 
 	document.dispatchEvent(
 		new CustomEvent('SvelteDevTools', {
-			detail: { type: 'ext/icon:set', payload: major },
+			detail: { type: 'bypass::ext/icon:set', payload: major },
 		}),
 	);
 })();