Skip to content

Commit 592a9f4

Browse files
authored
refactor: standardize messaging format (#173)
1 parent 57ccb04 commit 592a9f4

File tree

10 files changed

+44
-38
lines changed

10 files changed

+44
-38
lines changed

src/client/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,18 @@ window.addEventListener('message', ({ data, source }) => {
1919
// only accept messages from our application or script
2020
if (source !== window || data?.source !== 'svelte-devtools') return;
2121

22-
if (data.type === 'ext/select') {
22+
if (data.type === 'bridge::ext/select') {
2323
const node = getNode(data.payload);
2424
// @ts-expect-error - saved for `inspect()`
2525
if (node) window.$n = node.detail;
26-
} else if (data.type === 'ext/highlight') {
26+
} else if (data.type === 'bridge::ext/highlight') {
2727
const node = getNode(data.payload);
2828
return highlight(node);
2929
}
3030

3131
// --- TODO: cleanup/implement below ---
3232

33-
// case 'ext/inspect': {
33+
// case 'bridge::ext/inspect': {
3434
// console.log(data.payload, data.payload instanceof HTMLElement);
3535
// /** @param {MouseEvent} event */
3636
// const move = ({ target }) => highlight({ type: 'element', detail: target });
@@ -54,7 +54,7 @@ window.addEventListener('message', ({ data, source }) => {
5454
// return highlight(undefined);
5555
// }
5656

57-
// case 'ext/profiler': {
57+
// case 'bridge::ext/profiler': {
5858
// return data.payload ? startProfiler() : stopProfiler();
5959
// }
6060

@@ -185,22 +185,22 @@ function send(type, payload) {
185185

186186
addListener({
187187
add(node, anchor) {
188-
send('courier/node:add', {
188+
send('bridge::courier/node->add', {
189189
node: serialize(node),
190190
target: node.parent?.id ?? null,
191191
anchor: anchor?.id ?? null,
192192
});
193193
},
194194

195195
remove(node) {
196-
send('courier/node:remove', { node: serialize(node) });
196+
send('bridge::courier/node->remove', { node: serialize(node) });
197197
},
198198

199199
update(node) {
200-
send('courier/node:update', { node: serialize(node) });
200+
send('bridge::courier/node->update', { node: serialize(node) });
201201
},
202202

203203
profile(/** frame */) {
204-
// send('courier/profile:update', { frame });
204+
// send('bridge::courier/profile->update', { frame });
205205
},
206206
});

src/lib/nodes/Node.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
on:click|stopPropagation={() => selected.set(node)}
3939
on:mousemove|stopPropagation={() => {
4040
if ($hovered?.id === node.id) return;
41-
background.send('ext/highlight', node.id);
41+
background.send('bridge::ext/highlight', node.id);
4242
hovered.set(node);
4343
}}
4444
>

src/lib/runtime.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { type DebugNode, hovered, root, selected } from './store';
33
const tabId = chrome.devtools.inspectedWindow.tabId;
44
const port = chrome.runtime.connect({ name: `${tabId}` });
55

6-
port.postMessage({ source: 'svelte-devtools', tabId, type: 'ext/init' });
6+
port.postMessage({ source: 'svelte-devtools', tabId, type: 'bypass::ext/init' });
77

88
export const background = {
9-
send(type: `${'ext' | 'page'}/${string}`, payload?: any) {
9+
send(type: `bridge::${'ext' | 'page'}/${string}` | 'bypass::ext/page->refresh', payload?: any) {
1010
port.postMessage({ source: 'svelte-devtools', tabId, type, payload });
1111
},
1212
};
@@ -39,18 +39,18 @@ function resolveEventBubble(node: any) {
3939

4040
port.onMessage.addListener(({ type, payload }) => {
4141
switch (type) {
42-
case 'ext/clear': {
42+
case 'bridge::ext/clear': {
4343
selected.set(undefined);
4444
hovered.set(undefined);
4545
return root.set([]);
4646
}
4747

48-
case 'ext/inspect': {
48+
case 'bridge::ext/inspect': {
4949
const current = nodes.get(payload.node.id);
5050
return selected.set(current);
5151
}
5252

53-
case 'courier/node:add': {
53+
case 'bridge::courier/node->add': {
5454
const { node, target, anchor } = payload as {
5555
node: DebugNode;
5656
target: null | number;
@@ -73,7 +73,7 @@ port.onMessage.addListener(({ type, payload }) => {
7373
return (node.parent = parent).invalidate();
7474
}
7575

76-
case 'courier/node:remove': {
76+
case 'bridge::courier/node->remove': {
7777
const node = payload.node as SvelteBlockDetail;
7878
const current = nodes.get(node.id);
7979
if (current) nodes.delete(current.id);
@@ -84,7 +84,7 @@ port.onMessage.addListener(({ type, payload }) => {
8484
return current.parent.invalidate();
8585
}
8686

87-
case 'courier/node:update': {
87+
case 'bridge::courier/node->update': {
8888
const node = payload.node as SvelteBlockDetail;
8989
const current = nodes.get(node.id);
9090
if (!current) return;
@@ -95,7 +95,7 @@ port.onMessage.addListener(({ type, payload }) => {
9595
return current.invalidate();
9696
}
9797

98-
// case 'courier/profile:update': {
98+
// case 'bridge::courier/profile->update': {
9999
// resolveFrame(frame);
100100
// profileFrame.set(frame);
101101
// break;

src/routes/+layout.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
import { hovered, root, selected, visibility } from '$lib/store';
1919
2020
$: if ($selected) {
21-
background.send('ext/select', $selected.id);
21+
background.send('bridge::ext/select', $selected.id);
2222
2323
let current = $selected;
2424
let invalid = null;
@@ -32,7 +32,7 @@
3232
}
3333
3434
function reset() {
35-
background.send('ext/highlight', null);
35+
background.send('bridge::ext/highlight', null);
3636
hovered.set(undefined);
3737
}
3838
</script>

src/routes/ConnectMessage.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<p style:display="inline-flex" style:font-size="1.25rem">
88
<span>No Svelte app detected</span>
99

10-
<button on:click={() => background.send('page/refresh')}>reload</button>
10+
<button on:click={() => background.send('bypass::ext/page->refresh')}>reload</button>
1111
</p>
1212

1313
<footer>

src/routes/PickerButton.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
function click() {
1010
if (active) {
1111
active = false;
12-
background.send('ext/inspect', 'stop');
12+
background.send('bridge::ext/inspect', 'stop');
1313
return;
1414
}
1515
@@ -24,7 +24,7 @@
2424
}, 120);
2525
});
2626
active = true;
27-
background.send('ext/inspect', 'start');
27+
background.send('bridge::ext/inspect', 'start');
2828
}
2929
</script>
3030

src/routes/ProfileButton.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
let enabled = false;
66
</script>
77

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

static/background.js

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,22 @@ chrome.runtime.onConnect.addListener((port) => {
99

1010
// messages are from the devtools page and not content script (courier.js)
1111
port.onMessage.addListener((message, sender) => {
12-
if (message.type === 'ext/init') {
13-
ports.set(message.tabId, sender);
14-
15-
return chrome.tabs.onUpdated.addListener(courier);
16-
} else if (message.type === 'page/refresh') {
17-
return chrome.tabs.reload(message.tabId, { bypassCache: true });
12+
switch (message.type) {
13+
case 'bypass::ext/init': {
14+
ports.set(message.tabId, sender);
15+
if (!chrome.tabs.onUpdated.hasListener(courier)) {
16+
chrome.tabs.onUpdated.addListener(courier);
17+
}
18+
break;
19+
}
20+
case 'bypass::ext/page->refresh': {
21+
chrome.tabs.reload(message.tabId, { bypassCache: true });
22+
break;
23+
}
24+
25+
default: // relay messages from devtools to tab
26+
chrome.tabs.sendMessage(message.tabId, message);
1827
}
19-
20-
// relay messages from devtools page to `chrome.scripting`
21-
return chrome.tabs.sendMessage(message.tabId, message);
2228
});
2329

2430
port.onDisconnect.addListener((disconnected) => {
@@ -34,7 +40,7 @@ chrome.runtime.onConnect.addListener((port) => {
3440
chrome.runtime.onMessage.addListener((message, sender) => {
3541
if (sender.id !== chrome.runtime.id) return; // unexpected sender
3642

37-
if (message.type === 'ext/icon:set') {
43+
if (message.type === 'bypass::ext/icon:set') {
3844
const selected = message.payload ? 'default' : 'disabled';
3945
const icons = [16, 24, 48, 96, 128].map((s) => [s, `icons/${selected}-${s}.png`]);
4046
return chrome.action.setIcon({ path: Object.fromEntries(icons) });
@@ -67,7 +73,7 @@ function courier(tabId, changed) {
6773
document.documentElement.appendChild(script);
6874

6975
// // TODO: reenable profiler
70-
// if (message.type === 'ext/profiler' && message.payload) {
76+
// if (message.type === 'bridge::ext/profiler' && message.payload) {
7177
// // start profiler
7278
// }
7379

@@ -80,7 +86,7 @@ function courier(tabId, changed) {
8086
// window.sessionStorage.SvelteDevToolsProfilerEnabled = 'true';
8187
// break;
8288
// case 'stopProfiler':
83-
// case 'ext/clear':
89+
// case 'bridge::ext/clear':
8490
// delete window.sessionStorage.SvelteDevToolsProfilerEnabled;
8591
// break;
8692
// }
@@ -94,7 +100,7 @@ function courier(tabId, changed) {
94100
});
95101

96102
window.addEventListener('unload', () => {
97-
chrome.runtime.sendMessage({ type: 'ext/clear' });
103+
chrome.runtime.sendMessage({ type: 'bridge::ext/clear' });
98104
});
99105
},
100106
});

static/register.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ chrome.devtools.panels.create(
55
// (panel) => {
66
// panel.onShown.addListener((win) =>
77
// chrome.devtools.inspectedWindow.eval('$0', (payload) =>
8-
// win.postMessage({ source: 'svelte-devtools', type: 'ext/inspect', payload }),
8+
// win.postMessage({ source: 'svelte-devtools', type: 'bridge::ext/inspect', payload }),
99
// ),
1010
// );
1111
// },

static/sensor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
document.dispatchEvent(
66
new CustomEvent('SvelteDevTools', {
7-
detail: { type: 'ext/icon:set', payload: major },
7+
detail: { type: 'bypass::ext/icon:set', payload: major },
88
}),
99
);
1010
})();

0 commit comments

Comments
 (0)