Debugging component state when using render-in-setup pattern

[LachlanStuart]

When returning a render function from setup(), usually all component state will be held in local ref/reactive variables inside the setup function. The problem is that these variables are inaccessible in the Vue.js devtools. e.g. there's no easy way to inspect the contents of state.counter in the following:

export const MyComponent = defineComponent({
  setup() {
    const state = reactive({
      counter: 0
    })
    return () => (
      <button onClick={() => {state.counter += 1}}>
        {state.counter < 5 ? 'Click me' : 'BOOM'}
      </button>
    )
  },
})

With all other patterns, devtools would be able to access the variables at runtime in the component's $data. However, not only are the ref/reactive variables not registered against the component, data() occurs after setup() in the lifecycle, so there's no hacky workaround like doing this.$data.state = state in setup(). The only quick way to view these variables is to do watch(() => console.log(state)), but this can be extremely spammy, and is hard to read if there are multiple instances of the component.

Am I missing any other solutions? Are there any plans to make these hidden state containers accessible in devtools? I doubt it's possible to save variable names, but it seems like it should be possible for ref()/reactive() to call getCurrentInstance() and somehow associate the returned observable with the component...

[antfu]

/cc @pikax is useDevtoolsInspector compatible with Vue 2?

https://github.com/pikax/vue-composable#inspector

[pikax]

/cc @pikax is useDevtoolsInspector compatible with Vue 2?

https://github.com/pikax/vue-composable#inspector

Not yet, devtools beta doesn't support Vue 2 AFAIR

@LachlanStuart that's not possible one way to do it would be with something like vuejs/rfcs#210

The reason why is because refs are not exposed

[LachlanStuart]

@antfu @pikax Thanks for the links. I'll keep an eye on those. Unfortunately I'm stuck on Vue 2 for the time being.

I feel it's possible to make an automatic solution at the framework level (i.e. through changes to the @vue/composition-api plugin). In dev mode, when ref()/reactive()/computed()/etc. are called, they'd check if they were invoked from a component using getCurrentInstance(), and if so, they'd add themselves to to the component instance. A global mixin for data or computed could be added to check if any reactive state was registered and add it as a separate data/computed property, which would be visible in the current Vue 2-compatible devtools. That mixin could later be replaced by a custom inspector in devtools beta.

Do you think it would be reasonable to implement it at this level of the stack? If I made a PR, would it be considered for inclusion?

[pikax]

@LachlanStuart that wouldn't be up to spec with vue3, you can open an RFC to discuss that inclusion.

one easy way is having a composable:

function expose(obj) {
  const instance = getCurrentInstance()
  instance.$nextTick(()=>   Object.keys(obj).forEach(x=> this._data[x] = obj[x])
}

setup(){
  const text = ref('text')

  expose({text})

  return ()=> h('div', text.value)
}

Note: not tested!

[github-actions]

Stale issue message

[hisuwh]

@LachlanStuart did you get a solution to this?

[LachlanStuart]

@hisuwh No. I didn't have time to pursue the suggested RFC process, and haven't actually worked much with Vue since then.