refactor: use import.meta.webpackHot instead of module.hot

packages/maskbook/src/extension/background-script/EthereumServices/chainState.ts

@@ -19,7 +19,7 @@ import { Flags } from '../../../utils/flags'
 import { getWalletCached, getWalletsCached } from './wallet'
 import { resetAllNonce } from './nonce'
 
-const effect = startEffects(module.hot)
+const effect = startEffects(import.meta.webpackHot)
 
 //#region tracking chain state
 export const updateBlockNumber = debounce(

packages/maskbook/src/extension/background-script/EthereumServices/wallet.ts

@@ -5,7 +5,7 @@ import { getWallets } from '../../../plugins/Wallet/services'
 import { currentSelectedWalletAddressSettings } from '../../../plugins/Wallet/settings'
 import { startEffects } from '../../../utils/side-effects'
 
-const effect = startEffects(module.hot)
+const effect = startEffects(import.meta.webpackHot)
 
 //#region tracking wallets
 let wallets: WalletRecord[] = []

packages/maskbook/src/extension/background-script/Jobs/index_hmr.ts

@@ -13,10 +13,10 @@ const CancelableJobs: CancelableJob[] = [
     PluginWorker,
 ]
 
-if (module.hot) {
+if (import.meta.webpackHot) {
     const cleanup = CancelableJobs.map(startJob)
-    module.hot.dispose(() => cleanup.forEach((x) => x()))
-    module.hot.accept()
+    import.meta.webpackHot.dispose(() => cleanup.forEach((x) => x()))
+    import.meta.webpackHot.accept()
 } else {
     CancelableJobs.forEach(startJob)
 }

packages/maskbook/src/extension/content-script/hmr.ts

@@ -1,5 +1,5 @@
 // If the content script runs in https, webpack will connect https://localhost:HMR_PORT
-if (module.hot) {
+if (import.meta.webpackHot) {
     globalThis.WebSocket = new Proxy(WebSocket, {
         construct(target, args, newTarget) {
             args[0] = removeWss(args[0])

packages/maskbook/src/extension/service.ts

@@ -38,8 +38,8 @@ export const Services = {
 export default Services
 export const ServicesWithProgress = add(() => import('./service-generator'), 'ServicesWithProgress', true)
 
-if (module.hot && isEnvironment(Environment.ManifestBackground)) {
-    module.hot.accept(
+if (import.meta.webpackHot && isEnvironment(Environment.ManifestBackground)) {
+    import.meta.webpackHot.accept(
         [
             './background-script/CryptoService',
             './background-script/IdentityService',
@@ -70,7 +70,7 @@ function add<T>(impl: () => Promise<T>, key: string, generator = false): T {
     const RPC: (impl: any, opts: AsyncCallOptions) => T = (generator ? AsyncGeneratorCall : AsyncCall) as any
     const load = () => getLocalImplementation(`Services.${key}`, impl, channel)
     const localImplementation = load()
-    isBackground && module.hot && document.addEventListener(SERVICE_HMR_EVENT, load)
+    isBackground && import.meta.webpackHot && document.addEventListener(SERVICE_HMR_EVENT, load)
     const service = RPC(localImplementation, {
         key,
         serializer,

packages/maskbook/src/plugin-infra/host.ts

@@ -14,7 +14,7 @@ import {
 } from '../plugins/Wallet/settings'
 import { startEffects } from '../utils/side-effects'
 
-const effect = startEffects(module.hot)
+const effect = startEffects(import.meta.webpackHot)
 export function createPluginHost(signal?: AbortSignal): Plugin.__Host.Host {
     return {
         eth: ethStatusReporter,

packages/maskbook/src/plugins/Airdrop/messages.ts

@@ -2,6 +2,6 @@ import { createPluginMessage } from '../utils/createPluginMessage'
 import { createPluginRPC } from '../utils/createPluginRPC'
 import { AirdropPluginID } from './constants'
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const AirdropMessage = createPluginMessage<{ _: unknown }>(AirdropPluginID)
 export const PluginAirdropRPC = createPluginRPC(AirdropPluginID, () => import('./services'), AirdropMessage.events._)

packages/maskbook/src/plugins/Collectible/messages.ts

@@ -5,7 +5,7 @@ interface CollectibleMessage {
     rpc: unknown
 }
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const PluginCollectibleMessage = createPluginMessage<CollectibleMessage>(PLUGIN_IDENTIFIER)
 export const PluginCollectibleRPC = createPluginRPC(
     PLUGIN_IDENTIFIER,

packages/maskbook/src/plugins/FileService/utils/index.ts

@@ -2,7 +2,7 @@ import { createPluginMessage } from '../../utils/createPluginMessage'
 import { createPluginRPC, createPluginRPCGenerator } from '../../utils/createPluginRPC'
 import { pluginId } from '../constants'
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 const PluginFileServiceMessage = createPluginMessage<{ _: unknown; _2: unknown }>(pluginId)
 export const PluginFileServiceRPC = createPluginRPC(
     pluginId,

packages/maskbook/src/plugins/ITO/messages.ts

@@ -21,6 +21,6 @@ interface ITO_Message {
     rpc: unknown
 }
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const PluginITO_Messages: WebExtensionMessage<ITO_Message> = createPluginMessage<ITO_Message>(ITO_PluginID)
 export const PluginITO_RPC = createPluginRPC(ITO_PluginID, () => import('./services'), PluginITO_Messages.events.rpc)

packages/maskbook/src/plugins/PluginSerivce.ts

@@ -4,7 +4,7 @@
  * createPluginMessage and createPluginRPC supports HMR out of the box.
  * So if you only use these two things, please add the following code to enable HMR.
  *
- * if (module.hot) module.hot.accept()
+ * if (import.meta.webpackHot) import.meta.webpackHot.accept()
  */
 
 // Please make sure you have registered your plugin UI at ./PluginUI

packages/maskbook/src/plugins/Polls/utils.ts

@@ -10,7 +10,7 @@ import { WorkerChannel } from 'async-call-rpc/utils/web/worker'
 
 export const PollMetadataReader = createTypedMessageMetadataReader<PollMetaData>(POLL_META_KEY_1, schema)
 export const renderWithPollMetadata = createRenderWithMetadata(PollMetadataReader)
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 const PollMessage = createPluginMessage<{ _: unknown }>(identifier)
 export const PluginPollRPC = createPluginRPC(
     identifier,

packages/maskbook/src/plugins/RedPacket/messages.ts

@@ -6,6 +6,6 @@ export interface RedPacketMessages {
     redPacketUpdated: void
     rpc: unknown
 }
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const RedPacketMessage = createPluginMessage<RedPacketMessages>(RedPacketPluginID)
 export const RedPacketRPC = createPluginRPC(RedPacketPluginID, () => import('./services'), RedPacketMessage.events.rpc)

packages/maskbook/src/plugins/Trader/messages.ts

@@ -48,7 +48,7 @@ interface PluginTraderMessage {
     rpc: unknown
 }
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const PluginTraderMessages = createPluginMessage<PluginTraderMessage>(PLUGIN_IDENTIFIER)
 export const PluginTraderRPC = createPluginRPC(
     PLUGIN_IDENTIFIER,

packages/maskbook/src/plugins/Transak/messages.ts

@@ -15,5 +15,5 @@ interface PluginTransakMessage {
     buyTokenDialogUpdated: BuyTokenDialogEvent
 }
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const PluginTransakMessages = createPluginMessage<PluginTransakMessage>(PLUGIN_IDENTIFIER)

packages/maskbook/src/plugins/Wallet/messages.ts

@@ -93,6 +93,6 @@ interface WalletMessage {
     rpc: unknown
 }
 
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 export const WalletMessages = createPluginMessage<WalletMessage>(PLUGIN_IDENTIFIER)
 export const WalletRPC = createPluginRPC(PLUGIN_IDENTIFIER, () => import('./services'), WalletMessages.events.rpc)

packages/maskbook/src/polyfill/index.ts

@@ -1,4 +1,4 @@
 /// <reference path="./global.d.ts" />
 import './ecmascript/index'
 import './web-apis/index'
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()

packages/maskbook/src/social-network-adaptor/facebook.com/index.ts

@@ -5,8 +5,8 @@ defineSocialNetworkUI({
     ...facebookBase,
     load: () => import('./ui-provider'),
     hotModuleReload(callback) {
-        if (module.hot) {
-            module.hot.accept('./ui-provider.ts', async () => {
+        if (import.meta.webpackHot) {
+            import.meta.webpackHot.accept('./ui-provider.ts', async () => {
                 callback((await import('./ui-provider')).default)
             })
         }
@@ -17,8 +17,8 @@ defineSocialNetworkWorker({
     ...facebookWorkerBase,
     load: () => import('./worker-provider'),
     hotModuleReload(callback) {
-        if (module.hot) {
-            module.hot.accept('./worker-provider.ts', async () => {
+        if (import.meta.webpackHot) {
+            import.meta.webpackHot.accept('./worker-provider.ts', async () => {
                 callback((await import('./worker-provider')).default)
             })
         }

packages/maskbook/src/social-network-adaptor/instagram.com/index.ts

@@ -5,8 +5,8 @@ defineSocialNetworkUI({
     ...instagramBase,
     load: () => import('./ui-provider'),
     hotModuleReload(callback) {
-        if (module.hot) {
-            module.hot.accept('./ui-provider.ts', async () => {
+        if (import.meta.webpackHot) {
+            import.meta.webpackHot.accept('./ui-provider.ts', async () => {
                 callback((await import('./ui-provider')).default)
             })
         }
@@ -17,8 +17,8 @@ defineSocialNetworkWorker({
     ...instagramWorkerBase,
     load: () => import('./worker-provider'),
     hotModuleReload(callback) {
-        if (module.hot) {
-            module.hot.accept('./worker-provider.ts', async () => {
+        if (import.meta.webpackHot) {
+            import.meta.webpackHot.accept('./worker-provider.ts', async () => {
                 callback((await import('./worker-provider')).default)
             })
         }

packages/maskbook/src/social-network-adaptor/twitter.com/index.ts

@@ -5,8 +5,8 @@ defineSocialNetworkUI({
     ...twitterBase,
     load: () => import('./ui-provider'),
     hotModuleReload(callback) {
-        if (module.hot) {
-            module.hot.accept('./ui-provider.ts', async () => {
+        if (import.meta.webpackHot) {
+            import.meta.webpackHot.accept('./ui-provider.ts', async () => {
                 callback((await import('./ui-provider')).default)
             })
         }
@@ -17,8 +17,8 @@ defineSocialNetworkWorker({
     ...twitterWorkerBase,
     load: () => import('./worker-provider'),
     hotModuleReload(callback) {
-        if (module.hot) {
-            module.hot.accept('./worker-provider.ts', async () => {
+        if (import.meta.webpackHot) {
+            import.meta.webpackHot.accept('./worker-provider.ts', async () => {
                 callback((await import('./worker-provider')).default)
             })
         }

packages/maskbook/src/social-network/ui.ts

@@ -48,7 +48,7 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI.
 
     const abort = new AbortController()
     const { signal } = abort
-    if (module.hot) {
+    if (import.meta.webpackHot) {
         console.log('SNS adaptor HMR enabled.')
         ui_deferred.hotModuleReload?.(async (newDefinition) => {
             console.log('SNS adaptor updated. Uninstalling current adaptor.')
@@ -157,7 +157,7 @@ export async function loadSocialNetworkUI(identifier: string): Promise<SocialNet
     if (!define) throw new Error('SNS adaptor not found')
     const ui = (await define.load()).default
     definedSocialNetworkUIsResolved.set(identifier, ui)
-    if (module.hot) {
+    if (import.meta.webpackHot) {
         define.hotModuleReload?.((ui) => definedSocialNetworkUIsResolved.set(identifier, ui))
     }
     return ui

packages/maskbook/src/utils/debug/general.ts

@@ -3,7 +3,7 @@ import * as shared from '@dimensiondev/maskbook-shared'
 import * as kit from '@dimensiondev/holoflows-kit'
 
 // Run this file multiple times should be safe
-if (module.hot) module.hot.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
 
 //#region BigNumber to Number
 Object.defineProperty(BigNumber.prototype, '__debug__amount__', {

packages/maskbook/src/utils/i18n-next.ts

@@ -30,8 +30,8 @@ addMaskThemeI18N(i18nNextInstance)
 addDashboardI18N(i18nNextInstance)
 i18nNextInstance.languages = ['en', 'zh', 'ko', 'ja']
 
-if (module.hot) {
-    module.hot.accept(
+if (import.meta.webpackHot) {
+    import.meta.webpackHot.accept(
         [
             '../_locales/en/messages.json',
             '../_locales/zh/messages.json',

packages/maskbook/src/utils/native-rpc/index.ts

@@ -5,7 +5,7 @@ import { WebviewAPI } from './Web'
 import type { AndroidNativeAPIs, iOSNativeAPIs } from './types'
 
 // This module won't be used in Web. Let it not effecting HMR.
-if (process.env.architecture === 'web' && module.hot) module.hot.accept()
+if (process.env.architecture === 'web' && import.meta.webpackHot) import.meta.webpackHot.accept()
 export const hasNativeAPI = process.env.architecture === 'app'
 export let nativeAPI:
     | { type: 'iOS'; api: _AsyncVersionOf<iOSNativeAPIs> }

packages/plugin-infra/src/manager/manage.ts

@@ -101,7 +101,7 @@ export function createManager<T extends Plugin.Shared.DefinitionWithInit>(_: Cre
         const definition = (await loader.load()).default
         resolved.set(id, definition)
 
-        if (module.hot) {
+        if (import.meta.webpackHot) {
             loader.hotModuleReload(async (_) => {
                 resolved.set(id, (await _).default)
 

packages/plugin-infra/src/types.ts

@@ -12,7 +12,7 @@ export namespace Plugin {
      * ```ts
      * const loader = {
      *     load: () => import('./code'),
-     *     hotModuleReload: hot => module.hot && module.hot.accept('./code', () => hot(import('./code')))
+     *     hotModuleReload: hot => import.meta.webpackHot && import.meta.webpackHot.accept('./code', () => hot(import('./code')))
      * }
      * ```
      *
@@ -31,7 +31,7 @@ export namespace Plugin {
         /**
          * This provides the functionality for hot module reload on the plugin.
          * When the callback is called, the old instance of the plugin will be unloaded, then the new instance will be init.
-         * @example hotModuleReload: hot => module.hot && module.hot.accept('./path', () => hot(import('./path')))
+         * @example hotModuleReload: hot => import.meta.webpackHot && import.meta.webpackHot.accept('./path', () => hot(import('./path')))
          */
         hotModuleReload(onHot: (hot: Promise<{ default: DeferredModule }>) => void): void
     }

packages/plugins/example/src/index.ts

@@ -6,15 +6,18 @@ registerPlugin({
     SNSAdaptor: {
         load: () => import('./SNSAdaptor'),
         hotModuleReload: (hot) =>
-            module.hot && module.hot.accept('./SNSAdaptor/index', () => hot(import('./SNSAdaptor'))),
+            import.meta.webpackHot &&
+            import.meta.webpackHot.accept('./SNSAdaptor/index', () => hot(import('./SNSAdaptor'))),
     },
     Dashboard: {
         load: () => import('./Dashboard'),
         hotModuleReload: (hot) =>
-            module.hot && module.hot.accept('./Dashboard/index', () => hot(import('./Dashboard'))),
+            import.meta.webpackHot &&
+            import.meta.webpackHot.accept('./Dashboard/index', () => hot(import('./Dashboard'))),
     },
     Worker: {
         load: () => import('./Worker'),
-        hotModuleReload: (hot) => module.hot && module.hot.accept('./Worker/index', () => hot(import('./Worker'))),
+        hotModuleReload: (hot) =>
+            import.meta.webpackHot && import.meta.webpackHot.accept('./Worker/index', () => hot(import('./Worker'))),
     },
 })