From 892ef52fc5cc77efec85f4fbba040e321e652cc1 Mon Sep 17 00:00:00 2001
From: Jack Taylor <44332148+jackTabsCode@users.noreply.github.com>
Date: Wed, 25 Oct 2023 00:34:49 -0700
Subject: [PATCH 1/2] Implement virtualized list

Not done yet. Still need to figure out how to style it..?
---
 package-lock.json           |  30 +++++++--
 package.json                |   3 +-
 src/app/actionSelection.tsx | 119 ++++++++++++++++++------------------
 src/app/index.tsx           |  35 ++++++-----
 4 files changed, 107 insertions(+), 80 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f801eac..748e4fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,20 @@
 {
 	"name": "reflex-devtools",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "reflex-devtools",
-			"version": "1.0.1",
+			"version": "1.0.2",
 			"license": "MIT",
 			"dependencies": {
 				"@rbxts/highlighter": "^0.8.2-ts.1",
 				"@rbxts/inspect": "^1.0.1",
 				"@rbxts/object-utils": "^1.0.4",
 				"@rbxts/pretty-react-hooks": "^0.2.1",
-				"@rbxts/t": "^3.1.0"
+				"@rbxts/t": "^3.1.0",
+				"@rbxts/virtualized-list": "^1.3.2"
 			},
 			"devDependencies": {
 				"@rbxts/compiler-types": "^2.1.1-types.0",
@@ -198,8 +199,7 @@
 		"node_modules/@rbxts/flipper": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/@rbxts/flipper/-/flipper-2.0.1.tgz",
-			"integrity": "sha512-kxb5AZizP05XSmo3waS/QkcfNMD5b6HX4gGwyHOyBow260R5MIT4L/ZUPLvleXXyb9b67X4NVmHoac1tPXOLNA==",
-			"peer": true
+			"integrity": "sha512-kxb5AZizP05XSmo3waS/QkcfNMD5b6HX4gGwyHOyBow260R5MIT4L/ZUPLvleXXyb9b67X4NVmHoac1tPXOLNA=="
 		},
 		"node_modules/@rbxts/highlighter": {
 			"version": "0.8.2-ts.1",
@@ -361,6 +361,26 @@
 			"integrity": "sha512-AgEJ2VR97orMr7y/ieIvd6G7OBE1rjP46w1fboal7ARLny2Ddg6StBdnwIG2p8BxTsH5WTtC/xGERQGy3Fe49g==",
 			"dev": true
 		},
+		"node_modules/@rbxts/virtualized-list": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/@rbxts/virtualized-list/-/virtualized-list-1.3.2.tgz",
+			"integrity": "sha512-6yE5UDagRgy0AckfeXB7a6ePFWNSvEILz+YtXY3SZ5wBpJHyjSS5fC3TIGVvd9IzI+cwidePAOdjJXp7hLFVXQ==",
+			"dependencies": {
+				"@rbxts/flipper": "^2.0.1",
+				"@rbxts/luau-polyfill-internal": "^1.2.3-ts.0",
+				"@rbxts/roact": "npm:@rbxts/react-ts@^1.0.1"
+			}
+		},
+		"node_modules/@rbxts/virtualized-list/node_modules/@rbxts/roact": {
+			"name": "@rbxts/react-ts",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@rbxts/react-ts/-/react-ts-1.0.1.tgz",
+			"integrity": "sha512-u/QsFkjWwEbr502xRfCNGjtMfOjqRiVGF5gb3Ox9Z94ymHPXniVsopmT582QpTZLuEcfB5TKvsvpFzFSQ14edg==",
+			"dependencies": {
+				"@rbxts/react-internal": "^0.2.2",
+				"@rbxts/roact-compat-internal": "^0.3.1"
+			}
+		},
 		"node_modules/@roblox-ts/luau-ast": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@roblox-ts/luau-ast/-/luau-ast-1.0.8.tgz",
diff --git a/package.json b/package.json
index 16d7144..7648f4c 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"@rbxts/inspect": "^1.0.1",
 		"@rbxts/object-utils": "^1.0.4",
 		"@rbxts/pretty-react-hooks": "^0.2.1",
