diff --git a/build.js b/build.js index 23c8d21..c38f8a8 100644 --- a/build.js +++ b/build.js @@ -60,7 +60,7 @@ const esbuildConfig = { metafile: true, alias: { $src: path.resolve(__dirname, "src"), - $shoelace: path.resolve(__dirname, "src/shoelace"), + $uikit: path.resolve(__dirname, "src/uikit"), $components: path.resolve(__dirname, "src/components"), $utils: path.resolve(__dirname, "src/utils"), $lib: path.resolve(__dirname, "src/lib"), @@ -92,18 +92,6 @@ const esbuildConfig = { ], } -const copyAssets = async () => { - // Copy default Shoelace icons - await fs.copy("node_modules/@shoelace-style/shoelace/dist/assets", "public/dist/assets") - - // Copy Font Awesome icons - // Currently commented out, since we copy the necessary icons directly to public/icons folder. - // That way we can copy specific icons from different sources and don't need to import a whole library. - // await fs.copy("node_modules/@fortawesome/fontawesome-free/svgs/solid", "public/dist/assets/fontawesome/solid") - // await fs.copy("node_modules/@fortawesome/fontawesome-free/svgs/regular", "public/dist/assets/fontawesome/regular") - console.log("Copied assets") -} - async function generateManifest() { try { const template = await fs.readFile(templatePath, "utf8") @@ -122,7 +110,6 @@ const buildAndWatch = async () => { async function buildProject() { await generateManifest() - await copyAssets() if (process.argv.includes("--watch")) { buildAndWatch() diff --git a/jsconfig.json b/jsconfig.json index 1caf39a..84a6a04 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -3,7 +3,7 @@ "baseUrl": ".", "paths": { "$src/*": ["src/*"], - "$shoelace/*": ["src/shoelace/*"], + "$uikit/*": ["src/uikit/*"], "$components/*": ["src/components/*"], "$utils/*": ["src/utils/*"], "$lib/*": ["src/lib/*"] diff --git a/package-lock.json b/package-lock.json index c862e82..08edba8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,8 +5,8 @@ "packages": { "": { "dependencies": { + "@awesome.me/webawesome": "^3.0.0-beta.4", "@number-flow/svelte": "^0.3.9", - "@shoelace-style/shoelace": "^2.20.1", "esbuild-svelte": "^0.9.3", "highlight.js": "^11.11.1", "svelte": "^5.33.18", @@ -31,6 +31,27 @@ "node": ">=6.0.0" } }, + "node_modules/@awesome.me/webawesome": { + "version": "3.0.0-beta.4", + "resolved": "https://registry.npmjs.org/@awesome.me/webawesome/-/webawesome-3.0.0-beta.4.tgz", + "integrity": "sha512-CTqy016SZQvGsyYTeQCE6t4JrnL26bugaNXkY1y+nXHfVtcxS+gXze36Y89t82Z2MJ8d30IZHdoTq1Ac2jOZYw==", + "license": "MIT", + "dependencies": { + "@ctrl/tinycolor": "^4.1.0", + "@floating-ui/dom": "^1.6.13", + "@lit/react": "^1.0.8", + "@shoelace-style/animations": "^1.2.0", + "@shoelace-style/localize": "^3.2.1", + "composed-offset-position": "^0.0.6", + "lit": "^3.2.1", + "nanoid": "^5.1.5", + "qr-creator": "^1.0.0", + "style-observer": "^0.0.7" + }, + "engines": { + "node": ">=14.17.0" + } + }, "node_modules/@ctrl/tinycolor": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz", @@ -515,9 +536,9 @@ "license": "BSD-3-Clause" }, "node_modules/@lit/react": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.7.tgz", - "integrity": "sha512-cencnwwLXQKiKxjfFzSgZRngcWJzUDZi/04E0fSaF86wZgchMdvTyu+lE36DrUfvuus3bH8+xLPrhM1cTjwpzw==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz", + "integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==", "license": "BSD-3-Clause", "peerDependencies": { "@types/react": "17 || 18 || 19" @@ -561,29 +582,6 @@ "integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA==", "license": "MIT" }, - "node_modules/@shoelace-style/shoelace": { - "version": "2.20.1", - "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.20.1.tgz", - "integrity": "sha512-FSghU95jZPGbwr/mybVvk66qRZYpx5FkXL+vLNpy1Vp8UsdwSxXjIHE3fsvMbKWTKi9UFfewHTkc5e7jAqRYoQ==", - "license": "MIT", - "dependencies": { - "@ctrl/tinycolor": "^4.1.0", - "@floating-ui/dom": "^1.6.12", - "@lit/react": "^1.0.6", - "@shoelace-style/animations": "^1.2.0", - "@shoelace-style/localize": "^3.2.1", - "composed-offset-position": "^0.0.6", - "lit": "^3.2.1", - "qr-creator": "^1.0.0" - }, - "engines": { - "node": ">=14.17.0" - }, - "funding": { - "type": "individual", - "url": "https://github.com/sponsors/claviska" - } - }, "node_modules/@sveltejs/acorn-typescript": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz", @@ -842,6 +840,24 @@ "mustache": "bin/mustache" } }, + "node_modules/nanoid": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz", + "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.js" + }, + "engines": { + "node": "^18 || >=20" + } + }, "node_modules/number-flow": { "version": "0.5.8", "resolved": "https://registry.npmjs.org/number-flow/-/number-flow-0.5.8.tgz", @@ -872,6 +888,12 @@ "integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==", "license": "MIT" }, + "node_modules/style-observer": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/style-observer/-/style-observer-0.0.7.tgz", + "integrity": "sha512-t75H3CRy+vd5q3yqyrf/De4tkz33hPQTiCcfh0NTesI5G7kJnZ227LEYTwqjKTtaFOCJvqZcYFHpJlF8bsk3bQ==", + "license": "MIT" + }, "node_modules/svelte": { "version": "5.33.18", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.33.18.tgz", diff --git a/package.json b/package.json index a30fab7..a4f7b04 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "format": "npx prettier --write ." }, "dependencies": { + "@awesome.me/webawesome": "^3.0.0-beta.4", "@number-flow/svelte": "^0.3.9", - "@shoelace-style/shoelace": "^2.20.1", "esbuild-svelte": "^0.9.3", "highlight.js": "^11.11.1", "svelte": "^5.33.18", diff --git a/public/panel.html b/public/panel.html index 2d15c84..9b5d22b 100644 --- a/public/panel.html +++ b/public/panel.html @@ -1,5 +1,5 @@ - + diff --git a/src/browser_panel/panel/App.svelte b/src/browser_panel/panel/App.svelte index 66e41b4..48a8a0e 100644 --- a/src/browser_panel/panel/App.svelte +++ b/src/browser_panel/panel/App.svelte @@ -1,20 +1,5 @@ {#if connection.isPermanentlyDisconnected} - - + + Connection Timeout
Unable to connect to the current page. Try closing and reopening the inspection panel to resolve the issue.
@@ -64,7 +49,7 @@
https://github.com/leonvogt/hotwire-dev-tools/issues/new
- + {:else if devToolOptionsLoaded}
@@ -96,7 +81,7 @@
Setting up Hotwire DevTool...
- +

Hmm... this is taking a bit longer than expected.
@@ -109,7 +94,7 @@
If there isn't something showing up, you can also try to inspect the extension itself by:

- Opening the "Debug Add-ons" page in Firefox: about:debugging#/runtime/this-firefox + Open the "Debug Add-ons" page in Firefox: about:debugging#/runtime/this-firefox
Then clicking on the "Inspect" button next to the Hotwire DevTool. There you should see the console output.
{/if} diff --git a/src/browser_panel/panel/tabs/LogsTab.svelte b/src/browser_panel/panel/tabs/LogsTab.svelte index e8f7981..58849ee 100644 --- a/src/browser_panel/panel/tabs/LogsTab.svelte +++ b/src/browser_panel/panel/tabs/LogsTab.svelte @@ -8,7 +8,7 @@ import { horizontalPanes } from "../../theme.svelte.js" import { getDevtoolInstance } from "$lib/devtool.js" - import IconButton from "$shoelace/IconButton.svelte" + import IconButton from "$uikit/IconButton.svelte" import CopyButton from "$components/CopyButton.svelte" import InspectButton from "$components/InspectButton.svelte" import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte" @@ -115,31 +115,29 @@

Events

- - - - - - {#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]} - handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}> - {groupName} - + + + + + {#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]} + handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}> + {groupName} + - {#each events as event} - handleFilterToggle(e)} - onclick={(e) => handleFilterToggle(e)} - value={event} - checked={turboEventsFilter.includes(event)}>{event} - {/each} + {#each events as event} + handleFilterToggle(e)} + onclick={(e) => handleFilterToggle(e)} + value={event} + checked={turboEventsFilter.includes(event)}>{event} {/each} - - + {/each} + {#if turboEvents.length > 0} {/if} diff --git a/src/browser_panel/panel/tabs/StimulusTab.svelte b/src/browser_panel/panel/tabs/StimulusTab.svelte index 52b7b5c..050d29a 100644 --- a/src/browser_panel/panel/tabs/StimulusTab.svelte +++ b/src/browser_panel/panel/tabs/StimulusTab.svelte @@ -5,7 +5,7 @@ import CopyButton from "$components/CopyButton.svelte" import InspectButton from "$components/InspectButton.svelte" import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte" - import IconButton from "$shoelace/IconButton.svelte" + import IconButton from "$uikit/IconButton.svelte" import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte" import { getStimulusData } from "../../State.svelte.js" import { flattenNodes, handleKeyboardNavigation } from "$utils/utils.js" diff --git a/src/browser_panel/panel/tabs/TurboTab.svelte b/src/browser_panel/panel/tabs/TurboTab.svelte index 94e99f6..7f8c0fe 100644 --- a/src/browser_panel/panel/tabs/TurboTab.svelte +++ b/src/browser_panel/panel/tabs/TurboTab.svelte @@ -6,7 +6,7 @@ import CopyButton from "$components/CopyButton.svelte" import InspectButton from "$components/InspectButton.svelte" import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte" - import IconButton from "$shoelace/IconButton.svelte" + import IconButton from "$uikit/IconButton.svelte" import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte" import { getTurboFrames, getTurboCables, getTurboStreams, clearTurboStreams } from "../../State.svelte.js" import { debounce, handleKeyboardNavigation } from "$utils/utils.js" @@ -198,12 +198,11 @@

Streams

{#if turboStreams.length > 0} - + {/if} {#if turboCables.length > 0} - - - + {`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`} + {/if}
@@ -270,7 +269,7 @@
{#if frame.attributes.busy !== undefined} - + {/if}
@@ -291,9 +290,9 @@

Frames

- + - +
{#if turboFrames.length > 0} @@ -413,11 +412,11 @@ diff --git a/src/components/InspectButton.svelte b/src/components/InspectButton.svelte index 852fe26..5cdf570 100644 --- a/src/components/InspectButton.svelte +++ b/src/components/InspectButton.svelte @@ -1,5 +1,5 @@ - - { - scrollAndHighlight() - }} - > - +Scroll into view + { + scrollAndHighlight() + }} +> diff --git a/src/shoelace/IconButton.svelte b/src/shoelace/IconButton.svelte deleted file mode 100644 index 89d17f7..0000000 --- a/src/shoelace/IconButton.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/src/uikit/IconButton.svelte b/src/uikit/IconButton.svelte new file mode 100644 index 0000000..04d271b --- /dev/null +++ b/src/uikit/IconButton.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/src/uikit/webawesome.svelte.js b/src/uikit/webawesome.svelte.js new file mode 100644 index 0000000..1dc5a87 --- /dev/null +++ b/src/uikit/webawesome.svelte.js @@ -0,0 +1,15 @@ +import "@awesome.me/webawesome/dist/styles/webawesome.css" +import "@awesome.me/webawesome/dist/styles/themes/default.css" + +import "@awesome.me/webawesome/dist/components/button/button.js" +import "@awesome.me/webawesome/dist/components/select/select.js" +import "@awesome.me/webawesome/dist/components/callout/callout.js" +import "@awesome.me/webawesome/dist/components/dropdown/dropdown.js" +import "@awesome.me/webawesome/dist/components/skeleton/skeleton.js" +import "@awesome.me/webawesome/dist/components/tooltip/tooltip.js" +import "@awesome.me/webawesome/dist/components/spinner/spinner.js" +import "@awesome.me/webawesome/dist/components/badge/badge.js" + +// Set WebAwesome base path to point to the correct location of the WebAwesome icons +import { setBasePath } from "@awesome.me/webawesome/dist/webawesome.js" +setBasePath("/dist")