From 35df7e3482325bf0487b00065fa37fa452487248 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Tue, 3 Sep 2024 21:12:25 +0530
Subject: [PATCH 01/10] chore: fix index changes

---
 src/components/scope/scope-item.tsx | 4 ++++
 src/components/tree-entry.tsx       | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index f0e22bc..a04845c 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -20,10 +20,14 @@ export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
 
 	let key = "unknown";
 
+	console.log(data);
+
 	if (data instanceof Scope) {
 		key = data.type;
 	} else if (data instanceof Variable) {
 		key = data.name;
+	} else if (data instanceof Reference) {
+		key = data.identifier.name;
 	}
 
 	return (
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index 4c2ee99..31d9392 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -20,7 +20,7 @@ const isProbablyNode = (value: unknown) => {
 	);
 };
 
-const sanitizeValue = (value: unknown): ReactNode => {
+const sanitizeValue = (value: unknown, index: number): ReactNode => {
 	if (!value) {
 		return null;
 	}
@@ -46,7 +46,7 @@ const sanitizeValue = (value: unknown): ReactNode => {
 	) {
 		return (
 			<div className="mt-3 space-y-3 ml-2">
-				<ScopeItem data={value as Scope} index={0} />
+				<ScopeItem data={value as Scope} index={index ? index : 0} />
 			</div>
 		);
 	}

From 3ec82b8e249de95742007b23e1934970423830ab Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Fri, 6 Sep 2024 10:56:52 +0530
Subject: [PATCH 02/10] fix: render indices only when the element is array

---
 package.json                        |  1 -
 src/components/scope/index.tsx      |  7 ++++++-
 src/components/scope/scope-item.tsx | 11 +++++++----
 src/components/tree-entry.tsx       | 29 +++++++++++++++++++++++++----
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 0fe5b01..2cb0db9 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,6 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^4.9.5",
     "typescript-eslint": "^8.1.0",
     "use-debounced-effect": "^2.0.1",
     "vaul": "^0.9.1",
diff --git a/src/components/scope/index.tsx b/src/components/scope/index.tsx
index b2a623d..32914c7 100644
--- a/src/components/scope/index.tsx
+++ b/src/components/scope/index.tsx
@@ -42,6 +42,7 @@ export const Scope: FC = () => {
 				<>
 					{scopeManager.scopes.map((subScope, index) => (
 						<ScopeItem
+							isArray={Array.isArray(scopeManager.scopes)}
 							key={index}
 							data={subScope}
 							index={index + 1}
@@ -49,7 +50,11 @@ export const Scope: FC = () => {
 					))}
 				</>
 			) : (
-				<ScopeItem data={scopeManager.globalScope} index={-1} />
+				<ScopeItem
+					isArray={Array.isArray(scopeManager.globalScope)}
+					data={scopeManager.globalScope}
+					index={-1}
+				/>
 			)}
 		</Accordion>
 	);
diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index a04845c..67fbee0 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -9,19 +9,22 @@ import { TreeEntry } from "../tree-entry";
 import type { FC } from "react";
 
 type ScopeItemProperties = {
+	isArray: boolean;
 	readonly index: number;
 	readonly data: Scope | Variable | Reference | null;
 };
 
-export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
+export const ScopeItem: FC<ScopeItemProperties> = ({
+	data,
+	index,
+	isArray,
+}) => {
 	if (!data) {
 		return null;
 	}
 
 	let key = "unknown";
 
-	console.log(data);
-
 	if (data instanceof Scope) {
 		key = data.type;
 	} else if (data instanceof Variable) {
@@ -36,7 +39,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
 			className="border rounded-lg overflow-hidden"
 		>
 			<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3">
-				{Math.max(index, 0)}. {capitalize(key)}
+				{isArray ? `${Math.max(index, 0)}.` : null} {capitalize(key)}
 			</AccordionTrigger>
 			<AccordionContent className="p-4 border-t">
 				<div className="space-y-1">
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index 31d9392..35bc52a 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -20,14 +20,29 @@ const isProbablyNode = (value: unknown) => {
 	);
 };
 
-const sanitizeValue = (value: unknown, index: number): ReactNode => {
+const SanitizeValue = ({
+	value,
+	isArray,
+	index,
+}: {
+	value: unknown;
+	isArray: boolean;
+	index: number;
+}): ReactNode => {
 	if (!value) {
 		return null;
 	}
 
 	if (Array.isArray(value)) {
 		if (typeof value[0] === "object") {
-			return value.map(sanitizeValue);
+			return value.map((item, index) => (
+				<SanitizeValue
+					key={index}
+					value={item}
+					index={index}
+					isArray={Array.isArray(value)}
+				/>
+			));
 		}
 
 		return (
@@ -46,7 +61,11 @@ const sanitizeValue = (value: unknown, index: number): ReactNode => {
 	) {
 		return (
 			<div className="mt-3 space-y-3 ml-2">
-				<ScopeItem data={value as Scope} index={index ? index : 0} />
+				<ScopeItem
+					isArray={isArray}
+					data={value as Scope}
+					index={index ? index : 0}
+				/>
 			</div>
 		);
 	}
@@ -91,7 +110,9 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
 					</span>
 				))}
 			</div>
-			{open ? sanitizeValue(value) : null}
+			{open ? (
+				<SanitizeValue value={value} isArray={Array.isArray(value)} />
+			) : null}
 		</>
 	);
 };

From 16c50ae0ca75aeabe1a03601ebfd45befb70eab7 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Wed, 11 Sep 2024 10:08:07 +0530
Subject: [PATCH 03/10] fix: review comments

---
 src/components/editor.tsx           | 1 -
 src/components/scope/scope-item.tsx | 2 +-
 src/components/tree-entry.tsx       | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/editor.tsx b/src/components/editor.tsx
index 742c63a..dc555a4 100644
--- a/src/components/editor.tsx
+++ b/src/components/editor.tsx
@@ -10,7 +10,6 @@ import { markdown } from "@codemirror/lang-markdown";
 import { EditorView } from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import clsx from "clsx";
-import { LanguageSupport } from "@codemirror/language";
 import { debounce } from "../lib/utils";
 import { LanguageSupport } from "@codemirror/language";
 
diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index f172b54..d4eb317 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -38,7 +38,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 			className="border rounded-lg overflow-hidden"
 		>
 			<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
-				{isArray ? `${Math.max(index, 0)}.` : null} {key}
+				{isArray && `${Math.max(index, 0)}.`} {key}
 			</AccordionTrigger>
 			<AccordionContent className="p-4 border-t">
 				<div className="space-y-1">
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index bdc4f3a..c145d91 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -64,7 +64,7 @@ const SanitizeValue = ({
 				<ScopeItem
 					isArray={isArray}
 					data={value as Scope}
-					index={index ? index : 0}
+					index={index}
 				/>
 			</div>
 		);

From e0f273176a838d89b3d7eff44358cf90a27b926c Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Mon, 16 Sep 2024 23:18:45 +0530
Subject: [PATCH 04/10] fix: update the title

---
 src/components/scope/scope-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index d4eb317..9ebf695 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -22,7 +22,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 		return null;
 	}
 
-	let key = "unknown";
+	let key: string = typeof data;
 
 	if (data instanceof Scope) {
 		key = data.type;

From 4476b967a5a1301a209a40cff2998b37e0ee3425 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Mon, 16 Sep 2024 23:29:07 +0530
Subject: [PATCH 05/10] fix: more bugs

---
 src/components/scope/scope-item.tsx | 16 ++++++++++++++++
 src/components/tree-entry.tsx       |  6 +++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index 9ebf695..359213c 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -32,6 +32,22 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 		key = data.identifier.name;
 	}
 
+	if (typeof data === "object" && Object.entries(data).length === 0) {
+		return (
+			<AccordionItem
+				value={key + index}
+				className="border rounded-lg overflow-hidden"
+			>
+				<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
+					{key}
+				</AccordionTrigger>
+				<AccordionContent className="p-4 border-t">
+					<div className="text-muted-foreground">empty value</div>
+				</AccordionContent>
+			</AccordionItem>
+		);
+	}
+
 	return (
 		<AccordionItem
 			value={`${index}-${key}`}
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index c145d91..2755833 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -71,9 +71,9 @@ const SanitizeValue = ({
 	}
 
 	return (
-		<pre className="ml-8 max-h-44 bg-card border overflow-auto rounded-lg p-3">
-			{JSON.stringify(value, null, 2)}
-		</pre>
+		<div className="ml-8">
+			<ScopeItem isArray={isArray} data={value as Scope} index={index} />
+		</div>
 	);
 };
 

From 29e42f4b84570fb9de573051d3273818ba20efc7 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Mon, 16 Sep 2024 23:45:11 +0530
Subject: [PATCH 06/10] fix: add unique paths for accordions

---
 src/components/scope/index.tsx      |  2 ++
 src/components/scope/scope-item.tsx | 14 ++++++++++----
 src/components/tree-entry.tsx       | 15 +++++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/scope/index.tsx b/src/components/scope/index.tsx
index 6e764d2..2a4273a 100644
--- a/src/components/scope/index.tsx
+++ b/src/components/scope/index.tsx
@@ -48,6 +48,7 @@ export const Scope: FC = () => {
 							isArray={Array.isArray(scopeManager.scopes)}
 							key={index}
 							data={subScope}
+							path={index.toString()}
 							index={index + 1}
 						/>
 					))}
