feat(jsx-types): namespace JSX types

[znck]

• Extract JSX types to @vue/jsx
• Support @jsx pragma

  /** @jsx h */
  import { h } from '@vue/jsx'
  

• Support global JSX types using opt-in package @vue/jsx/register
• Avoid global JSX pollution

Related #1033 #1034

[netlify[bot]]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	f1f952768dce89018a0782ea65399452b5a32ccb
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/636dba7b3213660008493e65

[znck]

Looks like dts tests run before building, trying to fix it.

[yyx990803]

Notes:

• TS docs on per-file JSX factory (which also affects JSX namespace lookup)

If we land this, to avoid disruption in userland we need to:

• IDE: Volar needs to generate TSX with /** @jsx h */ import { h } from "vue/jsx" /cc @johnsoncodehk
• @vue/tsconfig should register globally by default so it can work with other IDEs out of the box? /cc @sodatea

This is still technically a breaking change, especially for TSX users.

To minimize the disruption, I think we should first start shipping this with auto registration by default in a minor, to allow Volar and existing projects to start using explicit global registration in advance. Then we remove auto global registration in a future release.

[xiaoxiangmoe]

Also, can we use something like

/** @jsxImportSource @vue/jsx */

See jsxImportSource example:

• Babel Customizing the Automatic Runtime Import
• TypeScript jsxImportSource demo

[johnsoncodehk]

Also, can we use something like

/** @jsxImportSource @vue/jsx */

This works. I think users should be required to explicitly specify it in tsconfig compilerOptions instead of implicitly adding it automatically in virtual code.

The PR seems to have issues with "jsxImportSource": "@vue/jsx", adding the following file fixes it.

// packages/jsx/jsx-runtime.d.ts
import { h } from './dist/jsx'

export namespace JSX {
  interface Element extends h.JSX.Element { }
  interface ElementClass extends h.JSX.ElementClass { }
  interface ElementAttributesProperty
    extends h.JSX.ElementAttributesProperty { }
  interface IntrinsicElements extends h.JSX.IntrinsicElements { }
  interface IntrinsicAttributes extends h.JSX.IntrinsicAttributes { }
  interface ElementChildrenAttribute extends h.JSX.ElementChildrenAttribute { }
}

[yyx990803]

Closing in favor of https://github.com/vuejs/core/pull/7958 - restructured to vue/jsx-runtime so that it can be used with the more ergonomic @jsxImportSource, also not relying on importing a transitive dep (which can be problematic with strict package managers).