-		"@rbxts/t": "^3.1.0"
+		"@rbxts/t": "^3.1.0",
+		"@rbxts/virtualized-list": "^1.3.2"
 	}
 }
diff --git a/src/app/actionSelection.tsx b/src/app/actionSelection.tsx
index f5bd311..0901ce9 100644
--- a/src/app/actionSelection.tsx
+++ b/src/app/actionSelection.tsx
@@ -1,9 +1,10 @@
 import inspect from "@rbxts/inspect"
-import Roact, { memo, useMemo } from "@rbxts/roact"
+import Roact, { useMemo } from "@rbxts/roact"
+import { View } from "@rbxts/virtualized-list"
 import { useRootProducer } from "store"
 import { Action } from "store/game"
 
-export const ActionSelection = memo((props: { action: Action; index: number; selected: boolean }) => {
+export const ActionSelection = (props: { action: Action; index: number; selected: boolean }) => {
 	const store = useRootProducer()
 
 	const inspectedArgs = useMemo(() => inspect(props.action.args), [props.action])
@@ -24,69 +25,71 @@ export const ActionSelection = memo((props: { action: Action; index: number; sel
 	)
 
 	return (
-		<textbutton
-			AutomaticSize={Enum.AutomaticSize.Y}
-			BackgroundColor3={backgroundColor}
-			BorderColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.DialogButtonBorder)}
-			Event={{
-				Activated: () => {
-					if (!props.selected) {
-						store.selectedAction(props.index, true)
-					} else store.deselectedAction()
-				}
-			}}
-			LayoutOrder={0 - props.index}
-			RichText
-			Size={UDim2.fromScale(1, 0)}
-			Text=""
-		>
-			<textlabel
-				AutomaticSize={Enum.AutomaticSize.XY}
-				BackgroundTransparency={1}
-				Font={Enum.Font.SourceSansSemibold}
-				LayoutOrder={0}
-				Text={props.action.name}
-				TextColor3={textColor}
-				TextSize={16}
-				TextWrapped
-				TextXAlignment={Enum.TextXAlignment.Left}
-				key="name"
-			/>
-			{!props.action.args.isEmpty() && (
+		<View>
+			<textbutton
+				AutomaticSize={Enum.AutomaticSize.Y}
+				BackgroundColor3={backgroundColor}
+				BorderColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.DialogButtonBorder)}
+				Event={{
+					Activated: () => {
+						if (!props.selected) {
+							store.selectedAction(props.index, true)
+						} else store.deselectedAction()
+					}
+				}}
+				LayoutOrder={0 - props.index}
+				RichText
+				Size={UDim2.fromScale(1, 0)}
+				Text=""
+			>
 				<textlabel
 					AutomaticSize={Enum.AutomaticSize.XY}
 					BackgroundTransparency={1}
-					Font={Enum.Font.RobotoMono}
-					LayoutOrder={1}
-					Text={inspectedArgs}
+					Font={Enum.Font.SourceSansSemibold}
+					LayoutOrder={0}
+					Text={props.action.name}
 					TextColor3={textColor}
 					TextSize={16}
 					TextWrapped
 					TextXAlignment={Enum.TextXAlignment.Left}
-					key="args"
+					key="name"
+				/>
+				{!props.action.args.isEmpty() && (
+					<textlabel
+						AutomaticSize={Enum.AutomaticSize.XY}
+						BackgroundTransparency={1}
+						Font={Enum.Font.RobotoMono}
+						LayoutOrder={1}
+						Text={inspectedArgs}
+						TextColor3={textColor}
+						TextSize={16}
+						TextWrapped
+						TextXAlignment={Enum.TextXAlignment.Left}
+						key="args"
+					/>
+				)}
+				<textlabel
+					AutomaticSize={Enum.AutomaticSize.XY}
+					BackgroundTransparency={1}
+					Font={Enum.Font.RobotoMono}
+					LayoutOrder={2}
+					Text={`${formattedTimestamp} • #${props.index + 1}`}
+					TextColor3={subTextColor}
+					TextSize={15}
+					TextWrapped
+					TextXAlignment={Enum.TextXAlignment.Left}
+					key="index"
 				/>
-			)}
-			<textlabel
-				AutomaticSize={Enum.AutomaticSize.XY}
-				BackgroundTransparency={1}
-				Font={Enum.Font.RobotoMono}
-				LayoutOrder={2}
-				Text={`${formattedTimestamp} • #${props.index}`}
-				TextColor3={subTextColor}
-				TextSize={15}
-				TextWrapped
-				TextXAlignment={Enum.TextXAlignment.Left}
-				key="index"
-			/>
 
-			<uilistlayout Padding={new UDim(0, 2)} SortOrder={Enum.SortOrder.LayoutOrder} key="layout" />
-			<uipadding
-				PaddingBottom={new UDim(0, 8)}
-				PaddingLeft={new UDim(0, 8)}
-				PaddingRight={new UDim(0, 8)}
-				PaddingTop={new UDim(0, 8)}
-				key="padding"
-			/>
-		</textbutton>
+				<uilistlayout Padding={new UDim(0, 2)} SortOrder={Enum.SortOrder.LayoutOrder} key="layout" />
+				<uipadding
+					PaddingBottom={new UDim(0, 8)}
+					PaddingLeft={new UDim(0, 8)}
+					PaddingRight={new UDim(0, 8)}
+					PaddingTop={new UDim(0, 8)}
+					key="padding"
+				/>
+			</textbutton>
+		</View>
 	)
-})
+}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index e5135ce..b0f0a0e 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,5 +1,6 @@
 import Highlighter from "@rbxts/highlighter"
