feat: connection page for separate window (#85)

packages/client/src/components/AppConnecting.vue

@@ -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>
 

packages/client/src/components/WaitForConnection.vue

@@ -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>

packages/client/src/main.ts

@@ -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'
@@ -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'
@@ -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()
 }

packages/vite/src/overlay.js

@@ -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({
@@ -69,4 +69,8 @@ bridge.on('ready', () => {
  setTimeout(() => {
  bridge.emit('syn')
  }, 200)
+
+ window.addEventListener('beforeunload', (event) => {
+ bridge.emit('disconnect')
+ })
 })