tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Prevent ReplayWeb.Page shoelace components from impacting browsertrix (#1861)

Browse Source 
Resolves https://github.com/webrecorder/browsertrix/issues/1836
Related to https://github.com/webrecorder/replayweb.page/pull/329

<!-- Fixes #issue_number -->

### Changes

Loads `replay/ui.js` after the browsertrix-app component is defined to
prevent browsertrix from using buttons defined by replayweb.page
shoelace imports. This was the most evident in button group styles not
being applied.
This commit is contained in:
sua yoo 2024-06-12 11:20:49 -05:00 committed by GitHub
parent 3de2e486b1
commit 9d69001c23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -10,7 +10,7 @@
"@lit/task": "^1.0.0", "@lit/task": "^1.0.0",
"@novnc/novnc": "^1.4.0-beta", "@novnc/novnc": "^1.4.0-beta",
"@rollup/plugin-commonjs": "^18.0.0", "@rollup/plugin-commonjs": "^18.0.0",
"@shoelace-style/shoelace": "~2.15.0", "@shoelace-style/shoelace": "~2.15.1",
"@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/container-queries": "^0.1.1",
"@types/color": "^3.0.2", "@types/color": "^3.0.2",
"@types/diff": "^5.0.9", "@types/diff": "^5.0.9",

11
frontend/src/index.ejs
View File

@ -8,7 +8,7 @@
/> />
<title>Browsertrix</title> <title>Browsertrix</title>
<base href="/" /> <base href="/" />
<script defer src="/replay/ui.js"></script>
<script <script
src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js" src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js"
crossorigin="anonymous" crossorigin="anonymous"
@ -38,5 +38,14 @@
}); });
} }
</script> </script>
<script>
customElements.whenDefined("browsertrix-app").then(() => {
// Load replay UI after browsertrix app is defined to prevent issues
// with re-defining shoelace components
const script = document.createElement("script");
script.src = "/replay/ui.js";
document.body.appendChild(script);
});
</script>
</body> </body>
</html> </html>

8
frontend/yarn.lock
View File

@ -1135,10 +1135,10 @@
resolved "https://registry.yarnpkg.com/@shoelace-style/localize/-/localize-3.1.2.tgz#2c63f16d8aa80842dbe5127845c76ed53f6a5e8e" resolved "https://registry.yarnpkg.com/@shoelace-style/localize/-/localize-3.1.2.tgz#2c63f16d8aa80842dbe5127845c76ed53f6a5e8e"
integrity sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q== integrity sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q==
"@shoelace-style/shoelace@~2.15.0": "@shoelace-style/shoelace@~2.15.1":
version "2.15.0" version "2.15.1"
resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.15.0.tgz#3410d6bb50811fad001b2c2fbd455cb60d6341a9" resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.15.1.tgz#2fa6bd8e493801f5b5b4744fab0fa108bbc01934"
integrity sha512-Lcg938Y8U2VsHqIYewzlt+H1rbrXC4GRSUkTJgXyF8/0YAOlI+srd5OSfIw+/LYmwLP2Peyh398Kae/6tg4PDA== integrity sha512-3ecUw8gRwOtcZQ8kWWkjk4FTfObYQ/XIl3aRhxprESoOYV1cYhloYPsmQY38UoL3+pwJiZb5+LzX0l3u3Zl0GA==
dependencies: dependencies:
"@ctrl/tinycolor" "^4.0.2" "@ctrl/tinycolor" "^4.0.2"
"@floating-ui/dom" "^1.5.3" "@floating-ui/dom" "^1.5.3"