enhance(frontend): improve some caches
This commit is contained in:
parent
cd6428715e
commit
25e030a707
|
@ -5,8 +5,9 @@
|
||||||
|
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import { Cache } from '@/scripts/cache';
|
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'));
|
||||||
|
|
|
@ -30,8 +30,6 @@ type Keys =
|
||||||
'message_drafts' |
|
'message_drafts' |
|
||||||
'scratchpad' |
|
'scratchpad' |
|
||||||
'debug' |
|
'debug' |
|
||||||
'userListsCache' |
|
|
||||||
'antennasCache' |
|
|
||||||
`miux:${string}` |
|
`miux:${string}` |
|
||||||
`ui:folder:${string}` |
|
`ui:folder:${string}` |
|
||||||
`themes:${string}` |
|
`themes:${string}` |
|
||||||
|
|
|
@ -28,18 +28,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { onActivated } from 'vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
import { antennasCache } from '@/cache';
|
import { antennasCache } from '@/cache';
|
||||||
import { api } from '@/os';
|
|
||||||
import { onActivated } from 'vue';
|
|
||||||
import { infoImageUrl } from '@/instance';
|
import { infoImageUrl } from '@/instance';
|
||||||
|
|
||||||
const antennas = $computed(() => antennasCache.value.value ?? []);
|
const antennas = $computed(() => antennasCache.value.value ?? []);
|
||||||
|
|
||||||
function fetch() {
|
function fetch() {
|
||||||
antennasCache.fetch(() => api('antennas/list'));
|
antennasCache.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch();
|
fetch();
|
||||||
|
@ -62,7 +61,7 @@ definePageMetadata({
|
||||||
});
|
});
|
||||||
|
|
||||||
onActivated(() => {
|
onActivated(() => {
|
||||||
antennasCache.fetch(() => api('antennas/list'));
|
antennasCache.fetch();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -42,7 +42,7 @@ import { $i } from '@/account';
|
||||||
const items = $computed(() => userListsCache.value.value ?? []);
|
const items = $computed(() => userListsCache.value.value ?? []);
|
||||||
|
|
||||||
function fetch() {
|
function fetch() {
|
||||||
userListsCache.fetch(() => os.api('users/lists/list'));
|
userListsCache.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch();
|
fetch();
|
||||||
|
|
|
@ -39,6 +39,7 @@ import { instance } from '@/instance';
|
||||||
import { $i } from '@/account';
|
import { $i } from '@/account';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
import { miLocalStorage } from '@/local-storage';
|
import { miLocalStorage } from '@/local-storage';
|
||||||
|
import { antennasCache, userListsCache } from '@/cache';
|
||||||
|
|
||||||
provide('shouldOmitHeaderTitle', true);
|
provide('shouldOmitHeaderTitle', true);
|
||||||
|
|
||||||
|
@ -68,24 +69,17 @@ function top(): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function chooseList(ev: MouseEvent): Promise<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 => ({
|
const items = lists.map(list => ({
|
||||||
type: 'link' as const,
|
type: 'link' as const,
|
||||||
text: list.name,
|
text: list.name,
|
||||||
to: `/timeline/list/${list.id}`,
|
to: `/timeline/list/${list.id}`,
|
||||||
}));
|
}));
|
||||||
os.popupMenu(items, ev.currentTarget ?? ev.target);
|
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> {
|
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 => ({
|
const items = antennas.map(antenna => ({
|
||||||
type: 'link' as const,
|
type: 'link' as const,
|
||||||
text: antenna.name,
|
text: antenna.name,
|
||||||
|
@ -93,11 +87,6 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
|
||||||
to: `/timeline/antenna/${antenna.id}`,
|
to: `/timeline/antenna/${antenna.id}`,
|
||||||
}));
|
}));
|
||||||
os.popupMenu(items, ev.currentTarget ?? ev.target);
|
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> {
|
async function chooseChannel(ev: MouseEvent): Promise<void> {
|
||||||
|
|
|
@ -9,9 +9,11 @@ export class Cache<T> {
|
||||||
private cachedAt: number | null = null;
|
private cachedAt: number | null = null;
|
||||||
public value = ref<T | undefined>();
|
public value = ref<T | undefined>();
|
||||||
private lifetime: number;
|
private lifetime: number;
|
||||||
|
private fetcher: () => Promise<T>;
|
||||||
|
|
||||||
constructor(lifetime: Cache<never>['lifetime']) {
|
constructor(lifetime: Cache<never>['lifetime'], fetcher: () => Promise<T>) {
|
||||||
this.lifetime = lifetime;
|
this.lifetime = lifetime;
|
||||||
|
this.fetcher = fetcher;
|
||||||
}
|
}
|
||||||
|
|
||||||
public set(value: T): void {
|
public set(value: T): void {
|
||||||
|
@ -35,51 +37,17 @@ export class Cache<T> {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* キャッシュがあればそれを返し、無ければfetcherを呼び出して結果をキャッシュ&返します
|
* キャッシュがあればそれを返し、無ければ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();
|
const cachedValue = this.get();
|
||||||
if (cachedValue !== undefined) {
|
if (cachedValue !== undefined) {
|
||||||
if (validator) {
|
// Cache HIT
|
||||||
if (validator(cachedValue)) {
|
return cachedValue;
|
||||||
// Cache HIT
|
|
||||||
return cachedValue;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Cache HIT
|
|
||||||
return cachedValue;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cache MISS
|
// Cache MISS
|
||||||
const value = await fetcher();
|
const value = await this.fetcher();
|
||||||
this.set(value);
|
this.set(value);
|
||||||
return 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,7 +32,7 @@ export async function getNoteClipMenu(props: {
|
||||||
|
|
||||||
const appearNote = isRenote ? props.note.renote as Misskey.entities.Note : props.note;
|
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 => ({
|
return [...clips.map(clip => ({
|
||||||
text: clip.name,
|
text: clip.name,
|
||||||
action: () => {
|
action: () => {
|
||||||
|
|
|
@ -170,7 +170,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
||||||
icon: 'ti ti-list',
|
icon: 'ti ti-list',
|
||||||
text: i18n.ts.addToList,
|
text: i18n.ts.addToList,
|
||||||
children: async () => {
|
children: async () => {
|
||||||
const lists = await userListsCache.fetch(() => os.api('users/lists/list'));
|
const lists = await userListsCache.fetch();
|
||||||
return lists.map(list => {
|
return lists.map(list => {
|
||||||
const isListed = ref(list.userIds.includes(user.id));
|
const isListed = ref(list.userIds.includes(user.id));
|
||||||
cleanups.push(watch(isListed, () => {
|
cleanups.push(watch(isListed, () => {
|
||||||
|
@ -203,7 +203,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
||||||
icon: 'ti ti-antenna',
|
icon: 'ti ti-antenna',
|
||||||
text: i18n.ts.addToAntenna,
|
text: i18n.ts.addToAntenna,
|
||||||
children: async () => {
|
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)}`;
|
const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`;
|
||||||
return antennas.filter((a) => a.src === 'users').map(antenna => ({
|
return antennas.filter((a) => a.src === 'users').map(antenna => ({
|
||||||
text: antenna.name,
|
text: antenna.name,
|
||||||
|
@ -234,7 +234,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
||||||
icon: 'ti ti-badges',
|
icon: 'ti ti-badges',
|
||||||
text: i18n.ts.roles,
|
text: i18n.ts.roles,
|
||||||
children: async () => {
|
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 => ({
|
return roles.filter(r => r.target === 'manual').map(r => ({
|
||||||
text: r.name,
|
text: r.name,
|
||||||
|
|
Loading…
Reference in New Issue