refactor: trans -> t

resources/assets/src/components/Modal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import $ from 'jquery'
 import 'bootstrap'
-import { trans } from '../scripts/i18n'
+import { t } from '../scripts/i18n'
 import ModalHeader from './ModalHeader'
 import ModalBody from './ModalBody'
 import ModalFooter from './ModalFooter'
@@ -38,7 +38,7 @@ export type ModalResult = {
 const Modal: React.FC<ModalOptions & Props> = (props) => {
   const {
     mode = 'confirm',
-    title = trans('general.tip'),
+    title = t('general.tip'),
     text = '',
     input = '',
     placeholder = '',
@@ -46,9 +46,9 @@ const Modal: React.FC<ModalOptions & Props> = (props) => {
     type = 'default',
     showHeader = true,
     center = false,
-    okButtonText = trans('general.confirm'),
+    okButtonText = t('general.confirm'),
     okButtonType = 'primary',
-    cancelButtonText = trans('general.cancel'),
+    cancelButtonText = t('general.cancel'),
     cancelButtonType = 'secondary',
     flexFooter = false,
   } = props

resources/assets/src/components/ViewerSkeleton.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 
 const ViewerSkeleton: React.FC = () => (
   <div className="card">
     <div className="card-header">
       <div className="d-flex justify-content-between">
         <h3 className="card-title">
-          <span>{trans('general.texturePreview')}</span>
+          <span>{t('general.texturePreview')}</span>
         </h3>
       </div>
     </div>

resources/assets/src/scripts/i18n.ts

@@ -1,4 +1,4 @@
-export function trans(key: string, parameters = Object.create(null)): string {
+export function t(key: string, parameters = Object.create(null)): string {
   const segments = key.split('.')
   let temp = (blessing.i18n) as {
     [k: string]: string | { [k: string]: string }
@@ -23,6 +23,4 @@ export function trans(key: string, parameters = Object.create(null)): string {
   return result
 }
 
-export const t = trans
-
-Object.assign(window, { trans })
+Object.assign(window, { trans: t })

resources/assets/src/scripts/logout.ts

@@ -1,11 +1,11 @@
 import { post } from './net'
-import { trans } from './i18n'
+import { t } from './i18n'
 import { showModal } from './notify'
 
 export async function logout() {
   try {
     await showModal({
-      text: trans('general.confirmLogout'),
+      text: t('general.confirmLogout'),
       center: true,
     })
   } catch {

resources/assets/src/scripts/net.ts

@@ -1,6 +1,6 @@
 import { emit } from './event'
 import { showModal } from './notify'
-import { trans, t } from './i18n'
+import { t } from './i18n'
 
 export interface ResponseBody<T = null> {
   code: number
@@ -87,13 +87,13 @@ export async function walkFetch(request: Request): Promise<any> {
     emit('fetchError', error)
     showModal({
       mode: 'alert',
-      title: trans('general.fatalError'),
+      title: t('general.fatalError'),
       dangerousHTML: error.message,
       type: 'danger',
       okButtonType: 'outline-light',
     })
 
-    return { code: -1, message: trans('general.fatalError') }
+    return { code: -1, message: t('general.fatalError') }
   }
 }
 

resources/assets/src/views/admin/Update.ts

@@ -1,13 +1,13 @@
 import { post, ResponseBody } from '../../scripts/net'
 import { showModal } from '../../scripts/notify'
-import { trans } from '../../scripts/i18n'
+import { t } from '../../scripts/i18n'
 
 export default async function handler(event: MouseEvent) {
   const button = event.target as HTMLButtonElement
   button.disabled = true
 
   const text = button.textContent
-  button.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${trans('admin.downloading')}`
+  button.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${t('admin.downloading')}`
 
   const { code, message }: ResponseBody = await post('/admin/update/download')
   button.textContent = text

resources/assets/src/views/user/profile/password.ts

@@ -1,5 +1,5 @@
 import { post, ResponseBody } from '@/scripts/net'
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 import { showModal, toast } from '@/scripts/notify'
 
 export default async function handler(event: Event) {
@@ -11,7 +11,7 @@ export default async function handler(event: Event) {
   const confirmPassword = form.confirm.value
 
   if (newPassword !== confirmPassword) {
-    toast.error(trans('auth.invalidConfirmPwd'))
+    toast.error(t('auth.invalidConfirmPwd'))
     ;(form.confirm as HTMLInputElement).focus()
     return
   }

resources/assets/tests/components/Modal.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, fireEvent, act } from '@testing-library/react'
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 import $ from 'jquery'
 import Modal from '@/components/Modal'
 
@@ -31,7 +31,7 @@ test('jQuery events', () => {
     $('.modal').trigger('hidden.bs.modal')
   })
 
-  fireEvent.click(getByText(trans('general.cancel')))
+  fireEvent.click(getByText(t('general.cancel')))
   act(() => {
     jest.runAllTimers()
     $('.modal').trigger('hidden.bs.modal')
@@ -107,7 +107,7 @@ describe('modal footer', () => {
   it('custom footer content', () => {
     const { queryByText } = render(<Modal footer={<div>footer</div>} show />)
     expect(queryByText('footer')).toBeInTheDocument()
-    expect(queryByText(trans('general.confirm'))).not.toBeInTheDocument()
+    expect(queryByText(t('general.confirm'))).not.toBeInTheDocument()
   })
 
   it('flex footer', () => {
@@ -136,22 +136,22 @@ describe('"alert" mode', () => {
     const { getByText, queryByText } = render(
       <Modal mode="alert" onConfirm={resolve} show />,
     )
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(resolve).toBeCalledWith({ value: '' })
-    expect(queryByText(trans('general.cancel'))).toBeNull()
+    expect(queryByText(t('general.cancel'))).toBeNull()
   })
 
   it('confirm callback is optional', () => {
     const { getByText } = render(<Modal mode="alert" show />)
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
   })
 })
 
 describe('"confirm" mode', () => {
   it('default mode is "confirm"', () => {
     const { queryByText } = render(<Modal show />)
-    expect(queryByText(trans('general.confirm'))).toBeInTheDocument()
-    expect(queryByText(trans('general.cancel'))).toBeInTheDocument()
+    expect(queryByText(t('general.confirm'))).toBeInTheDocument()
+    expect(queryByText(t('general.cancel'))).toBeInTheDocument()
   })
 
   it('"confirm" button', () => {
@@ -160,7 +160,7 @@ describe('"confirm" mode', () => {
     const { getByText } = render(
       <Modal mode="prompt" onConfirm={resolve} onDismiss={reject} show />,
     )
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(resolve).toBeCalledWith({ value: '' })
     expect(reject).not.toBeCalled()
   })
@@ -171,7 +171,7 @@ describe('"confirm" mode', () => {
     const { getByText } = render(
       <Modal mode="prompt" onConfirm={resolve} onDismiss={reject} show />,
     )
-    fireEvent.click(getByText(trans('general.cancel')))
+    fireEvent.click(getByText(t('general.cancel')))
     expect(resolve).not.toBeCalled()
     expect(reject).toBeCalled()
   })
@@ -193,7 +193,7 @@ describe('"prompt" mode', () => {
     fireEvent.change(getByPlaceholderText('hint'), {
       target: { value: 'my' },
     })
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(resolve).toBeCalledWith({ value: 'my' })
     expect(reject).not.toBeCalled()
   })
@@ -204,7 +204,7 @@ describe('"prompt" mode', () => {
     const { getByText } = render(
       <Modal mode="prompt" onConfirm={resolve} onDismiss={reject} show />,
     )
-    fireEvent.click(getByText(trans('general.cancel')))
+    fireEvent.click(getByText(t('general.cancel')))
     expect(resolve).not.toBeCalled()
     expect(reject).toBeCalled()
   })
@@ -225,7 +225,7 @@ describe('"prompt" mode', () => {
       />,
     )
     fireEvent.click(getByLabelText('B'))
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(resolve).toBeCalledWith({ value: 'b' })
   })
 
@@ -243,7 +243,7 @@ describe('"prompt" mode', () => {
         show
       />,
     )
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(resolve).toBeCalledWith({ value: 'val' })
     expect(reject).not.toBeCalled()
   })
@@ -265,7 +265,7 @@ describe('"prompt" mode', () => {
     )
     expect(queryByText(message)).not.toBeInTheDocument()
 
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(queryByText(message)).toBeInTheDocument()
     expect(resolve).not.toBeCalled()
     expect(reject).not.toBeCalled()
@@ -276,14 +276,14 @@ describe('"onClose" event', () => {
   it('button confirm', () => {
     const mock = jest.fn()
     const { getByText } = render(<Modal show mode="confirm" onClose={mock} />)
-    fireEvent.click(getByText(trans('general.confirm')))
+    fireEvent.click(getByText(t('general.confirm')))
     expect(mock).toBeCalled()
   })
 
   it('button cancel', () => {
     const mock = jest.fn()
     const { getByText } = render(<Modal show mode="confirm" onClose={mock} />)
-    fireEvent.click(getByText(trans('general.cancel')))
+    fireEvent.click(getByText(t('general.cancel')))
     expect(mock).toBeCalled()
   })
 })

resources/assets/tests/scripts/i18n.test.ts

@@ -1,13 +1,13 @@
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 
 test('mount to global', () => {
-  expect(window.trans).toBe(trans)
+  expect(window.trans).toBe(t)
 })
 
 test('translate text', () => {
   window.blessing.i18n = { a: { b: { c: 'text', d: 'Hi, :name!' } } }
-  expect(trans('a.b.c')).toBe('text')
-  expect(trans('a.b.d')).toBe('Hi, :name!')
-  expect(trans('a.b.d', { name: 'me' })).toBe('Hi, me!')
-  expect(trans('d.e')).toBe('d.e')
+  expect(t('a.b.c')).toBe('text')
+  expect(t('a.b.d')).toBe('Hi, :name!')
+  expect(t('a.b.d', { name: 'me' })).toBe('Hi, me!')
+  expect(t('d.e')).toBe('d.e')
 })

resources/assets/tests/scripts/modal.test.ts

@@ -1,10 +1,10 @@
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 import { showModal } from '@/scripts/modal'
 
 test('show modal', async () => {
   process.nextTick(() => {
     expect(document.querySelector('.modal-title')!.textContent).toBe(
-      trans('general.tip'),
+      t('general.tip'),
     )
     document.querySelector<HTMLButtonElement>('.btn-primary')!.click()
   })

resources/assets/tests/scripts/net.test.ts

@@ -1,6 +1,6 @@
 import * as net from '@/scripts/net'
 import { on } from '@/scripts/event'
-import { trans, t } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 import { showModal } from '@/scripts/notify'
 
 jest.mock('@/scripts/notify')
@@ -150,7 +150,7 @@ test('low level fetch', async () => {
   await net.walkFetch(request as Request)
   expect(showModal).toBeCalledWith({
     mode: 'alert',
-    title: trans('general.fatalError'),
+    title: t('general.fatalError'),
     dangerousHTML: 'network',
     type: 'danger',
     okButtonType: 'outline-light',
@@ -160,7 +160,7 @@ test('low level fetch', async () => {
   await net.walkFetch(request as Request)
   expect(showModal).toBeCalledWith({
     mode: 'alert',
-    title: trans('general.fatalError'),
+    title: t('general.fatalError'),
     dangerousHTML: '404',
     type: 'danger',
     okButtonType: 'outline-light',
@@ -171,7 +171,7 @@ test('low level fetch', async () => {
   await net.walkFetch(request as Request)
   expect(showModal).toBeCalledWith({
     mode: 'alert',
-    title: trans('general.fatalError'),
+    title: t('general.fatalError'),
     dangerousHTML: 'error',
     type: 'danger',
     okButtonType: 'outline-light',
@@ -254,7 +254,7 @@ test('process backend errors', async () => {
   await net.walkFetch({ headers: new Headers() } as Request)
   expect(showModal).toBeCalledWith({
     mode: 'alert',
-    title: trans('general.fatalError'),
+    title: t('general.fatalError'),
     dangerousHTML: 'fake exception<br><details>[1] k.php#L2<br>[2] v.php#L3</details>',
     type: 'danger',
     okButtonType: 'outline-light',

resources/assets/tests/views/user/Dashboard.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, fireEvent, waitFor } from '@testing-library/react'
 import * as fetch from '@/scripts/net'
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 import Dashboard from '@/views/user/Dashboard'
 
 jest.mock('@/scripts/net')
@@ -112,7 +112,7 @@ describe('sign button', () => {
     const button = getByRole('button')
 
     expect(button).toBeEnabled()
-    expect(button).toHaveTextContent(trans('user.sign'))
+    expect(button).toHaveTextContent(t('user.sign'))
   })
 
   it('sign is allowed if last sign is yesterday', async () => {

resources/assets/tests/views/user/profile/password.test.ts

@@ -1,5 +1,5 @@
 import { flushPromises } from '../../../utils'
-import { trans } from '@/scripts/i18n'
+import { t } from '@/scripts/i18n'
 import { showModal, toast } from '@/scripts/notify'
 import { post } from '@/scripts/net'
 import handler from '@/views/user/profile/password'
@@ -37,7 +37,7 @@ test('change password', async () => {
   form.dispatchEvent(event)
   await flushPromises()
   expect(post).not.toBeCalled()
-  expect(toast.error).toBeCalledWith(trans('auth.invalidConfirmPwd'))
+  expect(toast.error).toBeCalledWith(t('auth.invalidConfirmPwd'))
 
   confirm.value = '1'
   form.dispatchEvent(event)