[Feature Request] Graph should be updated in real time

[LoTwT]

description

Graph will not update automatically after loading lazy-load routes with vue-router. After switching back to the Graph tab, it will update correctly.

devtools-next-graph-repro.mp4

repro

URL: https://stackblitz.com/edit/vitejs-vite-nzyucm?file=vite.config.ts

[LoTwT]

Hi, there.

I'm trying to resolve a similar problem in vite-plugin-inspect first. I'm not sure if the solution is appropriate. If you are interested in this issue, please check vite-plugin-inspect #104. 😊

[LoTwT]

description

After the vite-plugin-inspect #104 merged, I tried to resolve this issue. I made a demo to test if it can use the RPC function defined in the vite-plugin-inspect. The code is as follows

// client/src/pages/graph.vue
async function foo() {
  const hot = await getViteHotContext()
  if (hot) {
    createRPCClient('vite-plugin-inspect', hot, {
      async moduleUpdated() {
        console.log('module-update')

        try {
          const root = await bridgeRpc.root()
          bridgeRpc.getGraph().then((res) => {
            parseGraphRawData(res, root)
          }).catch(e => console.log('getGraph-error', e))
        }
        catch (error) {
          console.log('update-error', error)
        }
      },
    })
  }
}

onMounted(() => {
  foo()
})

The console.log('module-update') was triggered successfully. However, when calling the APIs of bridgeRpc, it will result in a timeout error and the errors are as follows:

questions

• The limit of using bridgeRpc, if there are some attentions that should be particularly paid to?
• The moduleUpdated RPC function is defined in the vite-plugin-inspect, but the RPC client available is registered with the name vite-plugin-vue-devtools in this repo. I'm not sure using createRPCClient directly in the client is a more appropriate way. 😢

[webfansplz]

description

After the vite-plugin-inspect #104 merged, I tried to resolve this issue. I made a demo to test if it can use the RPC function defined in the vite-plugin-inspect. The code is as follows

// client/src/pages/graph.vue
async function foo() {
  const hot = await getViteHotContext()
  if (hot) {
    createRPCClient('vite-plugin-inspect', hot, {
      async moduleUpdated() {
        console.log('module-update')

        try {
          const root = await bridgeRpc.root()
          bridgeRpc.getGraph().then((res) => {
            parseGraphRawData(res, root)
          }).catch(e => console.log('getGraph-error', e))
        }
        catch (error) {
          console.log('update-error', error)
        }
      },
    })
  }
}

onMounted(() => {
  foo()
})

The console.log('module-update') was triggered successfully. However, when calling the APIs of bridgeRpc, it will result in a timeout error and the errors are as follows:

## questions * The limit of using `bridgeRpc`, if there are some attentions that should be particularly paid to? * The `moduleUpdated` RPC function is defined in the `vite-plugin-inspect`, but the RPC client available is registered with the name `vite-plugin-vue-devtools` in this repo. I'm not sure using `createRPCClient` directly in the `client` is a more appropriate way. 😢

Try to add timeout: -1 to the vite-dev-rpc option. See context:

https://github1s.com/webfansplz/vite-plugin-vue-devtools/blob/HEAD/packages/core/src/vite-dev-rpc.ts#L60

antfu/vite-dev-rpc#1

[LoTwT]

@webfansplz timeout:-1 doesn't work. Before, I tried the original communication way of vite using server.ws.send and import.meta.hot.on, but the bridgeRpc still doesn't work yet. 😢