Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(types/jsx): support jsxImportSource, avoid global JSX conflict #7958

Merged
merged 1 commit into from
Mar 26, 2023

Conversation

yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Mar 26, 2023

Based on and supersedes #7083
Closes #1033
Closes #1034

  • No longer implicitly register global JSX types by default
    • This avoid conflict when using Vue in the same project with React
    • Global registration must now be done by explicitly importing / referencing vue/jsx, or listing it in compilerOptions.types.
  • Add vue/jsx-runtime to support jsxImportSource usage
    • Can enable globally by setting compilerOptions.jsxImportSource to 'vue'
    • Can also opt-in per-file with /** @jsxImportSource vue */

Note that global JSX types requires explicit opt-in, which is technically a breaking change, but this is a type-only change and the update path is trivial, so it aligns with the release policy if we release this in a minor.

Update: In 3.3, the JSX types will still be registered globally by default. We plan to remove the global registration in 3.4 while we get IDE support aligned during the 3.3 lifecycle.

This is also needed to land zero-config SFC Generics support in Volar vuejs/language-tools#2546

- No longer implicitly register global JSX types by default
  - This avoid conflict when using Vue in the same project with React
  - Global registration must now be done by explicitly importing /
    referencing `vue/jsx`, or listing it in `compilerOptions.types`.
- Add `vue/jsx-runtime` to support `jsxImportSource` usage
  - Can enable globally by setting `compilerOptions.jsxImportSource` to `'vue'`
  - Can also opt-in per-file with `/** @jsxImportSource vue */`
@yyx990803 yyx990803 added the ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. label Mar 26, 2023
@yyx990803 yyx990803 merged commit d0b7ef3 into main Mar 26, 2023
@yyx990803 yyx990803 deleted the jsx branch March 26, 2023 08:40
@remcohaszing
Copy link
Contributor

It’s awesome to see Vue adding support for the JSX automatic runtime! 🎉

I spotted some bugs though. #7959 explains and resolves them.

@theschmocker
Copy link

This avoid conflict when using Vue in the same project with React

Glad to see this! Trying to work with Vue 2.7 (templates only; no JSX/TSX) and React in the same project and dealing with conflicting types when using vue-tsc/Volar. Would it be possible to backport this to 2.7? If not feasible, is there a workaround to have full TS support for both?

IAmSSH pushed a commit to IAmSSH/core that referenced this pull request May 14, 2023
…uejs#7958)

- No longer implicitly register global JSX types by default
  - This avoid conflict when using Vue in the same project with React
  - Global registration must now be done by explicitly importing /
    referencing `vue/jsx`, or listing it in `compilerOptions.types`.
- Add `vue/jsx-runtime` to support `jsxImportSource` usage
  - Can enable globally by setting `compilerOptions.jsxImportSource` to `'vue'`
  - Can also opt-in per-file with `/** @jsxImportSource vue */`
@ubeytd
Copy link

ubeytd commented Sep 15, 2023

Hi, I have a package vue as dependency to @directus

└─┬ @directus/[email protected]
  └─┬ [email protected]
    └── @vue/[email protected]

And I have react projects in Monorepo, currently, I am having build problems because of type conflicts.

This issue seems related to me with this merged PR is the issue resolved?

Thanks

CleanShot 2023-09-15 at 13 27 27@2x CleanShot 2023-09-15 at 13 33 31@2x

@yanniznik
Copy link

yanniznik commented Sep 25, 2023

@ubeytd Did you find a solution to this ? Having the exact same symptoms on Vue 2.7, monorepo with a project using @react/types...

@ubeytd
Copy link

ubeytd commented Sep 25, 2023

In our case, build problems were caused because the package imports @vue/[email protected] was imported to our shared library and from there to the frontend by mistake, when we find that the build problem is resolved, BUT we still have red lines in the editor everywhere about ref. @yanniznik

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make JSX typings an optional install as they conflict with React TSX
5 participants