feat(create-quasar): add jsx pre-configure

[dongwa]

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Documentation
• [ ] Code style update
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

The PR fulfills these requirements:

• [x] It's submitted to the dev branch (or v[X] branch)
• [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
• [ ] It's been tested on a Cordova (iOS, Android) app
• [ ] It's been tested on an Electron app
• [ ] Any necessary documentation has been added or updated in the docs or explained in the PR's description.

If adding a new feature, the PR's description includes:

• [x] A convincing reason for adding this feature (to avoid wasting your time, it's best to start a new feature discussion first and wait for approval before working on it)

Other information: create-vue and Vue CLI both have options for scaffolding projects with pre-configured JSX support. See https://vuejs.org/guide/extras/render-function.html#jsx-tsx But I find create-quasar do not have this pre-configure, and I want to contribute for this. I have started a new feature discussion ,but I have received no reply for long, so I have to submit to the code for the administrator audit

Notion: When the vite of the app-vite is upgraded to 3.0+, remember to adjust the version of@vitejs/plugin-vue-jsx to the latest version

[IlCallo]

There's an open issue about this feature: https://github.com/quasarframework/quasar/issues/8690 It got stuck due to problems with types of Quasar components We can still add JSX/TSX support, but AFAIK it won't provide correct types, which makes TSX pretty useless

That said, Yusuf did quite some improvements lately TS-wise, something may have changed Vue team told me they were going to write a library authors guide for Vue TS types but apparently got stuck waiting for Evan to merge many TS PRs

[dongwa]

There's an open issue about this feature: #8690 It got stuck due to problems with types of Quasar components We can still add JSX/TSX support, but AFAIK it won't provide correct types, which makes TSX pretty useless

That said, Yusuf did quite some improvements lately TS-wise, something may have changed Vue team told me they were going to write a library authors guide for Vue TS types but apparently got stuck waiting for Evan to merge many TS PRs

I refer to the relevant issue, and do the investigation, I found that if according to the following way, seems to solve the problem

1. add this code to a *.d.ts file such as env.d.ts to resolve class and style issue( #8690 https://github.com/quasarframework/quasar/issues/8690#issuecomment-995518730)

import { StyleValue } from 'vue';

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      class?: any;
      style?: StyleValue; // I'm hesitating here to give an any or Stylevalue
    }
  }
}
export {}

2. I can get ts type hinting in vite project like this:

[dongwa]

@IlCallo Are there any other questions here？

[dongwa]

@IlCallo I have already completed the reconstruction work, but I don't know why can't pass the test

[IlCallo]

Don't worry, tests are currently failing due to a missng dependency, I'm looking into it right now

[dongwa]

Don't worry, tests are currently failing due to a missng dependency, I'm looking into it right now Thank you for your hard work，waiting for your good news

[dongwa]

@rstoenescu @IlCallo Excuse me, did you forget this？How's it going？

[IlCallo]

We haven't forgot about this, we're just busy working in other parts of Quasar ecosystem Razvan initially self-assigned a review, so I prefer to avoid merging the PR until we have a green light from him

[dongwa]

We haven't forgot about this, we're just busy working in other parts of Quasar ecosystem Razvan initially self-assigned a review, so I prefer to avoid merging the PR until we have a green light from him

I accidentally remove @rstoenescu 's review request a month ago,so I don't know if he can notice the messages

[jarofbilly]

@dongwa does v-model work properly for you with typescript? In my project I've added the JSX declarations for style and class (which seem to have solved that problem) but v-model is still an issue as the quasar component types are expecting a modelValue. The project does still compile and the functionality of v-model does work.