Begin migration to Alu.store.get for fetching values, stored in global Alu namespace.

src/alu.d.ts

@@ -0,0 +1,11 @@
+export declare global {
+  namespace Alu {
+    let store: AluStore;
+
+    type DefaultKeys = {
+      [key: string]: AluKey;
+    };
+    type Key = Record<string, string>;
+    type ValidStoreKeys = "proxy" | "search" | "openpage" | "wisp" | "bareUrl" | "transport" | "searxng" | "theme" | "lang" | "cloak";
+  }
+}

src/components/CloakLoader.astro

@@ -1,20 +1,19 @@
 <script>
   function loadCloak() {
-    const localStorageCloak = localStorage.getItem("alu__selectedCloak");
-    if (localStorageCloak) {
-      const parsedCloak = JSON.parse(localStorageCloak);
-      if (parsedCloak) {
-        if (parsedCloak.name != "None") {
-          document.title = parsedCloak.name;
+    const cloak = Alu.store.get("cloak");
+    if (cloak) {
+      if (cloak) {
+        if (cloak.name != "None") {
+          document.title = cloak.name;
           let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
           if (!link) {
             link = document.createElement("link");
             link.rel = "icon";
           }
-          if (!parsedCloak.icon.startsWith("http")) {
-            parsedCloak.icon = window.location.origin + parsedCloak.icon;
+          if (!cloak.icon.startsWith("http")) {
+            cloak.icon = window.location.origin + cloak.icon;
           }
-          link.href = `/custom-favicon?url=${parsedCloak.icon}`;
+          link.href = `/custom-favicon?url=${cloak.icon}`;
           document.getElementsByTagName("head")[0].appendChild(link);
         }
       }

src/components/ProxyRegistrar.astro

@@ -94,18 +94,17 @@
     await loadPageExtensions();
     // The setTimeout is because service workers are a little silly and can take a while longer to register despite .then being called, which causes a bug on the first load.
     setTimeout(async () => {
-      const openWith = localStorage.getItem("alu__selectedOpenWith");
-      const currentProxy = localStorage.getItem("alu__selectedProxy");
+      const openWith = Alu.store.get("openpage");
+      const proxy = Alu.store.get("proxy");
       let url = input!.value.trim();
       if (!isUrl(url)) url = getSearchEngine() + url;
       else if (!(url.startsWith("https://") || url.startsWith("http://"))) url = "http://" + url;
       if (openWith) {
-        const openWithParsed = JSON.parse(openWith);
-        if (openWithParsed.value === "newTab" || (currentProxy && JSON.parse(currentProxy).value === "rammerhead")) {
+        if (openWith.value === "newTab" || proxy.value === "rammerhead") {
           window.open(await getProxyURL(), "_blank");
           return;
         }
-        if (openWithParsed.value === "about:blank") {
+        if (openWith.value === "about:blank") {
           // Open about:blank window and inject iframe into it
           const newWindow = window.open("about:blank", "_blank");
           const newWindowDocument = newWindow!.document;
@@ -192,9 +191,8 @@
           }
         };
         shareButton.onclick = () => {
-          const currentProxy = localStorage.getItem("alu__selectedProxy");
           const proxyFrame = document.getElementById("proxy-frame") as HTMLIFrameElement;
-          if (currentProxy && JSON.parse(currentProxy).value === "rammerhead") {
+          if (proxy.value === "rammerhead") {
             navigator.clipboard.writeText(window.location.origin + "/" + getCookie("rammerhead-session") + "/" + input!.value.trim());
           } else {
             navigator.clipboard.writeText(getUVProxyURL(proxyFrame));
@@ -239,11 +237,8 @@
   }
 
   function getSearchEngine() {
-    const localStorageSearchEngine = localStorage.getItem("alu__search_engine");
-    if (!localStorageSearchEngine) {
-      return "https://google.com/search?q=";
-    }
-    switch (JSON.parse(localStorage.getItem("alu__search_engine") as string).value.toLowerCase()) {
+    const searchEngine = Alu.store.get("search");
+    switch (searchEngine.value.toLowerCase()) {
       case "google": {
         return "https://google.com/search?q=";
       }
@@ -254,13 +249,10 @@
         return "https://search.brave.com/search?q=";
       }
       case "searx": {
-        let localStorageURL = localStorage.getItem("alu__searxngUrl");
-        if (localStorageURL) {
-          if (localStorageURL == "") return "https://searxng.site/search?q=";
+        const searxngURL = Alu.store.get("searxng");
         // Ugly hack to remove the trailing slash :)
-          if (localStorageURL.endsWith("/")) localStorageURL = localStorageURL.slice(0, -1);
-          return localStorageURL + "/search?q=";
-        } else return "https://searxng.site/search?q=";
+        if (searxngURL.value.endsWith("/")) searxngURL.value = searxngURL.value.slice(0, -1);
+        return searxngURL.value + "/search?q=";
       }
       default: {
         return "https://google.com/search?q=";
@@ -269,17 +261,14 @@
   }
 
   function getProxyPreference() {
-    const localStorageItem = localStorage.getItem("alu__selectedProxy");
-
-    if (!localStorageItem) return "uv";
-
-    switch (JSON.parse(localStorageItem).value.toLowerCase()) {
+    const proxy = Alu.store.get("proxy");
+    switch (proxy.value) {
       case "ultraviolet":
         return "ultraviolet";
       case "rammerhead":
         return "rammerhead";
       default:
-        return "uv";
+        return "ultraviolet";
     }
   }
 

src/components/ThemeLoader.astro

@@ -2,18 +2,8 @@
   import IDBManager from "@components/ts/IDBManager";
 
   function switchTheme() {
-    const currentTheme = localStorage.getItem("alu__selectedTheme");
-
-    if (currentTheme) {
-      document.documentElement.setAttribute("data-theme", JSON.parse(currentTheme).value.toLowerCase());
-      const footer = document.getElementById("footer");
-      if (footer) {
-        footer.dataset.theme = JSON.parse(currentTheme).value.toLowerCase();
-      }
-    } else {
-      localStorage.setItem("alu__selectedTheme", JSON.stringify({ name: "Alu", value: "alu" }));
-      switchTheme();
-    }
+    const currentTheme = Alu.store.get("theme");
+    document.documentElement.setAttribute("data-theme", currentTheme.value);
   }
 
   switchTheme();

src/components/ts/AluStore.ts

@@ -1,4 +1,4 @@
-const KEYSTORE: AluDefaultKeys = {
+const KEYSTORE: Alu.DefaultKeys = {
   proxy: {
     name: "Ultraviolet",
     value: "ultraviolet",
@@ -13,16 +13,12 @@ const KEYSTORE: AluDefaultKeys = {
   },
   wisp: {
     name: "Alu (US)",
-    value: "alu",
+    value: "wss://aluu.xyz/wisp/",
   },
   bareUrl: {
     name: `${window.location.protocol}//${window.location.host}/bare/`,
     value: `${window.location.protocol}//${window.location.host}/bare/`,
   },
-  theme: {
-    name: "Alu",
-    value: "alu",
-  },
   transport: {
     name: "Epoxy",
     value: "epoxy",
@@ -31,6 +27,14 @@ const KEYSTORE: AluDefaultKeys = {
     name: "https://searxng.site",
     value: "https://searxng.site",
   },
+  theme: {
+    name: "Alu",
+    value: "alu",
+  },
+  lang: {
+    name: "English",
+    value: "en",
+  },
 };
 
 if (localStorage.getItem("AluStore") === null) {
@@ -38,7 +42,7 @@ if (localStorage.getItem("AluStore") === null) {
 }
 
 class AluStore {
-  private store: AluDefaultKeys = KEYSTORE;
+  private store: Alu.DefaultKeys;
   constructor() {
     const localstore = localStorage.getItem("AluStore");
     if (!localstore) {
@@ -46,19 +50,24 @@ class AluStore {
     }
     this.store = JSON.parse(localStorage.getItem("AluStore") || "{}");
   }
-  public getStore(): AluDefaultKeys {
+  public getStore(): Alu.DefaultKeys {
     return this.store;
   }
-  public get(key: string): AluKey {
+  public get(key: Alu.ValidStoreKeys): Alu.Key {
     return this.store[key];
   }
-  public set(key: string, value: AluKey): void {
+  public set(key: Alu.ValidStoreKeys, value: Alu.Key): void {
     this.store[key] = value;
     this.save();
   }
+  public reset(key: Alu.ValidStoreKeys) {
+    this.set(key, KEYSTORE[key]);
+  }
   private save(): void {
     localStorage.setItem("AluStore", JSON.stringify(this.store));
   }
 }
 
-window.AluStore = new AluStore();
+globalThis.Alu = {
+  store: new AluStore(),
+};

src/components/ts/TransportManager.ts

@@ -1,38 +1,25 @@
 import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
 
-type transportConfig =
-  | {
+type transportConfig = {
   wisp: string;
-      wasm?: string;
-    }
-  | string;
-
-export const wispURLDefault = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
+};
 export default class TransportManager {
+  private transport: Alu.Key;
   connection: BareMuxConnection;
-  private transport: string = "/epoxy/index.mjs";
 
-  constructor(transport?: string) {
+  constructor(transport?: Alu.Key) {
     this.connection = new BareMuxConnection("/baremux/worker.js");
     if (transport) {
       this.transport = transport;
     }
-    if (localStorage.getItem("alu__selectedTransport") != null && !transport) {
-      const selectedTransport = JSON.parse(localStorage.getItem("alu__selectedTransport")!) as { value: string };
-      this.transport = selectedTransport.value;
-    }
-    if (localStorage.getItem("alu__selectedTransport") == null) {
-      // Set the default transport for the next reload.
-      localStorage.setItem("alu__selectedTransport", JSON.stringify({ value: this.transport }));
-    }
+    this.transport = Alu.store.get("transport");
   }
   async updateTransport() {
     try {
-      const selectedTransport = JSON.parse(localStorage.getItem("alu__selectedTransport")!) as { value: string };
-      await this.setTransport(selectedTransport.value);
+      const selectedTransport = Alu.store.get("transport");
+      await this.setTransport(selectedTransport);
     } catch {
-      console.log("Failed to update transport! Falling back to old transport.");
-      await this.setTransport(this.transport);
+      throw new Error("Failed to update transport! Try reloading.");
     }
   }
 
@@ -40,20 +27,24 @@ export default class TransportManager {
     return this.transport;
   }
 
-  async setTransport(transport: string, wispURL = wispURLDefault) {
+  async setTransport(transport: Alu.Key, wispURL: string = Alu.store.get("wisp").value) {
     this.transport = transport;
-    let transportConfig: transportConfig = { wisp: wispURL };
+    const transportConfig: transportConfig = { wisp: wispURL };
 
-    if (this.transport == "/baremod/index.mjs") {
-      transportConfig = localStorage.getItem("alu__bareUrl") || window.location.origin + "/bare/";
+    if (this.transport.value == "/baremod/index.mjs") {
+      return await this.connection.setTransport(transport.value, [Alu.store.get("bareUrl").value]);
     }
 
-    await this.connection.setTransport(transport, [transportConfig]);
+    await this.connection.setTransport(transport.value, [transportConfig]);
   }
 }
 
 export const TransportMgr = new TransportManager();
 
+export async function initTransport() {
+  await TransportMgr.setTransport(TransportMgr.getTransport(), Alu.store.get("wisp").value);
+}
+
 export async function registerAndUpdateSW(): Promise<void> {
   try {
     const reg = await navigator.serviceWorker.register("/sw.js", {
@@ -65,7 +56,3 @@ export async function registerAndUpdateSW(): Promise<void> {
     console.error("Service worker registration failed: ", err);
   }
 }
-
-export async function initTransport() {
-  await TransportMgr.setTransport(TransportMgr.getTransport(), localStorage.getItem("alu__wispUrl") || wispURLDefault);
-}

src/components/ts/marketplace.ts

@@ -167,12 +167,9 @@ async function uninstallExtension(slug: string): Promise<InstallReturn> {
         reject({ code: EXT_RETURN.INSTALL_FAILED, slug: slug });
       }
       if (ext.result.type === "theme") {
-        const currTheme = localStorage.getItem("alu__selectedTheme");
-        if (currTheme) {
-          if (JSON.parse(currTheme).value == ext.result.themeName) {
-            console.log("Reverting theme to default!");
-            localStorage.setItem("alu__selectedTheme", JSON.stringify({ name: "Alu", value: "alu" }));
-          }
+        const theme = Alu.store.get("theme");
+        if (theme.value == ext.result.themeName) {
+          Alu.store.reset("theme");
         }
       }
       const deleteRequest = store.delete(slug);

src/i18n/ui.ts

@@ -1,9 +1,9 @@
-import en from "./en.json";
-import es from "./es.json";
-import fr from "./fr.json";
-import zh from "./zh.json";
-import jp from "./jp.json";
-import ru from "./ru.json";
+import en from "./locale/en.json";
+import es from "./locale/es.json";
+import fr from "./locale/fr.json";
+import zh from "./locale/zh.json";
+import jp from "./locale/jp.json";
+import ru from "./locale/ru.json";
 
 export const defaultLang = "en";
 

src/types.d.ts

@@ -76,9 +76,3 @@ type WispData = {
   server: WispServer;
   time: number;
 };
-
-type AluKey = Record<string, string>;
-
-type AluDefaultKeys = {
-  [key: string]: AluKey;
-};