From aa07721269170bad332760828b5c246a1b7741d8 Mon Sep 17 00:00:00 2001
From: tralwdwd <79791517+tralwdwd@users.noreply.github.com>
Date: Sat, 13 Dec 2025 16:16:53 +0000
Subject: [PATCH] feat(plugins/developer-kit): improve UI for JS eval

Currently the eval is done in a modal which makes it hard to use and means any code written is discarded after pressing evaluate and also it is hard to read output from an alert. This commit improves it by instead having it as a page instead where the code remains after evaluation and outputs the result in a box in the page rather than in an alert.

Eval results are also selectable now, and have display options. And inspecting with zero depth is now possible.

---------

Co-authored-by: PalmDevs <git@palmdevs.me>
---
 src/plugins/start/developer-kit/constants.ts  |   1 +
 .../definitions/EvalJSSetting.tsx             | 140 +----------------
 .../screens/EvalJSSettingScreen.tsx           | 148 ++++++++++++++++++
 3 files changed, 156 insertions(+), 133 deletions(-)
 create mode 100644 src/plugins/start/developer-kit/screens/EvalJSSettingScreen.tsx

diff --git a/src/plugins/start/developer-kit/constants.ts b/src/plugins/start/developer-kit/constants.ts
index a59027c..3c9cac9 100644
--- a/src/plugins/start/developer-kit/constants.ts
+++ b/src/plugins/start/developer-kit/constants.ts
@@ -21,5 +21,6 @@ export const Setting = {
 export const RouteNames = {
     [Setting.RevengeDeveloper]: 'Revenge Developer',
     [Setting.AssetBrowser]: 'Asset Browser',
+    [Setting.EvalJS]: 'Evaluate JavaScript',
     [Setting.TestErrorBoundary]: 'Test ErrorBoundary',
 } as const
diff --git a/src/plugins/start/developer-kit/definitions/EvalJSSetting.tsx b/src/plugins/start/developer-kit/definitions/EvalJSSetting.tsx
index 19e2613..fa46a0f 100644
--- a/src/plugins/start/developer-kit/definitions/EvalJSSetting.tsx
+++ b/src/plugins/start/developer-kit/definitions/EvalJSSetting.tsx
@@ -1,144 +1,18 @@
-import TableRowAssetIcon from '@revenge-mod/components/TableRowAssetIcon'
-import { AlertActionCreators } from '@revenge-mod/discord/actions'
-import { Design } from '@revenge-mod/discord/design'
-import { nodeUtil } from '@revenge-mod/externals/browserify'
-import { getErrorStack } from '@revenge-mod/utils/error'
-import { sleep } from '@revenge-mod/utils/promise'
-import { useRef, useState } from 'react'
-import { api } from '..'
-import { Setting } from '../constants'
+import { TableRowAssetIcon } from '@revenge-mod/components'
+import { RouteNames, Setting } from '../constants'
+import EvalJSSettingScreen from '../screens/EvalJSSettingScreen'
 import type { SettingsItem } from '@revenge-mod/discord/modules/settings'
 
-const AlertKey = 'evaluate-javascript'
-
 const EvalJSSetting: SettingsItem = {
     parent: Setting.RevengeDeveloper,
+    type: 'route',
     IconComponent: () => <TableRowAssetIcon name="FileIcon" />,
     title: () => 'Evaluate JavaScript',
     useDescription: () => 'Runs a JavaScript code snippet.',
-    onPress: () => {
-        AlertActionCreators.openAlert(AlertKey, <EvalJSAlert />)
+    screen: {
+        route: RouteNames[Setting.EvalJS],
+        getComponent: () => EvalJSSettingScreen,
     },
-    type: 'pressable',
-}
-
-const {
-    AlertActionButton,
-    AlertModal,
-    Button,
-    Slider,
-    Stack,
-    TableRow,
-    TableRowGroup,
-    TableSwitchRow,
-    Text,
-    TextArea,
-} = Design
-
-function EvalJSAlert() {
-    const code = useRef('')
-    const [awaitResult, setAwaitResult] = useState(true)
-    const [inspectDepth, setInspectDepth] = useState(3)
-    const [showHidden, setShowHidden] = useState(true)
-
-    return (
-        <AlertModal
-            actions={
-                <>
-                    <Button
-                        onPress={async function onPress() {
-                            const key = `_${Math.random()
-                                .toString(36)
-                                .substring(2, 15)}`
-
-                            try {
-                                if (!api) {
-                                    alert(
-                                        'Unable to provide plugin API. Running snippet in a second...',
-                                    )
-
-                                    await sleep(1000)
-                                }
-                                // @ts-expect-error
-                                else globalThis[key] = api
-
-                                // biome-ignore lint/security/noGlobalEval: Intentional
-                                const res = (0, eval)(
-                                    `var api=${key},{unscoped:revenge}=api;undefined;${code.current}//# sourceURL=Revenge:EvalJS`,
-                                )
-
-                                alert(
-                                    nodeUtil.inspect(
-                                        awaitResult ? await res : res,
-                                        {
-                                            depth: inspectDepth,
-                                            showHidden,
-                                        },
-                                    ),
-                                )
-
-                                // @ts-expect-error
-                                delete globalThis[key]
-                            } catch (e) {
-                                alert(getErrorStack(e))
-                            }
-
-                            AlertActionCreators.dismissAlert(AlertKey)
-                        }}
-                        text="Evaluate"
-                        variant="primary"
-                    />
-                    <AlertActionButton text="Cancel" variant="secondary" />
-                </>
-            }
-            extraContent={
-                <Stack>
-                    <TextArea
-                        autoFocus
-                        label="Code"
-                        onChange={v => {
-                            code.current = v
-                        }}
-                        placeholder="revenge.discord.native.BundleUpdaterManager.reload()"
-                        size="md"
-                    />
-                    <TableRowGroup>
-                        <TableSwitchRow
-                            label="Await result"
-                            onValueChange={setAwaitResult}
-                            subLabel="Wait for the result of the code before displaying it."
-                            value={awaitResult}
-                        />
-                        <TableSwitchRow
-                            label="Show hidden"
-                            onValueChange={setShowHidden}
-                            subLabel="Show hidden properties of the object."
-                            value={showHidden}
-                        />
-                        <TableRow
-                            label="Inspect depth"
-                            subLabel="The depth of the object to inspect."
-                            trailing={
-                                <Text variant="text-sm/normal">
-                                    {inspectDepth}
-                                </Text>
-                            }
-                        />
-                    </TableRowGroup>
-                    <Slider
-                        endIcon={<Text variant="text-sm/normal">10</Text>}
-                        maximumValue={10}
-                        minimumValue={1}
-                        onValueChange={setInspectDepth}
-                        startIcon={<Text variant="text-sm/normal">1</Text>}
-                        step={1}
-                        value={inspectDepth}
-                    />
-                </Stack>
-            }
-            title="Evaluate JavaScript"
-        />
-    )
 }
 
 export default EvalJSSetting
diff --git a/src/plugins/start/developer-kit/screens/EvalJSSettingScreen.tsx b/src/plugins/start/developer-kit/screens/EvalJSSettingScreen.tsx
new file mode 100644
index 0000000..25fbe93
--- /dev/null
+++ b/src/plugins/start/developer-kit/screens/EvalJSSettingScreen.tsx
@@ -0,0 +1,148 @@
+import { Page } from '@revenge-mod/components'
+import { Design } from '@revenge-mod/discord/design'
+import { nodeUtil } from '@revenge-mod/externals/browserify'
+import { getErrorStack } from '@revenge-mod/utils/error'
+import { sleep } from '@revenge-mod/utils/promise'
+import { useRef, useState } from 'react'
+import { ScrollView } from 'react-native'
+import { api } from '..'
+
+const {
+    Button,
+    Card,
+    Slider,
+    Stack,
+    TableRow,
+    TableRowGroup,
+    TableSwitchRow,
+    Text,
+    TextArea,
+} = Design
+
+export default function EvalJSSettingScreen() {
+    const code = useRef('')
+    const [result, setResult] = useState('')
+    const [awaitResult, setAwaitResult] = useState(true)
+    const [showHidden, setShowHidden] = useState(true)
+    const [inspectDepth, setInspectDepth] = useState(3)
+    const [wordWrap, setWordWrap] = useState(true)
+
+    return (
+        <ScrollView contentContainerStyle={{ paddingBottom: 32 }}>
+            <Page spacing={16}>
+                <TextArea
+                    autoFocus
+                    label="Code"
+                    onChange={v => {
+                        code.current = v
+                    }}
+                    placeholder="revenge.discord.native.BundleUpdaterManager.reload()"
+                    size="md"
+                />
+                <TableRowGroup title="Inspection Options">
+                    <TableSwitchRow
+                        label="Await result"
+                        onValueChange={setAwaitResult}
+                        subLabel="Wait for the result of the code before displaying it."
+                        value={awaitResult}
+                    />
+                    <TableSwitchRow
+                        label="Show hidden"
+                        onValueChange={setShowHidden}
+                        subLabel="Show hidden properties of the object."
+                        value={showHidden}
+                    />
+                    <TableRow
+                        label="Inspect depth"
+                        subLabel="The depth of the object to inspect."
+                        trailing={
+                            <Text variant="text-sm/normal">{inspectDepth}</Text>
+                        }
+                    />
+                </TableRowGroup>
+                <Slider
+                    endIcon={<Text variant="text-sm/normal">10</Text>}
+                    maximumValue={10}
+                    minimumValue={0}
+                    onValueChange={setInspectDepth}
+                    startIcon={<Text variant="text-sm/normal">0</Text>}
+                    step={1}
+                    value={inspectDepth}
+                />
+                <TableRowGroup title="Display Options">
+                    <TableSwitchRow
+                        label="Word wrap"
+                        subLabel="Long results will wrap to the next line."
+                        onValueChange={setWordWrap}
+                        value={wordWrap}
+                    />
+                </TableRowGroup>
+                <Stack>
+                    <Text variant="heading-sm/semibold" color="text-strong">
+                        Result
+                    </Text>
+                    <Card>
+                        {/* TODO: Maybe try to make it fill space with minHeight: 128? */}
+                        <ScrollView
+                            nestedScrollEnabled
+                            style={{ maxHeight: 300 }}
+                        >
+                            <ScrollView
+                                nestedScrollEnabled
+                                horizontal={!wordWrap}
+                            >
+                                <Text
+                                    selectable
+                                    style={{ fontFamily: 'monospace' }}
+                                >
+                                    {result || '<empty>'}
+                                </Text>
+                            </ScrollView>
+                        </ScrollView>
+                    </Card>
+                </Stack>
+                <Button
+                    onPress={async function onPress() {
+                        const key = `_${Math.random()
+                            .toString(36)
+                            .substring(2, 15)}`
+
+                        try {
+                            if (!api) {
+                                setResult(
+                                    '<Revenge API not available, snippet will be run without it...>',
+                                )
+
+                                await sleep(1000)
+                            }
+                            // @ts-expect-error
+                            else globalThis[key] = api
+
+                            // biome-ignore lint/security/noGlobalEval: Intentional
+                            const res = (0, eval)(
+                                `var api=${key},{unscoped:revenge}=api;undefined;${code.current}//# sourceURL=Revenge:EvalJS`,
+                            )
+
+                            setResult(
+                                nodeUtil.inspect(
+                                    awaitResult ? await res : res,
+                                    {
+                                        depth: inspectDepth,
+                                        showHidden,
+                                    },
+                                ),
+                            )
+
+                            // @ts-expect-error
+                            delete globalThis[key]
+                        } catch (e) {
+                            setResult(getErrorStack(e))
+                        }
+                    }}
+                    text="Evaluate"
+                    variant="primary"
+                />
+            </Page>
+        </ScrollView>
+    )
+}