tweak webpack build

resources/assets/src/components/Toast.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import styles from './Toast.scss'
+import styles from './Toast.module.scss'
 
 export type ToastType = 'success' | 'info' | 'warning' | 'error'
 

resources/assets/src/components/Viewer.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import * as skinview3d from 'skinview3d'
-import { t } from '../scripts/i18n'
-import styles from './Viewer.scss'
+import { t } from '@/scripts/i18n'
+import styles from './Viewer.module.scss'
 import SkinSteve from '../../../misc/textures/steve.png'
 
 export const PICTURES_COUNT = 7

resources/assets/src/scripts/cli.tsx

@@ -5,7 +5,7 @@ import { FitAddon } from 'xterm-addon-fit'
 import { Shell } from 'blessing-skin-shell'
 import 'xterm/css/xterm.css'
 import Draggable from 'react-draggable'
-import styles from '@/styles/terminal.scss'
+import styles from '@/styles/terminal.module.scss'
 
 let launched = false
 

resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { t } from '@/scripts/i18n'
 import { Plugin } from './types'
-import styles from './InfoBox.scss'
+import styles from './InfoBox.module.scss'
 
 interface Props {
   plugin: Plugin

resources/assets/src/views/user/Dashboard/SignButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { trans } from '../../../scripts/i18n'
+import { t } from '@/scripts/i18n'
 import * as scoreUtils from './scoreUtils'
 
 interface Props {
@@ -28,7 +28,7 @@ const SignButton: React.FC<Props> = props => {
       onClick={props.onClick}
     >
       <i className="far fa-calendar-check" aria-hidden="true" /> &nbsp;
-      {canSign ? trans('user.sign') : remainingTimeText}
+      {canSign ? t('user.sign') : remainingTimeText}
     </button>
   )
 }

resources/assets/src/views/user/Dashboard/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { hot } from 'react-hot-loader/root'
-import { trans } from '../../../scripts/i18n'
-import * as fetch from '../../../scripts/net'
-import { toast } from '../../../scripts/notify'
-import useTween from '../../../scripts/hooks/useTween'
+import { t } from '@/scripts/i18n'
+import * as fetch from '@/scripts/net'
+import { toast } from '@/scripts/notify'
+import useTween from '@/scripts/hooks/useTween'
 import InfoBox from './InfoBox'
 import SignButton from './SignButton'
-import scoreStyle from './score.scss'
+import scoreStyle from './score.module.scss'
 
 type ScoreInfo = {
   signAfterZero: boolean
@@ -71,7 +71,7 @@ const Dashboard: React.FC = () => {
   return (
     <div className="card card-primary card-outline">
       <div className="card-header">
-        <h3 className="card-title">{trans('user.used.title')}</h3>
+        <h3 className="card-title">{t('user.used.title')}</h3>
       </div>
       <div className="card-body">
         <div className="row">
@@ -80,7 +80,7 @@ const Dashboard: React.FC = () => {
             <InfoBox
               color="teal"
               icon="gamepad"
-              name={trans('user.used.players')}
+              name={t('user.used.players')}
               used={players.used}
               total={players.total}
               unit=""
@@ -89,7 +89,7 @@ const Dashboard: React.FC = () => {
               <InfoBox
                 color="maroon"
                 icon="hdd"
-                name={trans('user.used.storage')}
+                name={t('user.used.storage')}
                 used={~~(storage.used / 1024)}
                 total={~~(storage.total / 1024)}
                 unit="MB"
@@ -98,7 +98,7 @@ const Dashboard: React.FC = () => {
               <InfoBox
                 color="maroon"
                 icon="hdd"
-                name={trans('user.used.storage')}
+                name={t('user.used.storage')}
                 used={storage.used}
                 total={storage.total}
                 unit="KB"
@@ -106,7 +106,7 @@ const Dashboard: React.FC = () => {
             )}
           </div>
           <div className="col-md-4 text-center">
-            <p className={scoreStyle.title}>{trans('user.cur-score')}</p>
+            <p className={scoreStyle.title}>{t('user.cur-score')}</p>
             <p
               className={scoreStyle.number}
               data-toggle="modal"
@@ -114,7 +114,7 @@ const Dashboard: React.FC = () => {
             >
               {~~score}
             </p>
-            <p className={scoreStyle.notice}>{trans('user.score-notice')}</p>
+            <p className={scoreStyle.notice}>{t('user.score-notice')}</p>
           </div>
         </div>
       </div>

resources/assets/src/views/user/Dashboard/scoreUtils.ts

@@ -1,4 +1,4 @@
-import { trans } from '../../../scripts/i18n'
+import { t } from '@/scripts/i18n'
 
 const ONE_MINUTE = 60 * 1000
 const ONE_HOUR = 60 * ONE_MINUTE
@@ -23,12 +23,12 @@ export function remainingTime(
 export function remainingTimeText(remainingTime: number): string {
   const time = remainingTime / ONE_MINUTE
   return time < 60
-    ? trans('user.sign-remain-time', {
+    ? t('user.sign-remain-time', {
         time: ~~time,
-        unit: trans('user.time-unit-min'),
+        unit: t('user.time-unit-min'),
       })
-    : trans('user.sign-remain-time', {
+    : t('user.sign-remain-time', {
         time: ~~(time / 60),
-        unit: trans('user.time-unit-hour'),
+        unit: t('user.time-unit-hour'),
       })
 }

resources/assets/src/views/user/OAuth/ModalCreate.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { t } from '../../../scripts/i18n'
-import Modal from '../../../components/Modal'
+import { t } from '@/scripts/i18n'
+import Modal from '@/components/Modal'
 
 interface Props {
   show: boolean

resources/assets/src/views/user/OAuth/Row.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { trans } from '../../../scripts/i18n'
-import ButtonEdit from '../../../components/ButtonEdit'
+import { t } from '@/scripts/i18n'
+import ButtonEdit from '@/components/ButtonEdit'
 import { App } from './types'
 
 interface Props {
@@ -19,7 +19,7 @@ const Row: React.FC<Props> = props => {
       <td>
         <span>{app.name}</span>
         <ButtonEdit
-          title={trans('user.oauth.modifyName')}
+          title={t('user.oauth.modifyName')}
           onClick={props.onEditName}
         />
       </td>
@@ -27,13 +27,13 @@ const Row: React.FC<Props> = props => {
       <td>
         <span>{app.redirect}</span>
         <ButtonEdit
-          title={trans('user.oauth.modifyUrl')}
+          title={t('user.oauth.modifyUrl')}
           onClick={props.onEditRedirect}
         />
       </td>
       <td>
         <button className="btn btn-danger" onClick={props.onDelete}>
-          {trans('report.delete')}
+          {t('report.delete')}
         </button>
       </td>
     </tr>

resources/assets/src/views/user/Players/Row.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { t } from '@/scripts/i18n'
 import ButtonEdit from '@/components/ButtonEdit'
 import { Player } from '@/scripts/types'
-import styles from './Row.scss'
+import styles from './Row.module.scss'
 
 interface Props {
   player: Player

resources/assets/src/views/user/Players/Viewer2d.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { t } from '@/scripts/i18n'
-import styles from './Viewer2d.scss'
+import styles from './Viewer2d.module.scss'
 
 interface Props {
   skin: string

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

@@ -1,5 +1,5 @@
-import { post, ResponseBody } from '../../../scripts/net'
-import { showModal } from '../../../scripts/notify'
+import { post, ResponseBody } from '@/scripts/net'
+import { showModal } from '@/scripts/notify'
 
 export default async function handler(event: Event) {
   event.preventDefault()

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

@@ -1,5 +1,5 @@
-import { post, ResponseBody } from '../../../scripts/net'
-import { showModal } from '../../../scripts/notify'
+import { post, ResponseBody } from '@/scripts/net'
+import { showModal } from '@/scripts/notify'
 
 export default async function handler(event: Event) {
   event.preventDefault()

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

@@ -1,5 +1,5 @@
-import { post, ResponseBody } from '../../../scripts/net'
-import { showModal } from '../../../scripts/notify'
+import { post, ResponseBody } from '@/scripts/net'
+import { showModal } from '@/scripts/notify'
 
 export default async function handler(event: Event) {
   event.preventDefault()

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

@@ -1,6 +1,6 @@
-import { post, ResponseBody } from '../../../scripts/net'
-import { trans } from '../../../scripts/i18n'
-import { showModal, toast } from '../../../scripts/notify'
+import { post, ResponseBody } from '@/scripts/net'
+import { trans } from '@/scripts/i18n'
+import { showModal, toast } from '@/scripts/notify'
 
 export default async function handler(event: Event) {
   event.preventDefault()

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

@@ -1,20 +1,20 @@
-import { showModal, toast } from '../../../scripts/notify'
-import { trans } from '../../../scripts/i18n'
-import { post, ResponseBody } from '../../../scripts/net'
+import { showModal, toast } from '@/scripts/notify'
+import { t } from '@/scripts/i18n'
+import { post, ResponseBody } from '@/scripts/net'
 
 export default async function resetAvatar() {
   try {
-    await showModal({ text: trans('user.resetAvatarConfirm') })
+    await showModal({ text: t('user.resetAvatarConfirm') })
   } catch {
     return
   }
 
-  const { message }: ResponseBody = await post(
-    '/user/profile/avatar',
-    { tid: 0 },
-  )
+  const { message }: ResponseBody = await post('/user/profile/avatar', {
+    tid: 0,
+  })
   toast.success(message)
-  document.querySelectorAll<HTMLImageElement>('[alt="User Image"]')
+  document
+    .querySelectorAll<HTMLImageElement>('[alt="User Image"]')
     .forEach(el => {
       el.src += `?${new Date().getTime()}`
     })

resources/assets/tests/ts-shims/net.ts

@@ -12,26 +12,10 @@ export const walkFetch = {} as jest.Mock<
 
 type FetchFn = <T = any>(url: string, data?: object) => Promise<T>
 
-export const get = {} as jest.Mock<
-  ReturnType<typeof net.get>,
-  Parameters<typeof net.get>
-> &
-  FetchFn
+export const get = {} as jest.Mock<any, Parameters<typeof net.get>> & FetchFn
 
-export const post = {} as jest.Mock<
-  ReturnType<typeof net.post>,
-  Parameters<typeof net.post>
-> &
-  FetchFn
+export const post = {} as jest.Mock<any, Parameters<typeof net.post>> & FetchFn
 
-export const put = {} as jest.Mock<
-  ReturnType<typeof net.post>,
-  Parameters<typeof net.post>
-> &
-  FetchFn
+export const put = {} as jest.Mock<any, Parameters<typeof net.put>> & FetchFn
 
-export const del = {} as jest.Mock<
-  ReturnType<typeof net.post>,
-  Parameters<typeof net.post>
-> &
-  FetchFn
+export const del = {} as jest.Mock<any, Parameters<typeof net.del>> & FetchFn

webpack.config.js

@@ -60,7 +60,7 @@ const config = {
         ],
       },
       {
-        test: /\.scss$/,
+        test: /\.module\.scss$/,
         use: [
           'style-loader',
           {