Is there a way to disable JSX type usage in HTML?

[rijkvanzanten]

Hi there!

Loving Volar! ❤️ However..... I ran into a little bit of snafu. We're relying on Vue 3 and use Fullcalendar as a component (through fullcalendar-vue). However, Fullcalendar relies on preact, which in turn causes all sorts of type issues in Volar¹.
There's an existing issue on Fullcalendar's repo about this, but they're effectively saying "It works when building the component, so it must be a VS Code (extension) thing (fullcalendar/fullcalendar-vue#173 (comment)).

I tried the @types/react stub trick to resolve issues before, however, that won't work for stubbing preact, as it's types don't come from a separate module (and stubbing the whole of preact would break fullcalendar.

I'm a little bit at a loss of what to do next to resolve this. It effectively leaves Volar in a non-usable state, as every Vue component and their props are lighting up bright red.

In #552 (comment), @johnsoncodehk mentions that template virtual code is changed to JSX to improve generic component support, which made me wonder: Is there any setting available to change it back to whatever non-JSX checker existed before? Or is there a way to disable inline checking on the HTML bit of a Vue file completely? Thanks in advance!

Footnotes

1. Things like [jsx.d.ts(650, 3): ]()The expected type comes from property 'class' which is declared here on type 'HTMLAttributes<HTMLDivElement>', JSX element class does not support attributes because it does not have a 'props' property. ↩

[rijkvanzanten]

For example:

<template>
  <div :class="{ example: true }"></div>
</template>

shows an error:

(property) JSXInternal.HTMLAttributes<HTMLDivElement>.class?: string | undefined
Type '{ example: boolean; }' is not assignable to type 'string'.ts(2322)
[jsx.d.ts(650, 3): ]()The expected type comes from property 'class' which is declared here on type 'HTMLAttributes<HTMLDivElement>'

following the definition of class takes me to node_modules/preact/src/jsx.d.ts which contains:

export namespace JSXInternal {
	// ... truncated ...
	export interface HTMLAttributes<RefType extends EventTarget = EventTarget>
		extends ClassAttributes<RefType>,
			DOMAttributes<RefType> {
		// ... truncated ...
		class?: string;
		// ... truncated ...

---

Oh and I do have types configured in tsconfig.json (as per #111 (comment)), but that doesn't seem to do the trick for me.

[johnsoncodehk]

Hi @rijkvanzanten, this comment is also using fullcalendar and he seems to solve it, please take a try to his way.
#592 (reply in thread)

[rijkvanzanten]

Ah! I made it down to #592 (comment), but didn't scroll down far enough for an even better solution 🙈

Thanks for the quick pointer @johnsoncodehk, and thank you @pholly for the insight on how to properly configure that stub for fullcalendar usage 🙂