From 95c9be6c5beea82a87c61e00152f9428d5e218c3 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Wed, 16 Oct 2024 20:22:11 -0700 Subject: [PATCH] Support for import as module, wabac.js 2.20 (#364) - 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 --- CHANGES.md | 16 +- README.md | 1 - package.json | 13 +- scripts/build-if-not-git-repo.js | 2 +- src/appmain.ts | 2 +- src/chooser.ts | 12 +- src/electron-preload.ts | 12 +- src/electron-replay-app.ts | 12 +- src/embed.ts | 5 +- src/index.ts | 4 + src/item-index.ts | 8 +- src/item.ts | 471 ++++++++++++++++--------------- src/replay.ts | 21 +- src/swmanager.ts | 53 +--- src/types.ts | 2 +- tsconfig.eslint.json | 2 +- webpack.config.js | 178 ++++++------ yarn.lock | 18 +- 18 files changed, 430 insertions(+), 402 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 8095230..9c85929 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/README.md b/README.md index 634d9d5..c2ad33d 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/package.json b/package.json index f6318c0..4a5873d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/build-if-not-git-repo.js b/scripts/build-if-not-git-repo.js index b54bd04..016c81e 100644 --- a/scripts/build-if-not-git-repo.js +++ b/scripts/build-if-not-git-repo.js @@ -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) { diff --git a/src/appmain.ts b/src/appmain.ts index 8cf26f2..4e642c2 100644 --- a/src/appmain.ts +++ b/src/appmain.ts @@ -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; diff --git a/src/chooser.ts b/src/chooser.ts index 61818dc..de65aaf 100644 --- a/src/chooser.ts +++ b/src/chooser.ts @@ -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); } diff --git a/src/electron-preload.ts b/src/electron-preload.ts index 5c79437..b1329e4 100644 --- a/src/electron-preload.ts +++ b/src/electron-preload.ts @@ -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 = {}; diff --git a/src/electron-replay-app.ts b/src/electron-replay-app.ts index 81a5b43..2ee1978 100644 --- a/src/electron-replay-app.ts +++ b/src/electron-replay-app.ts @@ -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); } diff --git a/src/embed.ts b/src/embed.ts index b255e97..44c41db 100644 --- a/src/embed.ts +++ b/src/embed.ts @@ -85,7 +85,7 @@ class Embed extends LitElement { replayfile = defaultReplayFile; mainElementName = "replay-app-main"; appName = "ReplayWeb.page"; - customConfig = null; + customConfig: Record | 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 { diff --git a/src/index.ts b/src/index.ts index 2995a80..2557b56 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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"; diff --git a/src/item-index.ts b/src/item-index.ts index 77050b6..216546a 100644 --- a/src/item-index.ts +++ b/src/item-index.ts @@ -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 to save pages as you browse the web, or - sign up for Browsertrix to archive - entire websites with automated crawling! + sign up for Browsertrix + to archive entire websites with automated crawling!

`; } diff --git a/src/item.ts b/src/item.ts index 2184504..6832695 100644 --- a/src/item.ts +++ b/src/item.ts @@ -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 { `; } + protected renderToolbarLeft() { + const isReplay = !!this.tabData.url; + + return html` ${this.browsable + ? html` + + + + ` + : ""} + + + + + + + + + + + + + ${!this.isLoading + ? html` + + ` + : ""} + + `; + } + 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 { > +

Skipped

`; + } -
+ + + + + +
+ +
+ - -

Skipped

`; +
+ `; } private renderTimestamp() { @@ -1506,10 +1508,6 @@ class Item extends LitElement { >`; } - 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. diff --git a/src/replay.ts b/src/replay.ts index 08dbd05..ab905a2 100644 --- a/src/replay.ts +++ b/src/replay.ts @@ -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 + } } } diff --git a/src/swmanager.ts b/src/swmanager.ts index 935fbf6..20767b4 100644 --- a/src/swmanager.ts +++ b/src/swmanager.ts @@ -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 { // @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((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) { diff --git a/src/types.ts b/src/types.ts index b6e2e33..91d0770 100644 --- a/src/types.ts +++ b/src/types.ts @@ -16,7 +16,7 @@ export type URLResource = { export type Page = URLResource; export type ItemType = { - filename: string; + filename?: string; sourceUrl: string; replayPrefix: string; apiPrefix: string; diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index 1f6e146..82b141e 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -4,5 +4,5 @@ }, "extends": "./tsconfig.json", "include": ["**/*.ts", "**/*.js", ".*.js"], - "exclude": ["__generated__", "__mocks__", "dist", "ruffle/*.js"] + "exclude": ["dist", "scratch"] } diff --git a/webpack.config.js b/webpack.config.js index 54a3943..e3494e9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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, ]; diff --git a/yarn.lock b/yarn.lock index 4bae98b..acaf9c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==