Skip to content

Commit

Permalink
feat: connection page for separate window (#85)
Browse files Browse the repository at this point in the history
  • Loading branch information
webfansplz authored Dec 18, 2023
1 parent 0800ad9 commit ca8f8c0
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 32 deletions.
3 changes: 2 additions & 1 deletion packages/client/src/components/AppConnecting.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import VueLogo from '~/assets/images/vue-logo.svg'
</script>

<template>
<div class="h-screen w-screen $ui-fcc">
<div class="h-screen w-screen $ui-fcc flex-col">
<div class="outer">
<div class="inner">
<img :src="VueLogo" class="max-w-18" alt="Vue logo">
</div>
</div>
<slot />
</div>
</template>

Expand Down
17 changes: 17 additions & 0 deletions packages/client/src/components/WaitForConnection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script setup lang="ts">
import AppConnecting from '~/components/AppConnecting.vue'
</script>

<template>
<div class="h-screen w-screen $ui-fcc">
<AppConnecting>
<p class="pt-5 font-bold text-base">
Waiting for connection...
</p>
</AppConnecting>
</div>
</template>

<style scoped>
</style>
97 changes: 67 additions & 30 deletions packages/client/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { BridgeInstanceType } from '@vue-devtools-next/core'
import { BROADCAST_CHANNEL_NAME, isInIframe } from '@vue-devtools-next/shared'
import { Bridge, BridgeEvents, HandShakeServer, createDevToolsVuePlugin, registerBridgeRpc } from '@vue-devtools-next/core'

import type { App as AppType } from 'vue'
import { createApp } from 'vue'
import { createMemoryHistory, createRouter } from 'vue-router'
import { getViteClient } from 'vite-hot-client'
Expand All @@ -20,6 +21,7 @@ import Graph from '~/pages/graph.vue'
import Index from '~/pages/index.vue'
import Settings from '~/pages/settings.vue'
import CustomTabView from '~/pages/custom-tab-view.vue'
import WaitForConnection from '~/components/WaitForConnection.vue'

import 'uno.css'
import '~/assets/styles/main.css'
Expand Down Expand Up @@ -130,37 +132,72 @@ window.addEventListener('message', (event) => {
}
})

// @TODO: we might should move this to a separate file?
// @TODO: refactor separate window channel
if (!isInIframe) {
const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)
channel.onmessage = (event) => {
if (event.data?.data?.event === '__VUE_DEVTOOLS_CREATE_CLIENT__') {
initDevTools({
connect: (callback) => {
const bridge = new Bridge({
tracker(fn) {
channel.onmessage = (event) => {
if (event.data.source === '__VUE_DEVTOOLS_USER_APP__')
fn(event.data.data)
}
},
trigger(data) {
channel.postMessage({
source: '__VUE_DEVTOOLS_CLIENT__',
data,
})
},
})
callback(bridge)
},
})
function initSeparateWindowChannel() {
const connectionInfo: {
connected: boolean
timer: NodeJS.Timeout | null
app: AppType<Element> | null
} = {
connected: false,
timer: null,
app: null,
}
}

channel.postMessage({
source: '__VUE_DEVTOOLS_CLIENT__',
data: {
event: 'ready',
},
})
const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)

function createConnectionApp() {
const app = createApp(WaitForConnection)
app.mount('#app')
return app
}

function connect() {
connectionInfo.timer = setInterval(() => {
channel.postMessage({
source: '__VUE_DEVTOOLS_CLIENT__',
data: {
event: 'ready',
},
})
}, 2000)
}

connectionInfo.app = createConnectionApp()

channel.onmessage = (event) => {
if (event.data?.data?.event === '__VUE_DEVTOOLS_CREATE_CLIENT__') {
connectionInfo.app?.unmount()
connectionInfo.connected = true
clearInterval(connectionInfo.timer!)

initDevTools({
connect: (callback) => {
const bridge = new Bridge({
tracker(fn) {
channel.onmessage = (event) => {
if (event.data.source === '__VUE_DEVTOOLS_USER_APP__')
fn(event.data.data)
}
},
trigger(data) {
channel.postMessage({
source: '__VUE_DEVTOOLS_CLIENT__',
data,
})
},
})
bridge.on('disconnect', () => {
channel.close()
initSeparateWindowChannel()
})
callback(bridge)
},
})
}
}
connect()
}
initSeparateWindowChannel()
}
6 changes: 5 additions & 1 deletion packages/vite/src/overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ body.appendChild(script)
// Used in the browser extension
window.__VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__ = `${window.location.origin}${devtoolsClientUrl}`

// @TODO: we might should move this to a separate file?
// @TODO: refactor separate window channel
const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)

const bridge = new Bridge({
Expand All @@ -69,4 +69,8 @@ bridge.on('ready', () => {
setTimeout(() => {
bridge.emit('syn')
}, 200)

window.addEventListener('beforeunload', (event) => {
bridge.emit('disconnect')
})
})

0 comments on commit ca8f8c0

Please sign in to comment.