enhance(frontend): improve some caches

packages/frontend/src/cache.ts

@@ -5,8 +5,9 @@
 
 import * as Misskey from 'misskey-js';
 import { Cache } from '@/scripts/cache';
+import { api } from '@/os';
 
-export const clipsCache = new Cache<Misskey.entities.Clip[]>(Infinity);
+export const clipsCache = new Cache<Misskey.entities.Clip[]>(1000 * 60 * 30, () => api('clips/list'));
-export const rolesCache = new Cache(Infinity);
+export const rolesCache = new Cache(1000 * 60 * 30, () => api('admin/roles/list'));
-export const userListsCache = new Cache<Misskey.entities.UserList[]>(Infinity);
+export const userListsCache = new Cache<Misskey.entities.UserList[]>(1000 * 60 * 30, () => api('users/lists/list'));
-export const antennasCache = new Cache<Misskey.entities.Antenna[]>(Infinity);
+export const antennasCache = new Cache<Misskey.entities.Antenna[]>(1000 * 60 * 30, () => api('antennas/list'));

packages/frontend/src/local-storage.ts

@@ -30,8 +30,6 @@ type Keys =
 	'message_drafts' |
 	'scratchpad' |
 	'debug' |
-	'userListsCache' |
-	'antennasCache' |
 	`miux:${string}` |
 	`ui:folder:${string}` |
 	`themes:${string}` |

packages/frontend/src/pages/my-antennas/index.vue

@@ -28,18 +28,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+import { onActivated } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { antennasCache } from '@/cache';
-import { api } from '@/os';
-import { onActivated } from 'vue';
 import { infoImageUrl } from '@/instance';
 
 const antennas = $computed(() => antennasCache.value.value ?? []);
 
 function fetch() {
-	antennasCache.fetch(() => api('antennas/list'));
+	antennasCache.fetch();
 }
 
 fetch();
@@ -62,7 +61,7 @@ definePageMetadata({
 });
 
 onActivated(() => {
-	antennasCache.fetch(() => api('antennas/list'));
+	antennasCache.fetch();
 });
 </script>
 

packages/frontend/src/pages/my-lists/index.vue

@@ -42,7 +42,7 @@ import { $i } from '@/account';
 const items = $computed(() => userListsCache.value.value ?? []);
 
 function fetch() {
-	userListsCache.fetch(() => os.api('users/lists/list'));
+	userListsCache.fetch();
 }
 
 fetch();

packages/frontend/src/pages/timeline.vue

@@ -39,6 +39,7 @@ import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { miLocalStorage } from '@/local-storage';
+import { antennasCache, userListsCache } from '@/cache';
 
 provide('shouldOmitHeaderTitle', true);
 
