From 3fb1079893fca0b4f7cb70aeee12f4bbfcfecf02 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Thu, 10 Oct 2024 22:19:18 -0700 Subject: [PATCH] ui: make left and right side of toolbar customizable webpack: build exportable lib in index.js, separate from ui.js bump to 2.2.0-beta.1 --- package.json | 4 +- src/item.ts | 471 +++++++++++++++++++++++----------------------- webpack.config.js | 232 ++++++++++++----------- 3 files changed, 361 insertions(+), 346 deletions(-) diff --git a/package.json b/package.json index 741c0643..e25e24ab 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "replaywebpage", "productName": "ReplayWeb.page", - "version": "2.2.0-beta.0", + "version": "2.2.0-beta.1", "description": "Serverless Web Archive Replay", "repository": "https://github.com/webrecorder/replayweb.page", "homepage": "https://replayweb.page/", @@ -10,7 +10,7 @@ "exports": { ".": { "types": "./dist/types/index.d.ts", - "default": "./ui.js" + "default": "./dist/index.js" }, "./src/electron-*": "./src/electron-*.ts", "./index.html": "./index.html" diff --git a/src/item.ts b/src/item.ts index f8d7ae7f..6832695e 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/webpack.config.js b/webpack.config.js index f2e15e5a..174a1e51 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -98,121 +98,135 @@ const electronPreloadConfig = (/*env, argv*/) => { return merge(tsConfig, config); }; -const browserConfig = (env, argv) => { - const isDevServer = process.env.WEBPACK_SERVE; - /** @type {import('webpack').Configuration['entry']} */ - const entry = { - ui: "./src/index.ts", - }; - - const extraPlugins = []; - - if (isDevServer) { - entry["sw"] = "./node_modules/@webrecorder/wabac/src/sw.ts"; - } 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 = { - target: "web", - mode: "production", - cache: { - type: isDevServer ? "memory" : "filesystem", - }, - resolve: { - fallback: { crypto: false }, - }, - entry, - optimization, +function makeBrowserConfig(isLib = false) { + return (env, argv) => { + let outputPath = ""; + const entry = {}; + if (isLib) { + entry["index"] = "./src/index.ts"; + outputPath = path.join(__dirname, "dist"); + } else { + entry["ui"] = "./src/index.ts"; + outputPath = path.join(__dirname) + } + + const extraPlugins = []; + const isDevServer = !isLib && process.env.WEBPACK_SERVE; + const isDevServerWabac = false; + + if (isDevServerWabac) { + entry["sw"] = "./node_modules/@webrecorder/wabac/src/sw.ts"; + } 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 = { + target: "web", + mode: "production", + cache: { + type: isDevServer ? "memory" : "filesystem", + }, + resolve: { + fallback: { crypto: false }, + }, + entry, + optimization, + + output: { + path: outputPath, + filename: "[name].js", + globalObject: "self", + publicPath: "/", + }, + + 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, + ], - output: { - path: path.join(__dirname), - filename: "[name].js", - globalObject: "self", - publicPath: "/", - library: { + 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"], + }, + ], + }, + } + + if (isLib) { + config.experiments = { + outputModule: true + }; + config.output.library = { type: "module" - } - }, - - experiments: { - outputModule: true - }, - - devtool: argv.mode === "production" ? undefined : "source-map", - - devServer: { - compress: true, - port: 9990, - open: false, - static: __dirname, - //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), - ...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"], - }, - ], - }, - }; - if (!isDevServer) { - return merge(tsConfig, config); - } else { - return merge( - makeTsConfig([ - path.resolve(__dirname, "src"), - path.resolve(__dirname, "./node_modules/@webrecorder/wabac/src/"), - path.resolve(__dirname, "../wabac.js/src"), - ]), - config, - ); + }; + } else { + config.output.libraryTarget = "self"; + + config.devServer = { + compress: true, + port: 9990, + open: false, + static: __dirname, + //publicPath: "/" + }; + } + + if (!isDevServerWabac) { + return merge(tsConfig, config); + } else { + return merge( + makeTsConfig([ + path.resolve(__dirname, "src"), + path.resolve(__dirname, "./node_modules/@webrecorder/wabac/src/"), + path.resolve(__dirname, "../wabac.js/src"), + ]), + config, + ); + } } -}; +} module.exports = [ - browserConfig, + makeBrowserConfig(false), + makeBrowserConfig(true), electronMainConfig, electronPreloadConfig, ];