Skip to content

Commit 734ab7f

Browse files
webfansplzwebfansplz
committed
feat: devtools panel
1 parent 4934fd1 commit 734ab7f

19 files changed

Lines changed: 254 additions & 75 deletions

File tree

‎packages/core/src/client/webcomponents/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './components/DockEmbedded'
22
export * from './components/DockStandalone'
3+
export * from './state/context'
34
export * from './state/docks'
45
export * from './utils/PersistedDomViewsManager'

packages/webext/app/pages/background.html renamed to packages/webext/app/background/background.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
<title>Vite DevTools Background</title>
55
</head>
66
<body>
7-
<script src="../../dist/devtools-bg.mjs" type="module"></script>
7+
<script src="../../dist/devtools-bg.js" type="module"></script>
88
</body>
99
</html>

‎packages/webext/app/pages/panel.html‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/webext/app/panel/App.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup lang="ts">
2+
import type { DocksContext } from '@vitejs/devtools-kit/client'
3+
import { CLIENT_CONTEXT_KEY, getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
4+
import { createDocksContext, DockStandalone } from '@vitejs/devtools/client/webcomponents'
5+
import { nextTick, ref, useTemplateRef, watch } from 'vue'
6+
import { getInspectedWindowMetadata } from './inspected-window'
7+
8+
const context = ref<DocksContext | null>(null)
9+
const error = ref<string | null>(null)
10+
const dockRoot = useTemplateRef<HTMLElement>('dockRoot')
11+
12+
watch([dockRoot, context], ([root, docksContext]) => {
13+
if (!root || !docksContext || root.childElementCount)
14+
return
15+
16+
root.appendChild(new DockStandalone({ context: docksContext }))
17+
})
18+
19+
try {
20+
const meta = await getInspectedWindowMetadata()
21+
22+
const rpc = await getDevToolsRpcClient({
23+
authToken: meta.authToken,
24+
connectionMeta: meta.connectionMeta,
25+
wsOptions: {
26+
url: meta.wsUrl,
27+
},
28+
})
29+
30+
context.value = await createDocksContext('standalone', rpc)
31+
;(globalThis as any)[CLIENT_CONTEXT_KEY] = context.value
32+
await nextTick()
33+
}
34+
catch (err) {
35+
error.value = err instanceof Error ? err.message : String(err)
36+
}
37+
</script>
38+
39+
<template>
40+
<div v-if="context" ref="dockRoot" class="h-screen w-screen" />
41+
<div v-else class="h-screen w-screen flex items-center justify-center bg-[#0b1120] px-6 text-white/80">
42+
<div class="max-w-lg rounded-xl border border-white/10 bg-white/5 px-5 py-4 text-sm leading-6 shadow-xl">
43+
<p class="m0 text-base font-semibold text-white">
44+
Vite DevTools panel unavailable
45+
</p>
46+
<p class="mb0 mt2">
47+
{{ error || 'Connecting to the inspected page...' }}
48+
</p>
49+
</div>
50+
</div>
51+
</template>

‎packages/webext/app/panel/devtools-panel.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite DevTools Panel</title>
7+
<meta name="description" content="Vite DevTools browser extension panel" />
8+
</head>
9+
<body class="font-sans">
10+
<div id="app"></div>
11+
<script type="module" src="./main.ts"></script>
12+
</body>
13+
</html>

‎packages/webext/app/panel/inspected-window.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { ConnectionMeta } from '@vitejs/devtools-kit'
2+
3+
interface InspectedWindowMetadata {
4+
origin: string
5+
wsUrl: string
6+
authToken?: string
7+
connectionMeta?: ConnectionMeta
8+
}
9+
10+
function normalizeWsUrl(origin: string, connectionMeta?: ConnectionMeta): string {
11+
const url = new URL(origin)
12+
url.port = String(connectionMeta.websocket)
13+
return url.origin
14+
}
15+
16+
const metadataEval = `
17+
({
18+
origin: location.origin,
19+
connectionMeta: window.__VITE_DEVTOOLS_CONNECTION_META__ || undefined,
20+
authToken: window.__VITE_DEVTOOLS_CONNECTION_AUTH_TOKEN__,
21+
})
22+
`
23+
24+
export function getInspectedWindowMetadata(): Promise<InspectedWindowMetadata> {
25+
return new Promise((resolve) => {
26+
chrome.devtools.inspectedWindow.eval<Omit<InspectedWindowMetadata, 'wsUrl'>>(metadataEval, (meta) => {
27+
resolve({
28+
...meta,
29+
wsUrl: normalizeWsUrl(meta.origin, meta.connectionMeta),
30+
})
31+
})
32+
})
33+
}

‎packages/webext/app/panel/main.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { createApp, h, Suspense } from 'vue'
2+
import App from './App.vue'
3+
4+
import '@unocss/reset/tailwind.css'
5+
import './styles/main.css'
6+
import 'uno.css'
7+
8+
const app = createApp({
9+
render: () => h(Suspense, {}, {
10+
default: () => h(App),
11+
fallback: () => h('div', 'Loading...'),
12+
}),
13+
})
14+
15+
app.mount('#app')

‎packages/webext/app/panel/styles/main.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
html,
2+
body,
3+
#app {
4+
height: 100%;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
@media (prefers-color-scheme: dark) {
10+
html {
11+
color-scheme: dark;
12+
}
13+
}

‎packages/webext/app/scripts/devtools-bg.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ function setupDevToolsPanel() {
22
chrome.devtools.panels.create(
33
'Vite',
44
'icons/128.png',
5-
'app/pages/panel.html',
5+
'dist/app/panel/devtools-panel.html',
66
(panel) => {
77
panel.onShown.addListener(() => {
88
})

‎packages/webext/app/scripts/devtools-panel.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

0 commit comments

Comments
 (0)