@docusaurus/plugin-pwa 2.0.0-beta.fbdeefcac → 2.0.0-rc.1

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@docusaurus/plugin-pwa",
-  "version": "2.0.0-beta.fbdeefcac",
+  "version": "2.0.0-rc.1",
   "description": "Docusaurus Plugin to add PWA support.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
+  "types": "src/plugin-pwa.d.ts",
+  "scripts": {
+    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -13,26 +20,35 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.16",
-    "@babel/preset-env": "^7.12.16",
-    "@docusaurus/core": "2.0.0-beta.fbdeefcac",
-    "@docusaurus/theme-common": "2.0.0-beta.fbdeefcac",
-    "@docusaurus/utils-validation": "2.0.0-beta.fbdeefcac",
-    "babel-loader": "^8.2.2",
-    "clsx": "^1.1.1",
-    "core-js": "^2.6.5",
-    "terser-webpack-plugin": "^5.1.3",
-    "webpack": "^5.40.0",
-    "webpack-merge": "^5.7.3",
-    "workbox-build": "^6.1.1",
-    "workbox-precaching": "^6.1.1",
-    "workbox-window": "^6.1.1"
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@docusaurus/core": "2.0.0-rc.1",
+    "@docusaurus/theme-common": "2.0.0-rc.1",
+    "@docusaurus/theme-translations": "2.0.0-rc.1",
+    "@docusaurus/types": "2.0.0-rc.1",
+    "@docusaurus/utils": "2.0.0-rc.1",
+    "@docusaurus/utils-validation": "2.0.0-rc.1",
+    "babel-loader": "^8.2.5",
+    "clsx": "^1.2.1",
+    "core-js": "^3.23.3",
+    "terser-webpack-plugin": "^5.3.3",
+    "tslib": "^2.4.0",
+    "webpack": "^5.73.0",
+    "webpack-merge": "^5.8.0",
+    "workbox-build": "^6.5.3",
+    "workbox-precaching": "^6.5.3",
+    "workbox-window": "^6.5.3"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
+    "fs-extra": "^10.1.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
-  "gitHead": "636c490f68d16a7452499ab722deb5ed51ef49fc"
+  "engines": {
+    "node": ">=16.14"
+  },
+  "gitHead": "c8ddd02a8e68dfaf515c20465a049a83153bd205"
 }

package/src/deps.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// TODO incompatible declaration file: https://github.com/unjs/webpackbar/pull/108
+declare module 'webpackbar' {
+  import webpack from 'webpack';
+
+  export default class WebpackBarPlugin extends webpack.ProgressPlugin {
+    constructor(options: {name: string; color?: string});
+  }
+}

package/src/{index.js → index.ts}

@@ -5,14 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const LogPlugin = require('@docusaurus/core/lib/webpack/plugins/LogPlugin')
-  .default;
-const {compile} = require('@docusaurus/core/lib/webpack/utils');
-const path = require('path');
-const webpack = require('webpack');
-const {injectManifest} = require('workbox-build');
-const {PluginOptionSchema} = require('./pluginOptionSchema');
-const Terser = require('terser-webpack-plugin');
+import path from 'path';
+import webpack, {type Configuration} from 'webpack';
+import Terser from 'terser-webpack-plugin';
+import {injectManifest} from 'workbox-build';
+import {normalizeUrl} from '@docusaurus/utils';
+import {compile} from '@docusaurus/core/lib/webpack/utils';
+import LogPlugin from '@docusaurus/core/lib/webpack/plugins/LogPlugin';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import type {HtmlTags, LoadContext, Plugin} from '@docusaurus/types';
+import type {PluginOptions} from '@docusaurus/plugin-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -33,22 +35,23 @@ function getSWBabelLoader() {
           },
         ],
       ],
-      plugins: [
-        require.resolve('@babel/plugin-proposal-object-rest-spread'),
-        require.resolve('@babel/plugin-proposal-optional-chaining'),
-        require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-      ],
     },
   };
 }
 
