laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 89 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/backend/src/models/json-schema/notification.ts
View File

@ -3,6 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { ACHIEVEMENT_TYPES } from '@/core/AchievementService.js';
import { notificationTypes } from '@/types.js'; import { notificationTypes } from '@/types.js';
const baseSchema = { const baseSchema = {
@ -294,6 +295,7 @@ export const packedNotificationSchema = {
achievement: { achievement: {
type: 'string', type: 'string',
optional: false, nullable: false, optional: false, nullable: false,
enum: ACHIEVEMENT_TYPES,
}, },
}, },
}, { }, {

49
packages/frontend/src/scripts/i18n.ts
View File

@ -137,7 +137,6 @@ export class I18n<T extends ILocale> {
return this.tsxCache = new Proxy(this.locale, new Handler()) as unknown as Tsx<T>; return this.tsxCache = new Proxy(this.locale, new Handler()) as unknown as Tsx<T>;
} }
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (this.tsxCache) { if (this.tsxCache) {
return this.tsxCache; return this.tsxCache;
} }
@ -244,51 +243,3 @@ export class I18n<T extends ILocale> {
return str; return str;
} }
} }
if (import.meta.vitest) {
const { describe, expect, it } = import.meta.vitest;
describe('i18n', () => {
it('t', () => {
const i18n = new I18n({
foo: 'foo',
bar: {
baz: 'baz',
qux: 'qux {0}' as unknown as ParameterizedString<'0'>,
quux: 'quux {0} {1}' as unknown as ParameterizedString<'0' | '1'>,
},
});
expect(i18n.t('foo')).toBe('foo');
expect(i18n.t('bar.baz')).toBe('baz');
expect(i18n.tsx.bar.qux({ 0: 'hoge' })).toBe('qux hoge');
expect(i18n.tsx.bar.quux({ 0: 'hoge', 1: 'fuga' })).toBe('quux hoge fuga');
});
it('ts', () => {
const i18n = new I18n({
foo: 'foo',
bar: {
baz: 'baz',
qux: 'qux {0}' as unknown as ParameterizedString<'0'>,
quux: 'quux {0} {1}' as unknown as ParameterizedString<'0' | '1'>,
},
});
expect(i18n.ts.foo).toBe('foo');
expect(i18n.ts.bar.baz).toBe('baz');
});
it('tsx', () => {
const i18n = new I18n({
foo: 'foo',
bar: {
baz: 'baz',
qux: 'qux {0}' as unknown as ParameterizedString<'0'>,
quux: 'quux {0} {1}' as unknown as ParameterizedString<'0' | '1'>,
},
});
expect(i18n.tsx.bar.qux({ 0: 'hoge' })).toBe('qux hoge');
expect(i18n.tsx.bar.quux({ 0: 'hoge', 1: 'fuga' })).toBe('quux hoge fuga');
});
});
}

52
packages/frontend/test/i18n.test.ts Normal file
View File

@ -0,0 +1,52 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { describe, expect, it } from 'vitest';
import { I18n } from '@/scripts/i18n.js';
import { ParameterizedString } from '../../../locales/index.js';
describe('i18n', () => {
it('t', () => {
const i18n = new I18n({
foo: 'foo',
bar: {
baz: 'baz',
qux: 'qux {0}' as unknown as ParameterizedString<'0'>,
quux: 'quux {0} {1}' as unknown as ParameterizedString<'0' | '1'>,
},
});
expect(i18n.t('foo')).toBe('foo');
expect(i18n.t('bar.baz')).toBe('baz');
expect(i18n.tsx.bar.qux({ 0: 'hoge' })).toBe('qux hoge');
expect(i18n.tsx.bar.quux({ 0: 'hoge', 1: 'fuga' })).toBe('quux hoge fuga');
});
it('ts', () => {
const i18n = new I18n({
foo: 'foo',
bar: {
baz: 'baz',
qux: 'qux {0}' as unknown as ParameterizedString<'0'>,
quux: 'quux {0} {1}' as unknown as ParameterizedString<'0' | '1'>,
},
});
expect(i18n.ts.foo).toBe('foo');
expect(i18n.ts.bar.baz).toBe('baz');
});
it('tsx', () => {
const i18n = new I18n({
foo: 'foo',
bar: {
baz: 'baz',
qux: 'qux {0}' as unknown as ParameterizedString<'0'>,
quux: 'quux {0} {1}' as unknown as ParameterizedString<'0' | '1'>,
},
});
expect(i18n.tsx.bar.qux({ 0: 'hoge' })).toBe('qux hoge');
expect(i18n.tsx.bar.quux({ 0: 'hoge', 1: 'fuga' })).toBe('quux hoge fuga');
});
});

7
packages/misskey-js/src/autogen/types.ts
View File

@ -4245,15 +4245,16 @@ export type components = {
/** @enum {string} */ /** @enum {string} */
type: 'roleAssigned'; type: 'roleAssigned';
role: components['schemas']['Role']; role: components['schemas']['Role'];
} | { } | ({
/** Format: id */ /** Format: id */
id: string; id: string;
/** Format: date-time */ /** Format: date-time */
createdAt: string; createdAt: string;
/** @enum {string} */ /** @enum {string} */
type: 'achievementEarned'; type: 'achievementEarned';
achievement: string; /** @enum {string} */
} | ({ achievement: 'notes1' | 'notes10' | 'notes100' | 'notes500' | 'notes1000' | 'notes5000' | 'notes10000' | 'notes20000' | 'notes30000' | 'notes40000' | 'notes50000' | 'notes60000' | 'notes70000' | 'notes80000' | 'notes90000' | 'notes100000' | 'login3' | 'login7' | 'login15' | 'login30' | 'login60' | 'login100' | 'login200' | 'login300' | 'login400' | 'login500' | 'login600' | 'login700' | 'login800' | 'login900' | 'login1000' | 'passedSinceAccountCreated1' | 'passedSinceAccountCreated2' | 'passedSinceAccountCreated3' | 'loggedInOnBirthday' | 'loggedInOnNewYearsDay' | 'noteClipped1' | 'noteFavorited1' | 'myNoteFavorited1' | 'profileFilled' | 'markedAsCat' | 'following1' | 'following10' | 'following50' | 'following100' | 'following300' | 'followers1' | 'followers10' | 'followers50' | 'followers100' | 'followers300' | 'followers500' | 'followers1000' | 'collectAchievements30' | 'viewAchievements3min' | 'iLoveMisskey' | 'foundTreasure' | 'client30min' | 'client60min' | 'noteDeletedWithin1min' | 'postedAtLateNight' | 'postedAt0min0sec' | 'selfQuote' | 'htl20npm' | 'viewInstanceChart' | 'outputHelloWorldOnScratchpad' | 'open3windows' | 'driveFolderCircularReference' | 'reactWithoutRead' | 'clickedClickHere' | 'justPlainLucky' | 'setNameToSyuilo' | 'cookieClicked' | 'brainDiver' | 'smashTestNotificationButton' | 'tutorialCompleted' | 'bubbleGameExplodingHead' | 'bubbleGameDoubleExplodingHead';
}) | ({
/** Format: id */ /** Format: id */
id: string; id: string;
/** Format: date-time */ /** Format: date-time */

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

37
packages/sw/src/scripts/i18n.ts
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;
}
}
}

5
packages/sw/src/scripts/lang.ts
View File

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

7
packages/sw/src/sw.ts
View File

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