refactor(sw): use fully typed locales (#14470)

* refactor(sw): use fully typed locales

* fix(backend): enumerate achievement notification type
This commit is contained in:
zyoshoka
2024-08-30 10:58:11 +09:00
committed by GitHub
parent 3e85052754
commit 06855f769f
8 changed files with 89 additions and 120 deletions

View File

@@ -41,11 +41,10 @@ export async function createNotification<K extends keyof PushNotificationDataMap
async function composeNotification(data: PushNotificationDataMap[keyof PushNotificationDataMap]): Promise<[string, NotificationOptions] | null> {
const i18n = await (swLang.i18n ?? swLang.fetchLocale());
const { t } = i18n;
switch (data.type) {
/*
case 'driveFileCreated': // TODO (Server Side)
return [t('_notification.fileUploaded'), {
return [i18n.ts._notification.fileUploaded, {
body: body.name,
icon: body.url,
data
@@ -58,7 +57,7 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
const account = await getAccountFromId(data.userId);
if (!account) return null;
const userDetail = await cli.request('users/show', { userId: data.body.userId }, account.token);
return [t('_notification.youWereFollowed'), {
return [i18n.ts._notification.youWereFollowed, {
body: getUserName(data.body.user),
icon: data.body.user.avatarUrl,
badge: iconUrl('user-plus'),
@@ -66,14 +65,14 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
actions: userDetail.isFollowing ? [] : [
{
action: 'follow',
title: t('_notification._actions.followBack'),
title: i18n.ts._notification._actions.followBack,
},
],
}];
}
case 'mention':
return [t('_notification.youGotMention', { name: getUserName(data.body.user) }), {
return [i18n.tsx._notification.youGotMention({ name: getUserName(data.body.user) }), {
body: data.body.note.text ?? '',
icon: data.body.user.avatarUrl,
badge: iconUrl('at'),
@@ -81,13 +80,13 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
actions: [
{
action: 'reply',
title: t('_notification._actions.reply'),
title: i18n.ts._notification._actions.reply,
},
],
}];
case 'reply':
return [t('_notification.youGotReply', { name: getUserName(data.body.user) }), {
return [i18n.tsx._notification.youGotReply({ name: getUserName(data.body.user) }), {
body: data.body.note.text ?? '',
icon: data.body.user.avatarUrl,
badge: iconUrl('arrow-back-up'),
@@ -95,13 +94,13 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
actions: [
{
action: 'reply',
title: t('_notification._actions.reply'),
title: i18n.ts._notification._actions.reply,
},
],
}];
case 'renote':
return [t('_notification.youRenoted', { name: getUserName(data.body.user) }), {
return [i18n.tsx._notification.youRenoted({ name: getUserName(data.body.user) }), {
body: data.body.note.text ?? '',
icon: data.body.user.avatarUrl,
badge: iconUrl('repeat'),
@@ -115,7 +114,7 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
}];
case 'quote':
return [t('_notification.youGotQuote', { name: getUserName(data.body.user) }), {
return [i18n.tsx._notification.youGotQuote({ name: getUserName(data.body.user) }), {
body: data.body.note.text ?? '',
icon: data.body.user.avatarUrl,
badge: iconUrl('quote'),
@@ -123,19 +122,19 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
actions: [
{
action: 'reply',
title: t('_notification._actions.reply'),
title: i18n.ts._notification._actions.reply,
},
...((data.body.note.visibility === 'public' || data.body.note.visibility === 'home') ? [
{
action: 'renote',
title: t('_notification._actions.renote'),
title: i18n.ts._notification._actions.renote,
},
] : []),
],
}];
case 'note':
return [t('_notification.newNote') + ': ' + getUserName(data.body.user), {
return [i18n.ts._notification.newNote + ': ' + getUserName(data.body.user), {
body: data.body.note.text ?? '',
icon: data.body.user.avatarUrl,
data,
@@ -178,7 +177,7 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
}
case 'receiveFollowRequest':
return [t('_notification.youReceivedFollowRequest'), {
return [i18n.ts._notification.youReceivedFollowRequest, {
body: getUserName(data.body.user),
icon: data.body.user.avatarUrl,
badge: iconUrl('user-plus'),
@@ -186,17 +185,17 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
actions: [
{
action: 'accept',
title: t('accept'),
title: i18n.ts.accept,
},
{
action: 'reject',
title: t('reject'),
title: i18n.ts.reject,
},
],
}];
case 'followRequestAccepted':
return [t('_notification.yourFollowRequestAccepted'), {
return [i18n.ts._notification.yourFollowRequestAccepted, {
body: getUserName(data.body.user),
icon: data.body.user.avatarUrl,
badge: iconUrl('circle-check'),
@@ -204,15 +203,15 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
}];
case 'achievementEarned':
return [t('_notification.achievementEarned'), {
body: t(`_achievements._types._${data.body.achievement}.title`),
return [i18n.ts._notification.achievementEarned, {
body: i18n.ts._achievements._types[`_${data.body.achievement}`].title,
badge: iconUrl('medal'),
data,
tag: `achievement:${data.body.achievement}`,
}];
case 'pollEnded':
return [t('_notification.pollEnded'), {
return [i18n.ts._notification.pollEnded, {
body: data.body.note.text ?? '',
badge: iconUrl('chart-arrows'),
data,
@@ -226,8 +225,8 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
}];
case 'test':
return [t('_notification.testNotification'), {
body: t('_notification.notificationWillBeDisplayedLikeThis'),
return [i18n.ts._notification.testNotification, {
body: i18n.ts._notification.notificationWillBeDisplayedLikeThis,
badge: iconUrl('bell'),
data,
}];
@@ -236,7 +235,7 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
return null;
}
case 'unreadAntennaNote':
return [t('_notification.unreadAntennaNote', { name: data.body.antenna.name }), {
return [i18n.tsx._notification.unreadAntennaNote({ name: data.body.antenna.name }), {
body: `${getUserName(data.body.note.user)}: ${data.body.note.text ?? ''}`,
icon: data.body.note.user.avatarUrl,
badge: iconUrl('antenna'),
@@ -252,7 +251,6 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
export async function createEmptyNotification(): Promise<void> {
return new Promise<void>(async res => {
const i18n = await (swLang.i18n ?? swLang.fetchLocale());
const { t } = i18n;
await globalThis.registration.showNotification(
(new URL(origin)).host,
@@ -264,11 +262,11 @@ export async function createEmptyNotification(): Promise<void> {
actions: [
{
action: 'markAllAsRead',
title: t('markAllAsRead'),
title: i18n.ts.markAllAsRead,
},
{
action: 'settings',
title: t('notificationSettings'),
title: i18n.ts.notificationSettings,
},
],
data: {},

View File

@@ -1,37 +0,0 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
export type Locale = { [key: string]: string | Locale };
export class I18n<T extends Locale = Locale> {
public ts: T;
constructor(locale: T) {
this.ts = locale;
//#region BIND
this.t = this.t.bind(this);
//#endregion
}
// string にしているのは、ドット区切りでのパス指定を許可するため
// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
public t(key: string, args?: Record<string, string>): string {
try {
let str = key.split('.').reduce<Locale | Locale[keyof Locale]>((o, i) => o[i], this.ts);
if (typeof str !== 'string') throw new Error();
if (args) {
for (const [k, v] of Object.entries(args)) {
str = str.replace(`{${k}}`, v);
}
}
return str;
} catch (err) {
console.warn(`missing localization '${key}'`);
return key;
}
}
}

View File

@@ -7,7 +7,8 @@
* Language manager for SW
*/
import { get, set } from 'idb-keyval';
import { I18n, type Locale } from '@/scripts/i18n.js';
import { I18n } from '../../../frontend/src/scripts/i18n.js';
import type { Locale } from '../../../../locales/index.js';
class SwLang {
public cacheName = `mk-cache-${_VERSION_}`;
@@ -23,7 +24,7 @@ class SwLang {
return this.fetchLocale();
}
public i18n: Promise<I18n> | null = null;
public i18n: Promise<I18n<Locale>> | null = null;
public fetchLocale(): Promise<I18n<Locale>> {
return (this.i18n = this._fetch());

View File

@@ -6,7 +6,8 @@
import { get } from 'idb-keyval';
import * as Misskey from 'misskey-js';
import type { PushNotificationDataMap } from '@/types.js';
import type { I18n, Locale } from '@/scripts/i18n.js';
import type { I18n } from '../../frontend/src/scripts/i18n.js';
import type { Locale } from '../../../locales/index.js';
import { createEmptyNotification, createNotification } from '@/scripts/create-notification.js';
import { swLang } from '@/scripts/lang.js';
import * as swos from '@/scripts/operations.js';
@@ -30,8 +31,8 @@ globalThis.addEventListener('activate', ev => {
async function offlineContentHTML() {
const i18n = await (swLang.i18n ?? swLang.fetchLocale()) as Partial<I18n<Locale>>;
const messages = {
title: i18n.ts?._offlineScreen?.title ?? 'Offline - Could not connect to server',
header: i18n.ts?._offlineScreen?.header ?? 'Could not connect to server',
title: i18n.ts?._offlineScreen.title ?? 'Offline - Could not connect to server',
header: i18n.ts?._offlineScreen.header ?? 'Could not connect to server',
reload: i18n.ts?.reload ?? 'Reload',
};