Skip to content

Commit cf1d97a

Browse files
emma-sgemma-sg
authored
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
1 parent 5898196 commit cf1d97a

File tree

12 files changed

+576
-55
lines changed

12 files changed

+576
-55
lines changed

‎frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"pretty-ms": "^7.0.1",
7373
"query-string": "^8.1.0",
7474
"regex-colorize": "^0.0.3",
75+
"replaywebpage": "^2.2.4",
7576
"slugify": "^1.6.6",
7677
"style-loader": "^3.3.0",
7778
"tailwindcss": "^3.4.1",

‎frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { localized, msg, str } from "@lit/localize";
2-
import clsx from "clsx";
2+
import clsx, { type ClassValue } from "clsx";
33
import { html, nothing, type PropertyValues, type TemplateResult } from "lit";
44
import { customElement, property, query, state } from "lit/decorators.js";
55
import { ifDefined } from "lit/directives/if-defined.js";
@@ -724,7 +724,7 @@ export class ArchivedItemDetail extends BtrixElement {
724724
private renderPanel(
725725
heading: string | TemplateResult,
726726
content: TemplateResult | undefined,
727-
classes: clsx.ClassValue[] = [],
727+
classes: ClassValue[] = [],
728728
) {
729729
const headingIsTitle = typeof heading === "string";
730730
return html`

‎frontend/src/pages/org/archived-item-qa/ui/spinner.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import clsx from "clsx";
1+
import clsx, { type ClassValue } from "clsx";
22
import { html } from "lit";
33

4-
export function renderSpinner(className?: clsx.ClassValue) {
4+
export function renderSpinner(className?: ClassValue) {
55
return html`<div
66
class=${clsx(
77
"flex h-full w-full items-center justify-center p-9 text-2xl",

‎frontend/src/pages/org/archived-items.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -610,18 +610,28 @@ export class CrawlsList extends BtrixElement {
610610
<sl-icon name="arrow-return-right" slot="prefix"></sl-icon>
611611
${msg("Go to Workflow")}
612612
</sl-menu-item>
613-
<sl-menu-item @click=${() => CopyButton.copyToClipboard(item.cid)}>
613+
<sl-menu-item
614+
@click=${() => {
615+
CopyButton.copyToClipboard(item.cid);
616+
}}
617+
>
614618
<sl-icon name="copy" slot="prefix"></sl-icon>
615619
${msg("Copy Workflow ID")}
616620
</sl-menu-item>
617-
<sl-menu-item @click=${() => CopyButton.copyToClipboard(item.id)}>
621+
<sl-menu-item
622+
@click=${() => {
623+
CopyButton.copyToClipboard(item.id);
624+
}}
625+
>
618626
<sl-icon name="copy" slot="prefix"></sl-icon>
619627
${msg("Copy Crawl ID")}
620628
</sl-menu-item>
621629
`
622630
: nothing}
623631
<sl-menu-item
624-
@click=${() => CopyButton.copyToClipboard(item.tags.join(", "))}
632+
@click=${() => {
633+
CopyButton.copyToClipboard(item.tags.join(", "));
634+
}}
625635
?disabled=${!item.tags.length}
626636
>
627637
<sl-icon name="tags" slot="prefix"></sl-icon>

‎frontend/src/pages/org/collection-detail.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { guard } from "lit/directives/guard.js";
77
import { repeat } from "lit/directives/repeat.js";
88
import { when } from "lit/directives/when.js";
99
import queryString from "query-string";
10+
import type { Embed as ReplayWebPage } from "replaywebpage";
1011

1112
import { BtrixElement } from "@/classes/BtrixElement";
1213
import type { PageChangeEvent } from "@/components/ui/pagination";

‎frontend/src/pages/org/workflow-detail.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -720,7 +720,9 @@ export class WorkflowDetail extends BtrixElement {
720720
${msg("Edit Workflow Settings")}
721721
</sl-menu-item>
722722
<sl-menu-item
723-
@click=${() => CopyButton.copyToClipboard(workflow.tags.join(", "))}
723+
@click=${() => {
724+
CopyButton.copyToClipboard(workflow.tags.join(", "));
725+
}}
724726
?disabled=${!workflow.tags.length}
725727
>
726728
<sl-icon name="tags" slot="prefix"></sl-icon>

‎frontend/src/pages/org/workflows-list.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -482,10 +482,7 @@ export class WorkflowsList extends BtrixElement {
482482
}
483483

484484
private readonly renderWorkflowItem = (workflow: ListWorkflow) => html`
485-
<btrix-workflow-list-item
486-
orgSlug=${this.appState.orgSlug || ""}
487-
.workflow=${workflow}
488-
>
485+
<btrix-workflow-list-item .workflow=${workflow}>
489486
<sl-menu slot="menu">${this.renderMenuItems(workflow)}</sl-menu>
490487
</btrix-workflow-list-item>
491488
`;
@@ -577,7 +574,9 @@ export class WorkflowsList extends BtrixElement {
577574
</sl-menu-item>`,
578575
)}
579576
<sl-menu-item
580-
@click=${() => CopyButton.copyToClipboard(workflow.tags.join(", "))}
577+
@click=${() => {
578+
CopyButton.copyToClipboard(workflow.tags.join(", "));
579+
}}
581580
?disabled=${!workflow.tags.length}
582581
>
583582
<sl-icon name="tags" slot="prefix"></sl-icon>

‎frontend/src/replayWebPage.d.ts

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,4 @@
1-
/**
2-
* @TODO Import from replaywebpage once https://github.com/webrecorder/replayweb.page/issues/376 is addressed
3-
*
4-
* @attr {String} source
5-
* @attr {String} coll
6-
* @attr {String} config
7-
* @attr {String} replayBase
8-
* @attr {String} noSandbox
9-
* @attr {String} noCache
10-
* @attr {String} url
11-
*/
12-
class ReplayWebPage {
13-
fullReload(): void {}
14-
}
1+
import type { Embed as ReplayWebPage } from "replaywebpage";
152

163
declare global {
174
interface HTMLElementTagNameMap {

‎frontend/src/shoelace.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,55 +31,55 @@ import "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring";
3131
import "@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden";
3232

3333
import(
34-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb"
34+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.js"
3535
);
3636
import(
37-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item"
37+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.js"
3838
);
3939
import(
40-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/dialog/dialog"
40+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/dialog/dialog.js"
4141
);
4242
import(
43-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/divider/divider"
43+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/divider/divider.js"
4444
);
4545
import(
46-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu/menu"
46+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu/menu.js"
4747
);
4848
import(
49-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-item/menu-item"
49+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js"
5050
);
5151
import(
52-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-label/menu-label"
52+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/menu-label/menu-label.js"
5353
);
5454
import(
55-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/relative-time/relative-time"
55+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/relative-time/relative-time.js"
5656
);
5757
import(
58-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/skeleton/skeleton"
58+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js"
5959
);
6060
import(
61-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/spinner/spinner"
61+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/spinner/spinner.js"
6262
);
6363
import(
64-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab/tab"
64+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab/tab.js"
6565
);
6666
import(
67-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-group/tab-group"
67+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js"
6868
);
6969
import(
70-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel"
70+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js"
7171
);
7272
import(
73-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tooltip/tooltip"
73+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js"
7474
);
7575
import(
76-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/popup/popup"
76+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/popup/popup.js"
7777
);
7878
import(
79-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree/tree"
79+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree/tree.js"
8080
);
8181
import(
82-
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree-item/tree-item"
82+
/* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree-item/tree-item.js"
8383
);
8484

8585
setBasePath("/shoelace");

‎frontend/src/utils/notify.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type SlAlert from "@shoelace-style/shoelace/dist/components/alert/alert";
1+
import type SlAlert from "@shoelace-style/shoelace/dist/components/alert/alert.js";
22
import { html, render } from "lit";
33

44
import { type NotifyEventDetail } from "@/controllers/notify";

‎frontend/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"outDir": "./dist/",
44
"module": "esnext",
55
"target": "es6",
6-
"moduleResolution": "node",
6+
"moduleResolution": "bundler",
77
"allowJs": true,
88
"strict": true,
99
"noImplicitAny": true,

0 commit comments

Comments
 (0)