@@ -56,6 +57,7 @@ export const Scope: FC = () => {
 				<ScopeItem
 					isArray={Array.isArray(scopeManager.globalScope)}
 					data={scopeManager.globalScope}
+					path={"-1"}
 					index={-1}
 				/>
 			)}
diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index 359213c..4a237a5 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -10,12 +10,14 @@ import type { FC } from "react";
 type ScopeItemProperties = {
 	isArray: boolean;
 	readonly index: number;
+	readonly path: string;
 	readonly data: Scope | Variable | Reference | null;
 };
 
 export const ScopeItem: FC<ScopeItemProperties> = ({
 	data,
 	index,
+	path,
 	isArray,
 }) => {
 	if (!data) {
@@ -35,7 +37,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 	if (typeof data === "object" && Object.entries(data).length === 0) {
 		return (
 			<AccordionItem
-				value={key + index}
+				value={path + "." + index}
 				className="border rounded-lg overflow-hidden"
 			>
 				<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
@@ -50,7 +52,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 
 	return (
 		<AccordionItem
-			value={`${index}-${key}`}
+			value={path + "." + index + "." + key}
 			className="border rounded-lg overflow-hidden"
 		>
 			<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
@@ -58,8 +60,12 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 			</AccordionTrigger>
 			<AccordionContent className="p-4 border-t">
 				<div className="space-y-1">
-					{Object.entries(data).map(item => (
-						<TreeEntry key={item[0]} data={item} />
+					{Object.entries(data).map((item, index) => (
+						<TreeEntry
+							key={item[0]}
+							data={item}
+							path={path + "." + index}
+						/>
 					))}
 				</div>
 			</AccordionContent>
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index 2755833..f8af022 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -7,6 +7,7 @@ import type { FC, ReactNode } from "react";
 
 type TreeEntryProperties = {
 	readonly data: [string, unknown];
+	readonly path: string;
 };
 
 const isProbablyNode = (value: unknown) => {
@@ -22,11 +23,13 @@ const isProbablyNode = (value: unknown) => {
 
 const SanitizeValue = ({
 	value,
+	path,
 	isArray,
 	index,
 }: {
 	value: unknown;
 	isArray: boolean;
+	path: string;
 	index: number;
 }): ReactNode => {
 	if (!value) {
@@ -38,6 +41,7 @@ const SanitizeValue = ({
 			return value.map((item, index) => (
 				<SanitizeValue
 					key={index}
+					path={path + "." + index}
 					value={item}
 					index={index}
 					isArray={Array.isArray(value)}
@@ -62,6 +66,7 @@ const SanitizeValue = ({
 		return (
 			<div className="mt-3 space-y-3 ml-2">
 				<ScopeItem
+					path={path + "." + index}
 					isArray={isArray}
 					data={value as Scope}
 					index={index}
@@ -72,12 +77,17 @@ const SanitizeValue = ({
 
 	return (
 		<div className="ml-8">
-			<ScopeItem isArray={isArray} data={value as Scope} index={index} />
+			<ScopeItem
+				path={path + "." + index}
+				isArray={isArray}
+				data={value as Scope}
+				index={index}
+			/>
 		</div>
 	);
 };
 
-export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
+export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 	const [key, value] = data;
 	const [open, setOpen] = useState(false);
 	const Icon = open ? MinusSquareIcon : PlusSquareIcon;
@@ -112,6 +122,7 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
 			</div>
 			{open ? (
 				<SanitizeValue
+					path={path}
 					value={value}
 					isArray={Array.isArray(value)}
 					index={0}

From b3b84e423e5e78da2113fa0839d85d53b8693a53 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Wed, 18 Sep 2024 13:05:36 +0530
Subject: [PATCH 07/10] fix: types

---
 src/components/scope/scope-item.tsx | 4 +++-
 src/components/tree-entry.tsx       | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index 4a237a5..496b316 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -24,7 +24,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 		return null;
 	}
 
-	let key: string = typeof data;
+	let key;
 
 	if (data instanceof Scope) {
 		key = data.type;
@@ -32,6 +32,8 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 		key = data.name;
 	} else if (data instanceof Reference) {
 		key = data.identifier.name;
+	} else {
+		key = (data as Record<string, string>)?.type ?? typeof data;
 	}
 
 	if (typeof data === "object" && Object.entries(data).length === 0) {
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index f8af022..6edc84e 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -7,7 +7,7 @@ import type { FC, ReactNode } from "react";
 
 type TreeEntryProperties = {
 	readonly data: [string, unknown];
-	readonly path: string;
+	readonly path?: string;
 };
 
 const isProbablyNode = (value: unknown) => {
@@ -29,7 +29,7 @@ const SanitizeValue = ({
 }: {
 	value: unknown;
 	isArray: boolean;
-	path: string;
+	path?: string;
 	index: number;
 }): ReactNode => {
 	if (!value) {

From fc5a0641c099462291d75fe4238168e4d64f23c4 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Wed, 18 Sep 2024 23:20:10 +0530
Subject: [PATCH 08/10] fix: bugs

---
 src/lib/render-value.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/render-value.ts b/src/lib/render-value.ts
index 5c2b584..7056e9c 100644
--- a/src/lib/render-value.ts
+++ b/src/lib/render-value.ts
@@ -6,7 +6,7 @@ export const renderValue = (value: unknown): string[] => {
 	if (typeof value === "object" && value !== null) {
 		const keys = Object.keys(value);
 		return [
-			value.constructor.name,
+			(value as { type: string })?.type,
 			keys.length > 3
 				? `{${keys.slice(0, 3).join(", ")}, ...}`
 				: `{${keys.join(", ")}}`,

From 524ce780e5ee5a62c7e42c51a0ece5da894252f5 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Fri, 20 Sep 2024 00:28:30 +0530
Subject: [PATCH 09/10] chore: address review comments

---
 src/components/tree-entry.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index 6edc84e..d2f3c83 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -64,7 +64,7 @@ const SanitizeValue = ({
 		isProbablyNode(value)
 	) {
 		return (
-			<div className="mt-3 space-y-3 ml-2">
+			<div className="mt-3 space-y-3 ml-6">
 				<ScopeItem
 					path={path + "." + index}
 					isArray={isArray}
@@ -97,7 +97,9 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 	return (
 		<>
 			<div className="flex items-center gap-3">
-				{typeof value === "object" || Array.isArray(value) ? (
+				{(typeof value === "object" &&
+					Object.values(value ?? {}).length) ||
+				(Array.isArray(value) && value.length) ? (
 					<button
 						onClick={toggleOpen}
 						aria-label="Toggle"
@@ -108,7 +110,7 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 				) : (
 					<div className="w-4 h-4" />
 				)}
-				<span>{key}</span>
+				{key && <span>{key}</span>}
 				{renderValue(value).map((part, partIndex) => (
 					<span
 						key={partIndex}

From 99c44d99ae94eeb8f1049b383af0bc29d1490c8c Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Sat, 21 Sep 2024 09:50:20 +0530
Subject: [PATCH 10/10] chore: remove unwanted conditional

---
 src/components/scope/scope-item.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index 496b316..838291e 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -36,22 +36,6 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 		key = (data as Record<string, string>)?.type ?? typeof data;
 	}
 
-	if (typeof data === "object" && Object.entries(data).length === 0) {
-		return (
-			<AccordionItem
-				value={path + "." + index}
-				className="border rounded-lg overflow-hidden"
-			>
-				<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
-					{key}
-				</AccordionTrigger>
-				<AccordionContent className="p-4 border-t">
-					<div className="text-muted-foreground">empty value</div>
-				</AccordionContent>
-			</AccordionItem>
-		);
-	}
-
 	return (
 		<AccordionItem
 			value={path + "." + index + "." + key}