From 9aa205b5ec6dc1f380fd61941a0cb9dfa74f814c Mon Sep 17 00:00:00 2001 From: V Date: Wed, 13 Mar 2024 21:45:45 +0100 Subject: [PATCH] rewrite settings api to use SettingsStore class (#2257) Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com> --- browser/VencordNativeStub.ts | 12 +- src/VencordNative.ts | 9 +- src/api/Settings.ts | 167 ++++++---------- src/components/VencordSettings/ThemesTab.tsx | 2 +- src/components/VencordSettings/VencordTab.tsx | 15 +- src/main/index.ts | 5 +- src/main/ipcMain.ts | 36 +--- src/main/patcher.ts | 12 +- src/main/settings.ts | 53 +++++ src/main/utils/constants.ts | 1 + .../fixSpotifyEmbeds.desktop/native.ts | 4 +- .../fixYoutubeEmbeds.desktop/native.ts | 4 +- src/shared/SettingsStore.ts | 182 ++++++++++++++++++ src/utils/quickCss.ts | 8 +- src/utils/settingsSync.ts | 8 +- tsconfig.json | 6 +- 16 files changed, 340 insertions(+), 184 deletions(-) create mode 100644 src/main/settings.ts create mode 100644 src/shared/SettingsStore.ts diff --git a/browser/VencordNativeStub.ts b/browser/VencordNativeStub.ts index 70fc1cf9..77c72369 100644 --- a/browser/VencordNativeStub.ts +++ b/browser/VencordNativeStub.ts @@ -26,6 +26,7 @@ import { debounce } from "../src/utils"; import { EXTENSION_BASE_URL } from "../src/utils/web-metadata"; import { getTheme, Theme } from "../src/utils/discord"; import { getThemeInfo } from "../src/main/themes"; +import { Settings } from "../src/Vencord"; // Discord deletes this so need to store in variable const { localStorage } = window; @@ -96,8 +97,15 @@ window.VencordNative = { }, settings: { - get: () => localStorage.getItem("VencordSettings") || "{}", - set: async (s: string) => localStorage.setItem("VencordSettings", s), + get: () => { + try { + return JSON.parse(localStorage.getItem("VencordSettings") || "{}"); + } catch (e) { + console.error("Failed to parse settings from localStorage: ", e); + return {}; + } + }, + set: async (s: Settings) => localStorage.setItem("VencordSettings", JSON.stringify(s)), getSettingsDir: async () => "LocalStorage" }, diff --git a/src/VencordNative.ts b/src/VencordNative.ts index 0faa5569..10381c90 100644 --- a/src/VencordNative.ts +++ b/src/VencordNative.ts @@ -4,11 +4,12 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import { PluginIpcMappings } from "@main/ipcPlugins"; +import type { UserThemeHeader } from "@main/themes"; import { IpcEvents } from "@utils/IpcEvents"; import { IpcRes } from "@utils/types"; +import type { Settings } from "api/Settings"; import { ipcRenderer } from "electron"; -import { PluginIpcMappings } from "main/ipcPlugins"; -import type { UserThemeHeader } from "main/themes"; function invoke(event: IpcEvents, ...args: any[]) { return ipcRenderer.invoke(event, ...args) as Promise; @@ -46,8 +47,8 @@ export default { }, settings: { - get: () => sendSync(IpcEvents.GET_SETTINGS), - set: (settings: string) => invoke(IpcEvents.SET_SETTINGS, settings), + get: () => sendSync(IpcEvents.GET_SETTINGS), + set: (settings: Settings, pathToNotify?: string) => invoke(IpcEvents.SET_SETTINGS, settings, pathToNotify), getSettingsDir: () => invoke(IpcEvents.GET_SETTINGS_DIR), }, diff --git a/src/api/Settings.ts b/src/api/Settings.ts index c1ff6915..bd4a4e92 100644 --- a/src/api/Settings.ts +++ b/src/api/Settings.ts @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +import { SettingsStore as SettingsStoreClass } from "@shared/SettingsStore"; import { debounce } from "@utils/debounce"; import { localStorage } from "@utils/localStorage"; import { Logger } from "@utils/Logger"; @@ -52,7 +53,6 @@ export interface Settings { | "under-page" | "window" | undefined; - macosTranslucency: boolean | undefined; disableMinSize: boolean; winNativeTitleBar: boolean; plugins: { @@ -88,8 +88,6 @@ const DefaultSettings: Settings = { frameless: false, transparent: false, winCtrlQ: false, - // Replaced by macosVibrancyStyle - macosTranslucency: undefined, macosVibrancyStyle: undefined, disableMinSize: false, winNativeTitleBar: false, @@ -110,13 +108,8 @@ const DefaultSettings: Settings = { } }; -try { - var settings = JSON.parse(VencordNative.settings.get()) as Settings; - mergeDefaults(settings, DefaultSettings); -} catch (err) { - var settings = mergeDefaults({} as Settings, DefaultSettings); - logger.error("An error occurred while loading the settings. Corrupt settings file?\n", err); -} +const settings = VencordNative.settings.get(); +mergeDefaults(settings, DefaultSettings); const saveSettingsOnFrequentAction = debounce(async () => { if (Settings.cloud.settingsSync && Settings.cloud.authenticated) { @@ -125,76 +118,52 @@ const saveSettingsOnFrequentAction = debounce(async () => { } }, 60_000); -type SubscriptionCallback = ((newValue: any, path: string) => void) & { _paths?: Array; }; -const subscriptions = new Set(); - -const proxyCache = {} as Record; - -// Wraps the passed settings object in a Proxy to nicely handle change listeners and default values -function makeProxy(settings: any, root = settings, path = ""): Settings { - return proxyCache[path] ??= new Proxy(settings, { - get(target, p: string) { - const v = target[p]; - - // using "in" is important in the following cases to properly handle falsy or nullish values - if (!(p in target)) { - // Return empty for plugins with no settings - if (path === "plugins" && p in plugins) - return target[p] = makeProxy({ - enabled: plugins[p].required ?? plugins[p].enabledByDefault ?? false - }, root, `plugins.${p}`); - // Since the property is not set, check if this is a plugin's setting and if so, try to resolve - // the default value. - if (path.startsWith("plugins.")) { - const plugin = path.slice("plugins.".length); - if (plugin in plugins) { - const setting = plugins[plugin].options?.[p]; - if (!setting) return v; - if ("default" in setting) - // normal setting with a default value - return (target[p] = setting.default); - if (setting.type === OptionType.SELECT) { - const def = setting.options.find(o => o.default); - if (def) - target[p] = def.value; - return def?.value; - } - } +export const SettingsStore = new SettingsStoreClass(settings, { + readOnly: true, + getDefaultValue({ + target, + key, + path + }) { + const v = target[key]; + if (!plugins) return v; // plugins not initialised yet. this means this path was reached by being called on the top level + + if (path === "plugins" && key in plugins) + return target[key] = { + enabled: plugins[key].required ?? plugins[key].enabledByDefault ?? false + }; + + // Since the property is not set, check if this is a plugin's setting and if so, try to resolve + // the default value. + if (path.startsWith("plugins.")) { + const plugin = path.slice("plugins.".length); + if (plugin in plugins) { + const setting = plugins[plugin].options?.[key]; + if (!setting) return v; + + if ("default" in setting) + // normal setting with a default value + return (target[key] = setting.default); + + if (setting.type === OptionType.SELECT) { + const def = setting.options.find(o => o.default); + if (def) + target[key] = def.value; + return def?.value; } - return v; } - - // Recursively proxy Objects with the updated property path - if (typeof v === "object" && !Array.isArray(v) && v !== null) - return makeProxy(v, root, `${path}${path && "."}${p}`); - - // primitive or similar, no need to proxy further - return v; - }, - - set(target, p: string, v) { - // avoid unnecessary updates to React Components and other listeners - if (target[p] === v) return true; - - target[p] = v; - // Call any listeners that are listening to a setting of this path - const setPath = `${path}${path && "."}${p}`; - delete proxyCache[setPath]; - for (const subscription of subscriptions) { - if (!subscription._paths || subscription._paths.includes(setPath)) { - subscription(v, setPath); - } - } - // And don't forget to persist the settings! - PlainSettings.cloud.settingsSyncVersion = Date.now(); - localStorage.Vencord_settingsDirty = true; - saveSettingsOnFrequentAction(); - VencordNative.settings.set(JSON.stringify(root, null, 4)); - return true; } - }); -} + return v; + } +}); + +SettingsStore.addGlobalChangeListener((_, path) => { + SettingsStore.plain.cloud.settingsSyncVersion = Date.now(); + localStorage.Vencord_settingsDirty = true; + saveSettingsOnFrequentAction(); + VencordNative.settings.set(SettingsStore.plain, path); +}); /** * Same as {@link Settings} but unproxied. You should treat this as readonly, @@ -210,7 +179,7 @@ export const PlainSettings = settings; * the updated settings to disk. * This recursively proxies objects. If you need the object non proxied, use {@link PlainSettings} */ -export const Settings = makeProxy(settings); +export const Settings = SettingsStore.store; /** * Settings hook for React components. Returns a smart settings @@ -223,45 +192,21 @@ export const Settings = makeProxy(settings); export function useSettings(paths?: UseSettings[]) { const [, forceUpdate] = React.useReducer(() => ({}), {}); - if (paths) { - (forceUpdate as SubscriptionCallback)._paths = paths; - } - React.useEffect(() => { - subscriptions.add(forceUpdate); - return () => void subscriptions.delete(forceUpdate); + if (paths) { + paths.forEach(p => SettingsStore.addChangeListener(p, forceUpdate)); + return () => paths.forEach(p => SettingsStore.removeChangeListener(p, forceUpdate)); + } else { + SettingsStore.addGlobalChangeListener(forceUpdate); + return () => SettingsStore.removeGlobalChangeListener(forceUpdate); + } }, []); - return Settings; -} - -// Resolves a possibly nested prop in the form of "some.nested.prop" to type of T.some.nested.prop -type ResolvePropDeep = P extends "" ? T : - P extends `${infer Pre}.${infer Suf}` ? - Pre extends keyof T ? ResolvePropDeep : never : P extends keyof T ? T[P] : never; - -/** - * Add a settings listener that will be invoked whenever the desired setting is updated - * @param path Path to the setting that you want to watch, for example "plugins.Unindent.enabled" will fire your callback - * whenever Unindent is toggled. Pass an empty string to get notified for all changes - * @param onUpdate Callback function whenever a setting matching path is updated. It gets passed the new value and the path - * to the updated setting. This path will be the same as your path argument, unless it was an empty string. - * - * @example addSettingsListener("", (newValue, path) => console.log(`${path} is now ${newValue}`)) - * addSettingsListener("plugins.Unindent.enabled", v => console.log("Unindent is now", v ? "enabled" : "disabled")) - */ -export function addSettingsListener(path: Path, onUpdate: (newValue: Settings[Path], path: Path) => void): void; -export function addSettingsListener(path: Path, onUpdate: (newValue: Path extends "" ? any : ResolvePropDeep, path: Path extends "" ? string : Path) => void): void; -export function addSettingsListener(path: string, onUpdate: (newValue: any, path: string) => void) { - if (path) { - ((onUpdate as SubscriptionCallback)._paths ??= []).push(path); - } - - subscriptions.add(onUpdate); + return SettingsStore.store; } export function migratePluginSettings(name: string, ...oldNames: string[]) { - const { plugins } = settings; + const { plugins } = SettingsStore.plain; if (name in plugins) return; for (const oldName of oldNames) { @@ -269,7 +214,7 @@ export function migratePluginSettings(name: string, ...oldNames: string[]) { logger.info(`Migrating settings from old name ${oldName} to ${name}`); plugins[name] = plugins[oldName]; delete plugins[oldName]; - VencordNative.settings.set(JSON.stringify(settings, null, 4)); + SettingsStore.markAsChanged(); break; } } diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx index 8abaaba4..2eb91cb8 100644 --- a/src/components/VencordSettings/ThemesTab.tsx +++ b/src/components/VencordSettings/ThemesTab.tsx @@ -22,6 +22,7 @@ import { Flex } from "@components/Flex"; import { DeleteIcon } from "@components/Icons"; import { Link } from "@components/Link"; import PluginModal from "@components/PluginSettings/PluginModal"; +import type { UserThemeHeader } from "@main/themes"; import { openInviteModal } from "@utils/discord"; import { Margins } from "@utils/margins"; import { classes } from "@utils/misc"; @@ -30,7 +31,6 @@ import { showItemInFolder } from "@utils/native"; import { useAwaiter } from "@utils/react"; import { findByPropsLazy, findLazy } from "@webpack"; import { Button, Card, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common"; -import { UserThemeHeader } from "main/themes"; import type { ComponentType, Ref, SyntheticEvent } from "react"; import { AddonCard } from "./AddonCard"; diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx index ab910ea2..c0a66fdc 100644 --- a/src/components/VencordSettings/VencordTab.tsx +++ b/src/components/VencordSettings/VencordTab.tsx @@ -50,14 +50,6 @@ function VencordSettings() { const isMac = navigator.platform.toLowerCase().startsWith("mac"); const needsVibrancySettings = IS_DISCORD_DESKTOP && isMac; - // One-time migration of the old setting to the new one if necessary. - React.useEffect(() => { - if (settings.macosTranslucency === true && !settings.macosVibrancyStyle) { - settings.macosVibrancyStyle = "sidebar"; - settings.macosTranslucency = undefined; - } - }, []); - const Switches: Array; title: string; @@ -164,7 +156,7 @@ function VencordSettings() { options={[ // Sorted from most opaque to most transparent { - label: "No vibrancy", default: !settings.macosTranslucency, value: undefined + label: "No vibrancy", value: undefined }, { label: "Under Page (window tinting)", @@ -191,9 +183,8 @@ function VencordSettings() { value: "header" }, { - label: "Sidebar (old value for transparent windows)", - value: "sidebar", - default: settings.macosTranslucency + label: "Sidebar", + value: "sidebar" }, { label: "Tooltip", diff --git a/src/main/index.ts b/src/main/index.ts index 481736a9..5519d47a 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -19,7 +19,8 @@ import { app, protocol, session } from "electron"; import { join } from "path"; -import { ensureSafePath, getSettings } from "./ipcMain"; +import { ensureSafePath } from "./ipcMain"; +import { RendererSettings } from "./settings"; import { IS_VANILLA, THEMES_DIR } from "./utils/constants"; import { installExt } from "./utils/extensions"; @@ -55,7 +56,7 @@ if (IS_VESKTOP || !IS_VANILLA) { }); try { - if (getSettings().enableReactDevtools) + if (RendererSettings.store.enableReactDevtools) installExt("fmkadmapgofadopljbjfkapdkoienihi") .then(() => console.info("[Vencord] Installed React Developer Tools")) .catch(err => console.error("[Vencord] Failed to install React Developer Tools", err)); diff --git a/src/main/ipcMain.ts b/src/main/ipcMain.ts index 3ac8a14c..609a581a 100644 --- a/src/main/ipcMain.ts +++ b/src/main/ipcMain.ts @@ -18,22 +18,21 @@ import "./updater"; import "./ipcPlugins"; +import "./settings"; import { debounce } from "@utils/debounce"; import { IpcEvents } from "@utils/IpcEvents"; -import { Queue } from "@utils/Queue"; import { BrowserWindow, ipcMain, shell, systemPreferences } from "electron"; -import { FSWatcher, mkdirSync, readFileSync, watch } from "fs"; -import { open, readdir, readFile, writeFile } from "fs/promises"; +import { FSWatcher, mkdirSync, watch, writeFileSync } from "fs"; +import { open, readdir, readFile } from "fs/promises"; import { join, normalize } from "path"; import monacoHtml from "~fileContent/monacoWin.html;base64"; import { getThemeInfo, stripBOM, UserThemeHeader } from "./themes"; -import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE, THEMES_DIR } from "./utils/constants"; +import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, THEMES_DIR } from "./utils/constants"; import { makeLinksOpenExternally } from "./utils/externalLinks"; -mkdirSync(SETTINGS_DIR, { recursive: true }); mkdirSync(THEMES_DIR, { recursive: true }); export function ensureSafePath(basePath: string, path: string) { @@ -71,22 +70,6 @@ function getThemeData(fileName: string) { return readFile(safePath, "utf-8"); } -export function readSettings() { - try { - return readFileSync(SETTINGS_FILE, "utf-8"); - } catch { - return "{}"; - } -} - -export function getSettings(): typeof import("@api/Settings").Settings { - try { - return JSON.parse(readSettings()); - } catch { - return {} as any; - } -} - ipcMain.handle(IpcEvents.OPEN_QUICKCSS, () => shell.openPath(QUICKCSS_PATH)); ipcMain.handle(IpcEvents.OPEN_EXTERNAL, (_, url) => { @@ -101,12 +84,10 @@ ipcMain.handle(IpcEvents.OPEN_EXTERNAL, (_, url) => { shell.openExternal(url); }); -const cssWriteQueue = new Queue(); -const settingsWriteQueue = new Queue(); ipcMain.handle(IpcEvents.GET_QUICK_CSS, () => readCss()); ipcMain.handle(IpcEvents.SET_QUICK_CSS, (_, css) => - cssWriteQueue.push(() => writeFile(QUICKCSS_PATH, css)) + writeFileSync(QUICKCSS_PATH, css) ); ipcMain.handle(IpcEvents.GET_THEMES_DIR, () => THEMES_DIR); @@ -117,13 +98,6 @@ ipcMain.handle(IpcEvents.GET_THEME_SYSTEM_VALUES, () => ({ "os-accent-color": `#${systemPreferences.getAccentColor?.() || ""}` })); -ipcMain.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR); -ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings()); - -ipcMain.handle(IpcEvents.SET_SETTINGS, (_, s) => { - settingsWriteQueue.push(() => writeFile(SETTINGS_FILE, s)); -}); - export function initIpc(mainWindow: BrowserWindow) { let quickCssWatcher: FSWatcher | undefined; diff --git a/src/main/patcher.ts b/src/main/patcher.ts index 3ee44d92..ff63ec82 100644 --- a/src/main/patcher.ts +++ b/src/main/patcher.ts @@ -20,7 +20,8 @@ import { onceDefined } from "@utils/onceDefined"; import electron, { app, BrowserWindowConstructorOptions, Menu } from "electron"; import { dirname, join } from "path"; -import { getSettings, initIpc } from "./ipcMain"; +import { initIpc } from "./ipcMain"; +import { RendererSettings } from "./settings"; import { IS_VANILLA } from "./utils/constants"; console.log("[Vencord] Starting up..."); @@ -41,8 +42,7 @@ require.main!.filename = join(asarPath, discordPkg.main); app.setAppPath(asarPath); if (!IS_VANILLA) { - const settings = getSettings(); - + const settings = RendererSettings.store; // Repatch after host updates on Windows if (process.platform === "win32") { require("./patchWin32Updater"); @@ -84,13 +84,11 @@ if (!IS_VANILLA) { options.backgroundColor = "#00000000"; } - const needsVibrancy = process.platform === "darwin" || (settings.macosVibrancyStyle || settings.macosTranslucency); + const needsVibrancy = process.platform === "darwin" && settings.macosVibrancyStyle; if (needsVibrancy) { options.backgroundColor = "#00000000"; - if (settings.macosTranslucency) { - options.vibrancy = "sidebar"; - } else if (settings.macosVibrancyStyle) { + if (settings.macosVibrancyStyle) { options.vibrancy = settings.macosVibrancyStyle; } } diff --git a/src/main/settings.ts b/src/main/settings.ts new file mode 100644 index 00000000..6fe2c3be --- /dev/null +++ b/src/main/settings.ts @@ -0,0 +1,53 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import type { Settings } from "@api/Settings"; +import { SettingsStore } from "@shared/SettingsStore"; +import { IpcEvents } from "@utils/IpcEvents"; +import { ipcMain } from "electron"; +import { mkdirSync, readFileSync, writeFileSync } from "fs"; + +import { NATIVE_SETTINGS_FILE, SETTINGS_DIR, SETTINGS_FILE } from "./utils/constants"; + +mkdirSync(SETTINGS_DIR, { recursive: true }); + +function readSettings(name: string, file: string): Partial { + try { + return JSON.parse(readFileSync(file, "utf-8")); + } catch (err: any) { + if (err?.code !== "ENOENT") + console.error(`Failed to read ${name} settings`, err); + + return {}; + } +} + +export const RendererSettings = new SettingsStore(readSettings("renderer", SETTINGS_FILE)); + +RendererSettings.addGlobalChangeListener(() => { + try { + writeFileSync(SETTINGS_FILE, JSON.stringify(RendererSettings.plain, null, 4)); + } catch (e) { + console.error("Failed to write renderer settings", e); + } +}); + +ipcMain.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR); +ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = RendererSettings.plain); + +ipcMain.handle(IpcEvents.SET_SETTINGS, (_, data: Settings, pathToNotify?: string) => { + RendererSettings.setData(data, pathToNotify); +}); + +export const NativeSettings = new SettingsStore(readSettings("native", NATIVE_SETTINGS_FILE)); + +NativeSettings.addGlobalChangeListener(() => { + try { + writeFileSync(NATIVE_SETTINGS_FILE, JSON.stringify(NativeSettings.plain, null, 4)); + } catch (e) { + console.error("Failed to write native settings", e); + } +}); diff --git a/src/main/utils/constants.ts b/src/main/utils/constants.ts index cd6e509f..6c076c32 100644 --- a/src/main/utils/constants.ts +++ b/src/main/utils/constants.ts @@ -28,6 +28,7 @@ export const SETTINGS_DIR = join(DATA_DIR, "settings"); export const THEMES_DIR = join(DATA_DIR, "themes"); export const QUICKCSS_PATH = join(SETTINGS_DIR, "quickCss.css"); export const SETTINGS_FILE = join(SETTINGS_DIR, "settings.json"); +export const NATIVE_SETTINGS_FILE = join(SETTINGS_DIR, "native-settings.json"); export const ALLOWED_PROTOCOLS = [ "https:", "http:", diff --git a/src/plugins/fixSpotifyEmbeds.desktop/native.ts b/src/plugins/fixSpotifyEmbeds.desktop/native.ts index f779c400..e15e4a44 100644 --- a/src/plugins/fixSpotifyEmbeds.desktop/native.ts +++ b/src/plugins/fixSpotifyEmbeds.desktop/native.ts @@ -4,14 +4,14 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import { RendererSettings } from "@main/settings"; import { app } from "electron"; -import { getSettings } from "main/ipcMain"; app.on("browser-window-created", (_, win) => { win.webContents.on("frame-created", (_, { frame }) => { frame.once("dom-ready", () => { if (frame.url.startsWith("https://open.spotify.com/embed/")) { - const settings = getSettings().plugins?.FixSpotifyEmbeds; + const settings = RendererSettings.store.plugins?.FixSpotifyEmbeds; if (!settings?.enabled) return; frame.executeJavaScript(` diff --git a/src/plugins/fixYoutubeEmbeds.desktop/native.ts b/src/plugins/fixYoutubeEmbeds.desktop/native.ts index d5c2df36..003cba9e 100644 --- a/src/plugins/fixYoutubeEmbeds.desktop/native.ts +++ b/src/plugins/fixYoutubeEmbeds.desktop/native.ts @@ -4,14 +4,14 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import { RendererSettings } from "@main/settings"; import { app } from "electron"; -import { getSettings } from "main/ipcMain"; app.on("browser-window-created", (_, win) => { win.webContents.on("frame-created", (_, { frame }) => { frame.once("dom-ready", () => { if (frame.url.startsWith("https://www.youtube.com/")) { - const settings = getSettings().plugins?.FixYoutubeEmbeds; + const settings = RendererSettings.store.plugins?.FixYoutubeEmbeds; if (!settings?.enabled) return; frame.executeJavaScript(` diff --git a/src/shared/SettingsStore.ts b/src/shared/SettingsStore.ts new file mode 100644 index 00000000..4109704b --- /dev/null +++ b/src/shared/SettingsStore.ts @@ -0,0 +1,182 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import { LiteralUnion } from "type-fest"; + +// Resolves a possibly nested prop in the form of "some.nested.prop" to type of T.some.nested.prop +type ResolvePropDeep = P extends `${infer Pre}.${infer Suf}` + ? Pre extends keyof T + ? ResolvePropDeep + : any + : P extends keyof T + ? T[P] + : any; + +interface SettingsStoreOptions { + readOnly?: boolean; + getDefaultValue?: (data: { + target: any; + key: string; + root: any; + path: string; + }) => any; +} + +// merges the SettingsStoreOptions type into the class +export interface SettingsStore extends SettingsStoreOptions { } + +/** + * The SettingsStore allows you to easily create a mutable store that + * has support for global and path-based change listeners. + */ +export class SettingsStore { + private pathListeners = new Map void>>(); + private globalListeners = new Set<(newData: T, path: string) => void>(); + + /** + * The store object. Making changes to this object will trigger the applicable change listeners + */ + public declare store: T; + /** + * The plain data. Changes to this object will not trigger any change listeners + */ + public declare plain: T; + + public constructor(plain: T, options: SettingsStoreOptions = {}) { + this.plain = plain; + this.store = this.makeProxy(plain); + Object.assign(this, options); + } + + private makeProxy(object: any, root: T = object, path: string = "") { + const self = this; + + return new Proxy(object, { + get(target, key: string) { + let v = target[key]; + + if (!(key in target) && self.getDefaultValue) { + v = self.getDefaultValue({ + target, + key, + root, + path + }); + } + + if (typeof v === "object" && v !== null && !Array.isArray(v)) + return self.makeProxy(v, root, `${path}${path && "."}${key}`); + + return v; + }, + set(target, key: string, value) { + if (target[key] === value) return true; + + Reflect.set(target, key, value); + const setPath = `${path}${path && "."}${key}`; + + self.globalListeners.forEach(cb => cb(value, setPath)); + self.pathListeners.get(setPath)?.forEach(cb => cb(value)); + + return true; + } + }); + } + + /** + * Set the data of the store. + * This will update this.store and this.plain (and old references to them will be stale! Avoid storing them in variables) + * + * Additionally, all global listeners (and those for pathToNotify, if specified) will be called with the new data + * @param value New data + * @param pathToNotify Optional path to notify instead of globally. Used to transfer path via ipc + */ + public setData(value: T, pathToNotify?: string) { + if (this.readOnly) throw new Error("SettingsStore is read-only"); + + this.plain = value; + this.store = this.makeProxy(value); + + if (pathToNotify) { + let v = value; + + const path = pathToNotify.split("."); + for (const p of path) { + if (!v) { + console.warn( + `Settings#setData: Path ${pathToNotify} does not exist in new data. Not dispatching update` + ); + return; + } + v = v[p]; + } + + this.pathListeners.get(pathToNotify)?.forEach(cb => cb(v)); + } + + this.markAsChanged(); + } + + /** + * Add a global change listener, that will fire whenever any setting is changed + * + * @param data The new data. This is either the new value set on the path, or the new root object if it was changed + * @param path The path of the setting that was changed. Empty string if the root object was changed + */ + public addGlobalChangeListener(cb: (data: any, path: string) => void) { + this.globalListeners.add(cb); + } + + /** + * Add a scoped change listener that will fire whenever a setting matching the specified path is changed. + * + * For example if path is `"foo.bar"`, the listener will fire on + * ```js + * Setting.store.foo.bar = "hi" + * ``` + * but not on + * ```js + * Setting.store.foo.baz = "hi" + * ``` + * @param path + * @param cb + */ + public addChangeListener

>( + path: P, + cb: (data: ResolvePropDeep) => void + ) { + const listeners = this.pathListeners.get(path as string) ?? new Set(); + listeners.add(cb); + this.pathListeners.set(path as string, listeners); + } + + /** + * Remove a global listener + * @see {@link addGlobalChangeListener} + */ + public removeGlobalChangeListener(cb: (data: any, path: string) => void) { + this.globalListeners.delete(cb); + } + + /** + * Remove a scoped listener + * @see {@link addChangeListener} + */ + public removeChangeListener(path: LiteralUnion, cb: (data: any) => void) { + const listeners = this.pathListeners.get(path as string); + if (!listeners) return; + + listeners.delete(cb); + if (!listeners.size) this.pathListeners.delete(path as string); + } + + /** + * Call all global change listeners + */ + public markAsChanged() { + this.globalListeners.forEach(cb => cb(this.plain, "")); + } +} diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts index 81320319..99f06004 100644 --- a/src/utils/quickCss.ts +++ b/src/utils/quickCss.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { addSettingsListener, Settings } from "@api/Settings"; +import { Settings, SettingsStore } from "@api/Settings"; let style: HTMLStyleElement; @@ -81,10 +81,10 @@ document.addEventListener("DOMContentLoaded", () => { initThemes(); toggle(Settings.useQuickCss); - addSettingsListener("useQuickCss", toggle); + SettingsStore.addChangeListener("useQuickCss", toggle); - addSettingsListener("themeLinks", initThemes); - addSettingsListener("enabledThemes", initThemes); + SettingsStore.addChangeListener("themeLinks", initThemes); + SettingsStore.addChangeListener("enabledThemes", initThemes); if (!IS_WEB) VencordNative.quickCss.addThemeChangeListener(initThemes); diff --git a/src/utils/settingsSync.ts b/src/utils/settingsSync.ts index 9a0f260a..843922f2 100644 --- a/src/utils/settingsSync.ts +++ b/src/utils/settingsSync.ts @@ -36,14 +36,14 @@ export async function importSettings(data: string) { if ("settings" in parsed && "quickCss" in parsed) { Object.assign(PlainSettings, parsed.settings); - await VencordNative.settings.set(JSON.stringify(parsed.settings, null, 4)); + await VencordNative.settings.set(parsed.settings); await VencordNative.quickCss.set(parsed.quickCss); } else throw new Error("Invalid Settings. Is this even a Vencord Settings file?"); } export async function exportSettings({ minify }: { minify?: boolean; } = {}) { - const settings = JSON.parse(VencordNative.settings.get()); + const settings = VencordNative.settings.get(); const quickCss = await VencordNative.quickCss.get(); return JSON.stringify({ settings, quickCss }, null, minify ? undefined : 4); } @@ -137,7 +137,7 @@ export async function putCloudSettings(manual?: boolean) { const { written } = await res.json(); PlainSettings.cloud.settingsSyncVersion = written; - VencordNative.settings.set(JSON.stringify(PlainSettings, null, 4)); + VencordNative.settings.set(PlainSettings); cloudSettingsLogger.info("Settings uploaded to cloud successfully"); @@ -222,7 +222,7 @@ export async function getCloudSettings(shouldNotify = true, force = false) { // sync with server timestamp instead of local one PlainSettings.cloud.settingsSyncVersion = written; - VencordNative.settings.set(JSON.stringify(PlainSettings, null, 4)); + VencordNative.settings.set(PlainSettings); cloudSettingsLogger.info("Settings loaded from cloud successfully"); if (shouldNotify) diff --git a/tsconfig.json b/tsconfig.json index 4563f3f8..e9c92640 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ "esnext.asynciterable", "esnext.symbol" ], - "module": "commonjs", + "module": "esnext", "moduleResolution": "node", "strict": true, "noImplicitAny": false, @@ -20,13 +20,15 @@ "baseUrl": "./src/", "paths": { + "@main/*": ["./main/*"], "@api/*": ["./api/*"], "@components/*": ["./components/*"], "@utils/*": ["./utils/*"], + "@shared/*": ["./shared/*"], "@webpack/types": ["./webpack/common/types"], "@webpack/common": ["./webpack/common"], "@webpack": ["./webpack/webpack"] } }, - "include": ["src/**/*"] + "include": ["src/**/*", "browser/**/*", "scripts/**/*"] }