Skip to content

Commit 5f335bb

Browse files
leonvogtleonvogt
authored
Migrate from Shoelace to Web Awesome (#129)
1 parent e008c2c commit 5f335bb

File tree

15 files changed

+137
-127
lines changed

15 files changed

+137
-127
lines changed

‎build.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const esbuildConfig = {
6060
metafile: true,
6161
alias: {
6262
$src: path.resolve(__dirname, "src"),
63-
$shoelace: path.resolve(__dirname, "src/shoelace"),
63+
$uikit: path.resolve(__dirname, "src/uikit"),
6464
$components: path.resolve(__dirname, "src/components"),
6565
$utils: path.resolve(__dirname, "src/utils"),
6666
$lib: path.resolve(__dirname, "src/lib"),
@@ -92,18 +92,6 @@ const esbuildConfig = {
9292
],
9393
}
9494

95-
const copyAssets = async () => {
96-
// Copy default Shoelace icons
97-
await fs.copy("node_modules/@shoelace-style/shoelace/dist/assets", "public/dist/assets")
98-
99-
// Copy Font Awesome icons
100-
// Currently commented out, since we copy the necessary icons directly to public/icons folder.
101-
// That way we can copy specific icons from different sources and don't need to import a whole library.
102-
// await fs.copy("node_modules/@fortawesome/fontawesome-free/svgs/solid", "public/dist/assets/fontawesome/solid")
103-
// await fs.copy("node_modules/@fortawesome/fontawesome-free/svgs/regular", "public/dist/assets/fontawesome/regular")
104-
console.log("Copied assets")
105-
}
106-
10795
async function generateManifest() {
10896
try {
10997
const template = await fs.readFile(templatePath, "utf8")
@@ -122,7 +110,6 @@ const buildAndWatch = async () => {
122110

123111
async function buildProject() {
124112
await generateManifest()
125-
await copyAssets()
126113

127114
if (process.argv.includes("--watch")) {
128115
buildAndWatch()

‎jsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"baseUrl": ".",
44
"paths": {
55
"$src/*": ["src/*"],
6-
"$shoelace/*": ["src/shoelace/*"],
6+
"$uikit/*": ["src/uikit/*"],
77
"$components/*": ["src/components/*"],
88
"$utils/*": ["src/utils/*"],
99
"$lib/*": ["src/lib/*"]

‎package-lock.json‎

Lines changed: 49 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"format": "npx prettier --write ."
77
},
88
"dependencies": {
9+
"@awesome.me/webawesome": "^3.0.0-beta.4",
910
"@number-flow/svelte": "^0.3.9",
10-
"@shoelace-style/shoelace": "^2.20.1",
1111
"esbuild-svelte": "^0.9.3",
1212
"highlight.js": "^11.11.1",
1313
"svelte": "^5.33.18",

‎public/panel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html class="wa-theme-default wa-palette-default wa-brand-blue" lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

‎src/browser_panel/panel/App.svelte‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,5 @@
11
<script>
2-
import "@shoelace-style/shoelace/dist/themes/light.css"
3-
import "@shoelace-style/shoelace/dist/shoelace.js"
4-
5-
// Set Shoelace base path to point to the correct location of the Shoelace icons
6-
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js"
7-
setBasePath("/dist")
8-
9-
// Register our custom icons
10-
import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library.js"
11-
registerIconLibrary("custom", {
12-
resolver: (name) => {
13-
return `/icons/${name}.svg`
14-
},
15-
mutator: (svg) => svg.setAttribute("fill", "currentColor"),
16-
})
17-
2+
import "$uikit/webawesome.svelte.js"
183
import { getDevtoolInstance, setDevtoolInstance } from "$lib/devtool.js"
194
import { handleResize } from "../theme.svelte.js"
205
import { connection } from "../State.svelte.js"
@@ -55,16 +40,16 @@
5540
</script>
5641

5742
{#if connection.isPermanentlyDisconnected}
58-
<sl-alert variant="danger" class="m-5" open>
59-
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
43+
<wa-callout variant="danger" class="m-5">
44+
<wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
6045
<strong>Connection Timeout</strong><br />
6146
Unable to connect to the current page. Try closing and reopening the inspection panel to resolve the issue.
6247
<div class="mt-4">
6348
If this issue persists, consider reporting it on GitHub:
6449
<br />
6550
<a href="https://github.com/leonvogt/hotwire-dev-tools/issues/new" target="_blank" rel="noopener noreferrer">https://github.com/leonvogt/hotwire-dev-tools/issues/new</a>
6651
</div>
67-
</sl-alert>
52+
</wa-callout>
6853
{:else if devToolOptionsLoaded}
6954
<main {@attach addEventListeners}>
7055
<div id="container">
@@ -96,7 +81,7 @@
9681
<div class="h-100vh d-flex justify-content-center align-items-center flex-column gap-5">
9782
<div class="show-in-200ms">
9883
<div class="mb-2">Setting up Hotwire DevTool...</div>
99-
<sl-skeleton effect="sheen"></sl-skeleton>
84+
<p><wa-skeleton effect="sheen"></wa-skeleton></p>
10085
</div>
10186
<div class="show-in-1000ms text-align-center">
10287
<div class="mb-2">Hmm... this is taking a bit longer than expected.</div>
@@ -109,7 +94,7 @@
10994
<div>If there isn't something showing up, you can also try to inspect the extension itself by:</div>
11095
<br />
11196
<div>
112-
Opening the "Debug Add-ons" page in Firefox: <u>about:debugging#/runtime/this-firefox</u>
97+
Open the "Debug Add-ons" page in Firefox: <u>about:debugging#/runtime/this-firefox</u>
11398
</div>
11499
<div>Then clicking on the "Inspect" button next to the Hotwire DevTool. There you should see the console output.</div>
115100
{/if}

‎src/browser_panel/panel/tabs/LogsTab.svelte‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import { horizontalPanes } from "../../theme.svelte.js"
99
import { getDevtoolInstance } from "$lib/devtool.js"
1010
11-
import IconButton from "$shoelace/IconButton.svelte"
11+
import IconButton from "$uikit/IconButton.svelte"
1212
import CopyButton from "$components/CopyButton.svelte"
1313
import InspectButton from "$components/InspectButton.svelte"
1414
import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
@@ -115,31 +115,29 @@
115115
<div class="d-flex justify-content-center align-items-center position-relative">
116116
<h2>Events</h2>
117117
<div class="position-absolute end-0">
118-
<sl-dropdown stayOpenOnSelect={true} class="mb-2">
119-
<sl-button slot="trigger" caret>
120-
<sl-icon name="funnel"></sl-icon>
121-
</sl-button>
122-
<sl-menu>
123-
{#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
124-
<sl-menu-item role="button" tabindex="0" onkeyup={() => handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>
125-
<strong>{groupName}</strong>
126-
</sl-menu-item>
118+
<wa-dropdown class="mb-2">
119+
<wa-button slot="trigger" with-caret label="Filter Events">
120+
<wa-icon name="funnel"></wa-icon>
121+
</wa-button>
122+
{#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
123+
<wa-dropdown-item role="button" tabindex="0" onkeyup={() => handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>
124+
<strong>{groupName}</strong>
125+
</wa-dropdown-item>
127126

128-
{#each events as event}
129-
<sl-menu-item
130-
class="turbo-event-menu-item"
131-
type="checkbox"
132-
role="button"
133-
tabindex="0"
134-
onkeyup={(e) => handleFilterToggle(e)}
135-
onclick={(e) => handleFilterToggle(e)}
136-
value={event}
137-
checked={turboEventsFilter.includes(event)}>{event}</sl-menu-item
138-
>
139-
{/each}
127+
{#each events as event}
128+
<wa-dropdown-item
129+
class="turbo-event-menu-item"
130+
type="checkbox"
131+
role="button"
132+
tabindex="0"
133+
onkeyup={(e) => handleFilterToggle(e)}
134+
onclick={(e) => handleFilterToggle(e)}
135+
value={event}
136+
checked={turboEventsFilter.includes(event)}>{event}</wa-dropdown-item
137+
>
140138
{/each}
141-
</sl-menu>
142-
</sl-dropdown>
139+
{/each}
140+
</wa-dropdown>
143141
{#if turboEvents.length > 0}
144142
<IconButton name="trash2" onclick={clearTurboEvents}></IconButton>
145143
{/if}

‎src/browser_panel/panel/tabs/StimulusTab.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import CopyButton from "$components/CopyButton.svelte"
66
import InspectButton from "$components/InspectButton.svelte"
77
import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
8-
import IconButton from "$shoelace/IconButton.svelte"
8+
import IconButton from "$uikit/IconButton.svelte"
99
import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
1010
import { getStimulusData } from "../../State.svelte.js"
1111
import { flattenNodes, handleKeyboardNavigation } from "$utils/utils.js"

‎src/browser_panel/panel/tabs/TurboTab.svelte‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import CopyButton from "$components/CopyButton.svelte"
77
import InspectButton from "$components/InspectButton.svelte"
88
import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
9-
import IconButton from "$shoelace/IconButton.svelte"
9+
import IconButton from "$uikit/IconButton.svelte"
1010
import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
1111
import { getTurboFrames, getTurboCables, getTurboStreams, clearTurboStreams } from "../../State.svelte.js"
1212
import { debounce, handleKeyboardNavigation } from "$utils/utils.js"
@@ -198,12 +198,11 @@
198198
<h2>Streams</h2>
199199
<div class="position-absolute end-0">
200200
{#if turboStreams.length > 0}
201-
<IconButton name="trash2" onclick={clearTurboStreams}></IconButton>
201+
<IconButton name="trash" onclick={clearTurboStreams}></IconButton>
202202
{/if}
203203
{#if turboCables.length > 0}
204-
<sl-tooltip content={`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`}>
205-
<sl-icon name="circle-fill" class="turbo-cable-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></sl-icon>
206-
</sl-tooltip>
204+
<wa-tooltip for="turbo-cable-indication-icon">{`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`}</wa-tooltip>
205+
<wa-icon name="circle" id="turbo-cable-indication-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></wa-icon>
207206
{/if}
208207
</div>
209208
</div>
@@ -270,7 +269,7 @@
270269
</div>
271270
<div>
272271
{#if frame.attributes.busy !== undefined}
273-
<sl-spinner></sl-spinner>
272+
<wa-spinner></wa-spinner>
274273
{/if}
275274
<InspectButton class="btn-hoverable me-2" {selector}></InspectButton>
276275
</div>
@@ -291,9 +290,9 @@
291290
<div class="d-flex flex-column h-100">
292291
<div class="d-flex justify-content-center align-items-center position-relative">
293292
<h2>Frames</h2>
294-
<sl-badge class="count-badge count-badge--small position-absolute end-0" variant="neutral" pill>
293+
<wa-badge variant="neutral" style="font-size: var(--wa-font-size-xs);" class="position-absolute end-0" pill>
295294
<NumberFlow value={turboFrameCount()} animated={!isFirstFrameCountRender} />
296-
</sl-badge>
295+
</wa-badge>
297296
</div>
298297
<div class="scrollable-list" {@attach addTurboFrameListListeners}>
299298
{#if turboFrames.length > 0}
@@ -413,11 +412,11 @@
413412
</Splitpanes>
414413
415414
<style>
416-
.turbo-cable-icon {
417-
color: var(--sl-color-danger-500);
415+
#turbo-cable-indication-icon {
416+
color: var(--wa-color-danger-fill-loud);
418417
}
419-
.turbo-cable-icon.connected {
420-
color: var(--sl-color-success-500);
418+
#turbo-cable-indication-icon.connected {
419+
color: var(--wa-color-success-fill-loud);
421420
}
422421
423422
/* To prevent flickering when reloading async Turbo Frames */

0 commit comments

Comments
 (0)