devtools

devtools copied to clipboard

Version

6.0.0-beta.2

Browser and OS info

Chrome 85

Steps to reproduce

1. create vue project useing vue cli

• Pick Typescript, vue 3 preview.

2. create component HelloWorld.tsx Code

import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const state = reactive({
      name: 'Foo bar'
    })

    // If I return this only. It will work and appear. But If return my state and jsx, it don't work.
    // return {
    //   state
    // }

    return () => {
      return (
        <div>
          <h1>{state.name}</h1>
        </div>
      )
    }
  }
})

What is expected?

setup should appear and have my state which is from my reactive.

What is actually happening?

setup don't appear in vue-dev-tool in Chrome.

---

if you return state. setup show up after refresh the page. But I need to return my jsx from my component. is there way to fix this issue? Also if you use .vue and flag lang="tsx" it same problem.

Any updates?

import { defineComponent, reactive, h } from 'vue'

export default defineComponent({
  name: 'SetupRender',

  setup () {
    const state = reactive({
      name: 'Foo bar'
    })

    return () => {
      return h('h1', state.name)
    }
  }
})

This is tricky because the devtools gets the render function as the setup result.

My suggestion

import { defineComponent, ref, h } from 'vue'
import {debug} from '@vue/devtool/debug'

export default defineComponent({
  name: 'SetupRender',

  setup () {
    const name = ref('foo')

   debug({
     name,
   })

    return () => {
      return h('h1', name.value)
    }
  }
})

My PR for this -> https://github.com/vuejs/core/pull/5383

I had the same problem

I had the same problem

Same. As a workaround, I've copied the getCurrentInstance function from Vuetify: https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/util/useRender.ts#L7

You use it like so: https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/components/VApp/VApp.tsx#L25

setup (props, { slots }) {
    const theme = provideTheme(props)
    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)
    const { rtlClasses } = useRtl()

    useRender(() => (
      <div
        ref={ layoutRef }
        class={[
          'v-application',
          theme.themeClasses.value,
          layoutClasses.value,
          rtlClasses.value,
        ]}
        style={ layoutStyles.value }
        data-app="true"
      >
        <div class="v-application__wrap">
          { slots.default?.() }
        </div>
      </div>
    ))

    return {
      getLayoutItem,
      items,
      theme,
    }
}

It works for me

I had the same problem

Same. As a workaround, I've copied the getCurrentInstance function from Vuetify: https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/util/useRender.ts#L7

You use it like so: https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/components/VApp/VApp.tsx#L25

setup (props, { slots }) {
    const theme = provideTheme(props)
    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)
    const { rtlClasses } = useRtl()

    useRender(() => (
      <div
        ref={ layoutRef }
        class={[
          'v-application',
          theme.themeClasses.value,
          layoutClasses.value,
          rtlClasses.value,
        ]}
        style={ layoutStyles.value }
        data-app="true"
      >
        <div class="v-application__wrap">
          { slots.default?.() }
        </div>
      </div>
    ))

    return {
      getLayoutItem,
      items,
      theme,
    }
}

It works for me

Just FYI, I stopped using my hack a while ago as I found it to be too cumbersome.

It would be great if we could get an official fix :)

去年就关注了这个问题，今年这个问题有什么进展吗？

Correct me if I'm wrong, but it looks like this affects any components that use the SFC <script setup> syntax. That seems like a pretty significant limitation. Short of adding more magic to the SFC compiler to somehow extract all the var/const/let bindings from the <script setup> block and stick them in an object somewhere, though, or using the debug function noted above, I'm not sure how this could be solved.