Merge pull request #218 from remix-pwa/dev

Moving `sw` patches upstream
remix-pwa · May 5, 2024 · 9d85531 · 9d85531
2 parents dacfecc + ee197f2
commit 9d85531
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/sw/CHANGELOG.md b/packages/sw/CHANGELOG.md
@@ -1,3 +1,10 @@
+## @remix-pwa/sw 3.0.4-dev.1 (2024-05-05)
+
+
+### Bug Fixes
+
+* **sw:** mini patches to message handler & `useSWEffect` hook 90d3a6d
+
 ## @remix-pwa/sw 3.0.3 (2024-04-24)
 
 

diff --git a/packages/sw/index.ts b/packages/sw/index.ts
@@ -32,6 +32,7 @@ export { ManifestLink } from './src/components/ManifestLink.js';
 export type {
   DefaultErrorHandler,
   DefaultFetchHandler,
+  DefaultFetchHandlerArgs,
   GetLoadContextFunction,
   WorkerActionArgs,
   WorkerActionFunction,

diff --git a/packages/sw/package.json b/packages/sw/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/sw",
-  "version": "3.0.3",
+  "version": "3.0.4-dev.1",
   "description": "Service Worker APIs and utilities for Remix PWA",
   "repository": {
     "type": "git",

diff --git a/packages/sw/src/hooks/useSWEffect.ts b/packages/sw/src/hooks/useSWEffect.ts
@@ -1,6 +1,9 @@
 import type { Location } from '@remix-run/react';
 import { useLocation } from '@remix-run/react';
 import { useEffect, useRef } from 'react';
+
+import { messageSW } from '../utils/utils.js';
+
 interface SWMessagePayload {
   /**
    * The current location of the application.
@@ -33,7 +36,7 @@ export function useSWEffect(options: UseSWEffectOptions = { cacheType: 'jit' }):
   useEffect(() => {
     const sendMessageToSW = (event: string, payload: SWMessagePayload) => {
       if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-        navigator.serviceWorker.controller.postMessage({ type: event, payload });
+        messageSW(navigator.serviceWorker.controller, { type: event, payload });
       }
     };
 
@@ -76,9 +79,11 @@ export function useSWEffect(options: UseSWEffectOptions = { cacheType: 'jit' }):
       if (messageDebounceRef.current) {
         clearTimeout(messageDebounceRef.current);
       }
+
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker.removeEventListener('controllerchange', handleLocationChange);
       }
+
       if (isFirstRender.current) isFirstRender.current = false;
     };
   }, [location]);

diff --git a/packages/sw/src/message/NavigationHandler.ts b/packages/sw/src/message/NavigationHandler.ts
@@ -1,4 +1,5 @@
 import type { EnhancedCache } from '../cache/index.js';
+import type { Logger } from '../logger/logger.js';
 import { logger } from '../logger/logger.js';
 import { MessageHandler } from './MessageHandler.js';
 
@@ -12,16 +13,23 @@ export type NavigationHandlerOptions = {
    * handle the message.
    */
   allowList?: string[] | RegExp[];
+  /**
+   * The cache to use for handling the navigation event - caching the HTML responses.
+   */
+  cache: EnhancedCache;
   /**
    * A list of regular expressions or strings to match against the current document URL.
    * If the current document URL matches any of the patterns, the handler will not
    * handle the message.
    */
   denyList?: string[] | RegExp[];
   /**
-   * The cache to use for handling the navigation event - caching the HTML responses.
+   * The logger to use for logging messages. If this isn't provided,
+   * the default logger will be used.
+   *
+   * @default logger
    */
-  cache: EnhancedCache;
+  logger?: Logger;
 };
 
 /**
@@ -32,13 +40,15 @@ export class NavigationHandler extends MessageHandler {
   private allowList: string[] | RegExp[];
   private denyList: string[] | RegExp[];
   private documentCache: EnhancedCache;
+  private logger: Logger;
 
   constructor(options: NavigationHandlerOptions) {
     super('REMIX_NAVIGATION');
 
     this.allowList = options.allowList || [];
     this.denyList = options.denyList || [];
     this.documentCache = options.cache;
+    this.logger = options.logger || logger;
 
     this.bind(this.handleNavigation.bind(this));
   }
@@ -60,10 +70,10 @@ export class NavigationHandler extends MessageHandler {
 
       // eslint-disable-next-line dot-notation
       if (!cacheMatch && this.documentCache['strategy'].constructor.name !== 'CacheOnly') {
-        logger.debug(`Document request for ${documentUrl} not found in cache. Fetching from server...`);
+        this.logger.debug(`Document request for ${documentUrl} not found in cache. Fetching from server...`);
 
         const response = await fetch(documentUrl).catch(error => {
-          logger.error(`Error fetching document for ${documentUrl}:`, error);
+          this.logger.error(`Error fetching document for ${documentUrl}:`, error);
         });
 
         if (!response) {
@@ -74,14 +84,14 @@ export class NavigationHandler extends MessageHandler {
       }
 
       if (isSsr) {
-        logger.setLogLevel('warn');
-        logger.log(`Document request for ${documentUrl} handled.`);
-        logger.setLogLevel('debug');
+        this.logger.setLogLevel('warn');
+        this.logger.log(`Document request for ${documentUrl} handled.`);
+        this.logger.setLogLevel('debug');
 
         // Todo: Handle loader events on document request
       }
     } catch (error) {
-      logger.error(`Error handling document request for ${documentUrl}:`, error);
+      this.logger.error(`Error handling document request for ${documentUrl}:`, error);
     }
   }
 }
diff --git a/packages/sw/src/types.ts b/packages/sw/src/types.ts
@@ -34,6 +34,11 @@ export type WorkerLoaderArgs = WorkerDataFunctionArgs;
  */
 export type WorkerActionArgs = WorkerDataFunctionArgs;
 
+/**
+ * The `defaultFetchHandler` arguments.
+ */
+export type DefaultFetchHandlerArgs = WorkerDataFunctionArgs;
+
 /**
  * A worker action function.
  */