vscode-debug-visualizer/data-extraction

@hediet/debug-visualizer-data-extraction

A library that helps implementing data extractors for the Debug Visualizer VS Code extension.

Installation

Use the following command to install the library using yarn:

yarn add @hediet/debug-visualizer-data-extraction

Usage

createGraph / createGraphFromPointers Helper

import {
	registerDefaultDataExtractors,
	createGraphFromPointers,
} from "@hediet/debug-visualizer-data-extraction";

registerDefaultDataExtractors();

setTimeout(() => {
	new Main().run();
}, 0);

class Main {
	run() {
		const list = new DoublyLinkedList("1");
		list.setNext(new DoublyLinkedList("2"));
		list.next!.setNext(new DoublyLinkedList("3"));
		list.next!.next!.setNext(new DoublyLinkedList("4"));

		// Watch `visualize()` with the Debug Visualizer Extension for VS Code!
		const visualize = () =>
			// Returns `CommonDataTypes.Graph` data which can be visualized by
			// either the vis.js or the graphviz visualizer.
			createGraphFromPointers({ list, last, cur }, i => ({
				id: i.id,
				label: i.name,
				color: finished.has(i) ? "lime" : undefined,
				edges: [
					{ to: i.next!, label: "next" },
					{ to: i.prev!, label: "prev", color: "lightgray" },
				].filter(r => !!r.to),
			}));

		const finished = new Set();
		var cur: DoublyLinkedList | undefined = list;
		// Reverses `list`. Finished nodes have correct pointers,
		// their next node is also finished.
		var last: DoublyLinkedList | undefined = undefined;
		while (cur) {
			cur.prev = cur.next;
			cur.next = last;
			finished.add(cur);
			last = cur;
			cur = cur.prev;
		}
		console.log("finished");
	}
}

let id = 0;
class DoublyLinkedList {
	public readonly id = (id++).toString();
	constructor(public name: string) {}

	next: DoublyLinkedList | undefined;
	prev: DoublyLinkedList | undefined;

	public setNext(val: DoublyLinkedList): void {
		val.prev = this;
		this.next = val;
	}
}

Registering Custom Data Extractors

import {
	registerDefaultDataExtractors,
	getDataExtractorApi,
} from "@hediet/debug-visualizer-data-extraction";

// The default data extractors are usually also registered by the VS Code extension.
// Registered them manually ensures that they are up to date.
registerDefaultDataExtractors();

getDataExtractorApi().registerExtractor({
	id: "my-foo-extractor",
	getExtractions: (data, collector) => {
		if (data instanceof Foo) {
			collector.addExtraction({
				id: "my-foo-extraction",
				name: "My Foo Extraction",
				priority: 2000,
				extractData: () => ({ kind: { text: true }, text: "Foo" }),
			});
		}
	},
});

setTimeout(() => {
	new Main().run();
}, 0);

class Foo {}

class Main {
	run() {
		const f = new Foo();
		// if `f` is watched by the Debug Visualizer,
		// `my-foo-extractor` will provide the data for the visualizers.
		// See `CommonDataTypes` for data types that have built in visualizers.
		debugger;
	}
}