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/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..c344516 100644
--- a/src/app/actionSelection.tsx
+++ b/src/app/actionSelection.tsx
@@ -3,7 +3,7 @@ import Roact, { memo, useMemo } from "@rbxts/roact"
import { useRootProducer } from "store"
import { Action } from "store/game"
-export const ActionSelection = memo((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])
@@ -23,6 +23,8 @@ export const ActionSelection = memo((props: { action: Action; index: number; sel
Enum.StudioStyleGuideColor[props.selected ? "DialogMainButtonText" : "SubText"]
)
+ print(props.index, "rendered")
+
return (
)
-})
+}
+
+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()
useEffect(() => {
@@ -44,3 +44,5 @@ export function ActionState(props: { state: {} }) {
)
}
+
+export = memo(ActionState)
diff --git a/src/app/index.tsx b/src/app/index.tsx
index e5135ce..7eb435a 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,8 +1,9 @@
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"
+import ActionSelection from "./actionSelection"
+import ActionState from "./actionState"
Highlighter.matchStudioSettings()
@@ -17,33 +18,44 @@ 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) => (
-
- ))
- }, [actions, selected])
-
return (
-
- {actionSelections}
-
-
+ (
+
+ )}
+ style={{
+ BackgroundTransparency: 1,
+ ScrollBarImageColor3: settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.ScrollBar),
+ ScrollBarThickness: 6,
+ BorderSizePixel: 0
+ }}
+ />
+