@@ -68,24 +69,17 @@ function top(): void {
 }
 
 async function chooseList(ev: MouseEvent): Promise<void> {
-	const cachedLists = miLocalStorage.getItemAsJson('userListsCache');
+	const lists = await userListsCache.fetch();
-	const lists = cachedLists ?? await os.api('users/lists/list');
 	const items = lists.map(list => ({
 		type: 'link' as const,
 		text: list.name,
 		to: `/timeline/list/${list.id}`,
 	}));
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
-	if (cachedLists == null) {
-		miLocalStorage.setItemAsJson('userListsCache', lists);
-	} else {
-		miLocalStorage.setItemAsJson('userListsCache', await os.api('users/lists/list'));
-	}
 }
 
 async function chooseAntenna(ev: MouseEvent): Promise<void> {
-	const cachedAntennas = miLocalStorage.getItemAsJson('antennasCache');
+	const antennas = await antennasCache.fetch();
-	const antennas = cachedAntennas ?? await os.api('antennas/list');
 	const items = antennas.map(antenna => ({
 		type: 'link' as const,
 		text: antenna.name,
@@ -93,11 +87,6 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
 		to: `/timeline/antenna/${antenna.id}`,
 	}));
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
-	if (cachedAntennas == null) {
-		miLocalStorage.setItemAsJson('antennasCache', antennas);
-	} else {
-		miLocalStorage.setItemAsJson('antennasCache', await os.api('antennas/list'));
-	}
 }
 
 async function chooseChannel(ev: MouseEvent): Promise<void> {

packages/frontend/src/scripts/cache.ts

@@ -9,9 +9,11 @@ export class Cache<T> {
 	private cachedAt: number | null = null;
 	public value = ref<T | undefined>();
 	private lifetime: number;
+	private fetcher: () => Promise<T>;
 
-	constructor(lifetime: Cache<never>['lifetime']) {
+	constructor(lifetime: Cache<never>['lifetime'], fetcher: () => Promise<T>) {
 		this.lifetime = lifetime;
+		this.fetcher = fetcher;
 	}
 
 	public set(value: T): void {
@@ -35,51 +37,17 @@ export class Cache<T> {
 
 	/**
 	 * キャッシュがあればそれを返し、無ければfetcherを呼び出して結果をキャッシュ&返します
-	 * optional: キャッシュが存在してもvalidatorでfalseを返すとキャッシュ無効扱いにします
 	 */
-	public async fetch(fetcher: () => Promise<T>, validator?: (cachedValue: T) => boolean): Promise<T> {
+	public async fetch(): Promise<T> {
 		const cachedValue = this.get();
 		if (cachedValue !== undefined) {
-			if (validator) {
+			// Cache HIT
-				if (validator(cachedValue)) {
+			return cachedValue;
-					// Cache HIT
-					return cachedValue;
-				}
-			} else {
-				// Cache HIT
-				return cachedValue;
-			}
 		}
 
 		// Cache MISS
-		const value = await fetcher();
+		const value = await this.fetcher();
 		this.set(value);
 		return value;
 	}
-
-	/**
-	 * キャッシュがあればそれを返し、無ければfetcherを呼び出して結果をキャッシュ&返します
-	 * optional: キャッシュが存在してもvalidatorでfalseを返すとキャッシュ無効扱いにします
-	 */
-	public async fetchMaybe(fetcher: () => Promise<T | undefined>, validator?: (cachedValue: T) => boolean): Promise<T | undefined> {
-		const cachedValue = this.get();
-		if (cachedValue !== undefined) {
-			if (validator) {
-				if (validator(cachedValue)) {
-					// Cache HIT
-					return cachedValue;
-				}
-			} else {
-				// Cache HIT
-				return cachedValue;
-			}
-		}
-
-		// Cache MISS
-		const value = await fetcher();
-		if (value !== undefined) {
-			this.set(value);
-		}
-		return value;
-	}
 }

packages/frontend/src/scripts/get-note-menu.ts

@@ -32,7 +32,7 @@ export async function getNoteClipMenu(props: {
 
 	const appearNote = isRenote ? props.note.renote as Misskey.entities.Note : props.note;
 
-	const clips = await clipsCache.fetch(() => os.api('clips/list'));
+	const clips = await clipsCache.fetch();
 	return [...clips.map(clip => ({
 		text: clip.name,
 		action: () => {

packages/frontend/src/scripts/get-user-menu.ts

@@ -170,7 +170,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-list',
 		text: i18n.ts.addToList,
 		children: async () => {
-			const lists = await userListsCache.fetch(() => os.api('users/lists/list'));
+			const lists = await userListsCache.fetch();
 			return lists.map(list => {
 				const isListed = ref(list.userIds.includes(user.id));
 				cleanups.push(watch(isListed, () => {
@@ -203,7 +203,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-antenna',
 		text: i18n.ts.addToAntenna,
 		children: async () => {
-			const antennas = await antennasCache.fetch(() => os.api('antennas/list'));
+			const antennas = await antennasCache.fetch();
 			const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`;
 			return antennas.filter((a) => a.src === 'users').map(antenna => ({
 				text: antenna.name,
@@ -234,7 +234,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 				icon: 'ti ti-badges',
 				text: i18n.ts.roles,
 				children: async () => {
-					const roles = await rolesCache.fetch(() => os.api('admin/roles/list'));
+					const roles = await rolesCache.fetch();
 
 					return roles.filter(r => r.target === 'manual').map(r => ({
 						text: r.name,