[Storage] Rework everything (#10)

* [storage] rework everything

* [storage] expose createProxy

* [storage] add useProxy hook

* [storage] fix settings.ts

* [Storage] Implement wrapSync, fix UI

* [storage] fix storage

* [plugins] re-add plugin loading

* [storage] fix fix storage

* [storage] make wrapSync more magical

* [storage] save deletes

* [ui] hack around plugin removal... again

* [plugins] make plugin storage work

* [storage] expose api

---------

Co-authored-by: Beef <beefers@riseup.net>

src/def.d.ts

@@ -1,6 +1,7 @@
 import * as _spitroast from "spitroast";
 import _React from "react";
 import _RN from "react-native";
+import { Events } from "./lib/emitter";
 
 type MetroModules = { [id: number]: any };
 
@@ -177,6 +178,28 @@ interface MMKVManager {
 
 type Indexable<Type> = { [index: string]: Type }
 
+type EmitterEvent = (keyof typeof Events) & string;
+
+interface EmitterListenerData {
+	path: string[];
+	value?: any;
+}
+
+type EmitterListener = (
+	event: EmitterEvent,
+	data: EmitterListenerData | any
+) => any;
+
+type EmitterListeners = Indexable<Set<EmitterListener>>;
+
+interface Emitter {
+    listeners: EmitterListeners;
+    on: (event: EmitterEvent, listener: EmitterListener) => void;
+    off: (event: EmitterEvent, listener: EmitterListener) => void;
+    once: (event: EmitterEvent, listener: EmitterListener) => void;
+    emit: (event: EmitterEvent, data: EmitterListenerData) => void;
+}
+
 interface VendettaObject {
     patcher: {
         after: typeof _spitroast.after;
@@ -238,6 +261,12 @@ interface VendettaObject {
     commands: {
         registerCommand: (command: ApplicationCommand) => () => void;
     };
+    storage: {
+        createProxy<T>(target: T): { proxy: T, emitter: Emitter };
+        useProxy<T>(storage: T): T;
+        createStorage<T>(storeName: string): Promise<Awaited<T>>;
+        wrapSync<T extends Promise<any>>(store: T): Awaited<T>;
+    };
     settings: Settings;
     logger: Logger;
     version: string;

src/index.ts

@@ -8,13 +8,14 @@ import * as metro from "@metro/filters";
 import * as common from "@metro/common";
 import * as components from "@ui/components";
 import * as toasts from "@ui/toasts";
+import * as storage from "@lib/storage";
 import { patchAssets, all, find, getAssetByID, getAssetByName, getAssetIDByName } from "@ui/assets";
 import initSettings from "@ui/settings";
 import { fixTheme } from "@ui/fixTheme";
 import { connectToDebugger, patchLogHook, versionHash } from "@lib/debug";
 import { plugins, fetchPlugin, evalPlugin, stopPlugin, removePlugin, getSettings } from "@lib/plugins";
 import settings from "@lib/settings";
-import { registerCommand } from "./lib/commands";
+import { registerCommand } from "@lib/commands";
 
 console.log("Hello from Vendetta!");
 
@@ -56,6 +57,7 @@ async function init() {
             commands: {
                 registerCommand: registerCommand,
             },
+            storage: { ...storage },
             settings: settings,
             logger: logger,
             version: versionHash,

src/lib/emitter.ts

@@ -0,0 +1,35 @@
+import { Emitter, EmitterEvent, EmitterListener, EmitterListenerData, EmitterListeners } from "@types";
+
+export const Events = Object.freeze({
+  GET: "GET",
+  SET: "SET",
+  DEL: "DEL"
+});
+
+export default function createEmitter(): Emitter {
+  return {
+    listeners: Object.values(Events).reduce<EmitterListeners>((acc, val: string) => ((acc[val] = new Set<EmitterListener>()), acc), {}) as EmitterListeners,
+
+    on(event: EmitterEvent, listener: EmitterListener) {
+      if (!this.listeners[event].has(listener))
+        this.listeners[event].add(listener);
+    },
+
+    off(event: EmitterEvent, listener: EmitterListener) {
+      this.listeners[event].delete(listener);
+    },
+
+    once(event: EmitterEvent, listener: EmitterListener) {
+      const once = (event: EmitterEvent, data: EmitterListenerData) => {
+        this.off(event, once);
+        listener(event, data);
+      }
+      this.on(event, once);
+    },
+
+    emit(event: EmitterEvent, data: EmitterListenerData) {
+      for (const listener of this.listeners[event])
+        listener(event, data);
+    },
+  };
+}

src/lib/plugins.ts

@@ -1,8 +1,8 @@
 import { Indexable, PluginManifest, Plugin } from "@types";
 import { navigation } from "@metro/common";
+import { createStorage, wrapSync } from "@lib/storage";
 import logger from "@lib/logger";
-import createStorage from "@lib/storage";
+import Subpage from "@ui/settings/components/Subpage";
-import Subpage from "@/ui/settings/components/Subpage";
 
 type EvaledPlugin = {
     onLoad?(): void;
@@ -10,19 +10,16 @@ type EvaledPlugin = {
     settings: JSX.Element;
 };
 
-export const plugins = createStorage<Indexable<Plugin>>("VENDETTA_PLUGINS", async function(parsed) {
+export const plugins = wrapSync(createStorage<Indexable<Plugin>>("VENDETTA_PLUGINS").then(async function (store) {
-    for (let p of Object.keys(parsed)) {
+    for (let p of Object.keys(store)) {
-        const plugin: Plugin = parsed[p];
+        const plugin: Plugin = store[p];
 
-        if (parsed[p].update) {
+        if (store[p].update) await fetchPlugin(plugin.id);
-            await fetchPlugin(plugin.id);
+        if (store[p].enabled && plugins[p]) await startPlugin(p);
-        } else {
-            plugins[p] = parsed[p];
-        }
-
-        if (parsed[p].enabled && plugins[p]) startPlugin(p);
     }
-});
+
+    return store;
+}));
 const loadedPlugins: Indexable<EvaledPlugin> = {};
 
 export async function fetchPlugin(id: string) {
@@ -58,13 +55,14 @@ export async function fetchPlugin(id: string) {
     };
 }
 
-export function evalPlugin(plugin: Plugin) {
+export async function evalPlugin(plugin: Plugin) {
     // TODO: Refactor to not depend on own window object
     const vendettaForPlugins = {
         ...window.vendetta,
         plugin: {
             manifest: plugin.manifest,
-            storage: createStorage<Indexable<any>>(plugin.id),
+            // Wrapping this with wrapSync is NOT an option.
+            storage: await createStorage<Indexable<any>>(plugin.id),
             showSettings: () => showSettings(plugin),
         }
     };
@@ -75,12 +73,12 @@ export function evalPlugin(plugin: Plugin) {
     return ret.default || ret;
 }
 
-export function startPlugin(id: string) {
+export async function startPlugin(id: string) {
     const plugin = plugins[id];
     if (!plugin) throw new Error("Attempted to start non-existent plugin");
 
     try {
-        const pluginRet: EvaledPlugin = evalPlugin(plugin);
+        const pluginRet: EvaledPlugin = await evalPlugin(plugin);
         loadedPlugins[id] = pluginRet;
         pluginRet.onLoad?.();
         plugin.enabled = true;

src/lib/settings.ts

@@ -1,4 +1,4 @@
-import createStorage from "@lib/storage";
+import { createStorage, wrapSync } from "@lib/storage";
 import { Settings } from "@types";
 
-export default createStorage<Settings>("VENDETTA_SETTINGS");
+export default wrapSync(createStorage<Settings>("VENDETTA_SETTINGS"));

src/lib/storage.ts

@@ -1,48 +1,101 @@
-import { Indexable, MMKVManager } from "@types";
+import { Emitter, MMKVManager } from "@types";
 import { ReactNative as RN } from "@metro/hoist";
+import createEmitter from "./emitter";
 
-// Discord's custom special storage sauce
 const MMKVManager = RN.NativeModules.MMKVManager as MMKVManager;
 
-// TODO: React hook?
+const emitterSymbol = Symbol("emitter accessor");
-// TODO: Clean up types, if necessary
-export default function createStorage<T>(storeName: string, onRestore?: (parsed: T) => void): T {
-    const internalStore: Indexable<any> = {};
 
-    const proxyValidator = {
+export function createProxy(target: any = {}): { proxy: any, emitter: Emitter } {
-        get(target: object, key: string | symbol): any {
+  const emitter = createEmitter();
-            const orig = Reflect.get(target, key);
 
-            if (typeof orig === "object" && orig !== null) {
+  function createProxy(target: any, path: string[]): any {
-                return new Proxy(orig, proxyValidator);
+    return new Proxy(target, {
-            } else {
+      get(target, prop: string) {
-                return orig;
+        if ((prop as unknown) === emitterSymbol)
-            }
+          return emitter;
-        },
 
-        set(target: object, key: string | symbol, value: any) {
+        const newPath = [...path, prop];
-            Reflect.set(target, key, value);
+        const value: any = target[prop];
-            MMKVManager.setItem(storeName, JSON.stringify(internalStore));
-            return true;
-        },
 
-        deleteProperty(target: object, key: string | symbol) {
+        if (value !== undefined && value !== null) {
-            Reflect.deleteProperty(target, key);
+          emitter.emit("GET", {
-            MMKVManager.setItem(storeName, JSON.stringify(internalStore));
+            path: newPath,
-            return true;
+            value,
+          });
+          if (typeof value === "object") {
+            return createProxy(value, newPath);
+          }
+          return value;
         }
-    }
 
-    MMKVManager.getItem(storeName).then(async function (v) {
+        return value;
-        if (!v) return;
+      },
-        const parsed: T & Indexable<any> = JSON.parse(v);
 
-        if (onRestore && typeof onRestore === "function") {
+      set(target, prop: string, value) {
-            onRestore(parsed);
+        target[prop] = value;
-        } else {
+        emitter.emit("SET", {
-            for (let p of Object.keys(parsed)) internalStore[p] = parsed[p];
+          path: [...path, prop],
-        }
+          value
-    })
+        });
+        // we do not care about success, if this actually does fail we have other problems
+        return true;
+      },
 
-    return new Proxy(internalStore, proxyValidator) as T;
+      deleteProperty(target, prop: string) {
+        const success = delete target[prop];
+        if (success) emitter.emit("DEL", { 
+          path: [...path, prop],
+        });
+        return success;
+      },
+    });
+  }
+
+  return {
+    proxy: createProxy(target, []),
+    emitter,
+  }
+}
+
+export function useProxy<T>(storage: T): T {
+  const emitter = (storage as any)[emitterSymbol] as Emitter;
+
+  const [, forceUpdate] = React.useReducer((n) => ~n, 0);
+
+  React.useEffect(() => {
+    const listener = () => forceUpdate();
+
+    emitter.on("SET", listener);
+    emitter.on("DEL", listener);
+
+    return () => {
+      emitter.off("SET", listener);
+      emitter.off("DEL", listener);
+    }
+  }, []);
+
+  return storage;
+}
+
+export async function createStorage<T>(storeName: string): Promise<Awaited<T>> {
+  const data = JSON.parse(await MMKVManager.getItem(storeName) ?? "{}");
+  const { proxy, emitter } = createProxy(data);
+
+  const handler = () => MMKVManager.setItem(storeName, JSON.stringify(proxy));
+  emitter.on("SET", handler);
+  emitter.on("DEL", handler);
+
+  return proxy;
+}
+
+export function wrapSync<T extends Promise<any>>(store: T): Awaited<T> {
+    let awaited: any = undefined;
+    store.then((v) => (awaited = v));
+    return new Proxy(
+      {} as Awaited<T>,
+      Object.fromEntries(Object.getOwnPropertyNames(Reflect)
+        // @ts-expect-error
+        .map((k) => [k, (t: T, ...a: any[]) => Reflect[k](awaited ?? t, ...a)])),
+    );
 }

src/ui/settings/components/PluginCard.tsx

@@ -2,8 +2,8 @@ import { ReactNative as RN, stylesheet } from "@metro/common";
 import { Forms, General } from "@ui/components";
 import { Plugin } from "@types";
 import { getAssetIDByName } from "@ui/assets";
-import { removePlugin, startPlugin, stopPlugin, showSettings, getSettings } from "@lib/plugins";
 import { showToast } from "@ui/toasts";
+import { removePlugin, startPlugin, stopPlugin, showSettings, getSettings } from "@lib/plugins";
 import copyText from "@lib/utils/copyText";
 
 const { FormRow, FormSwitch } = Forms;
@@ -39,13 +39,9 @@ interface PluginCardProps {
 }
 
 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);
-
+    // This is needed because of React™
-    // This is bad, but I don't think I have much choice - Beef
+    if (removed) return null;
-    // Once the user re-renders the page, this is not taken into account anyway.
-    if (removed) return <></>;
 
     return ( 
         <RN.View style={styles.card}>
@@ -58,7 +54,6 @@ export default function PluginCard({ plugin }: PluginCardProps) {
                         value={plugin.enabled}
                         onValueChange={(v: boolean) => {
                             if (v) startPlugin(plugin.id); else stopPlugin(plugin.id);
-                            setEnabled(v);
                         }}
                     />
                 }
@@ -87,7 +82,6 @@ export default function PluginCard({ plugin }: PluginCardProps) {
                             onPress={() => {
                                 plugin.update = !plugin.update;
                                 showToast(`${plugin.update ? "Enabled" : "Disabled"} updates for ${plugin.manifest.name}.`, getAssetIDByName("toast_image_saved"));
-                                setUpdate(plugin.update);
                             }}
                         >
                             <Image style={styles.icon} source={getAssetIDByName(plugin.update ? "Check" : "Small")} />

src/ui/settings/components/SettingsSection.tsx

@@ -1,6 +1,7 @@
 import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
-import settings from "@/lib/settings";
+import { useProxy } from "@lib/storage";
+import settings from "@lib/settings";
 
 const { FormRow, FormSection, FormDivider } = Forms;
 
@@ -9,6 +10,8 @@ interface SettingsSectionProps {
 }
 
 export default function SettingsSection({ navigation }: SettingsSectionProps) {
+    useProxy(settings);
+
     return ( 
         <FormSection key="Vendetta" title="Vendetta">
             <FormRow

src/ui/settings/pages/Developer.tsx

@@ -1,8 +1,9 @@
 import { ReactNative as RN, navigation } from "@metro/common";
 import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
-import { showToast } from "@/ui/toasts";
+import { showToast } from "@ui/toasts";
 import { connectToDebugger } from "@lib/debug";
+import { useProxy } from "@lib/storage";
 import settings from "@lib/settings";
 import logger from "@lib/logger";
 import Subpage from "@ui/settings/components/Subpage";
@@ -11,33 +12,32 @@ import AssetBrowser from "@ui/settings/pages/AssetBrowser";
 const { FormSection, FormRow, FormInput, FormDivider } = Forms;
 
 export default function Developer() {
-    const [debuggerUrl, setDebuggerUrl] = React.useState(settings.debuggerUrl || "");
+    useProxy(settings);
 
     return (
         <RN.View style={{ flex: 1 }}>
             <FormSection title="Debug">
                 <FormInput 
-                    value={debuggerUrl}
+                    value={settings.debuggerUrl}
                     onChange={(v: string) => {
                         settings.debuggerUrl = v;
-                        setDebuggerUrl(v);
                     }}
                     title="DEBUGGER URL"
                 />
                 <FormDivider />
                 <FormRow
                     label="Connect to debug websocket"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
-                    onPress={() => connectToDebugger(debuggerUrl)}
+                    onPress={() => connectToDebugger(settings.debuggerUrl)}
                 />
                 <FormDivider />
                 {window.__vendetta_rdc && <FormRow
                     label="Connect to React DevTools"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
                     onPress={() => {
                         try {
                             window.__vendetta_rdc?.connectToDevTools({
-                                host: debuggerUrl.split(":")[0],
+                                host: settings.debuggerUrl.split(":")?.[0],
                                 resolveRNStyle: RN.StyleSheet.flatten,
                             });
                         } catch(e) {
@@ -50,7 +50,7 @@ export default function Developer() {
             <FormSection title="Other">
                 <FormRow
                     label="Asset Browser"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
                     trailing={FormRow.Arrow}
                     onPress={() => navigation.push(Subpage, {
                         name: "Asset Browser",

src/ui/settings/pages/General.tsx

@@ -3,14 +3,15 @@ import { DISCORD_SERVER, GITHUB } from "@lib/constants";
 import { getAssetIDByName } from "@ui/assets";
 import { Forms } from "@ui/components";
 import { getDebugInfo } from "@lib/debug";
-import Version from "@ui/settings/components/Version";
+import { useProxy } from "@lib/storage";
 import settings from "@lib/settings";
+import Version from "@ui/settings/components/Version";
 
 const { FormRow, FormSwitchRow, FormSection, FormDivider } = Forms;
 const debugInfo = getDebugInfo();
 
 export default function General() {
-    const [devSettings, setDevSettings] = React.useState(settings.developerSettings || false);
+    useProxy(settings);
 
     const versions = [
         {
@@ -116,10 +117,9 @@ export default function General() {
                 <FormSwitchRow
                     label="Developer Settings"
                     leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
-                    value={devSettings}
+                    value={settings.developerSettings}
                     onValueChange={(v: boolean) => {
                         settings.developerSettings = v;
-                        setDevSettings(v);
                     }}
                 />
             </FormSection>

src/ui/settings/pages/Plugins.tsx

@@ -2,14 +2,15 @@ import { ReactNative as RN } from "@metro/common";
 import { Forms } from "@ui/components";
 import { showToast } from "@ui/toasts";
 import { getAssetIDByName } from "@ui/assets";
-import { fetchPlugin, plugins } from "@lib/plugins";
+import { useProxy } from "@lib/storage";
+import { plugins, fetchPlugin } from "@lib/plugins";
 import PluginCard from "@ui/settings/components/PluginCard";
 
 const { FormInput, FormRow } = Forms;
 
 export default function Plugins() {
+    useProxy(plugins);
     const [pluginUrl, setPluginUrl] = React.useState("");
-    const [pluginList, setPluginList] = React.useState(plugins);
 
     return (
         <RN.View style={{ flex: 1 }}>
@@ -24,7 +25,6 @@ export default function Plugins() {
                 onPress={() => {
                         fetchPlugin(pluginUrl).then(() => {
                             setPluginUrl("");
-                            setPluginList(plugins);
                         }).catch((e: Error) => {
                             showToast(e.message, getAssetIDByName("Small"));
                         });
@@ -33,7 +33,7 @@ export default function Plugins() {
             />
             <RN.FlatList
                 style={{ marginTop: 10 }}
-                data={Object.values(pluginList)}
+                data={Object.values(plugins)}
                 renderItem={({ item }) => <PluginCard plugin={item} />}
                 keyExtractor={item => item.id}
             />