archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support for import as module, wabac.js 2.20 (#364)

Browse Source 
- Extensibility for AWP (customizable toolbar, pass replay iframe messages to parent)
- Support export as module, build separate index.js for module in addition to ui.js
- Update to wabac.js 2.20.0
- bump to 2.2.0
This commit is contained in:
Ilya Kreymer
2024-10-16 20:22:11 -07:00
committed by GitHub
parent 91dd5addd1
commit 95c9be6c5b
18 changed files with 430 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGES.md
+14 -2
View File
@@ -2,30 +2,42 @@
## CHANGES
v2.2.0
- Extensability: additional override options for AWP, make location toolbar more extensible
- Extensability: support importing as module via dist/index.js, separate from ui.js
- Deps: update to wabac.js 2.20.0, typescript support
v2.1.5
- Fidelity: updated rewriting rules for instagram
- Fidelity: disable window online/offline events in replay (via wabac.js)
- Dependencies: update to wabac.js 2.19.9 + wombat 3.8.2, electron 32.1.0
v2.1.4
- Fidelity: improvements to FB rewriting, eval() rewriting, 'object' tag rewriting (via wabac.js 2.19.7, wombat 3.7.14)
v2.1.3
- Fidelity: edge-case rewriting improvements, avoid rewriting inside of strings, detect old-html framesets (via wabac.js 2.19.5, wombat 3.7.12)
v2.1.2
- Fidelity: Video replay improvements, fix rewriting of DASH manifests (via wabac.js 2.19.4, wombat 3.7.11)
v2.1.1
- Fidelity: fixes to Sharepoint site replay (via wabac.js 2.19.2, wombat 3.7.10)
- UI: default URL resources search to 'prefix' as contains only works after prefix search
v2.1.0
- More fidelity fixes (via wabac.js 2.19.1, wombat 3.7.8)
- Improved messaging: embed tag emits @rwp-page-loading and @rwp-url-change events
- Remove multiTs from hashtag, avoid double history nav as it was being set
v2.0.2
- Fidelity improvements (via wabac.js 2.18.4 and wombat 3.7.7), including improved encoding detection
- Upgrade Shoelace & Lit by @SuaYoo in https://github.com/webrecorder/replayweb.page/pull/329
- Adds multi-resolution ICO file for Windows by @Shrinks99 in https://github.com/webrecorder/replayweb.page/pull/325
@@ -33,9 +45,10 @@ v2.0.2
- Configure package exports explicitly by @emma-sg in https://github.com/webrecorder/replayweb.page/pull/336
v2.0.1
- Fidelity improvements (via wabac.js and wombat), including fixes ebay carousel #326 (via wombat)
- partial fix to error page escaping #323 (via wabac)
fixes to reddit pages #317
- fixes to reddit pages #317
- Fixes to twitter/x replay (via wabac / wombat)
- Build improvements: run mkdocs gh-deploy --force in gh action, instead of publish-docs to avoid accidental updates
- Auto install ruffle from download script, remove from git, add 'update-ruffle' script
@@ -69,7 +82,6 @@ v2.0.0
- build(deps): bump loader-utils from 2.0.0 to 2.0.4 by @dependabot in https://github.com/webrecorder/replayweb.page/pull/316
- 2.0.0 Release by @SuaYoo in https://github.com/webrecorder/replayweb.page/pull/269
v1.8.17
- Dependencies: update to wabac.js 2.17.3, wombat 3.7.3
README.md
-1
View File
@@ -72,7 +72,6 @@ The static assets are placed in the root `index.html`, `sw.js`, and `ui.js`, and
The full site with docs is built using MkDocs. Using the `yarn build-docs` command, the static assets are copied into `mkdocs/site/` and using Markdown in `mkdocs/site/docs`, the final static site is built to `mkdocs/_genhtml`. This is what is published to https://replayweb.page/ via CI.
### Service Worker Requirements
Note that for the 'backend' service worker to work, the static site must be served from either localhost or an HTTPS endpoint.
package.json
+4 -9
View File
@@ -1,7 +1,7 @@
{
"name": "replaywebpage",
"productName": "ReplayWeb.page",
"version": "2.1.5",
"version": "2.2.0",
"description": "Serverless Web Archive Replay",
"repository": "https://github.com/webrecorder/replayweb.page",
"homepage": "https://replayweb.page/",
@@ -10,11 +10,7 @@
"exports": {
".": {
"types": "./dist/types/index.d.ts",
"default": "./ui.js"
},
"./misc": {
"types": "./dist/types/misc.d.ts",
"default": "./dist/misc.js"
"default": "./dist/index.js"
},
"./src/electron-*": "./src/electron-*.ts",
"./index.html": "./index.html"
@@ -22,7 +18,7 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"@shoelace-style/shoelace": "~2.15.1",
"@webrecorder/wabac": "^2.19.9",
"@webrecorder/wabac": "^2.20.0",
"bulma": "^0.9.3",
"electron-log": "^4.4.1",
"electron-updater": "^6.3.2",
@@ -75,8 +71,7 @@
"webpack-merge": "^5.10.0"
},
"resolutions": {
"**/lit": "3.1.1",
"@webrecorder/wabac": "^2.19.9"
"**/lit": "3.1.1"
},
"files": [
"/dist",
scripts/build-if-not-git-repo.js
+1 -1
View File
@@ -27,7 +27,7 @@ const git = (args) => cp.spawnSync("git", args, { stdio: "inherit" });
// That's why status value needs to be checked explicitly
if (git(["rev-parse"]).status !== 0 || process.argv.includes("--force")) {
l(`git command not found, running build`);
const compiler = webpack(config.map((c) => c()));
const compiler = webpack(config.map((c) => c(process.env, process.argv)));
compiler.run((err) => {
if (err) {
src/appmain.ts
+1 -1
View File
@@ -78,7 +78,7 @@ export class ReplayWebApp extends LitElement {
swErrorMsg: TemplateResult<1> | string | null = null;
protected swName?: string;
private swmanager: SWManager | null;
protected swmanager: SWManager | null;
private useRuffle = false;
private droppedFile: File | null = null;
src/chooser.ts
+11 -1
View File
@@ -5,9 +5,15 @@ import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg";
import { customElement, property } from "lit/decorators.js";
export interface FileWithPath extends File {
readonly path: string;
path: string;
}
declare let window: Window & {
electron?: {
getPath: (file: File) => string;
};
};
// ===========================================================================
@customElement("wr-chooser")
export class Chooser extends LitElement {
@@ -89,6 +95,10 @@ export class Chooser extends LitElement {
setFile(file: FileWithPath) {
this.file = file;
// file.path only available in electron app
if (IS_APP && window.electron?.getPath) {
this.file.path = window.electron.getPath(this.file);
}
this.fileDisplayName = "file://" + (file.path || file.name);
}
src/electron-preload.ts
+8 -4
View File
@@ -1,12 +1,16 @@
/*eslint-env node */
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7016 - Could not find a declaration file for module '@webrecorder/wabac/src/loaders'. 'node_modules/@webrecorder/wabac/src/loaders.js' implicitly has an 'any' type.
import { CollectionLoader } from "@webrecorder/wabac/src/loaders";
import { CollectionLoader } from "@webrecorder/wabac/swlib";
import { type IpcRendererEvent } from "electron";
const { ipcRenderer, contextBridge } = require("electron");
const { ipcRenderer, contextBridge, webUtils } = require("electron");
contextBridge.exposeInMainWorld("electron", { IS_APP: true });
contextBridge.exposeInMainWorld("electron", {
IS_APP: true,
getPath(file: File) {
return webUtils.getPathForFile(file);
},
});
const dbs = {};
src/electron-replay-app.ts
+7 -5
View File
@@ -16,8 +16,7 @@ import {
import path from "path";
import fs from "fs";
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7016 - Could not find a declaration file for module '@webrecorder/wabac/src/rewrite'. 'node_modules/@webrecorder/wabac/src/rewrite/index.js' implicitly has an 'any' type.
import { ArchiveResponse, Rewriter } from "@webrecorder/wabac/src/rewrite";
import { ArchiveResponse, Rewriter } from "@webrecorder/wabac";
import { PassThrough, Readable } from "stream";
@@ -414,7 +413,7 @@ class ElectronReplayApp {
headers = new Headers(headers);
const date = new Date();
let response = new ArchiveResponse({
let response: ArchiveResponse = new ArchiveResponse({
payload,
headers,
status,
@@ -443,6 +442,9 @@ class ElectronReplayApp {
headers = Object.fromEntries(response.headers.entries());
let data = await response.getBuffer();
if (!data) {
data = new Uint8Array();
}
if (status === 206 || status === 200) {
const { statusCode, start, end } = this.parseRange(
@@ -456,9 +458,9 @@ class ElectronReplayApp {
status = statusCode;
}
data = this._bufferToStream(data);
const result = this._bufferToStream(data);
callback({ statusCode: status, headers, data });
callback({ statusCode: status, headers, data: result });
} catch (e) {
console.warn(e);
}
src/embed.ts
+1 -4
View File
@@ -85,7 +85,7 @@ class Embed extends LitElement {
replayfile = defaultReplayFile;
mainElementName = "replay-app-main";
appName = "ReplayWeb.page";
customConfig = null;
customConfig: Record<string, string | boolean> | null = null;
reloadCount = 0;
isCrossOrigin: boolean | undefined;
@@ -255,14 +255,11 @@ class Embed extends LitElement {
}
mergeConfigs() {
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!this.customConfig) {
return this.config;
}
if (this.config) {
// @ts-expect-error - TS2339 - Property 'customConfig' does not exist on type 'Embed'. | TS2339 - Property 'config' does not exist on type 'Embed'.
const config = { ...this.customConfig, ...JSON.parse(this.config) };
return JSON.stringify(config);
} else {
src/index.ts
+4
View File
@@ -10,6 +10,7 @@ import { Pages } from "./pages";
import { PageEntry } from "./pageentry";
import { Replay } from "./replay";
import { Sorter } from "./sorter";
import { SWManager } from "./swmanager";
import { URLResources } from "./url-resources";
import { Embed } from "./embed";
import "./shoelace";
@@ -41,6 +42,9 @@ export {
Sorter,
URLResources,
Embed,
SWManager,
};
export type { ItemType, URLResource } from "./types";
export * from "./misc";
src/item-index.ts
+5 -3
View File
@@ -89,7 +89,7 @@ class ItemIndex extends LitElement {
for (const item of this.items) {
if (
item.sourceUrl.indexOf(this.query) >= 0 ||
item.filename.indexOf(this.query) >= 0 ||
(item.filename && item.filename.indexOf(this.query) >= 0) ||
Boolean(item.loadUrl && item.loadUrl.indexOf(this.query) >= 0) ||
(item.title && item.title.indexOf(this.query) >= 0)
) {
@@ -383,8 +383,10 @@ class ItemIndex extends LitElement {
>ArchiveWeb.page</a
>
to save pages as you browse the web, or
<a href="https://browsertrix.com" target="_blank">sign up for Browsertrix</a> to archive
entire websites with automated crawling!
<a href="https://browsertrix.com" target="_blank"
>sign up for Browsertrix</a
>
to archive entire websites with automated crawling!
</p>
`;
}
src/item.ts
+236 -235
View File
@@ -1,10 +1,4 @@
import {
LitElement,
html,
css,
type PropertyValues,
type TemplateResult,
} from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { property } from "lit/decorators.js";
import { ref, createRef, type Ref } from "lit/directives/ref.js";
import type {
@@ -216,7 +210,8 @@ class Item extends LitElement {
constructor() {
super();
this.showSidebar = localStorage.getItem("pages:showSidebar") === "1";
this.showSidebar =
localStorage.getItem("pages:showSidebar") === "1" && this.browsable;
}
firstUpdated() {
@@ -547,7 +542,7 @@ class Item extends LitElement {
this.tabData.view = "pages";
}
if (this.tabData.url && this.tabData.query) {
if (this.tabData.url && this.tabData.query && this.browsable) {
this.showSidebar = true;
}
}
@@ -705,7 +700,7 @@ class Item extends LitElement {
}
.replay-bar {
padding: 0.5em 0em 0.5em 0.5em;
padding: 0.5em;
max-width: none;
border-bottom: solid 0.1rem #97989a;
width: 100%;
@@ -1110,13 +1105,101 @@ class Item extends LitElement {
</nav>`;
}
protected renderToolbarLeft() {
const isReplay = !!this.tabData.url;
return html` ${this.browsable
? html` <a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile ${!isReplay
? "grey-disabled"
: ""}"
@click="${this.onShowPages}"
@keyup="${clickOnSpacebarPress}"
?disabled="${!isReplay}"
title="Browse Contents"
aria-label="Browse Contents"
aria-controls="contents"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${farListAlt}"
></fa-icon>
</span>
</a>`
: ""}
<a
href="#"
role="button"
class="button narrow is-borderless"
@click="${this.onGoBack}"
@keyup="${clickOnSpacebarPress}"
title="Back"
aria-label="Back"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasLeft}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless"
@click="${this.onGoForward}"
@keyup="${clickOnSpacebarPress}"
title="Forward"
aria-label="Forward"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRight}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless ${this.isLoading
? "is-loading"
: ""}"
id="refresh"
@click="${this.onRefresh}"
@keyup="${clickOnSpacebarPress}"
title="Reload"
aria-label="Reload"
>
<span class="icon is-small">
${!this.isLoading
? html`
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRefresh}"
></fa-icon>
`
: ""}
</span>
</a>`;
}
renderLocationBar() {
if (this.embed === "replayonly" || this.embed == "replay-with-info") {
return "";
}
const dateStr = tsToDate(this.ts).toLocaleString();
const isReplay = !!this.tabData.url;
const showFavIcon = isReplay && this.favIconUrl;
@@ -1129,92 +1212,7 @@ class Item extends LitElement {
>
<nav class="replay-bar" aria-label="replay">
<div class="field has-addons">
${this.browsable
? html` <a
href="#"
role="button"
class="button narrow is-borderless is-hidden-mobile ${!isReplay
? "grey-disabled"
: ""}"
@click="${this.onShowPages}"
@keyup="${clickOnSpacebarPress}"
?disabled="${!isReplay}"
title="Browse Contents"
aria-label="Browse Contents"
aria-controls="contents"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${farListAlt}"
></fa-icon>
</span>
</a>`
: ""}
<a
href="#"
role="button"
class="button narrow is-borderless"
@click="${this.onGoBack}"
@keyup="${clickOnSpacebarPress}"
title="Back"
aria-label="Back"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasLeft}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless"
@click="${this.onGoForward}"
@keyup="${clickOnSpacebarPress}"
title="Forward"
aria-label="Forward"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRight}"
></fa-icon>
</span>
</a>
<a
href="#"
role="button"
class="button narrow is-borderless ${this.isLoading
? "is-loading"
: ""}"
id="refresh"
@click="${this.onRefresh}"
@keyup="${clickOnSpacebarPress}"
title="Reload"
aria-label="Reload"
>
<span class="icon is-small">
${!this.isLoading
? html`
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasRefresh}"
></fa-icon>
`
: ""}
</span>
</a>
${this.renderExtraToolbar()}
${this.renderToolbarLeft()}
<form @submit="${this.onSubmit}">
<div
class="control is-expanded ${showFavIcon ? "has-icons-left" : ""}"
@@ -1236,58 +1234,106 @@ class Item extends LitElement {
: html``}
</div>
</form>
${this.renderToolbarRight()}
</div>
</nav>
<p id="skip-replay-target" tabindex="-1" class="is-sr-only">Skipped</p>`;
}
<div
class="dropdown is-right ${this.menuActive ? "is-active" : ""}"
@click="${() => (this.menuActive = false)}"
protected renderToolbarRight() {
const isReplay = !!this.tabData.url;
const dateStr = tsToDate(this.ts).toLocaleString();
return html` <div
class="dropdown is-right ${this.menuActive ? "is-active" : ""}"
@click="${() => (this.menuActive = false)}"
>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-touch"
id="fullscreen"
@click="${this.onFullscreenToggle}"
@keyup="${clickOnSpacebarPress}"
title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
aria-label="${this.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
></fa-icon>
</span>
</a>
<div class="dropdown-trigger">
<button
class="button is-borderless"
aria-haspopup="true"
aria-controls="menu-dropdown"
aria-expanded="${this.menuActive}"
@click="${this.onMenu}"
aria-label="more replay controls"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasMenuV}"
></fa-icon>
</span>
</button>
</div>
<div class="dropdown-menu" id="menu-dropdown">
<div class="dropdown-content">
<a
href="#"
role="button"
class="dropdown-item is-hidden-desktop"
@click="${this.onFullscreenToggle}"
@keyup="${clickOnSpacebarPress}"
>
<a
href="#"
role="button"
class="button narrow is-borderless is-hidden-touch"
id="fullscreen"
@click="${this.onFullscreenToggle}"
@keyup="${clickOnSpacebarPress}"
title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
aria-label="${this.isFullscreen
? "Exit Fullscreen"
: "Fullscreen"}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
></fa-icon>
</span>
</a>
<div class="dropdown-trigger">
<button
class="button is-borderless"
aria-haspopup="true"
aria-controls="menu-dropdown"
aria-expanded="${this.menuActive}"
@click="${this.onMenu}"
aria-label="more replay controls"
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
></fa-icon>
</span>
<span>Full Screen</span>
</a>
${this.browsable
? html` <a
href="#"
role="button"
class="dropdown-item is-hidden-tablet ${!isReplay
? "grey-disabled"
: ""}"
@click="${this.onShowPages}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasMenuV}"
.svg="${farListAlt}"
></fa-icon>
</span>
</button>
</div>
<div class="dropdown-menu" id="menu-dropdown">
<div class="dropdown-content">
<span>Browse Contents</span>
</a>`
: ""}
${this.clearable
? html` <hr class="dropdown-divider is-hidden-desktop" />
<a
href="#"
role="button"
class="dropdown-item is-hidden-desktop"
@click="${this.onFullscreenToggle}"
class="dropdown-item"
@click="${this.onPurgeCache}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
@@ -1295,82 +1341,40 @@ class Item extends LitElement {
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${this.isFullscreen
? fasUnfullscreen
: fasFullscreen}"
.svg="${fasSync}"
></fa-icon>
</span>
<span>Full Screen</span>
</a>
${this.browsable
? html` <a
href="#"
role="button"
class="dropdown-item is-hidden-tablet ${!isReplay
? "grey-disabled"
: ""}"
@click="${this.onShowPages}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${farListAlt}"
></fa-icon>
</span>
<span>Browse Contents</span>
</a>`
: ""}
${this.renderExtraToolbar()}
${this.clearable
? html` <hr class="dropdown-divider is-hidden-desktop" />
<a
href="#"
role="button"
class="dropdown-item"
@click="${this.onPurgeCache}"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasSync}"
></fa-icon>
</span>
<span>Purge Cache + Full Reload</span>
</a>`
: html``}
${(!this.editable && this.sourceUrl?.startsWith("http://")) ||
this.sourceUrl?.startsWith("https://")
? html` <hr class="dropdown-divider" />
<a
href="${this.sourceUrl}"
role="button"
class="dropdown-item"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasDownload}"
></fa-icon>
</span>
<span>Download Archive</span>
</a>`
: html``}
${dateStr
? html` <hr class="dropdown-divider is-hidden-desktop" />
<div class="dropdown-item info is-hidden-tablet">
<span class="menu-head">Capture Date</span>${dateStr}
</div>`
: ""}
<span>Purge Cache + Full Reload</span>
</a>`
: html``}
${(!this.editable && this.sourceUrl?.startsWith("http://")) ||
this.sourceUrl?.startsWith("https://")
? html` <hr class="dropdown-divider" />
<a
href="${this.sourceUrl}"
role="button"
class="dropdown-item"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon
size="1.0em"
class="has-text-grey"
aria-hidden="true"
.svg="${fasDownload}"
></fa-icon>
</span>
<span>Download Archive</span>
</a>`
: html``}
${dateStr
? html` <hr class="dropdown-divider is-hidden-desktop" />
<div class="dropdown-item info is-hidden-tablet">
<span class="menu-head">Capture Date</span>${dateStr}
</div>`
: ""}
${!this.editable
? html` <a
href="#"
role="button"
class="dropdown-item"
@@ -1385,28 +1389,26 @@ class Item extends LitElement {
</span>
<span>Archive Info</span>
</a>
<hr class="dropdown-divider" />
<a
href="#"
role="button"
class="dropdown-item"
@click="${this.onAbout}"
>
<fa-icon
class="has-text-grey"
size="1.0rem"
aria-hidden="true"
.svg=${rwpIcon}
></fa-icon>
<span>&nbsp;About ${this.appName}</span>
<span class="menu-version">(${this.appVersion})</span>
</a>
</div>
</div>
</div>
<hr class="dropdown-divider" />`
: ``}
<a
href="#"
role="button"
class="dropdown-item"
@click="${this.onAbout}"
>
<fa-icon
class="has-text-grey"
size="1.0rem"
aria-hidden="true"
.svg=${rwpIcon}
></fa-icon>
<span>&nbsp;About ${this.appName}</span>
<span class="menu-version">(${this.appVersion})</span>
</a>
</div>
</nav>
<p id="skip-replay-target" tabindex="-1" class="is-sr-only">Skipped</p>`;
</div>
</div>`;
}
private renderTimestamp() {
@@ -1506,10 +1508,6 @@ class Item extends LitElement {
></wr-item-info>`;
}
protected renderExtraToolbar(/*isDropdown = false*/): "" | TemplateResult<1> {
return "";
}
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'isSidebar' implicitly has an 'any' type.
renderItemTabs(isSidebar) {
const isStory = this.hasStory && this.tabData.view === "story";
@@ -1650,6 +1648,9 @@ class Item extends LitElement {
this.showSidebar = false;
this.updateTabData({ url: "", ts: "" });
}
if (!this.browsable) {
this.showSidebar = false;
}
}
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type.
src/replay.ts
+15 -6
View File
@@ -55,12 +55,11 @@ class Replay extends LitElement {
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/promise-function-async
navigator.serviceWorker.addEventListener("message", (event) =>
this.handleAuthMessage(event),
this.handleSWMessage(event),
);
}
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type.
async handleAuthMessage(event) {
async handleSWMessage(event: MessageEvent) {
if (
event.data.type === "authneeded" &&
this.collInfo &&
@@ -90,6 +89,8 @@ class Replay extends LitElement {
} else {
this.showAuth = true;
}
} else if (event.data.type) {
window.parent.postMessage(event.data);
}
}
@@ -211,6 +212,10 @@ class Replay extends LitElement {
}
} else if (event.data.wb_type === "title") {
this.title = event.data.title;
} else {
const passEvent = { type: event.data.wb_type, ...event.data };
delete passEvent.wb_type;
window.parent.postMessage(passEvent);
}
}
}
@@ -272,9 +277,13 @@ class Replay extends LitElement {
}
if (iframeWin) {
iframeWin.addEventListener("beforeunload", () => {
this.setLoading();
});
try {
iframeWin.addEventListener("beforeunload", () => {
this.setLoading();
});
} catch (e) {
// ignore
}
}
}
src/swmanager.ts
+14 -39
View File
@@ -4,76 +4,60 @@ import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
// ===========================================================================
export class SWManager {
name: string;
scope: string;
appName: string;
requireSubdomainIframe: boolean;
errorMsg: string | null = null;
constructor({
name = "sw.js",
scope = "./",
appName = "ReplayWeb.page",
requireSubdomainIframe = false,
} = {}) {
// @ts-expect-error - TS2339 - Property 'name' does not exist on type 'SWManager'.
this.name = name;
// @ts-expect-error - TS2339 - Property 'scope' does not exist on type 'SWManager'.
this.scope = scope;
// @ts-expect-error - TS2339 - Property 'appName' does not exist on type 'SWManager'.
this.appName = appName;
// @ts-expect-error - TS2339 - Property 'requireSubdomainIframe' does not exist on type 'SWManager'.
this.requireSubdomainIframe = requireSubdomainIframe;
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
this.errorMsg = null;
}
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'newAppName' implicitly has an 'any' type.
setAppName(newAppName) {
// @ts-expect-error - TS2339 - Property 'appName' does not exist on type 'SWManager'.
setAppName(newAppName: string) {
this.appName = newAppName;
}
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/promise-function-async
register() {
async register(): Promise<void> {
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7034 - Variable 'resolve' implicitly has type 'any' in some locations where its type cannot be determined. | TS7034 - Variable 'reject' implicitly has type 'any' in some locations where its type cannot be determined.
let resolve, reject;
const p = new Promise((res, rej) => {
const p = new Promise<void>((res, rej) => {
resolve = res;
reject = rej;
});
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
this.errorMsg = this.getSWErrorMsg();
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
if (this.errorMsg) {
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
console.error(this.errorMsg);
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
reject(this.errorMsg);
reject!(this.errorMsg);
}
// @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'error' implicitly has an 'any' type.
const handleError = (error) => {
console.error("Error during service worker registration:", error);
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
this.errorMsg = this.getCrossOriginIframeMsg();
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
if (!this.errorMsg) {
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
this.errorMsg = `${
// @ts-expect-error - TS2339 - Property 'appName' does not exist on type 'SWManager'.
this.appName
} could not be loaded due to the following error:\n${error.toString()}`;
}
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
reject(this.errorMsg);
reject!(this.errorMsg);
};
// @ts-expect-error - TS2339 - Property 'scope' does not exist on type 'SWManager'. | TS2339 - Property 'name' does not exist on type 'SWManager'.
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
register(this.scope + this.name, {
// @ts-expect-error - TS2339 - Property 'scope' does not exist on type 'SWManager'.
registrationOptions: { scope: this.scope },
registered() {
console.log("Service worker is registered");
@@ -118,9 +102,7 @@ export class SWManager {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (navigator.serviceWorker) {
// must be loaded from a cross-origin (eg. subdomain)
// @ts-expect-error - TS2339 - Property 'requireSubdomainIframe' does not exist on type 'SWManager'.
if (this.requireSubdomainIframe && !this.isCrossOriginIframe()) {
// @ts-expect-error - TS2339 - Property 'appName' does not exist on type 'SWManager'.
return `Sorry, due to security settings, this ${this.appName} embed only be viewed within a subdomain iframe.`;
}
@@ -135,12 +117,7 @@ export class SWManager {
if (!window.isSecureContext) {
return `
Sorry, the ${
// @ts-expect-error - TS2339 - Property 'appName' does not exist on type 'SWManager'.
this.appName
} system must be loaded from an HTTPS URL (or localhost), but was loaded from: ${
window.location.host
}.
Sorry, the ${this.appName} system must be loaded from an HTTPS URL (or localhost), but was loaded from: ${window.location.host}.
Please try loading this page from an HTTPS URL`;
}
@@ -149,13 +126,11 @@ export class SWManager {
return "Sorry, Service Workers are disabled in Firefox in Private Mode. Please try loading this page in regular mode instead.";
}
// @ts-expect-error - TS2339 - Property 'appName' does not exist on type 'SWManager'.
return `Sorry, ${this.appName} won't work in this browser as Service Workers are not supported in this window.
Please try a different browser.`;
}
renderErrorReport(override?: string) {
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
renderErrorReport(override = "") {
const msg = this.errorMsg || override;
if (!msg) {
src/types.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export type URLResource = {
export type Page = URLResource;
export type ItemType = {
filename: string;
filename?: string;
sourceUrl: string;
replayPrefix: string;
apiPrefix: string;
tsconfig.eslint.json
+1 -1
View File
@@ -4,5 +4,5 @@
},
"extends": "./tsconfig.json",
"include": ["**/*.ts", "**/*.js", ".*.js"],
"exclude": ["__generated__", "__mocks__", "dist", "ruffle/*.js"]
"exclude": ["dist", "scratch"]
}
webpack.config.js
+95 -83
View File
@@ -94,6 +94,92 @@ const electronPreloadConfig = (/*env, argv*/) => {
return merge(tsConfig, config);
};
const libConfig = (env, argv) => {
/** @type {import('webpack').Configuration['entry']} */
const entry = {
index: "./src/index.ts",
};
const extraPlugins = [];
const patterns = [
{ from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js" },
];
extraPlugins.push(new CopyPlugin({ patterns }));
/** @type {import('webpack').Configuration} */
const config = {
target: "web",
mode: "production",
cache: {
type: "filesystem",
},
resolve: {
fallback: { crypto: false },
},
entry,
optimization,
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
globalObject: "self",
library: {
type: "module",
},
publicPath: "/",
},
experiments: {
outputModule: true,
},
devtool: argv.mode === "production" ? undefined : "source-map",
plugins: [
new webpack.NormalModuleReplacementPlugin(/^node:*/, (resource) => {
switch (resource.request) {
case "node:stream":
resource.request = "stream-browserify";
break;
}
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
__SW_NAME__: JSON.stringify("sw.js"),
__HELPER_PROXY__: JSON.stringify(HELPER_PROXY),
__GDRIVE_CLIENT_ID__: JSON.stringify(GDRIVE_CLIENT_ID),
__VERSION__: JSON.stringify(package_json.version),
}),
new webpack.BannerPlugin(BANNER_TEXT),
...extraPlugins,
],
module: {
rules: [
{
test: /\.svg$/,
use: ["raw-loader"],
},
{
test: /main.scss$/,
use: ["css-loader", "sass-loader"],
},
{
test: /wombat.js|wombatWorkers.js|index.html$/i,
use: ["raw-loader"],
},
],
},
};
return merge(tsConfig, config);
};
const browserConfig = (/*env, argv*/) => {
const isDevServer = process.env.WEBPACK_SERVE;
@@ -104,14 +190,14 @@ const browserConfig = (/*env, argv*/) => {
const extraPlugins = [];
if (isDevServer) {
entry["sw"] = "@webrecorder/wabac/src/sw.js";
} else {
const patterns = [
{ from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js" },
];
extraPlugins.push(new CopyPlugin({ patterns }));
}
//if (isDevServer) {
// entry["sw"] = "@webrecorder/wabac/src/sw.js";
//} else {
const patterns = [
{ from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js" },
];
extraPlugins.push(new CopyPlugin({ patterns }));
//}
/** @type {import('webpack').Configuration} */
const config = {
@@ -125,7 +211,6 @@ const browserConfig = (/*env, argv*/) => {
},
entry,
optimization,
output: {
path: path.join(__dirname),
filename: "[name].js",
@@ -133,7 +218,6 @@ const browserConfig = (/*env, argv*/) => {
globalObject: "self",
publicPath: "/",
},
devServer: {
compress: true,
port: 9990,
@@ -188,81 +272,9 @@ const browserConfig = (/*env, argv*/) => {
return merge(tsConfig, config);
};
const miscConfig = (/*env, argv*/) => {
/** @type {import('webpack').Configuration['entry']} */
const entry = {
misc: "./src/misc.ts",
};
/** @type {import('webpack').Configuration} */
const config = {
target: "web",
mode: "production",
cache: {
type: "filesystem"
},
resolve: {
fallback: { crypto: false },
},
entry,
optimization,
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
libraryTarget: "self",
globalObject: "self",
publicPath: "/",
},
plugins: [
new webpack.NormalModuleReplacementPlugin(/^node:*/, (resource) => {
switch (resource.request) {
case "node:stream":
resource.request = "stream-browserify";
break;
}
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
__SW_NAME__: JSON.stringify("sw.js"),
__HELPER_PROXY__: JSON.stringify(HELPER_PROXY),
__GDRIVE_CLIENT_ID__: JSON.stringify(GDRIVE_CLIENT_ID),
__VERSION__: JSON.stringify(package_json.version),
}),
new webpack.BannerPlugin(BANNER_TEXT),
],
module: {
rules: [
{
test: /\.svg$/,
use: ["raw-loader"],
},
{
test: /main.scss$/,
use: ["css-loader", "sass-loader"],
},
{
test: /wombat.js|wombatWorkers.js|index.html$/i,
use: ["raw-loader"],
},
],
},
};
return merge(tsConfig, config);
};
module.exports = [
libConfig,
browserConfig,
miscConfig,
electronMainConfig,
electronPreloadConfig,
];
yarn.lock
+12 -6
View File
@@ -613,6 +613,11 @@
dependencies:
"@types/node" "*"
"@types/js-levenshtein@^1.1.3":
version "1.1.3"
resolved "https://registry.yarnpkg.com/@types/js-levenshtein/-/js-levenshtein-1.1.3.tgz#a6fd0bdc8255b274e5438e0bfb25f154492d1106"
integrity sha512-jd+Q+sD20Qfu9e2aEXogiO3vpOC1PYJOUdyN9gvs4Qrvkg4wF43L5OhqrPeokdv8TL0/mXoYfpkcoGZMNN2pkQ==
"@types/json-schema@*", "@types/json-schema@^7.0.8":
version "7.0.9"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -1016,14 +1021,15 @@
resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
"@webrecorder/wabac@^2.19.9":
version "2.19.9"
resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.19.9.tgz#21d357077bc2a85419e7a6002c81a4bc4fec2514"
integrity sha512-lyvbKVrdUZMUGxwKg5ZFQnyjGUSqZSGOF3NFG9rXLA+Ni0YcQjZCMexGSmqCwY+BksyrVJISCMs3xQ2WQAekgw==
"@webrecorder/wabac@^2.20.0":
version "2.20.0"
resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.20.0.tgz#d9f87a909a0c09e460cf8b86082a71c176e0c9f8"
integrity sha512-zeR+CmAfJO2MQSKwRwcccy7+TfeKTX0A1yeHlO98mtsT3VMtTqrdasIDEjIxe39aEbBl11k+m8DQyrz3CctJNQ==
dependencies:
"@peculiar/asn1-ecc" "^2.3.4"
"@peculiar/asn1-schema" "^2.3.3"
"@peculiar/x509" "^1.9.2"
"@types/js-levenshtein" "^1.1.3"
"@webrecorder/wombat" "^3.8.2"
acorn "^8.10.0"
auto-js-ipfs "^2.1.1"
@@ -1043,7 +1049,7 @@
path-parser "^6.1.0"
process "^0.11.10"
stream-browserify "^3.0.0"
warcio "^2.3.0"
warcio "^2.3.1"
"@webrecorder/wombat@^3.8.2":
version "3.8.2"
@@ -5609,7 +5615,7 @@ vscode-uri@^2.1.2:
resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
warcio@^2.3.0, warcio@^2.3.1:
warcio@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/warcio/-/warcio-2.3.1.tgz#8ac9de897de1a556161168f2a3938b60929908ca"
integrity sha512-PjcWqzXfs6HdWfHi1V/i8MoMmV5M0Csg3rOa2mqCJ1dmCJXswVfQ0VXbEVumwavNIW2oFFj6LJoCHHeL4Ls/zw==