wip

packages/backend/src/server/api/endpoints/emojis.ts

@@ -10,6 +10,8 @@ export const meta = {
 	tags: ['meta'],
 
 	requireCredential: false,
+	allowGet: true,
+	cacheSec: 60,
 
 	res: {
 		type: 'object',
@@ -75,7 +77,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				},
 				cache: {
 					id: 'meta_emojis',
-					milliseconds: 3600000,	// 1 hour
+					milliseconds: 60000,	// 1 minute
 				},
 			});
 

packages/frontend/src/components/MkAutocomplete.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { markRaw, ref, shallowRef, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import sanitizeHtml from 'sanitize-html';
 import contains from '@/scripts/contains';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
@@ -61,59 +61,59 @@ type EmojiDef = {
 
 const lib = emojilist.filter(x => x.category !== 'flags');
 
-const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+const emojiDb = computed(() => {
+	const char2path = defaultStore.reactiveState.emojiStyle.value === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
 
-const emjdb: EmojiDef[] = lib.map(x => ({
+	const unicodeEmojiDB: EmojiDef[] = lib.map(x => ({
-	emoji: x.char,
+		emoji: x.char,
-	name: x.name,
-	url: char2path(x.char),
-}));
-
-for (const x of lib) {
-	if (x.keywords) {
-		for (const k of x.keywords) {
-			emjdb.push({
-				emoji: x.char,
-				name: k,
-				aliasOf: x.name,
-				url: char2path(x.char),
-			});
-		}
-	}
-}
-
-emjdb.sort((a, b) => a.name.length - b.name.length);
-
-//#region Construct Emoji DB
-const emojiDefinitions: EmojiDef[] = [];
-
-for (const x of customEmojis) {
-	emojiDefinitions.push({
 		name: x.name,
-		emoji: `:${x.name}:`,
+		url: char2path(x.char),
-		isCustomEmoji: true,
+	}));
-	});
 
-	if (x.aliases) {
+	for (const x of lib) {
-		for (const alias of x.aliases) {
+		if (x.keywords) {
-			emojiDefinitions.push({
+			for (const k of x.keywords) {
-				name: alias,
+				unicodeEmojiDB.push({
-				aliasOf: x.name,
+					emoji: x.char,
-				emoji: `:${x.name}:`,
+					name: k,
-				isCustomEmoji: true,
+					aliasOf: x.name,
-			});
+					url: char2path(x.char),
+				});
+			}
 		}
 	}
-}
 
-emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+	unicodeEmojiDB.sort((a, b) => a.name.length - b.name.length);
 
-const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
+	//#region Construct Emoji DB
-//#endregion
+	const customEmojiDB: EmojiDef[] = [];
+
+	for (const x of customEmojis.value) {
+		customEmojiDB.push({
+			name: x.name,
+			emoji: `:${x.name}:`,
+			isCustomEmoji: true,
+		});
+
+		if (x.aliases) {
+			for (const alias of x.aliases) {
+				customEmojiDB.push({
+					name: alias,
+					aliasOf: x.name,
+					emoji: `:${x.name}:`,
+					isCustomEmoji: true,
+				});
+			}
+		}
+	}
+
+	customEmojiDB.sort((a, b) => a.name.length - b.name.length);
+
+	return markRaw([ ...customEmojiDB, ...unicodeEmojiDB ]);
+});
 
 export default {
 	emojiDb,
-	emojiDefinitions,
 	emojilist,
 };
 </script>
@@ -230,7 +230,7 @@ function exec() {
 	} else if (props.type === 'emoji') {
 		if (!props.q || props.q === '') {
 			// 最近使った絵文字をサジェスト
-			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.value.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
 			return;
 		}
 

packages/frontend/src/components/MkEmojiPicker.vue

@@ -138,7 +138,7 @@ watch(q, () => {
 
 	const searchCustom = () => {
 		const max = 8;
-		const emojis = customEmojis;
+		const emojis = customEmojis.value;
 		const matches = new Set<Misskey.entities.CustomEmoji>();
 
 		const exactMatch = emojis.find(emoji => emoji.name === newQ);
@@ -323,7 +323,7 @@ function done(query?: string): boolean | void {
 	if (query == null || typeof query !== 'string') return;
 
 	const q2 = query.replace(/:/g, '');
-	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+	const exactMatchCustom = customEmojis.value.find(emoji => emoji.name === q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;

packages/frontend/src/custom-emojis.ts

@@ -1,20 +1,22 @@
-import { api } from './os';
+import { apiGet } from './os';
 import { miLocalStorage } from './local-storage';
+import { shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 
 const storageCache = miLocalStorage.getItem('emojis');
-export let customEmojis = storageCache ? JSON.parse(storageCache) : [];
+export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
 
 fetchCustomEmojis();
 
 export async function fetchCustomEmojis() {
 	const now = Date.now();
 	const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
-	if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
+	if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60) return;
 
-	const res = await api('emojis', {});
+	const res = await apiGet('emojis', {});
 
-	customEmojis = res.emojis;
+	customEmojis.value = res.emojis;
-	miLocalStorage.setItem('emojis', JSON.stringify(customEmojis));
+	miLocalStorage.setItem('emojis', JSON.stringify(res.emojis));
 	miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
 }
 
@@ -23,7 +25,7 @@ export function getCustomEmojiCategories() {
 	if (cachedCategories) return cachedCategories;
 
 	const categories = new Set();
-	for (const emoji of customEmojis) {
+	for (const emoji of customEmojis.value) {
 		categories.add(emoji.category);
 	}
 	const res = Array.from(categories);
@@ -36,7 +38,7 @@ export function getCustomEmojiTags() {
 	if (cachedTags) return cachedTags;
 
 	const tags = new Set();
-	for (const emoji of customEmojis) {
+	for (const emoji of customEmojis.value) {
 		for (const tag of emoji.aliases) {
 			tags.add(tag);
 		}

packages/frontend/src/pages/about.emojis.vue

@@ -41,11 +41,12 @@ import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
 import { customEmojis, getCustomEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
 import { i18n } from '@/i18n';
+import * as Misskey from 'misskey-js';
 
 const customEmojiCategories = getCustomEmojiCategories();
 const customEmojiTags = getCustomEmojiTags();
 let q = $ref('');
-let searchEmojis = $ref(null);
+let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
 let selectedTags = $ref(new Set());
 
 function search() {
@@ -55,9 +56,9 @@ function search() {
 	}
 
 	if (selectedTags.size === 0) {
-		searchEmojis = customEmojis.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
+		searchEmojis = customEmojis.value.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
 	} else {
-		searchEmojis = customEmojis.filter(emoji => (emoji.name.includes(q) || emoji.aliases.includes(q)) && [...selectedTags].every(t => emoji.aliases.includes(t)));
+		searchEmojis = customEmojis.value.filter(emoji => (emoji.name.includes(q) || emoji.aliases.includes(q)) && [...selectedTags].every(t => emoji.aliases.includes(t)));
 	}
 }
 

packages/frontend/src/pages/custom-emojis-manager.vue

@@ -79,6 +79,7 @@ import { selectFile, selectFiles } from '@/scripts/select-file';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { fetchCustomEmojis } from '@/custom-emojis';
 
 const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
@@ -130,6 +131,7 @@ const add = async (ev: MouseEvent) => {
 	})));
 	promise.then(() => {
 		emojisPaginationComponent.value.reload();
+		fetchCustomEmojis();
 	});
 	os.promiseDialog(promise);
 };
@@ -147,6 +149,7 @@ const edit = (emoji) => {
 			} else if (result.deleted) {
 				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
 			}
+			fetchCustomEmojis();
 		},
 	}, 'closed');
 };
@@ -220,6 +223,7 @@ const setCategoryBulk = async () => {
 		category: result,
 	});
 	emojisPaginationComponent.value.reload();
+	fetchCustomEmojis();
 };
 
 const addTagBulk = async () => {
@@ -232,6 +236,7 @@ const addTagBulk = async () => {
 		aliases: result.split(' '),
 	});
 	emojisPaginationComponent.value.reload();
+	fetchCustomEmojis();
 };
 
 const removeTagBulk = async () => {
@@ -244,6 +249,7 @@ const removeTagBulk = async () => {
 		aliases: result.split(' '),
 	});
 	emojisPaginationComponent.value.reload();
+	fetchCustomEmojis();
 };
 
 const setTagBulk = async () => {
@@ -256,6 +262,7 @@ const setTagBulk = async () => {
 		aliases: result.split(' '),
 	});
 	emojisPaginationComponent.value.reload();
+	fetchCustomEmojis();
 };
 
 const delBulk = async () => {
@@ -268,6 +275,7 @@ const delBulk = async () => {
 		ids: selectedEmojis.value,
 	});
 	emojisPaginationComponent.value.reload();
+	fetchCustomEmojis();
 };
 
 const headerActions = $computed(() => [{

packages/frontend/src/pages/mfm-cheat-sheet.vue

@@ -313,7 +313,7 @@ let preview_mention = $ref('@example');
 let preview_hashtag = $ref('#test');
 let preview_url = $ref('https://example.com');
 let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(customEmojis.length ? `:${customEmojis[0].name}:` : ':emojiname:');
+let preview_emoji = $ref(customEmojis.value.length ? `:${customEmojis.value[0].name}:` : ':emojiname:');
 let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
 let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
 let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);

packages/frontend/src/scripts/aiscript/api.ts

@@ -10,7 +10,7 @@ export function createAiScriptEnv(opts) {
 		USER_ID: $i ? values.STR($i.id) : values.NULL,
 		USER_NAME: $i ? values.STR($i.name) : values.NULL,
 		USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
-		CUSTOM_EMOJIS: utils.jsToVal(customEmojis),
+		CUSTOM_EMOJIS: utils.jsToVal(customEmojis.value),
 		'Mk:dialog': values.FN_NATIVE(async ([title, text, type]) => {
 			await os.alert({
 				type: type ? type.value : 'info',