site-panzai/node_modules/vite-plugin-vue-tracer

vite-plugin-vue-tracer

Tracer for the source code of elements and vdoms in Vue SFC.

This is a designed to be a replacement of vite-plugin-vue-inspector with a new approach, that utilize Vite's internal source map to resolve the source location, without injecting data-attributes to the DOM.

This plugin is also designed to be more modular, where you can use it as a standalone inspector plugin, or as a headless APIs to build your own inspector.

Usage

npm i -D vite-plugin-vue-tracer

import { defineConfig } from 'vite'
import { VueTracer } from 'vite-plugin-vue-tracer'

export default defineConfig({
  plugins: [
    VueTracer(),
  ],
})

In the your entry file, add the following code:

// Only apply in development
if (import.meta.hot) {
  import('vite-plugin-vue-tracer/client/overlay').then(({ events, state }) => {
    // Enables the overlay
    state.isEnabled = true

    events.on('hover', (info) => {
      // ...
    })

    events.on('click', (info) => {
      // ...
      openInEditor(info.fullpath) // 'src/app.vue:10:1'
      state.isEnabled = false
    })
  })
}

Of if you want headless APIs, import vite-plugin-vue-tracer/client/record instead.

if (import.meta.hot) {
  import('vite-plugin-vue-tracer/client/record')
    .then(({
      hasData,
      findTraceFromElement,
      findraceFromVNode,
      findTraceAtPointer,
    }) => {
      const el = document.querySelector('.foo')
      const trace = findTraceFromElement(el)
      if (trace) {
        console.log(trace)
      }
    })
}

Vite DevTools

With Vite DevTools, enable viteDevtools to add an Inspect Vue component button to the dock:

VueTracer({
  viteDevtools: true,
})

Click the button, then click an element on the page to open its component in your editor. The button is an on/off tool: while it is on, an open DevTools panel is hidden, and it comes back after the pick. Click the button again or press Escape to cancel. The Mod+Shift+X shortcut (Cmd on macOS, Ctrl elsewhere) toggles it too, and can be changed in the DevTools settings.

Note

The on/off behavior needs a hub with toggle actions (devframes/devframe#469). On older versions, each click on the button starts a pick, and the panel closes after it.

To handle the picked element yourself instead of opening the editor, set onPick: 'none' and listen to the click event:

VueTracer({
  viteDevtools: { onPick: 'none' },
})

import('vite-plugin-vue-tracer/client/listeners').then(({ events }) => {
  events.on('click', (info) => {
    // show your own UI for `info`
  })
})

References

Exports

• vite-plugin-vue-tracer - The Vite plugin entry, should be used in vite.config.ts
• vite-plugin-vue-tracer/client/record - The client entry for recording the trace data, this will be automatically injected into each component by the plugin. You don't normally need to import this.
• vite-plugin-vue-tracer/client/listener - The client entry for adding event listeners to the DOM and listening to the mouse events. It expose a ref isEnabled to control if the listeners are active. A events object is exposed for listening to those events. This entry is purely headless, does not come with any UI or styling.
• vite-plugin-vue-tracer/client/overlay - The builtin overlay UI for easier to use. A reactive state object is exposed to control the overlay's state. If you want to build your own UI, you can use the listener entry instead.

Sponsors

License

MIT License © Anthony Fu