fix: display Map entries in the scope inspector

e2e-tests/tools.test.ts

@@ -31,3 +31,23 @@ test("should switch to each tool and show it", async ({ page }) => {
 	await page.getByRole("button", { name: "Code Path" }).click();
 	await expect(page.getByTestId("rf__background")).toBeVisible();
 });
+
+test("should display variables in the scope set", async ({ page }) => {
+	await page.goto("/");
+	await page
+		.getByRole("textbox", { name: "Code Editor", exact: true })
+		.fill("const __x = 1;");
+	await page.getByRole("button", { name: "Scope", exact: true }).click();
+	await page.getByRole("button", { name: "2. module", exact: true }).click();
+
+	const moduleScope = page.getByRole("region", { name: "2. module" });
+	const setEntry = moduleScope
+		.getByRole("listitem")
+		.filter({ hasText: /^setMap\(1\)$/ });
+	await expect(setEntry).toBeVisible();
+	await setEntry.getByRole("button", { name: "set", exact: true }).click();
+	await moduleScope.getByRole("button", { name: "__x", exact: true }).click();
+	await expect(
+		moduleScope.getByRole("listitem").filter({ hasText: /^name__x$/ }),
+	).toBeVisible();
+});

src/components/scope/scope-item.tsx

@@ -12,7 +12,7 @@ type ScopeItemProperties = {
 	isArray: boolean;
 	readonly index: number;
 	readonly path: string;
-	readonly data: Scope | Variable | Reference | null;
+	readonly data: Scope | Variable | Reference | Map<string, unknown> | null;
 	readonly esqueryMatchedNodes: unknown[];
 };
 
@@ -35,16 +35,19 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 		key = data.name;
 	} else if (data instanceof Reference) {
 		key = data.identifier.name;
+	} else if (data instanceof Map) {
+		key = "Map";
 	} else {
 		key = (data as Record<string, string>)?.type ?? typeof data;
 	}
 
 	const isEsqueryMatchedNode = esqueryMatchedNodes.includes(data);
 
 	// filter out hidden properties
-	const properties = Object.entries(data).filter(
-		([name]) => !name.startsWith("__"),
-	);
+	const properties =
+		data instanceof Map
+			? [...data.entries()]
+			: Object.entries(data).filter(([name]) => !name.startsWith("__"));
 
 	if (isArray) {
 		return (

src/components/tree-entry.tsx

@@ -101,8 +101,11 @@ export const TreeEntry: FC<TreeEntryProperties> = ({
 	const [open, setOpen] = useState(false);
 	const Icon = open ? MinusSquareIcon : PlusSquareIcon;
 	const isToggleable =
-		(typeof value === "object" && Object.values(value ?? {}).length) ||
-		(Array.isArray(value) && value.length);
+		value instanceof Map
+			? value.size
+			: (typeof value === "object" &&
+					Object.values(value ?? {}).length) ||
+				(Array.isArray(value) && value.length);
 
 	const toggleOpen = () => setOpen(!open);
 

src/lib/render-value.ts

@@ -10,6 +10,17 @@ export const renderValue = (value: unknown): string[] => {
 		];
 	}
 
+	if (value instanceof Map) {
+		return [
+			"Map",
+			value.size
+				? value.size === 1
+					? `{${value.size} entry}`
+					: `{${value.size} entries}`
+				: "{}",
+		];
+	}
+
 	if (value instanceof Object && Object.keys(value).length === 0) {
 		return ["Object", "{}"];
 	}