Add 'utils' module export (#410)

Export core utils and assets used by RWP in /utils.
Add serviceWorkerActivated() utility promise.

---------

Co-authored-by: emma <hi@emma.cafe>

CHANGES.md

@@ -2,16 +2,24 @@
 
 ## CHANGES
 
+v2.3.4
+
+- API: Add utils module for basic utility function exports
+- Loading: Update to wabac.js (2.22.2), includes fixes to MultiWACZ loading
+
 v2.3.3
+
 - UI: Support custom 'downloadUrl' when loading from Multi-WACZ JSON source - don't show download if unset
 - UI: Don't show 'Archive Info' menu option for Multi-WACZ JSON source in embed mode
 - UI: Use localized data format for current language settings
 - Loading: Use negative offset range requests (via wabac.js 2.21.3)
 
 v2.3.2
+
 - Loading: fix dynamic page lookup for URLs with query strings (via wabac.js 2.21.2)
 
 v2.3.1
+
 - Loading: additional loading optimizations, bump wabac.js to 2.21.1
 
 v2.3.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -13,12 +13,16 @@
       "default": "./dist/index.js"
     },
     "./src/electron-*": "./src/electron-*.ts",
-    "./index.html": "./index.html"
+    "./index.html": "./index.html",
+    "./utils": {
+      "types": "./dist/types/utils/index.d.ts",
+      "default": "./dist/utils.js"
+    }
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@shoelace-style/shoelace": "~2.15.1",
-    "@webrecorder/wabac": "^2.21.3",
+    "@webrecorder/wabac": "^2.22.2",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
     "electron-updater": "^6.3.9",

src/index.ts

@@ -10,12 +10,15 @@ import { Pages } from "./pages";
 import { PageEntry } from "./pageentry";
 import { Replay } from "./replay";
 import { Sorter } from "./sorter";
-import { SWManager } from "./swmanager";
+import { SWManager, serviceWorkerActivated } from "./swmanager";
 import { URLResources } from "./url-resources";
 import { Embed } from "./embed";
 import "./coll-description";
 import "./shoelace";
 
+import rwpIcon from "~assets/icons/replaywebpage.svg";
+import rwpLogoAnimated from "~assets/brand/replaywebpage-icon-color-animated.svg";
+
 export {
   ReplayWebApp,
   Chooser,
@@ -48,6 +51,9 @@ export {
   Embed,
   Embed as ReplayWebPage,
   SWManager,
+  serviceWorkerActivated,
+  rwpIcon,
+  rwpLogoAnimated,
 };
 
 export type { ItemType, URLResource } from "./types";
@@ -55,3 +61,7 @@ export type { ItemType, URLResource } from "./types";
 export type { EmbedReplayEvent } from "./item";
 
 export * from "./misc";
+
+export * from "./pageutils";
+
+export * from "./utils/dateTimeFormatter";

src/loader.ts

@@ -9,6 +9,7 @@ import { parseURLSchemeHostPath } from "./pageutils";
 import { property } from "lit/decorators.js";
 import type { LoadInfo } from "./item";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { serviceWorkerActivated } from "./swmanager";
 
 // ===========================================================================
 /**
@@ -231,14 +232,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
       file: source,
     };
 
-    if (!navigator.serviceWorker.controller) {
+    await serviceWorkerActivated();
-      await new Promise((resolve) => {
-        navigator.serviceWorker.addEventListener("controllerchange", () =>
-          // @ts-expect-error - TS2794 - Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?
-          resolve(),
-        );
-      });
-    }
 
     if (this.worker) {
       if (!this.noWebWorker) {

src/misc.ts

@@ -216,10 +216,15 @@ export {
   clickOnSpacebarPress,
   FaIcon,
   WrModal,
+  /** @deprecated Import this directly from `lit` instead */
   LitElement,
+  /** @deprecated Import this directly from `lit` instead */
   html,
+  /** @deprecated Import this directly from `lit` instead */
   css,
+  /** @deprecated Import this directly from `lit/directives/unsafe-css.js` instead */
   unsafeCSS,
+  /** @deprecated Import this directly from `lit/directives/unsafe-svg.js` instead */
   unsafeSVG,
   apiPrefix,
   replayPrefix,

src/swmanager.ts

@@ -153,3 +153,15 @@ export class SWManager {
     `;
   }
 }
+
+export async function serviceWorkerActivated() {
+  if (navigator.serviceWorker.controller) {
+    return;
+  }
+
+  await new Promise<void>((resolve) => {
+    navigator.serviceWorker.addEventListener("controllerchange", () => {
+      resolve();
+    });
+  });
+}

src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./dateTimeFormatter";
+export * from "./assertNonNullish";
+export * from "../pageutils";
+export { SWManager, serviceWorkerActivated } from "../swmanager";

webpack.config.js

@@ -98,6 +98,7 @@ const libConfig = (env, argv) => {
   /** @type {import('webpack').Configuration['entry']} */
   const entry = {
     index: "./src/index.ts",
+    utils: "./src/utils/index.ts",
   };
 
   const extraPlugins = [];

yarn.lock

@@ -1028,10 +1028,10 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@webrecorder/wabac@^2.21.3":
+"@webrecorder/wabac@^2.22.2":
-  version "2.21.3"
+  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.21.3.tgz#2a376e848e1bf09dbe98e78a6c41034f8cef80d9"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.22.2.tgz#9b905bac70f8d8961e804576cdadc9d2bba1e576"
-  integrity sha512-RgWFCRj1VEa0o2i8HTIlr5ol3W1C0ySI3cdBb8Q1okSYKzG3Xaqlnui2iTpWiJNgvayKzZs1fTxcQuKz/vMYgQ==
+  integrity sha512-bLuiKPJpVm5jsYXv6/h6A9OK02Jg4WCPzzN72vM0ktHHyY1GUniw0iM4IcZRP3cMx67Ot3ELPe2VULvlEc47oA==
   dependencies:
     "@peculiar/asn1-ecc" "^2.3.4"
     "@peculiar/asn1-schema" "^2.3.3"