-import Roact, { useEffect, useMemo } from "@rbxts/roact"
+import Roact, { useEffect } from "@rbxts/roact"
+import { FlatList } from "@rbxts/virtualized-list"
 import { useRootProducer, useRootSelector } from "store"
 import { ActionSelection } from "./actionSelection"
 import { ActionState } from "./actionState"
@@ -17,33 +18,35 @@ export function App() {
 	const selectedAction = selected !== undefined ? actions[selected.index] : undefined
 
 	useEffect(() => {
-		const last = actions.size() - 1
+		const size = actions.size()
+		if (size === 0) return
+
+		const last = size - 1
 		if ((selected && !selected.manual && selected.index !== last) || !selected) {
 			store.selectedAction(last, false)
 		}
 	}, [selected, actions])
 
-	const actionSelections = useMemo(() => {
-		return actions.map((action, index) => (
-			<ActionSelection action={action} index={index} key={index} selected={index === selected?.index} />
-		))
-	}, [actions, selected])
-
 	return (
 		<frame BackgroundTransparency={1} Size={UDim2.fromScale(1, 1)} key="main">
-			<scrollingframe
-				AutomaticCanvasSize={Enum.AutomaticSize.Y}
+			<frame
 				BackgroundTransparency={1}
 				BorderColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.Border)}
-				CanvasSize={new UDim2()}
-				ScrollBarImageColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.ScrollBar)}
-				ScrollBarThickness={6}
 				Size={UDim2.fromScale(ACTIONS_WIDTH, 1)}
 				key="actions"
 			>
-				{actionSelections}
-				<uilistlayout Padding={new UDim(0, 5)} SortOrder={Enum.SortOrder.LayoutOrder} key="layout" />
-			</scrollingframe>
+				<FlatList
+					data={actions}
+					renderItem={entry => (
+						<ActionSelection
+							action={entry.item}
+							index={entry.index - 1}
+							key={entry.index}
+							selected={entry.index - 1 === selected?.index}
+						/>
+					)}
+				/>
+			</frame>
 			<frame
 				BackgroundTransparency={1}
 				Position={UDim2.fromScale(ACTIONS_WIDTH, 0)}

From 831c13378b5b996efbf6920b9e3217eeb0fe8db8 Mon Sep 17 00:00:00 2001
From: Jack Taylor <44332148+jackTabsCode@users.noreply.github.com>
Date: Wed, 25 Oct 2023 11:12:44 -0700
Subject: [PATCH 2/2] Return styling to the list Still facing scrolling woes

