perf: ♻️ Use global instance of composable instead of an instance per component for identities, client and settings

composables/CacheRefresh.ts

@@ -1,14 +1,11 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { RolePermission } from "@lysand-org/client/types";
-import { useCurrentIdentity } from "./Identities";
 
 export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
     if (import.meta.server) {
         return;
     }
 
-    const identity = useCurrentIdentity();
-
     // Refresh custom emojis and instance data and me on every reload
     watchEffect(async () => {
         console.info("Refreshing emoji, instance and account cache");

composables/Client.ts

@@ -1,11 +1,8 @@
 import { LysandClient, type Token } from "@lysand-org/client";
-import { useCurrentIdentity } from "./Identities";
 
 export const useClient = (
     customToken: MaybeRef<Token | null> = null,
 ): Ref<LysandClient> => {
-    const identity = useCurrentIdentity();
-
     return computed(
         () =>
             new LysandClient(
@@ -25,3 +22,5 @@ export const useClient = (
             ),
     );
 };
+
+export const client = useClient();

composables/Identities.ts

@@ -5,72 +5,99 @@ import type {
     Instance,
     RolePermission,
 } from "@lysand-org/client/types";
-import { StorageSerializers } from "@vueuse/core";
+import { StorageSerializers, useLocalStorage } from "@vueuse/core";
+import { ref, watch } from "vue";
 
-export type Identity = {
+/**
+ * Represents an identity with associated tokens, account, instance, permissions, and emojis.
+ */
+export interface Identity {
     id: string;
     tokens: Token;
     account: Account;
     instance: Instance;
     permissions: RolePermission[];
     emojis: Emoji[];
-};
+}
 
-export const useIdentities = (): Ref<Identity[]> => {
+/**
+ * Composable to manage multiple identities.
+ * @returns A reactive reference to an array of identities.
+ */
+function useIdentities(): Ref<Identity[]> {
     return useLocalStorage<Identity[]>("lysand:identities", [], {
         serializer: StorageSerializers.object,
     });
-};
+}
 
-export const useCurrentIdentity = (): Ref<Identity | null> => {
-    const currentId = useLocalStorage<string | null>(
-        "lysand:identities:current",
-        null,
-    );
+export const identities = useIdentities();
 
-    const identities = useIdentities();
-    const current = ref(
-        identities.value.find((i) => i.id === currentId.value) ?? null,
-    );
+const currentId = useLocalStorage<string | null>(
+    "lysand:identities:current",
+    null,
+);
 
-    watch(identities, (ids) => {
-        if (ids.length === 0) {
-            current.value = null;
-        }
-    });
+const current = ref<Identity | null>(null);
 
+/**
+ * Composable to manage the current identity.
+ * @returns A reactive reference to the current identity or null if not set.
+ */
+function useCurrentIdentity(): Ref<Identity | null> {
+    // Initialize current identity
+    function updateCurrentIdentity() {
+        current.value =
+            identities.value.find((i) => i.id === currentId.value) ?? null;
+    }
+
+    // Watch for changes in identities
     watch(
-        current,
-        (newCurrent) => {
-            if (newCurrent) {
-                currentId.value = newCurrent.id;
-                // If the identity is updated, update the identity in the list
-                if (identities.value.find((i) => i.id === newCurrent.id)) {
-                    identities.value = identities.value.map((i) =>
-                        i.id === newCurrent.id ? newCurrent : i,
-                    );
-                }
-                // If the identity is not in the list, add it
-                else {
-                    identities.value.push(newCurrent);
-                }
-
-                // Force update the identities
-                identities.value = [...identities.value];
+        identities,
+        (ids) => {
+            if (ids.length === 0) {
+                current.value = null;
+                currentId.value = null;
             } else {
-                identities.value = identities.value.filter(
-                    (i) => i.id !== currentId.value,
-                );
-
-                if (identities.value.length > 0) {
-                    currentId.value = identities.value[0]?.id;
-                } else {
-                    currentId.value = null;
-                }
+                updateCurrentIdentity();
             }
         },
         { deep: true },
     );
 
+    // Watch for changes in currentId
+    watch(currentId, updateCurrentIdentity);
+
+    // Watch for changes in current identity
+    watch(
+        current,
+        (newCurrent) => {
+            if (newCurrent) {
+                currentId.value = newCurrent.id;
+                const index = identities.value.findIndex(
+                    (i) => i.id === newCurrent.id,
+                );
+                if (index !== -1) {
+                    // Update existing identity
+                    identities.value[index] = newCurrent;
+                } else {
+                    // Add new identity
+                    identities.value.push(newCurrent);
+                }
+            } else {
+                // Remove current identity
+                identities.value = identities.value.filter(
+                    (i) => i.id !== currentId.value,
+                );
+                currentId.value = identities.value[0]?.id ?? null;
+            }
+        },
+        { deep: true },
+    );
+
+    // Initial setup
+    updateCurrentIdentity();
+
     return current;
-};
+}
+
+export const identity = useCurrentIdentity();

composables/Instance.ts

@@ -2,8 +2,6 @@ import type { LysandClient } from "@lysand-org/client";
 import type { ExtendedDescription, Instance } from "@lysand-org/client/types";
 
 export const useInstance = () => {
-    const identity = useCurrentIdentity();
-
     return computed(() => identity.value?.instance);
 };
 

composables/Permissions.ts

@@ -1,5 +1,3 @@
 export const usePermissions = () => {
-    const identity = useCurrentIdentity();
-
     return computed(() => identity.value?.permissions ?? []);
 };

composables/Relationship.ts

@@ -1,6 +1,5 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { Relationship } from "@lysand-org/client/types";
-import { useCurrentIdentity } from "./Identities";
 
 export const useRelationship = (
     client: MaybeRef<LysandClient | null>,
@@ -9,7 +8,7 @@ export const useRelationship = (
     const relationship = ref(null as Relationship | null);
     const isLoading = ref(false);
 
-    if (!useCurrentIdentity().value) {
+    if (!identity.value) {
         return { relationship, isLoading };
     }
 

composables/ResolveMentions.ts

@@ -11,14 +11,18 @@ export const useResolveMentions = (
 
     const output = ref<Account[]>([]);
 
-    watch(mentions, async () => {
-        output.value = await Promise.all(
-            toValue(mentions).map(async (mention) => {
-                const response = await client.getAccount(mention.id);
-                return response.data;
-            }),
-        );
-    });
+    watch(
+        mentions,
+        async () => {
+            output.value = await Promise.all(
+                toValue(mentions).map(async (mention) => {
+                    const response = await client.getAccount(mention.id);
+                    return response.data;
+                }),
+            );
+        },
+        { immediate: true },
+    );
 
     return output;
 };

composables/Settings.ts

@@ -4,11 +4,11 @@ import {
     type SettingIds,
     type Settings,
     parseFromJson,
-    settings,
+    settings as settingsJson,
 } from "~/settings";
 
-export const useSettings = () => {
-    return useLocalStorage<Settings>("lysand:settings", settings, {
+const useSettings = () => {
+    return useLocalStorage<Settings>("lysand:settings", settingsJson, {
         serializer: {
             read(raw) {
                 const json = StorageSerializers.object.read(raw);
@@ -31,9 +31,9 @@ export const useSettings = () => {
     });
 };
 
-export const useSetting = <T extends Setting = Setting>(id: SettingIds) => {
-    const settings = useSettings();
+export const settings = useSettings();
 
+export const useSetting = <T extends Setting = Setting>(id: SettingIds) => {
     const setting: Ref<T> = ref<T>(
         settings.value.find((s) => s.id === id) as T,
     ) as unknown as Ref<T>;
@@ -52,5 +52,5 @@ export const useSetting = <T extends Setting = Setting>(id: SettingIds) => {
 };
 
 export const getSetting = <T extends Setting = Setting>(id: SettingIds) => {
-    return settings.find((s) => s.id === id) as T;
+    return settingsJson.find((s) => s.id === id) as T;
 };