cleanup

Author: ignatiusmb

src/client/index.js

@@ -1,18 +1,19 @@
 import { highlight } from './highlight.js';
 import { addListener } from './listener.js';
 // import { profiler } from './profiler.js';
-import { getNode } from './svelte.js';
-
-// @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 });
-};
-
-// @ts-ignore - possibly find an alternative
-window.__svelte_devtools_select_element = function (element) {
-	const node = getNode(element);
-	if (node) send('inspect', { node: serialize(node) });
+import { nodes } from './svelte.js';
+
+// @ts-ignore - for the app to call with `eval`
+window['#SvelteDevTools'] = {
+	/**
+	 * @param {string} id
+	 * @param {string} key
+	 * @param {any} value
+	 */
+	inject(id, key, value) {
+		const { detail: component } = nodes.map.get(id) || {};
+		component && component.$inject_state({ [key]: value });
+	},
 };
 
 const previous = {
@@ -56,7 +57,7 @@ const inspect = {
 	click(event) {
 		event.preventDefault();
 		document.removeEventListener('mousemove', inspect.handle, true);
-		const node = getNode(/** @type {Node} */ (event.target));
+		const node = nodes.map.get(/** @type {Node} */ (event.target));
 		if (node) send('bridge::ext/inspect', { node: serialize(node) });
 		previous.clear();
 	},
@@ -67,11 +68,11 @@ window.addEventListener('message', ({ data, source }) => {
 	if (source !== window || data?.source !== 'svelte-devtools') return;
 
 	if (data.type === 'bridge::ext/select') {
-		const node = getNode(data.payload);
+		const node = nodes.map.get(data.payload);
 		// @ts-expect-error - saved for `devtools.inspect()`
 		if (node) window.$n = node.detail;
 	} else if (data.type === 'bridge::ext/highlight') {
-		const node = getNode(data.payload);
+		const node = nodes.map.get(data.payload);
 		return highlight(node);
 	} else if (data.type === 'bridge::ext/inspect') {
 		switch (data.payload) {

src/client/svelte.js

@@ -4,13 +4,8 @@ import { listeners } from './listener.js';
 /** @type {undefined | SvelteBlockDetail} */
 let current_block;
 
-/** @param {string | Node} id */
-export function getNode(id) {
-	return nodes.map.get(id);
-}
-
-const nodes = {
-	/** @type {Map<any, SvelteBlockDetail>} */
+export const nodes = {
+	/** @type {Map<string | object | Node, SvelteBlockDetail>} */
 	map: new Map(),
 
 	/** @param {{ node: SvelteBlockDetail; target?: Node; anchor?: Node }} opts */
@@ -24,7 +19,7 @@ const nodes = {
 		}
 		node.parent = target;
 
-		const sibling = this.map.get(anchor);
+		const sibling = anchor && this.map.get(anchor);
 		if (target) {
 			const index = target.children.findIndex((n) => n === sibling);
 			if (index === -1) target.children.push(node);

src/lib/panel/PropertyList.svelte

@@ -8,10 +8,11 @@
 	const errors: Record<string, string | undefined> = {};
 	function change(key: string, value: any) {
 		chrome.devtools.inspectedWindow.eval(
-			`__svelte_devtools_inject_state("${id}", "${key}", ${value})`,
+			`window['#SvelteDevTools'].inject("${id}", "${key}", ${value})`,
 			(_, error) => {
-				errors[key] =
-					error && error.isException ? error.value.slice(0, error.value.indexOf('\n')) : undefined;
+				errors[key] = error?.isException
+					? error.value.slice(0, error.value.indexOf('\n'))
+					: undefined;
 			},
 		);
 	}