Bug: Instance properties appear in components list

[g-plane]

As the screenshot shows, instance properties shouldn't be showed in components completion list.

[johnsoncodehk]

This is expected, because these ones is subtypes of FunctionalComponent.

// true
type IsComponent = typeof $emit extends FunctionalComponent<infer _> ? true : false;

[g-plane]

So strange...Is there a workaround?

[johnsoncodehk]

@pikax can you take a look to this problem?

[pikax]

@pikax can you take a look to this problem?

This is a bit tricky since FunctionalComponent kinda looks the same as the $emit

You can validate the functional component like this:

type IsComponent<T> = T extends FunctionalComponent<infer P>
  ? P extends object ? true : false // `P` should be always an object on a functional component, but on emit extends `string`
  : false

[johnsoncodehk]

@pikax thanks, but that may not handle well, there have more other properties like $d, $el, $n... and these ones can be any other Prop type.

I'm not sure if this is appropriate, can we make some FunctionalComponent properties not optional to block these function type variables?
For example, maybe change __file?: string to __file: string | undefined.

[pikax]

I'm not sure if this is appropriate, can we make some FunctionalComponent properties not optional to block these function type variables?

I'm afraid that is not possible because that would break a simple function:

      function MyFunctionalComponent(p: { a: 1}) {
        return h('div', p.a)
      }
      type FunctionComponent = IsComponent<typeof MyFunctionalComponent>

This changes will affect users using Javascript

<template>
  <MyComp a="Hello there"></MyComp>
</template>

<script setup>
import { h } from 'vue'

function MyComp(p){
	return h('div', p.a)
}
</script>

@pikax thanks, but that may not handle well, there have more other properties like $d, $el, $n... and these ones can be any other Prop type.

I reckon this only affects the script setup, right?

EDIT: Probably this is a more correct component for your needs

type IsComponent<T> = T extends (p: any, ctx?: any) => VNode
  ? true
  : false

[johnsoncodehk]

I reckon this only affects the script setup, right?

@pikax Unfortunately, widespread impact. 😅

Or can we narrow the FunctionComponent caller return type?

(props: P, ...): any -> (props: P, ...): VNode // or other

[pikax]

Can you give some examples on what's breaking on your side? I can think on ways to improve it, DefineComponent should be straight forwards to get the type.

You could also just make a "rule": Only the defineComponent (and components:[]) components are available on the template. Which I think is a reasonable request, and it wouldn't break the upstream users

[johnsoncodehk]

@pikax of course, sorry I should give this first.

import { defineComponent, FunctionalComponent } from '@vue/runtime-core';

type ExtractFunctionalComponents<T> = { [K in keyof T as T[K] extends FunctionalComponent<infer _> ? K : never]: T[K] }
const component = defineComponent({
    setup() {
        return {
            foo: () => 123,
            bar: () => 'str',
        };
    }
});
const localComponents: ExtractFunctionalComponents<InstanceType<typeof component>>;
localComponents. // doing auto-complete here should not have `foo`, `bar`

---

This two way also can fix it:

EDIT: Probably this is a more correct component for your needs

type IsComponent<T> = T extends (p: any, ctx?: any) => VNode
  ? true
  : false

Or can we narrow the FunctionComponent caller return type?

(props: P, ...): any -> (props: P, ...): VNode // or other

If FunctionComponent is not easy to change, I think I can use the way 1.

[pikax]

Check this playground

foo and bar are valid components actually (if used in script setup)

[johnsoncodehk]

@pikax I see... So actually I should keep this behavior. Thanks to check it!

@g-plane do you agree to close this issue?

[pikax]

I would exclude if the key starts with $

Something of sorts

type ExtractFunctionalComponents<T> = {
  [K in keyof T as K extends `$${string}`
    ? never
    : IsFunctionalComponent<T[K]> extends true
    ? K
    : T extends Component
    ? K
    : never]: T[K];
};

[johnsoncodehk]

@pikax <$foo> report illegal tag name in vue compiler, so yes I can filter it, thanks again!

Fixed and will update to 0.24.4.