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]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	f1f9527
🔍 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.

[znck]

@vue/jsx instead of ../packages/jsx does not work, don't know why.

[znck]

This produces a warning that ./dist/jsx does not exist. Since we are building in parallel, it is eventually created.

[znck]

I hope it's okay to use @vue/jsx as package name.

[sodatea]

It's more like @vue/tsx though 😂
Unless we are planning to add more functionalities to this package later.

[znck]

Does this count as breaking change?

ElementChildrenAttribute sets the name of children within props. https://www.typescriptlang.org/docs/handbook/jsx.html#children-type-checking

[KaelWD]

Vuetify uses $children. Volar uses $slots but it isn't inside $props so doesn't count.

[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 #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).