Use types from ReplayWebPage (#2265)

- Updates [moduleResolution](https://www.typescriptlang.org/tsconfig/#moduleResolution) to `bundler`, like RWP and most other bundled packages - Adds `replaywebpage` as a dependency - Fixes issues from changing moduleResolution (mostly just file extension updates for shoelace components) Resolves the issue initially reported in webrecorder/replayweb.page#376
webrecorder · Dec 23, 2024 · cf1d97a · cf1d97a
1 parent 5898196
commit cf1d97a
Show file tree

Hide file tree

Showing 12 changed files with 576 additions and 55 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,6 +72,7 @@
     "pretty-ms": "^7.0.1",
     "query-string": "^8.1.0",
     "regex-colorize": "^0.0.3",
+    "replaywebpage": "^2.2.4",
     "slugify": "^1.6.6",
     "style-loader": "^3.3.0",
     "tailwindcss": "^3.4.1",

diff --git a/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts b/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts
@@ -1,5 +1,5 @@
 import { localized, msg, str } from "@lit/localize";
-import clsx from "clsx";
+import clsx, { type ClassValue } from "clsx";
 import { html, nothing, type PropertyValues, type TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -724,7 +724,7 @@ export class ArchivedItemDetail extends BtrixElement {
   private renderPanel(
     heading: string | TemplateResult,
     content: TemplateResult | undefined,
-    classes: clsx.ClassValue[] = [],
+    classes: ClassValue[] = [],
   ) {
     const headingIsTitle = typeof heading === "string";
     return html`

diff --git a/frontend/src/pages/org/archived-item-qa/ui/spinner.ts b/frontend/src/pages/org/archived-item-qa/ui/spinner.ts
@@ -1,7 +1,7 @@
-import clsx from "clsx";
+import clsx, { type ClassValue } from "clsx";
 import { html } from "lit";
 
-export function renderSpinner(className?: clsx.ClassValue) {
+export function renderSpinner(className?: ClassValue) {
   return html`<div
     class=${clsx(
       "flex h-full w-full items-center justify-center p-9 text-2xl",

diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts
@@ -610,18 +610,28 @@ export class CrawlsList extends BtrixElement {
               <sl-icon name="arrow-return-right" slot="prefix"></sl-icon>
               ${msg("Go to Workflow")}
             </sl-menu-item>
-            <sl-menu-item @click=${() => CopyButton.copyToClipboard(item.cid)}>
+            <sl-menu-item
+              @click=${() => {
+                CopyButton.copyToClipboard(item.cid);
+              }}
+            >
               <sl-icon name="copy" slot="prefix"></sl-icon>
               ${msg("Copy Workflow ID")}
             </sl-menu-item>
-            <sl-menu-item @click=${() => CopyButton.copyToClipboard(item.id)}>
+            <sl-menu-item
+              @click=${() => {
+                CopyButton.copyToClipboard(item.id);
+              }}
+            >
               <sl-icon name="copy" slot="prefix"></sl-icon>
               ${msg("Copy Crawl ID")}
             </sl-menu-item>
           `
         : nothing}
       <sl-menu-item
-        @click=${() => CopyButton.copyToClipboard(item.tags.join(", "))}
+        @click=${() => {
+          CopyButton.copyToClipboard(item.tags.join(", "));
+        }}
         ?disabled=${!item.tags.length}
       >
         <sl-icon name="tags" slot="prefix"></sl-icon>

diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
@@ -7,6 +7,7 @@ import { guard } from "lit/directives/guard.js";
 import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 import queryString from "query-string";
+import type { Embed as ReplayWebPage } from "replaywebpage";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { PageChangeEvent } from "@/components/ui/pagination";

diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
@@ -720,7 +720,9 @@ export class WorkflowDetail extends BtrixElement {
             ${msg("Edit Workflow Settings")}
           </sl-menu-item>
           <sl-menu-item
-            @click=${() => CopyButton.copyToClipboard(workflow.tags.join(", "))}
+            @click=${() => {
+              CopyButton.copyToClipboard(workflow.tags.join(", "));
+            }}
             ?disabled=${!workflow.tags.length}
           >
             <sl-icon name="tags" slot="prefix"></sl-icon>

diff --git a/frontend/src/pages/org/workflows-list.ts b/frontend/src/pages/org/workflows-list.ts
@@ -482,10 +482,7 @@ export class WorkflowsList extends BtrixElement {
   }
 
   private readonly renderWorkflowItem = (workflow: ListWorkflow) => html`
-    <btrix-workflow-list-item
-      orgSlug=${this.appState.orgSlug || ""}
-      .workflow=${workflow}
-    >
+    <btrix-workflow-list-item .workflow=${workflow}>
       <sl-menu slot="menu">${this.renderMenuItems(workflow)}</sl-menu>
     </btrix-workflow-list-item>
   `;
@@ -577,7 +574,9 @@ export class WorkflowsList extends BtrixElement {
             </sl-menu-item>`,
       )}
       <sl-menu-item
-        @click=${() => CopyButton.copyToClipboard(workflow.tags.join(", "))}
+        @click=${() => {
+          CopyButton.copyToClipboard(workflow.tags.join(", "));
+        }}
         ?disabled=${!workflow.tags.length}
       >
         <sl-icon name="tags" slot="prefix"></sl-icon>

diff --git a/frontend/src/replayWebPage.d.ts b/frontend/src/replayWebPage.d.ts
@@ -1,17 +1,4 @@
-/**
- * @TODO Import from replaywebpage once https://github.com/webrecorder/replayweb.page/issues/376 is addressed
- *
- * @attr {String} source
- * @attr {String} coll
- * @attr {String} config
- * @attr {String} replayBase
- * @attr {String} noSandbox
- * @attr {String} noCache
- * @attr {String} url
- */
-class ReplayWebPage {
-  fullReload(): void {}
-}
+import type { Embed as ReplayWebPage } from "replaywebpage";
 
 declare global {
   interface HTMLElementTagNameMap {

diff --git a/frontend/src/shoelace.ts b/frontend/src/shoelace.ts
@@ -31,55 +31,55 @@ import "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring";
 import "@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden";
 
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/dialog/dialog"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/dialog/dialog.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/divider/divider"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/divider/divider.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu/menu"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu/menu.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-item/menu-item"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-label/menu-label"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-label/menu-label.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/relative-time/relative-time"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/relative-time/relative-time.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/skeleton/skeleton"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/spinner/spinner"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/spinner/spinner.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab/tab"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab/tab.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-group/tab-group"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tooltip/tooltip"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/popup/popup"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/popup/popup.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree/tree"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree/tree.js"
 );
 import(
-  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree-item/tree-item"
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree-item/tree-item.js"
 );
 
 setBasePath("/shoelace");

diff --git a/frontend/src/utils/notify.ts b/frontend/src/utils/notify.ts
@@ -1,4 +1,4 @@
-import type SlAlert from "@shoelace-style/shoelace/dist/components/alert/alert";
+import type SlAlert from "@shoelace-style/shoelace/dist/components/alert/alert.js";
 import { html, render } from "lit";
 
 import { type NotifyEventDetail } from "@/controllers/notify";

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -3,7 +3,7 @@
     "outDir": "./dist/",
     "module": "esnext",
     "target": "es6",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowJs": true,
     "strict": true,
     "noImplicitAny": true,