From cf54c2ba4750c307d840016828f837a61f886726 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 11 Jan 2024 18:13:39 +0900 Subject: [PATCH 01/45] feat: ranking system of bubble game Resolve #12961 --- locales/index.d.ts | 1 + locales/ja-JP.yml | 1 + .../1704959805077-bubble-game-record.js | 24 ++++++ packages/backend/src/di-symbols.ts | 1 + .../backend/src/models/BubbleGameRecord.ts | 57 ++++++++++++ .../backend/src/models/RepositoryModule.ts | 10 ++- packages/backend/src/models/_.ts | 3 + packages/backend/src/postgres.ts | 2 + .../backend/src/server/api/EndpointsModule.ts | 8 ++ packages/backend/src/server/api/endpoints.ts | 4 + .../api/endpoints/bubble-game/ranking.ts | 75 ++++++++++++++++ .../api/endpoints/bubble-game/register.ts | 86 +++++++++++++++++++ .../src/pages/drop-and-fusion.game.vue | 25 +++++- .../frontend/src/pages/drop-and-fusion.vue | 32 ++++++- .../src/scripts/drop-and-fusion-engine.ts | 71 ++++++++++++++- packages/frontend/src/scripts/sound.ts | 1 - 16 files changed, 391 insertions(+), 10 deletions(-) create mode 100644 packages/backend/migration/1704959805077-bubble-game-record.js create mode 100644 packages/backend/src/models/BubbleGameRecord.ts create mode 100644 packages/backend/src/server/api/endpoints/bubble-game/ranking.ts create mode 100644 packages/backend/src/server/api/endpoints/bubble-game/register.ts diff --git a/locales/index.d.ts b/locales/index.d.ts index 852cbdd27d..317a474dba 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1199,6 +1199,7 @@ export interface Locale { "showReplay": string; "replay": string; "replaying": string; + "ranking": string; "_bubbleGame": { "howToPlay": string; "_howToPlay": { diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f85dc0fcf8..d3c2b4d312 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1196,6 +1196,7 @@ soundWillBePlayed: "サウンドが再生されます" showReplay: "リプレイを見る" replay: "リプレイ" replaying: "リプレイ中" +ranking: "ランキング" _bubbleGame: howToPlay: "遊び方" diff --git a/packages/backend/migration/1704959805077-bubble-game-record.js b/packages/backend/migration/1704959805077-bubble-game-record.js new file mode 100644 index 0000000000..cc45b09c82 --- /dev/null +++ b/packages/backend/migration/1704959805077-bubble-game-record.js @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: syuilo and other misskey contributors + * SPDX-License-Identifier: AGPL-3.0-only + */ + +export class BubbleGameRecord1704959805077 { + name = 'BubbleGameRecord1704959805077' + + async up(queryRunner) { + await queryRunner.query(`CREATE TABLE "bubble_game_record" ("id" character varying(32) NOT NULL, "userId" character varying(32) NOT NULL, "seededAt" TIMESTAMP WITH TIME ZONE NOT NULL, "seed" character varying(1024) NOT NULL, "gameVersion" integer NOT NULL, "gameMode" character varying(128) NOT NULL, "score" integer NOT NULL, "logs" jsonb NOT NULL DEFAULT '[]', "isVerified" boolean NOT NULL DEFAULT false, CONSTRAINT "PK_a75395fe404b392e2893b50d7ea" PRIMARY KEY ("id"))`); + await queryRunner.query(`CREATE INDEX "IDX_75276757070d21fdfaf4c05290" ON "bubble_game_record" ("userId") `); + await queryRunner.query(`CREATE INDEX "IDX_4ae7053179014915d1432d3f40" ON "bubble_game_record" ("seededAt") `); + await queryRunner.query(`CREATE INDEX "IDX_26d4ee490b5a487142d35466ee" ON "bubble_game_record" ("score") `); + await queryRunner.query(`ALTER TABLE "bubble_game_record" ADD CONSTRAINT "FK_75276757070d21fdfaf4c052909" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`); + } + + async down(queryRunner) { + await queryRunner.query(`ALTER TABLE "bubble_game_record" DROP CONSTRAINT "FK_75276757070d21fdfaf4c052909"`); + await queryRunner.query(`DROP INDEX "public"."IDX_26d4ee490b5a487142d35466ee"`); + await queryRunner.query(`DROP INDEX "public"."IDX_4ae7053179014915d1432d3f40"`); + await queryRunner.query(`DROP INDEX "public"."IDX_75276757070d21fdfaf4c05290"`); + await queryRunner.query(`DROP TABLE "bubble_game_record"`); + } +} diff --git a/packages/backend/src/di-symbols.ts b/packages/backend/src/di-symbols.ts index 8411cb8229..e29fee3f96 100644 --- a/packages/backend/src/di-symbols.ts +++ b/packages/backend/src/di-symbols.ts @@ -78,5 +78,6 @@ export const DI = { flashsRepository: Symbol('flashsRepository'), flashLikesRepository: Symbol('flashLikesRepository'), userMemosRepository: Symbol('userMemosRepository'), + bubbleGameRecordsRepository: Symbol('bubbleGameRecordsRepository'), //#endregion }; diff --git a/packages/backend/src/models/BubbleGameRecord.ts b/packages/backend/src/models/BubbleGameRecord.ts new file mode 100644 index 0000000000..4b483ed4d3 --- /dev/null +++ b/packages/backend/src/models/BubbleGameRecord.ts @@ -0,0 +1,57 @@ +/* + * SPDX-FileCopyrightText: syuilo and other misskey contributors + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm'; +import { id } from './util/id.js'; +import { MiUser } from './User.js'; + +@Entity('bubble_game_record') +export class MiBubbleGameRecord { + @PrimaryColumn(id()) + public id: string; + + @Index() + @Column({ + ...id(), + }) + public userId: MiUser['id']; + + @ManyToOne(type => MiUser, { + onDelete: 'CASCADE', + }) + @JoinColumn() + public user: MiUser | null; + + @Index() + @Column('timestamp with time zone') + public seededAt: Date; + + @Column('varchar', { + length: 1024, + }) + public seed: string; + + @Column('integer') + public gameVersion: number; + + @Column('varchar', { + length: 128, + }) + public gameMode: string; + + @Index() + @Column('integer') + public score: number; + + @Column('jsonb', { + default: [], + }) + public logs: any[]; + + @Column('boolean', { + default: false, + }) + public isVerified: boolean; +} diff --git a/packages/backend/src/models/RepositoryModule.ts b/packages/backend/src/models/RepositoryModule.ts index 866fdfe6d4..0399536c3e 100644 --- a/packages/backend/src/models/RepositoryModule.ts +++ b/packages/backend/src/models/RepositoryModule.ts @@ -5,7 +5,7 @@ import { Module } from '@nestjs/common'; import { DI } from '@/di-symbols.js'; -import { MiAbuseUserReport, MiAccessToken, MiAd, MiAnnouncement, MiAnnouncementRead, MiAntenna, MiApp, MiAuthSession, MiAvatarDecoration, MiBlocking, MiChannel, MiChannelFavorite, MiChannelFollowing, MiClip, MiClipFavorite, MiClipNote, MiDriveFile, MiDriveFolder, MiEmoji, MiFlash, MiFlashLike, MiFollowRequest, MiFollowing, MiGalleryLike, MiGalleryPost, MiHashtag, MiInstance, MiMeta, MiModerationLog, MiMuting, MiNote, MiNoteFavorite, MiNoteReaction, MiNoteThreadMuting, MiNoteUnread, MiPage, MiPageLike, MiPasswordResetRequest, MiPoll, MiPollVote, MiPromoNote, MiPromoRead, MiRegistrationTicket, MiRegistryItem, MiRelay, MiRenoteMuting, MiRetentionAggregation, MiRole, MiRoleAssignment, MiSignin, MiSwSubscription, MiUsedUsername, MiUser, MiUserIp, MiUserKeypair, MiUserList, MiUserListFavorite, MiUserListMembership, MiUserMemo, MiUserNotePining, MiUserPending, MiUserProfile, MiUserPublickey, MiUserSecurityKey, MiWebhook } from './_.js'; +import { MiAbuseUserReport, MiAccessToken, MiAd, MiAnnouncement, MiAnnouncementRead, MiAntenna, MiApp, MiAuthSession, MiAvatarDecoration, MiBlocking, MiChannel, MiChannelFavorite, MiChannelFollowing, MiClip, MiClipFavorite, MiClipNote, MiDriveFile, MiDriveFolder, MiEmoji, MiFlash, MiFlashLike, MiFollowRequest, MiFollowing, MiGalleryLike, MiGalleryPost, MiHashtag, MiInstance, MiMeta, MiModerationLog, MiMuting, MiNote, MiNoteFavorite, MiNoteReaction, MiNoteThreadMuting, MiNoteUnread, MiPage, MiPageLike, MiPasswordResetRequest, MiPoll, MiPollVote, MiPromoNote, MiPromoRead, MiRegistrationTicket, MiRegistryItem, MiRelay, MiRenoteMuting, MiRetentionAggregation, MiRole, MiRoleAssignment, MiSignin, MiSwSubscription, MiUsedUsername, MiUser, MiUserIp, MiUserKeypair, MiUserList, MiUserListFavorite, MiUserListMembership, MiUserMemo, MiUserNotePining, MiUserPending, MiUserProfile, MiUserPublickey, MiUserSecurityKey, MiWebhook, MiBubbleGameRecord } from './_.js'; import type { DataSource } from 'typeorm'; import type { Provider } from '@nestjs/common'; @@ -399,6 +399,12 @@ const $userMemosRepository: Provider = { inject: [DI.db], }; +export const $bubbleGameRecordsRepository: Provider = { + provide: DI.bubbleGameRecordsRepository, + useFactory: (db: DataSource) => db.getRepository(MiBubbleGameRecord), + inject: [DI.db], +}; + @Module({ imports: [ ], @@ -468,6 +474,7 @@ const $userMemosRepository: Provider = { $flashsRepository, $flashLikesRepository, $userMemosRepository, + $bubbleGameRecordsRepository, ], exports: [ $usersRepository, @@ -535,6 +542,7 @@ const $userMemosRepository: Provider = { $flashsRepository, $flashLikesRepository, $userMemosRepository, + $bubbleGameRecordsRepository, ], }) export class RepositoryModule {} diff --git a/packages/backend/src/models/_.ts b/packages/backend/src/models/_.ts index d7c327f164..a1c4b0743e 100644 --- a/packages/backend/src/models/_.ts +++ b/packages/backend/src/models/_.ts @@ -68,6 +68,7 @@ import { MiRoleAssignment } from '@/models/RoleAssignment.js'; import { MiFlash } from '@/models/Flash.js'; import { MiFlashLike } from '@/models/FlashLike.js'; import { MiUserListFavorite } from '@/models/UserListFavorite.js'; +import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js'; import type { Repository } from 'typeorm'; export { @@ -136,6 +137,7 @@ export { MiFlash, MiFlashLike, MiUserMemo, + MiBubbleGameRecord, }; export type AbuseUserReportsRepository = Repository; @@ -203,3 +205,4 @@ export type RoleAssignmentsRepository = Repository; export type FlashsRepository = Repository; export type FlashLikesRepository = Repository; export type UserMemoRepository = Repository; +export type BubbleGameRecordsRepository = Repository; diff --git a/packages/backend/src/postgres.ts b/packages/backend/src/postgres.ts index cd611839a4..0430e9ca19 100644 --- a/packages/backend/src/postgres.ts +++ b/packages/backend/src/postgres.ts @@ -76,6 +76,7 @@ import { MiRoleAssignment } from '@/models/RoleAssignment.js'; import { MiFlash } from '@/models/Flash.js'; import { MiFlashLike } from '@/models/FlashLike.js'; import { MiUserMemo } from '@/models/UserMemo.js'; +import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js'; import { Config } from '@/config.js'; import MisskeyLogger from '@/logger.js'; @@ -190,6 +191,7 @@ export const entities = [ MiFlash, MiFlashLike, MiUserMemo, + MiBubbleGameRecord, ...charts, ]; diff --git a/packages/backend/src/server/api/EndpointsModule.ts b/packages/backend/src/server/api/EndpointsModule.ts index a3a9805444..781332d349 100644 --- a/packages/backend/src/server/api/EndpointsModule.ts +++ b/packages/backend/src/server/api/EndpointsModule.ts @@ -364,6 +364,8 @@ import * as ep___users_updateMemo from './endpoints/users/update-memo.js'; import * as ep___fetchRss from './endpoints/fetch-rss.js'; import * as ep___fetchExternalResources from './endpoints/fetch-external-resources.js'; import * as ep___retention from './endpoints/retention.js'; +import * as ep___bubbleGame_register from './endpoints/bubble-game/register.js'; +import * as ep___bubbleGame_ranking from './endpoints/bubble-game/ranking.js'; import { GetterService } from './GetterService.js'; import { ApiLoggerService } from './ApiLoggerService.js'; import type { Provider } from '@nestjs/common'; @@ -726,6 +728,8 @@ const $users_updateMemo: Provider = { provide: 'ep:users/update-memo', useClass: const $fetchRss: Provider = { provide: 'ep:fetch-rss', useClass: ep___fetchRss.default }; const $fetchExternalResources: Provider = { provide: 'ep:fetch-external-resources', useClass: ep___fetchExternalResources.default }; const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention.default }; +const $bubbleGame_register: Provider = { provide: 'ep:bubble-game/register', useClass: ep___bubbleGame_register.default }; +const $bubbleGame_ranking: Provider = { provide: 'ep:bubble-game/ranking', useClass: ep___bubbleGame_ranking.default }; @Module({ imports: [ @@ -1092,6 +1096,8 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention $fetchRss, $fetchExternalResources, $retention, + $bubbleGame_register, + $bubbleGame_ranking, ], exports: [ $admin_meta, @@ -1449,6 +1455,8 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention $fetchRss, $fetchExternalResources, $retention, + $bubbleGame_register, + $bubbleGame_ranking, ], }) export class EndpointsModule {} diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts index bd8aa4af72..f17db41a5d 100644 --- a/packages/backend/src/server/api/endpoints.ts +++ b/packages/backend/src/server/api/endpoints.ts @@ -365,6 +365,8 @@ import * as ep___users_updateMemo from './endpoints/users/update-memo.js'; import * as ep___fetchRss from './endpoints/fetch-rss.js'; import * as ep___fetchExternalResources from './endpoints/fetch-external-resources.js'; import * as ep___retention from './endpoints/retention.js'; +import * as ep___bubbleGame_register from './endpoints/bubble-game/register.js'; +import * as ep___bubbleGame_ranking from './endpoints/bubble-game/ranking.js'; const eps = [ ['admin/meta', ep___admin_meta], @@ -725,6 +727,8 @@ const eps = [ ['fetch-rss', ep___fetchRss], ['fetch-external-resources', ep___fetchExternalResources], ['retention', ep___retention], + ['bubble-game/register', ep___bubbleGame_register], + ['bubble-game/ranking', ep___bubbleGame_ranking], ]; interface IEndpointMetaBase { diff --git a/packages/backend/src/server/api/endpoints/bubble-game/ranking.ts b/packages/backend/src/server/api/endpoints/bubble-game/ranking.ts new file mode 100644 index 0000000000..0cba129a09 --- /dev/null +++ b/packages/backend/src/server/api/endpoints/bubble-game/ranking.ts @@ -0,0 +1,75 @@ +/* + * SPDX-FileCopyrightText: syuilo and other misskey contributors + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { Inject, Injectable } from '@nestjs/common'; +import { MoreThan } from 'typeorm'; +import { Endpoint } from '@/server/api/endpoint-base.js'; +import type { BubbleGameRecordsRepository } from '@/models/_.js'; +import { DI } from '@/di-symbols.js'; +import { UserEntityService } from '@/core/entities/UserEntityService.js'; + +export const meta = { + tags: [], + + allowGet: true, + cacheSec: 60, + + errors: { + }, + + res: { + type: 'array', + optional: false, nullable: false, + items: { + type: 'object', + optional: false, nullable: false, + properties: { + id: { type: 'string', format: 'misskey:id' }, + score: { type: 'integer' }, + user: { ref: 'UserLite' }, + }, + }, + }, +} as const; + +export const paramDef = { + type: 'object', + properties: { + gameMode: { type: 'string' }, + }, + required: ['gameMode'], +} as const; + +@Injectable() +export default class extends Endpoint { // eslint-disable-line import/no-default-export + constructor( + @Inject(DI.bubbleGameRecordsRepository) + private bubbleGameRecordsRepository: BubbleGameRecordsRepository, + + private userEntityService: UserEntityService, + ) { + super(meta, paramDef, async (ps) => { + const records = await this.bubbleGameRecordsRepository.find({ + where: { + gameMode: ps.gameMode, + seededAt: MoreThan(new Date(Date.now() - 1000 * 60 * 60 * 24 * 7)), + }, + order: { + score: 'DESC', + }, + take: 10, + relations: ['user'], + }); + + const users = await this.userEntityService.packMany(records.map(r => r.user!), null, { detail: false }); + + return records.map(r => ({ + id: r.id, + score: r.score, + user: users.find(u => u.id === r.user!.id), + })); + }); + } +} diff --git a/packages/backend/src/server/api/endpoints/bubble-game/register.ts b/packages/backend/src/server/api/endpoints/bubble-game/register.ts new file mode 100644 index 0000000000..af0f69e4ad --- /dev/null +++ b/packages/backend/src/server/api/endpoints/bubble-game/register.ts @@ -0,0 +1,86 @@ +/* + * SPDX-FileCopyrightText: syuilo and other misskey contributors + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { Inject, Injectable } from '@nestjs/common'; +import ms from 'ms'; +import { Endpoint } from '@/server/api/endpoint-base.js'; +import { IdService } from '@/core/IdService.js'; +import type { BubbleGameRecordsRepository } from '@/models/_.js'; +import { DI } from '@/di-symbols.js'; +import { ApiError } from '../../error.js'; + +export const meta = { + tags: [], + + requireCredential: true, + + kind: 'write:account', + + limit: { + duration: ms('1hour'), + max: 120, + minInterval: ms('30sec'), + }, + + errors: { + invalidSeed: { + message: 'Provided seed is invalid.', + code: 'INVALID_SEED', + id: 'eb627bc7-574b-4a52-a860-3c3eae772b88', + }, + }, + + res: { + }, +} as const; + +export const paramDef = { + type: 'object', + properties: { + score: { type: 'integer', minimum: 0 }, + seed: { type: 'string', minLength: 1, maxLength: 1024 }, + logs: { type: 'array' }, + gameMode: { type: 'string' }, + gameVersion: { type: 'integer' }, + }, + required: ['score', 'seed', 'logs', 'gameMode', 'gameVersion'], +} as const; + +@Injectable() +export default class extends Endpoint { // eslint-disable-line import/no-default-export + constructor( + @Inject(DI.bubbleGameRecordsRepository) + private bubbleGameRecordsRepository: BubbleGameRecordsRepository, + + private idService: IdService, + ) { + super(meta, paramDef, async (ps, me) => { + const seedDate = new Date(parseInt(ps.seed, 10)); + const now = new Date(); + + // シードが未来なのは通常のプレイではありえないので弾く + if (seedDate.getTime() > now.getTime()) { + throw new ApiError(meta.errors.invalidSeed); + } + + // シードが古すぎる(1時間以上前)のも弾く + if (seedDate.getTime() < now.getTime() - 1000 * 60 * 60) { + throw new ApiError(meta.errors.invalidSeed); + } + + await this.bubbleGameRecordsRepository.insert({ + id: this.idService.gen(now.getTime()), + seed: ps.seed, + seededAt: seedDate, + userId: me.id, + score: ps.score, + logs: ps.logs, + gameMode: ps.gameMode, + gameVersion: ps.gameVersion, + isVerified: false, + }); + }); + } +} diff --git a/packages/frontend/src/pages/drop-and-fusion.game.vue b/packages/frontend/src/pages/drop-and-fusion.game.vue index 3fefb49fae..c222fdeb40 100644 --- a/packages/frontend/src/pages/drop-and-fusion.game.vue +++ b/packages/frontend/src/pages/drop-and-fusion.game.vue @@ -679,9 +679,11 @@ function endReplay() { function exportLog() { if (!logs) return; const data = JSON.stringify({ - seed: seed, - date: new Date().toISOString(), - logs: logs, + v: game.GAME_VERSION, + m: props.gameMode, + s: seed, + d: new Date().toISOString(), + l: DropAndFusionGame.serializeLogs(logs), }); copyToClipboard(data); os.success(); @@ -723,8 +725,15 @@ function getGameImageDriveFile() { const [frame, logo] = images; ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, game.GAME_WIDTH, game.GAME_HEIGHT); + ctx.drawImage(frame, 0, 0, game.GAME_WIDTH, game.GAME_HEIGHT); ctx.drawImage(canvasEl.value!, 0, 0, game.GAME_WIDTH, game.GAME_HEIGHT); + + ctx.fillStyle = '#000'; + ctx.font = '16px bold sans-serif'; + ctx.textBaseline = 'top'; + ctx.fillText(`SCORE: ${score.value.toLocaleString()}`, 10, 10); + ctx.globalAlpha = 0.7; ctx.drawImage(logo, game.GAME_WIDTH * 0.55, 6, game.GAME_WIDTH * 0.45, game.GAME_WIDTH * 0.45 * (logo.height / logo.width)); ctx.globalAlpha = 1; @@ -765,7 +774,7 @@ async function share() { os.post({ initialText: `#BubbleGame MODE: ${props.gameMode} -SCORE: ${score.value} (MAX CHAIN: ${maxCombo.value})`, +SCORE: ${score.value.toLocaleString()} (MAX CHAIN: ${maxCombo.value})`, initialFiles: [file], instant: true, }); @@ -859,6 +868,14 @@ function attachGameEvents() { dropReady.value = false; isGameOver.value = true; + misskeyApi('bubble-game/register', { + seed, + score: score.value, + gameMode: props.gameMode, + gameVersion: game.GAME_VERSION, + logs: DropAndFusionGame.serializeLogs(logs), + }); + if (score.value > (highScore.value ?? 0)) { highScore.value = score.value; diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue index 7bd0eef000..0938ca6a87 100644 --- a/packages/frontend/src/pages/drop-and-fusion.vue +++ b/packages/frontend/src/pages/drop-and-fusion.vue @@ -39,6 +39,21 @@ SPDX-License-Identifier: AGPL-3.0-only +
+
+
+
{{ i18n.ts.ranking }} ({{ gameMode }})
+
+
+ + + {{ r.score.toLocaleString() }} pt +
+
+
{{ i18n.ts.loading }}
+
+
+
{{ i18n.ts._bubbleGame.howToPlay }}
@@ -70,17 +85,23 @@ SPDX-License-Identifier: AGPL-3.0-only - - diff --git a/packages/frontend/src/pages/user/activity.vue b/packages/frontend/src/pages/user/activity.vue index 6703890893..3c7635a312 100644 --- a/packages/frontend/src/pages/user/activity.vue +++ b/packages/frontend/src/pages/user/activity.vue @@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- + @@ -28,11 +28,11 @@ SPDX-License-Identifier: AGPL-3.0-only + + diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index 5ca09fa822..330e54f08a 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only class="_button" :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]" @click="toggleReaction()" + @contextmenu.prevent.stop="menu" > {{ count }} @@ -21,6 +22,7 @@ import { computed, inject, onMounted, shallowRef, watch } from 'vue'; import * as Misskey from 'misskey-js'; import XDetails from '@/components/MkReactionsViewer.details.vue'; import MkReactionIcon from '@/components/MkReactionIcon.vue'; +import MkCustomEmojiDetailedDialog from './MkCustomEmojiDetailedDialog.vue'; import * as os from '@/os.js'; import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js'; import { useTooltip } from '@/scripts/use-tooltip.js'; @@ -98,6 +100,22 @@ async function toggleReaction() { } } +async function menu(ev) { + if (!canToggle.value) return; + if (!props.reaction.includes(":")) return; + os.popupMenu([{ + text: i18n.ts.info, + icon: 'ti ti-info-circle', + action: async () => { + os.popup(MkCustomEmojiDetailedDialog, { + emoji: await misskeyApiGet('emoji', { + name: props.reaction.replace(/:/g, '').replace(/@\./, ''), + }), + }); + }, + }], ev.currentTarget ?? ev.target); +} + function anime() { if (document.hidden) return; if (!defaultStore.state.animation) return; diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue index dd3fe77251..b384e8afcb 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.vue +++ b/packages/frontend/src/components/global/MkCustomEmoji.vue @@ -24,9 +24,11 @@ import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js' import { defaultStore } from '@/store.js'; import { customEmojisMap } from '@/custom-emojis.js'; import * as os from '@/os.js'; +import { misskeyApiGet } from '@/scripts/misskey-api.js'; import copyToClipboard from '@/scripts/copy-to-clipboard.js'; import * as sound from '@/scripts/sound.js'; import { i18n } from '@/i18n.js'; +import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue'; const props = defineProps<{ name: string; @@ -93,7 +95,19 @@ function onClick(ev: MouseEvent) { react(`:${props.name}:`); sound.playMisskeySfx('reaction'); }, - }] : [])], ev.currentTarget ?? ev.target); + }] : []), { + text: i18n.ts.info, + icon: 'ti ti-info-circle', + action: async () => { + os.popup(MkCustomEmojiDetailedDialog, { + emoji: await misskeyApiGet('emoji', { + name: customEmojiName.value, + }), + }, { + anchor: ev.target, + }); + }, + }], ev.currentTarget ?? ev.target); } } diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue index ea6947bbba..faa7acdcb8 100644 --- a/packages/frontend/src/pages/emojis.emoji.vue +++ b/packages/frontend/src/pages/emojis.emoji.vue @@ -14,19 +14,15 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts index 9930b321f7..b970ff1df4 100644 --- a/packages/frontend/src/ui/_common_/common.ts +++ b/packages/frontend/src/ui/_common_/common.ts @@ -27,11 +27,6 @@ function toolsMenuItems(): MenuItem[] { to: '/clicker', text: '🍪👈', icon: 'ti ti-cookie', - }, { - type: 'link', - to: '/bubble-game', - text: i18n.ts.bubbleGame, - icon: 'ti ti-apple', }, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? { type: 'link', to: '/custom-emojis-manager', From 8b0fdfcd69334dbf934a69cf707826b3be8cf2d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Mon, 15 Jan 2024 18:17:01 +0900 Subject: [PATCH 31/45] =?UTF-8?q?enhance:=20=E5=8B=95=E7=94=BB=E3=83=BB?= =?UTF-8?q?=E9=9F=B3=E5=A3=B0=E5=91=A8=E3=82=8A=E3=81=AEUI=E3=81=A8?= =?UTF-8?q?=E5=8B=95=E4=BD=9C=E6=94=B9=E8=89=AF=20(#12925)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip * (fix) `/files` をバイトレンジリクエストに対応させる * video * audio * fix * fix * spdx * fix (rangeRequest) * fix * Update CHANGELOG.md * (add) ボリュームを保存できるように * (fix) ミュート復帰時に音量が固定される * named export * tweak design * Add sensitive class for audio component * Refactor seekbar styles * Refactor hms * Revert "(add) ボリュームを保存できるように" This reverts commit 6271f9493b63f96d0dd9915207e97fe120ef9037. * Revert "(fix) ミュート復帰時に音量が固定される" This reverts commit a65002b56ecdcb10f76bcc2debbe38593a69643f. * revert revert changes --------- Co-authored-by: syuilo --- CHANGELOG.md | 2 + locales/index.d.ts | 2 + locales/ja-JP.yml | 2 + .../backend/src/server/FileServerService.ts | 111 +++- .../frontend/src/components/MkMediaAudio.vue | 363 ++++++++++++ .../frontend/src/components/MkMediaBanner.vue | 13 +- .../frontend/src/components/MkMediaRange.vue | 150 +++++ .../frontend/src/components/MkMediaVideo.vue | 540 ++++++++++++++++-- packages/frontend/src/filters/hms.ts | 65 +++ packages/frontend/src/scripts/device-kind.ts | 7 + 10 files changed, 1180 insertions(+), 75 deletions(-) create mode 100644 packages/frontend/src/components/MkMediaAudio.vue create mode 100644 packages/frontend/src/components/MkMediaRange.vue create mode 100644 packages/frontend/src/filters/hms.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f1fdcf9ee..945b6ac1ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ ### Client - Feat: 新しいゲームを追加 +- Feat: 音声・映像プレイヤーを追加 - Feat: 絵文字の詳細ダイアログを追加 - Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように @@ -38,6 +39,7 @@ - Enhance: 連合先のレートリミットに引っかかった際にリトライするようになりました - Enhance: ActivityPub Deliver queueでBodyを事前処理するように (#12916) - Enhance: クリップをエクスポートできるように +- Enhance: `/files`のファイルに対してHTTP Rangeリクエストを行えるように - Enhance: `api.json`のOpenAPI Specificationを3.1.0に更新 - Fix: `drive/files/update`でファイル名のバリデーションが機能していない問題を修正 - Fix: `notes/create`で、`text`が空白文字のみで構成されているか`null`であって、かつ`text`だけであるリクエストに対するレスポンスが400になるように変更 diff --git a/locales/index.d.ts b/locales/index.d.ts index dafbdd3559..71134544d9 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1061,6 +1061,8 @@ export interface Locale { "noteIdOrUrl": string; "video": string; "videos": string; + "audio": string; + "audioFiles": string; "dataSaver": string; "accountMigration": string; "accountMoved": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 58952894b3..743a3ca38e 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1058,6 +1058,8 @@ limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小し noteIdOrUrl: "ノートIDまたはURL" video: "動画" videos: "動画" +audio: "音声" +audioFiles: "音声" dataSaver: "データセーバー" accountMigration: "アカウントの移行" accountMoved: "このユーザーは新しいアカウントに移行しました：" diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts index f59996ce17..7745a6cb78 100644 --- a/packages/backend/src/server/FileServerService.ts +++ b/packages/backend/src/server/FileServerService.ts @@ -168,11 +168,35 @@ export class FileServerService { } if (!image) { - image = { - data: fs.createReadStream(file.path), - ext: file.ext, - type: file.mime, - }; + if (request.headers.range && file.file.size > 0) { + const range = request.headers.range as string; + const parts = range.replace(/bytes=/, '').split('-'); + const start = parseInt(parts[0], 10); + let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1; + if (end > file.file.size) { + end = file.file.size - 1; + } + const chunksize = end - start + 1; + + image = { + data: fs.createReadStream(file.path, { + start, + end, + }), + ext: file.ext, + type: file.mime, + }; + + reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`); + reply.header('Accept-Ranges', 'bytes'); + reply.header('Content-Length', chunksize); + } else { + image = { + data: fs.createReadStream(file.path), + ext: file.ext, + type: file.mime, + }; + } } if ('pipe' in image.data && typeof image.data.pipe === 'function') { @@ -203,11 +227,54 @@ export class FileServerService { reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.mime) ? file.mime : 'application/octet-stream'); reply.header('Cache-Control', 'max-age=31536000, immutable'); reply.header('Content-Disposition', contentDisposition('inline', filename)); + + if (request.headers.range && file.file.size > 0) { + const range = request.headers.range as string; + const parts = range.replace(/bytes=/, '').split('-'); + const start = parseInt(parts[0], 10); + let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1; + if (end > file.file.size) { + end = file.file.size - 1; + } + const chunksize = end - start + 1; + const fileStream = fs.createReadStream(file.path, { + start, + end, + }); + reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`); + reply.header('Accept-Ranges', 'bytes'); + reply.header('Content-Length', chunksize); + reply.code(206); + return fileStream; + } + return fs.createReadStream(file.path); } else { reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.file.type) ? file.file.type : 'application/octet-stream'); reply.header('Cache-Control', 'max-age=31536000, immutable'); reply.header('Content-Disposition', contentDisposition('inline', file.filename)); + + if (request.headers.range && file.file.size > 0) { + const range = request.headers.range as string; + const parts = range.replace(/bytes=/, '').split('-'); + const start = parseInt(parts[0], 10); + let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1; + console.log(end); + if (end > file.file.size) { + end = file.file.size - 1; + } + const chunksize = end - start + 1; + const fileStream = fs.createReadStream(file.path, { + start, + end, + }); + reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`); + reply.header('Accept-Ranges', 'bytes'); + reply.header('Content-Length', chunksize); + reply.code(206); + return fileStream; + } + return fs.createReadStream(file.path); } } catch (e) { @@ -340,11 +407,35 @@ export class FileServerService { } if (!image) { - image = { - data: fs.createReadStream(file.path), - ext: file.ext, - type: file.mime, - }; + if (request.headers.range && file.file && file.file.size > 0) { + const range = request.headers.range as string; + const parts = range.replace(/bytes=/, '').split('-'); + const start = parseInt(parts[0], 10); + let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1; + if (end > file.file.size) { + end = file.file.size - 1; + } + const chunksize = end - start + 1; + + image = { + data: fs.createReadStream(file.path, { + start, + end, + }), + ext: file.ext, + type: file.mime, + }; + + reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`); + reply.header('Accept-Ranges', 'bytes'); + reply.header('Content-Length', chunksize); + } else { + image = { + data: fs.createReadStream(file.path), + ext: file.ext, + type: file.mime, + }; + } } if ('cleanup' in file) { diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue new file mode 100644 index 0000000000..75b31b9a49 --- /dev/null +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -0,0 +1,363 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index 3f8fef6632..b21960a490 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -5,20 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index b7190f6335..9eab855004 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -13,6 +13,7 @@ import MkMention from '@/components/MkMention.vue'; import MkEmoji from '@/components/global/MkEmoji.vue'; import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue'; import MkCode from '@/components/MkCode.vue'; +import MkCodeInline from '@/components/MkCodeInline.vue'; import MkGoogle from '@/components/MkGoogle.vue'; import MkSparkle from '@/components/MkSparkle.vue'; import MkA from '@/components/global/MkA.vue'; @@ -373,10 +374,9 @@ export default function(props: MfmProps, context: SetupContext) { } case 'inlineCode': { - return [h(MkCode, { + return [h(MkCodeInline, { key: Math.random(), code: token.props.code, - inline: true, })]; } diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue index 4318694d4f..fabbc1c05d 100644 --- a/packages/frontend/src/pages/flash/flash.vue +++ b/packages/frontend/src/pages/flash/flash.vue @@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only - +
From 67a41c09ae5924ec97237dc7869de579b5f74510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:45:11 +0900 Subject: [PATCH 42/45] =?UTF-8?q?fix(frontend/MediaVideo):=20=E5=86=8D?= =?UTF-8?q?=E7=94=9F=E3=82=B7=E3=83=BC=E3=82=AF=E3=83=90=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E5=BD=93=E3=81=9F=E3=82=8A=E5=88=A4=E5=AE=9A=E3=82=92=E8=AA=BF?= =?UTF-8?q?=E6=95=B4=20(#13027)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend/MediaVideo): 再生シークバーの当たり判定を調整 * fix --- packages/frontend/src/components/MkMediaAudio.vue | 6 +++--- packages/frontend/src/components/MkMediaRange.vue | 8 +++++--- packages/frontend/src/components/MkMediaVideo.vue | 7 +++++-- packages/frontend/src/filters/hms.ts | 2 +- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue index 75b31b9a49..53fd3b2d55 100644 --- a/packages/frontend/src/components/MkMediaAudio.vue +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -138,7 +138,7 @@ const rangePercent = computed({ audioEl.value.currentTime = to * durationMs.value / 1000; }, }); -const volume = ref(.5); +const volume = ref(.25); const bufferedEnd = ref(0); const bufferedDataRatio = computed(() => { if (!audioEl.value) return 0; @@ -161,7 +161,7 @@ function togglePlayPause() { function toggleMute() { if (volume.value === 0) { - volume.value = .5; + volume.value = .25; } else { volume.value = 0; } @@ -207,7 +207,7 @@ function init() { isActuallyPlaying.value = false; isPlaying.value = false; }); - + durationMs.value = audioEl.value.duration * 1000; audioEl.value.addEventListener('durationchange', () => { if (audioEl.value) { diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue index e6303a5c41..a150ae9843 100644 --- a/packages/frontend/src/components/MkMediaRange.vue +++ b/packages/frontend/src/components/MkMediaRange.vue @@ -5,9 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 977c9020c7..0a113458a1 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -176,7 +176,7 @@ const rangePercent = computed({ videoEl.value.currentTime = to * durationMs.value / 1000; }, }); -const volume = ref(.5); +const volume = ref(.25); const bufferedEnd = ref(0); const bufferedDataRatio = computed(() => { if (!videoEl.value) return 0; @@ -236,7 +236,7 @@ function toggleFullscreen() { function toggleMute() { if (volume.value === 0) { - volume.value = .5; + volume.value = .25; } else { volume.value = 0; } @@ -535,6 +535,9 @@ onDeactivated(() => { .seekbarRoot { grid-area: seekbar; + /* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */ + margin: -10px; + padding: 10px; } @container (min-width: 500px) { diff --git a/packages/frontend/src/filters/hms.ts b/packages/frontend/src/filters/hms.ts index 7b5da965ff..73db7becc2 100644 --- a/packages/frontend/src/filters/hms.ts +++ b/packages/frontend/src/filters/hms.ts @@ -5,7 +5,7 @@ import { i18n } from '@/i18n.js'; -export function hms(ms: number, options: { +export function hms(ms: number, options?: { textFormat?: 'colon' | 'locale'; enableSeconds?: boolean; enableMs?: boolean; From c1019a006bfa48ba7398daa02788c50be0bfb35a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Thu, 18 Jan 2024 18:21:33 +0900 Subject: [PATCH 43/45] =?UTF-8?q?feat(frontend):=20=E6=A8=AA=E3=82=B9?= =?UTF-8?q?=E3=83=AF=E3=82=A4=E3=83=97=E3=81=A7=E3=82=BF=E3=83=96=E3=82=92?= =?UTF-8?q?=E5=88=87=E3=82=8A=E6=9B=BF=E3=81=88=E3=82=8B=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=20(#13011)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * (add) 横スワイプでタブを切り替える機能 * Change Changelog * y方向の移動が一定量を超えたらスワイプを中断するように * Update swipe distance thresholds * Remove console.log * adjust threshold * rename, use v-model * fix * Update MkHorizontalSwipe.vue Co-authored-by: syuilo * use css module --------- Co-authored-by: syuilo --- CHANGELOG.md | 1 + locales/index.d.ts | 1 + locales/ja-JP.yml | 1 + .../src/components/MkHorizontalSwipe.vue | 209 ++++++++++++++++++ packages/frontend/src/pages/about.vue | 171 +++++++------- packages/frontend/src/pages/announcements.vue | 57 ++--- packages/frontend/src/pages/channel.vue | 90 ++++---- packages/frontend/src/pages/channels.vue | 77 +++---- packages/frontend/src/pages/drive.file.vue | 15 +- packages/frontend/src/pages/explore.vue | 11 +- .../frontend/src/pages/flash/flash-index.vue | 41 ++-- packages/frontend/src/pages/gallery/index.vue | 11 +- packages/frontend/src/pages/instance-info.vue | 206 ++++++++--------- .../frontend/src/pages/my-clips/index.vue | 26 ++- packages/frontend/src/pages/notifications.vue | 28 ++- packages/frontend/src/pages/pages.vue | 47 ++-- packages/frontend/src/pages/search.vue | 25 ++- .../frontend/src/pages/settings/general.vue | 2 + packages/frontend/src/pages/timeline.vue | 46 ++-- packages/frontend/src/pages/user/index.vue | 30 +-- packages/frontend/src/store.ts | 4 + 21 files changed, 685 insertions(+), 414 deletions(-) create mode 100644 packages/frontend/src/components/MkHorizontalSwipe.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b43319614..605b8af92c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ - Feat: 絵文字の詳細ダイアログを追加 - Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加 - デフォルトで枠線からはみ出る部分が隠されるようにしました。初期と同じ挙動にするには`$[border.noclip`が必要です +- Feat: スワイプでタブを切り替えられるように - Enhance: MFM等のコードブロックに全文コピー用のボタンを追加 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように - Enhance: チャンネルノートのピン留めをノートのメニューからできるように diff --git a/locales/index.d.ts b/locales/index.d.ts index 71134544d9..a659e790cc 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1204,6 +1204,7 @@ export interface Locale { "ranking": string; "lastNDays": string; "backToTitle": string; + "enableHorizontalSwipe": string; "_bubbleGame": { "howToPlay": string; "_howToPlay": { diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 743a3ca38e..8749a5f49f 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1201,6 +1201,7 @@ replaying: "リプレイ中" ranking: "ランキング" lastNDays: "直近{n}日" backToTitle: "タイトルへ" +enableHorizontalSwipe: "スワイプしてタブを切り替える" _bubbleGame: howToPlay: "遊び方" diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue new file mode 100644 index 0000000000..2c62aadbf4 --- /dev/null +++ b/packages/frontend/src/components/MkHorizontalSwipe.vue @@ -0,0 +1,209 @@ + + + + + + diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue index f402b26ad8..4ba1b6da76 100644 --- a/packages/frontend/src/pages/about.vue +++ b/packages/frontend/src/pages/about.vue @@ -6,98 +6,100 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -114,6 +116,7 @@ import FormSplit from '@/components/form/split.vue'; import MkFolder from '@/components/MkFolder.vue'; import MkKeyValue from '@/components/MkKeyValue.vue'; import MkInstanceStats from '@/components/MkInstanceStats.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { misskeyApi } from '@/scripts/misskey-api.js'; import number from '@/filters/number.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue index 5632bf7caf..c31c6d0903 100644 --- a/packages/frontend/src/pages/announcements.vue +++ b/packages/frontend/src/pages/announcements.vue @@ -7,34 +7,36 @@ SPDX-License-Identifier: AGPL-3.0-only -
- {{ i18n.ts.youHaveUnreadAnnouncements }} - -
-
{{ i18n.ts.forYou }}
-
- 🆕 - - - - - - - {{ announcement.title }} -
-
- - -
- + +
+ {{ i18n.ts.youHaveUnreadAnnouncements }} + +
+
{{ i18n.ts.forYou }}
+
+ 🆕 + + + + + + + {{ announcement.title }}
-
-
- {{ i18n.ts.gotIt }} -
-
- -
+
+ + +
+ +
+
+
+ {{ i18n.ts.gotIt }} +
+ + +
+ @@ -44,6 +46,7 @@ import { ref, computed } from 'vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; import MkInfo from '@/components/MkInfo.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue index 971eca8cae..4cdf2eea7d 100644 --- a/packages/frontend/src/pages/channel.vue +++ b/packages/frontend/src/pages/channel.vue @@ -7,53 +7,55 @@ SPDX-License-Identifier: AGPL-3.0-only -
-
- - - -
-
-
-
+ +
+
+ + + +
+
+
+
+
+
{{ i18n.ts.sensitive }}
+
+
+
+
-
{{ i18n.ts.sensitive }}
-
-
- + + + +
+ +
+ +
+
+ {{ i18n.ts.thisChannelArchived }} + + + + + +
+
+ +
+
+
+
+ + + + {{ i18n.ts.search }} +
+
- - - -
- -
- -
-
- {{ i18n.ts.thisChannelArchived }} - - - - - -
-
- -
-
-
-
- - - - {{ i18n.ts.search }} -
- -
-
+ @@ -58,6 +60,7 @@ import MkInput from '@/components/MkInput.vue'; import MkRadios from '@/components/MkRadios.vue'; import MkButton from '@/components/MkButton.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { i18n } from '@/i18n.js'; import { useRouter } from '@/global/router/supplier.js'; diff --git a/packages/frontend/src/pages/drive.file.vue b/packages/frontend/src/pages/drive.file.vue index 2c1e5d20a7..6a9e907963 100644 --- a/packages/frontend/src/pages/drive.file.vue +++ b/packages/frontend/src/pages/drive.file.vue @@ -9,13 +9,15 @@ SPDX-License-Identifier: AGPL-3.0-only - - - + + + + - - - + + + + @@ -23,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { computed, ref, defineAsyncComponent } from 'vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; const props = defineProps<{ fileId: string; diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue index f068de8880..1b80014366 100644 --- a/packages/frontend/src/pages/explore.vue +++ b/packages/frontend/src/pages/explore.vue @@ -6,17 +6,17 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -26,6 +26,7 @@ import XFeatured from './explore.featured.vue'; import XUsers from './explore.users.vue'; import XRoles from './explore.roles.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue index 7852018894..53510ea232 100644 --- a/packages/frontend/src/pages/flash/flash-index.vue +++ b/packages/frontend/src/pages/flash/flash-index.vue @@ -7,32 +7,34 @@ SPDX-License-Identifier: AGPL-3.0-only -
- -
- -
- -
- -
-
- - + +
+
-
-
- -
- +
+
+ + +
+ +
+
- -
+
+ +
+ +
+ +
+ +
+ @@ -42,6 +44,7 @@ import { computed, ref } from 'vue'; import MkFlashPreview from '@/components/MkFlashPreview.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { useRouter } from '@/global/router/supplier.js'; diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue index 0198ab9700..9749888fe9 100644 --- a/packages/frontend/src/pages/gallery/index.vue +++ b/packages/frontend/src/pages/gallery/index.vue @@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only -
-
+ +
@@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
-
+
{{ i18n.ts.postToGallery }}
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+ @@ -51,6 +51,7 @@ import { watch, ref, computed } from 'vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { i18n } from '@/i18n.js'; import { useRouter } from '@/global/router/supplier.js'; diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue index c8a0eeeeaa..4211dc0d87 100644 --- a/packages/frontend/src/pages/instance-info.vue +++ b/packages/frontend/src/pages/instance-info.vue @@ -7,111 +7,113 @@ SPDX-License-Identifier: AGPL-3.0-only -
-
- - {{ instance.name || `(${i18n.ts.unknown})` }} -
-
- - - - - - - - - - - - -
- - - - - - - -
- {{ i18n.ts.stopActivityDelivery }} - {{ i18n.ts.blockThisInstance }} - {{ i18n.ts.silenceThisInstance }} - Refresh metadata + +
+
+ + {{ instance.name || `(${i18n.ts.unknown})` }}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - host-meta - host-meta.json - nodeinfo - robots.txt - manifest.json - -
-
-
-
- - - - - - - - - - - - - +
+ + + + + + + + + + + +
-
-
{{ i18n.t('recentNHours', { n: 90 }) }}
- -
{{ i18n.t('recentNDays', { n: 90 }) }}
- + + + + + + + +
+ {{ i18n.ts.stopActivityDelivery }} + {{ i18n.ts.blockThisInstance }} + {{ i18n.ts.silenceThisInstance }} + Refresh metadata +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + host-meta + host-meta.json + nodeinfo + robots.txt + manifest.json + +
+
+
+
+ + + + + + + + + + + + + +
+
+
{{ i18n.t('recentNHours', { n: 90 }) }}
+ +
{{ i18n.t('recentNDays', { n: 90 }) }}
+ +
-
-
- - - - - -
-
- - -
+
+ + + + + +
+
+ + +
+ @@ -136,6 +138,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; import { i18n } from '@/i18n.js'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkPagination from '@/components/MkPagination.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js'; import { dateString } from '@/filters/date.js'; @@ -144,6 +147,7 @@ const props = defineProps<{ }>(); const tab = ref('overview'); + const chartSrc = ref('instance-requests'); const meta = ref(null); const instance = ref(null); diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue index 850222708e..468e46838b 100644 --- a/packages/frontend/src/pages/my-clips/index.vue +++ b/packages/frontend/src/pages/my-clips/index.vue @@ -7,20 +7,22 @@ SPDX-License-Identifier: AGPL-3.0-only -
- {{ i18n.ts.add }} + +
+ {{ i18n.ts.add }} - - + + + + + +
+
+ - -
-
- - - -
+
+ @@ -36,6 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { clipsCache } from '@/cache.js'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; const pagination = { endpoint: 'clips/list' as const, @@ -44,6 +47,7 @@ const pagination = { }; const tab = ref('my'); + const favorites = ref(null); const pagingComponent = shallowRef>(); diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue index d57bda41b5..8913a89adb 100644 --- a/packages/frontend/src/pages/notifications.vue +++ b/packages/frontend/src/pages/notifications.vue @@ -7,15 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only -
- -
-
- -
-
- -
+ +
+ +
+
+ +
+
+ +
+ @@ -24,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { computed, ref } from 'vue'; import XNotifications from '@/components/MkNotifications.vue'; import MkNotes from '@/components/MkNotes.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; @@ -96,3 +99,10 @@ definePageMetadata(computed(() => ({ icon: 'ti ti-bell', }))); + + diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue index 22ab9ced09..8b57b1af9f 100644 --- a/packages/frontend/src/pages/pages.vue +++ b/packages/frontend/src/pages/pages.vue @@ -7,30 +7,32 @@ SPDX-License-Identifier: AGPL-3.0-only -
- -
- -
- -
+ +
+ +
+ +
+ +
-
- - -
- -
- -
+
+ + +
+ +
+ +
-
- -
- -
- -
+
+ +
+ +
+ +
+ @@ -40,6 +42,7 @@ import { computed, ref } from 'vue'; import MkPagePreview from '@/components/MkPagePreview.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { useRouter } from '@/global/router/supplier.js'; diff --git a/packages/frontend/src/pages/search.vue b/packages/frontend/src/pages/search.vue index 9d5e5697ce..b68de805cf 100644 --- a/packages/frontend/src/pages/search.vue +++ b/packages/frontend/src/pages/search.vue @@ -7,18 +7,20 @@ SPDX-License-Identifier: AGPL-3.0-only - -
- -
-
- {{ i18n.ts.notesSearchNotAvailable }} -
- + + +
+ +
+
+ {{ i18n.ts.notesSearchNotAvailable }} +
+ - - - + + + + @@ -29,6 +31,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; import { $i } from '@/account.js'; import { instance } from '@/instance.js'; import MkInfo from '@/components/MkInfo.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; const XNote = defineAsyncComponent(() => import('./search.note.vue')); const XUser = defineAsyncComponent(() => import('./search.user.vue')); diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 607aaec521..e52a5ee04f 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -155,6 +155,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.enableInfiniteScroll }} {{ i18n.ts.keepScreenOn }} {{ i18n.ts.disableStreamingTimeline }} + {{ i18n.ts.enableHorizontalSwipe }}
@@ -296,6 +297,7 @@ const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn')); const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline')); const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications')); const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect')); +const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHorizontalSwipe')); watch(lang, () => { miLocalStorage.setItem('lang', lang.value as string); diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 6fe8963f51..666a9968b2 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -7,27 +7,28 @@ SPDX-License-Identifier: AGPL-3.0-only -
- - {{ i18n.ts._timelineDescription[src] }} - - - -
-
- + +
+ + {{ i18n.ts._timelineDescription[src] }} + + +
+
+ +
-
+ @@ -38,6 +39,7 @@ import type { Tab } from '@/components/global/MkPageHeader.tabs.vue'; import MkTimeline from '@/components/MkTimeline.vue'; import MkInfo from '@/components/MkInfo.vue'; import MkPostForm from '@/components/MkPostForm.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { scroll } from '@/scripts/scroll.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; @@ -69,7 +71,9 @@ const withRenotes = ref(true); const withReplies = ref($i ? defaultStore.state.tlWithReplies : false); const onlyFiles = ref(false); -watch(src, () => queue.value = 0); +watch(src, () => { + queue.value = 0; +}); watch(withReplies, (x) => { if ($i) defaultStore.set('tlWithReplies', x); diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue index 95869e7b8c..603f1bef33 100644 --- a/packages/frontend/src/pages/user/index.vue +++ b/packages/frontend/src/pages/user/index.vue @@ -8,19 +8,21 @@ SPDX-License-Identifier: AGPL-3.0-only
- - - - - - - - - - - - - + + + + + + + + + + + + + + +
@@ -36,6 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { i18n } from '@/i18n.js'; import { $i } from '@/account.js'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; const XHome = defineAsyncComponent(() => import('./home.vue')); const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue')); @@ -57,6 +60,7 @@ const props = withDefaults(defineProps<{ }); const tab = ref(props.page); + const user = ref(null); const error = ref(null); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index e3a85377d8..21b796caa1 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -427,6 +427,10 @@ export const defaultStore = markRaw(new Storage('base', { sfxVolume: 1, }, }, + enableHorizontalSwipe: { + where: 'device', + default: true, + }, sound_masterVolume: { where: 'device', From 43401210c3691ffd8f8ac78b67bd5898e7981335 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Fri, 19 Jan 2024 07:58:07 +0900 Subject: [PATCH 44/45] refactor: fully typed locales (#13033) * refactor: fully typed locales * refactor: hide parameterized locale strings from type data in ts access * refactor: missing assertions * docs: annotation --- locales/generateDTS.js | 201 ++++++++++++++++++---- locales/index.d.ts | 229 +++++++++++++------------- packages/frontend/src/i18n.ts | 5 +- packages/frontend/src/scripts/i18n.ts | 113 +++++++++++-- 4 files changed, 383 insertions(+), 165 deletions(-) diff --git a/locales/generateDTS.js b/locales/generateDTS.js index d3afdd6e15..6eb5bd630d 100644 --- a/locales/generateDTS.js +++ b/locales/generateDTS.js @@ -6,54 +6,171 @@ import ts from 'typescript'; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); +const parameterRegExp = /\{(\w+)\}/g; + +function createMemberType(item) { + if (typeof item !== 'string') { + return ts.factory.createTypeLiteralNode(createMembers(item)); + } + const parameters = Array.from( + item.matchAll(parameterRegExp), + ([, parameter]) => parameter, + ); + if (!parameters.length) { + return ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword); + } + return ts.factory.createTypeReferenceNode( + ts.factory.createIdentifier('ParameterizedString'), + [ + ts.factory.createUnionTypeNode( + parameters.map((parameter) => + ts.factory.createLiteralTypeNode( + ts.factory.createStringLiteral(parameter), + ), + ), + ), + ], + ); +} function createMembers(record) { - return Object.entries(record) - .map(([k, v]) => ts.factory.createPropertySignature( + return Object.entries(record).map(([k, v]) => + ts.factory.createPropertySignature( undefined, ts.factory.createStringLiteral(k), undefined, - typeof v === 'string' - ? ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword) - : ts.factory.createTypeLiteralNode(createMembers(v)), - )); + createMemberType(v), + ), + ); } export default function generateDTS() { const locale = yaml.load(fs.readFileSync(`${__dirname}/ja-JP.yml`, 'utf-8')); const members = createMembers(locale); const elements = [ + ts.factory.createVariableStatement( + [ts.factory.createToken(ts.SyntaxKind.DeclareKeyword)], + ts.factory.createVariableDeclarationList( + [ + ts.factory.createVariableDeclaration( + ts.factory.createIdentifier('kParameters'), + undefined, + ts.factory.createTypeOperatorNode( + ts.SyntaxKind.UniqueKeyword, + ts.factory.createKeywordTypeNode(ts.SyntaxKind.SymbolKeyword), + ), + undefined, + ), + ], + ts.NodeFlags.Const, + ), + ), + ts.factory.createInterfaceDeclaration( + [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)], + ts.factory.createIdentifier('ParameterizedString'), + [ + ts.factory.createTypeParameterDeclaration( + undefined, + ts.factory.createIdentifier('T'), + ts.factory.createTypeReferenceNode( + ts.factory.createIdentifier('string'), + undefined, + ), + ), + ], + undefined, + [ + ts.factory.createPropertySignature( + undefined, + ts.factory.createComputedPropertyName( + ts.factory.createIdentifier('kParameters'), + ), + undefined, + ts.factory.createTypeReferenceNode( + ts.factory.createIdentifier('T'), + undefined, + ), + ), + ], + ), + ts.factory.createInterfaceDeclaration( + [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)], + ts.factory.createIdentifier('ILocale'), + undefined, + undefined, + [ + ts.factory.createIndexSignature( + undefined, + [ + ts.factory.createParameterDeclaration( + undefined, + undefined, + ts.factory.createIdentifier('_'), + undefined, + ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword), + undefined, + ), + ], + ts.factory.createUnionTypeNode([ + ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword), + ts.factory.createTypeReferenceNode( + ts.factory.createIdentifier('ParameterizedString'), + [ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword)], + ), + ts.factory.createTypeReferenceNode( + ts.factory.createIdentifier('ILocale'), + undefined, + ), + ]), + ), + ], + ), ts.factory.createInterfaceDeclaration( [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)], ts.factory.createIdentifier('Locale'), undefined, - undefined, + [ + ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [ + ts.factory.createExpressionWithTypeArguments( + ts.factory.createIdentifier('ILocale'), + undefined, + ), + ]), + ], members, ), ts.factory.createVariableStatement( [ts.factory.createToken(ts.SyntaxKind.DeclareKeyword)], ts.factory.createVariableDeclarationList( - [ts.factory.createVariableDeclaration( - ts.factory.createIdentifier('locales'), - undefined, - ts.factory.createTypeLiteralNode([ts.factory.createIndexSignature( + [ + ts.factory.createVariableDeclaration( + ts.factory.createIdentifier('locales'), undefined, - [ts.factory.createParameterDeclaration( - undefined, - undefined, - ts.factory.createIdentifier('lang'), - undefined, - ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword), - undefined, - )], - ts.factory.createTypeReferenceNode( - ts.factory.createIdentifier('Locale'), - undefined, - ), - )]), - undefined, - )], - ts.NodeFlags.Const | ts.NodeFlags.Ambient | ts.NodeFlags.ContextFlags, + ts.factory.createTypeLiteralNode([ + ts.factory.createIndexSignature( + undefined, + [ + ts.factory.createParameterDeclaration( + undefined, + undefined, + ts.factory.createIdentifier('lang'), + undefined, + ts.factory.createKeywordTypeNode( + ts.SyntaxKind.StringKeyword, + ), + undefined, + ), + ], + ts.factory.createTypeReferenceNode( + ts.factory.createIdentifier('Locale'), + undefined, + ), + ), + ]), + undefined, + ), + ], + ts.NodeFlags.Const, ), ), ts.factory.createFunctionDeclaration( @@ -70,16 +187,28 @@ export default function generateDTS() { ), ts.factory.createExportDefault(ts.factory.createIdentifier('locales')), ]; - const printed = ts.createPrinter({ - newLine: ts.NewLineKind.LineFeed, - }).printList( - ts.ListFormat.MultiLine, - ts.factory.createNodeArray(elements), - ts.createSourceFile('index.d.ts', '', ts.ScriptTarget.ESNext, true, ts.ScriptKind.TS), - ); + const printed = ts + .createPrinter({ + newLine: ts.NewLineKind.LineFeed, + }) + .printList( + ts.ListFormat.MultiLine, + ts.factory.createNodeArray(elements), + ts.createSourceFile( + 'index.d.ts', + '', + ts.ScriptTarget.ESNext, + true, + ts.ScriptKind.TS, + ), + ); - fs.writeFileSync(`${__dirname}/index.d.ts`, `/* eslint-disable */ + fs.writeFileSync( + `${__dirname}/index.d.ts`, + `/* eslint-disable */ // This file is generated by locales/generateDTS.js // Do not edit this file directly. -${printed}`, 'utf-8'); +${printed}`, + 'utf-8', + ); } diff --git a/locales/index.d.ts b/locales/index.d.ts index a659e790cc..a22cb63507 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1,12 +1,19 @@ /* eslint-disable */ // This file is generated by locales/generateDTS.js // Do not edit this file directly. -export interface Locale { +declare const kParameters: unique symbol; +export interface ParameterizedString { + [kParameters]: T; +} +export interface ILocale { + [_: string]: string | ParameterizedString | ILocale; +} +export interface Locale extends ILocale { "_lang_": string; "headlineMisskey": string; "introMisskey": string; - "poweredByMisskeyDescription": string; - "monthAndDay": string; + "poweredByMisskeyDescription": ParameterizedString<"name">; + "monthAndDay": ParameterizedString<"month" | "day">; "search": string; "notifications": string; "username": string; @@ -18,7 +25,7 @@ export interface Locale { "cancel": string; "noThankYou": string; "enterUsername": string; - "renotedBy": string; + "renotedBy": ParameterizedString<"user">; "noNotes": string; "noNotifications": string; "instance": string; @@ -78,8 +85,8 @@ export interface Locale { "export": string; "files": string; "download": string; - "driveFileDeleteConfirm": string; - "unfollowConfirm": string; + "driveFileDeleteConfirm": ParameterizedString<"name">; + "unfollowConfirm": ParameterizedString<"name">; "exportRequested": string; "importRequested": string; "lists": string; @@ -183,9 +190,9 @@ export interface Locale { "wallpaper": string; "setWallpaper": string; "removeWallpaper": string; - "searchWith": string; + "searchWith": ParameterizedString<"q">; "youHaveNoLists": string; - "followConfirm": string; + "followConfirm": ParameterizedString<"name">; "proxyAccount": string; "proxyAccountDescription": string; "host": string; @@ -208,7 +215,7 @@ export interface Locale { "software": string; "version": string; "metadata": string; - "withNFiles": string; + "withNFiles": ParameterizedString<"n">; "monitor": string; "jobQueue": string; "cpuAndMemory": string; @@ -237,7 +244,7 @@ export interface Locale { "processing": string; "preview": string; "default": string; - "defaultValueIs": string; + "defaultValueIs": ParameterizedString<"value">; "noCustomEmojis": string; "noJobs": string; "federating": string; @@ -266,8 +273,8 @@ export interface Locale { "imageUrl": string; "remove": string; "removed": string; - "removeAreYouSure": string; - "deleteAreYouSure": string; + "removeAreYouSure": ParameterizedString<"x">; + "deleteAreYouSure": ParameterizedString<"x">; "resetAreYouSure": string; "areYouSure": string; "saved": string; @@ -285,8 +292,8 @@ export interface Locale { "messageRead": string; "noMoreHistory": string; "startMessaging": string; - "nUsersRead": string; - "agreeTo": string; + "nUsersRead": ParameterizedString<"n">; + "agreeTo": ParameterizedString<"0">; "agree": string; "agreeBelow": string; "basicNotesBeforeCreateAccount": string; @@ -298,7 +305,7 @@ export interface Locale { "images": string; "image": string; "birthday": string; - "yearsOld": string; + "yearsOld": ParameterizedString<"age">; "registeredDate": string; "location": string; "theme": string; @@ -353,9 +360,9 @@ export interface Locale { "thisYear": string; "thisMonth": string; "today": string; - "dayX": string; - "monthX": string; - "yearX": string; + "dayX": ParameterizedString<"day">; + "monthX": ParameterizedString<"month">; + "yearX": ParameterizedString<"year">; "pages": string; "integration": string; "connectService": string; @@ -420,7 +427,7 @@ export interface Locale { "recentlyUpdatedUsers": string; "recentlyRegisteredUsers": string; "recentlyDiscoveredUsers": string; - "exploreUsersCount": string; + "exploreUsersCount": ParameterizedString<"count">; "exploreFediverse": string; "popularTags": string; "userList": string; @@ -437,16 +444,16 @@ export interface Locale { "moderationNote": string; "addModerationNote": string; "moderationLogs": string; - "nUsersMentioned": string; + "nUsersMentioned": ParameterizedString<"n">; "securityKeyAndPasskey": string; "securityKey": string; "lastUsed": string; - "lastUsedAt": string; + "lastUsedAt": ParameterizedString<"t">; "unregister": string; "passwordLessLogin": string; "passwordLessLoginDescription": string; "resetPassword": string; - "newPasswordIs": string; + "newPasswordIs": ParameterizedString<"password">; "reduceUiAnimation": string; "share": string; "notFound": string; @@ -466,7 +473,7 @@ export interface Locale { "enable": string; "next": string; "retype": string; - "noteOf": string; + "noteOf": ParameterizedString<"user">; "quoteAttached": string; "quoteQuestion": string; "noMessagesYet": string; @@ -486,12 +493,12 @@ export interface Locale { "strongPassword": string; "passwordMatched": string; "passwordNotMatched": string; - "signinWith": string; + "signinWith": ParameterizedString<"x">; "signinFailed": string; "or": string; "language": string; "uiLanguage": string; - "aboutX": string; + "aboutX": ParameterizedString<"x">; "emojiStyle": string; "native": string; "disableDrawer": string; @@ -509,7 +516,7 @@ export interface Locale { "regenerate": string; "fontSize": string; "mediaListWithOneImageAppearance": string; - "limitTo": string; + "limitTo": ParameterizedString<"x">; "noFollowRequests": string; "openImageInNewTab": string; "dashboard": string; @@ -587,7 +594,7 @@ export interface Locale { "deleteAllFiles": string; "deleteAllFilesConfirm": string; "removeAllFollowing": string; - "removeAllFollowingDescription": string; + "removeAllFollowingDescription": ParameterizedString<"host">; "userSuspended": string; "userSilenced": string; "yourAccountSuspendedTitle": string; @@ -658,9 +665,9 @@ export interface Locale { "wordMute": string; "hardWordMute": string; "regexpError": string; - "regexpErrorDescription": string; + "regexpErrorDescription": ParameterizedString<"tab" | "line">; "instanceMute": string; - "userSaysSomething": string; + "userSaysSomething": ParameterizedString<"name">; "makeActive": string; "display": string; "copy": string; @@ -686,7 +693,7 @@ export interface Locale { "abuseReports": string; "reportAbuse": string; "reportAbuseRenote": string; - "reportAbuseOf": string; + "reportAbuseOf": ParameterizedString<"name">; "fillAbuseReportDescription": string; "abuseReported": string; "reporter": string; @@ -701,7 +708,7 @@ export interface Locale { "defaultNavigationBehaviour": string; "editTheseSettingsMayBreakAccount": string; "instanceTicker": string; - "waitingFor": string; + "waitingFor": ParameterizedString<"x">; "random": string; "system": string; "switchUi": string; @@ -711,10 +718,10 @@ export interface Locale { "optional": string; "createNewClip": string; "unclip": string; - "confirmToUnclipAlreadyClippedNote": string; + "confirmToUnclipAlreadyClippedNote": ParameterizedString<"name">; "public": string; "private": string; - "i18nInfo": string; + "i18nInfo": ParameterizedString<"link">; "manageAccessTokens": string; "accountInfo": string; "notesCount": string; @@ -764,9 +771,9 @@ export interface Locale { "needReloadToApply": string; "showTitlebar": string; "clearCache": string; - "onlineUsersCount": string; - "nUsers": string; - "nNotes": string; + "onlineUsersCount": ParameterizedString<"n">; + "nUsers": ParameterizedString<"n">; + "nNotes": ParameterizedString<"n">; "sendErrorReports": string; "sendErrorReportsDescription": string; "myTheme": string; @@ -798,7 +805,7 @@ export interface Locale { "publish": string; "inChannelSearch": string; "useReactionPickerForContextMenu": string; - "typingUsers": string; + "typingUsers": ParameterizedString<"users">; "jumpToSpecifiedDate": string; "showingPastTimeline": string; "clear": string; @@ -865,7 +872,7 @@ export interface Locale { "misskeyUpdated": string; "whatIsNew": string; "translate": string; - "translatedFrom": string; + "translatedFrom": ParameterizedString<"x">; "accountDeletionInProgress": string; "usernameInfo": string; "aiChanMode": string; @@ -896,11 +903,11 @@ export interface Locale { "continueThread": string; "deleteAccountConfirm": string; "incorrectPassword": string; - "voteConfirm": string; + "voteConfirm": ParameterizedString<"choice">; "hide": string; "useDrawerReactionPickerForMobile": string; - "welcomeBackWithName": string; - "clickToFinishEmailVerification": string; + "welcomeBackWithName": ParameterizedString<"name">; + "clickToFinishEmailVerification": ParameterizedString<"ok">; "overridedDeviceKind": string; "smartphone": string; "tablet": string; @@ -928,8 +935,8 @@ export interface Locale { "cropYes": string; "cropNo": string; "file": string; - "recentNHours": string; - "recentNDays": string; + "recentNHours": ParameterizedString<"n">; + "recentNDays": ParameterizedString<"n">; "noEmailServerWarning": string; "thereIsUnresolvedAbuseReportWarning": string; "recommended": string; @@ -938,7 +945,7 @@ export interface Locale { "driveCapOverrideCaption": string; "requireAdminForView": string; "isSystemAccount": string; - "typeToConfirm": string; + "typeToConfirm": ParameterizedString<"x">; "deleteAccount": string; "document": string; "numberOfPageCache": string; @@ -992,7 +999,7 @@ export interface Locale { "neverShow": string; "remindMeLater": string; "didYouLikeMisskey": string; - "pleaseDonate": string; + "pleaseDonate": ParameterizedString<"host">; "roles": string; "role": string; "noRole": string; @@ -1090,7 +1097,7 @@ export interface Locale { "preservedUsernamesDescription": string; "createNoteFromTheFile": string; "archive": string; - "channelArchiveConfirmTitle": string; + "channelArchiveConfirmTitle": ParameterizedString<"name">; "channelArchiveConfirmDescription": string; "thisChannelArchived": string; "displayOfNote": string; @@ -1120,8 +1127,8 @@ export interface Locale { "createCount": string; "inviteCodeCreated": string; "inviteLimitExceeded": string; - "createLimitRemaining": string; - "inviteLimitResetCycle": string; + "createLimitRemaining": ParameterizedString<"limit">; + "inviteLimitResetCycle": ParameterizedString<"time" | "limit">; "expirationDate": string; "noExpirationDate": string; "inviteCodeUsedAt": string; @@ -1134,7 +1141,7 @@ export interface Locale { "expired": string; "doYouAgree": string; "beSureToReadThisAsItIsImportant": string; - "iHaveReadXCarefullyAndAgree": string; + "iHaveReadXCarefullyAndAgree": ParameterizedString<"x">; "dialog": string; "icon": string; "forYou": string; @@ -1189,7 +1196,7 @@ export interface Locale { "doReaction": string; "code": string; "reloadRequiredToApplySettings": string; - "remainingN": string; + "remainingN": ParameterizedString<"n">; "overwriteContentConfirm": string; "seasonalScreenEffect": string; "decorate": string; @@ -1202,7 +1209,7 @@ export interface Locale { "replay": string; "replaying": string; "ranking": string; - "lastNDays": string; + "lastNDays": ParameterizedString<"n">; "backToTitle": string; "enableHorizontalSwipe": string; "_bubbleGame": { @@ -1221,7 +1228,7 @@ export interface Locale { "end": string; "tooManyActiveAnnouncementDescription": string; "readConfirmTitle": string; - "readConfirmText": string; + "readConfirmText": ParameterizedString<"title">; "shouldNotBeUsedToPresentPermanentInfo": string; "dialogAnnouncementUxWarn": string; "silence": string; @@ -1236,10 +1243,10 @@ export interface Locale { "theseSettingsCanEditLater": string; "youCanEditMoreSettingsInSettingsPageLater": string; "followUsers": string; - "pushNotificationDescription": string; + "pushNotificationDescription": ParameterizedString<"name">; "initialAccountSettingCompleted": string; - "haveFun": string; - "youCanContinueTutorial": string; + "haveFun": ParameterizedString<"name">; + "youCanContinueTutorial": ParameterizedString<"name">; "startTutorial": string; "skipAreYouSure": string; "laterAreYouSure": string; @@ -1277,7 +1284,7 @@ export interface Locale { "social": string; "global": string; "description2": string; - "description3": string; + "description3": ParameterizedString<"link">; }; "_postNote": { "title": string; @@ -1315,7 +1322,7 @@ export interface Locale { }; "_done": { "title": string; - "description": string; + "description": ParameterizedString<"link">; }; }; "_timelineDescription": { @@ -1329,10 +1336,10 @@ export interface Locale { }; "_serverSettings": { "iconUrl": string; - "appIconDescription": string; + "appIconDescription": ParameterizedString<"host">; "appIconUsageExample": string; "appIconStyleRecommendation": string; - "appIconResolutionMustBe": string; + "appIconResolutionMustBe": ParameterizedString<"resolution">; "manifestJsonOverride": string; "shortName": string; "shortNameDescription": string; @@ -1343,7 +1350,7 @@ export interface Locale { "_accountMigration": { "moveFrom": string; "moveFromSub": string; - "moveFromLabel": string; + "moveFromLabel": ParameterizedString<"n">; "moveFromDescription": string; "moveTo": string; "moveToLabel": string; @@ -1351,7 +1358,7 @@ export interface Locale { "moveAccountDescription": string; "moveAccountHowTo": string; "startMigration": string; - "migrationConfirm": string; + "migrationConfirm": ParameterizedString<"account">; "movedAndCannotBeUndone": string; "postMigrationNote": string; "movedTo": string; @@ -1793,7 +1800,7 @@ export interface Locale { "_signup": { "almostThere": string; "emailAddressInfo": string; - "emailSent": string; + "emailSent": ParameterizedString<"email">; }; "_accountDelete": { "accountDelete": string; @@ -1846,14 +1853,14 @@ export interface Locale { "save": string; "inputName": string; "cannotSave": string; - "nameAlreadyExists": string; - "applyConfirm": string; - "saveConfirm": string; - "deleteConfirm": string; - "renameConfirm": string; + "nameAlreadyExists": ParameterizedString<"name">; + "applyConfirm": ParameterizedString<"name">; + "saveConfirm": ParameterizedString<"name">; + "deleteConfirm": ParameterizedString<"name">; + "renameConfirm": ParameterizedString<"old" | "new">; "noBackups": string; - "createdAt": string; - "updatedAt": string; + "createdAt": ParameterizedString<"date" | "time">; + "updatedAt": ParameterizedString<"date" | "time">; "cannotLoad": string; "invalidFile": string; }; @@ -1898,8 +1905,8 @@ export interface Locale { "featured": string; "owned": string; "following": string; - "usersCount": string; - "notesCount": string; + "usersCount": ParameterizedString<"n">; + "notesCount": ParameterizedString<"n">; "nameAndDescription": string; "nameOnly": string; "allowRenoteToExternal": string; @@ -1927,7 +1934,7 @@ export interface Locale { "manage": string; "code": string; "description": string; - "installed": string; + "installed": ParameterizedString<"name">; "installedThemes": string; "builtinThemes": string; "alreadyInstalled": string; @@ -1950,7 +1957,7 @@ export interface Locale { "lighten": string; "inputConstantName": string; "importInfo": string; - "deleteConstantConfirm": string; + "deleteConstantConfirm": ParameterizedString<"const">; "keys": { "accent": string; "bg": string; @@ -2013,23 +2020,23 @@ export interface Locale { "_ago": { "future": string; "justNow": string; - "secondsAgo": string; - "minutesAgo": string; - "hoursAgo": string; - "daysAgo": string; - "weeksAgo": string; - "monthsAgo": string; - "yearsAgo": string; + "secondsAgo": ParameterizedString<"n">; + "minutesAgo": ParameterizedString<"n">; + "hoursAgo": ParameterizedString<"n">; + "daysAgo": ParameterizedString<"n">; + "weeksAgo": ParameterizedString<"n">; + "monthsAgo": ParameterizedString<"n">; + "yearsAgo": ParameterizedString<"n">; "invalid": string; }; "_timeIn": { - "seconds": string; - "minutes": string; - "hours": string; - "days": string; - "weeks": string; - "months": string; - "years": string; + "seconds": ParameterizedString<"n">; + "minutes": ParameterizedString<"n">; + "hours": ParameterizedString<"n">; + "days": ParameterizedString<"n">; + "weeks": ParameterizedString<"n">; + "months": ParameterizedString<"n">; + "years": ParameterizedString<"n">; }; "_time": { "second": string; @@ -2040,7 +2047,7 @@ export interface Locale { "_2fa": { "alreadyRegistered": string; "registerTOTP": string; - "step1": string; + "step1": ParameterizedString<"a" | "b">; "step2": string; "step2Click": string; "step2Uri": string; @@ -2055,7 +2062,7 @@ export interface Locale { "securityKeyName": string; "tapSecurityKey": string; "removeKey": string; - "removeKeyConfirm": string; + "removeKeyConfirm": ParameterizedString<"name">; "whyTOTPOnlyRenew": string; "renewTOTP": string; "renewTOTPConfirm": string; @@ -2156,9 +2163,9 @@ export interface Locale { }; "_auth": { "shareAccessTitle": string; - "shareAccess": string; + "shareAccess": ParameterizedString<"name">; "shareAccessAsk": string; - "permission": string; + "permission": ParameterizedString<"name">; "permissionAsk": string; "pleaseGoBack": string; "callback": string; @@ -2217,12 +2224,12 @@ export interface Locale { "_cw": { "hide": string; "show": string; - "chars": string; - "files": string; + "chars": ParameterizedString<"count">; + "files": ParameterizedString<"count">; }; "_poll": { "noOnlyOneChoice": string; - "choiceN": string; + "choiceN": ParameterizedString<"n">; "noMore": string; "canMultipleVote": string; "expiration": string; @@ -2232,16 +2239,16 @@ export interface Locale { "deadlineDate": string; "deadlineTime": string; "duration": string; - "votesCount": string; - "totalVotes": string; + "votesCount": ParameterizedString<"n">; + "totalVotes": ParameterizedString<"n">; "vote": string; "showResult": string; "voted": string; "closed": string; - "remainingDays": string; - "remainingHours": string; - "remainingMinutes": string; - "remainingSeconds": string; + "remainingDays": ParameterizedString<"d" | "h">; + "remainingHours": ParameterizedString<"h" | "m">; + "remainingMinutes": ParameterizedString<"m" | "s">; + "remainingSeconds": ParameterizedString<"s">; }; "_visibility": { "public": string; @@ -2281,7 +2288,7 @@ export interface Locale { "changeAvatar": string; "changeBanner": string; "verifiedLinkDescription": string; - "avatarDecorationMax": string; + "avatarDecorationMax": ParameterizedString<"max">; }; "_exportOrImport": { "allNotes": string; @@ -2404,16 +2411,16 @@ export interface Locale { }; "_notification": { "fileUploaded": string; - "youGotMention": string; - "youGotReply": string; - "youGotQuote": string; - "youRenoted": string; + "youGotMention": ParameterizedString<"name">; + "youGotReply": ParameterizedString<"name">; + "youGotQuote": ParameterizedString<"name">; + "youRenoted": ParameterizedString<"name">; "youWereFollowed": string; "youReceivedFollowRequest": string; "yourFollowRequestAccepted": string; "pollEnded": string; "newNote": string; - "unreadAntennaNote": string; + "unreadAntennaNote": ParameterizedString<"name">; "roleAssigned": string; "emptyPushNotificationMessage": string; "achievementEarned": string; @@ -2421,9 +2428,9 @@ export interface Locale { "checkNotificationBehavior": string; "sendTestNotification": string; "notificationWillBeDisplayedLikeThis": string; - "reactedBySomeUsers": string; - "renotedBySomeUsers": string; - "followedBySomeUsers": string; + "reactedBySomeUsers": ParameterizedString<"n">; + "renotedBySomeUsers": ParameterizedString<"n">; + "followedBySomeUsers": ParameterizedString<"n">; "_types": { "all": string; "note": string; @@ -2480,8 +2487,8 @@ export interface Locale { }; }; "_dialog": { - "charactersExceeded": string; - "charactersBelow": string; + "charactersExceeded": ParameterizedString<"current" | "max">; + "charactersBelow": ParameterizedString<"current" | "min">; }; "_disabledTimeline": { "title": string; diff --git a/packages/frontend/src/i18n.ts b/packages/frontend/src/i18n.ts index 858db74dac..c5c4ccf820 100644 --- a/packages/frontend/src/i18n.ts +++ b/packages/frontend/src/i18n.ts @@ -10,6 +10,7 @@ import { I18n } from '@/scripts/i18n.js'; export const i18n = markRaw(new I18n(locale)); -export function updateI18n(newLocale) { - i18n.ts = newLocale; +export function updateI18n(newLocale: Locale) { + // @ts-expect-error -- private field + i18n.locale = newLocale; } diff --git a/packages/frontend/src/scripts/i18n.ts b/packages/frontend/src/scripts/i18n.ts index 8e5f17f38a..55b5371950 100644 --- a/packages/frontend/src/scripts/i18n.ts +++ b/packages/frontend/src/scripts/i18n.ts @@ -2,33 +2,114 @@ * SPDX-FileCopyrightText: syuilo and other misskey contributors * SPDX-License-Identifier: AGPL-3.0-only */ +import type { ILocale, ParameterizedString } from '../../../../locales/index.js'; -export class I18n> { - public ts: T; +type FlattenKeys = keyof { + [K in keyof T as T[K] extends ILocale + ? FlattenKeys extends infer C extends string + ? `${K & string}.${C}` + : never + : T[K] extends TPrediction + ? K + : never]: T[K]; +}; - constructor(locale: T) { - this.ts = locale; +type ParametersOf>> = T extends ILocale + ? TKey extends `${infer K}.${infer C}` + // @ts-expect-error -- C は明らかに FlattenKeys> になるが、型システムはここでは TKey がドット区切りであることのコンテキストを持たないので、型システムに合法にて示すことはできない。 + ? ParametersOf + : TKey extends keyof T + ? T[TKey] extends ParameterizedString + ? P + : never + : never + : never; +type Ts = { + readonly [K in keyof T as T[K] extends ParameterizedString ? never : K]: T[K] extends ILocale ? Ts : string; +}; + +export class I18n { + constructor(private locale: T) { //#region BIND this.t = this.t.bind(this); //#endregion } - // string にしているのは、ドット区切りでのパス指定を許可するため - // なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも - public t(key: string, args?: Record): string { - try { - let str = key.split('.').reduce((o, i) => o[i], this.ts) as unknown as string; + public get ts(): Ts { + if (_DEV_) { + class Handler implements ProxyHandler { + get(target: TTarget, p: string | symbol): unknown { + const value = target[p as keyof TTarget]; - if (args) { - for (const [k, v] of Object.entries(args)) { - str = str.replace(`{${k}}`, v.toString()); + if (typeof value === 'object') { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- 実際には null がくることはないので。 + return new Proxy(value!, new Handler()); + } + + if (typeof value === 'string') { + const parameters = Array.from(value.matchAll(/\{(\w+)\}/g)).map(([, parameter]) => parameter); + + if (parameters.length) { + console.error(`Missing locale parameters: ${parameters.join(', ')} at ${String(p)}`); + } + + return value; + } + + console.error(`Unexpected locale key: ${String(p)}`); + + return p; } } - return str; - } catch (err) { - console.warn(`missing localization '${key}'`); - return key; + + return new Proxy(this.locale, new Handler()) as Ts; } + + return this.locale as Ts; + } + + /** + * @deprecated なるべくこのメソッド使うよりも locale 直接参照の方が vue のキャッシュ効いてパフォーマンスが良いかも + */ + public t>(key: TKey): string; + public t>>(key: TKey, args: { readonly [_ in ParametersOf]: string | number }): string; + public t(key: string, args?: { readonly [_: string]: string | number }) { + let str: string | ParameterizedString | ILocale = this.locale; + + for (const k of key.split('.')) { + str = str[k]; + + if (_DEV_) { + if (typeof str === 'undefined') { + console.error(`Unexpected locale key: ${key}`); + return key; + } + } + } + + if (args) { + if (_DEV_) { + const missing = Array.from((str as string).matchAll(/\{(\w+)\}/g), ([, parameter]) => parameter).filter(parameter => !Object.hasOwn(args, parameter)); + + if (missing.length) { + console.error(`Missing locale parameters: ${missing.join(', ')} at ${key}`); + } + } + + for (const [k, v] of Object.entries(args)) { + const search = `{${k}}`; + + if (_DEV_) { + if (!(str as string).includes(search)) { + console.error(`Unexpected locale parameter: ${k} at ${key}`); + } + } + + str = (str as string).replace(search, v.toString()); + } + } + + return str; } } From d85085d16fb6952e742eeca38b98f9442b7ec984 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Fri, 19 Jan 2024 11:54:00 +0900 Subject: [PATCH 45/45] refactor: style --- packages/frontend/src/scripts/i18n.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/scripts/i18n.ts b/packages/frontend/src/scripts/i18n.ts index 55b5371950..3366f3eac3 100644 --- a/packages/frontend/src/scripts/i18n.ts +++ b/packages/frontend/src/scripts/i18n.ts @@ -48,7 +48,7 @@ export class I18n { } if (typeof value === 'string') { - const parameters = Array.from(value.matchAll(/\{(\w+)\}/g)).map(([, parameter]) => parameter); + const parameters = Array.from(value.matchAll(/\{(\w+)\}/g), ([, parameter]) => parameter); if (parameters.length) { console.error(`Missing locale parameters: ${parameters.join(', ')} at ${String(p)}`);