Typing of the Component Due to plugin

[shelton louis]

I don't know who to talk to about this. But since this tool was made by you I have decided to bring this up to you.

Since you have decided to use <component /> for this plugin the types that are supposed to be used by component are not written.

This is not good here is how it is supposed to be typed. I'm not getting any type checking at all

import { Component } from 'vue'

type DynamicComponent =
  | { is: string | Component; name: never; lang?: never; }
  | { name: string; lang?: string; is?: never }

[Heni Yangui]

Can you elaborate? The dynamic component tag is only used inside templates. The one provided by this package is a custom SFC block used outside <template>. Volar handles syntax highlighting and type-checking correctly.
Are you getting type errors somewhere?

[shelton louis]

Can you elaborate? The dynamic component tag is only used inside templates. The one provided by this package is a custom SFC block used outside <template>. Volar handles syntax highlighting and type-checking correctly. Are you getting type errors somewhere?

I don't think you are aware of the <component/> component that is given to us by Vue. Special Element Component It's a component that renders either a component or a tag based on a condition. That component takes in a :is= props. The is= prop tells it what to render.

[shelton louis]

I don't think you are aware of the <component/> component that is given to us by Vue. Special Element Component It's a component that renders either a component or a tag based on a condition. That component takes in a :is= props. The is= prop tells it what to render.

I'm not getting any types at all. That is the problem. You could either change the name of the component created by this plugin to <sfc /> or <sfc-component /> or you can type the component. I suggest doing option two as this makes it clear what this block is doing.

Either way types need to be written for better DX.

You can either use this type for the component

import { Component } from 'vue'

type DynamicComponent =
  | { is: string | Component; name: never; lang?: never; }
  | { name: string; lang?: string; is?: never }

You can change the name of the block to then use this type

type SFCComponent=   { 
 name: string; 
 lang?: string; 
}

Oh and please let the lang be html by default. people will rarely ever change this to be anything else maybe pug

[Heni Yangui]

Can you elaborate? The dynamic component tag is only used inside templates. The one provided by this package is a custom SFC block used outside <template>. Volar handles syntax highlighting and type-checking correctly. Are you getting type errors somewhere?

I don't think you are aware of the <component/> component that is given to us by Vue. Special Element Component It's a component that renders either a component or a tag based on a condition. That component takes in a :is= props. The is= prop tells it what to render.

I'm aware of it. However it's irrelevant, the IDE support is provided by Volar and it can differentiate between the two. You'll get the is prop autocompleted when you type it inside <template> but you won't get it when typing it outside it. There is no such typescript interface that need to be modified.

I'm not getting any types at all. That is the problem. You could either change the name of the component created by this plugin to or or you can type the component. I suggest doing option two as this makes it clear what this block is doing.

Nothing changed regarding the special element, it should work the same whether or not you're using the plugin. Regarding this plugin's component tag, it's handled by Volar and it's not something that can be controlled currently. The same goes for the lang attribute, it's not possible to make it HTML by default, Volar depends on it to highlight the syntax correctly.
The tooling plugin that's added to your tsconfig can only handle what's inside the <component> tag, it cannot control the props suggestions of the <component> tag itself nor their default values.

[shelton louis]

I have sent an issue to Johnson in regard to this issue. It's up to you to talk to him about this I will not hold this issue to you anymore. I hope this goes to the core soon. Good Luck.