feat: use swc to replace ts-loader

packages/maskbook/package.json

@@ -122,6 +122,7 @@
     "@dimensiondev/webextension-shim": "0.0.3-20210708053012-57a254d",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
     "@sinonjs/text-encoding": "^0.7.1",
+    "@swc/core": "^1.2.62",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/elliptic": "^6.4.12",
     "@types/enzyme": "^3.10.9",
@@ -159,8 +160,8 @@
     "react-test-renderer": "^17.0.1",
     "rimraf": "^3.0.2",
     "source-map-loader": "^3.0.0",
+    "swc-loader": "^0.1.14",
     "ts-jest": "27.0.4",
-    "ts-loader": "^9.2.3",
     "type-coverage": "^2.18.0",
     "webpack": "^5.46.0",
     "webpack-cli": "^4.7.2",

packages/maskbook/src/plugins/Trader/trending/useAvailableCoins.ts

@@ -1,8 +1,9 @@
 import { useAsync } from 'react-use'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
 import { PluginTraderRPC } from '../messages'
-import type { DataProvider, TagType } from '../types'
+import type { Coin, DataProvider, TagType } from '../types'
 
-export function useAvailableCoins(type: TagType, keyword: string, dataProvider: DataProvider) {
+export function useAvailableCoins(type: TagType, keyword: string, dataProvider: DataProvider): AsyncState<Coin[]> {
     return useAsync(async () => {
         if (!keyword) return []
         return PluginTraderRPC.getAvailableCoins(keyword, type, dataProvider)

packages/maskbook/src/plugins/Trader/trending/useAvailableDataProviders.ts

@@ -1,9 +1,10 @@
 import { useAsync } from 'react-use'
 import { useChainId } from '@masknet/web3-shared'
 import { PluginTraderRPC } from '../messages'
-import type { TagType } from '../types'
+import type { DataProvider, TagType } from '../types'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
 
-export function useAvailableDataProviders(type?: TagType, keyword?: string) {
+export function useAvailableDataProviders(type?: TagType, keyword?: string): AsyncState<DataProvider[]> {
     const chainId = useChainId()
     return useAsync(async () => {
         return PluginTraderRPC.getAvailableDataProviders(type, keyword)

packages/maskbook/src/plugins/Trader/trending/useAvailableTraderProviders.ts

@@ -1,9 +1,10 @@
 import { useAsync } from 'react-use'
 import { useChainId } from '@masknet/web3-shared'
 import { PluginTraderRPC } from '../messages'
-import type { TagType } from '../types'
+import type { TagType, TradeProvider } from '../types'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
 
-export function useAvailableTraderProviders(type?: TagType, keyword?: string) {
+export function useAvailableTraderProviders(type?: TagType, keyword?: string): AsyncState<TradeProvider[]> {
     const chainId = useChainId()
     return useAsync(async () => {
         return PluginTraderRPC.getAvailableTraderProviders(type, keyword)

packages/maskbook/src/utils/hooks/useQRCodeImageScan.tsx

@@ -1,8 +1,9 @@
 import { loadImage } from '@dimensiondev/kit'
 import { useRef, useState, useEffect } from 'react'
 import { useAsync } from 'react-use'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
 
-export function useQRCodeImageScan(image: React.MutableRefObject<HTMLImageElement | null>) {
+export function useQRCodeImageScan(image: React.MutableRefObject<HTMLImageElement | null>): AsyncState<string> {
     const scanner = useRef(new BarcodeDetector({ formats: ['qr_code'] }))
     const [source, setSource] = useState('')
 

packages/maskbook/src/utils/hooks/useQueryNavigatorPermission.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { hasIn } from 'lodash-es'
 import { Flags } from '../flags'
 
-const q = <const>['query', 'request', 'revoke']
+const q = ['query', 'request', 'revoke'] as const
 
 export function checkPermissionApiUsability(type?: typeof q[number]) {
     const r: Partial<{ [T in typeof q[number]]: boolean }> = {}

packages/maskbook/src/utils/theme-global.d.ts

@@ -0,0 +1,6 @@
+declare module '@material-ui/core/styles/createPalette.d' {
+    export interface TypeText {
+        hint: string
+    }
+}
+export {}

packages/maskbook/src/utils/theme.ts

@@ -12,6 +12,7 @@ import { useMemo, useRef } from 'react'
 import { or } from '../components/custom-ui-helper'
 import { appearanceSettings, languageSettings } from '../settings/settings'
 import { activatedSocialNetworkUI } from '../social-network'
+import './theme-global.d'
 
 function getFontFamily(monospace?: boolean) {
     // We want to look native.
@@ -178,9 +179,3 @@ export const useErrorStyles = makeStyles((theme) => {
 export function extendsTheme(extend: (theme: Theme) => ThemeOptions) {
     return (theme: Theme) => merge(cloneDeep(theme), extend(theme))
 }
-
-declare module '@material-ui/core/styles/createPalette.d' {
-    export interface TypeText {
-        hint: string
-    }
-}

packages/maskbook/webpack.config.ts

@@ -13,7 +13,6 @@ import type { Configuration as DevServerConfiguration } from 'webpack-dev-server
 
 //#region Development plugins
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
-import ReactRefreshTypeScriptTransformer from 'react-refresh-typescript'
 import NotifierPlugin from 'webpack-notifier'
 //#endregion
 //#region Other plugins
@@ -132,18 +131,30 @@ function config(opts: {
                     parser: { worker: ['OnDemandWorker', '...'] },
                     // Compile all ts files in the workspace
                     include: src('../'),
-                    loader: require.resolve('ts-loader'),
+                    loader: require.resolve('swc-loader'),
                     options: {
-                        transpileOnly: true,
-                        compilerOptions: {
-                            importsNotUsedAsValues: 'remove',
-                            jsx: mode === 'production' ? 'react-jsx' : 'react-jsxdev',
+                        jsc: {
+                            parser: {
+                                syntax: 'typescript',
+                                dynamicImport: true,
+                                tsx: true,
+                                importAssertions: true,
+                            },
+                            target: 'es2019',
+                            externalHelpers: true,
+                            transform: {
+                                react: {
+                                    runtime: 'automatic',
+                                    useBuiltins: true,
+                                    development: disableReactHMR ? false : mode === 'development',
+                                    refresh: {
+                                        refreshReg: '$RefreshReg$',
+                                        refreshSig: '$RefreshSig$',
+                                        emitFullSignatures: true,
+                                    },
+                                },
+                            },
                         },
-                        getCustomTransformers: () => ({
-                            before: [!disableHMR && !disableReactHMR && ReactRefreshTypeScriptTransformer()].filter(
-                                Boolean,
-                            ),
-                        }),
                     },
                 },
             ],

packages/shared-base/src/Identifier/IdentifierMap.ts

@@ -8,7 +8,6 @@ import { immerable } from 'immer'
  * Because Identifier is not a value-type record so to make it behave like a value-type,
  * please use this class instead of Map<Identifier, T>.
  */
-@serialize('IdentifierMap')
 export class IdentifierMap<IdentifierType extends Identifier, T> implements Map<IdentifierType, T> {
     [immerable] = true
     /**
@@ -101,6 +100,7 @@ export class IdentifierMap<IdentifierType extends Identifier, T> implements Map<
         return this.entries()
     }
 }
+serialize('IdentifierMap')(IdentifierMap)
 IdentifierMap.prototype[Symbol.toStringTag] = 'IdentifierMap'
 
 export type ReadonlyIdentifierMap<IdentifierType extends Identifier, T> = ReadonlyMap<IdentifierType, T> & {

packages/shared-base/src/Identifier/type.ts

@@ -78,7 +78,6 @@ export abstract class Identifier {
         return ax.join(',')
     }
 }
-@serialize('ProfileIdentifier')
 export class ProfileIdentifier extends Identifier {
     static getUserName(x: string | ProfileIdentifier): string | null {
         if (typeof x === 'string') {
@@ -114,7 +113,7 @@ export class ProfileIdentifier extends Identifier {
         return new ProfileIdentifier(network, userId)
     }
 }
-@serialize('GroupIdentifier')
+serialize('ProfileIdentifier')(ProfileIdentifier)
 export class GroupIdentifier extends Identifier {
     static getFriendsGroupIdentifier(who: ProfileIdentifier, groupId: string) {
         return new GroupIdentifier(who.network, who.userId, groupId)
@@ -148,7 +147,7 @@ export class GroupIdentifier extends Identifier {
         return new GroupIdentifier(network, belongs, groupID)
     }
 }
-@serialize('PostIdentifier')
+serialize('GroupIdentifier')(GroupIdentifier)
 export class PostIdentifier<T extends Identifier = Identifier> extends Identifier {
     static readonly unknown = new PostIdentifier(ProfileIdentifier.unknown, '$unknown')
     get isUnknown() {
@@ -172,7 +171,7 @@ export class PostIdentifier<T extends Identifier = Identifier> extends Identifie
         return new PostIdentifier(id.val, postId)
     }
 }
-@serialize('PostIVIdentifier')
+serialize('PostIdentifier')(PostIdentifier)
 export class PostIVIdentifier extends Identifier {
     constructor(public readonly network: string, public readonly postIV: string) {
         super()
@@ -186,12 +185,12 @@ export class PostIVIdentifier extends Identifier {
         return new PostIVIdentifier(network, iv)
     }
 }
+serialize('PostIVIdentifier')(PostIVIdentifier)
 
 /**
  * This class identify the point on an EC curve.
  * ec_key:secp256k1/CompressedPoint
  */
-@serialize('ECKeyIdentifier')
 export class ECKeyIdentifier extends Identifier {
     public readonly type = 'ec_key'
     constructor(public readonly curve: 'secp256k1', public readonly compressedPoint: string) {
@@ -209,6 +208,7 @@ export class ECKeyIdentifier extends Identifier {
         return new ECKeyIdentifier(curve, point)
     }
 }
+serialize('ECKeyIdentifier')(ECKeyIdentifier)
 export type PersonaIdentifier = ECKeyIdentifier
 // eslint-disable-next-line no-redeclare
 export const PersonaIdentifier = [ECKeyIdentifier]

packages/shared-base/src/TypedMessage/utils/index.ts

@@ -10,8 +10,8 @@ import { eq } from 'lodash-es'
 import { Err, Ok, Result } from 'ts-results'
 
 export function isSerializableTypedMessage(x: TypedMessage): x is SerializableTypedMessages {
-    if ((<SerializableTypedMessage<number>>x).serializable) return true
-    const y = <NonSerializableWithToJSONTypedMessage>x
+    if ((x as SerializableTypedMessage<number>).serializable) return true
+    const y = x as NonSerializableWithToJSONTypedMessage
     if (y.serializable === false && y.toJSON) return true
     return false
 }

packages/shared/tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "rootDir": "./src/",
     "outDir": "./dist/",
-    "experimentalDecorators": true,
     "tsBuildInfoFile": "./dist/.tsbuildinfo"
   },
   "include": ["./src/**/*", "./src/**/*.json", "./src/locales/*.json"],