[Storage] Expose settings on window, plugin storages

src/def.d.ts

@@ -125,6 +125,7 @@ interface VendettaObject {
         removePlugin: (id: string) => void;
         getSettings: (id: string) => JSX.Element;
     }
+    settings: Settings;
     logger: Logger;
 }
 

src/index.ts

@@ -13,6 +13,7 @@ import initSettings from "@ui/settings";
 import { fixTheme } from "@ui/fixTheme";
 import { connectToDebugger, patchLogHook } from "@lib/debug";
 import { plugins, fetchPlugin, evalPlugin, stopPlugin, removePlugin, getSettings } from "@lib/plugins";
+import settings from "@lib/settings";
 
 console.log("Hello from Vendetta!");
 
@@ -51,6 +52,7 @@ async function init() {
                 removePlugin: removePlugin,
                 getSettings: getSettings
             },
+            settings: settings,
             logger: logger,
         };
 

src/lib/plugins.ts

@@ -1,6 +1,8 @@
 import { Indexable, PluginManifest, Plugin } from "@types";
+import { navigation } from "@metro/common";
 import logger from "@lib/logger";
-import createStorage from "./storage";
+import createStorage from "@lib/storage";
+import PluginSettings from "@/ui/settings/components/PluginSettings";
 
 type EvaledPlugin = {
     onLoad?(): void;
@@ -58,7 +60,14 @@ export async function fetchPlugin(id: string) {
 
 export function evalPlugin(plugin: Plugin) {
     // TODO: Refactor to not depend on own window object
-    const vendettaForPlugins = Object.assign({}, window.vendetta);
+    const vendettaForPlugins = {
+        ...window.vendetta,
+        plugin: {
+            manifest: plugin.manifest,
+            storage: createStorage<Indexable<any>>(plugin.id),
+            showSettings: () => showSettings(plugin),
+        }
+    };
     const pluginString = `vendetta=>{return ${plugin.js}}\n//# sourceURL=${plugin.id}`;
 
     const raw = (0, eval)(pluginString)(vendettaForPlugins);
@@ -112,3 +121,13 @@ export function removePlugin(id: string) {
 }
 
 export const getSettings = (id: string) => loadedPlugins[id]?.settings;
+
+export function showSettings(plugin: Plugin) {
+    const settings = getSettings(plugin.id);
+    if (!settings) return logger.error(`Plugin ${plugin.id} is not loaded or has no settings`);
+
+    navigation.push(PluginSettings, {
+        plugin: plugin,
+        children: settings,
+    });
+}

src/ui/settings/components/PluginCard.tsx

@@ -1,10 +1,9 @@
-import { ReactNative as RN, stylesheet, navigation } from "@metro/common";
+import { ReactNative as RN, stylesheet } from "@metro/common";
 import { Forms, General } from "@ui/components";
 import { Plugin } from "@types";
 import { getAssetIDByName } from "@ui/assets";
-import { getSettings, removePlugin, startPlugin, stopPlugin } from "@lib/plugins";
+import { removePlugin, startPlugin, stopPlugin, showSettings, getSettings } from "@lib/plugins";
 import { showToast } from "@ui/toasts";
-import PluginSettings from "@ui/settings/components/PluginSettings";
 
 const { FormRow, FormSwitch } = Forms;
 const { TouchableOpacity, Image } = General;
@@ -41,7 +40,6 @@ export default function PluginCard({ plugin }: PluginCardProps) {
     const [enabled, setEnabled] = React.useState(plugin.enabled);
     const [update, setUpdate] = React.useState(plugin.update);
     const [removed, setRemoved] = React.useState(false);
-    const Settings = getSettings(plugin.id);
 
     // This is bad, but I don't think I have much choice - Beef
     // Once the user re-renders the page, this is not taken into account anyway.
@@ -84,14 +82,7 @@ export default function PluginCard({ plugin }: PluginCardProps) {
                         >
                             <Image style={styles.icon} source={getAssetIDByName(plugin.update ? "Check" : "Small")} />
                         </TouchableOpacity>
-                        {Settings && <TouchableOpacity
-                            onPress={() => {
-                                navigation.push(PluginSettings, {
-                                    plugin: plugin,
-                                    children: Settings,
-                                });
-                            }}
-                        >
+                        {getSettings(plugin.id) && <TouchableOpacity onPress={() => showSettings(plugin)}>
                             <Image style={styles.icon} source={getAssetIDByName("settings")} />
                         </TouchableOpacity>}
                     </RN.View>