---
 .vscode/settings.json       |  10 ++-
 src/app/actionSelection.tsx | 120 ++++++++++++++++++------------------
 src/app/actionState.tsx     |   6 +-
 src/app/index.tsx           |  13 +++-
 4 files changed, 84 insertions(+), 65 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index eb58a8b..5be97da 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,13 @@
 		"source.fixAll": true
 	},
 	"emmet.showAbbreviationSuggestions": false,
-	"emmet.excludeLanguages": ["markdown", "typescriptreact"]
+	"emmet.excludeLanguages": ["markdown", "typescriptreact"],
+	"emeraldwalk.runonsave": {
+		"commands": [
+			{
+				"match": ".*",
+				"cmd": "rbxtsc --verbose && rojo build -o \"C:\\Users\\jackc\\AppData\\Local\\Roblox\\Plugins\\ReflexDevTools.rbxm\""
+			}
+		]
+	}
 }
diff --git a/src/app/actionSelection.tsx b/src/app/actionSelection.tsx
index 0901ce9..c344516 100644
--- a/src/app/actionSelection.tsx
+++ b/src/app/actionSelection.tsx
@@ -1,10 +1,9 @@
 import inspect from "@rbxts/inspect"
-import Roact, { useMemo } from "@rbxts/roact"
-import { View } from "@rbxts/virtualized-list"
+import Roact, { memo, useMemo } from "@rbxts/roact"
 import { useRootProducer } from "store"
 import { Action } from "store/game"
 
-export const ActionSelection = (props: { action: Action; index: number; selected: boolean }) => {
+function ActionSelection(props: { action: Action; index: number; selected: boolean }) {
 	const store = useRootProducer()
 
 	const inspectedArgs = useMemo(() => inspect(props.action.args), [props.action])
@@ -24,72 +23,73 @@ export const ActionSelection = (props: { action: Action; index: number; selected
 		Enum.StudioStyleGuideColor[props.selected ? "DialogMainButtonText" : "SubText"]
 	)
 
+	print(props.index, "rendered")
+
 	return (
-		<View>
-			<textbutton
-				AutomaticSize={Enum.AutomaticSize.Y}
-				BackgroundColor3={backgroundColor}
-				BorderColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.DialogButtonBorder)}
-				Event={{
-					Activated: () => {
-						if (!props.selected) {
-							store.selectedAction(props.index, true)
-						} else store.deselectedAction()
-					}
-				}}
-				LayoutOrder={0 - props.index}
-				RichText
-				Size={UDim2.fromScale(1, 0)}
-				Text=""
-			>
+		<textbutton
+			AutomaticSize={Enum.AutomaticSize.Y}
+			BackgroundColor3={backgroundColor}
+			BorderColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.DialogButtonBorder)}
+			Event={{
+				Activated: () => {
+					if (!props.selected) {
+						store.selectedAction(props.index, true)
+					} else store.deselectedAction()
+				}
+			}}
+			RichText
+			Size={UDim2.fromScale(1, 0)}
+			Text=""
+		>
+			<textlabel
+				AutomaticSize={Enum.AutomaticSize.XY}
+				BackgroundTransparency={1}
+				Font={Enum.Font.SourceSansSemibold}
+				LayoutOrder={0}
+				Text={props.action.name}
+				TextColor3={textColor}
+				TextSize={16}
+				TextWrapped
+				TextXAlignment={Enum.TextXAlignment.Left}
+				key="name"
+			/>
+			{!props.action.args.isEmpty() && (
 				<textlabel
 					AutomaticSize={Enum.AutomaticSize.XY}
 					BackgroundTransparency={1}
-					Font={Enum.Font.SourceSansSemibold}
-					LayoutOrder={0}
-					Text={props.action.name}
+					Font={Enum.Font.RobotoMono}
+					LayoutOrder={1}
+					Text={inspectedArgs}
 					TextColor3={textColor}
 					TextSize={16}
 					TextWrapped
 					TextXAlignment={Enum.TextXAlignment.Left}
-					key="name"
-				/>
-				{!props.action.args.isEmpty() && (
-					<textlabel
-						AutomaticSize={Enum.AutomaticSize.XY}
-						BackgroundTransparency={1}
-						Font={Enum.Font.RobotoMono}
-						LayoutOrder={1}
-						Text={inspectedArgs}
-						TextColor3={textColor}
-						TextSize={16}
-						TextWrapped
-						TextXAlignment={Enum.TextXAlignment.Left}
-						key="args"
-					/>
-				)}
-				<textlabel
-					AutomaticSize={Enum.AutomaticSize.XY}
-					BackgroundTransparency={1}
-					Font={Enum.Font.RobotoMono}
-					LayoutOrder={2}
-					Text={`${formattedTimestamp} • #${props.index + 1}`}
-					TextColor3={subTextColor}
-					TextSize={15}
-					TextWrapped
-					TextXAlignment={Enum.TextXAlignment.Left}
-					key="index"
+					key="args"
 				/>
+			)}
+			<textlabel
+				AutomaticSize={Enum.AutomaticSize.XY}
+				BackgroundTransparency={1}
+				Font={Enum.Font.RobotoMono}
+				LayoutOrder={2}
+				Text={`${formattedTimestamp} • #${props.index + 1}`}
+				TextColor3={subTextColor}
+				TextSize={15}
+				TextWrapped
+				TextXAlignment={Enum.TextXAlignment.Left}
+				key="index"
+			/>
 
