From f46b772f975aecf475b6cff662c4859465ad48ca Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sun, 15 May 2022 12:27:35 +0800 Subject: [PATCH] refactor(pwa): migrate client modules to TS --- .../src/{registerSw.js => registerSw.ts} | 29 +++++++++++++++---- ...erReloadPopup.js => renderReloadPopup.tsx} | 10 ++++--- .../tsconfig.browser.json | 7 ++++- .../tsconfig.server.json | 8 ++++- 4 files changed, 43 insertions(+), 11 deletions(-) rename packages/docusaurus-plugin-pwa/src/{registerSw.js => registerSw.ts} (93%) rename packages/docusaurus-plugin-pwa/src/{renderReloadPopup.js => renderReloadPopup.tsx} (75%) diff --git a/packages/docusaurus-plugin-pwa/src/registerSw.js b/packages/docusaurus-plugin-pwa/src/registerSw.ts similarity index 93% rename from packages/docusaurus-plugin-pwa/src/registerSw.js rename to packages/docusaurus-plugin-pwa/src/registerSw.ts index 9226d9a6f054..a215a656aa58 100644 --- a/packages/docusaurus-plugin-pwa/src/registerSw.js +++ b/packages/docusaurus-plugin-pwa/src/registerSw.ts @@ -7,6 +7,14 @@ import {createStorageSlot} from '@docusaurus/theme-common'; +declare global { + namespace NodeJS { + interface ProcessEnv { + PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: (keyof typeof OfflineModeActivationStrategiesImplementations)[]; + } + } +} + // First: read the env variables (provided by Webpack) /* eslint-disable prefer-destructuring */ const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL; @@ -34,7 +42,7 @@ async function clearRegistrations() { } await Promise.all( registrations.map(async (registration) => { - const result = await registration?.registration?.unregister(); + const result = await registration?.unregister(); if (debug) { console.log( `[Docusaurus-PWA][registerSw]: unregister() service worker registration`, @@ -65,6 +73,14 @@ https://stackoverflow.com/questions/51735869/check-if-user-has-already-installed async function isAppInstalledEventFired() { return AppInstalledEventFiredStorage.get() === 'true'; } + +declare global { + interface Navigator { + getInstalledRelatedApps: () => Promise<{platform: string}[]>; + connection: {saveData: boolean}; + } +} + async function isAppInstalledRelatedApps() { if ('getInstalledRelatedApps' in window.navigator) { const relatedApps = await navigator.getInstalledRelatedApps(); @@ -90,7 +106,9 @@ const OfflineModeActivationStrategiesImplementations = { new URLSearchParams(window.location.search).get('offlineMode') === 'true', }; -async function isStrategyActive(strategyName) { +async function isStrategyActive( + strategyName: keyof typeof OfflineModeActivationStrategiesImplementations, +) { return OfflineModeActivationStrategiesImplementations[strategyName](); } @@ -127,7 +145,7 @@ async function isOfflineModeEnabled() { return enabled; } -function createServiceWorkerUrl(params) { +function createServiceWorkerUrl(params: object) { const paramsQueryString = JSON.stringify(params); const url = `${PWA_SERVICE_WORKER_URL}?params=${encodeURIComponent( paramsQueryString, @@ -173,7 +191,7 @@ async function registerSW() { } }; - if (debug) { + if (debug && registration) { if (registration.active) { console.log( '[Docusaurus-PWA][registerSw]: registration.active', @@ -205,6 +223,7 @@ async function registerSW() { // 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) => { if (debug) { console.log('[Docusaurus-PWA][registerSw]: event externalwaiting', event); @@ -214,7 +233,7 @@ async function registerSW() { // 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. - if (registration.waiting) { + if (registration?.waiting) { await handleServiceWorkerWaiting(); } } diff --git a/packages/docusaurus-plugin-pwa/src/renderReloadPopup.js b/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx similarity index 75% rename from packages/docusaurus-plugin-pwa/src/renderReloadPopup.js rename to packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx index b26202ac3c5b..d4cac3601736 100644 --- a/packages/docusaurus-plugin-pwa/src/renderReloadPopup.js +++ b/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import {render} from 'react-dom'; +import ReactDOM from 'react-dom'; const POPUP_CONTAINER_ID = 'pwa-popup-container'; @@ -19,8 +19,10 @@ const createContainer = () => { return container; }; -export default async function renderReloadPopup(props) { +export default async function renderReloadPopup(props: { + onReload: () => void; +}): Promise { const container = getContainer() || createContainer(); - const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP); - render(, container); + const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP!); + ReactDOM.render(, container); } diff --git a/packages/docusaurus-plugin-pwa/tsconfig.browser.json b/packages/docusaurus-plugin-pwa/tsconfig.browser.json index 3af8257cdf8d..147b109fe030 100644 --- a/packages/docusaurus-plugin-pwa/tsconfig.browser.json +++ b/packages/docusaurus-plugin-pwa/tsconfig.browser.json @@ -4,5 +4,10 @@ "module": "esnext", "jsx": "react-native" }, - "include": ["src/theme/", "src/*.d.ts"] + "include": [ + "src/theme/", + "src/*.d.ts", + "src/registerSw.ts", + "src/renderReloadPopup.tsx" + ] } diff --git a/packages/docusaurus-plugin-pwa/tsconfig.server.json b/packages/docusaurus-plugin-pwa/tsconfig.server.json index 1a463cd83a52..40f95c1d1c14 100644 --- a/packages/docusaurus-plugin-pwa/tsconfig.server.json +++ b/packages/docusaurus-plugin-pwa/tsconfig.server.json @@ -1,4 +1,10 @@ { "extends": "./tsconfig.json", - "include": ["src/*.ts"] + "include": ["src/*.ts"], + "exclude": [ + "src/theme/", + "src/*.d.ts", + "src/registerSw.ts", + "src/renderReloadPopup.tsx" + ] }