defineProps() compiler hint fails if wrapped in another function call, i.e. toRefs

[zhangenming]

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

review comp.vue

What is expected?

work well

What is actually happening?

defineProps is not defined

[caozhong1996]

Duplicate #4994, this is the expected behavior, but maybe people need a proper hint from the document.

[zhangenming]

So why can't we improve him? Is there any other reason? thanks

[caozhong1996]

Only stand for my personal view:

<script setup>
import { computed, onUpdated, ref, toRefs } from 'vue'
 
const props = defineProps({
  value: Number,
})
const { value } = toRefs(props)

// If we can do this
// const { value } = toRefs(defineProps({
//   value: Number,
// }))

// How about this? Please note that, props still can be declared, it's so weird 
// if ( a > 1 ) {
//   const props = defineProps({
//     value: Number,
//   })
// }

</script>

Macro is magic, we have to be careful while using. We hope props should be declared in the outermost scope, equivalent to

defineComponent({
  props: {
    //....
  },
  setup () {
    //....
  }
})

this should not be allowed

defineComponent({
  setup () {
    if ( a > 1 ) {
      props: {
       //....
      },
    }
  }
})

[zhangenming]

// If we can do this
// const { value } = toRefs(defineProps({
//   value: Number,
// }))

But this is a common way to use it, we want props be reactive
or introduce a sugar grammar , make props be reactive by default

[caozhong1996]

Yep, I'm with you, meanwhile, we'd better not open Pandora's Box.

[yyx990803]

defineProps must be a top-level call with the exception of withDefaults.

Also with reactivity transform, there is no need to use toRefs() on it.

[tjx666]

defineProps must be a top-level call with the exception of withDefaults.

Also with reactivity transform, there is no need to use toRefs() on it.

@yyx990803

This is my use case:

<script setup lang="ts">
import { ref, onMounted, watch, toRefs } from 'vue';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import './userWorker';

type Editor = ReturnType<typeof monaco.editor.create>;
type SupportedLanguage = 'typescript' | 'javascript' | 'json';

interface EditorProps {
    source: string;
    language: SupportedLanguage;
}
// !: using toRefs(defineProps()) to destructure props
const { source, language } = toRefs(defineProps<EditorProps>());

const editorContainer = ref<HTMLDivElement | null>(null);
const editor = ref<Editor | null>(null);

onMounted(() => {
    editor.value = monaco.editor.create(editorContainer.value!, {
        value: source.value,
        language: language.value,
    });
});

[SSQLQIANBB]

const { isEdit } = toRefs(
    withDefaults(
      defineProps<{
        isEdit?: boolean;
      }>(),
      { isEdit: true }
    )
  );

why withDefaults is not defined
but bottom is right

  const props = withDefaults(
    defineProps<{
      isEdit?: boolean;
    }>(),
    { isEdit: true }
  );
  const { isEdit } = toRefs(props);