Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: generate uuid for nodes #191

Merged
merged 3 commits into from
Apr 4, 2024
Merged

chore: generate uuid for nodes #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e33687c
chore: generate uuid for nodes
ignatiusmb Apr 1, 2024
13758b2
lint
ignatiusmb Apr 1, 2024
a5958f5
cleanup
ignatiusmb Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ declare global {
};

type SvelteBlockDetail = {
id: number;
id: string; // crypto.randomUUID();
source: string;
type:
| 'anchor'
Expand Down
35 changes: 18 additions & 17 deletions src/client/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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();
},
Expand All @@ -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) {
Expand Down Expand Up @@ -202,8 +203,8 @@ addListener({
add(node, anchor) {
send('bridge::courier/node->add', {
node: serialize(node),
target: node.parent?.id ?? null,
anchor: anchor?.id ?? null,
target: node.parent?.id,
anchor: anchor?.id,
});
},

Expand Down
23 changes: 6 additions & 17 deletions src/client/svelte.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,9 @@ import { listeners } from './listener.js';

/** @type {undefined | SvelteBlockDetail} */
let current_block;
let pointer = 0;

/** @param {number | Node} id */
export function getNode(id) {
return nodes.map.get(id);
}

const nodes = {
/** @type {SvelteBlockDetail[]} */
root: [],

/** @type {Map<any, SvelteBlockDetail>} */
export const nodes = {
/** @type {Map<string | object | Node, SvelteBlockDetail>} */
map: new Map(),

/** @param {{ node: SvelteBlockDetail; target?: Node; anchor?: Node }} opts */
Expand All @@ -28,13 +19,11 @@ 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);
else target.children.splice(index, 0, node);
} else {
this.root.push(node);
}

listeners.add(node, sibling);
Expand Down Expand Up @@ -81,7 +70,7 @@ document.addEventListener('SvelteRegisterComponent', ({ detail }) => {
let last_promise;
document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
const { type, id, block, ...rest } = detail;
const current_node_id = pointer++;
const current_node_id = crypto.randomUUID();

if (block.m) {
const original = block.m;
Expand Down Expand Up @@ -134,7 +123,7 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
// @ts-expect-error - each block fallback
group = /** @type {SvelteBlockDetail} */ ({
version: '',
id: pointer++,
id: crypto.randomUUID(),
type: 'block',
tagName: 'each',
container: parent,
Expand Down Expand Up @@ -214,7 +203,7 @@ document.addEventListener('SvelteDOMInsert', ({ detail }) => {
target,
// @ts-expect-error - missing properties are irrelevant
node: {
id: pointer++,
id: crypto.randomUUID(),
type,
detail: element,
tagName: element.nodeName.toLowerCase(),
Expand Down
11 changes: 5 additions & 6 deletions src/lib/panel/PropertyList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,17 @@
import Expandable from './Expandable.svelte';

export let entries: Array<{ key: string; value: any }> = [];
export let id: number;
export let id: string;
export let readonly = false;

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.substring(0, error.value.indexOf('\n'))
: undefined;
errors[key] = error?.isException
? error.value.slice(0, error.value.indexOf('\n'))
: undefined;
},
);
}
Expand Down
44 changes: 26 additions & 18 deletions src/lib/runtime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const background = {
},
};

const nodes = new Map<null | number, DebugNode>();
const nodes = {} as { [key: string]: DebugNode };

function resolveEventBubble(node: any) {
if (!node.detail || !node.detail.listeners) return;
Expand Down Expand Up @@ -42,58 +42,66 @@ port.onMessage.addListener(({ type, payload }) => {
case 'bridge::ext/clear': {
selected.set(undefined);
hovered.set(undefined);
return root.set([]);
root.set([]);
break;
}

case 'bridge::ext/inspect': {
if (typeof payload === 'string') return;
const current = nodes.get(payload.node.id);
return selected.set(current);
if (typeof payload === 'string') break;
const current = nodes[payload.node.id];
selected.set(current);
break;
}

case 'bridge::courier/node->add': {
const { node, target, anchor } = payload as {
node: DebugNode;
target: null | number;
anchor: null | number;
target: string;
anchor: string;
};

node.children = [];
node.expanded = false;
node.invalidate = () => {};
resolveEventBubble(node);

const parent = nodes.get(target);
nodes.set(node.id, node);
if (!parent) return root.update((n) => [...n, node]);
const parent = nodes[target];
nodes[node.id] = node;
if (!parent) {
root.update((n) => [...n, node]);
break;
}

const index = parent.children.findIndex((n) => n.id === anchor);
if (index === -1) parent.children.push(node);
else parent.children.splice(index, 0, node);

return (node.parent = parent).invalidate();
(node.parent = parent).invalidate();
break;
}

case 'bridge::courier/node->remove': {
const node = payload.node as SvelteBlockDetail;
const current = nodes.get(node.id);
if (current) nodes.delete(current.id);
if (!current?.parent) return;
const current = nodes[node.id];
if (current) delete nodes[current.id];
if (!current?.parent) break;

const index = current.parent.children.findIndex((o) => o.id === current.id);
current.parent.children.splice(index, 1);
return current.parent.invalidate();
current.parent.invalidate();
break;
}

case 'bridge::courier/node->update': {
const node = payload.node as SvelteBlockDetail;
const current = nodes.get(node.id);
if (!current) return;
const current = nodes[node.id];
if (!current) break;
Object.assign(current, payload.node);
resolveEventBubble(current);

selected.update((o) => o);
return current.invalidate();
current.invalidate();
break;
}

// case 'bridge::courier/profile->update': {
Expand Down
Loading