-				<uilistlayout Padding={new UDim(0, 2)} SortOrder={Enum.SortOrder.LayoutOrder} key="layout" />
-				<uipadding
-					PaddingBottom={new UDim(0, 8)}
-					PaddingLeft={new UDim(0, 8)}
-					PaddingRight={new UDim(0, 8)}
-					PaddingTop={new UDim(0, 8)}
-					key="padding"
-				/>
-			</textbutton>
-		</View>
+			<uilistlayout Padding={new UDim(0, 2)} SortOrder={Enum.SortOrder.LayoutOrder} key="layout" />
+			<uipadding
+				PaddingBottom={new UDim(0, 8)}
+				PaddingLeft={new UDim(0, 8)}
+				PaddingRight={new UDim(0, 8)}
+				PaddingTop={new UDim(0, 8)}
+				key="padding"
+			/>
+		</textbutton>
 	)
 }
+
+export = memo(ActionSelection)
diff --git a/src/app/actionState.tsx b/src/app/actionState.tsx
index 0a6d561..e0e8151 100644
--- a/src/app/actionState.tsx
+++ b/src/app/actionState.tsx
@@ -1,8 +1,8 @@
 import Highlighter from "@rbxts/highlighter"
 import inspect from "@rbxts/inspect"
-import Roact, { useBinding, useEffect, useRef } from "@rbxts/roact"
+import Roact, { memo, useBinding, useEffect, useRef } from "@rbxts/roact"
 
-export function ActionState(props: { state: {} }) {
+function ActionState(props: { state: {} }) {
 	const label = useRef<TextLabel>()
 
 	useEffect(() => {
@@ -44,3 +44,5 @@ export function ActionState(props: { state: {} }) {
 		</scrollingframe>
 	)
 }
+
+export = memo(ActionState)
diff --git a/src/app/index.tsx b/src/app/index.tsx
index b0f0a0e..7eb435a 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -2,8 +2,8 @@ import Highlighter from "@rbxts/highlighter"
 import Roact, { useEffect } from "@rbxts/roact"
 import { FlatList } from "@rbxts/virtualized-list"
 import { useRootProducer, useRootSelector } from "store"
-import { ActionSelection } from "./actionSelection"
-import { ActionState } from "./actionState"
+import ActionSelection from "./actionSelection"
+import ActionState from "./actionState"
 
 Highlighter.matchStudioSettings()
 
@@ -36,6 +36,9 @@ export function App() {
 				key="actions"
 			>
 				<FlatList
+					contentContainerStyle={{
+						BackgroundTransparency: 1
+					}}
 					data={actions}
 					renderItem={entry => (
 						<ActionSelection
@@ -45,6 +48,12 @@ export function App() {
 							selected={entry.index - 1 === selected?.index}
 						/>
 					)}
+					style={{
+						BackgroundTransparency: 1,
+						ScrollBarImageColor3: settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.ScrollBar),
+						ScrollBarThickness: 6,
+						BorderSizePixel: 0
+					}}
 				/>
 			</frame>
 			<frame