-function plugin(context, options) {
-  const {outDir, baseUrl} = context;
+export default function pluginPWA(
+  context: LoadContext,
+  options: PluginOptions,
+): Plugin<void> {
+  const {
+    outDir,
+    baseUrl,
+    i18n: {currentLocale},
+  } = context;
   const {
     debug,
     offlineModeActivationStrategies,
     injectManifestConfig,
-    reloadPopup,
     pwaHead,
     swCustom,
     swRegister,
@@ -58,11 +61,21 @@ function plugin(context, options) {
     name: 'docusaurus-plugin-pwa',
 
     getThemePath() {
-      return path.resolve(__dirname, './theme');
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
     },
 
     getClientModules() {
-      return isProd ? [swRegister] : [];
+      return isProd && swRegister ? [swRegister] : [];
+    },
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'plugin-pwa',
+      });
     },
 
     configureWebpack(config) {
@@ -75,25 +88,40 @@ function plugin(context, options) {
           new webpack.EnvironmentPlugin({
             PWA_DEBUG: debug,
             PWA_SERVICE_WORKER_URL: path.posix.resolve(
-              `${config.output.publicPath || '/'}`,
+              `${(config.output?.publicPath as string) || '/'}`,
               'sw.js',
             ),
-            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: offlineModeActivationStrategies,
-            PWA_RELOAD_POPUP: reloadPopup,
+            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES:
+              offlineModeActivationStrategies,
           }),
         ],
       };
     },
 
     injectHtmlTags() {
-      const headTags = [];
-      if (isProd && pwaHead) {
-        pwaHead.forEach(({tagName, ...attributes}) =>
-          headTags.push({
+      const headTags: HtmlTags = [];
+      if (isProd) {
+        pwaHead.forEach(({tagName, ...attributes}) => {
+          (['href', 'content'] as const).forEach((attribute) => {
+            const attributeValue = attributes[attribute];
+
+            if (!attributeValue) {
+              return;
+            }
+
+            const attributePath =
+              !!path.extname(attributeValue) && attributeValue;
+
+            if (attributePath && !attributePath.startsWith(baseUrl)) {
+              attributes[attribute] = normalizeUrl([baseUrl, attributeValue]);
+            }
+          });
+
+          return headTags.push({
             tagName,
             attributes,
-          }),
-        );
+          });
+        });
       }
       return {headTags};
     },
@@ -105,8 +133,8 @@ function plugin(context, options) {
 
       const swSourceFileTest = /\.m?js$/;
 
-      const swWebpackConfig = {
-        entry: path.resolve(__dirname, 'sw.js'),
+      const swWebpackConfig: Configuration = {
+        entry: require.resolve('./sw.js'),
         output: {
           path: outDir,
           filename: 'sw.js',
@@ -118,17 +146,19 @@ function plugin(context, options) {
         optimization: {
           splitChunks: false,
           minimize: !debug,
-          // see https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
-          minimizer: [
-            !debug &&
-              new Terser({
-                test: swSourceFileTest,
-              }),
-          ].filter(Boolean),
+          // See https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
+          minimizer: debug
+            ? []
+            : [
+                new Terser({
+                  test: swSourceFileTest,
+                }),
+              ],
         },
         plugins: [
           new webpack.EnvironmentPlugin({
-            PWA_SW_CUSTOM: swCustom || '', // fallback value required with Webpack 5
+            // Fallback value required with Webpack 5
+            PWA_SW_CUSTOM: swCustom ?? '',
           }),
           new LogPlugin({
             name: 'Service Worker',
@@ -139,7 +169,7 @@ function plugin(context, options) {
           rules: [
             {
               test: swSourceFileTest,
-              exclude: /(node_modules)/,
+              exclude: /node_modules/,
               use: getSWBabelLoader(),
             },
           ],
@@ -156,9 +186,10 @@ function plugin(context, options) {
           '**/*.{js,json,css,html}',
           '**/*.{png,jpg,jpeg,gif,svg,ico}',
           '**/*.{woff,woff2,eot,ttf,otf}',
-          ...(injectManifest.globPatterns || []),
+          // @ts-expect-error: internal API?
+          ...((injectManifest.globPatterns as string[] | undefined) ?? []),
         ],
-        // those attributes are not overrideable
+        // Those attributes are not overrideable
         swDest,
         swSrc: swDest,
         globDirectory: props.outDir,
@@ -167,8 +198,4 @@ function plugin(context, options) {
   };
 }
 
-module.exports = plugin;
-
-plugin.validateOptions = function validateOptions({validate, options}) {
-  return validate(PluginOptionSchema, options);
-};
+export {validateOptions} from './options';

package/src/{pluginOptionSchema.js → options.ts}

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {Joi} = require('@docusaurus/utils-validation');
-const path = require('path');
+import {Joi} from '@docusaurus/utils-validation';
+import type {OptionValidationContext} from '@docusaurus/types';
+import type {PluginOptions} from '@docusaurus/plugin-pwa';
 
 const DEFAULT_OPTIONS = {
   debug: false,
@@ -18,11 +19,10 @@ const DEFAULT_OPTIONS = {
   injectManifestConfig: {},
   pwaHead: [],
   swCustom: undefined,
-  swRegister: path.join(__dirname, 'registerSw.js'),
-  reloadPopup: '@theme/PwaReloadPopup',
+  swRegister: './registerSw.js',
 };
 
-exports.PluginOptionSchema = Joi.object({
+const optionsSchema = Joi.object<PluginOptions>({
   debug: Joi.bool().default(DEFAULT_OPTIONS.debug),
   offlineModeActivationStrategies: Joi.array()
     .items(
@@ -48,7 +48,16 @@ exports.PluginOptionSchema = Joi.object({
   swRegister: Joi.alternatives()
     .try(Joi.string(), Joi.bool().valid(false))
     .default(DEFAULT_OPTIONS.swRegister),
-  reloadPopup: Joi.alternatives()
-    .try(Joi.string(), Joi.bool().valid(false))
-    .default(DEFAULT_OPTIONS.reloadPopup),
+  // @ts-expect-error: forbidden
+  reloadPopup: Joi.any().forbidden().messages({
+    'any.unknown':
+      'The reloadPopup option is removed in favor of swizzling. See https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa#customizing-reload-popup for how to customize the reload popup using swizzling.',
+  }),
 });
+
+export function validateOptions({
+  validate,
+  options,
+}: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions {
+  return validate(optionsSchema, options);
+}

package/src/plugin-pwa.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module '@docusaurus/plugin-pwa' {
+  import type {InjectManifestOptions} from 'workbox-build';
+
+  export type PluginOptions = {
+    /**
+     * Turn debug mode on:
+     *
+     * - Workbox logs
+     * - Additional Docusaurus logs
+     * - Unoptimized SW file output
+     * - Source maps
+     */
+    debug?: boolean;
+    /**
+     * Strategies used to turn the offline mode on:
+     *
+     * - `appInstalled`: activates for users having installed the site as an app
+     * (not 100% reliable)
+     * - `standalone`: activates for users running the app as standalone (often
+     * the case once a PWA is installed)
+     * - `queryString`: activates if queryString contains `offlineMode=true`
+     * (convenient for PWA debugging)
+     * - `mobile`: activates for mobile users (width <= 940px)
+     * - `saveData`: activates for users with `navigator.connection.saveData ===
+     * true`
+     * - `always`: activates for all users
+     */
+    offlineModeActivationStrategies: (
+      | 'appInstalled'
+      | 'queryString'
+      | 'standalone'
+      | 'mobile'
+      | 'saveData'
+      | 'always'
+    )[];
+    /**
+     * Workbox options to pass to `workbox.injectManifest()`. This gives you
+     * control over which assets will be precached, and be available offline.
+     * @see https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest
+     */
+    injectManifestConfig: InjectManifestOptions;
+    /**
+     * Array of objects containing `tagName` and key-value pairs for attributes
+     * to inject into the `<head>` tag. Technically you can inject any head tag
+     * through this, but it's ideally used for tags to make your site PWA-
+     * compliant.
+     */
+    pwaHead: {
+      tagName: string;
+      href?: string;
+      content?: string;
+      [attributeName: string]: string | boolean | undefined;
+    }[];
+    /**
+     * Useful for additional Workbox rules. You can do whatever a service worker
+     * can do here, and use the full power of workbox libraries. The code is
+     * transpiled, so you can use modern ES6+ syntax here.
+     */
+    swCustom?: string;
+    /**
+     * Adds an entry before the Docusaurus app so that registration can happen
+     * before the app runs. The default `registerSW.js` file is enough for
+     * simple registration. Passing `false` will disable registration entirely.
+     */
+    swRegister: string | false;
+  };
+
+  export type Options = Partial<PluginOptions>;
+}
+
+declare module '@theme/PwaReloadPopup' {
+  export interface Props {
+    /**
+     * The popup should call this callback when the `reload` button is clicked.
+     * This will tell the service worker to install the waiting service worker
+     * and reload the page.
+     */
+    readonly onReload: () => void;
+  }
+  export default function PwaReloadPopup(props: Props): JSX.Element;
+}

package/src/registerSw.ts

@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {createStorageSlot} from '@docusaurus/theme-common';
+
+// First: read the env variables (provided by Webpack)
+/* eslint-disable prefer-destructuring */
+const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL!;
+const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES = process.env
+  .PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES as unknown as (keyof typeof OfflineModeActivationStrategiesImplementations)[];
+const PWA_DEBUG = process.env.PWA_DEBUG;
+/* eslint-enable prefer-destructuring */
+
+const MAX_MOBILE_WIDTH = 996;
+
+const AppInstalledEventFiredStorage = createStorageSlot(
+  'docusaurus.pwa.event.appInstalled.fired',
+);
+
+declare global {
+  interface Navigator {
+    getInstalledRelatedApps: () => Promise<{platform: string}[]>;
+    connection?: {effectiveType: string; saveData: boolean};
+  }
+}
+
+function debugLog(msg: string, obj?: unknown) {
+  if (PWA_DEBUG) {
+    if (typeof obj === 'undefined') {
+      console.log(`[Docusaurus-PWA][registerSw]: ${msg}`);
+    } else {
+      console.log(`[Docusaurus-PWA][registerSw]: ${msg}`, obj);
+    }
+  }
+}
+
+async function clearRegistrations() {
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  debugLog('will unregister all service workers', {registrations});
+  await Promise.all(
+    registrations.map((registration) =>
+      registration
+        .unregister()
+        .then((result) =>
+          debugLog('unregister service worker', {registration, result}),
+        ),
+    ),
+  );
+  debugLog('unregistered all service workers', {registrations});
+  window.location.reload();
+}
+
+/*
+As of 2021:
+It is complicated and not very reliable to detect an app is actually installed.
+https://stackoverflow.com/questions/51735869/check-if-user-has-already-installed-pwa-to-homescreen-on-chrome
+
+- appinstalled event is not in the spec anymore and seems to not fire? https://firt.dev/pwa-2021#less-capabilities-%E2%98%B9%EF%B8%8F
+- getInstalledRelatedApps() is only supported in recent Chrome and does not seem to reliable either https://github.com/WICG/get-installed-related-apps
+- display-mode: standalone is not exactly the same concept, but looks like a decent fallback https://petelepage.com/blog/2019/07/is-my-pwa-installed/
+ */
+function getIsAppInstalledEventFired() {
+  return AppInstalledEventFiredStorage.get() === 'true';
+}
+
+async function getIsAppInstalledRelatedApps() {
+  if (!('getInstalledRelatedApps' in window.navigator)) {
+    return false;
+  }
+  const relatedApps = await navigator.getInstalledRelatedApps();
+  return relatedApps.some((app) => app.platform === 'webapp');
+}
+function isStandaloneDisplayMode() {
+  return window.matchMedia('(display-mode: standalone)').matches;
+}
+
+const OfflineModeActivationStrategiesImplementations = {
+  always: () => true,
+  mobile: () => window.innerWidth <= MAX_MOBILE_WIDTH,
+  saveData: () => !!navigator.connection?.saveData,
+  appInstalled: () =>
+    getIsAppInstalledEventFired() || getIsAppInstalledRelatedApps(),
+  standalone: () => isStandaloneDisplayMode(),
+  queryString: () =>
+    new URLSearchParams(window.location.search).get('offlineMode') === 'true',
+};
+
+async function getActiveStrategies() {
+  const activeStrategies = await Promise.all(
+    PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES.map((strategyName) =>
+      Promise.resolve(
+        OfflineModeActivationStrategiesImplementations[strategyName](),
+      ).then((isActive) => (isActive ? strategyName : undefined)),
+    ),
+  );
+  return activeStrategies.filter(Boolean);
+}
+
+async function getIsOfflineModeEnabled() {
+  const activeStrategies = await getActiveStrategies();
+  const enabled = activeStrategies.length > 0;
+  debugLog(
+    enabled
+      ? 'offline mode enabled, because of activation strategies'
+      : 'offline mode disabled, because none of the offlineModeActivationStrategies could be used',
+    {
+      activeStrategies,
+      availableStrategies: PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES,
+    },
+  );
+  return enabled;
+}
+
+function createServiceWorkerUrl(params: object) {
+  const paramsQueryString = JSON.stringify(params);
+  const url = `${PWA_SERVICE_WORKER_URL}?params=${encodeURIComponent(
+    paramsQueryString,
+  )}`;
+  debugLog('service worker url', {url, params});
+  return url;
+}
+
+async function registerSW() {
+  const [{Workbox}, offlineMode] = await Promise.all([
+    import('workbox-window'),
+    getIsOfflineModeEnabled(),
+  ]);
+  const url = createServiceWorkerUrl({offlineMode, debug: PWA_DEBUG});
+  const wb = new Workbox(url);
+  const sendSkipWaiting = () => wb.messageSW({type: 'SKIP_WAITING'});
+  const handleServiceWorkerWaiting = () => {
+    debugLog('handleServiceWorkerWaiting');
+    // Immediately load new service worker when files aren't cached
+    if (!offlineMode) {
+      return sendSkipWaiting();
+    }
+    return import('./renderReloadPopup.js').then(({renderReloadPopup}) =>
+      renderReloadPopup({
+        onReload() {
+          wb.addEventListener('controlling', () => {
+            window.location.reload();
+          });
+          sendSkipWaiting();
+        },
+      }),
+    );
+  };
+  // Update the current service worker when the next one has finished
+  // installing and transitions to waiting state.
+  wb.addEventListener('waiting', (event) => {
+    debugLog('event waiting', {event});
+    void handleServiceWorkerWaiting();
+  });
+  // Update current service worker if the next one finishes installing and
+  // moves to waiting state in another tab.
+  // @ts-expect-error: not present in the API typings anymore
+  wb.addEventListener('externalwaiting', (event) => {
+    debugLog('event externalwaiting', {event});
+    void handleServiceWorkerWaiting();
+  });
+  const registration = await wb.register();
+  if (registration) {
+    if (registration.active) {
+      debugLog('registration.active', {registration});
+    }
+    if (registration.installing) {
+      debugLog('registration.installing', {registration});
+    }
+    if (registration.waiting) {
+      debugLog('registration.waiting', {registration});
+      // Update service worker if the next one is already in the waiting
+      // state. This happens when the user doesn't click on `reload` in
+      // the popup.
+      await handleServiceWorkerWaiting();
+    }
+  }
+}
+
+// TODO these events still works in chrome but have been removed from the spec
+// in 2019! See https://github.com/w3c/manifest/pull/836
+function addLegacyAppInstalledEventsListeners() {
+  debugLog('addLegacyAppInstalledEventsListeners');
+
+  window.addEventListener('appinstalled', (event) => {
+    debugLog('event appinstalled', {event});
+    AppInstalledEventFiredStorage.set('true');
+    debugLog("AppInstalledEventFiredStorage.set('true')");
+    // After the app is installed, we register a service worker with the path
+    // `/sw?enabled`. Since the previous service worker was `/sw`, it'll be
+    // treated as a new one. The previous registration will need to be
+    // cleared, otherwise the reload popup will show.
+    void clearRegistrations();
+  });
+
+  // TODO this event still works in chrome but has been removed from the spec
+  // in 2019!!!
+  window.addEventListener('beforeinstallprompt', (event) => {
+    debugLog('event beforeinstallprompt', {event});
+    // TODO instead of default browser install UI, show custom docusaurus
+    // prompt?
+    // event.preventDefault();
+    const appInstalledEventFired = AppInstalledEventFiredStorage.get();
+    debugLog('AppInstalledEventFiredStorage.get()', {appInstalledEventFired});
+    if (appInstalledEventFired) {
+      AppInstalledEventFiredStorage.del();
+      debugLog('AppInstalledEventFiredStorage.del()');
+      // After uninstalling the app, if the user doesn't clear all data, then
+      // the previous service worker will continue serving cached files. We
+      // need to clear registrations and reload, otherwise the popup shows.
+      void clearRegistrations();
+    }
+  });
+
+  debugLog(
+    'legacy appinstalled and beforeinstallprompt event listeners installed',
+  );
+}
+
+/*
+Init code to run on the client!
+ */
+if (ExecutionEnvironment.canUseDOM) {
+  debugLog('debug mode enabled');
+
+  if ('serviceWorker' in navigator) {
+    // First: add the listeners asap/synchronously
+    addLegacyAppInstalledEventsListeners();
+
+    // Then try to register the SW using lazy/dynamic imports
+    registerSW().catch((e: unknown) => console.error('registerSW failed', e));
+  }
+}

package/src/{renderReloadPopup.js → renderReloadPopup.tsx}

@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import {render} from 'react-dom';
+import ReactDOM from 'react-dom';
+import type {Props} from '@theme/PwaReloadPopup';
 
 const POPUP_CONTAINER_ID = 'pwa-popup-container';
 
@@ -19,8 +20,9 @@ const createContainer = () => {
   return container;
 };
 
-export default async function renderReloadPopup(props) {
-  const container = getContainer() || createContainer();
-  const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP);
-  render(<ReloadPopup {...props} />, container);
+export function renderReloadPopup(props: Props): Promise<void> {
+  const container = getContainer() ?? createContainer();
+  return import('@theme/PwaReloadPopup').then(({default: ReloadPopup}) => {
+    ReactDOM.render(<ReloadPopup {...props} />, container);
+  });
 }