usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(sw): use fully typed locales

This commit is contained in:
zyoshoka 2024-08-28 00:30:35 +09:00
parent b6fdd71957
commit 13d5708e49
No known key found for this signature in database
6 changed files with 83 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>;
}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (this.tsxCache) {
return this.tsxCache;
}
@ -244,51 +243,3 @@ export class I18n<T extends ILocale> {
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');
});
});

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> {
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: {},

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
*/
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());

7
packages/sw/src/sw.ts
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',
};